@charset "utf-8";
/*메인 common*/
section{width:100%;text-align: center;}
#slide_video1{display:none!important}
button{cursor: pointer}
.dimmed{position: fixed;top:0;right:0;bottom:0;left:0;background: #fff;z-index: 999;width: 100%;height: 100%;opacity: 1;visibility: visible;}
.ir_text, .alt_table, .hidden_label {position: absolute; top:-999999%; left:-999999%; text-indent: -9999px;overflow: hidden;height: 0;}
.ir_text > *, .alt_table > *{text-indent: -9999px;overflow: hidden;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;}
#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.stop #contents:before {visibility:visible;opacity: 1;}

#contents{background: #fff;}
.top_btn{position: relative;max-width: 2000px;}
.top_btn a{overflow: hidden;display:block;position:absolute;right:70px;bottom:50px;width:50px;height:50px;background: url(/Images/company/about/btn_top.png) no-repeat top left;background-position: 0 0;text-indent: 101%;white-space: nowrap;}
.top_btn a:hover{background-position: 0 -50px;}
.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: 100vh;}
.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_img{position:absolute;width:100%;height: 100%;background-image: url("../../../img/scroll_arrow.png");background-size:26px 12px;}
.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;}
}

.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;
}
.main_tit_box{padding-top:110px;text-align:center}
.main_tit_box h3{color:#212121; font-size:50px; font-weight:800;}
.main_tit_box p{color:#666; font-size:17px; font-weight:normal; margin-top:20px;}
/*end_common*/



#wrap.main .dimmed{transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;transition-delay: 0.2s;-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s; background: #fff;}
.dimmed.fout{opacity: 0;visibility: hidden;}
#contents{overflow: hidden;position: relative;}
#contents .section .bg span.line1{left: 0%;}
#contents .section .bg span.line1{left: 180px;}
#contents .section .bg span.line2{left: 360px;}
#contents .section .bg span.line3{left: 540px;}
#contents .section .bg span.line4{left: 720px;}
#contents .section .bg span.line5{left: 900px;}
#contents .section .bg span.line7{right: 0; }
#contents .btn_orange{/*background: url('../../../img/btn_bg.png') no-repeat center top;*/width: 202px;height: 46px;line-height: 46px;margin: 0 auto;display: block;overflow: hidden;color: #fff;text-align: center;font-size: 0;border: 1px solid rgba(255,255,255,0.8); box-sizing:border-box}
#contents .btn_orange:hover{background: url('../../../img/btn_bg.png') no-repeat center top; border:none}
#contents .btn_orange .label{display: inline-block;vertical-align: middle;font-size: 16px;padding: 0 10px;line-height: 17px;  padding-top: 1px;}
#contents .btn_orange.eng{width: 160px;border-radius: 100px;}
#contents .btn_orange.eng .label{font-size: 13px;line-height: 13px;font-weight: bold;letter-spacing: 1.1px;}
#contents .btn_orange .ico{display: inline-block;vertical-align: middle;height: 12px;overflow: hidden;opacity: 0;margin-left: -7px;width:7px;text-align: right;
    -webkit-transition: all 0.2s; -moz-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;
}
#contents .btn_orange .ico img{max-width: none; }
#contents .btn_orange:hover .ico{opacity: 1;width:15px;margin-left: 0;text-align: right;}
#contents .btn_orange:hover .ico img{left: 0;}
#contents .slide_section{position: relative;min-height: 969px;}
#contents .slide_section .bg{opacity: 0;z-index:0;position: absolute;top:0;right:0;bottom: 0;left:0;
    transform:scale(1.4) rotate(0.1deg);-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-o-transform:scale(1.4);
    -webkit-transition:opacity 2s;-moz-transition:opacity 2s;-o-transition:opacity 2s;transition:opacity 2s;
}
#contents .slide_section .bg.active {opacity: 1;z-index: 2;}
#contents .slide_section .bg.motion{
    transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);
    -webkit-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;
    -moz-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;
    -o-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;
    transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;
}
#contents .slide_section .bg img{width: 100%;max-width: none;}
#contents .slide_section .bg1{background:#000 url('../../../img/main_slide1.jpg') no-repeat center;background-size: cover}
#contents .slide_section .bg2{background:#000 url('../../../img/main_slide2.jpg') no-repeat center;background-size: cover}
#contents .slide_section .bg3{background:#000 url('../../../img/main_slide3.jpg') no-repeat center;background-size: cover}
#contents .slide_section .bg4{background:#000 url('../../../img/main_slide4.jpg') no-repeat center;background-size: cover}
#contents .slide_section .timer_circle{background: url('../../../img/ico_scroll.png') no-repeat center;position: absolute;bottom:70px;left:50%;margin-left:-25px;z-index: 2;font-size: 0;}
#contents .slide_section .title_wrap{position: absolute;top:50%;left:0;right:0;margin-top:-215px; z-index: 2;text-align: center;color: #fff;}
#contents .slide_section .title_wrap .text{position: relative;height: 400px;}
#contents .slide_section .title_wrap .text li{position: absolute;top:0;left:0;right:0;letter-spacing: 0;}
#contents .slide_section .title_wrap .text li i{opacity: 0;visibility: hidden;font-size:20px; font-weight:bold; font-style:normal; display:inline-block; position:relative;transform: translateY(30px);-webkit-transition: all 1.2s;-moz-transition: all 1.2s;-o-transition: all 1.2s;transition: all 1.2s; margin-bottom:70px;letter-spacing: 3px;}
#contents .slide_section .title_wrap .text li i:after{content:""; display:block; width:100%; height:3px; background:#fff; position:absolute; bottom:0; left:0;-webkit-transform: translateY(30px);-moz-transform: translateY(30px);-ms-transform: translateY(30px);-o-transform: translateY(30px);transform: translateY(30px);-webkit-transition: all 1.2s;-moz-transition: all 1.2s;-o-transition: all 1.2s;transition: all 1.2s; opacity:0; visibility:hidden; margin-bottom:22px}
#contents .slide_section .title_wrap .text li i.af_no:after{display:none}
#contents .slide_section .title_wrap .text li h2{opacity: 0;visibility: hidden;font-size:70px;line-height: 78px;font-weight: bold;padding: 0 0 50px;-webkit-transform: translateX(-100px);-moz-transform: translateX(-100px);-ms-transform: translateX(-100px);-o-transform: translateX(-100px);transform: translateX(-100px);-webkit-transition: all 1.2s;-moz-transition: all 1.2s;-o-transition: all 1.2s;transition: all 1.2s}
#contents .slide_section .title_wrap .text li h2.kr{font-size:66px}
#contents .slide_section .title_wrap .text li h2 > span{display:block; font-weight:normal; font-size:50px}
#contents .slide_section .title_wrap .text li p{opacity: 0;visibility: hidden;-webkit-transform: translateX(100px);-moz-transform: translateX(100px);-ms-transform: translateX(100px);-o-transform: translateX(100px);transform: translateX(100px);-webkit-transition: all 1.2s;-moz-transition: all 1.2s;-o-transition: all 1.2s;transition: all 1.2s; font-size:18px;}
#contents .slide_section .carousel{  position: absolute;bottom:40%;left:0;right:0;font-size: 0;letter-spacing: 0;word-spacing: 0;opacity: 0;visibility: hidden;}
#contents .slide_section .carousel li{display: inline-block;width: 18px;height: 2px;background: #fff;margin: 0 1px;opacity: .4;}
#contents .slide_section .carousel li.active{opacity: 1}
#contents .slide_section .title_wrap .text li.active i{opacity: 1;visibility: visible;}
#contents .slide_section .title_wrap .text li.active i:after{opacity: 1;visibility: visible;}
#contents .slide_section .title_wrap .text li.active h2{opacity: 1;visibility: visible;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-ms-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);}
#contents .slide_section .title_wrap .text li.active p{opacity: 1;visibility: visible;-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-ms-transform: translateX(0px);-o-transform: translateX(0px);transform: translateX(0px);}
#contents .slide_section .title_wrap .text li.leave i{opacity: 0;visibility: hidden;}
#contents .slide_section .title_wrap .text li.leave i:after{opacity: 0;visibility: hidden;-webkit-transform: translateY(30px);-moz-transform: translateY(30px);-ms-transform: translateY(30px);-o-transform: translateY(30px);transform: translateY(30px);}
#contents .slide_section .title_wrap .text li.leave h2{opacity: 0;visibility: hidden;-webkit-transform: translateX(100px);-moz-transform: translateX(100px);-ms-transform: translateX(100px);-o-transform: translateX(100px);transform: translateX(100px);}
#contents .slide_section .title_wrap .text li.leave p{opacity: 0;visibility: hidden;-webkit-transform: translateX(-100px);-moz-transform: translateX(-100px);-ms-transform: translateX(-100px);-o-transform: translateX(-100px);transform: translateX(-100px);}
#contents .slide_section .btn_view_more{opacity: 0;visibility: hidden;}
#contents .slide_section .btn_view_more span{display: inline-block}
@keyframes circleMotion {
    0% {
        transform: scale3d(1, 1, 1) rotate(0.1deg); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1);
    }
    21% {
        opacity: 1;
        visibility: visible;
    }
    95%{
        transform: scale3d(1.14, 1.14, 1.14) rotate(0.1deg); -webkit-transform: scale3d(1.14, 1.14, 1.14); -moz-transform: scale3d(1.14, 1.14, 1.14); -o-transform: scale3d(1.14, 1.14, 1.14);
    }

    100% {
        opacity: 0;visibility: hidden;
        transform: scale3d(1, 1, 1) rotate(0.1deg); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1);
    }
}

