#section{white-space: nowrap}


/* SUB1 ABOUT */
.article{white-space: normal; box-sizing: border-box; display: inline-block; margin-right: -4px; width: 100%; height: 100%; padding: 0; position: relative; background-size: cover;}
.dots{position: absolute; bottom: 20px; left: 50%;width: 100%; min-width: 1080px; max-width: 1200px; transform:translate(-50%, 0); text-align: center;}
.dots li{display: inline-block; margin: 0;}
.dotsCount4 li{width: 24%;}
.dotsCount6 li{width: 15.6%;}
.dotsCount5 li{width: 20%;}
.dotsCount3 li{width: 32.333%;}
.dotsCount7 li{width: 14.285%;}
.dots li a{position: relative; width: 100%; display: block; border-bottom: 1px solid #fff;}
.dots.dotsGray li a{border-color: #ccc;}
.dots li a.active{border-color: #ffd400; color: #ffd400;}
.dots.dotsGray li a.active{border-color: #111; color: #111;}
.dots li a span{color: #fff; text-align: left; display: block; font-size: 12px;}
.dots.dotsGray li a span{color: #ccc; }
.dots li a.active span{color: #ffd400; }
.dots.dotsGray li a.active span{color: #111; }

#greeting{background: url('../images/back1_1.jpg') no-repeat left 0 center;background-size: 110%}
#story{background: url('../images/back1_2.jpg') no-repeat left 0 center;background-size: 110%}
#service{background: url('../images/back1_2.jpg') no-repeat left 0 center; background-size: 120%}
#history{background: url('../images/back1_3.jpg') no-repeat;}
#epilogue{background: url('../images/back1_4.jpg') no-repeat;}
#repulsion{background: url('../images/back2_1.jpg') no-repeat;}
#repulsion2{background: url('../images/back2_1.jpg') no-repeat;}
#ultralight{background: url('../images/back2_1.jpg') no-repeat;}
#ultralight2{background: url('../images/back2_1.jpg') no-repeat;}
#optimization{background: url('../images/back2_2.jpg') no-repeat;}
#optimization2{background: url('../images/back2_3.jpg') no-repeat;}
#vision01{background: url('../images/back4_1.jpg') no-repeat;}
#vision02{background: url('../images/back4_2.jpg') no-repeat;}
#vision03{background: url('../images/back4_3.jpg') no-repeat;}

#greeting.active,
#story.active,
#service.active{
	animation-name: company-bg; 
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-direction: reverse;
    animation-timing-function: linear;
    animation-fill-mode: none;
    animation-delay: 0s;
	animation-fill-mode:none;
}
@keyframes company-bg {
	to {
		background-position: center center;
		
	}
	from {
		background-position: left 0 center;
		
	}
}


/* 100 300 400 500 700 900 */
.page-title{text-align: left; margin-bottom: 40px;}
.page-title h2{font-size: 22px; font-weight: 500; border-bottom: 3px solid #ffd400; display: inline-block; line-height: 36px; }
.page-title.color-black h2{color: #333}
.artContent{position: absolute;width: 80%; height: 80%; top: 50%; left: 50%; transform:translate(-50%, -50%); /*background: rgba(255, 255, 255, .2);*/}
.artContent p{color: #fff;}
.artTitle{font-style: italic; color: #fff; font-size: 60px; font-weight: 100; line-height: 70px;}
.artTitle b{font-weight: 500;}
.artTitle2{font-style: italic; color: #fff; font-size: 26px; font-weight: 100; line-height: 35px; margin-bottom: 20px;}
.artTitHis{letter-spacing: -3px;}
.artTitHis b{letter-spacing: 0;}



.greTxt{padding-top: 50px;}
.greTxt > h4{color: #fff; font-size: 30px; margin-bottom: 30px; font-weight: 400; line-height: 60px;}
.greTxt > h4 > span{color: #fff; font-size: 50px; font-weight: bold;}
.greImg{padding-top: 0px;}
.greImg > p{display: block; margin-top: 5px; font-size: 14px;}
.greImg > p > b{font-size: 18px;}





.disTable{display: table; height: 100%;}
.tableCell{margin-top: 200px;}
.tableCell.epil{margin-top: 0; display: table-cell; vertical-align: middle;}
.epil > h3{font-size: 45px; color: #fff; font-weight: 500; padding-top: 70px; padding-bottom: 150px; position: relative;}
.epil > h3:before{content: ''; display: block; width: 2px; height: 60px; position: absolute; bottom: 40px; left: 50%; margin-left: -1px; background: #fff;}
.epil > h3 > span{font-size: 45px; color: #fff; font-weight: 500; display: inline-block; position: relative;}
.epil > h3 > span:before{content: ''; display: block; background-color: #ffd400; width: 9px; height: 9px; border-radius: 50%; position: absolute; top: -20px; left: 10px;}
.epil > p{font-size: 20px; color: #fff; font-weight: 400;}
    

.hisTab{padding-top: 0px; padding-bottom: 60px;}
.hisTab > li{float:left; border-radius: 50px;  background: rgba(0, 0, 0, .5); margin-left: 4.4%; width: 13%; text-align: center;box-sizing: border-box; border: 1px solid #fff; position: relative;}
.hisTab > li:first-child{margin-left: 0;}
.hisTab > li:before{content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #999; position: absolute; top: 20px; left: -21%;}
.hisTab > li:first-child:before{display: none;}
.hisTab > li > a{color: #fff; font-weight: 700; display: block; height: 50px; line-height: 50px;}
.hisTab > li.on{background: #ffd400; border-color: #ffd400;}
.hisTab > li.on a{color: #333;}
.historyList{display: table; width: 100%; margin-bottom: 15px;}
.historyList > dt{display: table-cell; width: 100px; color: #fff; font-size: 22px; font-weight: 700;}
.historyList > dd{display: table-cell;}
.historyList > dd li{color: #fff; position: relative; padding-left: 12px;}
.historyList > dd li:before{content: ''; display: block; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #fff;}
.historyCon{display: none;}
.historyCon.on{display: block;}

/*sub2_1 */
.reqBox{margin: 0 auto;}
.reqTxt > h4{font-size: 40px; font-weight: 400;  text-align: left;}
.reqNum > h3{font-size: 120px; font-weight: 900; line-height: 130px; text-align: left; float: left; }
.reqNum > h4{font-size: 26px; text-align: left; font-weight: 500; line-height: 36px; margin-left: 15px; float: left;}
.reqNum > h4 > span{color:#db469f; font-weight: bold; font-size: 60px; display: inline-block; margin-top: 70px;}
.counter{display: inline-block;}
.reqTxt > h5{font-size: 28px; font-weight: 500; vertical-align: top; text-align: left;}
.reqTxt > h5 >  span.arrowSize1{font-size: 5px; font-weight: 500; display: inline-block; position: relative; top: -7px; right: 2px;}
.reqTxt > h5 >  span.arrowSize2{font-size: 20px; font-weight: 500; display: inline-block; position: relative; top: -2px; right: 3px}
.reqTxt > h5 >  span.arrowSize3{font-size: 30px; font-weight: 500; display: inline-block; position: relative; top: 2px; right: 3px;}
.reqImg{height: 100%;}
.reqImg p{font-weight: 500; font-size: 16px; margin-bottom: 10px;}
.reqImg p span{display: inline-block; color: #ffd400; font-size: 16px; font-weight: 500;}
.reqTxt2 > h4{font-size: 32px; line-height: 42px; font-weight: 500; margin-bottom: 20px}
.reqTxt2 > p{font-size: 20px; font-weight: 300;}

.ulTxt{text-align: center;}
.ulTxt h4{font-size: 50px; font-weight: 400; letter-spacing: -1px; margin-bottom: 15px;}
.ulTxt .reqNum2 h3{font-size: 120px; font-weight: 900; line-height: 130px;}
.ulTxt .reqNum2 span{font-size: 40px; font-weight: 400;}

.reqTxt3 p{position: relative; padding-left: 8px; font-size: 16px; margin-bottom: 15px; font-weight: 300; }
.reqTxt3 p:before{content: ''; display: block; position: absolute; top: 11px; left: -2px; width: 3px; height: 3px; border-radius: 50%; background-color: #fff;}

.tech01{font-size: 45px; line-height: 40px; font-style: italic; font-weight: 400;margin: 0px 0 40px;}
.tech02{font-size: 30px; line-height: 40px; font-weight: 500; margin-bottom: 5px;}
.tech03{font-size: 20px; line-height: 28px; }
.techSlide{margin-top: 30px;}

.optTit h3{font-size: 30px; color: #fff; font-weight: 500; margin-bottom: 16px; display: block;}
.optTable{border-collapse: collapse; width: 100%;}
.optTable th{background: #fff; color: #333; padding: 5px 10px; font-size: 12px; font-weight: bold;}
.optTable td{font-size: 12px; border-bottom: 1px solid #ddd; line-height: 18px; padding: 8px 10px;}
.optList{margin-bottom: 40px;}
.optList li{border: 1px solid #fff; display: inline-block; text-align: center; background: rgba(0,0,0,.5); width: 29%; margin-right: 2%; border-radius: 8px; min-height: 76px; box-sizing: border-box; padding: 10px; font-size: 20px; vertical-align: top; margin-bottom: }
.optList li.optLine{line-height: 50px;}
.optList2 li{border: 1px solid #fff; display: inline-block; text-align: center; background: rgba(0,0,0,.5); width: 40%; margin-right: 6%; border-radius: 8px; min-height: 76px; box-sizing: border-box; padding: 10px; font-size: 20px; vertical-align: top; margin-bottom: 10px; position: relative;}
.optList2 li.optLine{line-height: 50px;}
.optList2 li.optArrow:before{content: '\e907'; display: block; color: #fff; font-size: 20px; font-weight: bold; position: absolute; top: 12px; right: -14%; font-family:xeicon;}
.optList2 li.optArrow2:before{content: '\e907'; display: block; color: #fff; font-size: 20px; font-weight: bold; position: absolute; top: 20px; right: -14%; font-family:xeicon;}


.vision > h3{color: #333;margin-bottom: 50px;}
.vision > p{color: #333; font-size: 18px; font-weight: 400;}
.vision-circle{}
.vision-circle li{border: 3px solid #ccc; display: table-cell; width: 150px; height: 150px; border-radius: 50%; font-size: 14px; color: #333; vertical-align: middle; text-align: center; line-height: 20px; padding: 0 5px; box-sizing: border-box; padding-top: 5px; background: #fff;}
.vision-circle li.vision-blank{border: 0; width: 1px; height: 1px; background: none;}


.proMenu{width: 15%; height: 100%; background: #ebe8e8; text-align: center; position: fixed; top: 0; left: 0; z-index: 99; padding-top: 5%; }
.proMenuWrap{display: inline-block; text-align: left; }
.proMenuWrap > h2{color: #333; font-weight: 700; font-size: 22px; padding-bottom: 40px; border-bottom: 3px solid #333; text-align: center }
.proMenuWrap > .proMenuList{padding: 15px 0; border-top: 1px solid #ddd;}
.proMenuWrap > .proMenuList > h3{margin-bottom: 5px; padding-left: 18px; position: relative}
.proMenuWrap > .proMenuList > h3:before{content: ''; display: block; position: absolute; top: 7px; left: 0; width: 10px; height: 10px; border: 1px solid #666; border-radius: 50%;}
.proMenuWrap > .proMenuList > h3.on:before{background: #111; border-color: #111}
.proMenuWrap > .proMenuList > h3.on:after{content: ''; display: block; position: absolute; top: 9px; left: 2px; width: 6px; height: 6px; border: 1px solid #666; border-radius: 50%; background: #ebe8e8;}
.proMenuWrap > .proMenuList > h3 > a{color: #333; font-weight: 500; font-size: 18px;}
.proMenuWrap > .proMenuList > ul a{color: #666; font-weight: 400; font-size: 15px;}
.proMenuWrap > .proMenuList > ul li{padding-left: 18px}


.proWrap{background: #f4f2f2; }
.proContent{padding: 5% 3% 5% 18%; background: #f2f2f2; height: 100%; box-sizing: border-box;}
.proDetail{background-color: #fff; height: 100%; box-shadow: 2px 2px 15px rgba(0, 0, 0, .2); color: #333; padding: 20px 30px; box-sizing: border-box; overflow-y: scroll}
.detaLeft{width: 50%; padding-right: 30px; box-sizing: border-box; float: left;}
.detaRight{width: 50%; padding-left: 30px; box-sizing: border-box; float: left; position: relative;}
.proName{font-size: 20px; font-weight: 700; color: #333; border-bottom: 1px solid #666; padding-bottom: 25px; margin-bottom: 10px; line-height: 42px; text-transform: uppercase;}
.proName > span{font-size: 40px; font-weight: 700; color: #333; display: block; text-transform: none; text-transform: uppercase;}
.detaLeft > p{font-size: 18px; line-height: 26px; font-weight: 400; color: #333; display: block; }
.detaLeft > p.txtSlag{font-size: 16px; font-weight: 600; margin-top: 5px; margin-bottom: 24px;}

.proImg{}
.proBig{width: 85%; border: 1px solid #ddd; float: left; box-sizing: border-box; padding: 0 40px;}
.proBig img{width: 100%;}
.proSmall{float: left; width: 13%; margin-left: 2%; }
.proSmall li{border: 1px solid #ddd; box-sizing: border-box; margin-top: 16%;} 
.proSmall li.on{border-color: #ffd400;} 
.proSmall li:first-child{margin-top: 0;} 
.proSmall img{width: 100%;}
.proBlank{height: 200px; }
.proBlank2{height: 90px; }

.proPart{margin-top: 40px; }
.proPart:first-child{margin-top: 0px; }
.proPart > h4{color: #1b1b1b; font-size: 20px; font-weight: 700; text-transform: uppercase;margin-bottom: 5px;}
.proPart table{border-top: 2px solid #333; width: 100%;}
.proPart table th{border-bottom: 1px solid #ddd; text-align: left; color: #333; padding: 6px 15px; font-size: 15px; font-weight: 500; border-right: 1px solid #ddd;}
.proPart table td{border-bottom: 1px solid #ddd; text-align: left; color: #333; padding: 6px 15px; font-size: 15px; font-weight: 300; line-height: 24px;}
.proPart table.table2 th{text-align: center; border-left: 1px solid #ddd; border-right: 0;}
.proPart table.table2 td{text-align: center; border-left: 1px solid #ddd; border-right: 0;}
.proPart table.table2 th:first-child{border-left:0;}
.proPart table.table2 td:first-child{border-left:0;}


.colorList{position: absolute; top: 0; right: 0;}
.colorList li{display: inline-block;margin-left: 15px; border-radius: 50%;}
.colorList li a{display: block; font-size: 0; width: 40px; height: 40px; border-radius: 50%;  position: relative;}
.colorList li a:before{content: ''; display: block; position: absolute; top: -5px; left: -5px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #aaa; box-sizing: border-box;}
.colorGold{background: #b89438 !important;}
.colorBlue{background: #1e4086 !important;}
.colorPink{background: #e43fae !important;}
.colorRed{background: #f60113 !important;}
.colorWine{background: #b63446 !important;}
.colorYellow{background: #ffd400 !important;}

.proBack{padding: 0 0 0 15%;}
.proIntro{background: url('../images/back3.png') no-repeat left bottom; /*background-size: cover;*/ height: 100%; position: relative;}
.proIntro > a{position: absolute; }
.proIntro > a.intro2-1 img,
.proIntro > a.intro2-2 img,
.proIntro > a.intro2-3 img{width: 100px;}
.proIntro > a.intro3-1 img,
.proIntro > a.intro3-2 img,
.proIntro > a.intro3-3 img{width: 100px;}
.proIntro > a > span{color: #fff; background: #ddd; padding: 5px 15px; border-radius: 5px; display: inline-block; text-align: center; font-size: 14px; line-height: 20px; font-weight: 400; margin-left: -50px; margin-top: 25px; vertical-align: top;}


.intro1-1{top: 0; left: 40%;}
.intro1-2{top: 15%; left: 50%;}
.intro1-3{top: 30%; left: 57%;}
.intro1-4{top: 45%; left: 61%;}
.intro1-5{top: 60%; left: 64%;}
.intro1-6{top: 75%; left: 66%;}
.intro2-1{top: 20%; left: 21%;}
.intro2-2{top: 38%; left: 34%;}
.intro2-3{top: 60%; left: 42%;}
.intro3-1{top: 45%; left: 5%;}
.intro3-2{top: 55%; left: 17%;}
.intro3-3{top: 72%; left: 24%;}
a.intro2-1 > span,
a.intro2-2 > span,
a.intro2-3 > span{margin-left: -40px !important; margin-top: -25px !important;}
a.intro3-1 > span,
a.intro3-2 > span,
a.intro3-3 > span{margin-left: -60px !important; margin-top: -20px !important;}


.active .phil-img {
    animation-name: philimg; 
    animation-duration: 1.0s;
    animation-iteration-count: 1;
    animation-direction: reverse;
    animation-timing-function: linear;
    animation-fill-mode: none;
    animation-delay: 0s;
	animation-fill-mode:none;
}

@keyframes philimg {
	100% {
		transform:scale(3.0);             /*  default */
		-webkit-transform:scale(3.0);  /*  크롬 */
		-moz-transform:scale(3.0);     /* FireFox */
		-o-transform:scale(3.0);
		left: -30%;
	}
	20% {
		transform:scale(3.0);             /*  default */
		-webkit-transform:scale(3.0);  /*  크롬 */
		-moz-transform:scale(3.0);     /* FireFox */
		-o-transform:scale(3.0);
		left: -30%;
	}
    0% {
		transform:scale(1.0);             /*  default */
		-webkit-transform:scale(1.0);  /*  크롬 */
		-moz-transform:scale(1.0);     /* FireFox */
		-o-transform:scale(1.0);
		left: 0;
	}
    
}