/*공통 애니메이션*/
.fp-completely .desc {transform: translateX(0); opacity: 1;}
.desc {transition-delay: 1s;transition: 1s; transform: translateX(20px); opacity: 0;}
.desc strong {line-height:0.9; font-size:36px;}

@media all and (max-width:1024px) {
	.desc {bottom:7%}
}
@media all and (max-width:768px) {
	.desc {font-size:16px !important;top:75%; left:10%; right:10%; width:100% }
	.desc strong {font-size:26px !important; }
}
@media all and (max-width:480px) {
	.desc {left:5%; top:74%}
	#fp-nav.fp-right {right:5px}
}

/*SECTION1*/
.section1 {height: 100%; width: 1920px; position: relative}
.section1 .logoImg {text-align: center; position:relative; z-index:10; max-width:1400px; margin:0 auto 170px; transform:translateY(25%)}
.section1 .hand {position:relative;width:63.5vw; bottom:-60px; left:-30px;}
.section1 .hand img {width:100%;}
.section1 .logoImg svg {display: inline-block; max-width: 330px; transform:translate(20%,0)}
.section1 .logoImg .ie_logo {display: inline-block; max-width: 330px; transform:translate(20%,0); animation-delay:1s}
.section1 .desc {text-align:left; color:#333; position:absolute; z-index:5;bottom:13%; right:10%; line-height:1.5; font-size:18px;font-weight:200; transition-delay:3s !important}

@media all and (max-width:1600px) {
	.hand { width:65vw !important}
	.section1 .logoImg svg {width:40vw;}
	.section1 .logoImg .ie_logo {width:40vw;}
}

@media all and (max-width:1024px) {
	.hand { bottom:12% !important; }
	.section1 .logoImg {margin-bottom:290px;}
	.section1 .logoImg svg {width:30vw;}
	.section1 .logoImg .ie_logo {width:30vw;}
}

@media all and (max-width:768px) {
	.section1 .logoImg svg {width:40vw;}
	.section1 .logoImg .ie_logo {width:40vw;}
}
@media all and (max-width:650px) {
	.hand {width:66vw !important; bottom:18% !important  }
}
@media all and (max-width:550px) {
	.hand {bottom:25% !important; width:68vw !important}
	.section1 .logoImg {transform: translateY(15%);}
}
@media all and (max-width:480px) {
	.hand {bottom:25% !important; width:68vw !important}
	.section1 .logoImg {transform: translateY(0%);}
}
@media all and (max-width:420px) {
	.hand {bottom:25% !important; width:68vw !important}
	.section1 .logoImg {transform: translateY(25%);}
}
@media all and (max-width:380px) {
	.section1 .logoImg {transform: translateY(25%);}
	.hand {bottom:31% !important;width:70vw !important; }
}
@media all and (max-width:320px) {
	/*.hand {top:6.5% !important; }*/
}
/*SECTION2*/
.section2 {width: 100vw; background: url('../img/bg_sec2.jpg') no-repeat center center; background-size: cover; position: relative;}
.section2 .desc {text-align:left; color:#fff; position:absolute; bottom:13%; right:10%; line-height:1.5; font-size:18px; font-weight:200}
.section2 .desc strong {font-size:36px;}
@media all and (max-width:768px) {
	.section2 {background: url('../img/bg_sec2-mo.jpg') no-repeat center top;}
}


/*SECTION3*/
.section3 {height: 100vh; width: 100vw; background: url('../img/bg_sec3.jpg') no-repeat center center; background-size: cover;}
.section3 ul {width:100%; max-width:1400px; margin:0 auto}
.section3 li {display: inline-block; width:31.5%; margin-right:1%;  }
.section3 li:last-child {margin-right:0}
.section3 li a {text-align:center; position:relative; }
.section3 li a img {width: 100%; max-width: 391px; }
.section3 li a img.over-img {width:100%; max-width:391px; position:absolute; top:0; left:50%; transform:translate(-50%,-96%); opacity:0; transition:0.3s}
.section3 li a:hover img.over-img {opacity:1}

#bg{width: 100%;height: 100%;position: absolute;left:0;top:0; background:  rgba(0,0,0,0.8); z-index: 100; display:none}
#popup{z-index: 200; position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); display:none}

#popup .box{width: 1160px;height: 710px;position: relative;}
#popup .box .imgBox .left {position:absolute; top:50%; left:5%; transform:translate(0,-50%);}
#popup .box .imgBox .right {position:absolute; top:50%; right:5%; transform:translate(0,-50%);}
#popup .box .imgBox .right img {display:block;}
#popup .box .imgBox .right img:first-child {margin:0 0 36px}
#popup .box .imgBox .right p {font-size:18px; margin-bottom:35px; line-height:1.35; display:none}
#popup .box .imgBox .right h5 {color:#999; margin-bottom:30px; font-weight:300; font-size:17px}
#popup .box span{position: absolute;right: -27px;top: -32px; cursor:pointer; }

@media all and (max-width:1180px) {
	#popup .box {max-width:90vw !important}
	#popup .box .imgview > img {width:100%;}
	#popup .box .imgBox .left {left:0;top:8%; width:40%; padding:0 1em; transform:none}
	#popup .box .imgBox .left img {width:100%}
	#popup .box .imgBox .right {right:0; top:8%; width:60%; padding:0 1em; transform:none}
	#popup .box .imgBox .right img:first-child {width:250px;}
	#popup .box .imgBox .right img {width:100%}
}
@media all and (max-width:975px) {	
	#popup .box .imgBox .right img:first-child {margin:0 0 16px}
}
@media all and (max-width:768px) {
	#popup .box .imgBox .left {width:43%;}
	#popup .box .imgBox .right {width:57%}
	.section3 li a img.over-img {transform:translate(-50%,-94%);}
	#popup .box .imgBox .right p {font-size:16px; margin-bottom:30px}
	#popup .box .imgBox .right p br {display:none}
}
@media all and (max-width:668px) {
	#popup .box {height:760px}
	#popup .box .imgview {position:relative;}
	#popup .box .imgview > img {position:absolute; height:100%; top:0; z-index:-1 }
	#popup .box .imgBox {padding:2em; overflow-y:auto !important; height:75vh; -webkit-overflow-scrolling: touch;}
	#popup .box .imgBox .left, #popup .box .imgBox .right {width:100%; padding:1em; position:static;}
	#popup .box .imgBox .right img:first-child {width:200px;} 
	#popup .box .imgBox .right h5 {font-size:14px}

}
@media all and (max-width:550px) {
	.section3 li a img.over-img {transform:translate(-50%,-91%);}
}
@media all and (max-width:480px) {
	#popup {-webkit-overflow-scrolling: touch;}
	#popup .box .imgBox {padding:10px; height:94vh;overflow-y:scroll !important;-webkit-overflow-scrolling: touch;}
	.section3 li a img.over-img {transform:translate(-50%,-88%);}
	#popup .box .imgBox .right img:first-child {width:180px}
	#popup{ transform:translate(-50%,0%); top:5vh}
	#popup .box {max-width:85vw !important}
	#popup .box .imgBox .left {width:50%;}
	#popup .box .imgBox .left, #popup .box .imgBox .right {padding:10px;}
	#popup .box .imgBox .right p {margin-bottom:20px}
	#popup .box .imgBox .right h5 {margin-bottom:16px}
}

/*SECTION4*/
.section4 {background: url('../img/bg_sec4.jpg') no-repeat center center; background-size: cover !important; position: relative;}
.section4 .desc {text-align:left; color:#fff; position:absolute; bottom:13%; right:10%; line-height:1.5; font-size:18px;font-weight:200}
.section4 .desc strong {font-size:36px;}
@media all and (max-width:768px) {
	.section4 {background: url('../img/bg_sec4-mo.jpg') no-repeat center top;}
}

/*FOOTER*/
.footer {width: 100%;height:300px !important; background:#111 ; border-top:2px solid #1b1816; color:#fff}
.footer .fp-tableCell {height:300px !important}
.footer .logo_footer {margin-bottom:30px}
.footer .copyTxt {font-size:16px; font-weight:300}
.footer .copyTxt p {margin-bottom:20px}

.footer .copyTxt span {margin-right:20px; line-height:1.35}
.footer .copyTxt span:nth-child(even) {margin-right:0}

@media all and (max-width:768px) {
	.footer .logo_footer img {width:40px}
	.footer .copyTxt {font-size:14px;}
}

.section3 .desc {
    text-align: left;
    color: #222;
    position: absolute;
    bottom: 13%;
    right: 10%;
    line-height: 1.5;
    font-size: 18px;
    font-weight: 200;
}

.gray {
	color:#ccc;
}