/*제품*/
.pro_section{ background:url(../../../img/main_pro_bg.png) no-repeat left top;}
.section .product_list{margin-top:100px; width:100%; position:relative;}
.section .product_list li{float:left; width: calc( 25% - 8.3px); margin-left:11px; background:#f9f9f9; border:1px solid #ebebeb; box-sizing:border-box;padding: 14px 0 18px;}
.section .product_list li:first-child{margin-left:0;}
.section .product_list li a{display:block; width:100%; height:100%; position:relative;}
.section .product_list li .img_box{width:240px; height:240px; box-sizing:border-box; margin:0 auto; border-radius:50%; overflow:hidden; position:relative;}
.section .product_list li a .img_box:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:1px solid rgba(255,255,255,.4);transition:border-width .3s; z-index:8}
.section .product_list li a:hover .img_box:before{border-width:20px; border-radius:50%;}
.section .product_list li a .img_box:after{width:100%; height:100%; content:""; display:block; position:absolute; left:0; top:0; background:rgba(0,0,0,0.2); opacity:0;}
.section .product_list li a:hover .img_box:after{ opacity:1}
.section .product_list li a:hover .img_box > p{position: absolute;top: 50%;left: 0;width: 100%;z-index:10;color: #fff;text-align: center;font-weight: bold; font-size:14px; margin-top:-8px}
.section .product_list li a:hover .img_box > p > span{display: inline-block;width: 17px;height: 17px;overflow: hidden; background:url(../../../img/ico_arw.png) no-repeat left bottom;  position:relative; top:4px; left:6px}
.section .product_list li a .caption{width:100%; text-align:center; margin-top:30px; line-height:35px;}
.section .product_list li a .caption dl dt{font-size:18px; color:#383838; font-weight:normal}
.section .product_list li a .caption dl dd{font-size:24px; font-weight:bold; color:#202020; padding:15px 0}
/*쇼핑몰배너*/

#atc03{position:relative;width:100%;height:487px;overflow:hidden;background:#ccb197 url(../../../img/circle_bg.png) 92% -30px no-repeat; margin-top:135px}
#atc03_wrap{position:relative;width:1200px;margin:0 auto}
#atc03 .img_banner{z-index:0}
#atc03 .img_banner:after{display:block;visibility:hidden;clear:both;content:""}
#atc03 .img_banner .img{position:absolute;top:0;left:-400px}
#atc03 .img_banner .txt{position:relative;float:right;width:50%;height:487px;padding:72px 0 0 50px;font-size:15px;color:rgba(255, 255, 255, 0.9);z-index:10; box-sizing:border-box; text-align:left; line-height:1.8}
#atc03 .img_banner .txt .tit{padding-bottom:25px;font-size:48px;line-height:1.2;font-weight:400;color:#fff;text-transform:uppercase;}
#atc03 .img_banner .txt .tit span.s_tit{font-size:17px; margin-bottom:6px}
#atc03 .img_banner .txt .tit span.bold{font-weight:800; font-size:63px}
#atc03 .img_banner .txt .tit span.color_y{color:#e73221}
#atc03 .img_banner .txt span{color:#fff;display: inline-block;}
#atc03 .img_banner .txt span.s_tit{ font-size:17px}
#atc03 .img_banner .txt .cmt{position:absolute;right:-109px;top:107px;width:112px;font-size:11px;color:#fff;letter-spacing:.2px;}
#atc03 .img_banner .txt .cmt:before{display:inline-block;width:5px;height:5px;content:"";margin:0 17px 2px 0;border-radius:50%;background-color:#e73221}
#atc03 .img_banner .txt .view_btn:before{content:""; display:block; background:#e73221; width:100%; height:100%; z-index:-2; position:absolute; left:0; top:0}
#atc03 .img_banner .txt .view_btn{display:block;position:relative;width:185px;height:57px;margin-top:42px;font-size:13px;font-weight:700;line-height:57px;color:#fff;overflow:hidden;text-align:center;letter-spacing: 2px;}
#atc03 .img_banner .txt .view_btn:after{position:absolute;content:"";height:0%;left:50%;top:50%;width:150%;z-index:-3;-webkit-transition:all .3s ease 0s;transition: all .3s ease 0s;background:#fff;opacity:.5;-ms-transform:translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
#atc03 .img_banner .txt .view_btn:hover:after{height:140%;opacity:1; z-index:-1}
#atc03 .img_banner .txt .view_btn:hover{color:#e73221}
#atc03 .grid{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;width:100%;max-width:1200px}
#atc03 .grid span{display:block;position:absolute;top:0;z-index:1;width:1px;height:100%;background:rgba(255, 255, 255, 0.2)}
#atc03 .grid span.line01{left:-245px}
#atc03 .grid span.line02{right:0}
/*스토리*/
.story{width:100%; height:770px; background:#ebebed;}
.story .mStoryList{overflow:hidden; margin-top:57px;}
.story .mStoryList li{float:left; width:400px;}
.story .mStoryList li .imgA,
.story .mStoryList li .imgA img{width:400px; height:200px; position:relative}
.story .mStoryList li .imgA:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:1px solid rgba(255,255,255,.4);transition:border-width .3s; z-index:8}
.story .mStoryList li a:hover .imgA:before{border-width:20px;}
.story .mStoryList li a .imgA:after{width:100%; height:100%; content:""; display:block; position:absolute; left:0; top:0; background:rgba(0,0,0,0.5); opacity:0;}
.story .mStoryList li a:hover .imgA:after{ opacity:1}
.story .mStoryList li .imgA > span{position: absolute;top:25%;left: 0;width: 100%;z-index:10;color: #fff;text-align: center;font-weight: bold; font-size:20px; display:block;opacity:0;}
.story .mStoryList li .imgA > span > b{display: block; text-align: center;font-size: 13px; font-weight: 300; padding-top: 8px;}
.story .mStoryList li .imgA > span > i{display:block;width:41px;height:41px;overflow: hidden; background:url(../../../img/product_more_btn.png) no-repeat left bottom; margin:20px auto 0;}
.story .mStoryList li a:hover .imgA > span {opacity:1}
.story .mStoryList li a{display:block; float:left; width:100%; height:100%; overflow:hidden; text-align:center;}
.story .mStoryList li a .txtA{width:400px; height:200px; background:url('../../../img/mSection_story_arrow.gif') center 134px no-repeat #fff;}
.story .mStoryList li a .tit{display:block; font-size:18px; color:#000; padding-top:29px; font-weight:800}
.story .mStoryList li a .txt{display:block; font-size:15px; color:#555; margin-top:14px; line-height:24px;}