#navbar_space{height: 75px;}
#navbar{width: 100%; position: fixed; top: 0px; left: 0px; z-index: 55; height: 0px;}
#navbar .nLayout{display: grid; height: 55px; grid-template-columns: 95px 1fr 225px 30px; padding: 0px 25px; box-sizing: border-box; align-items: center; max-width: 1100px; width: 90%; grid-gap: 20px; margin-top: 20px; background-color: var(--bg_green); border-radius: 70px;}
#navbar .nLayout > div{width: 100%;}
#navbar .nLayout .nlLogo > div{padding-bottom: 37%;}
#navbar .nLayout .nlMenu{margin-left: 15px;}
#navbar .nLayout .nlMenu > a, #navbar .nLayout .nlMenu > div{display: inline-block; position: relative;}
#navbar .nLayout .nlMenu > a:not(:last-child), #navbar .nLayout .nlMenu > div:not(:last-child){margin-right: 5px;}
#navbar .nLayout .nlMenu .nmItem{color: var(--text_base); padding: 4px 10px; border-radius: 10px;}
#navbar .nLayout .nlMenu .nmItem.active{background: var(--bg_pink); box-shadow: inset 0px 0px 0px 1px var(--bg_black);}
#navbar .nLayout .nlSearchBtn{display: none;}
#navbar .nLayout .nlSearchBtn > a > div{width: 30px; height: 30px; background: var(--bg_white); border-radius: 50px;}
#navbar .nLayout .nlSearchBtn > a > div > div{width: 15px; height: 15px; position: relative; top: 7px;}
#navbar .nLayout .nlProfile > div{width: 30px; height: 30px; cursor: pointer; border-radius: 50%; background-color: var(--bg_choco);}
#navbar .nLayout{grid-template-columns: 95px 1fr 225px;}
#navbar .nLayout > div:nth-child(4){display: none;}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg_white);
    border: 1px solid var(--bg_black);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: none;
    z-index: 68;
	overflow: hidden;
	transition: var(--transition);
}

.dropdown-item {
    padding: 10px 15px;
	white-space: nowrap;
    cursor: pointer;
    color: var(--text_base);
}

.dropdown-item:hover {
    background-color: var(--bg_green);
	color: var(--text_white);
}

#navbarMobile_space{display: none; height: 55px;}
#navbarMobile{display: none; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 55; background: var(--bg_green);}
#navbarMobile > div{display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; height: 55px;}
#navbarMobile > div > div{width: 100%;}
#navbarMobile .nmHamburger{width: 35px; height: 35px;}
#navbarMobile .nmHamburger > div{width: 20px; height: 20px; position: relative; top: 7px;}
#navbarMobile .nmLogo{width: 100px;}
#navbarMobile .nmLogo > div{padding-bottom: 37%;}
#navbarMobile .nmOpt{white-space: nowrap; font-size: 0px; text-align: right;}
#navbarMobile .nmOpt > div{display: inline-block; cursor: pointer; margin-right: 15px;}
#navbarMobile .nmOpt > div:not(:last-child){margin-right: 15px;}
#navbarMobile .nmOpt > div > div{width: 20px; height: 20px;}

#navbarMobileBack{height: 55px; background: var(--bg_green); align-items: center; padding: 0px 15px; box-sizing: border-box; display: grid; grid-template-columns: 30px 1fr 30px; grid-gap: 15px; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 55;}
#navbarMobileBack > div{width: 100%; text-align: center; font-size: 20px;}
#navbarMobileBack > div:first-child > div{width: 20px; height: 20px;}

#footer{background-color: var(--bg_white);}
#footer > div{max-width: 1100px; padding: 60px 20px 50px 20px;}
#footer .fContent{display: grid; grid-template-columns: 1fr 250px; grid-gap: 25px; align-items: end;}
#footer .fContent > div{width: 100%;}
#footer .fContent .fcMenu > a{display: inline-block;}
#footer .fContent .fcMenu > a:not(:last-child){margin-right: 10px;}
#footer .fContent .fcCopyright{color: var(--text_silver); margin-top: 10px;}
#footer .fContent .fcDownload > div:first-child{text-align: center;}
#footer .fContent .fcDownload > div:nth-child(2){width: 245px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; margin-top: 15px;}
#footer .fContent .fcDownload > div:nth-child(2) > a{width: 100%;}
#footer .fContent .fcDownload .fdItem > div{padding-bottom: 30%;}

