.m_content{padding:30px 0 0; overflow:hidden}
.m_content h2{font-family: 'esamanru'; font-weight: 600; font-size: 30px; word-break: keep-all;}

/* 비주얼존 */
.main_con1{position: relative;margin-bottom: 30px;padding-left: 20px;}
.main_visual{position: relative;margin-left: -20px;}
.main_visual .tit{position: absolute; top: 15%; left: 20px; right: 20px; color: var(--color4); z-index: 1;}
.main_visual .tit h3{margin-bottom: 10px; font-family: 'esamanru'; font-size: 32px; word-break: keep-all;}
.main_visual .tit p{margin-bottom: 20px;font-size: 17px;word-break: keep-all;}
.main_visual .tit .btn a{display:inline-block;padding: 15px 17px;margin: 4px 4px 4px 0;border-radius:10px;font-size: 15px;font-weight: 500;background: #ffff;color: var(--point);}
.main_visual .tit .btn a:after{content:'';display:inline-block;width:14px;height:14px;margin-left: 40px;background:url('/images/citizencard/main/main_ico.png')no-repeat;background-position: -52px -8px;vertical-align: middle;}
.main_visual .tit .btn a:hover,.main_visual .tit .btn a:focus{background:var(--point); color:var(--color4)}
.main_visual .tit .btn a:hover:after,.main_visual .tit .btn a:focus:after{background-position:-52px -59px;}
.main_visual .visual_list{overflow: hidden;}
.main_visual .visual_list li{height: 500px;}
.main_visual .visual_list img{height: 500px;}
.main_visual .visual_btn{position: absolute;bottom: 25%;left: 20px;}
.main_visual .visual_btn button{display: inline-block; width: 46px; height: 46px; border-radius: 50%; border: 1px #fff solid; background: url('/images/citizencard/main/main_ico.png') no-repeat; font-size: 0;}
.main_visual .visual_btn button.prev{background-position: 2px 7px;}
.main_visual .visual_btn button.next{background-position: 3px -44px;}
.main_visual .visual_btn span{display: inline-block; margin-top: 14px; color: var(--color4);}
.main_visual .visual_btn span::before{content: ''; display: inline-block; width: 80px; height: 1px; margin-right: 10px; background: #fff; vertical-align: middle;}

/* 상단 바로가기 */
.main_link{position: relative; margin: -30px 0 0 5%; padding: 20px 40px 50px; border-radius: 20px 0 0 20px; background: var(--point) url('/images/citizencard/main/main_bg1.jpg') no-repeat left bottom; z-index: 1;}
.main_link ul li a{display: block; position: relative; padding: 30px 0;  font-family: 'esamanru'; font-weight: 300; color: var(--color4); border-bottom: 1px rgba(255, 255, 255, 0.2) solid; transition: 0.5s ease-out;}
.main_link ul li a::after{content: ''; display: block; position: absolute; top: 20px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: #366eb2 url('/images/citizencard/main/main_ico.png') no-repeat; background-position: -39px -46px;}
.main_link ul li a:hover,.main_link ul li a:focus{border-bottom: 1px rgba(255, 255, 255, 1) solid;}
.main_link ul li a:hover::after,.main_link ul li a:focus::after{background-color: var(--bg4); background-position: -39px 6px;}


/*팝업존*/
.main_popupzone{position: relative;max-width: 380px;margin: -30px 0 40px auto;padding: 5px;border-radius: 20px 0 0 20px;background: var(--point);}
.main_popupzone .popup_list{overflow:hidden;}
.main_popupzone .popup_list img{width:auto;max-width: 100%;border-radius: 18px;}
.main_popupzone .popup_btn{}
.main_popupzone .popup_btn .btn{margin-top: 10px;text-align: right;}
.main_popupzone .popup_btn span{vertical-align:middle;color: var(--color4);}
.main_popupzone .popup_btn em{font-style:normal;}
.main_popupzone .popup_btn button{display: inline-block;width: 14px;height: 14px;margin: 0 4px;font-size: 0;background: url('/upload_data/user_file/citizencard/main/main_ico.png') no-repeat;vertical-align:middle;}
.main_popupzone .popup_btn .prev{background-position: -12px -310px;}
.main_popupzone .popup_btn .next{background-position: -12px -362px;}
.main_popupzone .popup_btn .play{background-position: -13px -465px;}
.main_popupzone .popup_btn .stop{background-position: -12px -413px;}

.main_con2{margin: 0 20px;}

/* 공지사항 */
.main_notice{position: relative; margin-bottom: 40px;}
.main_notice h2{margin-bottom: 10px;}
.main_notice ul li{position: relative;}
.main_notice ul li a{display: block; padding: 20px 10px; border-bottom: 1px var(--line) solid;}
.main_notice ul li:last-child a{border-bottom: 0;}
.main_notice ul li a span{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main_notice ul li a i{position: absolute; left: -14px; top: 0; display: inline-block; width: 24px; height: 24px; padding-top: 5px;  font-style: normal; font-size: 13px; text-align: center; color: var(--color4); background: url('/images/citizencard/main/noice_ico.png') no-repeat;}
.main_notice ul li a em{display: none;}
.main_notice ul li a:hover span,.main_notice ul li a:focus span{color: var(--point);}
.main_notice .more_btn{position: absolute; top: 6px; right: 0;}
.main_notice .more_btn a{font-size: 14px;}
.main_notice .more_btn a::after{content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 6px; background: url('/images/citizencard/main/main_ico.png') no-repeat; background-position: -52px -110px; vertical-align: middle;}

/* 가맹점 안내 */
.main_store{position: relative; margin-bottom: 40px;}
.main_store h2{margin-bottom: 30px;}
.main_store .store_list{overflow: hidden;}
.main_store .store_list ul li{float: left;width: calc(100vw - 40px); margin-right:40px;}
.main_store .store_list ul li a{display: block; height: 300px; background: var(--bg4); border-radius: 40px; overflow: hidden;}
.main_store .store_list ul li a img{display: block; height: 210px; width: 100%; margin-bottom: 20px;}
.main_store .store_list ul li a strong{display: block; margin: 0 20px 6px; font-size: 20px; font-weight: 600;}
.main_store .store_list ul li a span{display: block;width: 85%;margin: 0 20px;font-size: 14px;color: var(--color1);text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.main_store .store_list ul li a span em{display: inline-block; font-style: normal; margin-right: 6px;}
.main_store .store_list ul li a:hover strong,.main_store .store_list ul li a:focus strong{color: var(--point);}
.main_store .store_btn{position: absolute; top: 8px; left: 160px;}
.main_store .store_btn button{display: inline-block; width: 14px; height: 14px; margin: 0 4px; font-size: 0; background: url('/images/citizencard/main/main_ico.png') no-repeat;}
.main_store .store_btn .prev{background-position: -12px -110px;}
.main_store .store_btn .next{background-position: -12px -162px;}
.main_store .store_btn .play{background-position: -13px -264px;}
.main_store .store_btn .stop{background-position: -12px -213px;}
.main_store .more_btn{position: absolute; top: 6px; right: 0;}
.main_store .more_btn a{font-size: 14px;}
.main_store .more_btn a::after{content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 6px; background: url('/images/citizencard/main/main_ico.png') no-repeat; background-position: -52px -110px; vertical-align: middle;}

.main_con3{padding: 40px 0; background: var(--bg1);}

/* 관광지혜택 */
.main_place{margin-bottom: 40px;}
.main_place h2{margin-bottom: 30px;}
.main_place h2 strong{color: var(--point);}
.main_place ul li{position: relative; margin: 0 0 20px;}
.main_place ul li a:after{content:"";position: absolute;top: 0;left: 0;display: block;width: 100%;height: 370px;box-sizing: border-box;background: var(--point);transition: 0.3s ease-out;transform: translate(20px, 20px);border-radius: 40px;opacity: 0;}
.main_place ul li a{position: relative;display: block;height: 370px;background: var(--bg4);border-radius: 40px;overflow: hidden;}
.main_place ul li a img{display: block; width: 100%; height: 260px; margin-bottom: 20px; border-radius: 40px;}
.main_place ul li a div{margin: 0 20px;transition: 0.1s;}
.main_place ul li a div::after{content: '';display: none;position: absolute;bottom: 65px;right: 63px;width: 60px;height: 60px;background: url('/images/citizencard/main/main_ico.png')no-repeat;background-position: -29px -36px;border: 1px #fff solid;border-radius: 50%;}
.main_place ul li a strong{display: block; margin-bottom: 6px; font-size: 24px;}
.main_place ul li a span{color: var(--point);}
.main_place ul li a:hover:after{transform: translate(-10px, -10px);opacity: 1;}
.main_place ul li a:hover div{display: block; position: absolute; top: 40px;left: 20px; width:100%; height:370px; z-index:1;}
.main_place ul li a:hover div::after{display: block; z-index:1;}
.main_place ul li a:hover strong{color: var(--color4);}
.main_place ul li a:hover span{color: var(--color4);}

/* 싸리캐릭터 */
.main_place .char{display: none;}

/* 하단 바로가기 */
.main_link2{padding: 40px 20px; background: url('/images/citizencard/main/main_bg2.jpg') no-repeat top 72% center; border-radius: 40px 40px 20px 20px;}
.main_link2 .logo{width: 260px; height: 60px; margin: 0 auto 30px; background: url('/images/citizencard/main/link_logo.png') no-repeat; background-size: 260px; font-size: 0;}
.main_link2 ul li a{display: block; padding: 24px 0 24px 60px; color: var(--color4); font-size: 20px; border-bottom: 1px rgba(255, 255, 255, 0.2) solid;  background: url('/images/citizencard/main/link_ico.png') no-repeat; transition: 0.5s ease-out;}
.main_link2 ul li a span{display: inline-block; font-family: 'Noto Sans'; line-height: 24px; vertical-align: text-top;}
.main_link2 ul li.link1 a{background-position: -10px -25px;}
.main_link2 ul li.link2 a{background-position: -10px -108px;}
.main_link2 ul li.link3 a{background-position: -10px -189px;}
.main_link2 ul li:last-child a{border-bottom: 0;}

/* 콩이캐릭터 */
.main_link2 .char{display: none;}

@media all and (min-width:768px) {
.m_content h2{font-size: 36px;}

.main_con1{position: relative;padding-bottom: 60px;margin-bottom: 170px;padding-left: 0;}
.main_visual{margin: 0 60px 0 0;}
.main_visual .tit{top: 25%;}
.main_visual .tit h3{font-size: 52px;}
.main_visual .tit p{font-size: 30px;}
.main_visual .visual_list{border-radius: 0 40px 40px 0;}
.main_visual .visual_list li{height: 700px;}
.main_visual .visual_list img{height: 700px;}


.main_link{position: absolute; right: 0; bottom: 0; margin: 0; padding: 30px 40px 50px 60px; border-radius: 40px 0 0 40px;}
.main_link ul li a{padding: 30px 70px 30px 0; font-size: 18px;}
.main_link::after{content: ''; display: block; position: absolute; right: 360px; bottom: 0; width: 230px; height: 230px; background: url('/images/citizencard/main/character1.png') no-repeat bottom; background-size: 230px;}

.main_popupzone{position: absolute;right: 0;bottom: -160px;height: 420px;padding: 10px;}
.main_popupzone .popup_list img{width: 360px;height: 360px;}
.main_popupzone::after{content: '';display: block;position: absolute;right: 356px;bottom: 0;width: 230px;height: 230px;background: url('/images/citizencard/main/character1.png') no-repeat bottom;background-size: 230px;z-index: 1;}

  
.main_notice h2{margin-bottom: 30px;}
.main_notice ul li a{display: flex; gap: 0 30px; justify-content: space-between; align-items: center; font-size: 20px;}
.main_notice ul li a em{display: block; font-style: normal; font-size: 16px; color: var(--color3);}

.main_store h2{margin-bottom: 50px;}
.main_store .store_list .caroufredsel_wrapper{width: 100vw !important;}
.main_store .store_list ul li{width: calc(50vw - 40px);}
.main_store .store_btn{top: 11px; left: 190px;}

.main_con3{padding: 60px 0;}

.main_place h2{position: relative; margin-bottom: 50px;}
.main_place h2::before{content: ''; display: block; position: absolute; top: -12px; left: 88px; width: 82px; height: 8px; background: url('/images/citizencard/main/h2_dot.png') no-repeat;}
.main_place h2 span{font-size: 30px; vertical-align: text-bottom;}
.main_place ul{position: relative;display: flex;flex-wrap: wrap;gap: 0 4%;z-index: 1;}
.main_place ul li{width: 48%;}
.main_place ul li a:hover strong{margin-bottom: 14px; font-size: 30px;}
.main_place ul li a:hover span{font-size: 20px;}

.main_link2{display: flex; gap: 0 40px; justify-content: space-between; align-items: center; padding: 30px 40px;}
.main_link2 .logo{margin: 0;}
.main_link2 ul{width: 50%;}
}


@media all and (min-width:1200px) {
.m_content{position: relative; overflow: hidden;}
.m_content::after{content: '';position: absolute;top: 100px;width: 100%;height: 1292px;background: var(--bg1);z-index: -2;}

.main_con1{margin-bottom: 110px;}

.main_visual{margin: 0 10% 0 0;}
.main_visual .tit{left: 5%; right: 40%;}
.main_visual .tit h3{font-size: 75px;animation: text-expand 1.3s ease both;}
.main_visual .tit p{font-size: 38px;margin-bottom: 40px;}
.main_visual .tit .btn a{font-size: 20px;padding: 20px;}
.main_visual .visual_list img{width: 100%;}
.main_visual .visual_btn{bottom: 20%;left: 5%;}

@keyframes text-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
 
.main_link{width: 500px;height: 450px;padding: 60px 70px 70px;border-radius: 60px;}
.main_link ul li a{padding: 40px 0;font-size: 20px;}
.main_link ul li a::after{top: 33px;}
.main_link::after{right: 440px; width: 340px; height: 310px; background-size: auto;}

.main_popupzone{bottom:0;max-width: 520px;height: 570px;padding: 10px 10px 40px;margin: 0;border-radius: 60px;}
.main_popupzone::after{right: 498px;width: 340px;height: 310px;background-size: auto;}
.main_popupzone .popup_list img{border-radius:55px;width: 500px;height: 500px;}
  
.main_con2{display: flex; gap: 0 80px; margin: 0 5% 100px;}
.main_notice{width: calc(100% - 680px); margin-bottom: 0;}
.main_notice::after{content: '';position: absolute; top: -170px; left: -15%;display: block;width: calc(115% + 40px);height: calc(100% + 270px);background: var(--bg4);border-radius: 0 0 200px 0;z-index: -1;}
.main_notice ul li a{padding: 30px 12px;}

.main_store{width: 640px; margin-bottom: 0;}
.main_store .store_list .caroufredsel_wrapper{width: 640px !important;}
.main_store .store_list ul li{width: 300px;}
.main_store .store_list ul li a{width: 300px;}

.main_con3{position: relative; padding: 100px 0; background: none;}
.main_con3::after{content: '';position: absolute;top: 0;right: 0;display: block;width: 90%;height: 100%;background: var(--bg1);border-radius: 200px 0 0 0;z-index: -1;}
.main_place{margin-bottom: 145px;}
.main_place h2{margin: 0 0 50px 20%;}
.main_place ul li{width: 22%; margin-bottom: 0;}

.main_link2{max-width: 1350px; margin: 0 auto; padding: 40px 160px; border-radius: 90px 90px 40px 40px;}
.main_link2 .logo{width: 360px; height: 82px; background-size: auto;}
.main_link2 ul li a{font-size: 26px;}
.main_link2 ul li a span{font-size: 24px;}
}

@media all and (min-width:1600px) {

.main_visual{position: static; margin: 0 14% 0 0;}
.main_visual .tit{left: calc((100% - 1500px) / 2); right: auto;}
.main_visual .visual_btn{left: calc((100% - 1500px) / 2);}

.main_link{right: calc((100% - 1600px) / 2);width: 550px;padding: 50px 70px 80px;}
.main_link::after{right: 500px;}
.main_link ul li a{font-size: 22px;}

.main_popupzone{right: calc((100% - 1600px) / 2);}
.main_popupzone::after{right: 494px;}

.main_con2{position: relative;width: 1500px;margin: 0 auto 100px;gap: 0 200px;z-index: 0;}
.main_notice{width: 660px;}
.main_notice::after{left: -100%;width: calc(200% + 100px);}

.main_con3{padding: 100px 0 150px;}
.main_con3::after{width: 78%; height: 70%;}
.main_con3 .wrap::after{content: 'GIMJE';position: absolute;bottom: 370px; left: 40px; font-size: 230px;font-weight: 900; font-family: 'esamanru'; color: #fff; text-shadow: -1px 0px var(--bg1), 0px 1px var(--bg1), 1px 0px var(--bg1), 0px -1px var(--bg1); z-index: -3;}
.main_place{position: relative;}
.main_place .char{display: block;position: absolute;top: -129px;left: 46px;width: 110px;height: 255px;background: url('/images/citizencard/main/character2.png') no-repeat;font-size: 0;}
.main_place .char::after{content: '';display: block;position: absolute;top: 208px;left: -5px;display: block;width: 118px;height: 25px;background: url('/images/citizencard/main/character2_1.png') no-repeat;font-size: 0;z-index: 2;}

.main_link2{position: relative;}
.main_link2 .char{display: block; position: absolute; top: -130px; right: -90px; width: 165px; height: 310px; background: url('/images/citizencard/main/character3.png') no-repeat; font-size: 0;}
}
@media all and (min-width:2500px) {
.m_content::after{right: 0; width: 80%;}
.main_con3::after{width: 75%;}
}   

.layer_popup{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.8);z-index: 2;}
.layer_popup>div{max-width: 500px;margin: 20% auto;padding: 0 20px;}
.layer_popup h2{margin-bottom: 30px;font-size:24px;color:#fff;}
.layer_popup .txt{display: inline-block;padding: 4px 10px;color:#fff;background: rgba(0,0,0,0.9);border-radius: 10px;font-family: 'NexonLv2Gothic';font-size: 15px;font-weight: 500;}
.layer_popup .img_area{overflow:hidden;}
.layer_popup img{width:auto; max-width:100%; height:auto;}
.layer_popup .btn{display:flex;align-items:center;gap: 5px;justify-content: space-between;flex-wrap: wrap;margin-top:30px;}
.layer_popup .btn p:first-child button{display: inline-block; width: 46px; height: 46px; border-radius: 50%; border: 1px #fff solid; background: url('/images/citizencard/main/main_ico.png') no-repeat; font-size: 0;}
.layer_popup .btn p:first-child button.prev{background-position: 2px 7px;}
.layer_popup .btn p:first-child button.next{background-position: 3px -44px;}
.layer_popup .btn input{display:inline-block; width:20px; height:20px; margin-right:4px; vertical-align:middle;}
.layer_popup .btn label{color:#fff; vertical-align:middle;}
.layer_popup .btn p button{display:inline-block; padding: 4px 10px; border:1px #fff solid; color:#fff; background: rgba(0,0,0,0.9);border-radius: 10px; vertical-align:middle;}
@media all and (min-width:1023px) {
.layer_popup>div{margin: 7% auto;padding: 0;}  
}