@charset "utf-8";
.gate ul,.gate li{margin: 0;padding: 0;list-style-type: none;}
/*---------
mTle
---------*/
.mTle{display: flex;align-items: center;margin-bottom: 50px;position: relative;justify-content: center;letter-spacing: -1px;margin-top: 112px;}
.mTle h2{font-size: 52px;font-weight: 200;line-height: 1.2;letter-spacing: -1.6px;}
.mTle h2 b{font-weight: 800;}
.mTle a.more{padding: 15px 5px 10px 0;display: block;position: absolute;display: flex;justify-content: space-between;transition: .25s ease-out;top: 15px;right: 0;align-items: center;}
.mTle a.more span{color: #333;font-weight: 700;font-size: 17px;transition: .25s ease-out;}
.mTle a.more::after{content: '\f178';margin-left: 10px;display: block;font-size: 18px;font-family: 'Font Awesome 6 Free';font-weight: 900;transition: .25s ease-out;}
.mTle a.more:hover::after{color: #297de2;margin-right: -4px;}
.mTle a.more:hover span{color: #297de2;text-decoration: underline; text-underline-offset: 5px;text-decoration-thickness: 2px}
@media (max-width:1024px) {
.mTle{margin-bottom: 20px;justify-content: flex-start;margin-top:60px;flex-direction: column;align-items: flex-start;padding-right: 3.5%;padding-left: 3.5%;}
.mTle h2{font-size: 38px;line-height: 1.1;}
.mTle h2 b{display: block;}
.mTle a.more{top: auto;bottom: 0;right: 3.5%;}
.mTle a.more::after{content: '\f061';margin-left:5px;}
}
@media (max-width:500px) {
.mTle h2{font-size: calc(26px + (38 - 26) * ((100vw - 320px) / (500 - 320)));}
.mTle a.more span{font-size: 0;}
}
/*---------
gtBtm
---------*/
.gtBtm{display: flex;justify-content: space-between;max-width: 1820px;width: 98%;}/*w1820 gap40*/
.gtBtmLt{/* flex:1 1 calc(100% - 900px); */background-color: #eef1f6;border-radius: 0 20px 20px 0;overflow: hidden;display: flex;align-items: center;position: relative;width: calc(100% - 880px);}
.gtBtmLt::before{display: block;content: '';position: absolute;top: 0;bottom: 0;right: 0;width: 100%;background: url(../img/main/mayor.jpg) 100% 100% no-repeat;transition:.25s ease-out}
.gtBtmLt>div{font-size: 26px;position: relative;padding-left: calc(185/1720 * 100%);padding-left:185px;transition:.25s ease-out}
.gtBtmLt>div p{line-height: 1.1;margin-bottom: 40px;font-size: 1.54em;}
.gtBtmLt a.bt{display: block;line-height: 70px;border-radius:2.5em;background-color:rgba(255,255,255,0.8);box-shadow: 0 5px  10px 0 rgba(0,0,0,0.12);width: 240px;padding-left: 40px;color: #043997;font-weight: 700;margin-bottom: 10px;position: relative;}
.gtBtmLt a.bt:first-of-type,
.gtBtmLt a.bt:hover,.gtBtmLt a.bt:focus{color: #fff;background-color: #3682fc;}
.gtBtmLt a.bt::after{content:"";display:block;position:absolute;bottom:30px;right:35px;font-size: 0;width: 6px;height: 6px;border-top: 2px solid #043997;border-right: 2px solid #043997;transform: rotate(45deg);transition:.25s ease-out}
.gtBtmLt a.bt::before{content: '';display:block;position:absolute;bottom: 33px;right:35px;width: 24px;height: 2px;background-color: #043997;transition:.25s ease-out}
.gtBtmLt a.bt:first-of-type::after,
.gtBtmLt a.bt:hover::after,
.gtBtmLt a.bt:focus::after{border-color: #fff;}
.gtBtmLt a.bt:first-of-type::before,
.gtBtmLt a.bt:hover::before,
.gtBtmLt a.bt:focus::before{background-color:#fff}
.gtBtmLt a.bt:hover::after,
.gtBtmLt a.bt:focus::after,
.gtBtmLt a.bt:hover::before,
.gtBtmLt a.bt:focus::before{right: 45px;}
.gtBtmRt{display: flex;flex-wrap: wrap;gap:20px;/* flex: 0 0 calc(410px * 2 + 20px); */max-width: 840px;}
.gtBtmRt>a{display: flex;flex-direction: column;/* width: 410px;height: 240px; */aspect-ratio:410 / 240;background-color: #666;border-radius: 20px;overflow: hidden;padding-left: 50px;padding-right: 50px;justify-content: center;color: #fff;font-size: 20px;font-weight: 300;position: relative;transition:.25s ease-out;flex: 1 1 calc(50% - 10px);}
.gtBtmRt>a b{display: block;font-size: 1.8em;margin-bottom: 50px;font-weight: 700;padding-top: 5px;}
.gtBtmRt>a span{line-height: 1.3;}
.gtBtmRt>a::after{content:"";display:block;position:absolute;bottom: 47px;right:47px;font-size: 0;width: 6px;height: 6px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);transition:.25s ease-out}
.gtBtmRt>a::before{content: '';display:block;position:absolute;bottom: 50px;right:47px;width: 24px;height: 2px;background-color: #fff;transition:.25s ease-out}
.gtBtmRt>a.gtBR1{background-color: #3682fc;}
.gtBtmRt>a.gtBR2{background-color: #5c44f2;}
.gtBtmRt>a.gtBR3{background-color: #edede9;color: #111;}
.gtBtmRt>a.gtBR4{background-color: #245bb3;}
.gtBtmRt>a.gtBR3::after{border-color: #000;}
.gtBtmRt>a.gtBR3::before{background-color: #000;}
.gtBtmRt>a:hover{padding-left: 70px;}
.gtBtmRt>a:hover::after,
.gtBtmRt>a:hover::before{right:80px;}
@media (max-width: 1650px) {
.gtBtmLt>div{padding-left: 11%}
.gtBtmLt::before{background-position: calc(100% + 100px) 100%;}
}
@media (max-width: 1400px) {
.gtBtmRt{gap:0;max-width: 740px;}
.gtBtmLt{flex: 0 0 calc(100% - 760px);}
.gtBtmLt::before{background-size:auto 80%;background-position: calc(100% + 50px) 100%;}
.gtBtmLt>div p{margin-bottom: 20px;font-size: 1.45em;}
.gtBtmLt>div p span{display: block;}
.gtBtmLt a.bt{line-height: 59px;width: 220px;padding-left: 30px;}
.gtBtmLt a.bt::after{right: 25px;bottom: 25px;}
.gtBtmLt a.bt::before{right:25px;bottom: 28px;}
}
@media (max-width: 1200px) {
.gtBtm{width: 100%;}
.gtBtmRt{gap:0;max-width: 640px;}
.gtBtmLt{flex: 0 0 calc(100% - 640px);border-radius:0 }
.gtBtmRt>a{padding-left: 25px;padding-right: 25px;border-radius:0 ;font-size: 18px;}
.gtBtmRt>a b{font-size: 1.6em;margin-bottom: 40px;}
.gtBtmRt>a:hover{padding-left: 40px;}
.gtBtmRt>a:hover::after,
.gtBtmRt>a:hover::before{right:30px;}
}
@media (max-width: 1024px) {
.gtBtmRt{gap:0;max-width: 60%}
.gtBtmLt{flex: 0 0 40%}
}

@media (max-width: 900px) {
.gtBtm{display: block;}
.gtBtmRt{max-width: 100%;}
.gtBtmLt{width: auto;height: 400px;}
.gtBtmLt::before{background-size:auto 100%;background-position: 100% 100%;}
}
@media (min-width: 601px) {
.gtBtmRt>a b br{display: none;}
}
@media (max-width: 600px) {
.gtBtm{width: 100%;}
.gtBtmLt{width: auto;height: auto;aspect-ratio:5/4;min-height: 400px;}
.gtBtmLt>div{padding-left: calc(30/500 * 100vw);}
.gtBtmLt>div p{font-size: 1.36em;}
.gtBtmLt::before{background-size:auto 95%;background-position: calc(100% + 10px) 100%;}
.gtBtmRt>a{aspect-ratio:250 / 200;flex:0 0 50%;justify-content: space-between;padding-top: 40px;padding-bottom: 30px;padding-top: calc(40/600 * 100vw);padding-bottom: calc(30/600 * 100vw);;}
.gtBtmRt>a,
.gtBtmRt>a:hover{padding-left: 30px;}
.gtBtmRt>a::after,
.gtBtmRt>a::before,
.gtBtmRt>a:hover::after,
.gtBtmRt>a:hover::before{right:30px;}
.gtBtmRt>a b{font-size: 1.66em;margin-bottom: 0;word-break:keep-all;}
.gtBtmRt>a::after{bottom: 32px;}
.gtBtmRt>a::before{bottom: 35px;}
}
@media (max-width: 430px) {
.gtBtmLt{min-height:100%;}
.gtBtmLt>div{font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (430 - 320)));}
.gtBtmLt>div p{font-size: 1.4em;line-height: 1;margin-bottom: 15px;}
.gtBtmLt a.bt::before{display: none;}
.gtBtmLt a.bt::after{top:50%;margin-top: -5px;right: 20px;}

.gtBtmLt a.bt {line-height:45px;width: calc(190/430 * 100vw);padding-left:calc(25/430 * 100vw)}


.gtBtmRt>a{font-size: calc(13px + (17 - 13) * ((100vw - 300px) / (430 - 300)));}
.gtBtmRt>a b{font-size: 1.45em;}
.gtBtmRt>a,
.gtBtmRt>a:hover{padding-left: calc(25/430 * 100vw);}
.gtBtmRt>a::after,
.gtBtmRt>a::before,
.gtBtmRt>a:hover::after,
.gtBtmRt>a:hover::before{right:22px;}
.gtBtmRt>a::after{top:calc(42 / 430 * 100vw);bottom: auto;}
.gtBtmRt>a::before{/* top:50%;bottom: auto;margin-top: -1px; */display: none;}
}



/*---------
thumbLst
---------*/
.thumbLst {display: flex;flex-wrap: wrap;gap: 40px;max-width: 1720px;width: 100%;margin: 0 auto 120px;box-sizing: border-box;}
/* .thumbItm {border-radius: 20px;background-color: #ccc;box-shadow: 0 5px  10px 0 rgba(0,0,0,0.18);flex: 0 0 calc((100% - (40px * 3)) / 4); aspect-ratio: 400 / 260;overflow: hidden;} */

.thumbItm{flex: 0 0 calc((100% - (40px * 3)) / 4);}
.thumbItm ._thumb{border-radius: 20px;background-color: #ccc;box-shadow: 0 5px  10px 0 rgba(0,0,0,0.18); aspect-ratio: 400 / 260;overflow: hidden;display: block;position: relative;}
.thumbItm img {width: 100%;height: 100%;object-fit: cover;display: block;transition: .25s ease-out;position: relative;}
.thumbItm a {display: block;width: 100%;height: 100%;position: relative;}
.thumbItm ._thumb::before{content: '';opacity: 0;position: absolute;bottom: 0;left: 0;right: 0;display:block;transition: .25s ease-out;background: linear-gradient(to bottom,  rgba(27,82,163,0) 20%,rgba(27,82,163,1) 95%);z-index: 1;}
.thumbItm a:hover ._thumb::before{opacity: 1;height: 100%;}
.thumbItm a span._thumbTx{opacity:0;position: absolute;bottom: 0;left: 0;right: 0;display: block;padding: 0 60px 0 25px;color: #fff;font-size: 21px;transition: .25s ease-out;padding-bottom: 25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transform:translateX(-25px);z-index: 2;}
.thumbItm a span._thumbTx::after{position: absolute;top: 4px;right: 20px;content: '\f061';font-size: 15px;font-family: 'Font Awesome 6 Free';font-weight: 900;transition: .25s ease-out;}
.thumbItm a:hover span._thumbTx{opacity: 1;transform:translateX(0)}
.thumbItm a:hover img {transform:scale(1.15);filter: blur(3px);  }
@media (max-width: 1200px) {
.thumbLst {gap: 20px;}
.thumbItm {flex: 0 0 calc((100% - 40px) / 3);}
.thumbItm a span._thumbTx{font-size: 18px;padding-right: 40px;}
.thumbItm a span._thumbTx::after{top: 2px;}
}
@media (max-width: 900px) {
.thumbLst {gap: 20px;}
.thumbItm {flex: 0 0 calc((100% - 20px) / 2);}
}
@media (max-width: 600px) {
.thumbItm ._thumb{border-radius: 14px;}
.thumbLst{padding-left: 3.5%;padding-right: 3.5%;margin-bottom: 50px;gap:10px}
.thumbItm {flex: 0 0 100%;}
.thumbItm ._thumb::before{display: none;}
.thumbItm a span._thumbTx{opacity:1;position: relative;bottom: auto;left: auto;right: auto;color: #000;padding: 20px;}
.thumbItm a span._thumbTx,
.thumbItm a:hover span._thumbTx{opacity: 1;transform:translateX(0)}
.thumbItm a span._thumbTx::after{right: auto;left: 0;top: 20px;}
.thumbItm a span._thumbTx{text-overflow: normal;white-space: normal;}
 
}
/*------------
thumbLstTok
------------*/
.thumbLstTok {display: flex;flex-wrap: wrap;gap: 40px;max-width: 1720px;width: 100%;margin: 0 auto;box-sizing: border-box;padding-bottom: 100px;}
.thumbTok {flex: 0 0 calc((100% - (40px * 3)) / 4); padding-bottom: 20px;}
.thumbTok a {display: block;width: 100%;height: 100%;position: relative;}
.thumbTok ._im {border-radius: 20px;background-color: #ccc;box-shadow: 0 5px  10px 0 rgba(0,0,0,0.18);aspect-ratio: 400 / 260;overflow: hidden;display: block;}
.thumbTok ._im img {width: 100%;height: 100%;object-fit: cover;display: block;transition: .25s ease-out;position: relative;}
.thumbTok ._date{display: block;font-size: 12px;padding-top: 25px;font-weight: 800;color: #69F;transition: .25s ease-out;}
.thumbTok ._tle{display: block;font-size: 22px;margin: 5px 0 15px;line-height: 1.2;word-break: break-all;
display: -webkit-box;overflow: hidden; text-overflow: ellipsis;-webkit-box-orient: vertical; -webkit-line-clamp: 2;height:calc(1em * 1.2 * 2);transition: .25s ease-out;}
.thumbTok ._tx{display: block;font-size: 18px;line-height: 1.35;font-weight: 300;word-break: break-all;
display: -webkit-box;overflow: hidden; text-overflow: ellipsis;-webkit-box-orient: vertical; -webkit-line-clamp: 5;height:calc(1em * 1.35 * 5);transition: .25s ease-out;}
.thumbTok a:hover ._im img {  transform: scale(1.05);}
.thumbTok a:hover ._tle{color: #36f;}
.thumbTok a:hover ._date{color: #666;}
.thumbTok a:hover ._tx{text-decoration: underline;color: #666;text-underline-offset: 4px;text-decoration-color:#CCC}

@media (max-width: 1200px) {
.thumbLstTok{gap: 10px;}
.thumbTok {flex: 0 0 calc((100% - (10px * 3)) / 4);}
.thumbTok ._tle{font-size: 20px;}
.thumbTok ._tx{font-size: 16px;}
.thumbTok ._tle,
.thumbTok ._tx,
.thumbTok ._date{padding-left: 10px;padding-right: 10px;}
}
@media (max-width: 1024px) {
.thumbLstTok {display: block;padding-bottom: 60px;}
.thumbTok {width: 100%;margin-bottom: 30px;padding-bottom: 0;}
}
@media (max-width: 1024px) and (min-width: 601px) {

.thumbTok a {display: grid;grid-template-columns: 35% 1fr; grid-template-areas:"_im _date""_im _tle""_im _tx";gap: 0 15px;align-content: start;}
.thumbTok ._im {grid-area: _im;width: 100%;}
.thumbTok ._date {grid-area: _date;padding-top: 5px;}
.thumbTok ._tle {grid-area: _tle;font-size: 21px;line-height: 1.1;margin: 0 ;}
.thumbTok ._tx {grid-area: _tx;font-size: 16px;-webkit-line-clamp: 3;line-height: 1.2;max-height: calc(1em * 1.2 * 3);}
}
@media (max-width: 600px) {
.thumbLstTok{padding-left: 3.5%;padding-right: 3.5%;padding-bottom:20px;}
.thumbTok ._im{border-radius: 14px;}
.thumbTok ._tle{font-size: 22px;}
.thumbTok ._tx{font-size: 18px;-webkit-line-clamp: 4;height:calc(1em * 1.35 * 4);}
.thumbTok ._tle,
.thumbTok ._tx,
.thumbTok ._date{padding-left: 5px;padding-right:5px;}
}


/*---------------------
yaksok
----------------------*/
.yaksok{color: #fff;background:#297CE2 url(../img/main/yaksok.png) no-repeat center 0;height:760px;padding-bottom: 120px;overflow: hidden;background-size:cover}
.yaksok .wrapper{max-width: 1440px;position: relative;/* height: 410px; */overflow: visible;}
.yaksok .swiper {width: 100%;height: 100%;}
.yaksok .swiper-slide {display: flex;justify-content: center;align-items: center;padding-left: 100px;padding-right: 100px;}
.yaksok .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;transition: .25s ease-out;position: relative;}
.promis{display: flex;align-items: center;gap:57px;justify-content: flex-start;width: 100%;padding-bottom: 20px;}
.promis ._l{width:640px; /* height:410px; */border-radius:40px;overflow: hidden;background-color: #ebe8e9;box-shadow: 0 3px  12px 0 rgba(0,0,0,0.3);aspect-ratio: 640 / 410;position: relative;}
.promis ._l ._t{position: absolute;top: 0;left: 0;bottom: 0;width: 100%;display: flex;flex-direction: column;z-index: 1;justify-content: center;font-size: 38px;padding-left: calc(60/640 * 100%);color: #000;}
.promis ._l ._t b{display: block;font-size: 1.58em;}
.promis ._r{font-size: 20px;letter-spacing: -1px;}
.promis ._r .nmb span{font-weight: 300;font-size: 16px;font-size: 0.8em;color: rgba(255,255,255,.5);}
.promis ._r .nmb b{color: #fff;letter-spacing: 0;}
.promis ._r h3{font-weight: bold;font-size: 38px;font-size: 1.88em;padding: 12px 0 25px;line-height: 1.15;word-break:keep-all;}
.promis ._r li{font-weight: 200;position: relative;padding-left:8px;line-height: 1.25;margin-bottom: 5px;}
.promis ._r li::before{display: block;content: '';width: 2px;height: 3px;background-color: #ccc;border-radius:50%;top: 10px;left: 0;position: absolute;}
/* navigation */
.yaksok { --swiper-navigation-size:60px;}
.swiper-button-prev svg,
.swiper-button-next svg{display: none;}
.yaksok .swiper-button-prev,
.yaksok .swiper-button-next{background-color: #fff;border-radius:50% ;top: calc(50% + 60px);}
.yaksok .swiper-button-prev::before,
.yaksok .swiper-button-next::before{display: block;position: absolute;top: 50%;margin-top: -10px;margin-left: -6px;left: 50%;font-size: 20px;font-family: 'Font Awesome 6 Free';font-weight: 900;transition: .25s ease-out;color: #000;}
.yaksok .swiper-button-prev::before{content: '\f053';}
.yaksok .swiper-button-next::before{content: '\f054';}
.yaksok .swiper-button-prev{left: 0;}
.yaksok .swiper-button-next{right: 0;}

@media (max-width:1250px) and (min-width: 1025px){
.promis{gap:30px;}
.promis ._r{font-size:18px;}
}
@media (max-width:1024px) {
.yaksok {height: auto;padding-bottom: 65px;background-image: url(../img/main/yaksok_m.png);}
.promis{display: block;max-width: 640px;margin: 0 auto;padding-bottom: 0;}
.promis ._l{width:auto;margin: 0 auto 30px;}
.promis ._r{padding-left: 10px;}
}
@media (max-width:900px) {
.yaksok .wrapper{width: auto;padding-left: 20px;padding-right: 20px;}
.yaksok .swiper-slide{padding-left: 0;padding-right: 0;}
.yaksok .swiper-button-prev,
.yaksok .swiper-button-next{top:10px;margin-top: 0;}
.yaksok .swiper-button-prev{left: auto;right: 90px;}
.yaksok .swiper-button-next{right: 20px;}
}
@media (max-width:500px) {

.yaksok .wrapper{padding-left:calc(20/500 * 100vw);padding-right:calc(20/500 * 100vw)}
.yaksok .mTle b{display: inline;font-weight: inherit;}
.yaksok .mTle span{display: block;}
.promis ._l{aspect-ratio: 460 / 300;border-radius:30px;}
.promis ._l ._t{font-size: calc(22px + (30 - 22) * ((100vw - 320px) / (500 - 320)));}
.promis ._r{font-size: calc(15px + (19 - 15) * ((100vw - 320px) / (500 - 320)));}
}
@media (max-width:380px) {
.yaksok .swiper-button-prev,
.yaksok .swiper-button-next{top:5px;width: 45px;height: 45px;}
.yaksok .swiper-button-prev{right: 70px;}
.yaksok .swiper-button-prev::before,
.yaksok .swiper-button-next::before{font-size: 16px;margin-top: -8px;margin-left: -5px;}
}











/*----------
mainKey
----------*/
.mainKey{background:#666;height: 960px;position: relative;overflow: hidden;}
.mainKey .wrapper::after{display: none;}
.mainKey .swiper-slide img{font-size: 0;display: block;width: auto;height: 100%;object-fit: cover;transition: .25s ease-out;position: relative;}

.mainKey .swiper-slide p{position: absolute;left: 118px;font-size: 36px;z-index: 3;bottom:195px;bottom: calc(195/960 * 100%);line-height: 1.12;color: #fff;letter-spacing: -2.5px;text-shadow: 0 2px 5px rgba(0,0,0,0.33);}
.mainKey .swiper-slide p b{font-size:/*  64px */1.78em;font-weight: 700;display: block;margin-bottom: 8px;}
.mainKey .swiper-slide p span{display: block;font-weight: 300;}
.mainKey .swiper-slide p em{font-style: normal;font-size:/*  50px */1.39em;font-weight: bold;}
.mainKey .ctrl{height: 30px;position: absolute;bottom:137px;bottom: calc(137/960 * 100%);left:120px;padding-right: 75px;;max-width: 100%;margin: 0;display: flex;align-items: center;z-index: 1;padding-left: 185px;}
/* progress-container swiper바로아래와야함 변형*/
.mainKey .progress-container {position: absolute;bottom:151px;bottom: calc(151/960 * 100%);left: 120px;width: 160px;height: 3px;background: rgba(255, 255, 255, 0.3);z-index: 10;}
/* 실제 채워지는 게이지 바 */
.mainKey .progress-bar {width: 0%;height: 100%;background-color: #fff;transition: width 0s linear;}
/* 진행 중일 때 CSS Transition 적용 */
.mainKey .swiper.is-playing .progress-bar {width: 100%;transition: width 7s linear; /* JS의 AUTOPLAY_DELAY 값(4000)과 일치 */}

.mainKey .swiper-button-wrap{top: auto;transform:none;position: relative;height: auto;width: auto;padding-left:25px;padding-right:25px;display: block;margin-left: 0;right: auto;left: auto;}
.mainKey .swiper-pagination-fraction {text-align: right;position: absolute;top: 0;right: 0;bottom: auto;line-height: 20px;height: 22px;padding-top: 5px;font-size:18px; color:rgba(255,255,255,0.25)}
.mainKey .swiper-pagination-fraction .swiper-pagination-current{padding-right: 2px;font-weight: 700;color: #fff;display: inline-block;vertical-align: top;}
.mainKey .swiper-pagination-fraction .swiper-pagination-total{padding-left: 2px;display: inline-block;vertical-align: top;font-weight: 400;color:rgba(255,255,255,0.5);}
.mainKey .swiper-button-wrap .swiper-button-next{right: 0;}
.mainKey .swiper-button-wrap .swiper-button-prev {left: 0;}
.mainKey .swiper-button-wrap .swiper-button-next,
.mainKey .swiper-button-wrap .swiper-button-prev {background:none;width: 20px;height: 30px;text-indent: -999em;font-size: 0;transition:background-color .25s ease-out !important;outline:none;border-radius: 0;margin-top: 0;top: 0;border: none;}
.mainKey .swiper-button-wrap .swiper-button-next::after, .mainKey .swiper-button-wrap .swiper-button-prev::after {display: none;}
.mainKey .swiper-button-wrap .swiper-button-next::after,
.mainKey .swiper-button-wrap .swiper-button-prev::after {content:'';display:block;position:absolute;background-color: #fff;height: 2px;width: 10px;top:50%;left:50%;margin-top: -1px;margin-left: -5px;transition:all .25s ease-out;display: none;}
.mainKey .swiper-button-wrap .swiper-button-next::before, 
.mainKey .swiper-button-wrap .swiper-button-prev::before {content:'';display:block;position:absolute;border-style:solid;border-color:#fff;border-width:2px 0 0 2px;padding:3px;transform:rotate(-45deg);top:50%;left:50%;margin-left: -3px;margin-top: -4px;transition:all .25s ease-out}
.mainKey .swiper-button-wrap .swiper-button-next::before{border-width:0 2px  2px 0;left: auto;right:50%;margin-right: -3px;margin-left: 0;}

.mainKey .swiper-button-stop,
.mainKey .swiper-button-play{width: 20px;overflow: hidden;display: flex;justify-content: center;align-items: center;height: 30px;text-indent: -999em;position: relative;z-index: 3;/* position: absolute;right: 0;top: 10px; */margin-left: 0;font-size: 0;}
.mainKey .swiper-button-play{display: none;}
.mainKey .swiper-button-stop::before,
.mainKey .swiper-button-play::before{display: block;font-family:'Font Awesome 6 Free' !important;font-size: 14px;color: #fff;text-indent: 0;font-weight: 900;}
.mainKey .swiper-button-stop::before{content:'\f04c'}
.mainKey .swiper-button-play::before{content:'\f04b' ;color: #fff;}

@media (max-width: 1720px){
.mainKey{background:#666;height:auto}
.mainKey .swiper-slide img{width: 100%;}
.mainKey .swiper-slide p{bottom: calc(210/960 * 100%);font-size: calc(30px + (35 - 30) * ((100vw - 1200px) / (1720 - 1200)));}
.mainKey .swiper-slide p,
.mainKey .ctrl,
.mainKey .progress-container{left:calc(120/1920 * 100%)}
}
@media (max-width:1024px){
.mainKey .swiper-slide p{bottom: calc(250/960 * 100%);font-size: calc(20px + (30 - 20) * ((100vw - 600px) / (1024 - 600)));}
}

@media (max-width: 600px) {
.mainKey .swiper-slide p{bottom: calc(155/720 * 100vw);font-size: calc(22px + (35 - 22) * ((100vw - 320px) / (600 - 320)));}
.mainKey .swiper-slide p b{font-size:/*54px */1.5em;margin-bottom: 4px;}
.mainKey .swiper-slide p em{font-size:/*40px */1.11em;}
.mainKey .swiper-slide p,
.mainKey .ctrl,
.mainKey .progress-container{left:calc(30/500 * 100vw)}
.mainKey .ctrl{bottom: calc(56/720 * 100vw);padding-left: 125px;padding-right:59px;}
.mainKey .progress-container{bottom: calc(78/720 * 100vw);width: 110px;}
.mainKey .swiper-pagination-fraction {font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (600 - 320)));}
}
@media (max-width: 400px) {
.mainKey .ctrl{padding-left: 105px;}
.mainKey .progress-container{width:90px;bottom: calc(47/400 * 100vw)}
}

.mainKey .sns{position: absolute;bottom: 133px;right: 60px;display: inline-flex;justify-content: space-between;gap:10px;align-items: center;z-index: 10}
.mainKey .sns a{display:block;width: 40px;height: 40px;font-size: 0;position: relative;text-indent: -9999em;transition:.25s ease-out;}
.mainKey .sns a::before{content: '';display: block;transition:.25s ease-out;background-position: 0 0;background-repeat: no-repeat;width: 100%;height: 100%;}
.mainKey .sns a.fbk::before{background-image: url(../img/main/sns_f.png)}
.mainKey .sns a.ist::before{background-image: url(../img/main/sns_i.png)}
.mainKey .sns a.ytb::before{background-image: url(../img/main/sns_y.png)}
.mainKey .sns a.blg::before{background-image: url(../img/main/sns_b.png)}
.mainKey .sns a:hover::before{opacity: .5;transform:scale(.85)}
@media (max-width: 1720px){
.mainKey .sns{bottom: calc(133/960 * 100%);right: calc(60/1720 * 100%);}
}
@media (max-width:600px){
.mainKey .sns{flex-direction: column;display: flex;gap:5px;bottom: calc(70/720 * 100vw);right: 16px;}
.mainKey .sns a{width: 28px;height: 28px;}
.mainKey .sns a::before{background-size:cover;}
.mainKey .sns a:hover::before{transform:scale(.9)}
}