@charset "utf-8";

/* *************************************************************************************
*
* layout, header, footer 공통
* 
* **************************************************************************************/
.inner {max-width: 1635px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.skip_nav {position: absolute; width: 100%; left: 0; z-index: 999; top: -50px;}
.skip_nav a:focus, .skip_nav a:active {position: absolute; left: 0;	top: 50px; height: 50px; line-height: 50px; width: 100%; z-index: 999; text-align: center; color: #fff; background:#333; overflow: visible; clip: unset;}

/* *************************************************************************************
*
*  header 
* 
* **************************************************************************************/
.header {position: absolute; left: 0; top: 0; width: 100%; z-index: 10;}
.header.fixed {position: fixed; background-color: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); transition: .3s;}
.header.is-active {background-color: #fff;}
.header .inner {height: 100%;}
.header_group {height: 12rem; display:flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.header_logo img {width: 23rem;}

/*Gnb*/
.header_nav {height: 100%;}
.header_gnb {height: 100%; display:flex; align-items: center;}
.header_gnb > li {text-align:center;}
.header_gnb > li > a {position: relative; display:block; width:100%; height:100%; padding: 0 3rem; font-size: 1.8rem; font-weight: 600; line-height:1;}
.header_gnb > li.is-open > a {color: #1d62ae; transition: .3s;}
.header_gnb > li > a::before {position: absolute; left: 50%; transform: translateX(-50%); top: -2.5rem; content: ''; width: 5px; height: 5px; background-color: #1d62ae; border-radius: 50%; opacity: 0; transition: .5s;}
.header_gnb > li.is-open a::before {opacity: 1; top: -1.5rem;}
.header_gnb .depth2_wrap {display: none; position:absolute; left:0; top:12rem; width:100%; padding: 5.5rem 0; background-color: #fff; box-shadow: 0px 5px 5px rgb(0 0 0 / 0.2); z-index: 10;}
.header_gnb .depth2_wrap .inner {display: flex; align-items: flex-start; justify-content: space-between; gap: 0 4rem;}
.header_gnb .is-open .depth2_wrap {display: block;} 
.header_gnb .depth_title {width: 28rem; padding-top: 1rem; text-align: left; font-size: 2.6rem; font-weight: 600;}
.header_gnb .depth_title span {color: #1d62ae;}
.header_gnb .depth_title .img {display: block; padding-top: 3rem; padding-right: 2rem; text-align: right; background-image: url("../images/common/gnb_bg.png"); background-size: 25rem; background-position: right top; background-repeat: no-repeat;}
.header_gnb .depth_title .img > img {width: 12rem;}
.header_gnb .depth2 {display: flex; width: calc(100% - 78rem); padding-top: 0.5rem; gap: 2rem 3rem; flex-wrap: wrap;}
.header_gnb .depth2 > li {position:relative; width: calc(100% / 3 - 2rem); outline: 1px solid var(--border-gray-color); border-radius: 0.8rem;}
.header_gnb .depth2 > li > a {display:inline-flex; align-items: center; justify-content: center; width:100%; height:5rem; font-size:1.8rem; font-weight: 500;}
.header_gnb .depth2 > li:first-child > a {padding-left:0;}
.header_gnb .depth2 > li:hover {outline: 1px solid #3585d4; color: #1d62ae; background-color: #f4faff; transition: .3s;}

/*로그인메뉴*/
.header_member {display: flex; align-items: center; flex-wrap: wrap;}
.header_member > li + li {margin-left: 1.5rem;}
.header_member > li > a > span {display: inline-block; padding: 0.3rem 0 0.3rem 2rem; font-size: 1.5rem; background-position: left top; background-repeat: no-repeat;}
.header_member .login {padding-left: 2.5rem; background-image: url("../images/common/member_login.png");}
.header_member .logout {padding-left: 2.5rem; background-image: url("../images/common/member_logout.png"); background-size: 2.3rem;}
.header_member .member {background-image: url("../images/common/member_user.png");}
.header_util {display: flex; align-items: baseline;}
.header_util .site_map {display: block; margin-left: 2rem;}
.header .mobile_util {display: none;}

/*모바일 nav*/
.mobile_tool {display: none; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99;}
.mobile_tool .tool_list {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 50rem; height: 12rem; margin: 0 auto; padding: 2rem; background-color: #fff; box-shadow: 0 0 30px rgb(0 0 0 / 0.2); border-radius: 3rem 3rem 0 0; z-index: 99;}
.mobile_tool .tool_list > li {width: calc(100% / 5);}
.mobile_tool .tool_list > li > a {display: flex; flex-direction: column; justify-content: end; height: 7rem; text-align: center;}
.mobile_tool .menu_name {display: block; margin-top: 0.6rem; color: #7c8190; font-size: 1.8rem; font-weight: 600;}

.mobile_tool .nav_btn {position: absolute; left: 50%; top: -2.5rem; transform: translateX(-50%); display: block; width: 7rem; height: 7rem; background-color: #5178f9; border-radius: 50%;}
.mobile_tool .nav_btn .bar {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 25px; height: 3px; background-color: #fff; border-radius: 5px; transition: top 0.2s, transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;}
.mobile_tool .nav_btn .bar.top {top: calc(50% - 8px);}
.mobile_tool .nav_btn .bar.mid {top: 50%;}
.mobile_tool .nav_btn .bar.bot {top: calc(50% - -8px);}
.mobile_tool .nav_btn.open .bar.top {top: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.mobile_tool .nav_btn.open .bar.mid {display: none;}
.mobile_tool .nav_btn.open .bar.bot {top: 50%; transform: translate(-50%, -50%) rotate(-45deg);}
.mobile_tool .nav_fix {display: none; position: fixed; left: 0; bottom: 0; width: 100%; height: 100%;}
.mobile_tool .mo_nav {position: relative; width: 100%; height: 100vh; padding: 3rem 2rem 20rem; background-color: #fff; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;}
.mobile_tool .mo_nav::-webkit-scrollbar {display: none;}
.mobile_tool .mo_nav .close {position: absolute; right: 1rem; top: 2rem;}
.mobile_tool .mo_gnb > li {margin-bottom: 4rem; border-bottom: 1px solid #ededed;}
.mobile_tool .mo_gnb .depth1 {font-size: 2rem; font-weight: 600; color: #333;}
.mobile_tool .mo_gnb .depth2 {display: flex; padding: 2.5rem 0; gap: 3rem; flex-wrap: wrap;}
.mobile_tool .mo_gnb .depth2 > li {width: calc(100% / 3 - 2rem);  text-align: center;}
.mobile_tool .mo_gnb .depth2 > li > a {display: block; width: 100%; height: 100%;}
.mobile_tool .mo_gnb .depth2 i {display: block; margin-bottom: 1rem;}
.mobile_tool .mo_gnb .depth2 span {display: block; font-size: 1.8rem; font-weight: 600; color: #555863;}
.mobile_tool .login_menu {margin-bottom: 3rem; display: flex; gap: 1.5rem; flex-wrap: wrap;}
.mobile_tool .login_menu > li {flex: 1; background-color: #4c83f2; color: #fff; font-weight: 500; border-radius: 1rem;}
.mobile_tool .login_menu .btn {width: 100%; height: 4.5rem; padding: 0 1rem; display: inline-flex; justify-content: center; align-items: center; gap: 1rem;}
.mobile_tool .login_menu .icon > img {width: 2rem;}

/* 스캔영역 */
#qrOverlay {position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9998;}
#qrWrapper {position: fixed; transform: translate(-50%, -50%); left: 50%; top: 50%; background: #000; padding: 16px; border-radius: 12px; z-index: 9999;}
#qrCloseBtn {position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #fff; font-size: 18px; cursor: pointer;}
#reader {width: 300px; height: 300px; overflow: hidden; border-radius: 8px;}


/*시민증*/
.city_card_modal {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 100;}
.city_card_modal .city_card {max-width: 40rem; width: calc(100% - 4rem); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.city_card {position: relative; width: 40rem;}
.city_card .tit {display: block; margin-bottom: 2rem; font-size: 3rem; font-weight: 800; text-align: center;}
.city_card .login_msg {display: flex; align-items: center; font-size: 2rem; font-weight: 500; text-align: left;}
.city_card .card {position: relative; width: 100%; height: 100%; min-height: 25rem; padding: 2rem; color: #fff; background: linear-gradient(to top right, #1b82b8 40%, #65bed3); border-radius: 3rem; align-content: center;}
.city_card .card.normal {animation: cityCardSpecial 6s ease infinite; background-size: 200% 200%;}
.city_card .card.special {position: relative; background: radial-gradient(circle at bottom left, #8a6ff3 0%, #78BFFC 40%, #E0ACFE 100%); animation: cityCardSpecial 6s ease infinite; background-size: 200% 200%;}
.city_card .card.special .info {border-bottom: 0;}
.city_card .info {display: flex; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.5);}
.city_card .info > i img {width: 7rem;}
.city_card .member {margin-left: 2rem;}
.city_card .member dl {display: flex;}
.city_card .member dl:nth-child(2) {display: none;} /*시민증 회원유형 숨김처리*/
.city_card .member dl + dl {margin-top: 0.6rem;}
.city_card .member dt {position: relative; padding-right: 1.5rem; font-size: 1.7rem; font-weight: 600;}
.city_card .member dt::after {content: ''; position: absolute; right: 0; top: 0.4rem; display: block; width: 1px; height: 1.4rem; background-color: #fff; opacity: 0.5;}
.city_card .member dd {padding-left: 1.5rem; font-size: 1.7rem;}
.city_card .date {padding-top: 1.5rem; font-size: 1.8rem; font-weight: 600; text-align: center; line-height: 1.3;}
.city_card .member_type {padding: 0.5rem; border-radius: 0.5rem; background-color: rgb(0 0 0 / 0.5); font-size: 1.7rem; font-weight: 600; text-align: center;}
.city_card .close_btn {position: absolute; right: 1.5rem; top: 1.5rem;}
.city_card .flip_card {width: 100%; padding: 0;}

/*시민증 뒷면*/
.city_card .back_open .front {display: none;}
.city_card .back_open .back {display: block;}
.city_card .back {display: none;}
.city_card .back .info {gap: 2rem; justify-content: space-between; border-bottom: 0;}
.city_card .back .member {width: calc(100% - 17rem); margin-left: 0;}
.city_card .back .date {margin-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.5);}
.city_card .back .code {width: 15rem; height: 15rem;}
.city_card .back .code > img {width: 100%; height: 100%;}

/*모바일 시민증*/
.mo_city_card {display: none; position: relative; width: 100%; color: #fff; z-index: 98;}
.mo_city_card .card_open {width: 100%; padding: 1.2rem 3rem; font-size: 1.8rem; font-weight: 600; text-align: center; background-color: #26293d; }
.mo_city_card .card_open::before {content: ''; position: absolute; right: 2rem; bottom: -2rem; display: block; width: 57px; height: 18px; background-image: url("../images/common/citycard_drop.png"); background-repeat: no-repeat;}
.mo_city_card .card_open::after {content: ''; position: absolute; right: 4.7rem; bottom: -1rem; display: block; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg);}
.mo_city_card .city_card {display: none; position: absolute; left: 0; width: 100%; padding: 0 2rem 3rem; background-color: #26293d; }
.mo_city_card .card {max-width: 45rem; margin: 0 auto 1rem;}
.mo_city_card .card_close {position: absolute; bottom: -2rem; right: 2rem; display: block; width: 57px; height: 18px; background-image: url("../images/common/citycard_drop.png"); background-repeat: no-repeat;}
.mo_city_card .card_close::after {content: ''; position: absolute; left: 50%; bottom: 0.6rem; display: block; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateX(-50%) rotate(-45deg);}
.mo_city_card .card_desc {text-align: center;}

/*특별회원 시민증 애니메이션*/
@keyframes cityCardSpecial {
    0% {
      background-position: bottom left;
    }
    50% {
      background-position: top right;
    }
    100% {
      background-position: bottom left;
    }
}

/* *************************************************************************************
*
* footer
* 
* **************************************************************************************/
.fullpage .footer {background-color: transparent;}
.footer {padding: 2.5rem 0; color: #555; background-color: #fff;}
.footer .footer_info {margin-bottom: 1.8rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.footer .policy {display: flex; gap: 1rem 3rem; flex-wrap: wrap;}
.footer .policy > li {position: relative;}
.footer .policy > li + li::before {content: ''; position: absolute; left: -1.6rem; top: 1rem; width: 5px; height: 5px; border-radius: 50%; background-color: #777;}
.footer .policy > li > a {font-size: 1.8rem; font-weight: 500;}
.footer .footer_sns {display: flex; align-items: center; gap: 1rem 1.5rem;}
.footer .address {font-size: 1.8rem; font-weight: 500;}

/* *************************************************************************************
*
* 팝업존
* 
* **************************************************************************************/
.popup_zone {position: fixed; left: 0; top: 0; padding: 0 2rem; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); z-index: 9999; box-sizing: border-box; }
.popup_zone .pop_inner {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 126rem; padding: 3rem; background: #fff; border-radius: var(--border-radius-base); box-sizing: border-box; } 
.popup_zone .pop_title {display: flex; align-items: center; margin-bottom: 2rem;}
.popup_zone .pop_title > strong {font-weight: bold; font-size: 2.2rem; color: #222;}
.popup_zone .pop_badge {display: inline-block; margin-left: 1rem; padding: 0 1.5rem; height: 3rem; line-height: 3rem; font-size: 1.5rem; font-weight: bold; color: #fff; background: var(--primary-color); border-radius: 3rem;}
.popup_zone .pop_slide {position: relative;}
.popup_zone .popup_list .swiper-slide {width: 38rem; margin-right: 3rem;} 
.popup_zone .popup_list .swiper-slide:last-child {margin-right: 0 !important;}
.popup_zone .popup_list .swiper-slide > a {position: relative; display: block; padding-top: 100%; width: 100%; height: 0; border-radius: 2rem; overflow: hidden;}
.popup_zone .popup_list .swiper-slide > a img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.popup_zone .slide_controls .slide_btn .btn {position: absolute; top: 50%; transform: translateY(-50%); width: 5rem; height: 5rem; border-radius: 50%; background-color: #fff; border: 1px solid var(--border-gray-color); box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.3); z-index: 3;}
.popup_zone .slide_controls .slide_btn .btn.prev {left: -2rem;}
.popup_zone .slide_controls .slide_btn .btn.next {right: -2rem; transform: translateY(-50%) rotate(-180deg);}
.popup_zone .swiper-pagination {margin-top: 1.5rem; display: flex; justify-content: center; gap: 0.5rem;}
.popup_zone .swiper-pagination-bullet {display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #888; cursor: pointer;}
.popup_zone .swiper-pagination-bullet-active {width: 3rem; border-radius: 3rem;}
.popup_zone .swiper-pagination-lock {display: none;}
.popup_zone .pop_agree {margin-top: 1rem; display: flex; align-items: center; gap: 0.8rem;}
.popup_zone .pop_agree label {font-weight: 500; line-height: 1; cursor: pointer;}
.popup_zone .pop_close {position: absolute; top: -3rem; right: 0;}
.popup_zone .pop_close img {width: 2rem;}
.popup_zone .pop_close:focus-visible {outline-color: #8d7c7c;}

/* *************************************************************************************
*
* 모바일
* 
* **************************************************************************************/
@media all and (max-width:1280px){
    .header_logo img {width: 24rem;}
    .header_gnb > li > a {padding: 0 1.5rem;}
    .header_gnb .depth_title {width: 25rem;}
    .header_gnb .depth2 {width: calc(100% - 73rem); gap: 1rem 2rem;}
    .header_gnb .depth2 > li {width: calc(100% / 2 - 1rem);}
    .header_gnb .city_card > a {padding: 3rem 1.5rem;}

    /*팝업존*/
    .popup_zone .pop_inner {max-width: 85rem;}
    .popup_zone .popup_list .swiper-slide:first-child:nth-last-child(1) {width: 100%; min-width: 40rem;}
}

@media all and (max-width:1024px){
    .header_group {height: 6.5rem; justify-content: center;}
    .header_logo img {width: 18rem;}
    .header_gnb {display: none;}
    .header_util {display: none;}
    .mo_city_card.open {display: block;}
    .mobile_tool {display: block;}
    
    .footer {padding: 3rem 0 20rem;}
    .footer .footer_info {flex-direction: column-reverse;}
    .footer .footer_sns > li img {width: 3rem;}
    .footer .policy {margin-top: 3.5rem; justify-content: center; gap: 0.5rem 2rem;}
    .footer .policy > li + li::before {width: 3px; height: 3px; left: -1.2rem; top: 0.8rem;}
    .footer .policy > li > a {font-size: 1.6rem;}
    .footer .address {text-align: center; font-size: 1.6rem;}
    .footer .address span {display: block; margin-bottom: 0.5rem;}
}

@media all and (max-width:780px){
    /*팝업존*/
    .popup_zone .pop_inner {width: calc(100% - 5rem); max-width: 48rem; padding: 2.5rem;}
    .popup_zone .popup_list {border-radius: 2rem; overflow: hidden;}
    .popup_zone .popup_list .swiper-slide {margin-right: 0;}
    .popup_zone .popup_list .swiper-slide:first-child:nth-last-child(1) {min-width: auto;}
    .popup_zone .popup_list .swiper-slide > a {border-radius: 0;}
    .popup_zone .slide_controls .slide_btn .btn {width: 4.5rem; height: 4.5rem;}
    .popup_zone .slide_controls .slide_btn .btn > img {width: 1rem;}
    .popup_zone .slide_controls .slide_btn .btn.prev {left: -1rem;}
    .popup_zone .slide_controls .slide_btn .btn.next {right: -1rem;}
}

@media all and (max-width:480px){ 
    .mo_city_card .card_open::after {right: 5rem;}
    .mobile_tool .tool_list i > img {width: 3.5rem;}
    .mobile_tool .menu_name {font-size: 1.5rem;}
}

@media all and (max-width:360px){
    .mobile_tool .tool_list > li > a {height: 6.5rem;}
    .mobile_tool .tool_list .menu {margin-left: 0.5rem;}
    .mobile_tool .mo_gnb .depth2 span {font-size: 1.6rem; letter-spacing: -1px;}

    /*시민증 뒷면*/
    .city_card .back .member {width: calc(100% - 12rem);}
    .city_card .back .code {width: 10rem; height: 10rem;}
}