@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: 100px;min-height:100px;}
.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:2180px;clear: both;background: #fff;}
.section_introduction .half_line{position: absolute;top:65px;left:50%;margin-left:-1px;width:1px;height:1980px;background-color: #a6c5ec;opacity: 1;}
.section_introduction .half_line:before{content:'';display:block;position:absolute;top:0;left:-3px;border: 1px solid #2f93f1;border-radius: 100%;background-color: #2f93f1;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: #deefce;}
.section_introduction .circle_container .circle:nth-child(5){top:1475px;margin-left:465px;width:222px;height:222px;background-color: #e8f6fd;}
.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:#f7d5be;}
.top_img .box_border .border-top,.top_img .box_border .border-bottom{background:#f7d5be;}

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

.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;width: 497px}
.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;    top: 130px;
    left: -58px;}
.bottom_img .box_img2{position: absolute;top:315px;left:-180px;}

.text_box{position: absolute;left:50%;opacity: 0;}
.text_box.on{opacity: 1;}
.history-t{
	font-size: 38px;
	line-height: 64px;
	font-weight: 300;
	letter-spacing: 0px;
	color: #3987cd;
}
.text_box .hr_line{display:inline-block;width:17px;height:2px;background-color: #aaaaaa;margin:10px 0 20px;}
.text_box p{font-size:16px;line-height: 30px;    text-align: justify;}
.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: 16px; line-height: 30px; text-align: justify;}
.text_box2 p img{margin-top:10px;}
.top_text_box{top:220px;margin-left:120px;width:480px;}
.top_text_box h3{color:#3888cc; }
.top_text_box2{    top: 550px;  margin-left: 120px; width: 480px;}
.top_text_box4{    top: 800px;  margin-left: 120px; width: 480px;}

.bottom_text_box{top:1105px;margin-left:-600px;text-align: right; width:480px;}
.bottom_text_box h3{color:#3888cc;}
.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:1500px;
	margin-left: -600px;
    text-align: right;
    width: 480px;
}
.bottom_text_box3{
	top: 2050px;
    left: 50%;
    text-align: center;
    width: 500px;
    margin: 0 auto;
    padding: 20px 0px;
    margin-left: -250px;opacity: 1;
}
.bottom_text_box4 {
	top: 1900px;
    margin-left: -600px;
    text-align: right;
    width: 480px;
}
.bottom_text_box3 h3{
	font-size: 38px;    color: #3987cd;
}
.text_box .center {text-align:center}

.quotes1{
	position: absolute;
	position: absolute;
    left: 50%;
    top: 115px;
    margin-left: 90px;
   display:none
}
.quotes1.on{display:block;}
.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 -35px;opacity: 0;}
.center_ci .ci{display:block;position: absolute;opacity: 1;
    /* -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;*/
}
.ci.total{
	overflow: hidden;height: 70px;width: 70px;
}
.center_ci .ci.on{opacity: 1;}
.center_ci.on{position: fixed;left:50%;top:30%;}
.ci.total.on{
	width: 371px;
	height: 112px;
	overflow: inherit;
}
.center_ci .hd2{
	opacity: 0;
	display: none;
	position: absolute;
	    top: 3px;
	    left: -210px;
}
.center_ci.on .hd2{
	opacity: 1;display: block;
}
.center_ci.over{position: absolute;left:50%;top:90%;}
/*.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:70px;}
/*.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: 970px;padding-top:128px;opacity: 0;}
.section_vision .vision_bottom.on{opacity: 1;}
.section_vision .vision_bottom .vision_left{float:left;margin-right:115px;}
.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;}