/* 브랜드 임시 */
.section {text-align:center; overflow:hidden;}


.vodTop {width:100%; height:100%; overflow:hidden; margin:0; padding:0;}
.vodTop .sTit {position:absolute; top:400px; height:47px; width:100%; text-align:center; color:#fff; text-shadow:0 5px 10px rgba(0,0,0,.3); z-index:3;}
.vodTop .sTit .big {font-size:65px; font-weight:600; letter-spacing:5px;}
.vodTop .sTit .small {padding:30px 0 0 0; font-size:18px; font-weight:300;}


@media all and (max-width:1650px) {
	.vodTop .sTit {top:350px;}
	.vodTop .sTit .big {font-size:60px;}
	.vodTop .sTit .small {padding:15px 0 0 0; font-size:16px;}
}

@media all and (max-width:1400px) {
	.vodTop .sTit .big {font-size:57px;}
	.vodTop .sTit .small {font-size:15px;}
}

@media all and (max-width:1300px) {
	.vodTop .sTit {top:350px;}
	.vodTop .sTit .big {font-size:50px;}
}

@media all and (max-width:1200px) {
	.vodTop video {height:100%;}
	.vodTop .sTit {top:300px;}
	.vodTop .sTit .big {font-size:45px;}
	.vodTop .sTit .small {font-size:13px;}
}

@media all and (max-width:980px) {
	.vodTop .sTit {top:;}
	.vodTop .sTit .big {font-size:42px;}
}


@media all and (max-width:860px) {
	.vodTop .sTit .big {font-size:40px;}
	.vodTop .sTit .small {padding:10px 0 0 0;}
}


@media all and (max-width:690px) {
	.vodTop .sTit .big {font-size:35px;}
}

@media all and (max-width:460px) {
	.vodTop .sTit .big {font-size:31px;}
	.vodTop .sTit .small {font-size:13px;}
}



#section0 {}

/* Section 1 * --------------------------------------- */
#section1 {}
#section1 .sec50 {height:100%;  color:#fff; font-size:35px; font-weight:200; }
#section1 .brand01 {position:relative; float:left; width:50%; background:url(/img/brand01.jpg) no-repeat center top; background-size:auto 100%; padding:18% 0 0 0; text-align:center; }
#section1 .brand02 {position:relative;  float:left; width:50%; background:url(/img/brand02.jpg) no-repeat center top; background-size:auto 100%; padding:18% 0 0 0; text-align:center;}
#section1 .bIcon {margin:0 0 26px 0; z-index:2;}
#section1 .bIcon img {width:90px; height:auto;}
#section1 strong {padding:40px 0 0 0; font-size:65px; font-family:'Metropolis-ExtraBold'; display:block;}

#section1 .brand01:hover {padding:10% 0 0 0;}
#section1 .brand02:hover {padding:10% 0 0 0;}
#section1 .sec50:hover .bIcon img {width:80px;}
#section1 .sec50:hover strong {font-size:55px;}
#section1 .sec50 .over {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3); opacity:0;}

#section1 .sec50:hover .txtWrap {opacity:1; margin:60px auto 0; font-size:30px;}

.txtWrap {width:600px; margin:80px auto 0; padding:30px 25px; border:1px solid rgba(255,255,255,.3); color:#fff; overflow:hidden; opacity:0;}
.txtWrap ul {float:left; }
.txtWrap .left {width:25%; font-size:20px; transform:translateY(50%); text-align:center;}
.txtWrap .left .strong {font-size:27px; font-weight:600;}
.txtWrap .right {width:75%; padding:0 7%; border-left:1px solid rgba(255,255,255,.3); font-size:17px; text-align:left; line-height:1.4; word-break:break-all;}


@media all and (max-width:1200px) {
	#section1 .sec50 { font-size:25px;}

	#section1 .bIcon {margin:0 0 17px 0;}
	#section1 .bIcon img {width:60px;}
	#section1 strong {padding:20px 0 0 0; font-size:45px;}
}


@media all and (max-width:768px) {
	#section1 .sec50 {font-size:20px;}
	#section1 strong {font-size:35px;}
}

@media all and (max-width:580px) {
	#section1 .sec50 {height:50%;}
	#section1 .brand01 {float:none; width:100%; background-size:auto 100%; padding:20% 0 0 0; }
	#section1 .brand02 {float:none; width:100%; background-size:auto 100%; padding:20% 0 0 0;}

	#section1 .brand01:hover {padding:20% 0 0 0;}
	#section1 .brand02:hover {padding:20% 0 0 0;}
	#section1 .sec50:hover .bIcon img {width:50px;}
	#section1 .sec50:hover strong {font-size:35px;}

	#section1 .sec50:hover .txtWrap {opacity:1; margin:20px auto 0; font-size:15px;}

	.txtWrap {width:85%; margin:40px auto 0; padding:15px;}
	.txtWrap .left {font-size:12px; transform:translateY(5%);}
	.txtWrap .left .strong {font-size:18px;}
	.txtWrap .right {padding:0 3%; font-size:12px; letter-spacing:0;}
}


#section2 {position:relative; padding:160px 0 0 0;}
#section2 .txt {font-size:35px; font-weight:200; line-height:1.3; letter-spacing:-1.5px;}
#section2 .txt strong {font-weight:500;}
#section2 .amTit {margin:40px 0; background:url(/img/brand_4u.png) no-repeat center top; padding:70px 0 0 0; font-size:25px; font-weight:200;}
#section2 .amTit strong {font-size:40px; font-family:'Metropolis-Bold'; display:block;}
#section2 .ampoule {width:211px; height:431px; margin:0 auto; background:url(/img/brand_am.png) no-repeat; background-size:100%;}
#section2 .overT01 {position:absolute; top:350px; left:-50%; font-size:150px; font-family:'Metropolis-ExtraBold'; color:rgba(0,0,0,.07); z-index:-1; opacity:0;}
#section2 .overT02 {position:absolute; top:470px; right:-10%; font-size:150px; font-family:'Metropolis-ExtraBold'; color:rgba(0,0,0,.07); z-index:-1; opacity:0;}
#section2 .overT03 {position:absolute; top:590px; left:-15%; font-size:150px; font-family:'Metropolis-ExtraBold'; color:rgba(0,0,0,.07); z-index:-1; opacity:0;}

#section2 .overT01.active {left:17%; opacity:1; -webkit-transition: all 1.5s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;}
#section2 .overT02.active {right:21%; opacity:1; -webkit-transition: all 1.7s ease-out; -moz-transition: all 1.3s ease-out; -o-transition: all 1.3s ease-out; transition: all 1.3s ease-out;}
#section2 .overT03.active {left:28%; opacity:1; -webkit-transition: all 1.75s ease-out; -moz-transition: all 1.8s ease-out; -o-transition: all 1.8s ease-out; transition: all 1.8s ease-out;}

.motionT {
		-webkit-transition: all 1.5s ease-out;
		-moz-transition: all 1.5s ease-out;
		-o-transition: all 1.5s ease-out;
		transition: all 1.5s ease-out;
}

.motionT1 {
		-webkit-transition: all 2s ease-out;
		-moz-transition: all 2s ease-out;
		-o-transition: all 2s ease-out;
		transition: all 2s ease-out;
}

@media all and (max-width:580px) {
	#section2 {padding:120px 0 0 0;}
	#section2 .txt {font-size:22px; font-weight:300; letter-spacing:-1.2px;}
	#section2 .amTit {margin:40px 0; background-size:40px auto; padding:50px 0 0 0; font-size:19px;}
	#section2 .amTit strong {font-size:30px;}
	#section2 .ampoule {width:150px; height:307px; }
	#section2 .overT01 {top:330px; left:-50%; font-size:64px; }
	#section2 .overT02 {top:380px; right:-10%; font-size:64px; }
	#section2 .overT03 {top:430px; left:-15%; font-size:64px; }

	#section2 .overT01.active {left:1%;}
	#section2 .overT02.active {right:2%;}
	#section2 .overT03.active {left:13%;}
}


#section3 {position:relative; background:#afa59a; }
#section3 .woman {position:absolute; top:0; right:-30%; width:100%; height:100%; background:url(/img/brand_woman.png) no-repeat right top; background-size:auto 100%; opacity:0; z-index:0}
#section3 .woman.active {right:0; opacity:1;}
#section3 .ttWrap {position:absolute; top:220px; left:-10%; text-align:left; font-size:40px; font-weight:300; color:#4a2e2a; z-index:1;}
#section3 .ttWrap strong {font-weight:400;}
#section3 .bigFont {position:absolute; top:330px; left:-3%; font-size:148px; font-family:'Metropolis-ExtraBold'; color:rgba(74,46,42,.1); z-index:1;}
#section3 .product {position:absolute; bottom:-30px; left:15%; width:822px; height:552px; background:url(/img/brand_box.png) no-repeat center top; background-size:100%; z-index:2; opacity:0;}

#section3 .ttWrap.active {left:15%;}
#section3 .bigFont.active {left:7%;}
#section3 .product.active {bottom:0; opacity:1;}


@media all and (max-width:580px) {
	#section3 .woman {width:100%; height:380px; background:url(/img/brand_woman.png) no-repeat right top; background-size:auto 115%; margin:70px 0 0 0;}
	#section3 .ttWrap {top:600px; width:100%; font-size:19px; font-weight:300; word-break:break-all; line-height:1.3; letter-spacing:-1.5px;}
	#section3 .bigFont {top:260px; left:-10%; width:50%; font-size:70px; line-height:0.8;}
	#section3 .product {bottom:-60px; left:50%; width:90%; height:400px; margin-left:-45%;}

	#section3 .ttWrap.active {left:5%;}
	#section3 .bigFont.active {left:3%;}
	#section3 .product.active {bottom:0; opacity:1;}
}




#section4 {position:relative; background:url(/img/brand04.jpg) no-repeat center top; background-size:cover; padding:250px 15%; text-align:left;}
#section4 .titWrap {font-size:35px; font-weight:300; color:#fff;}
#section4 .titWrap strong {padding:0 0 20px 0; font-size:63px; font-family:'Metropolis-ExtraBold'; display:block; text-shadow:0 5px 10px rgba(0,0,0,.1);}
#section4 .txtWrap1 {width:50%; margin:150px 0 0 0; font-size:27px; font-weight:200; line-height:1.4; color:#fff;}
#section4 .txtWrap1 strong {font-weight:400;}
#section4 .bub01 {position:absolute; top:-20px; right:35%; width:117px; height:117px; background:url(/img/bubble01.png) no-repeat; background-size:100%; z-index:0; opacity:.5;}
#section4 .bub02 {position:absolute; bottom:130px; right:22%; width:197px; height:196px; background:url(/img/bubble02.png) no-repeat; background-size:100%; z-index:0; opacity:.7;}

#section4 .cir011 {
	position:absolute; bottom:10px; right:-10%; 
	width:649px; height:649px; 
	background:url(/img/circle_big_w.png) no-repeat center center; 
	background-size:100%; 
	-webkit-animation: lot 15s linear infinite;
    animation: lot 40s linear infinite;
	z-index:1;
}

#section4 .cir021 {
	position:absolute; bottom:-50px; right:7%; 
	width:410px; height:410px; 
	background:url(/img/brand_cir.png) no-repeat center center; 
	background-size:100%; 
	-webkit-animation: lot1 25s linear infinite;
    animation: lot1 25s linear infinite;
	z-index:1;
}

