html, body {height:100%;display:none;}
body {user-select:none;height:100%;}
.wrap {width:1200px;height:100%;margin:0 auto;position:relative;}
.contents div {display:none;}
.section {position:relative;}
.arrow-circle {
    background:#000; border-radius:100px; -webkit-border-radius:100px; padding:0; width:58px;height:58px;
    font-size:26px; color:#fff; cursor:pointer; position:absolute;line-height:58px;text-align:center;
}
.arrow-circle:hover {
    animation-name:arrowDown; -webkit-animation-name:arrowDown;
    animation-duration:0.3s; -webkit-animation-duration:0.3s;
    animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;
}
.arrow-circle:hover .fa {
    position:relative;
    animation-duration:0.3s; -webkit-animation-duration:0.3s;
    animation-fill-mode:forwards ; -webkit-animation-fill-mode:forwards ;
    animation-direction:alternate; -webkit-animation-direction:alternate;
    animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
}
.arrow-circle .fa {position:relative;}
.arrow-circle .fa-arrow-down {top:-3px;}
.arrow-circle .fa-arrow-right {top:-4px;}
.arrow-circle:hover .fa-arrow-down {animation-name:arrowDownFa; -webkit-animation-name:arrowDownFa;}
.arrow-circle:hover .fa-arrow-right {animation-name:arrowRightFa; -webkit-animation-name:arrowRightFa;}
.text-white {font-family:"Noto Sans Korean",sans-serif;position:absolute;font-weight:bold;z-index:1000;color:#fff;}
.text-black {font-family:"Noto Sans Korean",sans-serif;position:absolute;font-weight:bold;z-index:1000;color:#242424;}

/**/
#footer {margin-top:0 !important;}

/* PC */
@media ( min-width: 1250px ) {

    #section-1 {height:1000px;}
    #section-1 #section1-01 {right:0;top:10%;}
    #section-1 #text-01 {font-size:85px;line-height:95px;}
    #section-2 {height:1000px;padding:0 0 100px 0;}
    #section-2 #text-02 {top:120px;font-size:40px;line-height:45px;}
    #section-2 .view-more {position:absolute;top:55%;left:45%;width:369px;}
    #section-2 #section2-001 {right:0;bottom:0;}
    #section-2 #section2-002 {position:absolute;top:35%;left:20%;width:415px;height:302px;}
    #section-2 .arrow-circle {bottom:15%;}
    #section-3 {height:1200px;}
    #section-3 #section3-01 {}
    #section-3 #section3-movie {position:absolute;width:700px;height:400px;top:-80px;left:0;}
    #section-3 #text-03 {font-size:40px;line-height:45px;top:100px;left:730px;}
    #section-3 #text-04 {top:340px;left:0;}
    #section-3 #text-05 {font-size:40px;line-height:45px;top:730px;left:260px;}
    #section-3 .arrow-circle {bottom:230px;left:260px;}
    #section-4 {height:1000px;padding:60px 0;}
    #section-4 li:nth-child(1) {width:400px;}
    #section-4 li:nth-child(2) {width:390px;}
    #section-4 li:nth-child(3) {width:400px;}
    #section-4 .top {padding:0 0 100px 0;}
    #section-4 .pem div {width:100%;height:100%;}
    #section-4 .data .subject {
		left:80px;float:left;position:relative;font-size:14px;color:#242424;
		transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);
		writing-mode:vertical-rl;-ms-writing-mode:tb-rl;
	}
    #section-4 .data .text {color:#ccc;font-size:12px;letter-spacing: 1px;float:right;width:70%;}
    #section-4 li {height:400px;}
	#section-4 .data li {height:230px;}

}

