@font-face {font-family: 'NanumSquare Neo';font-style: normal;font-weight: 400; src: local('NanumSquare Neo'), url('https://fonts.cdnfonts.com/s/90843/NanumSquareNeo-bRg.woff') format('woff');}
@font-face {font-family: 'NanumSquare Neo';font-style: normal;font-weight: 350; src: local('NanumSquare Neo'), url('https://fonts.cdnfonts.com/s/90843/NanumSquareNeo-aLt.woff') format('woff');}
@font-face {font-family: 'NanumSquare Neo';font-style: normal;font-weight: 700; src: local('NanumSquare Neo'), url('https://fonts.cdnfonts.com/s/90843/NanumSquareNeo-cBd.woff') format('woff');}
@font-face {font-family: 'NanumSquare Neo';font-style: normal;font-weight: 800; src: local('NanumSquare Neo'), url('https://fonts.cdnfonts.com/s/90843/NanumSquareNeo-dEb.woff') format('woff');}
@font-face {font-family: 'NanumSquare Neo';font-style: normal;font-weight: 900; src: local('NanumSquare Neo'), url('https://fonts.cdnfonts.com/s/90843/NanumSquareNeo-eHv.woff') format('woff');}
@font-face {font-family: 'NanumMyeongjo'; src: url('https://cdn.jsdelivr.net/gh/wizfile/font/NanumMyeongjo.eot');src:url('https://cdn.jsdelivr.net/gh/wizfile/font/NanumMyeongjo.woff') format('woff');font-style: normal;}
@font-face {font-family: 'BonmyeongjoSourceHanSerif';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');font-weight: normal; font-display: swap;}
:root{--Myeongjo: "NanumMyeongjo" !important;}
:root{--bon: "BonmyeongjoSourceHanSerif" !important;}
.hero h1,.hero h2,.hero a,.hero div,.hero span,.hero a,.hero p,.hero i{font-family: 'NanumSquare Neo' !important; letter-spacing: -1.2px;line-height: 150%;}
html,body{height: 100%;}
.herowrap .hero img{display:block;}
.herowrap,.hero{width: 100%;position: relative;max-width: 640px;margin: auto;overflow: hidden;}
.herowrap .hero .inner{position: absolute;width: 100%; top:0;left: 0;height: 100%;}
.herowrap .blind{position: absolute; clip: rect(0 0 0 0);width: 1px; height: 1px;margin: -1px;overflow: hidden;}
.herowrap .quicks{width: 100%;position: fixed;bottom: 10px; left: 50%; transform: translate(-50%,0);z-index: 2;display: none !important;max-width: 640px;;}
.herowrap .quicks.on{display: block !important;}
.herowrap .hero1 .inner{z-index: 2;}
.herowrap .hero1 .inner .gnilogo{padding:2% 0 11% 5%;position: relative;z-index: 2;}
.herowrap .hero1 .inner .gnilogo a,.herowrap .hero1 .inner .gnilogo span{display: inline-block;vertical-align: middle;}
.herowrap .hero1 .inner .gnilogo a{width: 21.218%;margin-right: 1%;}
.herowrap .hero1 .inner .gnilogo span{font-size: clamp(8.25px, calc(16.5px + 16.5 * (100vw - 640px) / 640), 16.5px);color:#fff;}
.herowrap .hero1 .inner h1{text-align: center;margin-bottom: 76%;opacity: 0;animation: fade-in-top 1s linear both;}
.herowrap .hero1 .inner p.T1{padding-left: 6%; font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19px, calc(38px + 38 * (100vw - 640px) / 640), 38px);color: #fff4e0;margin-bottom: 7%;}
.herowrap .hero1 .inner .herobtn{margin-bottom: 15%;}
.herowrap .hero2{background: #000;}
.herowrap .hero2 .videos{width: 100%; padding-bottom: 56.25%;position: relative;overflow: hidden;}
.herowrap .hero2 .videos iframe{position: absolute;width: 100%; height: 100%;left: 0;top: 0;}
.herowrap .hero3 .inner h2.T1{opacity: 0;padding: 64% 0 7% 0;}
.herowrap .hero3 .inner h2.T1.on{animation: fade-in-left 1s linear both;}
.herowrap .hero3 .inner p.T2{color:#303030;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19.25px, calc(39.5px + 39.5 * (100vw - 640px) / 640), 39.5px);padding:0% 0% 8% 5%;font-weight: 400;}
.herowrap .hero3 .inner p.T3{font-size: clamp(12px, calc(24px + 24 * (100vw - 640px) / 640), 24px);padding: 1% 5% 8% 0 ;text-align: right;}
.herowrap .hero3 .inner p.T4{font-size: clamp(18px, calc(36px + 36 * (100vw - 640px) / 640), 36px);color:#577056;line-height: clamp(25px, calc(50px + 50 * (100vw - 640px) / 640), 50px);letter-spacing: -2px;font-family: var(--bon) !important;font-weight: 700;text-align: center;}
.herowrap .hero3 .inner p.T4 span{font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);color:#577056}
.herowrap .hero5 h2{opacity: 0;padding:83% 0 7% 5%;font-size: clamp(18px, calc(36px + 36 * (100vw - 640px) / 640), 36px);color:#feeec2;text-shadow: 5px 5px 0 rgba(0,0,0,0.2);font-weight: 800;}
.herowrap .hero5 h2.on{animation: fade-in-left 1s linear both;}
.herowrap .hero5 p.T2{color:#fff;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(20.5px, calc(41px + 41 * (100vw - 640px) / 640), 41px);font-weight: 400;padding:0% 0% 0% 5%;}
.herowrap .hero6 {background: #3c3226;}
.herowrap .hero6 h2{opacity: 0;padding:6% 0 7% 5%;font-size: clamp(18px, calc(36px + 36 * (100vw - 640px) / 640), 36px);color:#feeec2;text-shadow: 5px 5px 0 rgba(0,0,0,0.2);font-weight: 800;}
.herowrap .hero6 h2.on{animation: fade-in-left 1s linear both;}
.herowrap .hero6 p.T2{color:#fff;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19px, calc(38px + 38 * (100vw - 640px) / 640), 38px);font-weight: 400;padding:0% 0% 10% 5%;}
.herowrap .hero6 p.T2 span{letter-spacing: -2px;font-family: var(--bon) !important;font-weight: 700;color:#feeec2}
.herowrap .hero6 .imgboxs{background: linear-gradient(180deg,rgba(95, 83, 69, 1) 0%, rgba(0, 0, 0, 1) 100%);}
.herowrap .hero6 .imgbox{padding: 9% 0;}
.herowrap .hero6 .imgbox2{padding:5% 0 6% 0}
.herowrap .hero6 .imgbox img{opacity: 0;}
.herowrap .hero6 .imgbox img.on{animation: fade-in-top 1s linear both;}
.herowrap .hero8 .inner{padding-top: 103%;}
.herowrap .hero8 h2{opacity: 0;padding:0 0 6% 3%;font-size: clamp(18px, calc(36px + 36 * (100vw - 640px) / 640), 36px);color:#feeec2;text-shadow: 5px 5px 0 rgba(0,0,0,0.2);font-weight: 800;}
.herowrap .hero8 h2 span{color:#feeec2;text-shadow: 5px 5px 0 rgba(0,0,0,0.2);font-weight: 800;padding-left: 2%;}
.herowrap .hero8 h2.on{animation: fade-in-left 1s linear both;}
.herowrap .hero8 p.T2{color:#fff;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19.5px, calc(39px + 39 * (100vw - 640px) / 640), 39px);font-weight: 400;padding:0% 0% 10% 5%;}
.herowrap .hero8 p.T2 span{letter-spacing: -2px;font-family: var(--bon) !important;font-weight: 700;color:#feeec2}
.herowrap .hero9 h2{opacity: 0;padding:13% 0 8% 5%;font-size: clamp(18px, calc(36px + 36 * (100vw - 640px) / 640), 36px);color:#feeec2;text-shadow: 5px 5px 0 rgba(0,0,0,0.2);font-weight: 800;}
.herowrap .hero9 h2.on{animation: fade-in-left 1s linear both;}
.herowrap .hero9 p.T2{color:#fff;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19.5px, calc(39px + 39 * (100vw - 640px) / 640), 39px);font-weight: 400;padding:0% 0% 87% 5%;}
.herowrap .hero9 p.T2 span{letter-spacing: -2px;font-family: var(--bon) !important;font-weight: 700;color:#feeec2}
.herowrap .hero9 p.T3{color:#fff;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19.5px, calc(39px + 39 * (100vw - 640px) / 640), 39px);font-weight: 400;padding:0% 0% 0% 5%;}
.herowrap .hero10{padding-bottom: 5%;}
.herowrap .hero10 p.T1{color:#3a492f;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19.5px, calc(39px + 39 * (100vw - 640px) / 640), 39px);font-weight: 400;padding:9% 0% 7% 0%;text-align: center;}
.herowrap .hero10 p.T1 span{font-weight: 800;color:#3a492f;}
.herowrap .hero10 p.T2{margin-bottom: 11%;}
.herowrap .hero10 p.T3{color:#3a492f;font-size: clamp(15px, calc(30px + 30 * (100vw - 640px) / 640), 30px);line-height: clamp(22px, calc(44px + 44 * (100vw - 640px) / 640), 44px);font-weight: 400;padding:7% 0% 8% 0%;text-align: center;font-weight: 800;}
.herowrap .hero10 p.T3 span{font-weight: 900;color:#3a492f;font-size: clamp(20px, calc(40px + 40 * (100vw - 640px) / 640), 40px);line-height: clamp(27.5px, calc(55px + 55 * (100vw - 640px) / 640), 55px);display: inline-block;margin-top: -1%;}
.herowrap .hero10 .herobtn{margin-bottom: 8%;}
.herowrap .hero10 .herobtn a{display: inline-block;}
.herowrap .hero10 .herobtn .B2{margin-top: 2%;}
.herowrap .hero10 p.T4{color:#2c2c2c;font-size: clamp(12px, calc(24px + 24 * (100vw - 640px) / 640), 24px);text-align: center;}
.herowrap .hero11 .inner{padding-top: 67%;}
.herowrap .hero11 h2{color:#fff;font-size: clamp(20px, calc(40px + 40 * (100vw - 640px) / 640), 40px);line-height: clamp(27.5px, calc(55px + 55 * (100vw - 640px) / 640), 55px);font-weight: 800;padding:0% 0% 6% 5%;font-family: var(--bon) !important; letter-spacing: -2px;}
.herowrap .hero11 h2.on{animation: fade-in-left 1s linear both;}
.herowrap .hero11 p.T2{color:#fff;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19.5px, calc(39px + 39 * (100vw - 640px) / 640), 39px);font-weight: 400;padding:0% 0% 8% 5%;}
.herowrap .hero11 p.T2 span{color:#b2d5b2}
.herowrap .hero12{background: #eceee0;padding-bottom: 15%;}
.herowrap .hero12 p.T1{text-align: center;color:#698469; font-size: clamp(20px, calc(40px + 40 * (100vw - 640px) / 640), 40px);;font-weight: 900;padding: 8% 0 4% 0;}
.herowrap .hero12 .heroaco{width: 96%; margin: auto;}
.herowrap .hero12 .heroaco .acbtn span{font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19.5px, calc(39px + 39 * (100vw - 640px) / 640), 39px);font-weight: 800;display: block;padding: 5% 8% 5% 5%;background: #fff;border-bottom: 2px solid #f2f0f8;position: relative;color:#698469}
.herowrap .hero12 .heroaco .acbtn span:after{content: '';background: url(../images/arows.png) no-repeat;width: clamp(9.5px, calc(19px + 19 * (100vw - 640px) / 640), 19px); height: clamp(7.5px, calc(15px + 15 * (100vw - 640px) / 640), 15px);;position: absolute;top: 50%; right: 20px; transform: translate(0,-50%) rotate(180deg);transition: 0.5s ease;transform-origin: 50% 0%;background-size: cover;}
.herowrap .hero12 .heroaco .acbtn.on span:after{transform: rotate(0deg);}
.herowrap .hero12 .heroaco p.T2{padding: 5%;color:#3c2c3f;font-size: clamp(13.5px, calc(27px + 27 * (100vw - 640px) / 640), 27px);line-height: clamp(19.5px, calc(39px + 39 * (100vw - 640px) / 640), 39px);;background: #fff;display: none;}
.herowrap .hero12 .heroaco p.T2.on{display: block;}
.herowrap footer{padding: 20px 5% 80px 5%;background: #f3f3f3; border-top: 1px solid #c6c6c6;margin-top: 30px;}
.herowrap footer .menuLink01 {overflow: hidden;margin-bottom: 15px;}
.herowrap footer .menuLink01 a {display: inline-block;width: 32%;height: 26px;font-size: 1.1em;font-family:NanumBold;color: #757575;border-radius:3px;box-sizing: border-box;border: 1px solid #bbbbbb;background-color: #fff;text-align: center;line-height: 1.9em;}
.herowrap footer .menuLink01 a.btn_tel {margin: 0 2%;}
.herowrap footer .menuLink02 {overflow: hidden;margin-bottom: 15px;text-align: center;}
.herowrap footer .menuLink02 a {position: relative;display: inline-block;padding: 0 3%;font-size:1em;font-family:NanumBold;color: #787878;box-sizing: border-box;text-align: center;}
.herowrap footer .menuLink02 a:after {position: absolute;right: 0;top: 10%;width: 1px;height: 80% ;background-color: #b8b8b8;content:""}
.herowrap footer .menuLink02 .btn_privacy {color: #515151;}
.herowrap footer .menuLink02 .btn_app:after {width: 0;background-color: #fcfbfb;}
.herowrap footer .txtBox {color: #797979;text-align: center;font-size:12px; line-height: 16px;}
.herowrap footer .txtBox p {line-height: 2.5em;}
.herowrap footer .txtBox p em {font-size: 1.2em;}
.herowrap footer .txtBox a{font-size: 0.8em;color:#717171; text-decoration: none;}
.herowrap footer .snsLink {display: none;margin-top: 20px;text-align:center;}
.herowrap footer .snsLink a {display: inline-block;width:31px;height:31px;margin: 0 2px;background:url(https://img.gni.kr/data/images/mobile/common/Img_Sprite.png) no-repeat;background-size:500px 500px;text-indent:-9999px;}
.herowrap footer .snsLink a.MobileMainSNS1{background-position:0px -231px; }
.herowrap footer .snsLink a.MobileMainSNS2{background-position:-44px -231px; }
.herowrap footer .snsLink a.MobileMainSNS3{background-position:-88px -231px; }
.herowrap footer .snsLink a.MobileMainSNS4{background-position:-132px -229px; }
.herowrap footer .snsLink a.MobileMainSNS5{background-position:-176px -231px; }
.herowrap footer .snsLink a.MobileMainSNS6{background-position:-220px -231px; }
.herofooter{padding: 7% 0;text-align: center;background: #fff;border-top: 1px solid #e7e7e7;font-size: clamp(8px, calc(16px + 16 * (100vw - 640px) / 640), 16px);}
#container{max-width: none !important;}
@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{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%{transform:translateX(50px);opacity:0}100%{transform:translateX(0);opacity:1}}