@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100; src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}   
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300; src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}    
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400; src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}    
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500; src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700; src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900; src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}
.bottle h1,.bottle h2,.bottle h3,.bottle h4,.bottle h5,.bottle h6,.bottle input,.bottle p,.bottle span,.bottle a,.bottle td,.bottle th,.bottle div,.bottle li,.bottle label,.bottle textarea{font-family: 'Noto Sans KR',sans-serif !important;letter-spacing: -0.7px;}
html,body{height: 100%;}
.bottle div,.bottle span,.bottle a,.bottle p{line-height: 150%;}
.bottlewrap .bottle img{display:block;}
.bottlewrap,.bottle{width: 100%;position: relative;max-width: 720px;margin: auto;overflow: hidden;}
.bottlewrap .bottle .inner{position: absolute;width: 100%; top:0;left: 0;height: 100%;}
.bottlewrap .quicks{width: 100%;position: fixed;bottom: 0; left: 50%; transform: translate(-50%,0);z-index: 2;max-width: 720px; margin: auto;display: none !important;}
.bottlewrap .quicks.on{display: block !important;}
.bottlewrap .bottle1 .logos{position: absolute;z-index: 2;}
.bottlewrap .bottle1 .logos1{width: 29.724%; left: 3%;top: 2%;}
.bottlewrap .bottle1 .logos2{width: 22.085%; right: 4%;top: 2%;}
.bottlewrap .bottle1 h1{padding: 26% 0 0 0;opacity: 0;animation: fade-in-top-blur 1s linear both;}
.bottlewrap .bottle2 p.T1{padding-top: 20%;}
.bottlewrap .bottle2 .waterani{position: absolute;top: 42.5%;width: 100%;text-align: center;}
.bottlewrap .bottle2 .waterani .waters{width: 4.028%;margin: auto;;}
.bottlewrap .bottle2 .waterani .waters img{animation: ups 2s linear infinite;}
.bottlewrap .bottle2 .waterani .waters span{width: 1px;padding-bottom: 276%; background: #000;margin: auto;display: inline-block;margin-bottom: 1%;}
.bottlewrap .bottle2 .waterani .waterflow{width: 9%; background: url(https://cdn.gni.kr/campaign/seoulwater/images/waterflow.png) repeat-x;padding-bottom: 2%;animation: waterflow 100s linear infinite;clip-path: polygon(0 0, 100% 0, 98% 100%, 7% 100%);  position: absolute; left: 50%; transform: translate(-50%,0);top: 90%;background-size: cover;}
.bottlewrap .bottle4{background: linear-gradient(180deg, rgba(160,206,237,1) 0%, rgba(213,231,245,1) 89%);padding-bottom: 20%;}
.bottlewrap .bottle4 .deco{width: 10.974%; margin: auto;padding: 14% 0 3% 0;display: block;}
.bottlewrap .bottle4 .deco img{display: inline-block;}
.bottlewrap .bottle4 .decos{position: absolute;}
.bottlewrap .bottle4 .decos1{width: 10.417%;left: 81%; top:24%;animation: fade-in-top-blur2 3s linear infinite;opacity: 0;}
.bottlewrap .bottle4 .decos2{width: 8.474%;left: 10%; top:36%;animation: fade-in-top-blur2 3s linear infinite 0.2s;opacity: 0; }
.bottlewrap .bottle4 .decos3{width: 10.14%;left: 77%; top:3%;animation: shai 3s linear infinite;opacity: 0; }
.bottlewrap .bottle4 .decos4{width: 10.14%;left: 86%; top:53%;animation: shai 3s linear infinite 0.2s;opacity: 0; }
.bottlewrap .bottle4 .decos5{width: 10.14%;left: 6%; top:64%;animation: shai 3s linear infinite 0.4s;opacity: 0; }
.bottlewrap .bottle4 p.T1{text-align: center;font-size: calc( 50px + 50 * ( 100vw - 720px ) / 720 );line-height: calc( 68px + 68 * ( 100vw - 720px ) / 720 );color:#1176cd;font-style: italic;font-weight: 700;letter-spacing: -2px;}
.bottlewrap .bottle4 p.T2{text-align: center;font-size: calc( 50px + 50 * ( 100vw - 720px ) / 720 );line-height: calc( 68px + 68 * ( 100vw - 720px ) / 720 );color:#0443a0;font-weight: 500;letter-spacing: -2px;margin-bottom: 12%;}
.bottlewrap .bottle4 .bottleimg{margin-bottom: 8%;}
.bottlewrap .bottle4 p.T3{text-align: center;font-size: calc( 42px + 42 * ( 100vw - 720px ) / 720 );line-height: calc( 70px + 70 * ( 100vw - 720px ) / 720 );color:#1176cd;font-weight: 700;letter-spacing: -1px;;}
.bottlewrap .bottle4 p.T4{text-align: center;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#111;font-weight: 500;letter-spacing: -1px;}
.bottlewrap .bottle5{background: #00a1f7;;}
.bottlewrap .bottle5 p.T1{text-align: center;font-size: calc( 50px + 50 * ( 100vw - 720px ) / 720 );line-height: calc( 68px + 68 * ( 100vw - 720px ) / 720 );color:#fffd66;font-weight: 700;letter-spacing: -2px;padding: 17% 0 5% 0;}
.bottlewrap .bottle5 p.T2{text-align: center;font-size: calc( 42px + 42 * ( 100vw - 720px ) / 720 );line-height: calc( 70px + 70 * ( 100vw - 720px ) / 720 );color:#fff;letter-spacing: -1px;margin-bottom: 5%;}
.bottlewrap .bottle5 .chbox{position: relative;}
.bottlewrap .bottle5 .chbox .chs{width: 90%;margin: auto;text-align: center;}
.bottlewrap .bottle5 .chbox .chs span{display: inline-block;vertical-align: bottom;opacity: 0;}
.bottlewrap .bottle5 .chbox .chs span:nth-of-type(1){width: 48.92%;}
.bottlewrap .bottle5 .chbox .chs span:nth-of-type(2){width: 40.587%;}
.bottlewrap .bottle5 .chbox .chs span:nth-of-type(1).on{animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
.bottlewrap .bottle5 .chbox .chs span:nth-of-type(2).on{animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both 0.2s}
.bottlewrap .bottle5 .chbox .videos{width: 86%; padding-bottom: 42.2%;position: relative;margin: auto;}
.bottlewrap .bottle5 .chbox .videos iframe{position: absolute;width: 100%; height: 100%; left: 0;top: 0;}
.bottlewrap .bottle5 p.T3{text-align: center;font-size: calc( 50px + 50 * ( 100vw - 720px ) / 720 );line-height: calc( 68px + 68 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 500;letter-spacing: -2px;padding: 13% 0 5% 0;}
.bottlewrap .bottle5 p.T4{text-align: center;font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fffd66;font-weight: 700;letter-spacing: -1px;margin-bottom: 10%;}
.bottlewrap .bottle5 p.T4 span{text-align: center;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 500;letter-spacing: -1px;position: relative;}
.bottlewrap .bottle5 p.T4 span:before{content: '';height: 1px; width: 50%; background: #fff;right: 50%; margin-right: 35%;position: absolute;top: 50%; transform: translate(-50%,0);}
.bottlewrap .bottle5 p.T4 span:after{content: '';height: 1px; width: 50%; background: #fff;left: 50%; margin-left: 85%;position: absolute;top: 50%; transform: translate(-50%,0);}
.bottlewrap .bottle5 p.T5{text-align: center;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 500;letter-spacing: -1px;position: relative;padding: 5% 0;}
.bottlewrap .bottle5 .cuparea{position: relative;}
.bottlewrap .bottle5 .cuparea .cups{width: 34%; position: absolute;left: 29%; top: -2%;animation: row 1s steps(3) infinite;}
.bottlewrap .bottle5 .decos{position: absolute;}
.bottlewrap .bottle5 .decos1{width: 6.806%;left: 89%; top:25%;animation: shai 3s linear infinite;opacity: 0; }
.bottlewrap .bottle5 .decos2{width: 10.14%;left: 13%; top:55%;animation: shai 3s linear infinite 0.2s;opacity: 0; }
.bottlewrap .bottle6 p.T1{text-align: center;font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#000;font-weight: 500;letter-spacing: -2px;padding: 15% 0 130% 0;}
.bottlewrap .bottle6 p.T1 span{text-align: center;font-size: calc( 50px + 50 * ( 100vw - 720px ) / 720 );line-height: calc( 68px + 68 * ( 100vw - 720px ) / 720 );color:#1176cd;font-weight: 700;letter-spacing: -2px;}
.bottlewrap .bottle6 p.T2{text-align: center;font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 700;letter-spacing: -2px;padding: 0% 0 5% 0;}
.bottlewrap .bottle6 p.T3{text-align: center;font-size: calc( 30px + 30 * ( 100vw - 720px ) / 720 );line-height: calc( 56px + 56 * ( 100vw - 720px ) / 720 );color:#000;font-weight: 500;letter-spacing: -1px;padding: 0% 0 5% 0;}
.bottlewrap .bottle6 p.T3 span{color:#000;font-weight: 700;}
.bottlewrap .bottle7{background: #edf7ff;}
.bottlewrap .bottle7 p.T1{font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#111;font-weight: 700;text-align: center;letter-spacing: -2px;padding: 17% 0 8% 0;}
.bottlewrap .bottle7 p.T1 span{color:#1176cd;letter-spacing: -2px;}
.bottlewrap .bottle7 p.T2{text-align: center;font-size: calc( 30px + 30 * ( 100vw - 720px ) / 720 );line-height: calc( 56px + 56 * ( 100vw - 720px ) / 720 );color:#000;font-weight: 500;letter-spacing: -1px;padding: 0% 0 10% 0;}
.bottlewrap .bottle7 .bottles{position: relative;}
.bottlewrap .bottle7 .bottles .talks{position: absolute;font-size: calc( 25px + 25 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 500;width: 23%; padding: 1% 0;text-align: center;border-radius: 10px;opacity: 0;}
.bottlewrap .bottle7 .bottles .talks.on{animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
.bottlewrap .bottle7 .bottles .talks2.on{animation-delay: 0.2s;}
.bottlewrap .bottle7 .bottles .talks3.on{animation-delay: 0.4s;}
.bottlewrap .bottle7 .bottles .talks4.on{animation-delay: 0.6s;}
.bottlewrap .bottle7 .bottles .talks5.on{animation-delay: 0.5s;}
.bottlewrap .bottle7 .bottles .talks6.on{animation-delay: 0.3s;}
.bottlewrap .bottle7 .bottles .talks1{left: 23%;top: 6%;}
.bottlewrap .bottle7 .bottles .talks2{left: 60%;top: 8%;}
.bottlewrap .bottle7 .bottles .talks3{left: 12%;top: 26%;}
.bottlewrap .bottle7 .bottles .talks4{left: 66%;top: 26%;}
.bottlewrap .bottle7 .bottles .talks5{left: 17%;top: 45%;}
.bottlewrap .bottle7 .bottles .talks6{left: 61%;top: 46%;}
.bottlewrap .bottle7 .bottles .talks:before{width: 15px; height: 15px; position: absolute;content: '';left: 50%; bottom: -7px; transform: translate(-50%,0) rotate(45deg);}
.bottlewrap .bottle7 .bottles .talks1:before,.bottlewrap .bottle7 .bottles .talks1{background: #ffc92c;}
.bottlewrap .bottle7 .bottles .talks2:before,.bottlewrap .bottle7 .bottles .talks2{background: #8f5df6;}
.bottlewrap .bottle7 .bottles .talks3:before,.bottlewrap .bottle7 .bottles .talks3{background: #fd5965;}
.bottlewrap .bottle7 .bottles .talks4:before,.bottlewrap .bottle7 .bottles .talks4{background: #00c1a3;}
.bottlewrap .bottle7 .bottles .talks5:before,.bottlewrap .bottle7 .bottles .talks5{background: #0443a0;}
.bottlewrap .bottle7 .bottles .talks6:before,.bottlewrap .bottle7 .bottles .talks6{background: #fc774e;}
.bottlewrap .bottle7 .obs{position: absolute;bottom:0; left: 71%;width: 23.055%;}
.bottlewrap .bottle8{background: #b2e2cd;;padding-bottom: 15%;}
.bottlewrap .bottle8 .bothead{padding: 15% 0 5% 0;text-align: center;font-size: calc( 25px + 25 * ( 100vw - 720px ) / 720 );}
.bottlewrap .bottle8 .bothead span{font-size: calc( 25px + 25 * ( 100vw - 720px ) / 720 );display: inline-block;padding: 1% 5%;border: 2px solid #000;color:#000;border-radius: 30px;font-weight: 500;margin: 0 1%;}
.bottlewrap .bottle8 p.T1{text-align: center;font-size: calc( 50px + 50 * ( 100vw - 720px ) / 720 );line-height: calc( 68px + 68 * ( 100vw - 720px ) / 720 );color:#111;font-weight: 700;letter-spacing: -2px;}
.bottlewrap .bottle8 .Tbox{text-align: center;}
.bottlewrap .bottle8 p.T2{text-align: center;font-size: calc( 42px + 42 * ( 100vw - 720px ) / 720 );line-height: calc( 70px + 70 * ( 100vw - 720px ) / 720 );color:#111;letter-spacing: -1px;margin-bottom: 15%;position: relative;display: inline-block}
.bottlewrap .bottle8 p.T2:before{content: '';position: absolute;width: 100%; height: 2px ;bottom: 0px;background: #111;}
.bottlewrap .bottle8 p.T2:after{content: '';position: absolute;width: 20px; height: 20px ;bottom: -10px;background: #111;transform: translate(-50%,0);left: 50%;clip-path: polygon(100% 50%, 50% 100%, 0% 50%);;}
.bottlewrap .bottle8 .tabarea{width: 90%; margin: auto;}
.bottlewrap .bottle8 .tabarea a.acbtn{background: #fff;font-size: calc( 30px + 30 * ( 100vw - 720px ) / 720 );line-height: calc( 46px + 46 * ( 100vw - 720px ) / 720 );color:#111;position: relative;;display: block;padding: 5% 0% 5% 11%;margin-bottom: 3%;}
.bottlewrap .bottle8 .tabarea a.acbtn.on{margin-bottom: 0%;}
.bottlewrap .bottle8 .tabarea a.acbtn:after{content: '';position: absolute;background: url(https://cdn.gni.kr/campaign/seoulwater/images/arows.png) no-repeat;width: 16px; height: 16px; background-size: 16px 16px; right: 5%; top: 50%; transform: translate(0,-50%) rotate(270deg);}
.bottlewrap .bottle8 .tabarea a.acbtn.on:after{transform: translate(0,-50%) rotate(0deg);}
.bottlewrap .bottle8 .tabarea span.Ts{color:#2f9f54;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );font-weight: 900;position: absolute;width: 6%;margin: -1% 0 0 -7%}
.bottlewrap .bottle8 .tabarea span.Ts .sm{color:#111;font-size: calc( 19px + 19 * ( 100vw - 720px ) / 720 );font-weight: 400;position: absolute;top: 50%; transform: translate(0,-50%);right: 0;}
.bottlewrap .bottle8 .tabarea .txt span.Ts{margin: 2% 0 0 1.5%;}
.bottlewrap .bottle8 .tabarea .txt.on{display: block;}
.bottlewrap .bottle8 .tabarea .txt{border-top: 1px solid #e6e6e6;position: relative;padding: 3%;background: #fff;margin-bottom: 3%;display: none;}
.bottlewrap .bottle8 .tabarea .txt span.iTs{padding:3% 0% 3% 9%;;font-size: calc( 24px + 24 * ( 100vw - 720px ) / 720 );line-height: calc( 38px + 38 * ( 100vw - 720px ) / 720 );color:#111;display: inline-block;}
.bottlewrap .bottle8 .tabarea .txt span.iTs .co1{color:#2f9f54}
.bottlewrap .bottle8 .tabarea .txt span.iTs .jum{position: relative;margin-bottom: 3%;display: inline-block;}
.bottlewrap .bottle8 .tabarea .txt span.iTs .jum:before{content: '';position: absolute;width: 5px; height: 5px; background: #2f9f54; margin:3% 0 0 -3%;border-radius: 5px;}
.bottlefot{width: 100%;position: relative;max-width: 720px;margin: auto;overflow: hidden;background: #fff;padding-bottom: 25%;}
.bottlefot .fobtn{display: flex;padding: 5%;border-bottom: 1px solid #c0c0c0;}
.bottlefot .fobtn a{flex: 2;border: 1px solid #c0c0c0;padding: 1% 0;font-size: calc( 19px + 19 * ( 100vw - 720px ) / 720 );font-weight: 400;text-align: center;margin: 0 2%;}
.bottlefot p.T1{font-size: calc( 16px + 16 * ( 100vw - 720px ) / 720 );line-height: calc( 26px + 26 * ( 100vw - 720px ) / 720 );color:#777;text-align: center;padding: 5% 0;}
.bottlefot  a.fot{width: 22.085%; margin: auto;display: block;}
.bottlewrap .layers.mains{position: fixed;}
.bottlewrap .layers {background: rgb(176,215,241); background: linear-gradient(180deg, rgba(176,215,241,1) 0%, rgba(227,243,255,1) 89%);padding: 10% 0;text-align: center;z-index: 10;position: absolute;bottom: 0;width: 100%; max-width: 720px; left: 50%;transform: translate(-50%,0);border-radius: 10px;display: none;}
.bottlewrap .layers a.lx{position: absolute;width: 4.724%; right: 3%; top: 5%;}
.bottlewrap .layers p.T1{font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );text-align: center;margin-bottom: 5%;font-weight: 700;color:#000}
.bottlewrap .layers .layerbtn{text-align: center;}
.bottlewrap .layers .layerbtn a{display: block;width: 70%; padding: 3% 0;color:#fff;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );font-weight: 700;text-align: center;margin: auto; margin-bottom: 3%;border-radius: 10px;}
.bottlewrap .layers .layerbtn a:nth-of-type(1){background: #0443a0;}
.bottlewrap .layers .layerbtn a:nth-of-type(2){background: #0e1047;margin-bottom: 0;}
#container{max-width: none !important;}
.bottlemake{background: #00a1f7;height: 100%;max-width: 720px; margin: auto;}
.bottlemake .step1{position: absolute;top: 50%; width: 100%;text-align: center;transform: translate(0,-50%);max-width: 720px;}
.bottlemake .step1 p.T1{font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 700;margin-bottom: 10%;}
.bottlemake .step1 input{border-radius: 10px;font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );border: 0;padding: 3%;width: 80%;display: block;margin: auto;margin-bottom: 10%;}
.bottlemake .step1 .makebtn{background: #0e1047;color:#fff;font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );padding: 3% 10%;font-weight: 700;border-radius: 10px;}
.bottlemake .step1 .makebtn span{display: inline-block;width: 5.556%;;}
.bottlemake .step2{position: relative;width: 100%;text-align: center;max-width: 720px;}
.bottlemake .step2 .tops{width: 100%; position: relative;padding-bottom: 75%;background: #00a1f7;}
.bottlemake .step2 .tops .chars{width: 100%;text-align: center;padding-top: 10%;max-width: 720px;}
.bottlemake .step2 .tops .chars p.T1{color:#fff;font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 700;letter-spacing: -2px;margin-bottom: 25%;}
.bottlemake .step2 .tops .chars p.T1 span{color:#fffd66;}
.bottlemake .step2 .tops .chars .charter{position: relative;width: 80%; margin: auto;}
.bottlemake .step2 .tops .chars .charter img{position: absolute;}
.bottlemake .step2 .tops .chars .charter img#items1{width: 70.14%;;position: relative;}
.bottlemake .step2 .tops .chars .charter img#items2{width: 44.273%;left: 50%; top: -20%;transform: translate(-48%,0);}
.bottlemake .step2 .tops .chars .charter img#items3{width: 15.454%;left: 50%; top: 18%;transform: translate(-48%,0);}
.bottlemake .step2 .tops .chars .charter img#items4{width: 15.454%;left: 50%; top: 15%;transform: translate(-48%,0);}
.bottlemake .step2 .tops .chars .charter img#items5{width: 2.78%;left: 50%; top: 21%;transform: translate(-33%,0);}
.bottlemake .step2 .tops .chars .charter img#items6{width: 6.771%;left: 50%; top: 27%;transform: translate(-39%,0);}
.bottlemake .step2 .tops .chars .charter img#items7{display: none; width: 23.265%;left: 50%; top: 5%;transform: translate(-44%,0);}
.bottlemake .step2 .tops .chars .charter img#items8{display: none; width: 49.306%;left: 50%; top: -35%;transform: translate(-48%,0);}
.bottlemake .step2 .tops .chars .charter img#items9{width: 64.933%;left: 50%; top: 41%;transform: translate(-47%,0);}
.bottlemake .step2 .tops .chars .charter img#items10{display: none;width: 28.82%;left: 15%; top: -9%;transform: translate(-47%,0);}
.bottlemake .step2 .tops .d{position: absolute;}
.bottlemake .step2 .tops .d1{left: 82%; top: 26%; width: 10.14%;;animation: shai 3s linear infinite;opacity: 0;}
.bottlemake .step2 .tops .d2{left: 78%; top: 38%; width: 4.34%;animation: shai 3s linear infinite;opacity: 0;}
.bottlemake .step2 .tops .d3{left: 10%; top: 85%; width: 10.14%;;animation: shai 3s linear infinite 0.2s;opacity: 0;}
.bottlemake .step2 .bottom{width: 100%; position: absolute;background: #00a1f7;bottom: 6px;}
.bottlemake .step2 .bottom .custom{width: 98%; margin: auto;position: absolute;bottom: 0; max-width: 700px;left: 50%; transform: translate(-50%,0);border-radius: 10px 10px 0 0;border:1px solid #93bcf4;overflow: hidden;;}
.bottlemake .step2 .bottom .custom .customtop{background: url(https://cdn.gni.kr/campaign/seoulwater/images/backbg.png) repeat;padding: 3% 5%;position: relative;}
.bottlemake .step2 .bottom .custom .customtop p.T1{font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );font-weight: 700;color: #fff;text-align: left;}
.bottlemake .step2 .bottom .custom .customtop a.compl{display: inline-block;position: absolute;right: 3%; padding: 0% 7%;background: #0e1047;font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );font-weight: 700;color: #fff;top: 50%;transform: translate(0,-50%);border-radius: 100px;}
.swiper,.swiper-container {margin-left: auto;margin-right: auto; position: relative;overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block;}
.swiper-wrapper {position: relative; width: 100%; height: 100%; z-index: 1; display: flex;transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box;}
.swiper-android .swiper-slide,.swiper-wrapper {transform: translate3d(0px, 0, 0);}
.swiper-slide,.swiper-slide {flex-shrink: 0;width: 100%;height: 100%;position: relative;transition-property: transform;display: block;}
.swiper-free-mode>.swiper-wrapper {transition-timing-function: ease-out; margin: 0 auto}
.bottlemake .step2 .bottom .custom .custommid{background: #b1e2ff;padding: 3% 3%;}
.bottlemake .step2 .bottom .custom .custommid a{width: 100%;background: #fff;display:block;border-radius: 77px; ;}
.bottlemake .step2 .bottom .custom .custommid a.on{background: #54b9ff;}
.bottlemake .step2 .bottom .custom .custombot{background: url(https://cdn.gni.kr/campaign/seoulwater/images/backbg2.png) repeat;}
.bottlemake .step2 .bottom .custom .custombot .tab-content{display: none;width: 100%; margin: auto;padding:3% 5%;overflow-y: scroll;;height: 150px;}
.bottlemake .step2 .bottom .custom .custombot .tab-content.on{display: block;}
.bottlemake .step2 .bottom .custom .custombot .tab-content a{float: left;margin:2%;width: 21%;position: relative;}
.bottlemake .step2 .bottom .custom .custombot .tab-content a.on:before{content: '';position: absolute;width: 100%;height: 100%; border-radius: 77px; border: 2px solid #54b9ff;}
.bottlemake .step2 .bottom .custom .custombot #tab-10.tab-content a.on:before,
.bottlemake .step2 .bottom .custom .custombot #tab-8.tab-content a.on:before,
.bottlemake .step2 .bottom .custom .custombot #tab-7.tab-content a.on:before{content: '';position: absolute;width: 100%;height: 100%; border-radius: 77px; border: none;}
.bottlemake .step2 .bottom .custom .custombot #tab-10.tab-content a.one:before,
.bottlemake .step2 .bottom .custom .custombot #tab-8.tab-content a.one:before,
.bottlemake .step2 .bottom .custom .custombot #tab-7.tab-content a.one:before{content: '';position: absolute;width: 100%;height: 100%; border-radius: 77px; border: 2px solid #54b9ff;}
.bottlemake .bottlepop{position: fixed;width: 98%; max-width: 700px; left: 50%; transform: translate(-50%,0);bottom: 0px; background: linear-gradient(180deg, rgba(176,215,241,1) 0%, rgba(227,243,255,1) 89%);display: none;border-radius:10px ;}
.bottlemake .bottlepop .bottlex.x{position: absolute;right: 4%; top: 6%; width: 5%;}
.bottlemake .bottlepop .T1{font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );text-align: center;margin-bottom: 5%;font-weight: 700;color:#111;padding-top: 15%;}
.bottlemake .bottlepop .bottlebtn{text-align: center;width: 100%;margin-bottom: 15%;}
.bottlemake .bottlepop .bottlebtn a{display: inline-block;margin: 0 2%;color:#fff;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );border-radius: 10px;padding: 2% 7%;font-weight: 700;box-shadow: 3px 0px 3px #cfdde8;}
.bottlemake .bottlepop .bottlebtn a:nth-of-type(1){background: #0443a0;}
.bottlemake .bottlepop .bottlebtn a:nth-of-type(2){background: #8aa8d4;}
.bottlemake .bottlepop .deco{position: absolute;bottom: 0;right: 3%; width: 20.884%;}
.bottlemake .step3{position: absolute;top: 50%; width: 100%;text-align: center;transform: translate(0,-50%);max-width: 720px;}
.bottlemake .step3 p.T1{color:#fff;font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 700;letter-spacing: -1px;margin-bottom: 9%;}
.bottlemake .step3 p.T1 span{color:#fffd66;letter-spacing: -1px}
.bottlemake .step3 .resultbottle{position: relative;}
.bottlemake .step3 .resultbottle .txtimg{position: absolute;top: 36%;left: 0;}
.bottlemake .step3 .resultbottle .bottleimg{width: 52.64%;margin: auto;position: relative;}
.bottlemake .step3 .resultbottle .bottleimg .charter{position: absolute;top: 54%;}
.bottlemake .step3 .resultbottle .bottleimg .charter img{position: absolute;}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items11{width: 38.577%;;position: relative;}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items12{width: 24.35015%;left: 50%; top: -20%;transform: translate(-48%,0);}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items13{width: 8.4997%;left: 50%; top: 18%;transform: translate(-48%,0);}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items14{width: 9%;left: 50%; top: 15%;transform: translate(-48%,0);}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items15{width: 2.2%;left: 50%; top: 21%;transform: translate(-33%,0);}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items16{width: 3.72405%;left: 50%; top: 27%;transform: translate(-39%,0);}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items17{display: none; width: 12.79575%;left: 50%; top: 5%;transform: translate(-44%,0);}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items18{display: none; width: 27.1183%;left: 50%; top: -35%;transform: translate(-48%,0);}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items19{width: 35.71315%;left: 50%; top: 41%;transform: translate(-47%,0);}
.bottlemake .step3 .resultbottle .bottleimg .charter img#items20{display: none;width: 15.851%;left: 32%; top: -9%;transform: translate(-47%,0);}
.bottlemake .step3 .resultbottle .decos{position: absolute;}
.bottlemake .step3 .resultbottle .decos1{left: 82%; top: -4%; width: 10.14%;;animation: shai 3s linear infinite;opacity: 0;}
.bottlemake .step3 .resultbottle .decos2{left: 78%; top: 7%; width: 4.34%;transform: rotate(-17deg);animation: shai 3s linear infinite 0.3s;opacity: 0;}
.bottlemake .step3 .resultbottle .decos3{left: 10%; top: 16%; width: 10.14%;;animation: shai 3s linear infinite 0.2s;opacity: 0;}
.bottlemake .step3 p.T2{color:#fff;font-size: calc( 30px + 30 * ( 100vw - 720px ) / 720 );line-height: calc( 46px + 46 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 700;letter-spacing: -1px;margin-bottom: 9%;}
.bottlemake .step3 p.T2 span{color:#fffd66;letter-spacing: -1px;}
.bottlemake .step3 .makebtn{background: #0e1047;color:#fff;font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );padding: 3% 10%;font-weight: 700;border-radius: 10px;}
.bottlemake .step3 .makebtn span{display: inline-block;width: 5.556%;;}
.bottlewrap .with1 .vis{position: relative;width: 100%; padding-bottom: 100%;}
.bottlewrap .with1 .vis iframe{position: absolute;width: 100%; height: 100%; left: 0;top: 0;}
.bottlewrap .with2{background: #00a1f7;padding: 5% 0;overflow: initial;}
.bottlewrap .with2 p.T1{text-align: center;font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 500;letter-spacing: -2px;width: 52%;position: absolute;right: 0;top: 50%;transform: translate(0,-50%);}
.bottlewrap .with2 p.T1 span{color:#fffd66}
.bottlewrap .with2 .resultbottle{position: relative;width: 50%;;}
.bottlewrap .with2 .resultbottle .txtimg{position: absolute;top: 36%;left: 0;}
.bottlewrap .with2 .resultbottle .bottleimg{width: 66.495%;margin: auto;position: relative;margin-top: -27%;}
.bottlewrap .with2 .resultbottle .bottleimg .charter{position: absolute;top: 54%;}
.bottlewrap .with2 .resultbottle .bottleimg .charter img{position: absolute;}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items1{width: 38.577%;;position: relative;left: 50%;transform: translate(-50%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items2{width: 24.35015%;left: 50%; top: -20%;transform: translate(-48%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items3{width: 8.4997%;left: 50%; top: 18%;transform: translate(-48%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items4{width: 9%;left: 50%; top: 15%;transform: translate(-48%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items5{width: 2.2%;left: 50%; top: 21%;transform: translate(-33%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items6{width: 3.72405%;left: 50%; top: 27%;transform: translate(-39%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items7{width: 12.79575%;left: 50%; top: 5%;transform: translate(-44%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items8{width: 27.1183%;left: 50%; top: -35%;transform: translate(-48%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items9{width: 35.71315%;left: 50%; top: 41%;transform: translate(-47%,0);}
.bottlewrap .with2 .resultbottle .bottleimg .charter img#items10{width: 15.851%;left: 32%; top: -9%;transform: translate(-47%,0);}
.bottlewrap .with2 .resultbottle .decos{position: absolute;}
.bottlewrap .with2 .resultbottle .decos2{left: 76%; top: 52%; width: 11%;transform: rotate(-17deg);animation: shai 3s linear infinite 0.3s;opacity: 0;}
.bottlewrap .with2 .resultbottle .decos3{left: 89%; top: 21%; width: 21%;;animation: shai 3s linear infinite 0.2s;opacity: 0;}
.bottlewrap .with3{background: #f5f8fa;padding: 20% 0;text-align: center;}
.bottlewrap .with3 p.T1{text-align: center;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#111;letter-spacing: -1px;margin-bottom: 10%;}
.bottlewrap .with3 p.T1 span{font-size: calc( 42px + 42 * ( 100vw - 720px ) / 720 );}
.bottlewrap .with3 p.T1 span.co1{color:#1176cd;font-weight: 700;letter-spacing: -1px}
.bottlewrap .with3 p.T1 span.co2{color:#2f9f54;font-weight: 700;letter-spacing: -1px}
.bottlewrap .with3 .makebtn{background: #0443a0;color:#fff;font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );padding: 3% 15%;font-weight: 700;border-radius: 10px;display: inline-block;}
.bottlewrap .with3 .airs{position: absolute;right: 5%;top: 2%;width: 26.86%;}
.bottlewrap .with3 .airs span:nth-of-type(1){ display: block;width: 100%;;position: relative;left:0%;margin-bottom: 10%;transform: translate(55%, 135%) rotate(13deg);}
.bottlewrap .with3 .airs span:nth-of-type(2){ display: block;width: 57.87%;;position: relative;left:65%;clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);}
.bottlewrap .with3 .airs.on span:nth-of-type(1){animation: flys 1s linear both;}
.bottlewrap .with3 .airs.on span:nth-of-type(2){animation: down 1s linear both;}
.bottlewrap .withus1{background: #00c1a3;padding: 10% 8%;}
.bottlewrap .withus1 .gnilogos{position: absolute;width: 22.084%; top: 10%; right: 5%;}
.bottlewrap .withus1 p.T1{font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#111;letter-spacing: -1px;font-weight: 500}
.bottlewrap .withus1 p.T1 span.b{font-size: calc( 42px + 42 * ( 100vw - 720px ) / 720 );font-weight: 700;color:#fffd66}
.bottlewrap .withus1 p.T1 span.co1{color:#fff;font-weight: 700;letter-spacing: -1px;font-weight: 500;}
.bottlewrap .withus1 .decos{position: absolute;}
.bottlewrap .withus1 .decos1{left: 76%; bottom:0; width: 16.25%;animation: fade-in-bottom 0.5s linear both;opacity: 0;}
.bottlewrap .withus1 .decos2{left: 71%; top: 75%; width: 4%;transform: rotate(-17deg);animation: shai 3s linear infinite 0.3s;opacity: 0;}
.bottlewrap .withus1 .decos3{left: 90%; top: 29%; width: 7%;;animation: shai 3s linear infinite 0.2s;opacity: 0;}
.bottlewrap .withus2 .vis{position: relative;width: 100%; padding-bottom: 100%;}
.bottlewrap .withus2 .vis iframe{position: absolute;width: 100%; height: 100%; left: 0;top: 0;}
.bottlewrap .withus3 p.tts{width: 100%; text-align: center;font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 500;letter-spacing: -2px;margin-bottom: 10%;}
.bottlewrap .withus3 p.tts span{color:#fffd66;font-weight: 700;letter-spacing: -2px;;}
.bottlewrap .withus3{background: #00a1f7;padding: 20% 0;}
.bottlewrap .withus3 .resultbottle{position: relative;margin-bottom: 20%;}
.bottlewrap .withus3 .resultbottle .bottleimg{width: 52.64%;margin: auto;position: relative;}
.bottlewrap .withus3 .resultbottle .bottleimg .charter{position: absolute;top: 52%;}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img{position: absolute;}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items1{width: 38.577%;;position: relative;left: 50%;transform: translate(-50%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items2{width: 24.35015%;left: 50%; top: -20%;transform: translate(-48%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items3{width: 8.4997%;left: 50%; top: 18%;transform: translate(-48%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items4{width: 9%;left: 50%; top: 15%;transform: translate(-48%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items5{width: 2.2%;left: 50%; top: 21%;transform: translate(-33%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items6{width: 3.72405%;left: 50%; top: 27%;transform: translate(-39%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items7{width: 12.79575%;left: 50%; top: 5%;transform: translate(-44%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items8{width: 27.1183%;left: 50%; top: -35%;transform: translate(-48%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items9{width: 35.71315%;left: 50%; top: 41%;transform: translate(-47%,0);}
.bottlewrap .withus3 .resultbottle .bottleimg .charter img#items10{width: 15.851%;left: 32%; top: -9%;transform: translate(-47%,0);}
.bottlewrap .withus3 .resultbottle .decos{position: absolute;}
.bottlewrap .withus3 .resultbottle .decos1{left: 17%; top: -5%; width: 10%;;animation: shai 3s linear infinite 0.2s;opacity: 0;}
.bottlewrap .withus3 .resultbottle .decos2{left: 76%; top: -4%; width: 5%;transform: rotate(-17deg);animation: shai 3s linear infinite 0.3s;opacity: 0;}
.bottlewrap .withus3 .resultbottle .decos3{left: 80%; top: -13%; width: 10%;;animation: shai 3s linear infinite 0.2s;opacity: 0;}
.bottlewrap .withus3 .talkbox{position: absolute;width: 100%;top: 16%;}
.bottlewrap .withus3 .talkbox .swiper{position: absolute; left: 50%; transform: translate(-50%,0);width: 100%;}
.bottlewrap .withus3 .talkbox .talks{position: relative;font-size: calc( 25px + 25 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 500;width: 28%; padding: 1% 0;text-align: center;border-radius: 10px;display: block;box-shadow: 5px 5px 5px rgba(0,0,0,.1);opacity: 0;}
.bottlewrap .withus3 .talkbox .swiper-slide-active .talks{animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
.bottlewrap .withus3 .talkbox .swiper-slide-active .talks2{animation-delay: 0.2s;}
.bottlewrap .withus3 .talkbox .swiper-slide-active .talks3{animation-delay: 0.4s;}
.bottlewrap .withus3 .talkbox .swiper-slide-active .talks4{animation-delay: 0.6s;}
.bottlewrap .withus3 .talkbox .swiper-slide-active .talks5{animation-delay: 0.5s;}
.bottlewrap .withus3 .talkbox .swiper-slide-active .talks6{animation-delay: 0.3s;}
.bottlewrap .withus3 .talkbox .talks1{left: 17%;margin-top: 0%;}
.bottlewrap .withus3 .talkbox .talks2{left: 60%;margin-top: -7%;}
.bottlewrap .withus3 .talkbox .talks3{left: 12%;margin-top: 17%;}
.bottlewrap .withus3 .talkbox .talks4{left: 64%;margin-top: -9%;}
.bottlewrap .withus3 .talkbox .talks5{left: 13%;margin-top: 24%;}
.bottlewrap .withus3 .talkbox .talks6{left: 62%;margin-top: -9%;margin-bottom: 10%;}
.bottlewrap .withus3 .talkbox .talks:before{width: 10px; height: 10px; position: absolute;content: '';left: 50%; bottom: -5px; transform: translate(-50%,0) rotate(45deg);}
.bottlewrap .withus3 .talkbox .talks:after{content: '';width: 10px;height: 10px; background: url(https://cdn.gni.kr/campaign/seoulwater/images/plus.png) no-repeat;background-size: 10px 10px;position: absolute;right: 8%; top:50%; transform: translate(0,-50%);}
.bottlewrap .withus3 .talkbox .talks1:before,.bottlewrap .talkbox .bottles .talks1{background: #ffc92c;}
.bottlewrap .withus3 .talkbox .talks2:before,.bottlewrap .talkbox .bottles .talks2{background: #8f5df6;}
.bottlewrap .withus3 .talkbox .talks3:before,.bottlewrap .talkbox .bottles .talks3{background: #fd5965;}
.bottlewrap .withus3 .talkbox .talks4:before,.bottlewrap .talkbox .bottles .talks4{background: #00c1a3;}
.bottlewrap .withus3 .talkbox .talks5:before,.bottlewrap .talkbox .bottles .talks5{background: #0443a0;}
.bottlewrap .withus3 .talkbox .talks6:before,.bottlewrap .talkbox .bottles .talks6{background: #fc774e;}
.bottlewrap .withus3 .talkbox .swiper-pagination{text-align: center;width: 100%;margin-top: 83%;position: absolute;}
.bottlewrap .withus3 .talkbox .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; border-radius: 10px; border: 2px solid #fff;display: inline-block;margin: 0 5px;}
.bottlewrap .withus3 .talkbox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 10px; height: 10px; border-radius: 10px; background: #fff;border: 2px solid #fff;}
.bottlewrap .withus3 .talkbox .swiper-button-prev{background: url(https://cdn.gni.kr/campaign/seoulwater/images/arow3.png) no-repeat;left: 5%;}
.bottlewrap .withus3 .talkbox .swiper-button-next{background: url(https://cdn.gni.kr/campaign/seoulwater/images/arow4.png) no-repeat;right: 5%;}
.bottlewrap .withus3 .talkbox .swiper-button-prev,
.bottlewrap .withus3 .talkbox .swiper-button-next{width: 55px; height: 26px;display: inline-block;position: absolute;margin-top: 83%}
.bottlewrap .withus3 .talklayer{position: fixed;width: 96%;max-width: 700px;left: 50%; top: 50%; transform: translate(-50%,-50%);background: #57caff;z-index: 10;border-radius: 10px;display: none;}
.bottlewrap .withus3 .talklayer a.lx{position: absolute;width: 4.724%; right: 3%; top: 5%;}
.bottlewrap .withus3 .talklayer .Tbox{padding: 10%;}
.bottlewrap .withus3 .talklayer .Tbox p{margin-bottom: 5%;}
.bottlewrap .withus3 .talklayer .Tbox p span{display: inline-block;font-size: calc( 30px + 30 * ( 100vw - 720px ) / 720 );line-height: calc( 46px + 46 * ( 100vw - 720px ) / 720 );vertical-align: top;font-weight: 500;}
.bottlewrap .withus3 .talklayer .Tbox p span:nth-of-type(1){width: 30%;color: #fff;padding-right: 3%; margin-right: 3%;position: relative;}
.bottlewrap .withus3 .talklayer .Tbox p span:nth-of-type(1):before{content: '';position: absolute;width: 5px; height: 5px; background: #fff; border-radius: 5px; margin-left: -10%;top: 50%; margin-top: -2.5px;}
.bottlewrap .withus3 .talklayer .Tbox p span:nth-of-type(1):after{content: '';position: absolute;width: 1px; height: 50%; background: #fff; top:50%; transform: translate(0,-50%);right: 0;}
.bottlewrap .withus3 .talklayer .Tbox p span:nth-of-type(2){width: 64%;color: #111;;}
.bottlewrap .withus3 .withinput{width: 90%; margin: auto;}
.bottlewrap .withus3 .withinput .inbox{margin-bottom: 8%;}
.bottlewrap .withus3 .withinput p{position: relative;text-align: center;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#fff;;margin-bottom: 5%;}
.bottlewrap .withus3 .withinput p span.i{position: absolute;left: 0;width: 10.128%;top: 15%;;}
.bottlewrap .withus3 .withinput p span.co1{color:#fffd66;}
.bottlewrap .withus3 .withinput input{width: 100%;padding: 3% 5%;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#111;border: 0;border-radius: 10px;}
.bottlewrap .withus3 .withinput textarea{width: 100%;padding: 3% 5%;font-size: calc( 35px + 35 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#111;border: 0;border-radius: 10px;height: 15%;}
.bottlewrap .withus3 .withinput .makebtn{background: #0e1047;color:#fff;font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );padding: 5% 0;font-weight: 700;border-radius: 10px;width: 100%;display: block;text-align: center;margin-bottom: 3%;}
.bottlewrap .withus3 .withinput p.T2{font-size: calc( 24px + 24 * ( 100vw - 720px ) / 720 );color:#111;line-height: calc( 38px + 38 * ( 100vw - 720px ) / 720 );}
.bottlewrap .withcom1{background: #00a1f7;padding: 20% 0;}
.bottlewrap .withcom1 p.T1{font-size: calc( 45px + 45 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );color:#111;font-weight: 500;letter-spacing: -2px;text-align: center;margin-bottom: 15%;}
.bottlewrap .withcom1 p.T1 span.co1{color:#fff;font-weight: 700;}
.bottlewrap .withcom1 p.T1 span.co2{color:#fffd66;font-weight: 700;}
.bottlewrap .withcom1 .resultbottle{position: relative;margin-bottom: 20%;}
.bottlewrap .withcom1 .resultbottle .bottleimg{width: 52.64%;margin: auto;position: relative;}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter{position: absolute;top: 54%;}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img{position: absolute;}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items1{width: 38.577%;;position: relative;left: 50%;transform: translate(-50%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items2{width: 24.35015%;left: 50%; top: -20%;transform: translate(-48%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items3{width: 8.4997%;left: 50%; top: 18%;transform: translate(-48%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items4{width: 9%;left: 50%; top: 15%;transform: translate(-48%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items5{width: 2.2%;left: 50%; top: 21%;transform: translate(-33%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items6{width: 3.72405%;left: 50%; top: 27%;transform: translate(-39%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items7{width: 12.79575%;left: 50%; top: 5%;transform: translate(-44%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items8{width: 27.1183%;left: 50%; top: -35%;transform: translate(-48%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items9{width: 35.71315%;left: 50%; top: 41%;transform: translate(-47%,0);}
.bottlewrap .withcom1 .resultbottle .bottleimg .charter img#items10{width: 15.851%;left: 32%; top: -9%;transform: translate(-47%,0);}
.bottlewrap .withcom1 .resultbottle .decos{position: absolute;}
.bottlewrap .withcom1 .resultbottle .decos1{left: 17%; top: -5%; width: 10%;;animation: shai 3s linear infinite 0.2s;opacity: 0;}
.bottlewrap .withcom1 .resultbottle .decos2{left: 76%; top: -4%; width: 5%;transform: rotate(-17deg);animation: shai 3s linear infinite 0.3s;opacity: 0;}
.bottlewrap .withcom1 .resultbottle .decos3{left: 80%; top: -13%; width: 10%;;animation: shai 3s linear infinite 0.2s;opacity: 0;}
.bottlewrap .withcom1 .talkbox{position: absolute;width: 100%;top: 34%;}
.bottlewrap .withcom1 .talkbox .talks{position: relative;font-size: calc( 25px + 25 * ( 100vw - 720px ) / 720 );color:#fff;font-weight: 500;width: 28%; padding: 1% 0;text-align: center;border-radius: 10px;display: block;box-shadow: 5px 5px 5px rgba(0,0,0,.1);opacity: 0;}
.bottlewrap .withcom1 .talkbox .swiper-slide-active .talks{animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
.bottlewrap .withcom1 .talkbox .swiper-slide-active .talks2{animation-delay: 0.2s;}
.bottlewrap .withcom1 .talkbox .swiper-slide-active .talks3{animation-delay: 0.4s;}
.bottlewrap .withcom1 .talkbox .swiper-slide-active .talks4{animation-delay: 0.6s;}
.bottlewrap .withcom1 .talkbox .swiper-slide-active .talks5{animation-delay: 0.5s;}
.bottlewrap .withcom1 .talkbox .swiper-slide-active .talks6{animation-delay: 0.3s;}
.bottlewrap .withcom1 .talkbox .talks1{left: 17%;margin-top: 0%;}
.bottlewrap .withcom1 .talkbox .talks2{left: 60%;margin-top: -7%;}
.bottlewrap .withcom1 .talkbox .talks3{left: 12%;margin-top: 17%;}
.bottlewrap .withcom1 .talkbox .talks4{left: 64%;margin-top: -9%;}
.bottlewrap .withcom1 .talkbox .talks5{left: 13%;margin-top: 24%;}
.bottlewrap .withcom1 .talkbox .talks6{left: 62%;margin-top: -9%;margin-bottom: 10%;}
.bottlewrap .withcom1 .talkbox .talks:before{width: 10px; height: 10px; position: absolute;content: '';left: 50%; bottom: -5px; transform: translate(-50%,0) rotate(45deg);}
.bottlewrap .withcom1 .talkbox .talks:after{content: '';width: 10px;height: 10px; background: url(https://cdn.gni.kr/campaign/seoulwater/images/plus.png) no-repeat;background-size: 10px 10px;position: absolute;right: 8%; top:50%; transform: translate(0,-50%);}
.bottlewrap .withcom1 .talkbox .talks1:before,.bottlewrap .talkbox .bottles .talks1{background: #ffc92c;}
.bottlewrap .withcom1 .talkbox .talks2:before,.bottlewrap .talkbox .bottles .talks2{background: #8f5df6;}
.bottlewrap .withcom1 .talkbox .talks3:before,.bottlewrap .talkbox .bottles .talks3{background: #fd5965;}
.bottlewrap .withcom1 .talkbox .talks4:before,.bottlewrap .talkbox .bottles .talks4{background: #00c1a3;}
.bottlewrap .withcom1 .talkbox .talks5:before,.bottlewrap .talkbox .bottles .talks5{background: #0443a0;}
.bottlewrap .withcom1 .talkbox .talks6:before,.bottlewrap .talkbox .bottles .talks6{background: #fc774e;}
.bottlewrap .withcom1 .talkbox .swiper-pagination{text-align: center;width: 100%;margin-top: 13%;}
.bottlewrap .withcom1 .talkbox .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; border-radius: 10px; border: 2px solid #fff;display: inline-block;margin: 0 5px;}
.bottlewrap .withcom1 .talkbox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 10px; height: 10px; border-radius: 10px; background: #fff;border: 2px solid #fff;}
.bottlewrap .withcom1 .talkbox .swiper-button-prev{background: url(https://cdn.gni.kr/campaign/seoulwater/images/arow3.png) no-repeat;left: 5%;}
.bottlewrap .withcom1 .talkbox .swiper-button-next{background: url(https://cdn.gni.kr/campaign/seoulwater/images/arow4.png) no-repeat;right: 5%;}
.bottlewrap .withcom1 .talkbox .swiper-button-prev,
.bottlewrap .withcom1 .talkbox .swiper-button-next{width: 55px; height: 26px;display: inline-block;position: absolute;margin-top: -25px;}
.bottlewrap .withcom1 .talklayer{position: fixed;width: 96%;max-width: 700px;left: 50%; top: 50%; transform: translate(-50%,-50%);background: #57caff;z-index: 10;border-radius: 10px;display: none;}
.bottlewrap .withcom1 .talklayer a.lx{position: absolute;width: 4.724%; right: 3%; top: 5%;}
.bottlewrap .withcom1 .talklayer .Tbox{padding: 10%;}
.bottlewrap .withcom1 .talklayer .Tbox p{margin-bottom: 5%;}
.bottlewrap .withcom1 .talklayer .Tbox p span{display: inline-block;font-size: calc( 30px + 30 * ( 100vw - 720px ) / 720 );line-height: calc( 46px + 46 * ( 100vw - 720px ) / 720 );vertical-align: top;font-weight: 500;}
.bottlewrap .withcom1 .talklayer .Tbox p span:nth-of-type(1){width: 30%;color: #fff;padding-right: 3%; margin-right: 3%;position: relative;}
.bottlewrap .withcom1 .talklayer .Tbox p span:nth-of-type(1):before{content: '';position: absolute;width: 5px; height: 5px; background: #fff; border-radius: 5px; margin-left: -10%;top: 50%; margin-top: -2.5px;}
.bottlewrap .withcom1 .talklayer .Tbox p span:nth-of-type(1):after{content: '';position: absolute;width: 1px; height: 50%; background: #fff; top:50%; transform: translate(0,-50%);right: 0;}
.bottlewrap .withcom1 .talklayer .Tbox p span:nth-of-type(2){width: 64%;color: #111;;}
.bottlewrap .withcom1 .withinput{width: 90%; margin: auto;}
.bottlewrap .withcom1 .withinput .makebtn{background: #0e1047;color:#fff;font-size: calc( 40px + 40 * ( 100vw - 720px ) / 720 );line-height: calc( 60px + 60 * ( 100vw - 720px ) / 720 );padding: 5% 0;font-weight: 700;border-radius: 10px;width: 100%;display: block;text-align: center;margin-bottom: 3%;}
@media (min-height: 720px) {
    .bottlemake .step2 .tops{position: absolute;}
    .bottlemake .step2 .bottom{width: 100%; position: fixed;background: #00a1f7;bottom: 6px;left: 50%; transform: translate(-50%,0);}
}        

@media (min-width: 720px) {        
    .bottlewrap .layers{padding: 70px 0;}
    .bottlefot p.T1{font-size: 16px; line-height: 26px;;}
    .bottlewrap .withus3 .withinput p.T2,.bottlewrap .bottle8 .tabarea .txt span.iTs{font-size: 24px; line-height: 38px;}
    .bottlemake .step3 p.T2,.bottlewrap .bottle8 .tabarea a{font-size: 30px; line-height: 46px;;}
    .bottlewrap .bottle8 .tabarea .txt span.iTs{font-size: 24px; line-height: 38px;;}
    .bottlefot .fobtn a,.bottlewrap .bottle8 .tabarea span.Ts .sm{font-size: 19px;;}
    .bottlemake .bottlepop .bottlebtn a,.bottlewrap .layers .layerbtn a,.bottlewrap .bottle8 .tabarea span.Ts{font-size: 35px;;}    
    .bottlewrap .withus1 p.T1 span.b,.bottlewrap .with3 p.T1 span{font-size: 42px;;}    
    .talklayer .Tbox p span,.bottlewrap .bottle8 .tabarea a.acbtn{font-size: 30px; line-height: 46px;;}
    .bottlewrap .withcom1 .talkbox .talks,.bottlewrap .withus3 .talkbox .talks,.bottlewrap .bottle8 .bothead,.bottlewrap .bottle8 .bothead span,.bottlewrap .bottle7 .bottles .talks{font-size: 25px;;}
    .bottlewrap .bottle8 p.T1,.bottlewrap .bottle6 p.T1 span,.bottlewrap .bottle5 p.T3,.bottlewrap .bottle5 p.T1,.bottlewrap .bottle4 p.T1,.bottlewrap .bottle4 p.T2{font-size: 50px; line-height: 68px;}
    .bottlewrap .bottle8 p.T2,.bottlewrap .bottle5 p.T2,.bottlewrap .bottle4 p.T3{font-size: 42px; line-height: 70px;}
    .bottlewrap .withus3 .withinput textarea,.bottlewrap .withus3 .withinput input,.bottlewrap .withus3 .withinput p,.bottlewrap .withus1 p.T1,.bottlewrap .with3 p.T1,.bottlewrap .bottle5 p.T5,.bottlewrap .bottle5 p.T4 span,.bottlewrap .bottle4 p.T4{font-size: 35px; line-height: 60px;}
    .bottlewrap .withcom1 .withinput .makebtn,.bottlewrap .withus3 .withinput .makebtn,.bottlewrap .with3 .makebtn,.bottlemake .step3 .makebtn,.bottlemake .bottlepop .T1,.bottlemake .step2 .bottom .custom .customtop a.compl,.bottlemake .step2 .bottom .custom .customtop p.T1,.bottlewrap .layers p.T1,.bottlemake .step1 .makebtn,.bottlewrap .bottle5 p.T4{font-size: 40px; line-height: 60px;}    
    .bottlewrap .withcom1 p.T1,.bottlewrap .withus3 p.tts,.bottlewrap .with2 p.T1,.bottlemake .step3 p.T1,.bottlemake .step2 .tops .chars p.T1,.bottlemake .step1 input,.bottlemake .step1 p.T1,.bottlewrap .bottle7 p.T1,.bottlewrap .bottle6 p.T2,.bottlewrap .bottle6 p.T1{font-size: 45px; line-height: 60px;}    
    .bottlewrap .bottle7 p.T2,.bottlewrap .bottle6 p.T3{font-size: 30px; line-height: 56px;}
    
}
@keyframes flys{0%{transform: translate(55%, 135%) rotate(13deg);} 100%{transform: translate(0%, 0%) rotate(0deg);}}
@keyframes down{0%{clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);} 100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes row{0%{transform: rotate(0);} 100%{transform: rotate(3deg);}}
@keyframes waterflow{0%{background-position: 0 0;} 100%{background-position:-2000px 0;}}
@keyframes shai{0%{opacity: 0;transform: scale(0.5);}50%{opacity: 1;transform: scale(1);}100%{opacity: 0;transform: scale(0.5);}}
@-webkit-keyframes fade-in-top{0%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@keyframes fade-in-top-blur{0%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0;filter: blur(5px);}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;filter: blur(0);}}
@keyframes fade-in-top-blur2{0%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0;opacity: 0;}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:1;filter: blur(0);}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0;filter: blur(0);}}
@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-20px);transform:translateX(-20px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-20px);transform:translateX(-20px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@keyframes fade-in-left-blur{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0;filter: blur(5px);}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;filter: blur(0);}}
@keyframes ups{0%{transform: translate(0,0);opacity: 0;} 50%{transform: translate(0,10px);opacity: 1;} 100%{transform: translate(0,20px);opacity: 0;}}
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}