/* 태블릿 */
@media ( max-width: 1250px ) and ( min-width: 760px ) {
    .wrap {width:95%;height:100%;margin:0 auto;position:relative;}
    #section-1 {height:800px;}
    #section-1 #section1-01 {width:700px;top:20%;right:0;}
    #section-1 #section1-01 img {width:100%;}
    #section-1 #text-01 {font-size:60px;line-height:70px;}
    #section-2 {height:800px;padding:0 0 60px 0;}
    #section-2 #text-02 {top:70px;font-size:40px;line-height:45px;}
    #section-2 .view-more {position:relative;top:55%;left:auto;width:369px;margin:0 auto;}
    #section-2 #section2-001 {right:0;bottom:0;}
    #section-2 #section2-001 img {max-width:760px;}
    #section-2 #section2-002 {top:35%;left:20%;width:350px;}
    #section-2 #section2-002 {position:absolute;top:40%;left:25%;width:250px;height:auto;}
    #section-2 .arrow-circle {bottom:15%;}
    #section-3 {height:1000px;}
    #section-3 #section3-01 {}
    #section-3 #section3-01 img {width:500px;}
    #section-3 #section3-movie {position:absolute;width:500px;height:400px;top:-80px;left:0;}
    #section-3 #section3-movie iframe {width:100% !important;}
    #section-3 #text-03 {font-size:30px;line-height:35px;top:80px;left:520px;}
    #section-3 #text-04 {top:340px;left:0;}
    #section-3 #text-05 {font-size:40px;line-height:45px;top:730px;left:260px;}
    #section-3 .arrow-circle {bottom:260px;left:260px;}
    #section-4 {height:1000px;padding:60px 0;overflow:hidden;}
    #section-4 li {width:33%;position:relative;overflow:hidden;height:400px;}
    #section-4 .top {padding:0;}
    #section-4 .pem div {width:100%;height:100%;}
    #section-4 .pem img {max-width:100%;max-height:100%;bottom:0;}
    #section-4 .data .subject {
		left:40px;float:left;position:relative;font-size:14px;color:#242424;
		transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);
		writing-mode:vertical-rl;-ms-writing-mode:tb-rl;
	}
    #section-4 .data .text {color:#ccc;font-size:12px;letter-spacing: 1px;float:right;width:70%;}
	#section-4 .data li {height:320px;}
}

/* 모바일 */
@media ( max-width: 760px ) and ( min-width: 320px ) {
    .wrap {width:95%;height:100%;margin:0 auto;position:relative;}
    #section-1 {height:600px;}
    #section-1 #section1-01 {width:100%;max-width:450px;right:0;top:30%;}
    #section-1 #section1-01 img {width:100%;}
    #section-1 #text-01 {font-size:30px;line-height:40px;}
    #section-2 {height:700px;padding:0 0 50px 0;}
    #section-2 .view-more {position:relative;top:55%;left:auto;width:260px;margin:0 auto;}
    #section-2 #text-02 {top:50px;font-size:40px;line-height:45px;}
    #section-2 #section2-001 {right:-10%;bottom:0;}
    #section-2 #section2-001 img {max-width:700px;}
    #section-2 #section2-002 {position:absolute;top:48%;left:12%;width:250px;height:auto;}
    #section-2 #section2-003 {width:120px;}
    #section-2 .arrow-circle {bottom:5%;}
    #section-3 {height:800px;overflow:hidden;}
    #section-3 #section3-01 {text-align:right;}
    #section-3 #section3-01 img {width:50%;}
    #section-3 #section3-02 img {width:150px;}
    #section-3 #section3-movie {position:relative;width:100%;height:400px;top:0;left:0;z-index:500;}
    #section-3 #section3-movie iframe {width:100% !important;}
    #section-3 #text-03 {font-size:40px;line-height:45px;top:100px;left:730px;}
    #section-3 #text-04 {top:420px;}
    #section-3 #text-05 {font-size:30px;line-height:35px;top:600px;left:160px;}
    #section-3 #section3-03 {display:none !important;}
    #section-3 .arrow-circle {bottom:220px;left:160px;}
    #section-4 {height:1200px;padding:60px 0;}
	#section-4 .top {height:250px !important;}
    #section-4 .wrap .clearfix {display:none !important;}
    #section-4 ul {width:45%;float:left;}
    #section-4 li {position:relative;clear:both;}
    #section-4 li .arrow-circle {left:45%;bottom:0;}
    #section-4 .pem {}
    #section-4 .pem li {position:relative;width:100%;height:250px;}
    #section-4 .pem div {width:100%;height:250px;}
    #section-4 .pem div img {max-width:100%;max-height:100%;}
    #section-4 .pem li:nth-child(1) img {left:0;}
    #section-4 .pem li:nth-child(2) img {left:0;}
    #section-4 .pem li:nth-child(3) img {left:0;width:90%;}
    #section-4 .data {position:relative;top:0 !important;}
    #section-4 .data .subject {
		float:none;position:relative;font-size:14px;color:#242424;clear:both;
		transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);
	}
    #section-4 .data .text {color:#ccc;font-size:12px;letter-spacing: 1px;float:none;width:100%;padding:10px 0;}
    #section-4 .data li {width:100%;}
    #section-4 .pem li,
    #section-4 .data li {height:250px !important;padding-bottom:30px;}
    #section-4 .pem li:nth-child(2),
    #section-4 .data li:nth-child(2) {height:280px !important;}
    #section-4 .pem li:nth-child(3),
    #section-4 .data li:nth-child(3) {height:370px !important;}
    #section-4 li .arrow-circle {bottom:30px !important;}

}
@media ( max-width: 320px ) {

}

