/* Common **********************************************************************/ 
html,body {width:100%; }
html {overflow-y:scroll; box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
*{
-webkit-text-size-adjust:none;
-webkit-text-size-adjust-auto | none | N% (default auto)
}
body {word-break:break-all;-ms-word-break:break-all;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0;}
fieldset,img {border:0px none; vertical-align:top;}
dl,ul,ol,menu,li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
button {border:0 none; background-color:transparent; cursor:pointer;}
body { background:#fff;}
body,th,td,input,select,textarea,button {font-size:18px; line-height:1.7; font-family:'Poppins', 'Noto Sans KR'; color:#555;} 
input, select, textarea, button{vertical-align:middle; }
a:link,a:active,a:visited{color:#7d7d7d; text-decoration:none; border:0px;}
a:hover,a:focus{color:#333; text-decoration:none}

table {border-collapse:collapse; border-spacing:0;}
address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;}
summary, caption, legend {width:0; height:0; /*font-size: ; line-height: ;*/ overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;}
caption {position:static;}
/* label hidden 泥섎━ */
.invisible, .hide{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;}
label.invisible{*position:Absolute;}

/* common */
.clfix:after {content: "."; display: block; height:0px; clear: both; visibility: hidden;}
.clfix {display:inline-block;}
.clfix {display:block;}
* html .clfix {height:1%;} /* Hides from IE-mac */
.clfix {zoom:1;} /*for IE 5.5-7*/

.center{text-align:center;}
.inner {width:1200px; margin:0 auto;}
.pc {display:block;}
.tab {display:none;}
.mob {display:none;}
.pc_img {display:inline-block;}
.tab_img {display:none;}
.mob_img {display:none;}


/* === Main === */
#wrap {position:relative; width:100%; margin:0 auto; overflow:hidden; }
#header {position:absolute; top:0; left:0; width:100%; height:90px; z-index: 10; background: #fff;}
#header h1 img {position:absolute; left:60px; top:17px;}
#header .gnb {text-align: center;}
#header .gnb > li {display:inline-block; font-size: 20px; line-height: 90px; margin-right:90px;}
#header .gnb > li:last-child {margin-right: 0;}
#header .gnb > li > a {display:block; color: #222;}
#header .gnb > li:hover > a {font-weight: bold; color: #D50004;}
#header .gnb > li ul {opacity:0; position:absolute; top:120px; z-index:1000; text-align:center; }
#header .gnb > li:nth-child(2) ul {margin-left: 5px;} /* 10px */
#header .gnb > li:nth-child(3) ul {margin-left: -25px;} /* -20px */
#header .gnb > li:nth-child(4) ul {margin-left: -10px;} /* -10px */
#header .gnb > li ul li {line-height:45px;}
#header .gnb > li ul li a {display:block; width:100%; height:100%; font-size:18px; color:#555;}
#header .gnb > li ul li:hover a {font-weight: bold; color: #222;}
#header .gnb_bg {position:absolute; top:90px; left:0; background:rgba(241,241,241,.9); width:100%; height:0;}

#header .join_wrap {position:absolute; right:60px; top:0;}
#header .join_wrap ul li {float:left; font-size: 15px; line-height: 90px;}
#header .join_wrap ul li a {color: #888;}
#header .join_wrap ul li:first-child { font-size: 14px; font-weight: bold; margin-right: 30px; border:1px solid #D50004; padding: 8px 13px; line-height: 1; margin-top: 29px;}
#header .join_wrap ul li:first-child a {color: #D50004;}
#header .join_wrap ul li:first-child:hover {background: #D50004; transition-duration:.4s;}
#header .join_wrap ul li:first-child:hover a {color: #fff;}
#header .join_wrap ul li:nth-child(2) {margin-right: 10px; padding-right: 12px; position:relative;}
#header .join_wrap ul li:nth-child(2)::after {content:''; width:1px; height: 10px; background: #999; position:absolute; right:0; top:40px;}

#header .join_wrap2 {position:absolute; right:60px; top:0;}
#header .join_wrap2 a {display:inline-block; font-size: 15px; line-height: 90px;}
#header .join_wrap2 .orderBtn {font-size: 14px; font-weight: bold; margin-right: 30px; border:1px solid #D50004; padding: 8px 13px 8px 10px; line-height: 1; margin-top: 29px; color: #D50004;}
#header .join_wrap2 .orderBtn:hover {background: #D50004; transition-duration:.4s; color: #fff;}
#header .join_wrap2 .loginBtn {margin-right: 4px; padding-right: 14px; position:relative;}
#header .join_wrap2 .loginBtn::after {content:''; width:1px; height: 10px; background: #999; position:absolute; right:0; top:40px;}
#header .join_wrap2 > div {display:inline-block;}


.navi {display:none;}
.navi .lnb {display:none;}
.navi_btn {display:none;}

.visual {width:100%; height: 100vh; background: url(../images/main/main_visual.jpg) no-repeat center bottom / cover;}
.visual .inner {position:relative; height: 100%;}
.visual .inner .text {position:absolute; left:0; top:50%; transform:translateY(-50%); color: #fff;}
.visual .inner .text h2 {font-size: 60px; font-weight: 300; line-height: 95px; transform:translateY(-20px); transition:0.3s ease-in-out; opacity:0;}
.visual .inner .text h2 strong {font-size: 75px;}
.visual .inner .text p {font-size: 26px; line-height: 45px; margin-top: 40px; padding-top: 40px; position:relative; transform:translateY(-20px); transition:0.5s ease-in-out; opacity:0;}
.visual .inner .text p::before {content:''; width:60px; height: 2px; background: #fff; position:absolute; left:0; top:0;}

.visual.active .inner .text  h2 {opacity:1; transform:translateY(0); transition:0.3s ease-in-out 0.3s;}
.visual.active .inner .text  p {opacity:1; transform:translateY(0); transition:0.5s ease-in-out 0.5s;}

.title span {color: #D50004; font-size: 25px; font-weight: bold; display:block; line-height: 1; margin-bottom: 5px;}
.title h2 {color: #222; font-size: 55px; }

.section1 {width:100%; background: url(../images/main/sec1_bg.jpg) no-repeat center center / cover; padding:120px 0;}
.section1 .title {float:left; width: 40%;}
.section1 .title span {color: #D50004; font-size: 25px; font-weight: bold; display:block; margin-bottom: 25px;}
.section1 .title h2 {font-size: 50px; line-height: 70px; color: #222;}
.section1 .title h2 em {font-weight: 300;}

.section1 .right {float:right; width: 60%;}
.section1 .right p {font-size: 18px; line-height: 32px; margin-top: 55px; word-break:keep-all;}

.section2 {width:100%; padding: 120px 0;}
.section2 .title {text-align: center; margin-bottom: 100px;}

.section2 .b_list li {float:left; width: 50%; height: 350px;}
.section2 .b_list li:first-child {background: url(../images/main/sec2_01.jpg) no-repeat center center / cover; }
.section2 .b_list li:nth-child(2) {background: url(../images/main/sec2_02.jpg) no-repeat center center / cover; transform:translateY(-40px);}
.section2 .b_list li:nth-child(3) {background: url(../images/main/sec2_03.jpg) no-repeat center center / cover;}
.section2 .b_list li:nth-child(4) {background: url(../images/main/sec2_04.jpg) no-repeat center center / cover; transform:translateY(-40px);}
.section2 .b_list li a {display:block; width: 100%; height: 100%; position:relative;}
.section2 .b_list li h3 {color: #fff; font-size: 30px; position:absolute; left:40px; bottom: 70px;}
.section2 .b_list li h3::after {content:''; width: 35px; height: 2px; background: #fff; position:absolute; left:0; bottom:-20px;}

.section2 .inner > img {display:block;margin: 75px auto;}

.section2 .b_list2 {border-top:2px solid #BABABA; border-bottom:1px solid #EAEAEA; width:100%; padding: 50px 0;}
.section2 .b_list2 li {float:left; width: 25%; padding: 0 38px; position:relative; height: 150px; border-right:1px solid #eaeaea;}
.section2 .b_list2 li:last-child {border-right:0;}
.section2 .b_list2 li h3 {font-size: 20px; line-height:30px; color: #222;}
.section2 .b_list2 li .btn {position:absolute; bottom:0; line-height: 1; width: 100%;}
.section2 .b_list2 li .btn span {color: #222; font-size:15px ; font-weight: 500;}
.section2 .b_list2 li .btn img {position:absolute; right:70px;}

.section3 {width:100%; background:url(../images/main/sec3_bg.jpg) no-repeat center center / cover ; padding: 120px 0;}
.section3 .title {margin-bottom: 40px;}
.section3 .arrow_btns button:first-child {margin-right: 22px; padding-right: 25px; position:relative;}
.section3 .arrow_btns button:first-child::before {content:''; width:1px; height: 10px; background:#BEBEBE; position:absolute; right:0; top:5px;}
.section3 .p_list {margin-top:20px; border:1px solid #D8D8D8;}
.section3 .p_list li {border-right:1px solid #D8D8D8; width: 25%; height: 200px; background: #fff; position:relative;}
.section3 .p_list li img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:100%;}

.section4 {width: 100%; padding-top: 120px; margin-bottom:-9px;}
.section4 .title {text-align: center;}
.section4 .title p {margin-top: 30px; font-size: 18px; line-height: 32px;}
.section4 .title p strong {color: #222;}
.section4 iframe {width: 100%; height: 500px; margin-top: 60px;}

.top_btn {position:fixed; right:3%; bottom:40px; width:70px; height: 70px; background: #D50004; border-radius:50%; text-align: center; line-height: 70px;}
.top_btn a {font-size: 18px; font-weight: bold; color: #fff; display:block; width: 100%; height: 100%;}

#footer {width: 100%; background: #222; padding: 35px 0;}
#footer p {font-size: 16px; line-height: 30px; color: #919191;}
#footer p span {margin: 0 10px;}
#footer p.copyright {color: #fff; margin-top: 15px;}

@media screen and (max-width:1200px) and (min-width: 1025px){
    .inner {width:100%; padding:0 2%;}
    #header .gnb > li {margin-right:50px;}
    .visual .inner .text {padding:0 2%;}
    .section2 .b_list2 li {padding:0 10px;}
}