@charset "UTF-8";
@import "basic.css"; /* 리셋 */
@import "fonts.css"; /* 웹폰트 */

::-webkit-scrollbar {display: none;}
.wrap{position: relative; width: 100%; font-family: "NotoSansKR", sans-serif; font-size: 18px; visibility: hidden; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-user-select:text; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.wrap.active{visibility: visible; opacity: 1;}

/* ======================================= 사이트 구성 ======================================= */
#main_top{position: relative; width: 100%; height: 75px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05); display: flex; flex-flow: row nowrap; justify-content: center; z-index: 2; }
.user-info{position: absolute; top:80px; right: -330px; width: 330px; min-height: 470px; background: #f0f0f0; z-index: 100; border-radius: 20px; box-shadow: 0px 6px 4px rgba(51, 63, 89, 0.25); text-align: center; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s;}
.user-info.active{visibility: visible; opacity: 1; right: 80px;}


#main_body{position: relative; width: 100%;  display: flex; flex-flow: row wrap; justify-content: center; min-height: calc(100% - 221px);}
#main_bottom{position: relative; width:100%;min-height:210px; background: #444444; display: flex; flex-flow: row nowrap; justify-content: center;}
#main_bottom.disable{visibility: hidden; opacity: 0;}

#my_top{position: relative; width: 100%; height: 200px; background: url("../img/mypage_banner.png") 50% 50% no-repeat #2C323F;}
#my_left{position: relative; width: 150px; height: 100%; min-height: 200px; padding: 90px 35px;}
#my_body{position: relative; width: calc( 100% - 150px ); height: 100%; padding: 35px;}

#login-box{width: 590px; height: 576px; border: 1px solid #D9D9D9; position: absolute; top: 50%; margin-top: -288px; border-radius: 10px;}
#login-box .logo{position: relative; width: 100%; height: 60px; text-align: center; margin-top: 100px; font-size: 35px;background: url("../img/icon/logo.svg") 50% 0px /120px no-repeat;}
#login-box h3{margin: 30px 0;}
#login-box h5{margin: 25px 0;}

#login-box i{display:inline-block; width: 35px; height: 35px; cursor: pointer; margin: 15px auto;}
#login-box i.kakao{background: url("../img/icon/kakao.svg") no-repeat center/cover;}
#login-box i.google{background: url("../img/icon/google.svg") no-repeat center/cover;}
#login-box i.home{text-align: center; color: #FFF; border-radius: 5px; font-size: 16px; background: #5F7DFF; height: 35px; line-height: 35px; width: 150px; margin-top: 70px; font-weight: 300;}


#login-box .login-form {width:270px;margin:0 auto;overflow:hidden;}
#login-box .login-form .row {margin:10px auto;width:calc(100% - 10px);}
#login-box .form-control {display:block;width:100%;height:40px;border:1px solid #ddd;border-radius:8px;margin:5px auto;padding:5px 10px;}
#login-box .form-check + label{display: inline-block; position: relative; cursor: pointer;margin:5px 0;color:#777;font-size:0.8em;line-height: 16px;}
#login-box .form-check + label:before{content: ""; display: inline-block; width: 16px; height: 16px; line-height: 16px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; border:1px solid #777;border-radius: 7px;background-color:#fff;}
#login-box .form-check:checked + label:before{background: url("../img/icon/checked.svg") 0px 2px /14px no-repeat;}
#login-box .form-button {display:block;width:100%;height:40px;background-color:#5F57F8;border:1px solid #5F57F8;color:#fff;border-radius:8px;margin:5px auto;cursor:pointer;}

#login-box .login-form .register {text-align:center;color:#777;font-size:0.8em;}
#login-box .login-form .register .divide {display:inline-block;width:1px;height:11px;border-right:1px solid #999;margin:0 5px;color:#999;}

#login-box .login-form .sns-login {text-align:center;}
#login-box .login-form .sns-login i {margin:0 20px;}


.member .form-control {display:inline-block;margin-top:10px;height:45px;padding:5px 10px;width:calc(100% - 200px);border-radius:5px;background-color:inherit;border:1px solid #d9d9d9;}
.member .form-control.name {display:inline-block;margin-top:10px;height:45px;padding:5px 10px;width:300px;border-radius:5px;background-color:inherit;border:1px solid #d9d9d9;margin-right:20px;}
.member .form-control.invalid {border-color:#FF4747;}
.member .form-radio {display:inline-block;position:relative;top:15px;margin-left:5px; height:45px;width:45px;border:1px solid #D9D9D9;border-radius:5px;-webkit-appearance:none;cursor:pointer;}
.member .form-radio.invalid {border-color:#FF4747;}
.member .form-radio + label {display:inline-block;position:relative;left:-34px;width:0;}
.member .form-radio:checked {background-color: #5F57F8;border-color: #5F57F8;}
.member .form-radio:checked + label {color:#fff;}
.member .error-text {display:block;min-height:25px; color:#FF4747;font-size:14px;line-height:15px;padding:5px 10px;}

.form-check + label{display: inline-block; position: relative; cursor: pointer;margin:5px 0;color:#8F8F8F;}
.form-check + label:before{content: "";display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; vertical-align: middle; background: #D9D9D9;border-radius: 4px;margin-right:10px;}
.form-check.alert + label:before{border:1px solid #ff4747;}
.form-check:checked + label:before{content: "\2713";color:#FFF;background-color:#5F7DFF;font-weight:bold;line-height:18px;text-decoration: none;}

.btn-view-text {margin-left:10px; color: #777;text-decoration: underline; font-size:0.8em;}
.btn-register {position: relative; display: inline-block; padding: 10px 85px; font-size: 1.2em; font-weight: 700; color: #333333; border: 1px solid #333333; }
.btn-register.check {top:-1px; padding: 10px 20px; color: #555555; border: 1px solid #D9D9D9;border-radius:5px;margin-left:10px;font-weight:300;font-size:12px;height:45px;line-height:25px;}
.member-register-label {display:block;color:#555;}
.member-register-label small{color:#777;font-size:0.7em;}

/* ======================================= 상단 스타일 ======================================= */
#logo{position:absolute;top:50%;margin-top: -20px;left: 25px;height: 50px;width:100px;cursor: pointer; background: url("../img/icon/logo.svg") 0px 0px /100px no-repeat;}

#nav-weather{position:absolute;top:50%;margin-top: -20px;left:160px;height:40px;width:320px;overflow:hidden;border:1px solid #dfdfdf;border-radius:20px;padding:0px 12px;}
#nav-weather li{display:block;height:40px;width:296px;overflow:hidden;}
#nav-weather li div {display:inline-block;vertical-align:top;text-align:center;}
#nav-weather li .location{height:20px;margin:10px 0;padding: 0 5px;font-size:0.8em;line-height:20px;border-right:1px solid #dfdfdf;}
#nav-weather li .temp{line-height:20px;margin:10px 0 10px -4px;padding: 0 5px;border-right:1px solid #dfdfdf;font-weight: 600;}
#nav-weather li .temp img {height:20px;width:30px;}
#nav-weather li .item{line-height:15px;padding: 0 5px;margin:5px 0;font-size:0.8em;}
#nav-weather li .item .title{display:block;}
#nav-weather li .item .value{display:block;font-size:0.75em;}

#nav-main{position: absolute; top: 50%; margin-top: -15px; right: 0; width: 500px; height: 30px; line-height: 30px; font-family: NotoSansKR, sans-serif; font-size: 16px; font-weight: 400; display: flex; flex-flow: row nowrap; justify-content: space-between;}
#nav-main li{position: relative; cursor: pointer;}
#nav-main li.active{color:#5F57F8;font-weight:500;}
#nav-main li.user{margin-left: 27px;}
#nav-main li.user:before{content: ""; position: absolute; top:5px; left: -27px; width: 22px; height: 22px; background: url("../img/icon/login.svg") no-repeat center/cover;}
#nav-main li:hover{color: rgba(143,143,143,.5);}

#nav-main li > ul.sub{position: absolute; background: #FFF; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); text-align: center; left: -25px; right: -25px; top:0; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s;}
#nav-main li > ul.sub li{padding: 10px; font-size: 13px; color: rgba(143,143,143,.5);}
#nav-main li:hover > ul.sub p{color: #333;}
#nav-main li:hover > ul.sub{visibility: visible; opacity: 1; }
#nav-main li:hover > ul.sub li:hover{color: #333;}

#nav-mobile{display: none; position: absolute; left:20px; top: 50%; margin-top: -8px; width: 24px; height: 16px; background: url("../img/icon/icon_mobile_menu.png") no-repeat center/cover; cursor: pointer;}

#nav-mobile-area{position: fixed; width: 100%; height: 100%; background: rgba(37,47,52,.9); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; }
#nav-mobile-area.active{visibility: visible; opacity: 1;}
#nav-mobile-area.active > .menu{left:0;}

#nav-mobile-area .menu{position: absolute; height: 100%; left: -100%; width: 300px; background:#F5F5F5; -webkit-transition: all 0.3s; transition: all 0.3s;}
#nav-mobile-area .top{position: relative; width: 100%; height: 180px; background: #5F7DFF; padding: 50px 0 36px; text-align: center;}
#nav-mobile-area .top p{position: relative; width: 100%;  display: inline-block; margin-top: 60px; color: #FFF; font-size: 15px; font-weight: 100;}
#nav-mobile-area .top p:before{content: ""; top: -70px; left: 50%; margin-left: -30px; position: absolute; width: 60px; height: 60px; background: url("../img/icon/login.svg") no-repeat center/cover;}

#nav-mobile-area .container{padding: 0; position: absolute; top: 180px; bottom: 0; overflow-y: auto; min-width: 0;}
#nav-mobile-area .section{position: relative; min-height: 180px; margin-bottom: 10px; background: #FFF; padding: 20px 30px;}


#nav-mobile-area .section ul{font-size: 15px; color:#333; font-weight: 400;}
#nav-mobile-area .section ul li{padding: 20px 0;}
#nav-mobile-area .section ul.sub{padding-left: 10px; height: 0; visibility: hidden; opacity: 0;}
#nav-mobile-area .section ul.sub li{padding: 0 0 20px;}
#nav-mobile-area .section label{display: inline-block; position: relative; width: 100%;}
#nav-mobile-area .section label:after{content: ""; position: absolute; right: 0; top:0; margin-top: 6px; width: 11px; height: 6px; background: url("../img/icon/icon_arrow_down_menu.png") no-repeat center/cover;}
#nav-mobile-area .section .mobile_menu_check:checked ~ ul.sub{visibility: visible; opacity: 1; height: auto; padding-top: 35px; -webkit-transition: all 0.3s; transition: all 0.3s;}
#nav-mobile-area .section .mobile_menu_check:checked ~ label:after{background: url("../img/icon/icon_arrow_up_menu.png") no-repeat center/cover;}

#search{display: none; position: absolute; right: 20px; top:50%; margin-top: -5.5px; width: 12px; height: 11px; background: url("../img/icon/icon_mobile_search.png") no-repeat center/cover; cursor: pointer;}

#search_area{position: fixed; top: -100px; left: 0; width: 100%; height: 100px; background: #2C323F; display: flex; flex-flow: row nowrap; justify-content: center; padding-top: 30px; z-index: 2; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; }
#search_area.active{top:0; visibility: visible; opacity: 1;}
#search_area .search-bar{position: relative; width: 768px;}
#search_area span{position: absolute; top:5px; left: 45px; color: #FFF; font-size: 30px; font-weight: 700; height: 40px; width: 120px; z-index: 1;}
#search_area span:before{content: ""; position: absolute; width: 50px; height: 50px; background: url("../img/icon/icon_search_big.png") no-repeat center/cover; top:-5px; left: -25px; z-index: -1;}
#search_area select{position: absolute; left: 210px; height: 45px; padding: 10px 45px 10px 20px; font-size: 18px; color: #5E5E5E; border-radius: 10px; background: #FFF url("../img/icon/icon_arrow_down_bold.png") no-repeat 90% 55%; background-size: 11px 6px;}
#search_area input{position: absolute; right: 70px; height: 45px; padding: 10px 45px 10px 20px; font-size: 18px; color: #5E5E5E; border-radius: 10px;  width: 330px; background: #FFF;}
#search_area input::placeholder{color: #5E5E5E; font-size: 18px;}
#search_area input::-webkit-input-placeholder {color: #5E5E5E; font-size: 18px;}
#search_area button{position: absolute; top: 14px; right: 85px; width: 16px; height: 16px; background: url("../img/icon/search.svg") no-repeat center/cover;}
#search_area i{position: absolute; top: 15px; right: 25px; display: inline-block; width: 14px; height: 14px; background: url("../img/icon/icon_close_white.png") no-repeat center/cover; cursor: pointer; }

/* ======================================= 하단 스타일 ======================================= */
#com-info-container{width: 100%;min-height:120px;display: flex; flex-flow: row nowrap; justify-content: center; color:#ffffff;}
#com-info-container .com-id {font-size:1em;margin-top:50px;width:250px;}
#com-info-container .com-info {width: calc(100% - 250px);margin-top:50px;font-size: 0.7em;font-weight:200;}
#com-info-container .com-info p {margin-bottom:20px;}
#com-info-container .com-sns {margin-top:50px;}
.com-sns-list {display:flex;}
.com-sns-list li {margin-right:20px;}
.com-sns-list li:last-child {margin-right:0;}
.com-info-item {display:inline-block;margin-right:30px;min-height:20px;}
.com-info-copyright {font-size:0.6em;color:#a7a7a7;font-weight:200;padding:20px 0;}

/* ======================================= 마이페이지 스타일 ======================================= */
/* 사이드 메뉴 */
#my_left li{margin-bottom: 25px; font-size: 18px; text-align: left; color: #8F8F8F; cursor: pointer;}
#my_left li:hover{color: #5F7DFF;}
#my_left li.active{color: #5F7DFF; font-weight: 700;}

.my-info {display: flex;margin:50px auto 100px; width:100%;}
.my-info .profile-image {display:inline-block;width:200px;height:200px;border-radius:50%;overflow:hidden;margin-top:5px;}
.my-info .profile-image img {width: 100%; aspect-ratio: 1/1; object-fit: cover;margin-top:5px;}
.my-info .profile-text {display:inline-block;width:250px;padding:0 30px;}
.my-info .profile-text .username {font-size:1.3em;font-weight:500;margin-bottom:20px;}
.my-info .profile-text p {line-height:20px;margin:5px 0;color:#3A3A3A;}
.my-info .profile-btn {width:180px;height:40px;line-height:20px;padding:5px 10px;border:1px solid #333;margin-top:25px;}
.my-info .profile-score {min-height:200px;border-left:1px solid #D9D9D9;padding-left:30px;width:calc(100% - 450px);}
.my-info .profile-score .row {display:block;width:100%;height:60px;margin-bottom:30px;}
.my-info .profile-score .row .score-icon {display:inline-block;width:45px;height:60px;vertical-align:top;}
.my-info .profile-score .row .score-icon .profile-badge {width:45px;height:60px;}
.my-info .profile-score .row .score-content {display:inline-block;width:calc(100% - 60px);height:65px;vertical-align:top;margin-left:10px;overflow:hidden;}
.my-info .profile-score .row .score-content .question {width:20px;height:20px;margin-left:10px;cursor:help;}
.helper {position: relative;display: inline-block;}
.helper:hover::after {
    content: attr(data-title);
    position: relative;
    display:block;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    font-size: 14px;
    text-align: justify;
}
.my-info .profile-score .row .score-content .score-text {margin-top:10px;line-height:30px;}
.my-info .profile-score .bicycle-exp {display:inline-block;height:30px;width:50%;text-align:center;border-radius:15px; color:#fff;background:linear-gradient(90deg, #5F7DFF 0%, #5662F5 33%, #7F31FF 100%);}
#user-exp {appearance:none;height:30px;width:100%;color:#fff;}
#user-exp::-webkit-progress-bar {border-radius:15px;background-color:#8F8F8F;border:none;}
#user-exp::-webkit-progress-value {border-radius:15px; background: -webkit-linear-gradient(to right, #5F7DFF, #7F31FF); background: linear-gradient(to right, #5F7DFF, #7F31FF);}
.my-info .profile-score .progressbar-overlap-level {height:30px;width:100%;position:relative;top:-30px;color: #fff;padding-left:20px;}
.my-info .profile-score .progressbar-overlap-exp {height:30px;width:100%;position:relative;top:-60px;color: #fff;text-align:center;}

.table-licence-list {width:100%;text-align:left;border-collapse: collapse;}
.table-licence-list thead{background-color: #F2F2F2;height:50px;}
.table-licence-list .title-cell{padding:10px;height:30px;line-height:30px;}
.table-licence-list .text-center{text-align: center;}
.table-licence-list .contents{font-size:0.9em;}
.table-licence-list .contents tr {height:50px;border-bottom:1px solid #f2f2f2;}
.table-licence-list .contents tr td {height:30px;padding:10px;line-height:30px;}
.table-licence-list .cell-button {height:30px;width:75px;border-radius:15px;color:#FFFFFF;background-color:#5F57F8;cursor:pointer;margin:0px 3px;}

.popup-window-myinfo{position: fixed; width:100%;height:100%; top:0; left:0; background: rgba(0,0,0,.4); visibility: hidden; opacity: 0; z-index: -1; -webkit-transition: all 0.3s; transition: all 0.3s;}
.popup-window-myinfo.active{visibility: visible; opacity: 1; z-index: 99;}
.popup-window-myinfo .inner{position: absolute; width:700px; height: 450px; top:50%; left:50%; background: #FFF; overflow-y: scroll; max-width:100%; transform: translate(-50%, -50%);}
.popup-window-myinfo .inner .header{height:40px;padding:10px 20px;background-color: #5F57F8;color:#ffffff;font-weight:500;}
.popup-window-myinfo .inner button.close{position: absolute; top:5px; right: 5px; width: 30px; height: 30px;color: #FFF;font-size: 15px;font-weight:600;text-align: center;}
.popup-window-myinfo .inner button.close:before{content: "\2715";}
.popup-window-myinfo .inner .content{padding:60px;height:320px;}
.popup-window-myinfo .inner .content .profile-image{display:inline-block;width:200px;height:200px;overflow:hidden;vertical-align:top;}
.popup-window-myinfo .inner .content .profile-image .thumbnail{height:100%;object-fit:cover;border-radius:50%;}
.popup-window-myinfo .inner .content .profile-image .btn-profile-edit{float:right; position:relative;top:-50px; height:50px;width:50px;border:1px solid #fff;border-radius:50%;background:url("../img/icon/edit.svg") 0px 0px /50px no-repeat;}

.popup-window-myinfo .inner .content .profile-info{display:inline-block;width:calc(100% - 210px);height:200px;vertical-align:top;padding-left:40px;color:#3a3a3a;}
.popup-window-myinfo .inner .content .profile-info .name{font-size:1.2em;font-weight:500;}
.popup-window-myinfo .inner .content .profile-info .email{font-size:0.9em;margin-bottom:20px;}
.popup-window-myinfo .inner .content .profile-info .item{margin-bottom:8px;}
.popup-window-myinfo .inner .content .profile-info .item .title{display:inline-block;width:70px;line-height:20px;padding:5px 0;vertical-align:top;}
.popup-window-myinfo .inner .content .profile-info .item .value{display:inline-block;margin-left:10px;width:calc(100% - 85px);border:1px solid #ddd;height:30px;padding:5px 10px;line-height:20px;border-radius:5px;background-color: #eee;}
.popup-window-myinfo .inner .content .profile-info .item .profile-input{display:inline-block;margin-left:10px;width:calc(100% - 85px);border:1px solid #ddd;height:30px;padding:5px 10px;line-height:20px;border-radius:5px;}

.popup-window-myinfo .inner .card-button{text-align:center;margin:20px 0;padding:10px 60px;height:45px;border:1px solid #333;line-height:25px;}
.popup-window-myinfo .inner .text-center{text-align:center;}


@media (max-width: 1023px) {
    .my-info {display: block;}
    .my-info .profile-score {width: 100%;margin-top:50px;}
}


@media (max-width: 767px) {
    .my-info .profile-image {width: 180px;height:180px;}
    .my-info .profile-text {padding-right:0;}
    .my-info .profile-text .username {font-size:1.2em;margin-bottom:10px;}
    .my-info .profile-text p {font-size:16px;}
    .my-info .profile-btn {margin-top:15px;}

    .popup-window-myinfo .inner .content {padding: 50px 40px;}
    .popup-window-myinfo .inner .content .profile-image {width:150px; height: 150px;}
    .popup-window-myinfo .inner .content .profile-info {width: calc(100% - 155px);}
    .popup-window-myinfo .inner .content .profile-info .item {margin-bottom:5px;}
    .popup-window-myinfo .inner .content .profile-info .item .title {font-size:16px;width:60px;}
    .popup-window-myinfo .inner .content .profile-info .item .profile-input,
    .popup-window-myinfo .inner .content .profile-info .item .value {width: calc(100% - 75px);font-size:16px;}
}

@media (max-width: 480px) {
    .my-info .profile-image { display:block; text-align:center; height:150px;margin:0 auto;}
    .my-info .profile-image img {width:150px;}
    .my-info .profile-text {margin-top:20px;}
    .popup-window-myinfo .inner .content {padding: 40px 20px;height: unset;overflow-y: auto;}
    .popup-window-myinfo .inner .content .profile-info {width: 100%; padding: 0 40px;}
    .popup-window-myinfo .inner .content .profile-image {display:block; margin: 0 auto 20px;}
    .popup-window-myinfo .inner .card-button {margin-top:0; padding: 5px 40px;font-size:16px; }
}

    /* ======================================= 메인 이미지 컨테이너 ======================================= */
.container-img{position: relative; width: 100%; height: 480px; margin-top: 30px;}
.container-img i.bg-img{position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; z-index: -1;}

#main-bg-swiper{position: relative; height: 100%; width: calc( 100% - 440px ); min-width: 1024px; margin: 0 auto; padding: 40px 35px;}
#main-bg-swiper i.main-bg{position: absolute; left: 50%; margin-left: -475px; display: inline-block; height: 390px; width: 575px;}
#main-bg-swiper .section{position: absolute; right: 50%; margin-right: -475px; height: 366px; top: 45px; width: 700px; background: rgba(255, 255, 255, 0.35); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); padding: 50px 65px;}
#main-bg-swiper .section .sec-wrap{position: relative; width: 100%; height: 100%; background: #FFF; padding: 35px; cursor: pointer;}
#main-bg-swiper .section .sec-wrap i.status{position: absolute; top:35px; right: 35px; width: 90px; height: 30px; line-height: 30px; border-radius: 10px; margin-left: 0; left:auto; font-size: 13px; font-weight: 700; background: #DAE9FE; color: #0569FB; text-align: center;}
#main-bg-swiper .section .sec-wrap h2.title{display: inline-block; font-size: 30px; font-family: SebangGothic, serif; font-weight: 700; position: relative; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 90px);}
#main-bg-swiper .section .sec-wrap h2.title .level{display: inline-block; width:50px;height:20px; background-color: #5F7DFF;border-radius: 8px;vertical-align:middle;color:#fff;font-size:11px;line-height:20px;text-align:center;}

#main-bg-swiper .section .sec-wrap button{position: absolute; right: 35px; bottom: 20px; width: 84px; height: 84px; border-radius: 42px; word-break: keep-all; padding: 20px 5px; font-size: 15px; font-weight: 500;}#main-bg-swiper .section .sec-wrap{position: relative; width: 100%; height: 100%; background: #FFF; padding: 35px; cursor: pointer;}

#store-area .search-bar {padding:60px 0 30px;}
#store-area .input.search {border:1px solid #ccc;border-radius:5px;padding:10px 70px 10px 20px;height:50px;width:100%;}
#store-area .with-search-input {float:right;position: relative;height:50px;width:50px; top:-50px;}

.store-count {padding:10px 0;}
.store-list {display: block; width:100%; margin-top:20px;}
.store-item {display: inline-block;overflow:hidden;width:20.5%;margin-right: calc(6% - 5px);margin-bottom:50px;}
.store-item:nth-child(4n) {margin-right:0;}
.store-item:hover {color:#646464;cursor:pointer;}
.store-item .image img {height:200px;overflow:hidden;border-bottom-right-radius:20px;}
.store-item .image img {width:100%;height:200px;object-fit:cover;}
.store-item .title {font-weight:500;padding:10px 0;margin-top:10px;}
.store-item .address {font-size:0.9em;}
.store-location-map {width:100%;height:400px;margin: 50px 0 100px;}
.store-location-map .map-info {font-size:15px;padding:10px;width:320px;}

.store-contents {padding:50px 0;width:100%; max-width:1040px;margin:0 auto;}
.store-contents h3 {font-size:1.5em;border-bottom:2px solid #333;height:50px;}
.store-detail {margin:50px 0;display:flex;justify-content: space-between;}
.store-detail .image-window {display:inline-block;width:calc(50% - 40px);overflow:hidden;}
.store-detail .image-window .thumbnail {width:100%;height:350px;object-fit:cover;}
.store-detail .image-window .gallery {width:100%;height:80px;padding:20px 0;}

.store-detail .info-window {display:inline-block;width:calc(50% - 20px);margin-left:50px;}
.store-detail .info-window .title {font-size:1.8em;font-weight:600;margin-bottom:20px;}
.store-detail .info-window .info {color:#5E5E5E;padding-bottom:30px;margin-bottom:20px;border-bottom:1px solid #ddd;line-height:1.4;word-break: break-word;}
.store-detail .info-window .sub-item {margin-top:10px;font-size:1em;padding-left:100px;}
.store-detail .info-window .sub-item dt{text-align:left;width:100px;}


#main-bg-swiper .section .store-wrap{position: relative; width: 100%; height: 100%; background: #FFF; padding: 35px; cursor: pointer;}
#main-bg-swiper .section .store-wrap i.status{position: absolute; top:35px; right: 35px; width: 90px; height: 30px; line-height: 30px; border-radius: 10px; margin-left: 0; left:auto; font-size: 13px; font-weight: 700; background: #DAE9FE; color: #0569FB; text-align: center;}
#main-bg-swiper .section .store-wrap h2.title{display: inline-block; font-size: 30px; font-family: SebangGothic, serif; font-weight: 700; position: relative; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
#main-bg-swiper .section .store-wrap div.info{display: -webkit-box;font-size: 0.9em;color:#747474; margin-bottom: 15px;text-overflow: ellipsis;overflow: hidden;width: calc(100% - 90px);height:65px;line-height:21px;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}
#main-bg-swiper .section .store-wrap .sub-info {display:block;width:calc(100% - 90px);padding:0;min-height: inherit;}
#main-bg-swiper .section .store-wrap .sub-info dt {position:inherit;width:80px;margin:0;padding:0;text-align:left;vertical-align:top;}
#main-bg-swiper .section .store-wrap .sub-info dd {position:inherit;display: inline-block;width:calc(100% - 90px);margin:0;padding:0;word-break: keep-all;}
#main-bg-swiper .section .store-wrap button{position: absolute; right: 35px; bottom: 20px; width: 84px; height: 84px; border-radius: 42px; word-break: keep-all; padding: 20px 5px; font-size: 15px; font-weight: 500;}


.swiper-next-btn{position: absolute; width: 25px; height: 38px; top:50%; margin-top: -19px; right: 5px; background: url("../img/icon/main_arrow_right.svg") no-repeat center/cover; z-index: 1; cursor: pointer;}
.swiper-next-btn:hover{background-image: url("../img/icon/main_arrow_right_hover.svg");}
.swiper-prev-btn{position: absolute; width: 25px; height: 38px; top:50%; margin-top: -19px; left: 5px; background: url("../img/icon/main_arrow_left.svg") no-repeat center/cover; z-index: 1; cursor: pointer;}
.swiper-prev-btn:hover{background-image: url("../img/icon/main_arrow_left_hover.svg");}

.swiper-next-btn2{position: absolute; width: 50px; height: 50px; top:50%; margin-top: -25px; right: 20px; background: url("../img/icon/icon_btn_next2.png") no-repeat center/cover; z-index: 1; opacity: 0.8; cursor: pointer;}
.swiper-prev-btn2{position: absolute; width: 50px; height: 50px; top:50%; margin-top: -25px; left: 20px; background: url("../img/icon/icon_btn_prev2.png") no-repeat center/cover; z-index: 1; opacity: 0.8; cursor: pointer; }

.swiper-next-btn3{position: absolute; width: 25px; height: 25px; top:50%; margin-top: -12px; right: 0; background: url("../img/icon/icon_btn_next2.png") no-repeat center/cover; z-index: 1; cursor: pointer;}
.swiper-prev-btn3{position: absolute; width: 25px; height: 25px; top:50%; margin-top: -12px; left: 0; background: url("../img/icon/icon_btn_prev2.png") no-repeat center/cover; z-index: 1; cursor: pointer;}

.swiper-next-btn4{position: absolute; width: 25px; height: 25px; top:50%; margin-top: -12px; right: 0; background: url("../img/icon/icon_btn_next2.png") no-repeat center/cover; z-index: 1; cursor: pointer;}
.swiper-prev-btn4{position: absolute; width: 25px; height: 25px; top:50%; margin-top: -12px; left: 0; background: url("../img/icon/icon_btn_prev2.png") no-repeat center/cover; z-index: 1; cursor: pointer;}
/* ======================================= 컨테이너 및 섹션 ======================================= */
/* 내부 1024 컨테이너 */
.container{position: relative; width: calc( 100% - 440px ); min-width: 1024px; }
.container.full{width: 100%;padding:0;}
.container.fix{width: 1024px; display: flex; flex-flow: row wrap; justify-content: flex-start;}

.container.left{width: 1024px; min-width: 0; padding-left: 35px;  padding-right: 405px;}
.container.right{position: absolute; top:0; bottom: 0; left: 50%; right: 0; margin-left: 135px; min-width: 0; width: 370px; padding: 30px 0; z-index: 2;}
.container.right .sticky_area{position: -webkit-sticky; position: sticky; top:40px; width: 100%; height: 660px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); margin-top: 175px; padding: 15px 30px; background: #FFF;}
.container.member {max-width:800px;background-color:#fff;margin:0 auto;padding:60px 40px;min-width:300px;}

.program-img{position: relative; width: 100%; height: 410px; margin-top: 30px; overflow: hidden}
.program-map{position: relative; width: 100%; height: 410px; margin-top: 30px;}

/* 내부 행사 리스트 컨테이너 */
.section-co{position: relative;  min-height: 300px;   width: 100%; padding-top: 30px;}
.section-co.swiper{padding-top: 30px;}
.section-co .swiper-wrapper{height: auto;}

.section-co .flexContent{display: flex; flex-flow: row wrap; justify-content: flex-start; width: calc(100% + (100% - (270px * 5)) / 4); position: relative; left: 50%; transform: translate(-50%,0);}
.section-co .flexContent .flex-co{width: 20%;}

.section-co .flexContent.small{width: calc(100% + (100% - (270px * 3)) / 2);}
.section-co .flexContent.small .flex-co{width: 33.33333%;}

.section-box{position: relative; width: 700px; min-height: 190px; margin: 4px auto 15px; background: #FFF; padding: 35px; }



.title-btn-section{position: relative; font-size: 16px; height: 30px; line-height: 30px; display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 0 20px; margin-bottom: 20px;}
.title-btn-section .btn-area{line-height: 0;}




dl{display: block; position: relative; width: 100%; padding-left: 115px; font-size: 15px; margin-bottom: 10px; min-height: 30px;}
dl > dt{font-weight: 700;  display: inline-block; width: 115px; text-align: center; position: absolute; left: 0; color: #333; padding:0 10px; word-break: keep-all;}
dl > dd{position: relative; font-weight: 400; color: #5E5E5E; width: 100%; padding-right: 10px; word-break: keep-all;}
dl > dt.left{text-align: left;}
dl > dd.right{text-align: right;}
dl > dd.full{margin: 20px 0  20px -115px; width: calc( 100% + 115px ); padding-left: 10px;}

dl.explain{font-size: 20px; margin-bottom: 20px;  padding-left: 150px; line-height: 30px; min-height: 40px;}
dl.explain > dt{width: 130px; text-align: left; left:20px; top: 1px; }

.info-box{position: relative; padding: 12px 20px 12px 40px; background: #F5F5F5; color: #5E5E5E; font-size: 16px; font-weight: 400; text-align: left; border: 1px solid #D9D9D9; border-radius: 10px;}
.info-box:before{content: "i"; font-size: 10px; position: absolute; width: 14px; height: 14px; top: 15px; left:15px; border-radius: 7px; border: 1px solid #5F7DFF; color: #5F7DFF; text-align: center;}
.info-box span{color: #5F7DFF; font-weight: 700;}
.info-box.text{border:none; background: #FFF;}

/* ======================================= 행사 컨텐츠 상자 ======================================= */
.content-box{position: relative; width: 230px; height: 360px; border: 1px solid #D9D9D9; border-radius: 20px; margin: 0 auto 30px; text-align: center; cursor: pointer;}
.content-box .top{position: relative; height: 192px; width: 100%;}
.content-box .top i.content-bg{display: inline-block; width: 100%; height: 100%; }
.content-box .top i.content-bg img{border-radius: 20px 20px 0 0; z-index: -1;}
.content-box .top .content-title{position: absolute; top:80px; line-height: 30px; width: 100%; text-align: center; color: #FFFF; font-size: 20px; font-family: SebangGothic, serif; font-weight: 500; padding:0 5px; word-break: keep-all;}
.content-box .top .btn_array{position: absolute; bottom: 0;}

.content-box .middle{position: absolute; top: 192px; height: 22px; width: 100%; background: rgba(0,0,0,.4); z-index: 1; line-height: 18px;}
.content-box .middle .icon-date{display: inline-block; width: 9px; height: 10px; background: url("../img/icon/icon_date.png") no-repeat center/cover; vertical-align: middle; margin-right: 5px;}
.content-box .middle span{font-size: 12px; color: #FFF; vertical-align: middle;}

.content-box .bottom{position: relative; height: calc( 100% - 192px ); width: 100%; padding-top: 42px; border-radius: 0 0 20px 20px;}
.content-box .bottom.full{padding-top: 10px;}
.content-box .bottom h4{font-weight: 700; padding:0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 25px;}
.content-box .bottom h5{padding: 0 10px;}
.content-box .bottom button{border-radius: 21px; margin-bottom: 10px; font-size: 15px; font-weight: 500;}

.content-box:hover > .bottom{background: #5F57F8;}
.content-box:hover > .bottom h4, .content-box:hover > .bottom h5{color: #FFF;}
.content-box:hover > .bottom button{background: #FFF; color: #333;}

/* ======================================= 팝업 윈도우 ======================================= */
.popup-window{position: fixed; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,.4); visibility: hidden; opacity: 0; z-index: -1; -webkit-transition: all 0.3s; transition: all 0.3s;}
.popup-window.active{visibility: visible; opacity: 1; z-index: 99;}
.popup-window .inner{position: absolute; width:600px; height: 600px;  top:50%; margin-top: -300px; left:50%; margin-left: -300px; background: #FFF; border-radius: 10px; padding: 30px; overflow-y: scroll;}
.popup-window .inner button.close{position: absolute; top:30px; right: 30px; width: 25px; height: 25px; background: #5F7DFF; color: #FFF; border-radius: 15px; font-size: 14px; font-weight: 100; text-align: center;}
.popup-window .inner button.close:before{content: "\2715";}

.popup-window .inner .contents{position: relative; width: 100%; height: calc(100% - 66px); overflow: hidden;}
.popup-window .inner .contents .co-box{ position: absolute; left: 50%; margin-left: -160px; top: 10px; width: 320px; height: 450px; box-shadow: 2px 2px 9px 2px rgba(51, 51, 51, 0.15); border-radius: 40px;}
.popup-window .inner .contents .co-box .title{text-align: center; border-radius: 40px 40px 0 0; background: #2C323F; height: 60px; color: #FFF; line-height: 60px; margin-bottom: 20px;}
.popup-window .inner .contents .co-box .qrBox{width: 180px; height: 180px; margin: 20px auto; background: #8F8F8F;}

.popup-window .inner .contents .co-box .co-text{height: auto; padding: 0 30px; line-height: 30px; word-break: keep-all;}
.popup-window .inner .contents .co-box .line{width: 180px; border-bottom: 2px solid #977DFF; margin: 40px 0 30px 70px;}
.popup-window .inner .contents .co-box .cer_logo{position: absolute; bottom: 10px; width: 180px; left: 50%; margin-left: -90px; height: 45px; font-size: 18px; font-family: SebangGothic, serif; font-weight: 500; line-height: 45px; text-align: center; cursor: pointer;}
.popup-window .inner .contents i.reviews_point{display: inline-block; height: 100%; cursor: pointer;}
.popup-window .inner .contents i.reviews_point img{height: auto; object-fit: none;}
.popup-window .inner .contents textarea{border-radius: 5px; border: 1px solid #D9D9D9; padding: 10px; margin-top: 10px;}
.popup-window .inner .contents .review_add{background: #34495E; color: #FFF; font-size: 12px; padding: 5px 30px; border-radius: 3px;}


.popup-window-licence{position: fixed; width:100%;height:100%; top:0; left:0; background: rgba(0,0,0,.4); visibility: hidden; opacity: 0; z-index: -1; -webkit-transition: all 0.3s; transition: all 0.3s;}
.popup-window-licence.active{visibility: visible; opacity: 1; z-index: 99;}
.popup-window-licence .inner{position: absolute; width:600px; height: 560px;  top:50%; left:50%; background: #FFF; overflow-y: scroll; max-width:100%; transform: translate(-50%, -50%);}
.popup-window-licence .inner .header{height:40px;padding:10px 20px;background-color: #5F57F8;color:#ffffff;font-weight:500;}
.popup-window-licence .inner button.close{position: absolute; top:5px; right: 5px; width: 30px; height: 30px;color: #FFF;font-size: 15px;font-weight:600;text-align: center;}
.popup-window-licence .inner button.close:before{content: "\2715";}
.popup-window-licence .inner .licence-card{position: relative; width: 430px; height: 280px; overflow: hidden; margin:80px auto 40px; background-image: url("../img/icon/license_78910bg_card.png");}
.popup-window-licence .inner .licence-card .title{height:40px; line-height:40px; text-align:center;color:#fff;}
.popup-window-licence .inner .licence-card .content{height:165px;padding:20px 50px;color:#3A3A3A;margin-top:20px;}
.popup-window-licence .inner .licence-card .content .badge{display:inline-block; height:125px; width:100px; background:url("../img/icon/bicycle-level/10.svg") 0px 0px /100px no-repeat;}
.popup-window-licence .inner .licence-card .content .userinfo{display:inline-block; width:calc(100% - 105px);vertical-align:top;font-size:0.9em;padding-left: 20px;}
.popup-window-licence .inner .licence-card .content .username{font-size:1.1em;font-weight:500;}
.popup-window-licence .inner .licence-card .content .email{margin-bottom: 14px;white-space:nowrap;text-overflow: ellipsis;}
.popup-window-licence .inner .licence-card .content .program-info{margin-bottom: 8px;white-space:nowrap;text-overflow: ellipsis;}
.popup-window-licence .inner .licence-card .content .program-info .strong{font-weight:500;display:inline-block;width:80px;}
.popup-window-licence .inner .licence-card .stamp{height:20px;text-align:center;background: url("../img/icon/logo_license_78910_card.svg") 50% 0px no-repeat;margin-top:10px;}
.popup-window-licence .inner .card-button{text-align:center;margin:40px 0;padding:10px 40px;height:45px;border:1px solid #333;line-height:25px;}
.popup-window-licence .inner .text-center{text-align:center;}

.popup-window-cert{position: fixed; width:100%;height:100%; top:0; left:0; background: rgba(0,0,0,.4); visibility: hidden; opacity: 0; z-index: -1; -webkit-transition: all 0.3s; transition: all 0.3s;}
.popup-window-cert.active{visibility: visible; opacity: 1; z-index: 99;}
.popup-window-cert .inner{position: absolute; width:600px; height: 750px;  top:50%; left:50%; background: #FFF; overflow-y: scroll;max-width:100%; transform: translate(-50%, -50%);}
.popup-window-cert .inner .header{height:40px;padding:10px 20px;background-color: #5F57F8;color:#ffffff;font-weight:500;}
.popup-window-cert .inner button.close{position: absolute; top:5px; right: 5px; width: 30px; height: 30px;color: #FFF;font-size: 15px;font-weight:600;text-align: center;}
.popup-window-cert .inner button.close:before{content: "\2715";}

.popup-window-cert .inner .licence-card{position: relative; width: 480px; height: 680px; overflow: hidden; margin:40px auto;border:1px solid #ddd;background: url("../img/icon/license_bg_testimonial.png") 15px 25px no-repeat;}
.popup-window-cert .inner .licence-card .content{height:465px;padding:50px;color:#3A3A3A;margin-top:25px;text-align:center;}
.popup-window-cert .inner .licence-card .content .badge{display:block; height:125px; width:100%; background:url("../img/icon/bicycle-level/10.svg") 50% 0px /100px no-repeat;}
.popup-window-cert .inner .licence-card .content .username{font-size:1.1em;font-weight:500;margin-top:15px;}
.popup-window-cert .inner .licence-card .content .email{margin-bottom: 30px;white-space:nowrap;text-overflow: ellipsis;}
.popup-window-cert .inner .licence-card .content .program-info{margin-bottom: 8px;white-space:nowrap;text-overflow: ellipsis;}
.popup-window-cert .inner .licence-card .content .cert-program{margin-top:20px;margin-bottom: 40px;white-space:nowrap;text-overflow: ellipsis;font-weight:normal;}

.popup-window-cert .inner .card-button{text-align:center;margin:20px 0;padding:10px 40px;height:45px;border:1px solid #333;line-height:25px;}
.popup-window-cert .inner .text-center{text-align:center;}


@media (max-width: 767px) {
    .popup-window-cert .inner .content {padding: 50px 40px;}

}

@media (max-width: 480px) {
    .popup-window-cert .inner .content {padding: 40px 20px;height: unset;overflow-y: auto;}

}


#service-stipulate,#privacy-stipulate {display: none;background-color:#FFF;max-width:600px;max-height:75vh;position:fixed;overflow-y:scroll;border:1px solid #888;}
.stipulate-header {position:fixed; height:50px;padding:10px;background-color:#5F7DFF;color:#fff;text-align:right;width:80px;}
.stipulate-form {border:1px solid #ddd;font-family: '굴림', 'gulim';font-size:11pt;line-height:1.4;margin:30px 20px 50px;}
.privacy-head { font-size: 13pt; font-weight: bold; margin-top: 50px; }
.privacy-chart { font-size: 11pt; font-weight: bold; line-height: 200%; padding: 5px; }
.privacy-chart a { color: #888; text-decoration: none; }
.privacy-chart a::after { color: #888; text-decoration: none; }
.privacy-chart a:hover { color: #000; text-decoration: none; }
.privacy-context { border-top: 1px dotted #aaa; margin-top: 40px; }
.privacy-subtitle { color: #444; font-size: 13pt; font-weight: bold; margin: 30px 10px 15px; }
.privacy-subtitle-subcontext { color: #444; font-size: 10pt; margin: 0 10px; }
.privacy-title { margin: 20px; padding: 20px; text-align: center; }
.privacy-revision { margin: 10px 20px; text-align: right; }
.privacy-chart { margin: 20px 10px; }
.privacy-text { margin: 50px 10px; }
.privacy-subtext-num { margin: 10px 20px; text-indent: -15px; }
.privacy-subtext { margin: 10px; }
.privacy-subtext-desc { margin: 5px 15px; text-indent: -15px; }
.privacy-subtext-specific { font-size: 10pt; margin: 0 10px 5px; }
.privacy-subtext-table { border: 1px solid #eee; border-collapse: collapse; margin-bottom: 10px; text-indent: 0; }
.privacy-subtext-table th { background-color: #f2f2f2; padding: 10px; text-align: center; }
.privacy-subtext-table td { border: 1px solid #eee; padding: 10px 8px; }
.privacy-subtext-table-center { text-align: center; }

/* ======================================= 버튼 스타일 ======================================= */
/* 일반 버튼 */
.btn{position: relative; display: inline-block; padding: 10px 85px; font-size: 16px; font-weight: 700; background: #FFF; color: #333; border: 1px solid #5F57F8; }
.btn.normal{padding: 5px 35px;}
.btn.active{background: #5F57F8; color: #FFF;}
.btn.disable{background: #8F8F8F; color: #FFF; border: none;}

.btn-small{position: relative; display: inline-block; padding: 0 3px; font-size: 13px; background: #FFF; color: #8F8F8F; text-decoration: underline; border-radius: 3px; margin-left: 10px;}

/* 텍스트 버튼 */
.btn-text{position: relative; padding: 0 8px; font-size: 15px; background: transparent; color: #8F8F8F; line-height: 14px; height: 14px; margin-left: -5px;}
.btn-text.active{font-weight: 700; color: #333;}
/* 상태 버튼 */
.btn-status{position: absolute; padding: 5px 15px; border-radius: 10px; font-size: 13px; font-weight: 500; text-align: center;}
.btn-status.normal{position: relative; display: inline-block;}
.btn-status.rightTop{top:35px; right: 35px;}
.btn-status.leftTop{top:20px; left: 20px;}
.btn-status.standBy{background: #3c82ff; color: #FFFFFF;}
.btn-status.standBy:before{content: "참여대기";}
.btn-status.available{background: #FF5C00; color: #FFFFFF;}
.btn-status.available:before{content: "참여가능";}
.btn-status.end{background: #868686; color: #FFF;}
.btn-status.end:before{content: "참여마감";}
.btn-status.revComplete{background: #DAE9FE; color: #0569FB;}
.btn-status.revComplete:before{content: "예약완료";}
.btn-status.revEnd{background: #8F8F8F; color: #FFF;}
.btn-status.revEnd:before{content: "참여완료";}
.btn-status.revCancel{background: #FFEADF; color: #E1570B;}
.btn-status.revCancel:before{content: "예약취소요청";}
.btn-status.revCancelAccept{background: #FFEADF; color: #E1570B;}
.btn-status.revCancelAccept:before{content: "예약취소완료";}


/* 유료/무료 버튼 */
.btn-pay{position: relative; display: inline-block; width: 50px; height: 20px; border-radius: 7px; background: #5f57f8; color: #FFFFFF; text-align: center; font-size:11px;font-weight:500; padding: 4px 2px; }

/* 예약현황 */
.btn-rev{position: relative; display: inline-block; padding: 5px; background: #DAE9FE; font-size: 10px; font-weight: 700; margin-bottom: 10px;}
.btn-rev:before{content: "예약완료"; color: #0569FB;}
.btn-rev.cancel{background: #FFEADF; }
.btn-rev.cancel:before{content: "에약취소요청"; color: #E1570B;}
.btn-rev.cancelAccept{background: #FFEADF; }
.btn-rev.cancelAccept:before{content: "에약취소완료"; color: #E1570B;}
.btn-rev.end{background: #8F8F8F;}
.btn-rev.end:before{content: "참여완료"; color: #FFF;}

/* 커운트 버튼 */
.btn-count{position: relative; display: inline-block; line-height: 20px;  height: 19px; background: #FFF; padding: 0 5px 0 17px; text-align: center; font-size: 10px; font-weight: 700; margin-left: 5px;}
.btn-count:before{content: ""; width: 10px; height: 9px; background: url("../img/icon/icon_user.png"); position: absolute; top:50%; margin-top: -4.5px; left: 5px;}

/* 즐겨찾기 버튼 */
.btn-favorite{position: absolute; width: 23px; height: 21px; background: url("../img/icon/icon_favorite.png") no-repeat center/cover;}
.btn-favorite.rightTop{top:25px; right: 20px;}
.btn-favorite.available{background: url("../img/icon/icon_favorite_active.png") no-repeat center/cover;}

.btn-favorite-normal{position: relative; width: 45px; height: 45px; border-radius: 10px; margin-right: 30px; background: url("../img/icon/favorite.svg") 0px 0px /45px no-repeat;}
.btn-favorite-normal.active{background: url("../img/icon/favorite_active.svg") 0px 0px /45px no-repeat;}


.btn-close{position: absolute; top: 18px; left: 310px; width: 10px; height: 10px; background: url("../img/icon/icon_close.png") no-repeat center/cover; display: none;}
.btn-close.white{background: url("../img/icon/icon_close_white.png") no-repeat center/cover;}

/* 검색버튼 */
.btn-search{position: relative; width: 16px; height: 16px; background: url("../img/icon/search.svg") no-repeat center/cover;}

/* +/- 버튼 */
.btn-num{width: 34px; height: 34px; background: #D9D9D9; border-radius: 17px; color: #FFF;}
.btn-num:hover{background: #5F7DFF; opacity: 1;}
.btn-num.plus:before{content: "+"; font-size: 17px;}
.btn-num.minus:before{content: "-"; font-size: 17px;}

/* 버튼 어레이 */
.btn_array{position: relative; width: 100%; display: flex; flex-flow: row nowrap; padding: 10px 0;}
.btn_array.center{justify-content: center;}
.btn_array.left{justify-content: flex-start; padding-left: 10px;}
.btn_array.right{justify-content: flex-end; padding-right: 10px;}
.btn_array.vertical{display: block;}

#mobile_btn_array{position: fixed; background: #FFF; bottom: -65px; z-index: 1; display: none;}

/* ======================================= 카테고리 메뉴 스타일 ======================================= */
.by100-info-title {text-align: center;margin:50px auto;font-family:SebangGothic;font-size:2em;font-weight:600;color:#3A3A3A;padding:0 20px;word-break:keep-all;}
.by100-title-text {display:inline-block;width:200px;margin-left:-45px;background: linear-gradient(to top, rgba(98,87,248,0.5) 50%, transparent 50%);}
.by100-title-circle {display:inline-block;position:relative;left:-10px; width:45px;height:45px;border-radius:50%;background:rgba(98,87,248,0.2); }
.by100-banner {width:100%;height:270px;background:url("../img/intro_banner.png") 50% 50% no-repeat;color:#ffffff;text-align: center;}
.by100-banner-title {padding-top:85px; font-family: SebangGothic;font-weight:600;font-size: 2em;}
.by100-banner-text {margin-top:25px;font-weight:500;}
.by100-gallery {margin:80px auto;max-width:1500px;}
.by100-gallery li {display: inline-block;margin-right:5%;margin-bottom:10px;width:calc(30% - 3px);overflow:hidden;}
.by100-gallery li:nth-child(3n) {margin-right:0px;}
.by100-gallery li img {width:100%;object-fit:cover;}
.by100-information {text-align: center;margin-bottom:80px;word-break:keep-all;padding:0 20px;}
.by100-info-circle {display:inline-block;position:relative;left:-12px;top:-2px; width:35px;height:35px;border-radius:50%;background:rgba(98,87,248,0.2); }
.by100-information-text {font-size:1.1em;font-weight:500;line-height:1.5;color:#5E5E5E;max-width:500px;margin:0 auto;}
.by100-information-strong {font-size:1.4em;font-weight:600;line-height:1.5;color:#5F57F8;margin-top:45px;}
.by100-location {max-width:1500px;margin:0 auto 150px;border:1px solid #eee;}
.by100-location-map {width:100%;height: 600px;}
.kakao-map-info {width:240px;padding:10px;font-size:15px;}
.kakao-map-info .head_tooltip {margin-bottom:10px;}
.kakao-map-info a {text-decoration:none;color:#000;}
.kakao-map-info p {margin:0;font-size:13px;}
.kakao-map-info .addInfoAddr {color:#919191;font-size:12px;}
.kakao-map-info .zipcode {margin-right:10px;}
.kakao-map-info .phone {color:#288756;}
.by100-location-text {display:flex;padding:50px;margin-bottom:50px;font-size:20px;justify-content: space-between;}
.by100-location-small-text {font-size:0.8em; color: #666666;}
.by100-location-large-text {margin-top:10px;}
.by100-map-icon {padding:20px;border:1px solid #eee;margin-right:5px;border-radius:5px;}
.by100-map-icon:hover {background-color:#eee;}

/* ======================================= 카테고리 메뉴 스타일 ======================================= */
.nav{position: relative; width: 100%; border-bottom: 1px solid #D9D9D9; list-style-type: none; display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 30px 50px 0;}
.nav li{text-align: center; font-size: 18px; font-weight: 400; cursor: pointer; border-bottom:2px solid rgba(64,109,136,0); -webkit-transition: all 0.5s; transition: all 0.5s;}
.nav li:hover{border-bottom:2px solid #5F57F8;}
.nav li.active{font-weight: 700; color: #5662F5; border-bottom:2px solid #5F57F8;}
.nav li i{display: inline-block; width: 42px; height: 42px;}
.nav li i.total{background: url("../img/icon/category_ALL.svg") no-repeat center/cover;}
.nav li.active i.total{background-image: url("../img/icon/category_ALL_active.svg");}
.nav li i.training{background: url("../img/icon/category_edu.svg") no-repeat center/cover;}
.nav li.active i.training{background-image: url("../img/icon/category_edu_active.svg");}
.nav li i.tour{background: url("../img/icon/category_tour.svg") no-repeat center/cover;}
.nav li.active i.tour{background-image: url("../img/icon/category_tour_active.svg");}
.nav li i.byclean{background: url("../img/icon/category_byclean.svg") no-repeat center/cover;}
.nav li.active i.byclean{background-image: url("../img/icon/category_byclean_active.svg");}
.nav li i.education{background: url("../img/icon/category_school.svg") no-repeat center/cover;}
.nav li.active i.education{background-image: url("../img/icon/category_school_active.svg");}
.nav li a{display: block; margin-top: 10px; width: 160px; height: 40px;}

/* ======================================= 기본 스타일 쿼리 ======================================= */
/* 폰트사이즈 */
h1{font-size: 40px; font-weight: 700; color: #333; height: 60px;}
h2{font-size: 30px; font-weight: 700; color: #333; height: 50px;}
h3{font-size: 20px; font-weight: 700; color: #333; height: 40px;}
h4{font-size: 18px; font-weight: 400; color: #333; height: 36px;}
h5{font-size: 13px; font-weight: 400; color: #8F8F8F; height: 20px;}

/* 텍스트 효과 */
.center{text-align: center;}

.bold{font-weight: 700;}
.sub-style1{color: #8F8F8F; font-size: 16px; margin: 0 10px;}

.marginTopBottom-60{margin:60px 0;}
.marginTopBottom-30{margin:30px 0;}
.marginBottom-30{margin-bottom: 30px;}
.marginTop-60{margin-top: 60px;}
.marginTop-30{margin-top: 30px;}
.marginTop-20{margin-top: 20px;}

/* 보더 효과 */
.border-top{border-top: 2px solid #333;}
.border-top-gray{border-top: 1px solid #D9D9D9;}
.border-bottom{border-bottom: 2px solid #333;}
.border-bottom-gray{border-bottom: 1px solid #D9D9D9;}
.border-right{border-right: 2px solid #8F8F8F;}

/* 타이틀 스타일 */
/* 메인 - 홈 카테고리 제목 */
h1.style-1{text-align: center; margin:60px 0;}
/* 메인 - 디테일 제목 */
h1.style-2{margin-top: 114px;}
h1.style-2 span{position: relative; font-family: SebangGothic, serif; box-shadow: inset 0 -30px 0 #AFABFB;}
h1.style-2 span:before{content: ""; position: absolute; top: -30px; left: -30px; width: 60px; height: 60px; border-radius: 30px; background: #DFDDFE; z-index: -1;}
/*h1.style-2 span:after{content:""; position: absolute; width: calc( 100% + 10px); height: 50%; background: #FFD200; left: -5px; bottom: 0; z-index: -1;}*/

h5.info{padding: 0 30px; position: relative;}
h5.info:before{content: "i"; font-size: 10px; position: absolute; width: 14px; height: 14px; top: 1px; left:10px; border-radius: 7px; border: 1px solid #8F8F8F; color: #8F8F8F; text-align: center;}

span.validation{position: relative; color: #E1570B; padding-left: 36px; font-size: 10px; margin-top: 10px; display: block;}
span.validation:before{content: "i"; position: absolute; width: 12px; height: 12px; top:0; left: 20px; border-radius: 6px; color: #E1570B; text-align: center; line-height: 10px; border: 1px solid #E1570B; font-size: 10px;}

/* 이미지 흐림효과 */
.bg-blur{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(51, 51, 51, 0.7); backdrop-filter: blur(6px); z-index: 1;}

/* 이미지 투명도 */
.bg-opt{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(51, 51, 51, 0.4); border-radius: 20px 20px 0 0;}

/* datePicker 스타일 */
#datePicker .air-datepicker{border: none; width: 100%;}
#datePicker .air-datepicker-cell{width: 32px; height: 32px;}
#datePicker .air-datepicker-cell.-disabled-{color: #D9D9D9;}
#datePicker .air-datepicker-body--day-names{background: #F4F6FA; height: 26px; border-radius: 13px; font-size: 15px; }
#datePicker .air-datepicker-body--day-name{height: 32px; width: 32px; color: #5E5E5E;}
#datePicker .air-datepicker-body--day-name:first-child{color: #E1570B;}
#datePicker .air-datepicker-body--cells.-days-{font-size: 15px; }
#datePicker .air-datepicker-cell.-selected-{background: #5F7DFF; color: #FFF; border-radius: 16px;}


/* input 스타일 */
input.style-1{position: relative; width: 100%; height: 45px; line-height: 45px; border: 1px solid #D9D9D9; font-size: 16px; color: #333; padding: 0 15px;}
input.style-1.sub-style1{width: calc( 100% - 10px );}
input[type="text"].style-1:disabled{background: #EFEEFE; color: #8F8F8F;}
input[type="text"].style-1:read-only{background: #EFEEFE; color: #8F8F8F;}

input::placeholder{color: #8F8F8F; font-family: NotoSansKR, sans-serif; font-size: 13px; font-weight: 400;}
input::-webkit-input-placeholder {color: #8F8F8F; font-family: NotoSansKR, sans-serif; font-size: 13px; font-weight: 400;}


/* 체크박스 */
input[type="checkbox"]{display: none;}
.checkBox + label{display: inline-block; position: relative; cursor: pointer;}
.checkBox + label:before{content: ""; display: inline-block; width: 18px; height: 18px; line-height: 18px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: #E5E5E5; border-radius: 3px;}
.checkBox:checked + label:before{content: "\2713"; color: #FFF; font-size: 14px; text-decoration: none; background: #5F7DFF;}

/* 셀렉트박스 */
select.style-1{position: relative; width: 100%; height: 45px; line-height: 45px; border: 1px solid #D9D9D9; font-size: 16px; color: #333; padding: 0 15px; background:url("../img/icon/icon_arrow_down.png") no-repeat 95% 50%; background-size: 11px 6px;}
select.style-1.sub-style1{width: calc( 100% - 10px );}

/* textarea 스타일 */
textarea{display: inline-block; width: 100%; resize: none; line-height: 40px;}
textarea::placeholder{color: #D9D9D9; font-family: NotoSansKR, sans-serif; font-size: 13px; font-weight: 400;}
textarea::-webkit-input-placeholder {color: #D9D9D9; font-family: NotoSansKR, sans-serif; font-size: 13px; font-weight: 400;}
textarea:focus{outline: none;}


/* Pagination */
.pagination {display: flex; justify-content:center; line-height:25px; padding:10px; color:#3a3a3a;}
.pagination .page-item-arrow {width:40px;text-align:center;}
.pagination .page-item-image {height:25px;}
.pagination .page-item-arrow.active .page-item-image:hover {fill:#5F7DFF; filter: invert(44%) sepia(53%) saturate(1756%) hue-rotate(210deg) brightness(98%) contrast(105%);}
.pagination .current-page {color:#5F57F8;}

/* ======================================= 반응형 미디어 쿼리 ======================================= */
@media all and (min-width: 2560px) {

    .section-co .flexContent{width: calc(100% + (100% - (335px * 6)) / 5);}
    .section-co .flexContent .flex-co{width: 16.666666%;}

}

@media all and (min-width: 1024px) and (max-width: 1919px) {

    .section-co .flexContent{width: calc(100% + (100% - (270px * 4)) / 3);}
    .section-co .flexContent .flex-co{width: 25%;}

}


/* 테블릿 */
@media all and (min-width: 768px) and (max-width: 1023px) {
    .container{width: 100%; min-width: 768px; padding: 20px;}

    #logo{left:50px;}
    #nav-weather {display: none;}
    #nav-main{right: 25px;}

    #main-bg-swiper{width: 100%; min-width: 0;}
    #main-bg-swiper i.main-bg{left: 0; margin-left: 0;}
    #main-bg-swiper .section{right: 0; margin-right: 0;}

    .store-item {width:30%;margin-right: calc(5% - 5px);}
    .store-item:nth-child(4n) {margin-right:calc(5% - 5px);}
    .store-item:nth-child(3n) {margin-right:0;}

    .nav li a{width: auto;}

    .section-co .flexContent{width: calc(95% + (100% - (270px * 3)) / 2);}
    .section-co .flexContent .flex-co{width: 33.33333%;}

    /*.section-co .flexContent.small{width: calc(100% + (100% - (270px * 2)) / 1);}*/
    .section-co .flexContent.small{width: 100%;}
    .section-co .flexContent.small .flex-co{width: 50%;}

    .container.left{width: 100%; padding: 0 30px;}
    .container.right{position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin-left: 0; width: auto; padding: 0; background: rgba(0,0,0,.7); opacity: 0; visibility: hidden;}
    .container.right .sticky_area{position: absolute; top:50%; height: 660px; margin-top: -330px; width: 370px; left:50%; margin-left: -185px;}
    .btn-close{display: block;}
    .container.right.active{visibility: visible; opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s;}
    .container.right.active .btn-favorite-normal{display: none;}

    #mobile_btn_array{display: flex; visibility: visible; opacity: 1; bottom: 0; -webkit-transition: all 0.5s; transition: all 0.5s;}
    #mobile_btn_array.disable{visibility: hidden; opacity: 0; bottom: -65px;}

    .section-box{width: 100%;}

}

/* 모바일 */
@media all and (max-width: 767px) {

    h1{font-size: 18px; height: 25px;}
    h2{font-size: 15px; height: 23px;}
    h3{font-size: 13px; height: 22px;}
    h4{font-size: 11px; height: 21px;}
    h5{font-size: 10px; height: 20px;}
    #nav-weather {display: none;}
    #main_top{height: 50px;}
    #main_body{display: block;}
    #main_bottom{font-size:18px;}

    #my_left{display: none;}
    #my_body{width: 100%; padding: 20px 0 0;}


    .container{width: 100%; min-width: 0; padding: 0 20px;}
    .container.fix{width: auto;}
    .container.left{width: 100%; padding: 316px 20px 0;}
    .container.right{position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin-left: 0; width: auto; padding: 0; background: rgba(0,0,0,.6); visibility: hidden; opacity: 0; }
    .container.right .sticky_area{position: absolute; top:50%; height: 660px; margin-top: -330px; width: 370px; left:50%; margin-left: -185px; }
    .container.right .sticky_area h2{font-size: 30px; height: 50px;}
    .container.right .sticky_area h4{font-size: 16px; height: 36px;}
    .btn-close{display: block;}

    .store-item {width:100%;margin-right:0;}
    .store-item:nth-child(4n) {margin-right:0;}

    .container.right.active{visibility: visible; opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s;}
    .container.right.active .btn-favorite-normal{display: none;}

    #mobile_btn_array{display: flex; visibility: visible; opacity: 1; bottom: 0; -webkit-transition: all 0.5s; transition: all 0.5s;}
    #mobile_btn_array.disable{visibility: hidden; opacity: 0; bottom: -65px;}


    #logo{left:50%;margin-left:-40px;background-size: contain;height:30px;width:80px;margin-top:-15px;}
    #nav-main{display: none;}

    #nav-mobile{display: inline-block;}
    #search{display: inline-block;}

    #com-info-container{flex-flow: column nowrap;}
    #com-info-container i{width: 80px; height: 19px; margin: 0 auto;}
    #com-info-container .com-info{margin-top: 15px; width: 100%;}
    #com-info-container .com-info p{margin-bottom:10px;}
    #com-info-container .com-sns {margin-top:10px;}

    .container-img{height: 194px; margin-top: 0;}

    #main-bg-swiper{width: 100%; min-width: 0; padding:15px 30px;}
    #main-bg-swiper i.main-bg{display: none;}
    #main-bg-swiper .section{position: relative; right: auto; top: auto; padding: 18px; margin-right: 0; width: 100%; height: 100%;}
    #main-bg-swiper .section .sec-wrap{padding: 10px 15px;}
    #main-bg-swiper .section .sec-wrap h2.title{font-size: 15px;}
    #main-bg-swiper .section .sec-wrap button{display: none;}

    #main-bg-swiper .section .store-wrap{padding: 15px 30px; width:100%;}
    #main-bg-swiper .section .store-wrap h2.title{font-size:15px;margin-bottom:0;}
    #main-bg-swiper .section .store-wrap div.info{width:100%;margin-bottom: 10px;font-size:13px;height:30px;line-height:15px;-webkit-line-clamp: 2;}

    #main-bg-swiper .section .store-wrap .sub-info {width:100%;}
    #main-bg-swiper .section .store-wrap .sub-info dt {width:60px;}
    #main-bg-swiper .section .store-wrap .sub-info dd {width:calc(100% - 70px);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}

    #main-bg-swiper .section .store-wrap button{display:none;}

    .swiper-next-btn{width: 15px; height: 23px; margin-top: -11.5px; right: 10px;}
    .swiper-prev-btn{width: 15px; height: 23px; margin-top: -11.5px; left: 10px;}

    .btn{font-size: 13px;}
    .btn-status{font-size: 10px; border-radius: 6px; padding: 5px 8px;}
    .btn-status.rightTop{top:6px; right: 10px;}

    dl{font-size: 10px; min-height: 10px; margin-bottom: 8px; padding-left: 75px;}
    dl > dt{width: 75px;}
    dl > dd.full{margin: 10px 0  10px -75px; width: calc( 100% + 75px ); padding-left: 10px;}

    .nav{padding: 10px 10px 0;}
    .nav li{font-size: 12px;}
    .nav li i{display: none;}
    .nav li a{width: auto; height: 25px;}

    .section-co{border-top:none; min-height: 200px; }
    /*.section-co{border-top:none; min-height: auto;}*/
    h1.style-1{text-align: left; margin: 20px 0 0;}
    .title-btn-section{height: 20px; margin-bottom: 0; padding: 0;}
    .title-btn-section .title-area{visibility: hidden;}
    .title-btn-section .btn-text{font-size: 10px; height: 10px; line-height: 10px;}


    .section-co.swiper{padding-top: 0;}
    .section-co.swiper .content-box{margin: 0;}

    .section-co .flexContent{width: 100%;}
    .section-co .flexContent .flex-co{width: 100%;}

    .section-co .flexContent.small{width: 100%;}
    .section-co .flexContent.small .flex-co{width: 100%;}

    /*.content-box{width: calc(100% - 50px); margin: 0 20px; border-radius: 0; height: 160px;}*/
    .content-box{width: 100%; margin:0 0 20px 0; border-radius: 0; height: 160px;}
    .content-box .top{height: 84px;}
    .content-box .top .content-title{top:35px; font-size: 15px; line-height: 15px;}
    .content-box .top i.content-bg img{border-radius: 0;}
    .content-box .middle{top:84px;}
    .content-box .bottom{height: calc( 100% - 84px ); padding: 30px 15px 0; text-align: left; border-radius: 0;}
    .content-box .bottom .btn_array{display: none;}
    .content-box .bottom .btn_array.vertical{display: flex; justify-content: space-between; padding: 0; margin: 0 -16px; width: calc(100% + 32px);}
    .content-box .bottom .btn_array.vertical button{font-size: 10px; margin: 0; border-radius: 0; border: 1px solid #D9D9D9; width: 100%;}

    .btn-status.leftTop{top:10px; left: 15px;}

    .btn-favorite{width: 19px; height: 17px;}
    .btn-favorite.rightTop{top:15px; right: 15px;}

    .btn-small{font-size: 10px;}

    .program-img{position: absolute; left:0; right: 0; height: 286px; top: 0; margin-top: 0;}
    .program-map{height: 250px;}

    h1.style-2{margin: 15px 10px 0;}
    dl.explain{font-size: 13px; padding-left: 105px;}
    dl.explain > dt{width: 120px; left: 5px;}

    .section-box{width: 100%; padding: 20px;}
    .info-box{font-size: 13px;}

    .sub-style1{font-size: 13px;}

    input.style-1{font-size: 13px; height: 30px; line-height: 30px;}
    select.style-1{font-size: 13px; height: 30px; line-height: 30px;}

    #search_area{height: 100%; background: #F5F5F5;}
    #search_area .search-bar{width: 100%;}
    #search_area span{top: 75px; left: 50%; margin-left: -60px; color: #333;}
    #search_area select{top:180px; left:50px; right: 50px; font-size: 13px;}
    #search_area input{top:235px; left:50px; right: 50px; width: auto; font-size: 13px;}
    #search_area input::placeholder{font-size: 13px;}
    #search_area input::-webkit-input-placeholder {font-size: 13px;}
    #search_area button{top: 310px; background: #5F7DFF; width: auto; height: 45px; left:50px; right: 50px; border-radius: 10px;}
    #search_area button:after{content: "검색"; font-size: 13px; color: #FFF;}
    #search_area i{ top: -5px; right: 25px; background: url("../img/icon/icon_close.png") no-repeat center/cover;}

    .bg-opt{border-radius: 0;}

    h1.style-2 span{box-shadow: inset 0 -15px 0 #AFABFB;}


    .popup-window .inner{width: 300px; height: 400px; margin-left: -150px;  margin-top: -200px;}
    .popup-window .inner button.close{width: 20px; height: 20px; top: 25px; font-size: 12px;}
    .popup-window .inner .contents{height: calc( 100% - 51px);}
    .popup-window .inner .contents .co-box{width: 180px; height: 270px; margin-left: 30px; left: 0; border-radius: 20px;}
    .popup-window .inner .contents .co-box .title{height: 40px; line-height: 40px; border-radius: 20px 20px 0 0;}
    .popup-window .inner .contents .co-box .qrBox{width: 100px; height: 100px; margin: 10px auto;}
    .popup-window .inner .contents .co-box .co-text{padding: 0 20px; line-height: 15px; margin-top: 0;}
    .popup-window .inner .contents .co-box .line{width: 120px; border-bottom: 2px solid #977DFF; margin: 0 0 20px 30px;}
    .popup-window .inner .contents .co-box .cer_logo{font-size: 12px; bottom: 0;}
    .popup-window .inner .contents .co-box .cer_logo:before{left: 45px; top: 7px; width: 22px; height: 22px;}
    .popup-window .inner .contents textarea{line-height: 30px; font-size: 11px; margin-top: 5px;}
    .popup-window .inner .contents textarea::placeholder{font-size: 11px;}
    .popup-window .inner .contents textarea::-webkit-input-placeholder {font-size: 11px;}
}

@media print {
    .no-print, .no-print * {display:none !important;}
}