@charset "utf-8";
@import url("base.css");
/* initialize */
body { margin:0; padding:0; background-color:#ddd; color:#fff; font-size:12px; font-family:'Nanum Gothic', AppleGothic, '돋움', Dotum; line-height:1;-webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address,big, cite, code, del, dfn, em, 
img, ins, kbd, q, s, samp, small, strike,strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, footer, header, menu, nav, section, summary, video {z-index: inherit;padding: 0;border: 0;margin: 0;vertical-align: baseline;font: inherit;font-size: 100%; font-family:'Nanum Gothic', AppleGothic, '돋움', Dotum;}

input[type=button], input[type=text], input[type=image], 
input[type=submit],input[type=password], input[type=tel], 
input[type=number], textarea {-webkit-appearance: none; -moz-appearance: none; border-radius: 0; outline: 0; vertical-align:middle;}
input[type=checkbox] {-webkit-appearance: checkbox; -moz-appearance: checkbox;}
input[type=radio] {-webkit-appearance: radio; -moz-appearance: radio;}
input::-ms-clear {display: none; width: 0; height: 0;}
input::-ms-reveal {display: none; width: 0; height: 0;}

li{ list-style:none;  }
table{ width:100%; border-collapse:collapse; border-spacing:0; }
th, td{ border-collapse:collapse; }
legend, caption, hr{ display:none; }
a { text-decoration:none; color:#fff;}
a:hover { color:#fff;}

*{box-sizing: border-box;}

/*/////////////////////////////////////////////////////////////*/
.logo{position: fixed; left: 38px; top: 38px; z-index: 10; font-size: 20px; font-weight: 600;}
.logo .pk{width: 152px; height: 58px; display: inline-block; background: url(../image/logo.png) 0 0 no-repeat; background-size: 100%; position: absolute;}
.logo .wc{/*width: 185px;*/ height: 58px; display: inline-block; /*background: url(../image/logo2.png) left center no-repeat;*/ background-size: 100%; margin-left: 180px; }
.logo .wc span{margin: 17px 0 0 0px; display: inline-block;}

.bg{position: fixed; z-index: 9; left: 0; top: 0; width: 100%; height: 100px; background: rgba(0,0,0,0.5); display: none;}

[class ^=screen]{width: 100%; height: 100%; position: relative; font-size: 23px; letter-spacing: -0.08em; text-align: center;}
.screen0{background: url(../image/bg-01.jpg) center center no-repeat; background-size: cover;}
.screen1{background: url(../image/bg-02.jpg) center center no-repeat; background-size: cover;}
.screen2{background: url(../image/bg-03.jpg) center center no-repeat; background-size: cover;}

.screen0 .scroll-holder{display: inline-block; text-align: center;}
.screen0 .ic-scroll{width:68px; height: 128px; display: block; margin-left: -38px; bottom: 160px; position: absolute;background: url(../image/icon-scroll.png) center center no-repeat; background-size: 100%; cursor: pointer; }

.screen0 .txt-holder {margin-top: -380px;}
.screen1 .txt-holder {margin-top: -300px;}
.screen2 .txt-holder {margin-top: -380px; top: 52%;}
.screen2 .txt-holder .title {/*font-size: 60px; */margin-bottom: 20px;}
.screen2 .txt-holder > .txt0 {/*font-size: 22px; *//*font-weight: 600;*/ line-height: 29px;}
.txt-holder{position: absolute; top: 58%; width: 100%;}

.screen0 .animate{opacity: 0;}
.txt-holder p{margin-top: 16px;}
.txt-holder .title{font-size: 67px; margin-top: 0; margin-bottom: 35px;}
.txt-holder .sub-title {font-size: 30px;}
.txt-holder .sub-title em{font-size: 36px; border: 4px solid #74d8f1; margin-left: -4px; width: 56px; height: 56px; display: inline-block;}
.txt-holder .txt0 {margin-top: 20px;}
.txt-holder .blue-title {color: #74d8f1; font-weight: 600; }

.screen2 .txt-holder p span{font-weight: 600;}
.screen2 .water {font-size: 22px; margin-top: 30px; margin-left: 40px;}
.screen2 .water,
.screen2 .water li{display: inline-block;}
/*.screen2 .water li div{width: 320px; height:440px; position: relative; }*/
.screen2 .water li div{width: 290px; height:400px; position: relative; }

.screen2 .water li div span{position: absolute; line-height: 26px; }
.screen2 .water li:first-child div{background: url(../image/icon-water1.png) 0 0 no-repeat; background-size: 100%;}
.screen2 .water li:last-child div{background: url(../image/icon-water2.png) 0 0 no-repeat; background-size: 100%; margin-left: 100px;}

.screen2 .water li div .txt0{width: 100px; height:158px; color: #0073d2; padding-top: 58px;  background: url(../image/icon-water.png) 0 0 no-repeat; background-size: 100%; left: -30px; top: 50px; font-weight: 600;}
.screen2 .water li:first-child .txt1{left: 104px; top:153px;}
.screen2 .water li:first-child .txt2{left: 38px; top: 295px;}
.screen2 .water li:first-child .txt3{left: 123px; top: 295px; letter-spacing: -2px;}

.screen2 .water li:last-child .txt1{left: 102px; top: 141px;}
.screen2 .water li:last-child .txt2{left: 46px; top: 295px;}
.screen2 .water li:last-child .txt3{left: 161px; top: 295px;}

.copy {position: fixed;bottom: 50px; width: 100%; height: 105px; z-index: 9; text-align: center; letter-spacing: -0.08em; display: none;}
.copy2{position: absolute; bottom: 120px; width: 100%; text-align: center;letter-spacing: -0.08em; }
.copy2 .footer-holder,
.copy .footer-holder{position: relative; display: inline-block;}

.footer {position: fixed;bottom: 0; width: 100%; height: 105px;  background: url(../image/bg-footer.png) left top repeat-x; z-index: 9; text-align: center; font-size: 22px; font-weight: 600;  letter-spacing: -0.08em}
.footer .footer-holder{position: relative; display: inline-block;}
.footer .pump{width: 102px; height: 124px; background: url(../image/icon-pump.png) center center no-repeat; background-size: 100%; display: inline-block; position: absolute; left: 0; top: -35px;}
.footer .box{ border: 2px solid #fff; padding: 18px; display: inline-block; margin-left: 10px;}
.footer .box:hover{background: rgba(255,255,255,0.2);}
.footer ul{margin-left: 135px; margin-top: 27px;}
.footer ul,
.footer li{display: inline-block; }

.copy2 .address,
.copy .address{color: #989898; font-size: 13px; text-align: center; width: 100%; font-weight: 200; letter-spacing: 0;}

.title {font-weight: 600;}
.none{ font-size: 0;}
.blue {color: #74d8f1;}
.moving {opacity: 0;}

/*/////////////////////////////////////////////////////////////*/
@media only screen and (max-width:800px) {
	.logo{left: 30px; top: 30px; font-size: 14px; }
	.logo .pk{width: 114px; height: 40px; }
	.logo .wc{/*width:202px;*/ height: 40px; display: inline-block; /*background: url(../image/logo2.png) left center no-repeat;*/ background-size: 32px auto; margin-left: 135px; }
	.logo .wc span{margin: 13px 0 0 0px; display: inline-block;}


	[class ^=screen]{font-size: 20px;}
	.screen0 .txt-holder {margin-top: 0px; }
	.screen1 .txt-holder {margin-top: 0px;}
	.screen2 .txt-holder {margin-top: 0px; top: 14%;}
	.txt-holder{position: relative;width: 100%; top: 18%;}

	.txt-holder .title{font-size: 48px; margin-top: 0; margin-bottom: 18px;}
	.txt-holder .sub-title {font-size: 24px;}
	.txt-holder .sub-title em{font-size: 30px; border: 2px solid #74d8f1; margin-left: -2px; width: 44px; height: 44px; display: inline-block; l}
	.screen0 .ic-scroll{width:28px; height: 15px; display: block; margin-left: -14px; bottom: 160px; position: absolute;background: url(../image/icon-scroll-m.png) center center no-repeat; background-size: 100%; }


	.screen2 .water {font-size: 18px; margin-top: 30px;}
	.screen2 .water li{margin-bottom: 30px;}
	.screen2 .water li div{width: 240px; height:330px; position: relative; margin-left: 0px;}

	.screen2 .water li div span{position: absolute; line-height: 21px; }
	.screen2 .water li:last-child div{margin-left: 50px;}

	.screen2 .water li div .txt0{width: 87px; height:120px; color: #0073d2; padding-top: 49px; left: -45px; top: 45px;}
	.screen2 .water li:first-child .txt1{left: 84px; top: 125px;}
	.screen2 .water li:first-child .txt2{left: 34px; top: 242px;}
	.screen2 .water li:first-child .txt3{left: 104px; top: 242px;}

	.screen2 .water li:last-child .txt1{left: 85px; top: 114px;}
	.screen2 .water li:last-child .txt2{left: 39px; top: 242px;}
	.screen2 .water li:last-child .txt3{left: 127px; top: 242px;}

	.screen2 .txt-holder .txt0 em{display: block;}



	.footer {width: 100%;  background: url(../image/bg-footer-m.png) left bottom repeat-x; background-size: 53px 100px;  font-size: 13px;}
	.footer em{display: block;}
	
	.footer .pump{width: 51px; height: 62px; position: absolute; left: 0; top: 30px;}
	.footer .box{ border: 2px solid #fff; padding: 8px; display: inline-block; margin-top: 5px;}

	.footer ul{margin-left: 65px; margin-top: 22px;}
	.footer li{display: block;}
}

@media only screen and (max-width:600px) {
	.logo{left: 19px; top: 19px; font-size: 10px; }
	.logo .pk{width: 76px; height: 29px; }
	.logo .wc{/*width: 95px; */height: 29px; display: inline-block; /*background: url(../image/logo2.png) left center no-repeat;*/ background-size: 15px auto; margin-left: 90px; }
	.logo .wc span{margin: 10px 0 0 0px; display: inline-block;}

	[class ^=screen]{font-size: 14px;}
	.screen0{background: url(../image/bg-01-m.jpg) center center no-repeat; background-size: cover;}
	.screen1{background: url(../image/bg-02-m.jpg) center center no-repeat; background-size: cover;}
	.screen2{background: url(../image/bg-03-m.jpg) center center no-repeat; background-size: cover;}

	.screen0 .txt-holder {margin-top: 0px; top: 22%;}
	.screen1 .txt-holder {margin-top: 0px; top: 22%;}
	.screen2 .txt-holder {margin-top: 0px; padding-top: 80px;}
	.txt-holder{position: relative;width: 100%; top: 18%;}

	.screen2 .txt-holder > .txt0 { line-height: 20px;}

	.txt-holder .title{font-size: 33px; margin-top: 0; margin-bottom: 18px;}
	.txt-holder .sub-title {font-size: 15px;}
	.txt-holder .sub-title em{font-size: 18px; border: 2px solid #74d8f1; margin-left: -2px; width: 28px; height: 28px; display: inline-block;}
	.screen0 .ic-scroll{width:28px; height: 15px; display: block; margin-left: -14px; bottom: 120px; position: absolute;background: url(../image/icon-scroll-m.png) center center no-repeat; background-size: 100%; }

	.screen2 .water {font-size: 12px; margin-top: 30px;}
	.screen2 .water li{display: block; margin-bottom: 30px;}
	.screen2 .water li div{width: 160px; height:220px; position: relative; margin-left: 0px;}

	.screen2 .water li div span{position: absolute; line-height: 14px; }
	.screen2 .water li:last-child div{margin-left: 0px;}

	.screen2 .water li div .txt0{width: 58px; height:79px; color: #0073d2; padding-top: 35px; left: -25px; top: 15px;}
	.screen2 .water li:first-child .txt1{left: 54px; top: 85px;}
	.screen2 .water li:first-child .txt2{left: 21px; top: 162px;}
	.screen2 .water li:first-child .txt3{left: 70px; top: 162px;}

	.screen2 .water li:last-child .txt1{left: 55px; top: 78px;}
	.screen2 .water li:last-child .txt2{left: 23px; top: 162px;}
	.screen2 .water li:last-child .txt3{left: 83px; top: 162px;}

	.screen2 .txt-holder .txt0 em{display: block;}

	.copy2 {display: none;}
	.copy {position: initial; background: #242729; height: 206px; display: block; }
	.copy em{display: block;}
	.copy .address{color: #989898; position: relative; top: 0px; font-size: 10px; margin-top: 23px; text-align: center; width: 100%; font-weight: 200; letter-spacing: 0;}

	.footer {width: 100%;  background: url(../image/bg-footer-m.png) left bottom repeat-x; background-size: 53px 100px;  font-size: 13px;}
	.footer em{display: block;}
	
	.footer .pump{width: 51px; height: 62px; position: absolute; left: 0; top: 30px;}
	.footer .box{ border: 2px solid #fff; padding: 8px; display: inline-block; margin-top: 5px;}

	.footer ul{margin-left: 65px; margin-top: 22px;}
	.footer li{display: block;}

}

@media only screen and (max-width:950px) {
	.footer ul em{display: block;}
	.footer li{vertical-align: top;}
}

@media only screen and (max-height:  : 800px) {
	.txt-holder .title{font-size: 50px;}
}

@media only screen and (max-height:  : 320px) {
	[class ^=screen]{ letter-spacing: -0.18em; }
	.bg{display: block;}
}















/*//////////////////////////////////////////////////////////////////////////////*/
.slide_up0.animate {
	-webkit-animation: slideUp 1s ease forwards;
	-moz-animation: slideUp 1s ease forwards;
	animation: slideUp 1s ease forwards;
}
.slide_up1.animate {
	-webkit-animation: slideUp 1s ease 0.2s forwards;
	-moz-animation: slideUp 1s ease 0.2s forwards;
	animation: slideUp 1s ease 0.2s forwards;
}
.slide_up2.animate {
	-webkit-animation: slideUp 1s ease 0.5s forwards;
	-moz-animation: slideUp 1s ease 0.5s forwards;
	animation: slideUp 1s ease 0.5s forwards;
}

@-webkit-keyframes slideUp {
	0% { -webkit-transform: translateY(50px); opacity: 0; }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes slideUp {
	0% { -moz-transform: translateY(50px); opacity: 0; }
	100% { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes slideUp {
	0% { transform: translateY(50px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
.slide_down2.animate {
	-webkit-animation: slideDown 1s ease 0.5s forwards;
	-moz-animation: slideDown 1s ease 0.5s forwards;
	animation: slideDown 1s ease 0.5s forwards;
}
.slide_down3.animate {
	-webkit-animation: slideDown 1s ease 0.7s forwards;
	-moz-animation: slideDown 1s ease 0.7s forwards;
	animation: slideDown 1s ease 0.7s forwards;
}

@-webkit-keyframes slideDown {
	0% { -webkit-transform: translateY(-50px); opacity: 0; }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes slideDown {
	0% { -moz-transform: translateY(-50px); opacity: 0; }
	100% { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
	0% { transform: translateY(-50px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}