section{max-width: 1100px;}
section.minHeight{min-height: calc(100vh - 200px);}
section div.distance{padding: 0px 15px;}

.sectionTitle{display: grid; grid-template-columns: 1fr min-content; align-items: center; margin-bottom: 10px;}
.sectionTitle > div{width: 100%;}
.sectionTitle > div:first-child{font-weight: bold; font-size: 17px; color: var(--text_white);}
.sectionTitle.stLight > div:first-child{color: var(--text_base);}
.sectionTitle > div:nth-child(2){white-space: nowrap;}
.sectionTitle .stBtn{padding: 3px 15px; border-radius: 20px; color: var(--text_base); background: var(--bg_pink); font-size: 11px;}

.contentSpace{height: 25px;}
.footerSpace{height: 50px;}

.mobile{display: none;}

.hamburgerPage{position: fixed; top: 0px; left: 0px; z-index: 65; background: var(--bg_base); width: 100%; height: 100%; display: none;}
.hamburgerPage .hpHead{height: 55px; background: var(--bg_green); align-items: center; padding: 0px 15px; box-sizing: border-box; display: grid; grid-template-columns: 30px 1fr 30px; grid-gap: 15px;}
.hamburgerPage .hpHead > div{width: 100%; text-align: center; font-size: 20px;}
.hamburgerPage .hpHead > div:first-child > div{width: 20px; height: 20px;}
.hamburgerPage .hpContent > div:not(.active){display: none;}
.hamburgerPage .hpContent .hcMenu{margin-top: 10px;}
.hamburgerPage .hpContent .hcMenu .hmItem{padding: 10px 20px; box-sizing: border-box; display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; align-items: center;}
.hamburgerPage .hpContent .hcMenu .hmItem > div{width: 100%;}
.hamburgerPage .hpContent .hcMenu .hmItem > div:first-child > div{width: 20px; height: 20px;}
.hamburgerPage .hpLogout{position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 0px 20px 20px 20px; box-sizing: border-box;}
.hamburgerPage .hpLogout > div{display: inline-block;}
.hamburgerPage .hpLogout .hlBtn{display: grid; grid-template-columns: 20px min-content; color: var(--text_red); grid-gap: 15px; align-items: center; cursor: pointer;}
.hamburgerPage .hpLogout .hlBtn > div{width: 100%;}
.hamburgerPage .hpLogout .hlBtn > div:first-child > div{width: 20px; height: 20px;}

#popup{width: 100%; top: 0px; left: 0px; height: 100%; position: fixed; z-index: 90; background: rgb(11 7 1 / 54%); overflow: auto;}
#popup table{width: 100%; height: 100%;}
#popup .p_canvas{max-width: 400px; width: 80%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); border-radius: 20px; overflow: hidden; background: var(--bg_base);}

.popup_head_close{padding: 13px 0px; position: relative; background: var(--bg_green);}
.popup_head_close .phcTitle{text-align: center; font-size: 15px;}
.popup_head_close .phcBtn{position: absolute; right: 15px; top: 14px;}
.popup_head_close .phcBtn > div{width: 20px; height: 20px; cursor: pointer;}

