@charset "utf-8";
@import url('main.css');

/* ==============================
 * common - 컨텐츠 공통
 * ============================== */
html,body { display:block; height:100%;}

body.hidden {overflow: hidden;}
body.scrollLock {overflow: hidden;}

.tc { text-align:center;}

/* 글자색 */
.txtRed1 { color:#de190a;}
.txtBlue1 { color:#003388;}
.txtGray1 { color:#999999;}

/* 글자 숨기기 */
.hidden { overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; font-size:0;}
 
 /* form */
.formbox {display:flex;display:-ms-flex; margin-bottom:20px; align-items:center;}
.formbox + .formbox { margin-top:20px;}
.formbox .tit { flex: 0 0 auto; width:190px; font-size:24px; color:#111; font-weight:800;}
.formbox .tit strong { color:#999999;}
.formbox > * { width:100%;}

.checkboxWrap { display:flex;}
.checkboxWrap > div { flex:1 1 auto;}

.checkbox { position:relative; margin:24px 0;}
.checkbox input { position:absolute; opacity:0;}
.checkbox label { position:relative; padding-left:40px; font-size:16px; color:#999;}
.checkbox label:before { content:''; display:block; position:absolute; top:0; left:0; width:25px; height:24px; background:url('../images/common/icon_checkbox.png') no-repeat;}
.checkbox input:checked + label:before { background-image:url('../images/common/icon_checkbox_on.png')}

.formbox .inputBox { display:flex;}
.formbox .inputBox * { width:100%; padding:0; margin:0; padding-left:35px; border:1px solid #e1e1e1; height:70px; box-sizing:border-box; background:none;}
.formbox .inputBox * + * { margin-left:10px;}
.formbox .inputBox .btnAddress { flex:0 0 auto; width:180px; height:70px; margin-left:0; padding-left:0; line-height:70px; font-size:16px; color:#ffffff; text-align:center; background:#c6c6c6}
.formbox .inputBox textarea { height:360px; padding:30px; resize:none;}

/* dotList */
.dotList {}
.dotList li { position:relative; padding-left:10px;}
.dotList li + li { margin-top:10px;}
.dotList li:before { content:''; display:block; position:absolute; top:12px; left:0; width:3px; height:3px; border-radius:50%; background:#9c9b9b;}
.dashList {}
.dashList li { position:relative; padding-left:15px;}
.dashList li:before { content:''; display:block; position:absolute; top:11px; left:0; width:4px; height:2px; background:#788391;}

/* 게시판 */
.tableList { border-bottom:1px solid #000000;}
.tableList th { height:80px;  font-size:18px; color:#fff; font-weight:800; background:#000000;}
.tableList td { padding:30px 10px; border-top:1px solid #eaeaea; padding-left:80px; font-size:16px; text-align:left; font-weight:300; color:#565555;}
.tableList td + td { border-left:1px solid #eaeaea;}
.tableList td:nth-child(2) { padding:30px 10px; text-align:center; color:#788252;}
.tableList tbody tr:nth-child(even) { background:#f7f7f7;}

.tableList.type2 {}
.tableList.type2 td:nth-child(1) { text-align:center; color:#788252; padding-left: 0;}	
.tableList.type2 td:nth-child(2) { padding-left:80px; color:#565555; text-align: left;}


/* 페이징 */
.paging { margin-top:40px; font-size:0; text-align:center;}
.paging strong,
.paging a { display:inline-block; width:40px; height:40px; margin:0 2px; border:1px solid #d9d9d9; vertical-align:middle; font-size:14px; line-height:38px;}
.paging a:hover { border-color:#3d644a; transition: all .3s ease;}
.paging strong { color:#fff; background:#111; }
.paging a[class*=btn] { border:0; font-size:0;}
.paging a.btnFirst { background:url('../images/common/btn_paging_prev1.jpg') no-repeat;}
.paging a.btnPrev { background:url('../images/common/btn_paging_prev2.jpg') no-repeat;}
.paging a.btnNext { background:url('../images/common/btn_paging_next1.jpg') no-repeat;}
.paging a.btnLast { background:url('../images/common/btn_paging_next2.jpg') no-repeat;}

/* tabList */
.tabList { position:relative; display:flex;}
.tabList:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #c8c8c8; box-sizing:border-box;}
.tabList a { flex:1 1 auto; position:relative; height:80px; line-height:80px; text-align:center; font-size:20px; color:#5c5c5c;}
.tabList a:before { content:''; display:block; position:absolute; top:0; left:0; width:1px; height:100%; background:#c8c8c8;}
.tabList a.on { color:#111111; font-weight:800;}
.tabList a.on:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #000000; box-sizing:border-box;}

/* 버튼 클릭 모션 */
body .btn {display:inline-block; min-width: 150px; height: 50px; padding:0 10px; border: 0; border-radius: 5px; color: #fff; font-size: 17px; font-weight:bold; cursor:pointer; line-height:50px; color:#fff; text-align:center; vertical-align:middle; background:#333;}

/* 클릭 모션 */
.clickMotion { overflow:hidden; position:relative;}
.click-in { display:block; position:absolute; background:rgba(255,255,255,0.4); border-radius:100%; transform:scale(0); -webkit-transform:scale(0);}
.click-in.animate {-webkit-animation:btnClick 0.65s linear;animation:btnClick 0.65s linear;}

.clickMotion1.on { overflow:hidden; position:relative; animation:clickMotionM .65s;}
.clickMotion2.on { overflow:hidden; position:relative; animation:clickMotionM2 .65s;}

@keyframes clickMotionM{
	0% {transform:scale(1)}
	20% {transform:scale(0.9)}
	40% {transform:scale(1.1)}
	60% {transform:scale(0.95)}
	80% {transform:scale(1)}
	100% {transform:scale(1)}
}
@keyframes clickMotionM2{
	25% {transform:skewX(10deg) skewY(5deg)}
	75% {transform:skewX(-10deg) skewY(-5deg)}
}
@keyframes btnClick{
	0% { transform:scale(0); -webkit-transform:scale(0); opacity:1;}
	100% { transform:scale(2.5); -webkit-transform:scale(2.5); opacity:0;}
}
@-webkit-keyframes btnClick{
	0% { transform:scale(0); -webkit-transform:scale(0); opacity:1;}
	100% { transform:scale(2.5); -webkit-transform:scale(2.5); opacity:0;}
}


 /* layerPopup */
.layerPopWrap { visibility:hidden; display:flex; display:-ms-flex; align-items:center; position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; opacity:0; transition:all .2s ease}
.layerPopWrap .bg {position:fixed; top:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.8);}
.layerPopWrap .layerPopCont { display:flex; display:-ms-flex; flex-direction:column; position:relative; width:500px; max-height:90%; border-radius:8px; margin:0 auto; border:1px solid #cccccc; opacity:0; background:#fff;}
.layerPopWrap .layerPopCont .popTitle { height:62px; padding-left:30px; border-radius:8px 8px 0 0; font-size:20px; color:#333333; font-weight:bold; line-height:62px; background:#f1f3f4;}
.layerPopWrap .layerPopCont .contBox { padding:30px;}
.layerPopWrap .layerPopCont > .btnPopClose { position:absolute; top:-60px; right:0; width:62px; height:62px; font-size:0;}
.layerPopWrap .layerPopCont > .btnPopClose >span { position:absolute; top:50%; left:50%; width:30px; height:3px; transform:translate(-50%,-50%); transition:all .3s ease;}
.layerPopWrap .layerPopCont > .btnPopClose >span:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; transform:rotate(45deg)}
.layerPopWrap .layerPopCont > .btnPopClose >span:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; transform:rotate(-45deg)}
.layerPopWrap .layerPopCont > .btnPopClose:hover > span { transform:translate(-50%,-50%) rotate(180deg);}
.layerPopWrap .layerPopCont.youtube { width:auto;}
.layerPopWrap .layerPopCont.youtube .contBox { overflow:hidden; padding:0; border-radius:8px;}
.layerPopWrap .layerPopCont.youtube .contBox .video { position:relative; width:800px; padding-top:52%;}
.layerPopWrap .layerPopCont.youtube .contBox .video iframe { position:absolute; top:0; left:0; width:100%; height:100%;}

.layerPopWrap .layerPopCont .btnPopGroup { margin-top:10px; text-align:center; font-size:0;}
.layerPopWrap .layerPopCont .btnPopGroup .btn { display:inline-block; min-width:145px; height:50px; padding:0 30px; border-radius:5px; font-size:17px; color:#fff; line-height:50px; background:#1c9bd7;}
.layerPopWrap .layerPopCont .btnPopGroup .btn + .btn { margin-left:10px;}

.layerPopWrap.alertPop .layerPopCont { width:300px; border:0;}
.layerPopWrap.alertPop .layerPopCont .contBox { height:auto; padding:30px 30px 0px; font-size:15px; color:#666666;}
.layerPopWrap.alertPop .layerPopCont .btnPopGroup { overflow:hidden; display:flex; display:-ms-flex; margin:40px -30px 0; border-radius:0 0 8px 8px;}
.layerPopWrap.alertPop .layerPopCont .btnPopGroup .btn { width:100%; border-radius:0;}
.layerPopWrap.alertPop .layerPopCont .btnPopGroup .btn + .btn { margin:0; background:silver}

.layerPopWrap.on { visibility:visible; opacity:1;}
.layerPopWrap.on .layerPopCont{ animation:fadeInUp .4s ease-in-out forwards;}
 
.imgPc { display:block;}
.imgMo { display:none;}



@media screen and (max-width:800px){
	.layerPopWrap .layerPopCont.youtube { width:90%; margin:0 5%;}
	.layerPopWrap .layerPopCont.youtube .contBox .video { width:100%;}
	
}

 /* ==============================
 * content
 * ============================== */
.innerBox { position:relative; max-width:1240px; margin:0 auto; padding:0 20px;}

#container { overflow:hidden; padding-top:80px;}

.page1Wrap { padding-bottom:150px;}
.page1Wrap h1 { padding:70px 0 100px; font-size:64px; color:#111; font-family: 'Gmarket'; font-weight:normal; letter-spacing: -4px;}

.page1Wrap .imgBox1 { height:560px; background:url('../images/img_page1_1.jpg') no-repeat center center; background-size:cover;}
.page1Wrap .imgBox1 .title { padding-top:180px; font-size:30px; color:#111; line-height:1.2; font-weight:800;}
.page1Wrap .imgBox1 .title2 { margin-top:10px; font-size:30px; font-size:64px; color:#111; font-family: 'Gmarket'; font-weight:normal; letter-spacing: -4px;}
.page1Wrap .imgBox1 .text { margin-top:30px; font-size:16px; color:#fff;}

.page1Wrap .imgBox1.bg2 { height: 596px; background-image:url('../images/img_page1_6.png');}
.page1Wrap .imgBox1.bg2 .title { padding-top:260px;}
.page1Wrap .imgBox1.bg2 .text { margin-top:20px; font-size:18px; color:#555555;}

.page1Wrap .imgBox1.bg3 { height: 596px; background-image:url('../images/img_page1a_1.png');}
.page1Wrap .imgBox1.bg3 .title { padding-top:260px;}
.page1Wrap .imgBox1.bg3 .text { margin-top:20px; font-size:18px; color:#555555;}


.page1Wrap .productBox { padding:120px 0 150px;}
.page1Wrap .productBox h2 { position:relative; padding-bottom:115px; font-size:74px; font-family: 'Gmarket'; color:#111314; font-weight:normal; line-height:1; letter-spacing: -4px;}
.page1Wrap .productBox h2 .subTit { display:block; margin-bottom:45px; font-size:20px; color:#b09160; font-weight:800; font-family: 'NotoSans'; line-height:1; letter-spacing:0.1px;}
.page1Wrap .productBox h2 .subTit2 { display:block; margin-top:15px; font-size:24px; color:#121314; font-weight:300; line-height:1; letter-spacing:0.1px;}
.page1Wrap .productBox h2:after { content:''; display:block; position:absolute; z-index:1; bottom:-60px; left:0; width:1px; height:150px; background:#000;}
.page1Wrap .productBox .textBox { position:relative; padding-bottom:70px; background:#f5f5f5;}
.page1Wrap .productBox .textBox:before { content:''; display:block; position:absolute; top:0; left:-120px; width:120px; height:100%; background:#f5f5f5;}
.page1Wrap .productBox .textBox:after { content:''; display:block; position:absolute; top:0; right:-1000px; width:1000px; height:100%; background:#f5f5f5;}
.page1Wrap .productBox .textBox h3 { padding-top:110px; font-size:30px; color:#252828; font-weight:800;}
.page1Wrap .productBox .textBox .img { position:absolute; z-index:1; right:-120px; top:-300px;}
.page1Wrap .productBox .textBox .text { margin:10px 0 70px; font-size:18px; color:#565555;}
.page1Wrap .productBox .textBox .list { display:flex; flex-wrap: wrap;}
.page1Wrap .productBox .textBox .list li { flex:1 1 auto; display:flex; width:50%; padding:50px 0; align-items:center; border-top:1px solid #dcdcdc; line-height:1.25; font-size:16px; color:#565555; letter-spacing:-0.5px;}
.page1Wrap .productBox .textBox .list li .number { flex:0 0 auto; display:block; width:40px; height:40px; margin-right:30px; border:1px solid #dbdbdb; border-radius:50%; font-size:12px; color:#111111; font-weight:bold; line-height:38px; text-align:center;}

.page1Wrap .productBox.type2 { background:#e6e5d5;}
.page1Wrap .productBox.type2 h2 { margin-left:600px;}
.page1Wrap .productBox.type2 .textBox .img { right:auto; left:-120px;}
.page1Wrap .productBox.type2 .textBox h3 { margin-left:600px;}
.page1Wrap .productBox.type2 .textBox .text { margin-left:600px;}

.page1Wrap .productBox.type3 { padding-bottom:0;}
.page1Wrap .productBox.type3 h2:after { height:100px}
.page1Wrap .productBox.type3 .textBox .text { padding-top:120px; margin:0px 0 70px; font-size:30px; color:#111; font-weight:bold; line-height:1.6;}
.page1Wrap .productBox.type3 .textBox:before { left:auto; right:0; width:100%; transform: translateX(-100%);}

.page1Wrap .SpecificationBox { position:relative;}
.page1Wrap .SpecificationBox:before { content:''; display:block; position:absolute; top:0; left:0; right:0; height:908px; background:#f7f7f7;}
.page1Wrap .SpecificationBox h2 { padding:150px 0 130px; font-size:40px; color:#111; text-align:center;}
.page1Wrap .SpecificationBox .img { overflow:hidden; margin-bottom:110px;}
.page1Wrap .SpecificationBox .img img { float:left; display:block; width:50%;}
.page1Wrap .SpecificationBox .img.tc img { float:none; margin:0 auto;}

.page1Wrap .productIcoList { padding:50px 0;}
.page1Wrap .productIcoList ul { display:flex;}
.page1Wrap .productIcoList ul li { display:flex; width:33.333%; align-items: center; justify-content: center;}
.page1Wrap .productIcoList ul li + li {border-left:1px solid #000;}
.page1Wrap .productIcoList .img { margin-right:30px;}
.page1Wrap .productIcoList .text { font-size:30px; color:#252828; text-align:center;}

.page2Wrap h1 { padding:80px 0 70px; color:#111; font-size:50px; font-weight:800;}
.page2Wrap h2.tit { padding:130px 0 70px; color:#111; font-size:40px; font-weight:800;}
.page2Wrap img { width:100%;}
.page2Wrap .img { height:616px; background:url('../images/img_page2_1.jpg') no-repeat center center; background-size:cover;}
.page2Wrap .img1 { margin-top:100px}
.page2Wrap .img2 { margin-bottom:140px}
.page2Wrap .list { padding:60px 0;}
.page2Wrap .list li { position:relative; padding:50px 0; line-height:1.25; font-size:16px; color:#565555; letter-spacing:-0.5px;}
.page2Wrap .list li + li { border-top:1px solid #dcdcdc;}
.page2Wrap .list li .number { display:block; position:absolute; top:45px; left:0; width:40px; height:40px; margin-right:30px; border:1px solid #dbdbdb; border-radius:50%; font-size:12px; color:#111111; font-weight:bold; line-height:38px; text-align:center;}
.page2Wrap .list .textBox { padding-left:140px;}
.page2Wrap .list .textBox h2 { font-size:26px; color:#252828; font-weight:800;}
.page2Wrap .list .textBox .text { margin-top:25px; font-size:16px; color:#565555;}
.page2Wrap .bgBox { background:#f8f8f8;}
.page2Wrap .youtube { padding-bottom:150px;}
.page2Wrap .youtube iframe { width:100%; height:640px;}

.page3Wrap { padding-bottom:120px; background:#f9f9f9;}
.page3Wrap.pb0 { padding-bottom:0;}
.page3Wrap h1 { padding:80px 0 60px; color:#111; font-size:50px; font-weight:800; text-align:center;}
.page3Wrap h2 { padding:0px 0 80px; color:#111; font-size:40px; font-weight:800; text-align:center;font-family: 'Gmarket';}
.page3Wrap .list { overflow:hidden; margin-top:100px; margin-left:-147px;}
.page3Wrap .list li { float:left; width:33.333%; padding-left:147px; margin-bottom:120px;}
.page3Wrap .list .img { border-radius:50%; background:#fff; }
.page3Wrap .list .img img { width:100%;}
.page3Wrap .list .text { margin-top:66px; text-align:center; font-size:16px; color:#111111; font-weight:bold;}
.page3Wrap .list .text span { color:#adb1b7;}
.page3Wrap .img2 img { width:100%}

.page3Wrap .textImg1 { position:relative; margin-top:100px; padding-top:60px; padding-bottom:800px;}
.page3Wrap .textImg1:after { content:''; display:block; position:absolute; top:0; left:0; width:1560px; height:894px; background:url('../images/img_page3_8.png') no-repeat;}
.page3Wrap .textImg1 h2 { display:inline-block; width:400px; padding-bottom:0; text-align:left; font-size:40px; color:#252828; font-family: 'NotoSans'; line-height:1.075;}
.page3Wrap .textImg1 .text { display:inline-block; font-size:18px; color:#111; font-weight:bold;}

.page3Wrap .textImg2 { position:relative; padding-top:150px; padding-bottom:150px; background:#f6f5f5;}
.page3Wrap .textImg2:before { content:''; display:block; position:absolute; bottom:0; left:0; width:570px; height:1040px; background:url('../images/img_page3_11.png') no-repeat; background-size:100%;}
.page3Wrap .textImg2 .innerBox { overflow:hidden; padding-left:340px;}
.page3Wrap .textImg2 h2 { position:absolute; top:0; left:0; width:320px; padding-bottom:0; text-align:left; font-size:40px; color:#252828; font-family: 'NotoSans'; line-height:1.075;}
.page3Wrap .textImg2 .textBox { float:left; width:440px; padding-right:40px; border-right:1px solid #dddcdc;}
.page3Wrap .textImg2 .textBox + .textBox { width:440px; padding-left:40px; border-right:0;}
.page3Wrap .textImg2 .textBox .text { padding-left:25px; margin-bottom:130px; font-size:18px; color:#111; font-weight:bold;}
.page3Wrap .textImg2 .textBox .img {}
.page3Wrap .textImg2 .textBox .img span { display:block; margin-bottom:40px; padding-left:25px; font-size:16px; color:#9c9b9b;}


.page4Wrap { background:#f9f9f9;}
.page4Wrap.bg1 { background:#f6f6f6;}
.page4Wrap h1 { padding:80px 0 60px; color:#111; font-size:50px; font-weight:800; text-align:center;}
.page4Wrap .tabList { margin-bottom:100px;}

.page4Wrap .youtube { position:relative; height:680px; margin-bottom:100px;}
.page4Wrap .youtube iframe { position:absolute; top:0; left:0; width:100%; height:100%;}

.page4Wrap .stepList { padding-bottom:100px;}
.page4Wrap .stepList ul { overflow:hidden; margin-left:-60px; font-size:0;}
.page4Wrap .stepList li { display:inline-block; width:33.333%; padding-left:60px; vertical-align: top;}
.page4Wrap .stepList li .textBox { position:relative; margin:40px 0 50px; padding-left:60px}
.page4Wrap .stepList li .number { display:block; position:absolute; top:0; left:0; width:30px; height:30px; border:1px solid #c7c7c7; border-radius:50%; line-height:28px; text-align:center; font-size:12px; color:#111; font-weight:bold;}
.page4Wrap .stepList li h2 { font-size:18px; color:#111111; font-weight:800; text-transform: uppercase;}
.page4Wrap .stepList li .text { font-size:16px; color:#999999;}

.page4Wrap .imgBox { position:relative; background:#f8f8f8;}
.page4Wrap .imgBox .textBox { padding:150px 0 180px;}
.page4Wrap .imgBox h2 { font-size:48px; line-height:1; font-weight:800; color:#252828;}
.page4Wrap .imgBox h2 .number { display:block; width:40px; height:40px; margin-bottom:40px; border:1px solid #c7c7c7; border-radius:50%; line-height:38px; text-align:center; font-size:12px; color:#111; font-weight:bold;}
.page4Wrap .imgBox .dotList { margin-top:40px;}
.page4Wrap .imgBox .dotList li { font-size:20px; color:#111111;}
.page4Wrap .imgBox .img { position:absolute; bottom:52px; right:0; }

.page4Wrap .imgBox.type2 .img { left:-42px; right:auto; bottom:145px;}
.page4Wrap .imgBox.type2 .textBox { padding-bottom:320px; padding-left:63%;}

.page4Wrap .imgBox.type3 .img { right:-13px; top:0; bottom:auto;}

.page4Wrap .imgBox2 { position:relative;}
.page4Wrap .imgBox2 .textBox { position:relative; padding:140px 0 150px;}
.page4Wrap .imgBox2 h2 { font-size:48px; line-height:1; font-weight:800; color:#252828;}
.page4Wrap .imgBox2 h2 .number { display:block; width:40px; height:40px; margin-bottom:40px; border:1px solid #c7c7c7; border-radius:50%; line-height:38px; text-align:center; font-size:12px; color:#111; font-weight:bold;}
.page4Wrap .imgBox2 .text { margin-top:40px; font-size:20px; color:#111111;}
.page4Wrap .imgBox2 .text span { color:#9c9b9b;}
.page4Wrap .imgBox2 .smallText { margin-top:30px; font-size:16px; color:#8faef8;}
.page4Wrap .imgBox2 .dotList { margin-top:40px;}
.page4Wrap .imgBox2 .dotList li { font-size:20px; color:#111111;}
.page4Wrap .imgBox2 .dotList li + li { margin-top:5px;}
.page4Wrap .imgBox2 .img { position:absolute; bottom:0px; right:0; }

.page4Wrap .imgBox2.type2 .img { left:0; right:auto; bottom:0;}
.page4Wrap .imgBox2.type2 .textBox { padding-top:240px; padding-left:60%;}
.page4Wrap .imgBox2.type2 h2 { color:#fff;}
.page4Wrap .imgBox2.type2 .number { color:#fff; border-color:#fff;}
.page4Wrap .imgBox2.type2 .dotList li { color:#fff;}
.page4Wrap .imgBox2.type3 .textBox { padding-top:240px;}

.page4Wrap .bgBox1 { background:#e9e9e9;}
.page4Wrap .bgBox1 .imgBox { background:none;}

.page4Wrap .bgBox2 { background:#fdfdf8;}
.page4Wrap .bgBox2 .imgBox { background:none;}

.page4Wrap .bgBox3 { background:#3265dd;}
.page4Wrap .bgBox3 .imgBox { background:none;}


.page5Wrap { padding-bottom:150px;}
.page5Wrap h1 { padding:80px 0 130px; color:#111; font-size:50px; font-weight:800;}
.page5Wrap .hTit { margin-bottom:100px; font-size:30px; color:#111111; font-weight:800; letter-spacing: -0.5px;}
.page5Wrap .aggreeBox { position:relative; margin-top:70px; padding-top:90px; border-top:1px solid #d4d4d4;}
.page5Wrap .aggreeBox h2 { margin-bottom:60px; font-size:24px; color:#111111; font-weight:800;}
.page5Wrap .aggreeBox .checkbox { position:absolute; top:90px; right:0; margin:0} 
.page5Wrap .aggreeBox .checkbox label { font-size:16px; } 
.page5Wrap .aggreeBox .textScroll { overflow-y:auto; height:520px; padding:50px; border:1px solid #e1e1e1;}
.page5Wrap .aggreeBox .textScroll .tit { margin-bottom:35px; font-size:22px; color:#111111;} 
.page5Wrap .aggreeBox .textScroll .tit2 { margin-bottom:20px; font-size:18px; color:#111111; font-weight:800;} 
.page5Wrap .aggreeBox .textScroll .text { margin-bottom:80px; font-size:16px; color:#999999;}
.page5Wrap .aggreeBox .textScroll .text + .text { margin-top:-60px}
.page5Wrap .aggreeBox .textScroll .text:last-child { margin-bottom:0;}
.page5Wrap .aggreeBox .btn { display:block; width:280px; height:70px; margin-top:50px; border-radius:0; color:#fff; font-size:20px; text-align:center; line-height:70px; background:#22266e;} 


@media screen and (max-width:1240px){
	
	.page1Wrap .productBox .textBox .img { right:0; top:-150px; width:500px;}
	.page1Wrap .productBox .textBox .img img { width:100%;}
	
	.page1Wrap .productBox .textBox .list li { padding-right:30px;}
	.page1Wrap .productBox .textBox .list li br { display:none;}
	
	.page1Wrap .productBox.type2 h2 { margin-left:0px;}
	.page1Wrap .productBox.type2 .textBox .img { left:auto; right:0;}
	.page1Wrap .productBox.type2 .textBox h3 { margin-left:0;}
	.page1Wrap .productBox.type2 .textBox .text { margin-left:0;}
	
	.page1Wrap .SpecificationBox:before { display:none;}
	
	.page2Wrap .list .textBox .text br { display:none;}
	
	.page3Wrap .list { margin-left:-100px;}
	.page3Wrap .list li { width:33.333%; padding-left:100px;}
	
	.page3Wrap .textImg2:before { width:400px; height:729px;}
	.page3Wrap .textImg2 .textBox { width:50%; padding-right:20px;}
	.page3Wrap .textImg2 .textBox + .textBox { width:50%; padding-left:20px; padding-right:0;}
	.page3Wrap .textImg2 .textBox .img img { width:100%;}

	.page4Wrap .stepList ul { margin-left:-30px;}
	.page4Wrap .stepList li { padding-left:30px;}
	.page4Wrap .stepList li .img img { max-width:100%;}	
	
	.page4Wrap .imgBox.type2 .img { left:-42px; right:auto; bottom:145px;}
	.page4Wrap .imgBox.type2 .img img { width:80%;}
	.page4Wrap .imgBox.type2 .textBox { padding-bottom:320px; padding-left:55%;}

}

@media screen and (max-width:1024px){
	.page1Wrap .productBox .textBox .img { top:-100px; width:400px;}

	.page1Wrap .productIcoList .text { font-size:20px;}
	
	.page3Wrap .list { margin-left:-100px;}
	.page3Wrap .list li { width:50%; padding-left:100px;}
	
	.page3Wrap .textImg2 .innerBox { padding-left:20px;}
	.page3Wrap .textImg2 h2 { position:static; width:auto; margin-bottom:60px;}
	.page3Wrap .textImg2 h2 br { display:none;}
	
	
	.page4Wrap .imgBox h2 br { display:none;}
	.page4Wrap .imgBox .img { position:static; text-align:center;}
	.page4Wrap .imgBox .img img { max-width:100%;}
	.page4Wrap .imgBox .textBox { padding:60px 0 100px;}
	.page4Wrap .imgBox .dotList li br { display:none;}
	
	.page4Wrap .imgBox.type2 .textBox { padding:60px 0 100px;}
	.page4Wrap .imgBox.type3 .img { padding-top:20px;}
	
	.page4Wrap .stepList li .textBox { padding-left:0;}
	.page4Wrap .stepList li .number { position:static; margin-bottom:10px;}
	
	.page4Wrap .imgBox2 h2 br { display:none;}
	.page4Wrap .imgBox2 .img { position:static; padding-top:20px; text-align:center;}
	.page4Wrap .imgBox2 .img img { max-width:100%;}
	.page4Wrap .imgBox2 .textBox { padding:60px 0 100px;}
	.page4Wrap .imgBox2 .dotList li br { display:none;}
	.page4Wrap .imgBox2.type2 .textBox { padding:60px 0 100px;}
	.page4Wrap .imgBox2.type3 .textBox { padding:60px 0 100px;}
}

@media screen and (max-width:768px){
	/*
	 * 대타이틀 : 35
	 * 대타이틀2 : 30
	 * 소타이틀 : 26
	 * 텍스트 : 14 
	 * 간격 : 80(40x2), 60, 50, 30
	 */
	.innerBox { padding:0 30px;}
	
	.imgPc { display:none;}
	.imgMo { display:block;}
	.brAll { display:block !important;}
	
	.page1Wrap { padding-bottom:60px;}
	.page1Wrap h1 { padding:50px 0; font-size:35px;}
	.page1Wrap .imgBox1 { height:auto; padding-bottom:60px;}
	.page1Wrap .imgBox1 .title { padding-top:50px; font-size:26px;}
	.page1Wrap .imgBox1 .title br { display:none;}
	.page1Wrap .imgBox1 .text { font-size:14px;}
	.page1Wrap .imgBox1 .text br { display:none;}

	.page1Wrap .imgBox1.bg2 { height:auto; padding-bottom:60px;}
	.page1Wrap .imgBox1.bg2 .title { padding-top:50px; font-size:20px;}
	.page1Wrap .imgBox1.bg2 .title2 { font-size:35px;}
	.page1Wrap .imgBox1.bg2 .text { margin-top:10px; font-size:14px;}

	.page1Wrap .imgBox1.bg3 { height:auto; padding-bottom:60px;}
	.page1Wrap .imgBox1.bg3 .title { padding-top:50px; font-size:20px;}
	.page1Wrap .imgBox1.bg3 .title2 { font-size:35px;}
	.page1Wrap .imgBox1.bg3 .text { margin-top:10px; font-size:14px;}
	.page1Wrap .imgBox1.bg3 .title br { display:inline;}
	.page1Wrap .imgBox1.bg3 .text br { display:inline;}
	
	.page1Wrap .productBox { padding:50px 0 0px;}
	.page1Wrap .productBox h2 { padding-bottom:50px; font-size:30px}
	.page1Wrap .productBox h2 .subTit { margin-bottom:20px; font-size:14px;}
	.page1Wrap .productBox h2 .subTit2 { margin-top:10px; font-size:14px;}
	.page1Wrap .productBox h2:after { display:none;}

	.page1Wrap .productBox .textBox { padding-top:20px; padding-bottom:30px;}	
	.page1Wrap .productBox .textBox .img { position:static; width:auto;}
	.page1Wrap .productBox .textBox h3 { padding-top:30px; font-size:26px;}
	.page1Wrap .productBox .textBox .text { margin-bottom:30px; font-size:14px;}
	.page1Wrap .productBox .textBox .text br { display:none;}
	.page1Wrap .productBox .textBox .list li { width:100%; padding:30px 0; font-size:14px;}

	.page1Wrap .productBox.type3 .textBox .text { padding-top:30px; margin-bottom:30px; font-size:20px;}
	
	.page1Wrap .SpecificationBox h2 { padding:50px 0 30px; font-size:30px;}
	.page1Wrap .SpecificationBox .img { margin-bottom:60px;}
	.page1Wrap .SpecificationBox .img img { width:100%;}
	.page1Wrap .SpecificationBox .img img + img { margin-top:30px;}

	.page1Wrap .productIcoList { padding:30px 0;}
	.page1Wrap .productIcoList ul { display:block;}
	.page1Wrap .productIcoList ul li { width:100%; padding:10px 0; justify-content: flex-start;}
	.page1Wrap .productIcoList ul li + li {border-left:0; border-top:1px solid #000;}
	.page1Wrap .productIcoList .img { width:50px; margin-right:20px;}
	.page1Wrap .productIcoList .img img { max-width:100%;}
	.page1Wrap .productIcoList .text { font-size:16px; text-align: left;}

	
	.tableList th { height:50px;  font-size:13px;}
	.tableList td { padding:20px 5px; font-size:12px;}
	.tableList td:nth-child(2) { padding:20px 5px;}

	.tableList.type2 {}
	.tableList.type2 td:nth-child(1) { padding:20px 5px;}
	.tableList.type2 td:nth-child(2) { padding:20px 5px;}

	/* tabList */
	.tabList a { height:50px; line-height:50px; font-size:14px;}

	.page2Wrap h1 { padding:50px 0 36px; font-size:35px;}
	.page2Wrap h2.tit { padding:40px 0 40px; font-size:30px;}
	.page2Wrap img { width:100%;}
	.page2Wrap .img { height:auto; padding-top:63%; background:url('../images/img_page2_1_m.jpg') no-repeat center center; background-size:cover;}
	.page2Wrap .img1 { margin-top:50px}
	.page2Wrap .img2 { margin-bottom:60px}
	.page2Wrap .list { padding:10px 0 50px;}
	.page2Wrap .list li { padding:40px 0; font-size:26px;}
	.page2Wrap .list li .number { position:static; width:30px; height:30px; margin-bottom:20px; line-height:28px; font-size:10px;}
	.page2Wrap .list .textBox { padding-left:0;}
	.page2Wrap .list .textBox h2 { line-height:1.15;}
	.page2Wrap .list .textBox .text { margin-top:20px; font-size:14px;}
	.page2Wrap .bgBox { overflow:hidden; background:#f8f8f8;}
	.page2Wrap .youtube { position:relative; padding-top:68%; margin:0 -30px 60px;}
	.page2Wrap .youtube iframe { position:absolute; top:0; left:0; width:100%; height:100%;}
	
	.page3Wrap { padding-bottom:60px;}
	.page3Wrap h1 { padding:50px 0 36px; font-size:35px;}
	.page3Wrap h2 { padding:20px 0 40px; font-size:30px;}
	.page3Wrap .list { margin-top:30px; margin-left:-15px; margin-bottom:20px;}
	.page3Wrap .list li { width:50%; padding-left:15px; margin-bottom:30px;}
	.page3Wrap .list .text { margin-top:30px; font-size:14px;}
	
	.page3Wrap .textImg1 { margin:60px -30px 0; padding:0 30px 0;; padding-bottom:300px; background: url(../images/img_page3_8.png) no-repeat center bottom; background-size:auto 300px;}
	.page3Wrap .textImg1 h2 { display:block; width:auto; padding-top:0; padding-bottom:30px; font-size:26px;}
	.page3Wrap .textImg1 .text { font-size:14px;}
	.page3Wrap .textImg1:after { display:none;}
	
	.page3Wrap .textImg2 { padding-top:50px; padding-bottom:60px;}
	.page3Wrap .textImg2 h2 { display:block; width:auto; padding-top:0; margin-bottom:0; padding-bottom:30px; font-size:26px;}
	.page3Wrap .textImg2 .textBox { width:100%; padding-left:0; padding-right:0; border:0;}
	.page3Wrap .textImg2 .textBox + .textBox { width:100%; margin-top:60px; padding-left:0; padding-right:0; border:0;}
	.page3Wrap .textImg2 .textBox .text { padding-left:0; margin-bottom:50px; font-size:14px;}
	.page3Wrap .textImg2 .textBox .img span { padding-left:0; margin-bottom:20px; font-size:12px;}
	.page3Wrap .textImg2:before { width:200px; height:365px;}
	
	.page4Wrap {}
	.page4Wrap h1 { padding:50px 0 36px; font-size:35px;}
	.page4Wrap .tabList { margin-bottom:60px;}
	
	.page4Wrap .youtube { height:auto; padding-top:68%; margin:0 -30px 50px;}
	
	.page4Wrap .stepList ul { margin-left:-15px;}
	.page4Wrap .stepList li { width:50%; padding-left:15px;}
	.page4Wrap .stepList li .textBox { margin:30px 0 50px;}
	.page4Wrap .stepList li .text { font-size:14px}
	
	.page4Wrap .imgBox .textBox { padding:30px 0 30px;}
	.page4Wrap .imgBox .img { padding:20px 0 20px;}
	.page4Wrap .imgBox h2 { font-size:30px;}
	.page4Wrap .imgBox h2 .number { position:static; width:30px; height:30px; margin-bottom:20px; line-height:28px; font-size:10px;}
	.page4Wrap .imgBox .dotList { margin-top:30px;}
	.page4Wrap .imgBox .dotList li { font-size:14px;}
	.page4Wrap .imgBox .dotList li + li { margin-top:5px}
	
	.page4Wrap .imgBox.type2 .textBox { padding:30px 0 30px;}
	
	.page4Wrap .imgBox2 .textBox { padding:30px 0 0px;}
	.page4Wrap .imgBox2 .img { padding-top:20px;}
	.page4Wrap .imgBox2 h2 { font-size:30px;}
	.page4Wrap .imgBox2 h2 .number { position:static; width:30px; height:30px; margin-bottom:20px; line-height:28px; font-size:10px;}
	.page4Wrap .imgBox2 .text { margin-top:30px; font-size:14px;}
	.page4Wrap .imgBox2 .dotList { margin-top:30px;}
	.page4Wrap .imgBox2 .dotList li { font-size:14px;}
	.page4Wrap .imgBox2 .dotList li + li { margin-top:5px}
	.page4Wrap .imgBox2 .smallText { font-size:12px;}
	.page4Wrap .imgBox2 .smallText br {  display:none;}
	.page4Wrap .imgBox2.type2 .textBox { padding:30px 0 0px;}
	.page4Wrap .imgBox2.type3 .textBox { padding:30px 0 0px;}
	
	
	.page5Wrap { padding-bottom:60px;}
	.page5Wrap h1 { padding:30px 0 40px; font-size:35px;}
	.page5Wrap .hTit { margin-bottom:50px; font-size:20px;}
	.page5Wrap .hTit br { display:none;}
	.page5Wrap .aggreeBox { margin-top:50px; padding-top:50px;}
	.page5Wrap .aggreeBox h2 { margin-bottom:20px; font-size:26px;}
	.page5Wrap .aggreeBox .checkbox { position:static; margin-bottom:20px;} 
	.page5Wrap .aggreeBox .checkbox label { font-size:14px; } 
	.page5Wrap .aggreeBox .textScroll { height:350px; padding:20px;}
	.page5Wrap .aggreeBox .textScroll .tit { margin-bottom:25px; font-size:16px;} 
	.page5Wrap .aggreeBox .textScroll .tit2 { margin-bottom:15px; font-size:14px;} 
	.page5Wrap .aggreeBox .textScroll .text { margin-bottom:30px; font-size:12px;}
	.page5Wrap .aggreeBox .textScroll .text + .text { margin-top:-20px}
	.page5Wrap .aggreeBox .textScroll .text:last-child { margin-bottom:0;}
	.page5Wrap .aggreeBox .btn { width:100%; height:50px; margin:30px auto 0; font-size:14px; line-height:50px;} 
	
	 /* form */
	.formbox { display:block; margin-bottom:10px;}
	.formbox + .formbox { margin-top:20px;}
	.formbox .tit { width:100%; margin-bottom:10px; font-size:20px;}
	
	.checkboxWrap { display:block;}
	
	.checkbox { margin:15px 0;}
	.checkbox label { font-size:14px;}
	
	.formbox .inputBox * { padding-left:10px; height:50px; font-size:14px;}
	.formbox .inputBox * + * { margin-left:10px;}
	.formbox .inputBox .btnAddress { width:100px; height:50px; line-height:50px; font-size:14px;}
	.formbox .inputBox textarea { height:200px; padding:10px;}

	
}