@charset "utf-8";
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0;padding:0;border:0;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;}
html {height:auto;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none; }
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content:none;}
table {border-collapse:collapse;border-spacing:0;}
a {text-decoration:none;color:inherit;}
a:hover {text-decoration:none;}
legend, caption, hr {display:none;}
em {font-style:normal;}
img {vertical-align:top;max-width: 100%;}
input {vertical-align:middle;}
p,h3,h2,h1{letter-spacing: normal;}
input,textarea,button,select{ font-family: sans-serif; }
section{width:100%;text-align: center;}
button{cursor: pointer}

video{object-fit: cover;}
ol, ul,li { list-style: none; }
.dimmed{position: fixed;top:0;right:0;bottom:0;left:0;background: #fff;z-index: 999;width: 100%;height: 100%;opacity: 1;visibility: visible;}
.eng{font-family: 'Arial', sans-serif;background-color: transparent; -webkit-font-smoothing: antialiased;}
.ir_text {text-indent: -9999px;overflow: hidden;font-size: 0 ;height: 0;}
.ir_text >*{text-indent: -9999px;overflow: hidden;font-size: 0 ;height: 0;}
#skipTo {width: 100%; overflow: hidden; position: relative; z-index: 1000;}
#skipTo a {margin: 0px -1px -1px 0px; width: 1px; height: 1px; text-align: center; line-height: 0; overflow: hidden; font-size: 0px; display: block;}
#skipTo a:focus {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}
#skipTo a:hover {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}
#skipTo a:active {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}

#wrap{  min-width: 1200px;max-width: 2000px;margin: 0 auto;}

#wrap.main #gnb .navi > a.left:hover > div.rot_box:after{background-position:center center;}
#wrap.main #gnb .navi > a.right:hover > div.rot_box:after{background-position:center center;}
body.stop #wrap.main #gnb .navi > a.left > div.rot_box:after{background-position:right center;}
body.stop #wrap.main #gnb .navi > a.right > div.rot_box:after{background-position:left center;}

body.stop #misc_btns{opacity: 0;}



/* 스크롤시 */
#gnb.scroll{position: fixed;max-width: none;}
#gnb.scroll .navi{max-width: 2000px;width:100%;top:0 !important;}
#gnb.scroll .navi:after{content: '';position: absolute;bottom:0;left:0;right:0;height: 1px;background: #eaeaea;}
#gnb.scroll .navi ul.depth1 > li .depth2{border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}

#wrap.media_360 #gnb{position: fixed;max-width: none;}
#wrap.media_360 #gnb .navi{max-width: 2000px;width:100%;}
#wrap.media_360 #gnb .navi:after{content: '';position: absolute;bottom:0;left:0;right:0;height: 1px;background: #eaeaea;}
#wrap.media_360 #gnb .navi ul.depth1 > li .depth2{border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}
#contents{position:relative;left:0;}

body.active_left #contents,body.active_right #contents{-webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;}
#contents:before {
    content: "";
    position: absolute;
    top: 0;bottom:0;
    left: 0;right:0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0, 0, 0, 0.75);
    visibility: hidden;

}


body.active_left #header_left{z-index: 998;visibility: visible;}
body.active_right #header_right{z-index: 998;visibility: visible;}


