/* 기본 세팅 */
html{height: 100%;}
body { font-family: 'Noto Sans KR', sans-serif; word-break: keep-all; box-sizing: border-box; background-color: #fff; color: black; margin: 0 auto; letter-spacing: -0.7px;   height: 100%; display: flex; flex-direction: column; color: black;}
ul{margin-bottom: 0; padding-inline-start : 0;}
li{ list-style:none;}
a{text-decoration: none; color: black;}
a:hover{color: #8380f8;}
.word-break { word-break: keep-all;}
img { cursor: pointer;}
.relative{position: relative;}
.absolute{position: absolute;}
.ellip { display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ellip1 { display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ellip2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; height: auto; }
.ellip3{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; height: auto; }
.ls-01{letter-spacing: -1px;}
.ls-auto{letter-spacing:normal;}
.cursor{cursor: pointer;}
.img-fluid-1{width: 100%; max-width: 100%; height: auto;}
.rorate-img{ transform: rotatex( 180deg ); transition: all ease 1s; }
.rorate-img2{ transform: rotatex(360deg); transition: all ease 0.5s; }

/* 폼 */
.required::after{    content: ""; width: 7px; height: 18px; border-radius: 10px; display: inline-block; background: url(../images/required.png) no-repeat; margin-left: 5px;  background-size: contain; } 
.chk-pw1{color: #8380f8 !important; display: none; font-size: 14px;}
.chk-pw2{color: #d92742 !important; display: none; font-size: 14px;}
.pw-set{display: none;}
.term_use{width: 100%; height: 150px; padding: 10px; overflow-y: scroll; border: 1px solid #f1f1f1; background-color: #f9f9f9;}

/* 컬러 */
.cl-white{color: white !important;}
.cl-main{color: #8380f8;}
.cl-00{color: #e1e1e1;}
.cl-01{color: #aaaaaa;}
.cl-02{color: #444444;}
.cl-03{color: #555555;}
.cl-04{color: #666666;}

/* 넓이 */
.w-70{width: 70% !important;}
.w-50{width: 50% !important;}
.w-30{width: 30% !important;}
.w-20{width: 20% !important;}

/* 마진 패딩 */
.mt-6{margin-top: 4rem;}
.mb-6{margin-bottom: 4rem;}
.mb-7{margin-bottom: 5rem;}
.mb-8{margin-bottom: 6rem;}
.ml-200{margin-left: 300px;}

/* 폰트 */
.font-22{font-size: 22px;}


/* 폰트 패밀리 */
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
.noto-serif{font-family: "Noto Serif KR", serif; font-weight: 400;font-style: normal;}

/* 페이징처리 */
.page-link{color:black;  border: none; margin: 0 10px; padding: 3px 11px; text-align: center;}
.active>.page-link, .page-link.active{color: white; background-color: black; border-color: #3C28C8;}
.page-link:hover{background-color: black; color: white;}
.page-link:focus{outline:none;}


.wrap{ width: 100%; margin: 0 auto; position: relative; flex: 1;}
/* 헤더 */
.header{ width: 100%; border-bottom: 1px solid #e1e1e1;background: white; z-index: 2;}
.header.scroll{ position:fixed; top:0;}

.header_inner{display: flex; justify-content: space-between; max-width: 1600px;  margin: 0 auto; padding: 10px 30px 10px 0; align-items: center;}
.header_guide{width: 100%; height: 38px; line-height: 38px; font-size: 14px; color: white; background-color: #000000; position: relative;}
.marquee{width: calc(100vw - 50px);}
.marquee span:not(:last-of-type){margin-right: 50%;}
.top_notice_close{position: absolute; top: 9px; right: 15px; background-color: #000000;}
.header .header_inner .logo{width: 80px;}
.header .header_inner .nav{font-size: 16px; font-weight: 500;}
.header .header_inner .nav li{margin: 0 20px;}
.header .header_inner .nav_info{display: flex; position: relative;}
.header .header_inner .nav_info .login:hover{color: #8380f8;}
.header .header_inner .nav_info .login::before{content: ""; background-image: url(../images/login.svg) !important; background: no-repeat; display: inline-block; background-position: center center; width: 15px; height: 17px; margin-right: 10px;}
.header .header_inner .nav_info .login:hover::before{content: ""; background-image: url(../images/login_hover.svg) !important; background: no-repeat; display: inline-block; background-position: center center; width: 15px; height: 17px; margin-right: 10px;}
.header .header_inner .nav_info .login::after{content: "|"; font-size: 14px; font-weight: 500; color: #aaa; padding: 0 20px;}
.header .header_inner .nav_info .name a::after{content: ""; color: black;}
.header .header_inner .nav_info .point::before{content: "|"; font-size: 14px; font-weight: 500; color: #aaa; padding: 0 20px;}
.header .header_inner .nav_info .point::after{content: "|"; font-size: 14px; font-weight: 500; color: #aaa; padding: 0 20px;}
.header .header_inner .nav_info .basket::after{content: "|"; font-size: 14px; font-weight: 500; color: #aaa; padding: 0 20px;}
.header .header_inner .nav_info .point a{color: #8380f8;}
.header .header_inner .nav_info .point a::after{content: ""; color: #8380f8;}

/* 푸터 */
#footer{position: fixed; bottom: 0;}
footer{background-color: #f8f8fa; width: 100%;}
footer .f-top{border-bottom: 1px solid #f1f1f1;}
footer .f-top .f-top-inner{padding: 30px 0; max-width: 1600px; margin: 0 auto;}
footer .f-top .f-top-inner .company{color: #000;}
footer .f-top .f-top-inner .company span{font-size: 16px; font-weight: 300; color: #000; margin-left: 40px;}
footer .f-top .f-top-inner .company span a{color: #000;}
footer .f-top p{font-size: 16px; color: #000; margin-top: 20px;}
footer .f-bot{padding: 30px 0; max-width: 1600px; margin: 0 auto;}
footer .f-bot div:nth-child(1){font-size: 16px; font-weight: 300; color: #000;}
footer .f-bot div:nth-child(2){font-size: 14px; font-weight: 300; color: #aaaaaa;}

/* 헤더 모바일 */
/* 로그인 했을때 */
.nav2{ display: none;}
.mo-navbar{display: flex; justify-content: space-between; align-items: center;}
.mo-nav-bg{background-color: rgba(0, 0, 0, 0.3); width: 100%;  height: 100vh; position: fixed; top: 0; left: 0; display: none; z-index: 1;}
.mo-nav-icon{padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e1e1e1; background-color: #4373c6;}
.mo-nav-box{ background-color: white; width: 100%;height: 100vh;position: fixed;top: 0;right: 0;display: none; z-index: 2;}
.mo-nav-inner{padding: 20px;}
.nav2 .mo-nav-box .user_name{font-size: 20px; color: black; font-weight: bold;}
.nav2 .mo-nav-box .user_name:after{ content: " 님"; font-size: 18px; font-weight: 300;}
.nav2 .mo-nav-box .logout{background-color: #f7f7f6; color: #666; border-radius: 15px; font-size: 14px; padding: 5px 10px;}
.nav2 .mo-nav-box .has_point{width: 100%; background: linear-gradient(180deg, rgba(131,128,248,1) 12%, rgba(67,115,198,1) 100%); border-radius: 5px;color: white;padding: 15px 15px 12px 15px; margin-top: 1.5rem;}
.nav2 .mo-nav-box .has_point2{width: 100%; background-color: #f8f9fa; border-radius: 5px ;color: white;padding: 12px; margin-top: 1rem;}
.nav2 .mo-nav-box .m_poin{display: flex; align-items: center;}
.nav2 .mo-nav-box .m_poin2{font-size: 17px; font-weight: bold;}
.nav2 .mo-nav-box .m_poin2::after{ content: " P"; font-size: 17px; font-weight: bold;}
.nav2 .mo-nav-box .point_line{padding: 0 10px;}
.nav2 .mo-nav-box .point_line:before{content: "Ι"; font-size: 17px; font-weight: 300; margin-right: 1rem;}
.nav2 .mo-nav-box .point_line::after{content: "Ι"; font-size: 17px; font-weight: 300; margin-left: 1rem;}
.nav2 .mo-nav-box .menu_close{text-align: end;}
.nav2 .mo-nav-box .mo_menu{margin-top: 20px;}
.nav2 .mo-nav-box .mo_menu li{padding: 15px 0; font-weight: bold;}

/* 로그인 안했을때 */
.nav2 .mo-nav-box .ago_login{ font-size: 20px; color: black; font-weight: bold;}

/* 공통배너  텍스트 설정 */
#banner_bg { 
    position: relative; 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
    background: url(../images/hot_bg.jpg) no-repeat;
    background-size: cover; 
    background-position: center; 
}

.banner_bg_text{ display: flex; justify-content: space-between; position: absolute; width: 1600px; left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; }
.banner_bg_text .title{ font-family: 'GmarketSansMedium'; font-size: 48px; color: white; font-weight: bold;}
.banner_bg_text p{ font-size: 24px; font-weight: 300; line-height: 1.4; color: white; margin-bottom: 0;}

.logo_bg{
    background-image: url(../images/culture_logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 642px;
    width: 100%;
    height: 60px;
}


.banner_bg_text2{ position: absolute; width: 1600px; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.banner_bg_text2 .title{ font-family: 'GmarketSansMedium'; font-size: 48px; color: white; font-weight: bold;}
.banner_bg_text2 p{ font-size: 24px; font-weight: 300; line-height: 1.4; color: white; margin-bottom: 0;}




/* 개인정보 취급방침 */
.privacy{max-width :1600px; margin: 80px auto 40px auto; padding: 0 15px;}
.privacy .title{font-size: 36px; font-weight: 700; border-bottom: 2px solid black; padding-bottom: 2rem; text-align: center; margin-bottom: 1em;}
.privacy p{font-size: 15px; margin:0;}
.privacy h6{font-size: 18px; font-weight: 400; margin: 1.2em 0 0.9em 0;  color: #4373c6;}
.privacy ul{font-size: 15px; margin-left: 1em;}
.privacy .privacy_terms{margin: 40px auto; width: 300px;}
.privacy .terms{border-radius: 4px; border: 1px solid #e1e1e1; padding: 10px 0px; text-align: center;}
.privacy .terms::after{ content: ""; background-image: url(../images/toggle_btn.svg); display: inline-block; width: 10px; height: 10px; background-size: 10px 10px; margin-left: 10px;}
.privacy .privacy_terms .list-group{position: relative;border: none;}
.privacy .privacy_terms .list-group ul.dropdown{margin-left: 0; position: absolute; width: 300px; border: 2px solid black; z-index: 1;}
.privacy .privacy_terms .list-group ul.dropdown .list-group-item{border: none; padding: 10px;}
.list-group-item.active{background-color: #4373c6;}


/* 자주하는 질문 */
.faq-sec {width: 100%; padding: 80px 0 100px;}
.faq-sec .faq-wrap {margin: 0 auto; width: calc(100% - 320px); max-width: 1600px; min-width: 260px;}

.faq-sec .faq-tit {height: 78px; box-sizing: border-box; border-bottom: 2px solid #000; text-align: center;}
.faq-sec .faq-tit > h3 {margin-bottom: 0; line-height: 78px;}

.faq-sec .fnq-list {width: 100%; display: flex; flex-direction: column;}
.faq-sec .fnq-list-item > div {width: 100%; color: #666666;}
.faq-sec .fnq-item-top {display: flex; align-items: center; padding: 30px 0; border-bottom: 1px solid #e1e1e1; cursor: pointer; font-weight: 500;}
.faq-sec .fnq-mark {padding: 0 32px; text-align: center; font-family: "GmarketSansMedium"; font-weight: 500; transform: translateY(3px);}
.faq-sec .fnq-q-tit {display: inline-block; width: 100%; padding: 0 30px;}
.faq-sec .fnq-arr-icon {width: 78px;text-align: center;}
.faq-sec .fnq-arr-icon > img {width: 10px; transform: rotate(90deg); transition: 0.5s ease; filter: invert(38%) sepia(12%) saturate(0%) hue-rotate(267deg) brightness(98%) contrast(84%);}

.faq-sec .fnq-item-bt {overflow: hidden; align-items: center; display: flex; background-color: #f8f8f8; border-bottom: 1px solid #e1e1e1; max-height: 0; line-height: 1.4; transition: 0.5s ease; opacity: 0;}
.faq-sec .fnq-item-bt > .fnq-mark { color: #4373c6; transform: translateY(4px);}
.faq-sec .fnq-list-item.active .fnq-item-top { color: #666; transition: 0.5s ease;}
.faq-sec .fnq-list-item.active .fnq-arr-icon > img { transform: rotate(-90deg); filter: invert(63%) sepia(0%) saturate(7%) hue-rotate(215deg) brightness(86%) contrast(85%);}
.faq-sec .fnq-list-item.active .fnq-item-bt{max-height: 100%; padding: 30px 0 32px; opacity: 1;}

.faq-sec .fnq-Page-nav {margin-top: 40px; margin-bottom: 50px;}
.faq-sec .fnq-Page-nav .page-link img {transform: translateY(-2px);}

.faq-sec .bt-q-box {display: inline-flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 20px; border: 1px solid #e1e1e1; font-size: 16px;}
.faq-sec .bt-q-box > span {color: #666;}
.faq-sec .bt-q-btn {background-color: #000; border: none; white-space: nowrap; margin-left: 30px;}
.faq-sec .bt-q-btn a {display: inline-block; padding: 10px 14px;}
.faq-sec .bt-q-btn span {color: #fff;}
.faq-sec .bt-q-btn img {width: 6px; margin-left: 24px; filter: brightness(0) invert(1); transform: translateY(-1px);}

/* 이벤트페이지 */
.wrap .event-wrap { margin: 0 auto; max-width: 1600px;}
.wrap .event-wrap .event-tit-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid #e1e1e1;
    white-space : nowrap; 
    padding: 80px 0;
}

.wrap .event-wrap .event-tit-box .event-tit h2 { font-size: 40px; font-weight: bold; margin-bottom: 14px;}
.wrap .event-wrap .event-tit-box .day-box { display: flex; font-weight: 400; font-size: 18px;}
.wrap .event-wrap .event-tit-box .day-box .event-d-day { margin-right: 16px;}
.wrap .event-wrap .event-tit-box .day-box .event-d-day span { color: #8380f8; } 
.wrap .event-wrap .event-tit-box .day-box .event-period p {margin-bottom: 0; line-height: 1;}

/* 이벤트 컨텐츠 박스 */
.wrap .event-wrap .event-cont-box { width: 100%; text-align: center; margin: 60px 0 100px 0;}
.wrap .event-wrap .event-cont-img { margin: 0 auto; max-width: 860px; }


/* 모바일 메뉴 */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}
@keyframes fadeInRight2 {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

.mo-nav-bg{ animation: fadeInRight 0.8s;}
.mo-nav-box{ animation: fadeInRight2 1s;}



@media screen and (max-width:1600px){
    .header_inner{padding: 10px 30px;}
    footer .f-top .f-top-inner, footer .f-bot{ padding: 30px;}
    .banner_bg_text{width: 90%;}
    .banner_bg_text2{width: 100%; margin: 0 30px;}
    .logo_bg{width: 40vw;}

}


@media screen and (max-width: 1080px) {
    .faq-sec .faq-wrap {width: calc(100% - 160px);}
    .faq-sec .fnq-arr-icon > img {width: 8px;}
    .faq-sec .bt-q-box {font-size: 14px;}
    .ml-200{margin-left: auto;}
}



@media screen and (max-width:870px){
    .header .header_inner .nav_info .point::before{content: "|";font-size: 14px;font-weight: 500;color: #aaa;padding: 0 15px;}
    .header .header_inner .nav_info .point::after{content: "|";font-size: 14px;font-weight: 500;color: #aaa;padding: 0 15px;}
    .header .header_inner .nav_info .basket::after{content: "|";font-size: 14px;font-weight: 500;color: #aaa;padding: 0 15px;}
}


@media screen and (max-width:768px){
    .header_inner{padding: 10px 20px;}
    .marquee{ width: calc(100vw - 40px);}
    .header .header_inner .logo{width: 60px;}
    .header .header_inner .nav{display: none;}
    .header .header_inner .nav_info{display: none;}
    footer .f-top .f-top-inner{padding: 30px 20px;}
    footer .f-top .f-top-inner .company span{margin-left: 0;}
    footer .f-top p{font-size: 14px; margin-bottom: 0;}
    footer .f-bot{padding: 30px 20px;}
    .header .header_inner .nav2{display: block;}
    #footer{position: static;}

    #banner_bg{ background: url(../images/hot_mo_bg.jpg) no-repeat; height: 300px; background-size: cover; min-height: 190px; height: 39.0625vw;}
    .banner_bg_text .title{font-size: 24px;}
    .banner_bg_text p{font-size: 18px;}

    .banner_bg_text2 .title{font-size: 24px;}
    .banner_bg_text2 p{font-size: 18px;}

    .faq-sec .faq-sec{padding: 60px 0;}

    .wrap .event-wrap{margin: 20px;}
    .wrap .event-wrap .event-tit-box{padding : 0px 0px 60px 0px; margin: 35px auto;}
    .wrap .event-wrap .event-tit-box .event-tit h2 {font-size: 5.2vw; margin-bottom: 0.7rem;}
    .wrap .event-wrap .event-tit-box .day-box .event-d-day span{font-size: 16px;}
    .wrap .event-wrap .event-tit-box .day-box .event-period p{font-size: 14px;}
    .wrap .event-wrap .event-cont-box{margin: 20px 0 50px 0;}
    .wrap .event-wrap .event-cont-box p{font-size: 14px;}
}

@media screen and (max-width: 700px) {
    .faq-sec .faq-wrap {width: calc(100% - 30px);}
    .faq-sec .fnq-Page-nav {margin-top: 30px; margin-bottom: 40px;}
    .faq-sec .bt-q-box {flex-direction: column;}
    .faq-sec .bt-q-btn {margin-top: 10px; margin-left: 0;}
    .faq-sec .bt-q-btn img {margin-left: 14px;}
    .faq-sec .bt-q-box > span {text-align: center;}

    .logo_bg{background-image: url(../images/m_culture_logo.png); width: 30vw}
}

@media screen and (max-width: 540px) {
    .faq-sec .faq-tit {height: 60px;}
    .faq-sec .faq-tit > h3 {line-height: 60px; font-size: 20px;}
    .faq-sec .fnq-mark {padding : 0 20px; font-size: 15px;}
    .faq-sec .fnq-item-top {padding: 22px 0;}
    .faq-sec .fnq-list-item.active .fnq-item-bt {padding: 20px 0 21px;}
    .faq-sec .fnq-item-top > .fnq-mark {transform: translateY(2px);}
    .faq-sec .fnq-item-top > .fnq-q-tit {font-size: 15px; padding-left: 10px;}
    .faq-sec .fnq-item-bt > .fnq-q-tit {font-size: 14px; padding-left: 10px;}
    .faq-sec .fnq-arr-icon {width: 60px;}
    .faq-sec .fnq-arr-icon > img {width: 6px;}
    .faq-sec .fnq-Page-nav .prev a {margin-left: 0;}
    .faq-sec .fnq-Page-nav .page-link {margin-right: 4px;}
    .faq-sec .bt-q-box {font-size: 13px; padding: 15px 14px;}
}


@media screen and (max-width:500px){
    .header .header_inner .logo{width: 50px;}
    footer .f-top .f-top-inner .company{font-size: 16px;}
    footer .f-top .f-top-inner .company span{font-size: 14px;}
    footer .f-top p{font-size: 12px;}
    footer .f-top .f-top-inner, footer .f-bot{padding: 15px 20px;}
    footer .f-bot div:nth-child(1){font-size: 14px;}
    footer .f-bot div:nth-child(2){font-size: 12px;}

    .banner_bg_text .title{font-size: 22px; font-weight: bold;}
    .banner_bg_text p{font-size: 16px;}

    .banner_bg_text2 .title{font-size: 22px; font-weight: bold;}
    .banner_bg_text2 p{font-size: 16px;}

    .privacy .title{font-size: 28px;}
    .privacy p{font-size: 12px; margin:0;}
    .privacy h6{font-size: 15px;}
    .privacy ul{font-size: 12px;}

    .wrap .event-wrap .event-tit-box{padding : 0px 0px 30px 0px;}
    .event-tit-box{margin: 30px auto;}
    .wrap .event-wrap .event-tit-box .event-tit h2{font-size: 24px;}
}