@charset "utf-8";
img{max-width: none;}
.section_top .back_container{background: none;}

#gnb .navi{will-change: transform;}

#wrap.company #contents.about{overflow: hidden;background-color: #ffffff;}
.section_top{display: block;position: relative;height: 100vh;min-height:600px;z-index: 0;}
.section_top .section_inner{position: relative;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}



.section_introduction{display:block;position: relative;height:2480px;clear: both;background: #fff;}
.section_introduction .half_line{position: absolute;top:65px;left:50%;margin-left:-1px;width:1px;height:2250px;background-color:#e2e2e2;opacity: 0; }
.section_introduction .half_line:before{content:'';display:block;position:absolute;top:0;left:-3px;border:1px solid #c4c4c4;border-radius: 100%;background-color: #c4c4c4;width:5px;height:5px;}
.section_introduction .half_line:after{content:'';display:block;position:absolute;bottom:-2.5px;left:-3px;border:1px solid #d9d9d9;border-radius: 50%;background-color: #d9d9d9;width:5px;height:5px;}
.section_introduction .half_line.hide{opacity: 0 !important;}

.ci_large_h{position: absolute;top:338px;left:50%;margin-left:117px;pointer-events: none;}
.ci_large_t{position: absolute;top:977px;left:50%;margin-left:-930px;pointer-events: none;}

.section_introduction .circle_container .circle{position:absolute;top:0;left:50%; border-radius: 50%;z-index: 0;opacity: 0;transform: scale(0);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
.section_introduction .circle_container .circle.on{transform: scale(1);opacity: 1;}
.section_introduction .circle_container .circle:nth-child(1){top:539px;margin-left:-647px;width:74px;height:74px;background-color: #fce3d5;}
.section_introduction .circle_container .circle:nth-child(2){top:357px;margin-left:-180px;width:222px;height:222px;background-color: #fef1ea;}
.section_introduction .circle_container .circle:nth-child(3){top:282px;margin-left:373px;width:74px;height:74px;background-color: #fef8f4;}
.section_introduction .circle_container .circle:nth-child(4){top:1915px;margin-left:-495px;width:65px;height:65px;background-color: #fbd2d8;}
.section_introduction .circle_container .circle:nth-child(5){top:1475px;margin-left:465px;width:222px;height:222px;background-color: #fde8eb;}
.section_introduction .circle_container .circle:nth-child(6){top:2555px;margin-left:-456px;width:180px;height:180px;background-color: #fef4f5;}
.section_introduction .circle_container .circle:nth-child(7){top:2344px;margin-left:200px;width:150px;height:150px;background-color: #fef8f4;}
.section_introduction .circle_container .circle:nth-child(8){top:2433px;margin-left:422px;width:40px;height:40px;background-color: #fef4f5;}
.section_introduction .circle_container .circle:nth-child(9){top:3550px;margin-left:-614px;width:195px;height:195px;background-color: #fef8f4;}
.section_introduction .circle_container .circle:nth-child(10){top:3907px;margin-left:-210px;width:30px;height:30px;background-color: #fef1ea;}
.section_introduction .circle_container .circle:nth-child(11){top:4172px;margin-left:-510px;width:50px;height:50px;background-color: #fdedf0;}

.img_box{position: absolute;left:50%;}
.img_box .img_mask{width:0%;overflow:hidden;
    -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;
}
.img_box .img_mask img{/*margin-left:-50px;*/
    /*-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;*/
}
.img_box .img_mask.on{width:100%;}
.img_box .img_mask.on img{/*margin-left:0;*/}

.top_img{top:180px;margin-left:-600px;pointer-events: none;  z-index: 1;}
.box_border{position: absolute;z-index: 0;width:215px;height:215px;}
.box_border .border-right,.border-left{display: inline-block; width:5px;height:0;background:#e91f3e;position:absolute;z-index:1}
.box_border .border-top,.border-bottom{display: inline-block;height:5px;width:0;background:#e91f3e;position:absolute;z-index:1}
.box_border .border-top{left:0;top:0}
.box_border .border-right{top:0;right:0}
.box_border .border-bottom{right:0;bottom:0}
.box_border .border-left{bottom:0;left:0}

.box_border.on .border-top {transition:width 0.4s ease-out;width:100%}
.box_border.on .border-right{transition:height 0.4s ease-out 0.4s;height:100%}
.box_border.on .border-bottom{transition:width 0.4s ease-out 0s;width:100%}
.box_border.on .border-left{transition:height 0.4s ease-out 0.4s;height:100%}

.top_img .box_border{top:340px;left:190px;}
.top_img .box_border .border-right,.top_img .box_border .border-left{background:#f69d62;}
.top_img .box_border .border-top,.top_img .box_border .border-bottom{background:#f69d62;}

.bottom_img .box_border{top:340px;left:75px;}
.bottom_img .box_border .border-right,.bottom_img .box_border .border-left{background:#e91f3e;}
.bottom_img .box_border .border-top,.bottom_img .box_border .border-bottom{background:#e91f3e;}

.top_img .box_img1{position: absolute;top:0;left:0;}
.top_img .box_img2{position: absolute;top:310px;left:355px;}

.top_img .box_img1 .img_mask{height:470px;}
.top_img .box_img2 .img_mask{height:350px;}

.bottom_img{top:1170px;margin-left:108px;pointer-events: none;z-index: 1;}
.bottom_img .box_img1{position: absolute;top:0;left:0;}
.bottom_img .box_img2{position: absolute;top:315px;left:-180px;}

.text_box{position: absolute;left:50%;opacity: 0;}
.text_box.on{opacity: 1;}
.text_box h3{font-size: 50px;line-height:64px;font-weight: 300;letter-spacing: -4px;}
.text_box .hr_line{display:inline-block;width:17px;height:1px;background-color: #aaaaaa;margin:30px 0;}
.text_box p{font-size:16px;line-height: 30px}
.text_box p img{margin-top:8px;}
.text_box .outlink{padding-top: 29px;}
.text_box .outlink a{display:block;width:198px;height:42px;font-size:16px;font-weight:700;line-height: 42px;border:2px solid #f1732f;border-radius: 35px;text-align: center;}
.text_box .outlink a:hover{background-color: #f1732f;color:#ffffff;}
.text_box2{position: absolute;left:50%;opacity: 0;}
.text_box2.on{opacity: 1;}
.text_box2 p{font-size:24px;line-height: 41px;letter-spacing: -1px;font-weight: 300;}
.text_box2 p img{margin-top:10px;}
.top_text_box{top:220px;margin-left:150px;}
.top_text_box h3{color:#f1732f; }
.top_text_box2{top:740px;margin-left:278px;}
.bottom_text_box{top:1205px;margin-left:-550px;text-align: right;}
.bottom_text_box h3{color:#e91f3e;}
.bottom_text_box .outlink{float:right;}
.bottom_text_box .outlink a{border:2px solid #e91f3e;}
.bottom_text_box .outlink a:hover{background-color: #e91f3e;color:#ffffff;}
.bottom_text_box2{top:1730px;margin-left:-550px;text-align: right;}
.quotes1{position: absolute;left:50%;top:705px;margin-left:219px;opacity: 0;}
.quotes1.on{opacity: 1;}
.quotes2{position: absolute;left:50%;top:1950px;margin-left:-300px;opacity: 0;}
.quotes2.on{opacity: 1;}

.center_ci{position: absolute;left:50%;top:0%;margin: 4px 0 0 -44px;opacity: 0;}
.center_ci .ci{display:block;position: absolute;opacity: 0;
    /* -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;*/
}
.center_ci .ci.on{opacity: 1;}
.center_ci.on{position: fixed;left:50%;top:50%;}
.center_ci.over{position: absolute;left:50%;top:95%;}
/*.center_ci.over .hanwha.on{*//*margin-left:-250px;*//*
    -webkit-transform: translateX(-250px);
    -moz-transform: translateX(-250px);
    -o-transform: translateX(-250px);
    transform: translateX(-250px);

}
.center_ci.over .total.on{*//*margin-left:75px;*//*
    -webkit-transform: translateX(75px);
    -moz-transform: translateX(75px);
    -o-transform: translateX(75px);
    transform: translateX(75px);

}*/
.center_ci .ci_mask{overflow: hidden;width:88px;}
/*.center_ci .ci_mask.on{width:100%;}*/
/*.center_ci.over .hanwha .ci_mask.on{width:309px;}
.center_ci.over .total .ci_mask.on{width:243px;}*/


.section_info{position: relative;text-align: center;padding-top: 50px;}
.section_info .info_top, .section_info .info_bottom{opacity: 0;}
.section_info .info_top.on, .section_info .info_bottom.on{opacity: 1;}
.section_info .info_top img{margin-top:10px;}
.section_info p{font-size:24px;font-weight:300;line-height: 41px;letter-spacing: -1.5px;}
.section_info ul{overflow: hidden;margin:0 auto;width:1200px;padding:80px 0 155px;}
.section_info ul li{position:relative;float:left;width:200px;text-align: center;}
.section_info ul li:after{content:'';position: absolute;top:0;right:0;height:146px;width:1px;display: inline-block;background-color:#f3f3f3;}
.section_info ul li:last-child:after{content: none;}
.section_info ul li .icon{padding-bottom:12px;}
.section_info ul li .text{font-size:14px;line-height: 20px;color:#333333;}
.section_info ul li .text .grey{color:#8d8d8d;}

.section_vision{display:block; position: relative;width:100%;margin:0 auto;background: #fff;  padding-bottom: 165px;}
.section_vision .vision_top{position: relative;height: 440px;margin:0 30px;overflow: hidden;/*background: url(/Images/info/company/company_vision_bg.jpg) center center;background-size: cover;*/}
.section_vision .vision_top .bg{position: absolute;top:0;left:0;bottom:0;right:0;width:100%;/*margin-left:-200px;will-change: transform;*/
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px);
    -o-transform: translateX(-200px);
    transform: translateX(-200px);
}
.section_vision .vision_top .bg img{width:100%;min-width:1380px;}
.section_vision .vision_top .vision_mask{position: absolute;top:0;left:0;width:100%;height:100%;background-color: #ffffff;will-change: transform;
    -webkit-transition: all 1s cubic-bezier(0.42, 0, 0.02, 0.96);
    -moz-transition: all 1s cubic-bezier(0.42, 0, 0.02, 0.96);
    -o-transition: all 1s cubic-bezier(0.42, 0, 0.02, 0.96);
    transition: all 1s cubic-bezier(0.42, 0, 0.02, 0.96);
}
.section_vision .vision_top.on .bg{margin-left:0px;/*will-change: auto;*/
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}
.section_vision .vision_top.on .vision_mask{/*margin-left:100%;will-change: auto;*/
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}
.section_vision .vision_top p{position: absolute;top:50%;width:100%;margin-top:-55px;text-align: center;color:#ffffff;font-size: 40px;}
.section_vision .vision_bottom{margin:0 auto;width: 1200px;padding-top:128px;opacity: 0;}
.section_vision .vision_bottom.on{opacity: 1;}
.section_vision .vision_bottom .vision_left{float:left;margin-right:155px;}
.section_vision .vision_bottom .vision_left h3:after{content:'';display:block;width:17px;height:1px;background-color: #aaaaaa;margin:30px 0;}
.section_vision .vision_bottom .vision_left p{font-size: 16px;line-height: 30px; }
.section_vision .vision_bottom .vision_left p img{margin-top:6px;}
.section_vision .vision_bottom .vision_left .sub_p{padding:22px 0 36px;}
.section_vision .vision_bottom .vision_left .top_no1{/*border: 1px solid #eb323b;box-sizing: border-box;padding:30px;*/font-size:14px;width: 293px;}
.section_vision .vision_bottom .vision_right{display:inline-block;}