#section-1 #section1-01 {position:absolute;}
#section-1 .arrow-circle {top:80%;left:0;}
#section-1 #text-01 {top:200px;}
#section-2 {}
#section-2 #text-02 {}
#section-2 #section2-001 {position:absolute;}
#section-2 #section2-002 {}
#section-2 #section2-002 img {width:100%;height:100%;}
#section-2 #section2-002:hover {
    /*animation-name:section2_002; -webkit-animation-name:section2_002;
    animation-duration:2s; -webkit-animation-duration:2s;
    animation-direction:alternate; -webkit-animation-direction:alternate;
    animation-iteration-count:2; -webkit-animation-iteration-count:2;*/
}
#section-2 #section2-003 {
    position:absolute;bottom:15%;right:20%;
    animation-name:section2_003; -webkit-animation-name:section2_003;
    animation-duration:2s; -webkit-animation-duration:2s;
    animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
}
#section-2 #section2-003 img {width:100%;}
/*#section-2 #section-003:hover {animation-name:section003;animation-duration:1s;animation-fill-mode:both;}*/
#section-2 .view-more {
    border-radius:100px;-webkit-border-radius:100px;
    height:57px;background:#000;text-align:center;line-height:57px;
    font-family:"Noto Sans Korean", sans-serif;font-weight:300;font-size:12px;letter-spacing:2px;word-spacing:4px;color:#fff;
    cursor:pointer;
}
#section-2 .view-more:hover {
    animation-name:section2_viewmore; -webkit-animation-name:section2_viewmore;
    animation-duration:0.3s; -webkit-animation-duration:0.3s;
    animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;
}
#section-2 .view-more:before {content:"VIEW MORE R&D";}
#section-2 .view-more .fa {position:absolute;right:20px;line-height:57px;color:#fff;font-size:20px;}
#section-2 .view-more:hover .fa {
    animation-name:section2_viewmore_fa; -webkit-animation-name:section2_viewmore_fa;
    animation-duration:0.3s; -webkit-animation-duration:0.3s;
    animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;
    animation-direction:alternate; -webkit-animation-direction:alternate;
    animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
}
#section-3 { background:linear-gradient(to bottom, #ddd 50%, #d3d3d3 50%);}
#section-3 #text-03 {}
#section-3 #text-04 {font-size:16px;color:#999;position:absolute;}
#section-3 #text-05 {}
#section-3 #section3-01 {position:absolute;right:0;bottom:0;}
#section-3 #section3-02 {position:absolute;bottom:80px;}
#section-3 #section3-03 {position:absolute;bottom:80px;left:240px;}
#section-3 #section3-movie {}
#section-3 .arrow-circle {}
#section-4 {background: linear-gradient(to bottom, #00a950 80%, #007638);}
#section-4 .top {color:#fff;height:118px;}
#section-4 .top .pull-left {font-size:40px;}
#section-4 .top .pull-right {font-size:16px;position:relative;top:60px;}
#section-4 li {position:relative;float:left;}
#section-4 li .arrow-circle {left:45%;bottom:0;}
#section-4 .pem {border:1px solid rgba(0,169,80,0);}
#section-4 .pem li {position:relative;}
#section-4 .pem div {position:absolute;z-index:100;background-repeat: no-repeat;background-size:100%;background-position:bottom center;}
#section-4 .pem div img {position:absolute;bottom:0;}
#section-4 .data {position:relative;top:50px;}
#section-4 .data li {position:relative;overflow:hidden;}
#section-4 .data li img {max-width:100%;max-height:100%;position:absolute;right:0;bottom:0;}
/*
#section-4 #section4-01 {background-image:url(/images/main/section4-01.png);}
#section-4 #section4-02 {background-image:url(/images/main/section4-02.png);z-index:200;}
#section-4 #section4-03 {background-image:url(/images/main/section4-03.png);}
#section-4 #section4-04 {background-image:url(/images/main/section4-04.png);z-index:200;}
#section-4 #section4-05 {background-image:url(/images/main/section4-05.png);}
#section-4 #section4-06 {background-image:url(/images/main/section4-06.png);z-index:200;}
*/

/* animation */
@keyframes section2_002 {
    from {width:415px;height:302px;top:35%;left:20%;}
    to {width:350px;height:250px;top:40%;left:25%;}
}
@keyframes section2_003 {
    from {transform:rotate(0deg);}
    to {transform: rotate(180deg);}
}
@keyframes section2_viewmore {
    from {}
    to {background:#fff;color:#000;}
}
@keyframes section2_viewmore_fa {
    from {color:#000;right:20px;}
    to {color:#000;right:30px;}
}

@keyframes arrowDown {
    from {color:#fff;}
    to {color:#000;background:#fff;}
}
@keyframes arrowDownFa {
    from {top:-5px;}
    to {top:5px;}
}
@keyframes arrowRightFa {
     from {left:-5px;}
     to {left:5px;}
 }