.popup_list{list-style-type: none;}
.popup_list > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease;}
.popup_list > li:not(:last-child){border-bottom: 1px solid #f6f6f6;}
.popup_list > li:hover{background: #e7e7e7;}
.popup_list > a > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease; color: var(--text_base);}
.popup_list > a:not(:last-child) > li{border-bottom: 1px solid #f6f6f6;}
.popup_list > a:hover > li{background: #e7e7e7;}

.popupLogin{padding: 25px 15px;}

.popupUser{padding: 15px;}
.popupUser .puUser{display: grid; grid-template-columns: 35px 1fr; grid-gap: 15px; align-items: center;}
.popupUser .puUser > div{width: 100%;}
.popupUser .puUser > div:first-child > div{width: 35px; height: 35px; border-radius: 50%; background-color: var(--bg_choco);}
.popupUser .puUser .puInfo > div:first-child{font-weight: bold;}
.popupUser .puUser .puInfo > div:nth-child(2){font-size: 11px;}
.popupUser .puPoint{margin-top: 15px; background: var(--bg_greendark); border-radius: 15px; padding: 15px; display: grid; grid-template-columns: 1fr min-content; grid-gap: 15px; box-sizing: border-box; align-items: center;}
.popupUser .puPoint > div{width: 100%; color: var(--text_white);}
.popupUser .puPoint > div:first-child > div:first-child{font-size: 11px; color: var(--text_silver);}
.popupUser .puPoint > div:first-child > div:nth-child(2){font-size: 15px;}
.popupUser .puPoint .ppBtn{white-space: nowrap; border-radius: 15px; border: 1px solid var(--bg_pink); color: var(--text_pink); padding: 5px 15px; font-size: 12px;}
.popupUser .puSubs{margin-top: 15px; border-radius: 15px; padding: 15px; background-image: linear-gradient(to right, #434343, #000000); color: var(--text_white);}
.popupUser .psTitle{display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;}
.popupUser .psTitle > div{width: 100%;}
.popupUser .psTitle > div:first-child > div{width: 15px; height: 15px;}
.popupUser .psInfo{margin-top: 5px;}
.popupUser .psBtn{margin-top: 15px;}
.popupUser .puMenu{margin-top: 15px;}
.popupUser .puMenu > a > div{padding: 7px 0px; color: var(--text_base);}
.popupUser .puLogout{margin-top: 25px;}
.popupUser .puLogout > div{display: inline-block;}
.popupUser .puLogout .plIcon{width: min-content; color: var(--text_red); display: grid; grid-template-columns: 15px min-content; grid-gap: 10px; align-items: center;}
.popupUser .puLogout .plIcon > div{width: 100%;}
.popupUser .puLogout .plIcon > div:first-child > div{width: 15px; height: 15px;}

.pageTitle{padding: 20px 25px; font-size: 20px; font-weight: bold;}

.page_info{background: var(--bg_silvercalm); padding: 25px 0px;}

.page_empty{margin-top: 75px; margin-bottom: 75px; text-align: center; color: var(--text_silver);}

.tab > div:first-child{display: table; color: var(--text_silver); border-bottom: 1.5px solid var(--bg_silver); table-layout: fixed; width: 100%; height: 50px;}
.tab > div:first-child > div{cursor: pointer; vertical-align: middle; white-space: nowrap; padding-bottom: 3px; font-size: 17px; text-align: center; position: relative;}
.tab.mini > div:first-child > div{font-size: 13px; font-weight: bold;}
.tab > div:first-child > div{display: table-cell;}
.tab > div:first-child > div:before{content: ''; position: absolute; bottom: -1.5px; height: 1.5px; width: 60%; background: var(--bg_blue); left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0;}
.tab > div:first-child > div:hover{color: var(--text_base);}
.tab > div:first-child > div.active{color: var(--text_base);}
.tab > div:first-child > div.active:before{opacity: 1;}
.tab > div:last-child > span:not(:first-child){display: none;}

#alert{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 100;}
#alert > div{width: 90%; max-width: 450px; transition: 0.2s; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); position: relative; top: -100px; border-radius: 20px;}
#alert > div > div{padding: 9px 15px 11px 15px; text-align: center; color: var(--text_white);}
#alert > div.success{background: var(--bg_alert_green);}
#alert > div.warning{background: var(--bg_alert_orange);}
#alert > div.failed{background: var(--bg_alert_red);}

.title{padding: 15px 0px;}
.title > div{display: table; table-layout: fixed; width: 100%;}
.title > div > div{display: table-cell; vertical-align: middle;}
.title > div > div:first-child > div:first-child{font-size: 25px; font-family: 'bold';}
.title > div > div:first-child > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}
.title > div > div:last-child{width: 150px;}
.title > div > div:last-child > a > div{border: 1px solid var(--bg_black); border-radius: 5px; float: right; padding: 5px 10px 6px 10px; transition: all 0.2s ease; background: var(--bg_black); color: var(--text_white);}
.title > div > div:last-child > a > div:hover{box-shadow: inset 0px 0px 0px 2px var(--bg_line);}

.menu_horizontal{margin: 15px 0px; overflow: hidden; height: 42px;}
.menu_horizontal > div{white-space: nowrap; overflow: auto; height: 75px;}
.menu_horizontal > div > a > div{display: inline-block; color: var(--text_base); padding: 10px 20px 12px 20px; cursor: pointer; transition: 0.2s; border-radius: 5px; background: var(--bg_silver); font-family: 'bold'; margin-right: 15px;}
.menu_horizontal > div > a:first-child > div{margin-left: 15px;}
.menu_horizontal > div > a:hover > div{background: var(--bg_silvercalm);}
.menu_horizontal > div > a > div.active{background: var(--bg_black); color: var(--text_white);}

.scroll_card{opacity: 0; transition: all 0.2s ease;}
.scroll_card > div{height: 100%; width: 0px; top: 0px; position: absolute; z-index: 1;}
.scroll_card > div:first-child{left: 25px; display: none;}
.scroll_card > div:last-child{right: 30px;}
.scroll_card > div > div{width: 40px; height: 40px; cursor: pointer; border-radius: 50%; position: absolute; top: 32%; background: var(--bg_white); border: 3px solid var(--bg_choco);}
.scroll_card > div:last-child > div{right: 0px;}
.scroll_card > div > div > div{width: 20px; height: 20px; margin-top: 9.5px;}
.scroll_card > div:hover:first-child > div > div{margin-left: 5px;}
.scroll_card > div:hover:last-child > div > div{margin-right: 5px;}

/**FRONT**/
.frontBanner{background: var(--bg_black); position: relative;}
.frontBanner .fbHeight{padding-bottom: 30%;}
.frontBanner .fbContent > div{transition: opacity 0.6s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}
.frontBanner .fbContent > div:not(.active){display: none;}
.frontBanner .fbBubble{position: absolute; bottom: 40px; left: 0px; width: 100%;}
.frontBanner .fbBubble > div{width: min-content; white-space: nowrap;}
.frontBanner .fbBubble > div > div{display: inline-block; width: 10px; height: 7px; border-radius: 25px; background: var(--bg_green);}
.frontBanner .fbBubble > div > div:not(:last-child){margin-right: 10px;}
.frontBanner .fbBubble > div > div.active{width: 15px; background: var(--bg_white);}

.frontBannerMobile{display: none; background: var(--bg_green); padding: 20px 20px 60px 20px; overflow: hidden;}
.frontBannerMobile > div:first-child{padding-bottom: 105%;}
.frontBannerMobile > div:nth-child(2){position: fixed; top: 70px; left: 0px; width: 100%;}
.frontBannerMobile .fbmItem{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.frontBannerMobile .fbmItem button{width: 80%; max-width: 250px;}
.swiper-container{overflow: visible;padding: 0 30px;}
.swiper-slide{width: 80%; padding-bottom: 114%; background-color: var(--bg_silver); border-radius: 20px; border: 1px solid var(--bg_choco); position: relative; overflow: hidden;}
.swiper-slide > div:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: linear-gradient(to bottom, transparent, var(--bg_green));}
.swiper-slide > div > div{position: absolute; bottom: 0; left: 0; padding: 0 15px 15px 15px; width: 100%; box-sizing: border-box;}

.fbmCount{display: flex; justify-content: center; margin-top: 10px; gap: 5px; width: min-content !important;}
.fbmCount .dot{width: 9px; height: 5px; border-radius: 15px; background: var(--bg_greendark); transition: width 0.3s ease;}
.fbmCount .dot-active {background: var(--bg_white); width: 20px;}

.frontSectionList > div:not(:last-child){margin-bottom: 35px;}

.frontSectionMy{min-height: 250px; position: relative; background: var(--bg_choco);}
.frontSectionMy .fsmHead{border-radius: 25px 25px 0px 0px; background: var(--bg_choco); height: 30px; position: absolute; top: -30px; width: 100%;}
.frontSectionMy .fsmBottom{height: 70px;}
.frontSectionMain{min-height: 250px; position: relative; background: var(--bg_chococalm);}
.frontSectionMain .fsmHead{border-radius: 25px 25px 0px 0px; background: var(--bg_chococalm); height: 30px; position: absolute; top: -30px; width: 100%;}
.frontSectionMain .fsmBottom{height: 35px;}

/**MOVIE**/
.movie_main{border-radius: 25px; margin-top: 35px; overflow: hidden; background: var(--bg_green); margin-bottom: 35px;}
.movie_main .mmTop{padding: 130px 0px; background: var(--bg_choco);}
.movie_main .mmBottom{padding: 20px;}
.movie_main .mmBottom .mbInfo{display: grid; grid-template-columns: 1fr; grid-gap: 20px; align-items: center;}
.movie_main .mmBottom .mbInfo > div{width: 100%;}
.movie_main .mmBottom .mbInfo > div:nth-child(2){display: none;}
.movie_main .mmBottom .mbInfo .miTitle{font-size: 25px; font-weight: bold;}
.movie_main .mmBottom .mbInfo .miOpt{white-space: nowrap;}
.movie_main .mmBottom .mbInfo .miOpt > div{display: inline-block;}
.movie_main .mmBottom .mbInfo .miOpt > div:not(:last-child){margin-right: 15px;}
.movie_main .mmBottom .mbInfo .miOpt > div > div{width: 20px; height: 20px;}
.movie_main .mmBottom .mbEpisode{padding: 5px 15px; border-radius: 50px; background: var(--bg_greensoft); display: inline-block; margin-top: 5px; font-size: 12px;}
.movie_main .mmBottom .mbDesc{margin-top: 15px;}

.movie_download{max-width: 400px; text-align: center; box-sizing: border-box; color: var(--text_white);}
.movie_download .mdBtn{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; margin-top: 15px; width: 300px;}
.movie_download .mdBtn > a{width: 100%;}
.movie_download .mdBtn .mbItem > div{padding-bottom: 28%;}
.movie_download .mdBtnContinue{margin-top: 15px;}

/**PROMO**/
.promoLayout{border-radius: 15px; background: var(--bg_green); margin-top: 25px; padding: 15px;}
.promoLayout .plTitle{font-size: 20px; text-align: center; padding-bottom: 15px;}
.promoLayout .plSub{margin-bottom: 15px;}

/**INFO**/
.infoLayout{max-width: 600px; padding: 20px; box-sizing: border-box; border-radius: 15px; background: var(--bg_white);}
.infoLayout .ilTitle{font-size: 17px; font-family: 'bold';}
.infoLayout .ilContent{margin-top: 20px;}

/**ERROR**/
.error_box{max-width: 500px; width: 90%; margin-top: 50px; margin-bottom: 50px; background: var(--bg_white); border-radius: 5px;}
.error_box > div{padding: 25px;}
.error_box .eIcon{padding: 25px 0px 35px 0px;}
.error_box .eIcon > div{width: 90px; height: 90px;}
.error_box .ebDesc{text-align: center;}
.error_box .eLogin{text-align: center; margin-top: 15px;}
.error_box .eLogin > div:not(:last-child){margin-bottom: 15px;}
.error_box .eBtn{text-align: center; margin-top: 25px;}
.error_box .eBtn a{font-family: 'bold';}

.error_coming{max-width: 500px; height: calc(100vh - 100px);}
.error_coming > div{padding-top: 100px;}
.error_coming .ecTime{text-align: center; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px;}
.error_coming .ecTime > div{width: 100%; border: 1px solid var(--bg_line); border-radius: 10px;}
.error_coming .ecTime > div > div:first-child{font-size: 20px; font-weight: bold; padding: 10px 0px;}
.error_coming .ecTime > div > div:nth-child(2){padding: 5px 0px; background: var(--bg_line);}