@charset "utf-8";

@media only screen and (min-width: 1025px) and (max-width: 1280px) {

}

@media only screen and (max-width:1400px) {
	.gloHeader .inner {padding:30px 24px;}
	.gloHeader.on .inner {padding:20px 24px;}

	.mainVisual .inner {padding:0 24px;}
	.section.vod {padding:120px 24px;}
	.section.gds {padding:120px 24px;}
	.section.history {padding:120px 24px;}
	.section.change {padding:120px 24px;}
	.section.celeb {padding:120px 24px;}
	.section.graph {padding:120px 24px;}
	.section.news {padding:120px 24px;}
	.footer {padding:50px 24px;}
}

@media only screen and (max-width:1360px) {

}

@media only screen and (max-width:1280px) {

}

@media only screen and (max-width:1152px) {

}

@media only screen and (max-width:1024px) {
	.swiperFunc {display:block; position:relative; margin-top:20px;}
	.swiperFunc .inFunc {display:flex; justify-content:space-between; align-items:center;}
	.swiperFunc .inFunc .dir {width:36px; height:36px; background:#FFF; border-radius:50%; cursor:pointer; position:relative; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);}
	.swiperFunc .inFunc .dir.dPrev:after {content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(180deg); width:10px; height:10px; background:url(../img/ico_dir_on.svg) no-repeat 50% 50%; background-size:100%;}
	.swiperFunc .inFunc .dir.dPrev.swiper-button-disabled:after {background:url(../img/ico_dir_off.svg) no-repeat 50% 50%; background-size:100%;}
	.swiperFunc .inFunc .dir.dNext:after {content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:10px; height:10px; background:url(../img/ico_dir_on.svg) no-repeat 50% 50%; background-size:100%;}
	.swiperFunc .inFunc .dir.dNext.swiper-button-disabled:after {background:url(../img/ico_dir_off.svg) no-repeat 50% 50%; background-size:100%;}
	.swiperFunc .inFunc .paging .swiper-pagination-bullet {width:6px; height:6px; border-radius:50%; background:#FFF; opacity:0.5; margin:0 4px;}
	.swiperFunc .inFunc .paging .swiper-pagination-bullet.swiper-pagination-bullet-active {background:#FFF; opacity:1.0;}

	.gloHeader {background:rgba(255, 255, 255, 0.8);}
	.gloHeader .inner {padding:14px 24px;}
	.gloHeader .inner .logo {width:73px; height:34px;}
	.gloHeader .inner .logo a {background:url(../img/logo_g.png) no-repeat 50% 50%; background-size:100%;}
	.gloHeader .inner .btnDonate a {padding:11px 20px; font-size:14px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);}
	.gloHeader.on {background:rgba(255, 255, 255, 0.8);}
	.gloHeader.on .inner {padding:14px 24px;}
	.gloHeader.on .inner .logo {width:73px; height:34px;}
	.gloHeader.on .inner .logo a {background:url(../img/logo_g.png) no-repeat 50% 50%; background-size:100%;}
	.gloHeader.on .inner .btnDonate a {padding:11px 20px; font-size:14px;}

	.mainVisual {background:url(../img/main_visual_mo.png) no-repeat left top; background-size:cover; background-position-x:center;}
	.mainVisual .graDim {position:absolute; left:0; bottom:0; width:100%; height:65vh; background: linear-gradient(180deg, rgba(1, 93, 89, 0.00) 24.57%, #015D59 73.33%); z-index:10;}
	.mainVisual .inner {align-items:flex-end; z-index:20; position:relative;}
	.mainVisual .inner .visualTxt {padding:45px 24px;}
	.mainVisual .inner .visualTxt h2 {font-size:32px;}
	.mainVisual .inner .visualTxt .desc {font-size:14px; margin-top:14px;}

	.section .secTitle {font-size:28px; margin-bottom:30px;}

	.section.vod {padding:60px 24px;}
	.section.vod:after {width:116px; height:116px; background-size:auto 100%; bottom:50px;}
	.section.vod .inner {flex-direction:column; gap:30px; align-items:flex-start;}
	.section.vod .inner .vodSec {width:100%; max-width:100%; border-radius:10px;}
	.section.vod .inner .txtSec {width:100%; max-width:100%; text-align:left;}
	.section.vod .inner .txtSec .vodTxt {font-size:18px;}
	.section.vod .inner .txtSec .vodTxt span {font-size:22px;}
	.section.vod .inner .txtSec .desc {font-size:14px; margin-top:10px;}

	.section.gds {padding:60px 0; background:#083D36;}
	.section.gds .inner.swiper-container .swiper-slide {opacity:0.5; transition:.4s all;}
	.section.gds .inner.swiper-container .swiper-slide.swiper-slide-active {opacity:1.0;}
	.section.gds .inner .gds-paging {display:block; text-align:center; margin-top:30px; height:16px;}
	.section.gds .inner .gds-paging .swiper-pagination-bullet {width:6px; height:6px; border-radius:50%; background:#FFF; opacity:0.5; margin:0 5px;}
	.section.gds .inner .gds-paging .swiper-pagination-bullet.swiper-pagination-bullet-active {background:#FFF; opacity:1.0;}
	.section.gds .inner .perGds .gdsInfo {margin-top:24px;}
	.section.gds .inner .perGds .gdsInfo .price {font-size:24px;}
	.section.gds .inner .perGds .gdsInfo .heart {font-size:16px; margin:12px 0 10px;}
	.section.gds .inner .perGds .gdsInfo .heart img {width:20px;}
	.section.gds .inner .perGds .gdsInfo .desc {font-size:14px;}

	.section.history {padding:50px 0 0;}
	.section.history:after {display:none;}
	.section.history .inner {flex-direction:column; gap:20px; margin-bottom:50px;}
	.section.history .inner .txtSec {width:100%;}
	.section.history .inner .imgSec {width:100%; display:flex; justify-content:flex-start; align-items:flex-start; gap:5px; margin:0;}
	.section.history .inner .imgSec .img {margin-bottom:0; width:calc(50% - 3px);}
	.section.history .inner .cont {display:block; width:100%; position:relative; left:unset; top:unset; padding:0 24px;}
	.section.history .inner .cont .cTitle {margin-bottom:18px;}
	.section.history .inner .cont .cTitle em {font-size:24px;}
	.section.history .inner .cont .cTitle:after {height:15px; bottom:-3px;}
	.section.history .inner .cont .cDesc {font-size:14px;}
	.section.history .tHis {padding:0 24px; margin-bottom:34px;}
	.section.history .tHis .title {font-size:40px;}
	.section.history .tHis:after {width:160px; bottom:2px;}
	.section.history .yrHistory {padding:0 24px;}
	.section.history .yrHistory:after {height:2px; bottom:47px;}
	.section.history .yrHistory .swiper-slide {width:200px;}
	.section.history .yrHistory .his-prev, .section.history .yrHistory .his-next {display:none;}
	.section.history .conHisBox .his-paging {display:none;}
	.perHis {height:200px;}
	.perHis:after {left:20px;}
	.perHis .yrs {font-size:20px; width:46px;}
	.perHis .yrs:before {height:calc(100% - 54px);}
	.perHis .yrs:after {width:14px; height:14px; border-width:3px; bottom:38px;}
	.perHis .perHisCont .phTitle {font-size:15px;}
	.perHis .perHisCont .phCon {font-size:14px;}

	.section.change {padding:60px 20px; background:#01130C url(../img/sec04_bg.jpg) no-repeat left bottom; background-size:100% auto;}
	.section.change .secTitle {margin-bottom:30px;}
	.partChange {flex-direction:column; gap:40px; margin-bottom:60px;}
	.partChange .perChange {width:100%;}
	.partChange .perChange .headCon {gap:10px; margin-bottom:16px; padding:0;}
	.partChange .perChange .headCon .ico {width:70px; height:70px;}
	.partChange .perChange .headCon .perHead {padding-bottom:8px;}
	.partChange .perChange .headCon .perHead .pTitle {font-size:20px;}
	.partChange .perChange .headCon .perHead .count {font-size:20px;}
	.partChange .perChange .headCon .perHead .count em {font-size:32px;}
	.partChange .perChange .headCon .pSubTxt {gap:10px;}
	.partChange .perChange .headCon .pSubTxt .perSub {font-size:18px;}
	.partChange .perChange .headCon .pSubTxt .perSub em {font-size:20px;}
	.partChange .perChange .perDesc {padding:10px 0; font-size:14px;}

	.nowStats {display:flex; justify-content:flex-start; align-items:stretch; gap:10px; flex-wrap:wrap; flex-direction:column; background:none; border:0; padding:0;}
	.nowStats .perStats {width:100%; background:rgba(255, 255, 255, 0.10); border:1px solid #FFF; border-radius:10px; padding:20px 19px; gap:10px;}
	.nowStats .perStats:after {display:none;}
	.nowStats .perStats .txt {font-size:16px;}
	.nowStats .perStats .txt .raTxt {margin-top:4px; font-size:12px;}
	.nowStats .perStats .countTxt {font-size:28px;}

	.yrsStats .swiper-slide {flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:14px;}
	.yrsStats .swiper-slide .yrsTxt {width:100%; padding:0;}
	.yrsStats .swiper-slide .yrsTxt:before {left:0; top:unset; bottom:0; width:100%; height:1px; opacity:0.5;}
	.yrsStats .swiper-slide .yrsTxt .period {font-size:16px; margin-bottom:8px;}
	.yrsStats .swiper-slide .yrsTxt .location {font-size:24px; display:inline-block; position:relative; padding-bottom:14px;}
	.yrsStats .swiper-slide .yrsTxt .location:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#FFF;}
	.yrsStats .swiper-slide .detailTxt .subject {font-size:16px; margin-bottom:4px;}
	.yrsStats .swiper-slide .detailTxt ul li {font-size:14px;}

	.section.celeb {padding:60px 24px;}
	.section.celeb .deco.left, .section.celeb .deco.right {display:none;}
	.section.celeb .celebBox .swiper-slide .thumb {overflow:hidden; border-radius:10px 10px 0 0;}
	.section.celeb .celebBox .swiper-slide .thumb:after {padding-bottom:75%;}
	.section.celeb .celebBox .swiper-slide .thumb img {top:50%; transform:translate(-50%, -50%);}
	.section.celeb .celebBox .swiper-slide .celebInfo {padding:20px; height:60%;}
	.section.celeb .celebBox .swiper-slide .celebInfo .cName {font-size:24px;}
	.section.celeb .celebBox .swiper-slide .celebInfo .carrier {font-size:16px; margin:10px 0 16px;}
	.section.celeb .celebBox .swiper-slide .celebInfo .desc {font-size:14px; gap:4px;}
	.section.celeb .celebBox .swiper-slide .celebInfo .desc:before {width:24px;}
	.section.celeb .swiperFunc .inFunc .paging .swiper-pagination-bullet {background:#D9D9D9; opacity:1.0;}
	.section.celeb .swiperFunc .inFunc .paging .swiper-pagination-bullet.swiper-pagination-bullet-active {background:#00734A; opacity:1.0;}

	.section.graph {padding:60px 24px;}
	.section.graph .inner {flex-direction:column; gap:50px;}
	.section.graph .secTitle {margin-bottom:0px;}
	.perGraph {width:100%;}
	.perGraph .grSec {margin-bottom:20px;}
	.perGraph .acntInfo {border-radius:8px; padding:15px 20px;}
	.perGraph .acntInfo ul {gap:6px;}
	.perGraph .acntInfo ul li .item {font-size:14px;}
	.perGraph .acntInfo ul li .rate.first {font-size:20px; position:relative; right:unset; top:unset; transform:none;}
	.perGraph .acntInfo.multi {flex-direction:column; gap:7px;}
	.perGraph .acntInfo.multi ul {width:100%;}

	.section.together {padding:150px 24px; background:url(../img/sec07_bg_mo.jpg) no-repeat 50% 50%; background-size:cover;}
	.section.together .inner {gap:45px;}
	.section.together .inner .txtSec .desc {font-size:14px;}
	.section.together .inner .txtSec .title {font-size:24px;}
	.section.together .inner .btnTogether a {padding:11px 20px; font-size:14px;}
	.section.together .inner .btnTogether a:after {width:12px; height:12px;}

	.section.news {padding:60px 0px;}
	.section.news:after {display:none;}
	.section.news .inner .titleSec {position:absolute; left:0px; top:0; width:73%; height:auto; padding:20px 24px 50px;}
	.section.news .inner .titleSec .subTxt {font-size:14px; margin-bottom:10px;}
	.section.news .inner .titleSec .title {font-size:28px;}
	.section.news .inner {display:block;}
	.section.news .inner .titleSec .newsFunc {display:none;}
	.section.news .inner .newsSec {width:100%; padding:0 24px; margin:0;}
	.section.news .inner .newsSec .swiper-wrapper {margin-top:96px;}
	.section.news .inner .newsSec .swiper-slide a {padding:20px 24px;}
	.section.news .inner .newsSec .swiper-slide a .date {font-size:12px;}
	.section.news .inner .newsSec .swiper-slide a .subject {font-size:16px; margin:8px 0;}
	.section.news .inner .newsSec .swiperFunc {margin-top:16px;}
	.section.news .inner .newsSec .swiperFunc .dir {display:block;}
	.section.news .inner .newsSec .swiperFunc .news-paging .swiper-pagination-bullet {width:6px; height:6px; margin:0 4px;}

	.footer {padding:30px 24px;}
	.footer .inner {flex-direction:column; gap:16px;}
	.footer .inner .logo {width:89px; height:42px;}
	.footer .inner .corpInfo .infoBox .txt {font-size:12px; flex-direction:column;}
	.footer .inner .corpInfo .infoBox .txt:after {display:none;}
	.footer .inner .corpInfo .infoBox {gap:6px;}
	.footer .inner .corpInfo .copyright {font-size:12px;}

	.floatBtn {width:100%; padding:0 24px; bottom:20px;}
	.floatBtn a {display:block; padding:17px 0; text-align:center; width:calc(100% - 30px); font-size:20px; margin:0 auto;}
}

@media only screen and (max-width:768px) {

}