.section{position: relative;width: 100%;  overflow: hidden;background: #fff;}


.section_top{display: block;position: relative;min-height:650px;overflow: hidden;height: 650px;/*z-index:2;*/}
.section_top.type_full{height: 600px;}
.section_top .section_inner{position: relative;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}


.section_top .section_inner .text_container{position: absolute;top:50%;margin-top:-45px;width:100%;text-align: center;color:#ffffff}
.section_top .section_inner .text_container h2{font-size: 68px;line-height: 68px;font-weight: 100;}
.section_top .section_inner .text_container h2:after{content:'';display:block;width:19px;height:1px;background-color: #ffffff;margin:20px auto 23px;}
.section_top .section_inner .text_container p{font-size: 18px;line-height: 28px;font-weight: 300;}

.section_top .scroll_arrow{width:26px;height:26px;margin:0 auto;position: absolute;left:50%;bottom:50px;margin-left: -13px;}
.section_top .scroll_arrow .arrow{position:absolute;width:26px;height:12px;opacity: 0;}

.section_top .scroll_arrow .arrow:nth-child(1){
    -webkit-animation: arrow 1200ms 0s linear infinite ;
    -moz-animation: arrow 1200ms 0s linear infinite ;
    animation:  arrow 1200ms 0s linear infinite ;
}
.section_top .scroll_arrow .arrow:nth-child(2){
    -webkit-animation: arrow 1200ms 400ms linear infinite ;
    -moz-animation: arrow 1200ms 400ms linear infinite ;
    animation:  arrow 1200ms 400ms linear infinite ;
}
.section_top .scroll_arrow .arrow:nth-child(3){
    -webkit-animation: arrow 1200ms 800ms linear infinite ;
    -moz-animation: arrow 1200ms 800ms linear infinite ;
    animation:  arrow 1200ms 800ms linear infinite ;
}
@-webkit-keyframes arrow {
    0% {-webkit-transform: translate(0px, 0px);opacity: 0;}
    50% {-webkit-transform: translate(0px, 9px);opacity: 1;}
    100% {-webkit-transform: translate(0px, 18px);opacity: 0;}
}
@-moz-keyframes arrow{
    0% {-moz-transform: translate(0px, 0px);opacity: 0;}
    50% {-moz-transform: translate(0px, 9px);opacity: 1;}
    100% {-moz-transform: translate(0px, 18px);opacity: 0;}
}
@keyframes arrow {
    0% {transform: translate(0px, 0px);opacity: 0;}
    50% {transform: translate(0px, 9px);opacity: 1;}
    100% {transform: translate(0px, 18px);opacity: 0;}
}


.section_other ul{display:block;width: 100%;overflow: hidden}
.section_other ul li{display:block;float:left;position:relative;width:50%;height:203px;text-align: center;overflow: hidden;}
.section_other ul li:before{content:'';display:block;position: absolute;  width: 1100px;
    height: 224px;
    left: 50%;top:50%;
    margin:-112px 0 0 -550px;transform:scale(0.95);-webkit-transform:scale(0.95);-moz-transform:scale(0.95);
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}


.section_other ul li a{display: block;position: relative;width:100%;height:100%;}
.section_other ul li span{display:block;position: relative;}

.section_other ul li .title{font-size:24px;color:#fff;line-height: 24px;padding-top:75px;  font-weight: 300;}
.section_other ul li .copy{font-size:14px;color:#ffffff;line-height: 24px;margin:10px 0;}

.section_other ul li:hover:before{transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);}
.section_other ul li:hover .link{background: transparent;}
.section_other ul li:hover .link:before{opacity: 1;}


.mot2 {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.mot3 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.mot4 {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.mot5 {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.gnb_mot {

    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;

}
.fclear{
    *zoom:1
}
.fclear:after{
    display:block;
    content:"";
    clear:both;
}



.box {

    height: 70px;
    position: relative;
    color: #111;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

}
/*.btn_left,.btn_right,.center{ -webkit-perspective: 300px;perspective: 300px;}*/
.box div {
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 0;
    transform-origin: 50% 50% -35px;
    -webkit-transform-origin: 50% 50% -35px;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform 1s cubic-bezier(.217,.60,.355,1);
    -moz-transition: transform 1s cubic-bezier(.217,.60,.355,1);
    transition: transform 1s cubic-bezier(.217,.60,.355,1);
}
.box .side1 {transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);}
.box .side2 {transform: rotateX(90deg) rotateY(270deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(0deg);}
.box .side3 {transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);}
.box .side4 {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);background: none !important;}
.box .side5 {transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);}
.box .side6 {transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);}

.step1 .box .side1{transform: rotateX(-90deg) rotateY(90deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(90deg) rotateZ(0deg);}
.step1 .box .side2{transform: rotateX(-90deg) rotateY(270deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(270deg) rotateZ(0deg);}
.step1 .box .side3{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.step1 .box .side4{transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg);}
.step1 .box .side5{transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);}
.step1 .box .side6{transform: rotateX(-90deg) rotateY(180deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(180deg) rotateZ(0deg);}
.btn_left .box div { background: #f1732f;}
.btn_right .box div { background: #e91f3e;}


.btn_left .box .side5 {background:#e85a0e;}
.btn_right .box .side5 {background: #d50021;}
.center .box .side5 {background: #f7f7f7;}
.center .box{position: absolute;}
.center .box div { background: #fff;}

.step2 .center .box div{width: 1060px;-webkit-transition: all 1s;-moz-transition: all 1s;transition: all 1s;}
.step3 .box div{transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out}
.step3 .center .box div.side3{transform: none;-webkit-transform: none;}
#wrap.main #gnb .navi > a.left:hover > .box .side3{background-position:center center;}
#wrap.main #gnb .navi > a.right:hover > .box .side3{background-position:center center;}
body.stop #wrap.main #gnb .navi > a.left > .box .side3{background-position:right center;}
body.stop #wrap.main #gnb .navi > a.right > .box .side3{background-position:left center;}
body.stop #wrap #gnb .navi > a.left:before{content: '';position: absolute;left:0;top:0;bottom:0;width: 1px;background: #fff;  z-index: 1;}
body.stop #wrap #gnb .navi > a.right:before{content: '';position: absolute;right:0;top:0;bottom:0;width: 1px;background: #fff;  z-index: 1;}
/* 로드시 : motion_top에 addClass('in_motion') */

.motion_top .expand_bg {
    -moz-transform: scale(1.12);
    -webkit-transform: scale(1.12);
    -o-transform: scale(1.12);
    -ms-transform: scale(1.12);
    transform: scale(1.12);
    opacity: 0;
}
.motion_top.in_motion .expand_bg {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: transform 2s , opacity 1.5s;
    -moz-transition: transform 2s , opacity 1.5s;
    -ms-transition: transform 2s , opacity 1.5s;
    -o-transition: transform 2s , opacity 1.5s;
    transition: transform 2s , opacity 1.5s;
}

.section_top .back_container{overflow: hidden;width: 100%; height:650px;max-width: 2000px; position: fixed;top:0px;left:0;right:0;z-index: 0; background: #fff;  margin: 0 auto;will-change:transform}
.section_top.type_full .back_container{height: 100vh;}
.section_top .back_container .resize_inner {position:relative;opacity: 0;visibility: hidden;}
.section_top .back_container .back_img {position:relative;width:100%;max-width: none;}
.section_top .back_container img.back_img {position: absolute;top:0px;left:0;right:0;}