@media all and (max-width:580px) {
	#section4 {padding:150px 10%;}
	#section4 .titWrap {font-size:20px; line-height:1.2;}
	#section4 .titWrap strong {padding:0 0 15px 0; font-size:35px; line-height:.9; text-shadow:0 2px 5px rgba(0,0,0,.1);}
	#section4 .txtWrap1 {width:90%; margin:70px 0 0 0; font-size:17px;}
	#section4 .bub01 {width:55px; height:55px;}
	#section4 .bub02 {width:85px; height:85px;}

	#section4 .cir011 {
		bottom:10px; right:-10%; 
		width:400px; height:400px; 
	}

	#section4 .cir021 {
		position:absolute; bottom:-50px; right:7%; 
		width:200px; height:200px; 
	}
}


#section5 {position:relative; padding:160px 0 0 0;}
#section5 .txt {font-size:30px; font-weight:200; line-height:1.3; letter-spacing:-1.5px;}
#section5 .txt strong {font-weight:400; font-size:45px; display:block;}
#section5 .circle {position:absolute; top:160px; left:50%; width:700px; height:703px; background:url(/img/brand05.png) no-repeat; background-size:100%; transform:translateX(-50%); z-index:-1;}
#section5 .bigFont {position:absolute; top:330px; left:50%; transform:translateX(-182%); font-size:60px; font-family:'Metropolis-ExtraBold'; color:#85b0d3; line-height:.9; text-align:right;}


@media all and (max-width:580px) {
	#section5 {padding:140px 0 0 0;}
	#section5 .txt {padding:0 10%; font-size:20px; letter-spacing:-1.2px;}
	#section5 .txt strong {font-size:30px;}
	#section5 .circle {top:200px; width:380px; height:383px; }
	#section5 .bigFont {top:550px; transform:translateX(-50%); font-size:35px; text-align:left;}
}


#section6 {height:auto !important; text-align:inherit;}


@-webkit-keyframes lot /* Safari and Chrome */ {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}
@keyframes lot {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}

@-webkit-keyframes lot1 /* Safari and Chrome */ {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes lot1 {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}