/*
**   about - common
*/
section{margin: 4em 0;}
.quote{text-align: center; margin:5% 0;}
section h1{font-size: 1.65em;}
.img-wrap{font-size:initial; margin: 3em 0;}


/*
**
**      core capability  
*/
.core p{line-height: 1.5rem; }
#about .row:after{ display: block; content: ''; clear: both;}
#about .row{height: 416px}
.list-default .row .col{padding-right: 4%;}
.list-default .row .col:last-child {padding-left: 4%;}
.list-default .row .col .text-wrap {padding: 0;}
.list-default h5.italic { font-size:1em; margin-bottom: 15px;}
#about h2{font-size:1.2em; margin:  1.4em 0;}

.strategic ul{margin: 3em 0;}
.strategic li{ display: table; float: left; table-layout: fixed; width:32.333%; padding: 6.5% 1%; color: #fff; margin-right:1%;}
.strategic li:first-child{background: url('../img/sub/company/ini_img01.jpg') 50% 50% no-repeat; background-size: cover;}
.strategic li:nth-child(2){background: url('../img/sub/company/ini_img03.jpg') 50% 50% no-repeat; background-size: cover;}
.strategic li:last-child{background: url('../img/sub/company/ini_img02.jpg') 50% 50% no-repeat; background-size: cover;}
.strategic li .container{ display: table-cell; vertical-align: middle; text-align: center;}
.strategic li .icon{ display: inline-block; position: relative; width: 20%; height: 94px; padding-bottom: 7%; margin-bottom: 7%; border-bottom: 1px solid #fff;}
.strategic h3.italic ~ p{margin: 1em 0;}


#initiative .banner{position: relative; }
#initiative ._table {max-width: 770px; margin: auto;}
#initiative .float_cont ._tc{ margin: auto; vertical-align: middle; color:#ccc;}
#initiative .float_cont ._tc > *{margin-bottom: 20px;}
#initiative .float_cont .sub-title{ color:#ccc; }

#banner{ background: url('../img/sub/company/quality_mng.jpg') 50% 50% no-repeat; background-size: cover; color: #ccc; padding: 80px 0;}
#banner .text-wrap{margin-bottom: 4em;}

#cs .col:last-child{background: #f4f5f9; padding: 0 3%;}
#cs .row .col .text-wrap{max-width: 530px;}
#cs .text-wrap p{margin-bottom: 20px;}

#leader img{float: left; max-width: 270px; padding-right:40px;}
#map-wrap{margin-bottom:0 !important;}
#map{width: 100%; height: 40vh;}
#map-popup{padding: 6px; font-family: 'NotoSansKR', sans-serif; cursor: auto;}
#map-popup p{font-size: 13px;}

.gm-style-iw{width:250px !important;}



/*
**      aboutCountec
*/
.aboutCountec .sub-bannner{background: url(/resources/img/sub/about/banner-ceo.jpg) 50% 50% no-repeat; background-size: cover;}
.aboutCountec section:first-of-type p:first-child{font-size: 1.2em;}
.aboutCountec .frame-wrap{position: relative; width: 80%; padding-bottom: 42%; height: 0; padding-top: 1em; text-align: center; margin: 2em auto;}
.aboutCountec iframe{ position: absolute; top:0; left:0; width: 100%; height: 100%; margin: auto; }
.aboutCountec .coreValue li{ margin-bottom: 2em;}
.aboutCountec .coreValue li .italic{font-weight: 600;margin: 1em 0;}



/*
**      coreProducts
*/
.coreProducts .sub-bannner{background: url(/resources/img/sub/about/banner-corevalue.jpg) 50% 50% no-repeat; background-size: cover;}
.coreProducts .values li{margin-bottom: 2.5em;}
.coreProducts section ul li .italic{font-weight: 600;}
.coreProducts section:first-of-type .img-wrap img{border: 1px solid #f0f0f0;}
.coreProducts .banner ._table{max-width: 520px; margin: auto;}



/*
**      certifications
*/
.cert .sub-bannner{background: url(/resources/img/sub/about/banner-cert.jpg) 50% 50% no-repeat; background-size: cover;}
.cert h1{margin: 1em 0;}
.cert .img-wrap{margin: auto; text-align: center;}
.cert section:first-of-type p:first-child{font-size: 1.2em;}
.cert section ._list{padding: 0 3%; margin-bottom: 3em;}


/*
**      social responsibility
*/
.social .sub-bannner{background: url(/resources/img/sub/about/banner-sr.jpg) 50% 50% no-repeat; background-size: cover;}
.social .img-wrap img{float: left; width: 100%;}
.social section:first-of-type p:first-child{font-size: 1.2em;}


/*
**  milestone
*/
.milestone .sub-bannner{background: url(/resources/img/sub/about/banner-milestone.jpg) 50% 50% no-repeat; background-size: cover;}
.milestone section:not(.loc-footer){margin: 0 !important; padding: 0 !important;}
.milestone .decade-pic{position: relative; height:27vw; background: transparent;}
.milestone .wrap-m {max-width: 1280px; width: 90%; margin: auto; overflow: hidden;}
.milestone .wrap-m > *{float: left; width: 50%;}
.milestone .title{padding-right: 6%; padding-bottom: 5%;}
.milestone .title span{font-size: 5em; color:#999; font-family: 'Petit Formal Script'; line-height: 1.25em; }
.milestone .title h2{font-size: 1.775em; line-height: 1.15em; margin-bottom: .5em; font-weight: 600;}
.milestone .title h3{font-size: 1.05em; line-height: 1.4em; }
.milestone section[class^="m"] ul{height: 100%;}
.milestone section[class^="m"] li{position: relative; display: block; margin-bottom: 1.2em; padding-left: 10%;}
/*Á¡*/
.milestone section[class^="m"] li:before{position: absolute; top:1.15rem; left:-1px; width: 10px; height: 10px; background: #fff; content: ''; border-radius: 50%; z-index: 85; transition: all .2s ease-out;}
.milestone section[class^="m"] li span{ font-size: 1.9rem; font-weight:300; margin-bottom: .5em; line-height: 1.4;}
.milestone section[class^="m"] li:after{position: absolute; top:0; left:4px; width: 4px; height: 270%; content: '';} /*¶óÀÎ*/

.m2010 li span{color:#46566e; }
.m2000 li span{color:#51bb1e; }
.m1990 li span{color:#f5c00a; }
.m1978 li span{color:#c81d31; }

.m2010 li:before{border: 2px solid #46566e;} /*Á¡*/
.m2000 li:before{border: 2px solid #51bb1e;}
.m1990 li:before{border: 2px solid #f5c00a;}
.m1978 li:before{border: 2px solid #c81d31;}

.m2010 li:after{background: #46566e;} /*¶óÀÎ*/
.m2000 li:after{background: #51bb1e;}
.m1990 li:after{background: #f5c00a;}
.m1978 li:after{background: #c81d31;}

.milestone section:last-child li:last-child:after{display: none;}
.milestone section:last-child li:first-child:after{height: 160%; }


/*
**  coglix
*/
.coglix .sub-bannner{background: url(/resources/img/sub/about/banner-coglix.jpg) 50% 50% no-repeat; background-size: cover;}
.coglix h2{margin-bottom: 1em;}
section.coglix > div{margin: 2em 0;}
section.coglix > div:first-child{margin-top: 0;}
section.coglix:first-child p{margin: 2em 0;}
section.coglix:last-child a{display: inline-block; padding: 4px 10px; margin: 8px 0;font-weight: 600; background: #06b6a9; color: #fff;}
section p.last{margin-top: 4.5em;}


/*
**  location
*/
.location #gallery{margin: 0 !important; padding: 0 !important;}
.location #gallery .row{margin: 0;}
.location #gallery a{position: relative; display: block; float: left; vertical-align: top; transition: all .2s;}
.location #gallery a img{font-size: 0; vertical-align: top;}
.location #gallery .item5 a{width: 20%;}
.location #gallery .item4 a{width: 25%; height: 300px; overflow:hidden}
.location #gallery a span{ position: absolute; opacity: 0;  display: block; width: 100%; height: 100%; font-size:18px; font-weight:bold; background: rgba(0,0,0,0.8); color: #fff; transition: opacity .3s ease-in; text-align: center; padding-top: 29%;}
.location #gallery a:hover span{ opacity: 1; top:0; left:0; transition: opacity .3s ease-out; }



/*
**
**      m e d i a q u e r y
**
*/
@media(min-width:767px){ /* 767px ÀÌ»óÀ϶§ */
	.milestone section{background: block;}
	.milestone .m2010 .decade-pic{background: url(/resources/img/sub/about/milestone2010.jpg) top center no-repeat; background-size: 100%;}
	.milestone .m2000 .decade-pic{background: url(/resources/img/sub/about/milestone2000.jpg) top center no-repeat; background-size: 100%;}
	.milestone .m1990 .decade-pic{background: url(/resources/img/sub/about/milestone1990.jpg) top center no-repeat; background-size: 100%;}
	.milestone .m1978 .decade-pic{background: url(/resources/img/sub/about/milestone1978.jpg) top center no-repeat; background-size: 100%;}
	.decade-pic img{display: none;}
	.milestone li:hover:before{ transform: scale(1.7);}
}


@media(max-width:1400px){
	#about{margin: 0;}
    #about .row{height: 370px; }

	.aboutCountec .frame-wrap{ width: 100%;}   
	.location #gallery .item5 a span{font-size: 13px;}
	.location #gallery .item5 a:nth-child(-n+3){width: 33.3333%;} /* (n:0ºÎÅÍ) 1¹ø° ºÎÅÍ 3¹ø° ±îÁö*/
	.location #gallery .item5 a:nth-child(-n+3) span{padding-top: 20%;}
	.location #gallery .item5 a:nth-child(n+4){width: 50%;} /* 4¹ø° ÀÌÈÄ ¸ðµç */
	.location #gallery .item4 a{width: 50%;}

	.location section:last-child{margin: 0 !important; }
	/*.site-map{display: none;}*/
	.loc-info{float:none; width: 100%;}
} 

@media(max-width:1024px){
    #about .row{ height: auto; }
} 

@media(max-width:960px){
    .quote{margin: 3% 0; }
    .quote img{width: 30px; }
    #about img{max-width: 450px; margin: 0 auto;}
	.list-default .row .col {display: block; margin:auto; width: 100%;}
	.list-default .row .col > *{margin: .75em auto;}
    .list-default .row .col-img{padding:0 !important;}
	.list-default .row .col:first-child{padding-right:0;}
	.list-default .row .col:last-child{padding-left:0;}
	
    #cs .row .col .text-wrap{padding: 0; }
    #float .float-cont{ font-size: 1.4em; }
    #leader img{max-width: 200px; padding-right:20px; }

	.strategic li .icon{height: 74px;}

	#initiative .float_cont ._tc > *{margin-bottom: 10px;line-height: 1.5;}

	.coreProducts .banner .float_cont{position: static;}
} 

@media(max-width:767px){ /* iPad */
	section {margin: 3em 0;}
	.img-wrap{margin: 2em 0;}

   .coreProducts .bannertxt p{font-size: 1em;}
   .milestone .wrap-m > *{width: 100%;}
   .milestone section{background: transparent !important;}
   .milestone .decade-pic{height: auto;}
   .milestone .decade-pic:before{display: none;}
   .decade-pic img{display: block; width: 100%; }
   .milestone section:last-child li:first-child:after{height: 150%;}
	.social .img-wrap img{float: none; width: 100%; }

	#initiative .float_cont{padding: 0;}
	#initiative .float_cont .sub-title{color: #000;}
	#initiative .float_cont ._tc > *{color: #000;}
	#initiative .float_cont > *{margin: 0;}
	#cs .row .col .text-wrap{padding: 0 !important;}

	.strategic li .icon{height: 9.5vw;}

	.banner .mb20{margin: 0; line-height: 1.5;}

}

@media(max-width:480px){ 
	.strategic li{width: 100%;}
	.strategic li .icon{width: 35px; height: 55px;}
}