@font-face {font-family: 'GmarketSansLight';src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Gmarket/GmarketSansLight.woff') format('woff'); font-weight: 300; font-style: normal;}
@font-face {font-family: 'GmarketSansMedium';src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Gmarket/GmarketSansBold.woff') format('woff'); weight: 700; font-style: normal;}
@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'); } 
:root{--g300: "GmarketSansLight" !important;}
:root{--g700: "GmarketSansBold" !important;}
:root{--noto: "Noto Sans KR" !important;}
.coin h1,.coin h2,.coin a,.coin div,.coin span,.coin a,.coin p,.coin i{font-family: 'GmarketSansMedium' !important;; letter-spacing: -1.5px;line-height: 150%;}
html,body{height: 100%;}
.coin{opacity: 0;}
.coin.shows{opacity: 1;}
.coinwrap .coin img{display:block;}
.coinwrap,.coin{width: 100%;position: relative;max-width: 640px;margin: auto;overflow: hidden;}
.coinwrap .coin .inner{position: absolute;width: 100%; top:0;left: 0;height: 100%;}
.coinwrap .quicks{width: 100%;position: fixed;bottom: 10px; left: 50%; transform: translate(-50%,0);z-index: 5;display: none !important;}
.coinwrap .quicks.on{display: block !important;}
.coinwrap .coinintro{width: 100%; max-width: 640px; position: fixed;left: 50%;top: 0;background: url(../images/bg1_1.png) no-repeat;background-size: cover;height: 100vh;z-index: 10;margin-left: calc( -320px + -320 * ( 100vw - 640px ) / 640 );display: flex;align-items: center;justify-content: center;}
.coinwrap .coinintro.on{animation: opa2 2s ease both;}
.coinwrap .coinintro p{margin-bottom: 10%;opacity: 0;animation: fade-in-top 1s linear both;}
.coinwrap .coinintro p:nth-of-type(2){animation-delay: 0.8s;}
.coinwrap .coinintro p:nth-of-type(3){animation-delay: 1.6s;}
.coinwrap .coinintro p:nth-of-type(4){animation-delay: 2.4s;}
.coinwrap .coin1 .inner{z-index: 2;}
.coinwrap .coin1 .inner .gnilogo{padding:3% 0 7% 6%;position: relative;z-index: 2;}
.coinwrap .coin1 .inner .gnilogo a{width: 18.285%;display: inline-block;vertical-align: middle;margin-right: 1%;}
.coinwrap .coin1 .inner .gnilogo span{color:#cfc6b4;font-size: calc( 18px + 18 * ( 100vw - 640px ) / 640 );display: inline-block;vertical-align: middle;}
.coinwrap .coin1 .inner h1{position: relative;opacity: 0;animation: fade-in-top 1.5s ease both;margin-bottom: -3%;}
.coinwrap .coin2{background: #fff;overflow: hidden;;}
.coinwrap .coin2 p.T1{padding: 50% 0;position: relative;z-index: 2;}
.coinwrap .coin2 .leafs{position: absolute;bottom: -6%;left: -6%;width: 84.064%;animation: ro1 3s linear infinite;transform-origin: 0 100%;}
.coinwrap .coin3,.coinwrap .coin5{background: #fff;}
.coinwrap .coin4{background: #f9f9f9;}
.coinwrap .coin3 p,.coinwrap .coin4 p,.coinwrap .coin5 p{text-align: center;font-size: calc( 20px + 20 * ( 100vw - 640px ) / 640 )}
.coinwrap .coin3 p.T1,.coinwrap .coin4 p.T1,.coinwrap .coin5 p.T1{padding: 18% 0 2.5% 0;font-size: calc( 25px + 25 * ( 100vw - 640px ) / 640 );color:#02453a;}
.coinwrap .coin3 p.T2,.coinwrap .coin4 p.T2,.coinwrap .coin5 p.T2{padding: 0 0 8% 0;font-size: calc( 57px + 57 * ( 100vw - 640px ) / 640 );color:#1e1e20;font-family: var(--g700) !important;letter-spacing: calc( -3px + -3 * ( 100vw - 640px ) / 640 );;}
.coinwrap .coin3 p.T3,.coinwrap .coin4 p.T3,.coinwrap .coin5 p.T3{padding: 0 0 11.5% 0;font-size: calc( 30px + 30 * ( 100vw - 640px ) / 640 );color:#000;line-height: calc( 40px + 40 * ( 100vw - 640px ) / 640 );}
.coinwrap .coin3 p.T4,.coinwrap .coin4 p.T4,.coinwrap .coin5 p.T4{padding: 0 0 5% 0;font-size: calc( 22px + 22 * ( 100vw - 640px ) / 640 );color:#646464;font-family: var(--g300) !important;}
.coinpic{position: relative;}
.coinmask{position: relative;height: calc( 800px + 800 * ( 100vw - 640px ) / 640 );width: 100%;overflow: hidden; margin-bottom: 5%;}
.coin5 .coinmask .before,.coin5 .coinmask .after,.coin3 .coinmask .before,.coin3 .coinmask .after,.coin4 .coinmask .before,.coin4 .coinmask .after{position: absolute;top: 0;width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;user-select: none;}
.coinmask .divider{position: absolute;top: 0; left: 70%; background: url(../images/slidebar.png) no-repeat;width: calc( 62px + 62 * ( 100vw - 640px ) / 640 ); height: calc( 800px + 800 * ( 100vw - 640px ) / 640 );; z-index: 3;cursor: ew-resize; transform: translate(-43%,0);background-size: cover;}
.coin3 .coinmask .before{background: url(../images/m1-1.jpg) no-repeat;width: 70%; height: calc( 800px + 800 * ( 100vw - 640px ) / 640 );z-index: 2;background-size: cover;}
.coin3 .coinmask .after{background: url(../images/m1-2.jpg) no-repeat;width: 100%; height: calc( 800px + 800 * ( 100vw - 640px ) / 640 );z-index: 1;background-size: cover;}
.coin4 .coinmask .before{background: url(../images/m2-1.jpg) no-repeat;width: 70%; height: calc( 800px + 800 * ( 100vw - 640px ) / 640 );z-index: 2;background-size: cover;}
.coin4 .coinmask .after{background: url(../images/m2-2.jpg) no-repeat;width: 100%; height: calc( 800px + 800 * ( 100vw - 640px ) / 640 );z-index: 1;background-size: cover;}
.coin5 .coinmask .before{background: url(../images/m3-1.jpg) no-repeat;width: 70%; height: calc( 800px + 800 * ( 100vw - 640px ) / 640 );z-index: 2;background-size: cover;}
.coin5 .coinmask .after{background: url(../images/m3-2.jpg) no-repeat;width: 100%; height: calc( 800px + 800 * ( 100vw - 640px ) / 640 );z-index: 1;background-size: cover;}
.coinpic .infotxt{display: flex;align-items: center;justify-content: space-between;padding: 0 5% 15% 5%;}
.coinwrap .coin3 p.T5,.coinwrap .coin4 p.T5,.coinwrap .coin5 p.T5{font-size: calc( 30px + 30 * ( 100vw - 640px ) / 640 );line-height: calc( 45px + 45 * ( 100vw - 640px ) / 640 );color:#000;padding-bottom: 23%;}
.coinwrap .coin3 p.T5 span,.coinwrap .coin4 p.T5 span,.coinwrap .coin5 p.T5 span{color:#82b42a;position: relative;}
.coinwrap .coin3 p.T5 span:before,.coinwrap .coin4 p.T5 span:before,.coinwrap .coin5 p.T5 span:before{content: '';position: absolute;width: 100%; height: 1px; bottom: 0px;background: #82b42a;}
.coin6 p.T1{padding-top: 19%;}
.coin6 .charea{width: 90%;margin: auto;position: absolute;margin-top: -6%;z-index: 3;left: 50%; transform: translate(-50%,0);}
.coin6 .charea .chnames{background: #fff;box-shadow: 0 0 20px rgba(74,128,26,0.4);}
.coin6 .charea .chnames.on{display: none;}
.coin6 .charea .chnames p.T2{padding: 24% 0 16% 0;color:#89a42b; font-size: calc( 46px + 46 * ( 100vw - 640px ) / 640 );line-height: calc( 60px + 60 * ( 100vw - 640px ) / 640 ); text-align: center;font-family: var(--g700) !important;}
.coin6 .charea .chnames .deco{width: 13.717%; margin: auto;}
.coin6 .charea .chnames .chnaming{display: flex;align-items: center;justify-content: center;height: calc( 350px + 350 * ( 100vw - 640px ) / 640 );padding: 0 5%;}
.coin6 .charea .chnames .chnaming span{color:#6478aa;font-size: calc( 40px + 40 * ( 100vw - 640px ) / 640 );line-height: calc( 52px + 52 * ( 100vw - 640px ) / 640 );font-family: var(--g700) !important;animation: tops 1s linear infinite;}
.coin6 .charea .chnames p.T3{text-align: center;padding-bottom: 16%;}
.coin6 .charea .chnames p.T3 span{color:#898a8d;font-size: calc( 28px + 28 * ( 100vw - 640px ) / 640 );line-height: calc( 40px + 40 * ( 100vw - 640px ) / 640 );display: block;}
.coin6 .charea .chnames p.T3 span i{color:#6478aa;font-family: var(--g700) !important;}
.coin6 .chtitles{width: 86%; margin: auto;position: relative;margin-top: -8%;}
.coin6 .chtitles .chtitlesinner{padding: 3%;background: #fff;box-shadow: 0 0 20px rgba(74,128,26,0.4);text-align: center;margin-bottom: 6%;position: relative;z-index: 2;}
.coin6 .chtitles .chtitlesinner .chimg{width: 100%; height: calc( 647px + 647 * ( 100vw - 640px ) / 640 );overflow: hidden;}
.coin6 .chtitles .chtitlesinner span.ob1{width: 23.001%; margin: auto;padding: 9% 0 6% 0;display: inline-block;}
.coin6 .chtitles p.T4{color:#243217;font-size: calc( 23px + 23 * ( 100vw - 640px ) / 640 );text-align: center;margin-bottom: 14%;}
.coin6 .chtitles .chbirs{opacity: 0; position: absolute;top:10%; left: -4%; text-align: center;padding: 3% 5% 3% 5%;color:#2b2b2b; font-size: calc( 21px + 21 * ( 100vw - 640px ) / 640 ); font-family: var(--g700) !important;background: #fdf3de;box-shadow:0 0 20px rgba(74,128,26,0.4);text-align: center;line-height: calc( 34px + 34 * ( 100vw - 640px ) / 640 );}
.coin6 .chtitles .chname{opacity: 0; position: absolute;top:44%; left: 53%; padding: 3% 5% 3% 5%;;color:#2b2b2b; font-size: calc( 18px + 18 * ( 100vw - 640px ) / 640 ); background: #fdf3de;box-shadow:0 0 20px rgba(74,128,26,0.4);text-align: left;width: 52%;}
.coin6 .chtitles.on .chbirs{opacity: 1;transition: 0.2s linear;transition-delay: 0.5s;}
.coin6 .chtitles.on .chname{opacity: 1;transition: 0.2s linear;transition-delay: 1s;}
.coin6 .chtitles .chname span{font-family: var(--g700) !important;font-size: calc( 26px + 26 * ( 100vw - 640px ) / 640 );line-height: calc( 40px + 40 * ( 100vw - 640px ) / 640 );}
.coin6 .chtitles .chname span.co1{color:#2b2b2b;}
.coin6 .chtitles .chname span.co2{color:#6c9722;}
.coin6 .chtitles .chname span.nns{width: 75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;display: inline-block;vertical-align: middle;}
.coin6 .chbtn{width: 100%; margin: auto;opacity: 0;}
.coin6 .chbtn.on{opacity: 1;transition: 0.2s linear;transition-delay: 1.5s;}
.coin6 .chbtn.on a{display: inline-block;}
.coin6 .chtitles .obs{position: absolute;top: 67%; left: -8%;width: 116%;opacity: 0;transition: 0.5s linear;}
.coin6 .chtitles.on .obs{opacity: 1;}
.coin7 p.T1{padding: 25% 0 11% 0;}
.coin7 .picbox{width: 100%; margin: auto;}
.coin7 .picbox .swiper-pagination{text-align: center;padding: 5% 0 16% 0;}
.coin7 .picbox .swiper-pagination span.swiper-pagination-bullet-active{background: #909090;}
.coin7 .picbox .swiper-pagination span{background: #d7d7d7;width: 10px; height: 10px; border-radius: 10px;display: inline-block;margin: 0 1%; }
.swiper{margin-left: auto; margin-right: auto;position: relative;overflow: hidden; overflow: clip; list-style: none;padding: 0; z-index: 1;}
.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-ios .swiper-slide,.swiper-wrapper {transform: translate3d(0px, 0, 0);}
.swiper-slide {flex-shrink: 0;width: 100%;height: 100%; position: relative;transition-property: transform; display: block;}
.coin8 {background: #f9fbe4;}
.coin8 p.T1{padding: 29% 0 11% 0;}
.coin8 .storybox a{display: block;position: relative;opacity: 0;}
.coin8 .storybox a:nth-of-type(1){margin-bottom: 12%;}
.coin8 .storybox a:nth-of-type(2){margin-bottom: 8%;}
.coin8 .storybox a:nth-of-type(3){margin-bottom: 7%;}
.coin8 .storybox a:nth-of-type(4){margin-bottom: 15%;}
.coin8 .storybox a.tops{animation: fade-in-top 1s linear both}
.coin8 .storybox a:nth-of-type(2).tops{animation-delay: 0.3s;}
.coin8 .storybox a:nth-of-type(3).tops{animation-delay: 0.6s;}
.coin8 .storybox a:nth-of-type(4).tops{animation-delay: 0.9s;}
.coin8 .storybox a span{position: absolute;left: 9%; width: 17.657%; bottom: 90%;display: inline-block;transition: 0.5s linear;}
.coin8 .storybox a.on span{position: absolute;left: 75%; width: 17.657%; bottom: 90%;display: inline-block;transition: 0.5s linear;}
.coin8 .storybox a.stbtn2 span{bottom: 95%;}
.coin8 .storybox a.stbtn2.on span{bottom: 95%;}
.coin8 .storybox a.stbtn4 span{bottom: 85%;}
.coin8 .storybox a.stbtn4.on span{bottom: 85%;}
.coin8 .storybox a .imgbox{position: relative;}
.coin8 .storybox a .imgbox img:nth-of-type(2){position: absolute;bottom: 0;opacity: 0;}
.coin8 .storybox a .imgbox img:nth-of-type(1){animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) both}
.coin8 .storybox a .imgbox img:nth-of-type(2){animation:fade-out-left .7s cubic-bezier(.25,.46,.45,.94) both}
.coin8 .storybox a.on .imgbox img:nth-of-type(1){animation:fade-out-left .7s cubic-bezier(.25,.46,.45,.94) both}
.coin8 .storybox a.on .imgbox img:nth-of-type(2){animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) both}

.coin9 {background: #000;}
.coin9 p.T1{position: absolute;top: 50%;transform: translate(0,-50%);width: 100%;}
.coin9 .videos{width: 100%; height: calc( 1000px + 1000 * ( 100vw - 640px ) / 640 );position: relative;}
.coin9 .videos iframe{width: 100%; height: calc( 1000px + 1000 * ( 100vw - 640px ) / 640 );position: absolute;left: 0;top: 0;object-fit: cover;}
.coinfooter{padding: 7% 0;text-align: center;background: #fff;border-top: 1px solid #e7e7e7;font-size: calc( 16px + 16 * ( 100vw - 640px ) / 640 );}
#container{max-width: none !important;}
@media (min-width: 640px) { 
    .coin9 .videos iframe,.coin9 .videos{height: 1000px;}
    .coinwrap .coin3 p,.coinwrap .coin4 p,.coinwrap .coin5 p{font-size: 20px;}
    .coin6 .chtitles .chname{font-size: 18px;}
    .coin6 .chtitles .chname span{font-size: 26px; line-height: 40px;}
    .coin6 .chtitles .chbirs{font-size: 21px;line-height: 34px;}
    .coin6 .chtitles p.T4{font-size: 23px;;}
    .coin6 .chtitles .chtitlesinner .chimg{height: 647px;}
    .coin6 .charea .chnames p.T3 span{font-size: 28px; line-height: 40px;}
    .coin6 .charea .chnames .chnaming span{font-size: 40px; line-height: 52px;}
    .coin6 .charea .chnames .chnaming{height: 350px;}
    .coin6 .charea .chnames p.T2{font-size: 48px;line-height: 60px;}
    .coinwrap .coin3 p.T5,.coinwrap .coin4 p.T5,.coinwrap .coin5 p.T5,.coinwrap .coin3 p.T5 span,.coinwrap .coin3 p.T5 span,.coinwrap .coin4 p.T5 span{font-size: 30px; line-height: 45px;}
    .coin5 .coinmask .before,.coin5 .coinmask .after,.coin3 .coinmask .before,.coin3 .coinmask .after,.coin4 .coinmask .before,.coin4 .coinmask .after{height: 800px;}
    .coinmask .divider{height: 800px;width: 62px;}
    .coinmask{height: 800px;}
    .coinwrap .coin3 p.T1,.coinwrap .coin4 p.T1,.coinwrap .coin5 p.T1{font-size: 25px;}
    .coinwrap .coin3 p.T2,.coinwrap .coin4 p.T2,.coinwrap .coin5 p.T2{font-size: 57px;letter-spacing: -3px;}
    .coinwrap .coin3 p.T3,.coinwrap .coin4 p.T3,.coinwrap .coin5 p.T3{font-size: 30px;line-height: 48px;}
    .coinwrap .coin3 p.T4,.coinwrap .coin4 p.T4,.coinwrap .coin5 p.T4{font-size: 22px;}
    .coinwrap .coinintro{margin-left: -320px;}    
    .coinwrap .quicks{width: 100%;position: fixed;bottom: 10px; max-width: 640px;}
    .coinfooter{font-size: 16px;}
}
@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@keyframes opa2{0%{opacity: 1; transform: scale(1)}100%{opacity: 0;transform: scale(1)}}
@keyframes ro1{0%{transform: rotate(-6deg); }50%{transform: rotate(0deg);}100%{transform: rotate(-6deg); }}
@keyframes tops{0%{transform: translate(0,0); }50%{transform: translate(0,-10px);}100%{transform: translate(0,0) }}
@keyframes fade-in-right{0%{transform:translateX(50px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes fade-out-left{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-50px);opacity:0}}