@charset "utf-8";

:root{
   /* var color : fluenC */
   --brand-color-1:#d93596; --brand-color-2:#754b9d; --brand-color-3:#967adc; --brand-color-4:#ac92ec; --brand-color-5:#f6eefa;
}

/*######################
Style Reset
########################*/
select,
input{font-size:15px;}

/* button style */
button[type=button]{border-radius:8px;}
button[type=button].submit{background-color:var(--brand-color-3); color:#fff;}

/* thumb style */
[class*="thumb"]>span::before{background:var(--lightgray-normal); opacity:0.5;}
[class*="thumb"].male>span::before{background:var(--bluejeans-light);}
[class*="thumb"].female>span::before{background:var(--pinkrose-light);}

/* select style */
select:is(.dark-style, #completed-class-list, #pay-year, #target-day, #affiliated-branch){padding:0 0 2px 8px; width:auto; border:8px solid var(--darkgray-light); border-radius:18px; background-color:var(--darkgray-light); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23ffffff'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); color:#fff;}

/* tag style */
.label-tag{display:inline-flex; padding:3px 4px 4px 4px; line-height:1; border-radius:4px; background-color:var(--darkgray-light); color:#fff; font-family:var(--font-default); font-size:10px; text-transform:none;}
.label-tag.beta{background-color:var(--pinkrose-light);}

.header-title>h3+h4::before,
.banner-module-btn::before,
.sidebar-user-info::after{display:inline-flex; width:24px; height:24px; font-size:24px; font-variation-settings:var(--symbols-line); overflow:hidden; cursor:inherit; font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;}


/*####################
Quill Editor
######################*/
.ql-container.ql-snow{background-color:#fff;}
.ql-container.ql-snow .ql-editor{padding:0; line-height:1.67;}
.ql-container.ql-snow .ql-editor .ql-video{width:100%; height:auto; aspect-ratio:16 / 9;}
.ql-container.ql-snow .ql-editor [class*='ql-indent']:not(.ql-direction-rtl){padding-right:2.4em;}
.ql-container.ql-snow .ql-editor img{vertical-align:middle;}


/*####################
Layout
######################*/
#wrap{display:flex; flex-direction:column; align-items:center;}
#wrap.class-detail :is(.nav-bar, #container){max-width:960px;}
#header{display:flex; flex-direction:column; align-items:center; position:sticky; z-index:100; top:0; width:100%; background-color:#fff;}
#container{display:flex; gap:32px; padding:0 32px; max-width:1280px; width:100%;}
.contents-page{flex-grow:1; display:flex; flex-direction:column; gap:56px; margin:24px 0;}
.mobile-view{display:none !important;}
.btn-area{display:flex; justify-content:center; gap:16px; margin:40px 0;}

/* detail contents */
.detail-page{flex-grow:1; display:flex; flex-direction:column; position:relative; width:100%; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.detail-page-wrapper{display:flex; flex-direction:column;  position:relative; width:100%;}
.detail-page-header{flex-shrink:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; position:sticky; z-index:2; top:0; gap:16px; background-color:var(--lightgray-bg);}
.detail-page-component{flex-grow:1; display:flex; flex-direction:column; align-items:center; gap:40px; position:relative; z-index:1;}
/* detail contents : header component */
.header-title{display:flex; align-items:center; width:100%; min-height:40px;}
.header-title>:is(h3, h4){color:#333; font-family:var(--font-poppins); font-size:24px; font-weight:500; white-space:nowrap;}
.header-title>h3{color:#999; font-weight:300;}
.header-title>h4{display:flex; align-items:center;}
.header-title>h3+h4::before{content:'chevron_right'; color:#888;}
/* detail contents : menu icon */
.menu-icon{display:flex; justify-content:center; align-items:center; width:40px; height:40px;}
/* detail contents : header navi */
.subnav-bar{display:flex; align-items:center; position:relative; overflow-x:auto;}
.detail-page-header .subnav-bar{margin-bottom:24px; padding:0 4px}
.header-title.mobile-view+.subnav-bar{width:100%;}
.subnav-items{display:flex; gap:24px;}
.subnav-items>li>:is(a, span){display:flex; align-items:center; gap:8px; padding:2px 4px 0 4px; min-height:40px; border-bottom:2px solid transparent; color:#333; white-space:nowrap; cursor:pointer;}
.subnav-items>li>a{font-size:16px; font-weight:500;}
.subnav-items>li>span{font-size:14px;}
.subnav-items>li.selected>:is(a, span){border-bottom-color:var(--brand-color-3); color:var(--brand-color-3);}
/* sort option */
.sort-option{display:flex; flex-wrap:wrap; gap:0 40px;}
.contents-page.expand .sort-option{flex-wrap:nowrap;}
.sort-option-row{display:flex; align-items:center; gap:8px; padding:4px 0;}
.sort-option-row:first-child{border-top:0;}
.sort-option-row h5{flex-shrink:0; height:23px; line-height:22px; color:#888; font-size:12px; font-weight:400; font-style:italic; letter-spacing:0; white-space:nowrap;}
.sort-option-row h5~h5{margin-left:20px; padding-left:20px; border-left:1px dotted rgb(0 0 0 / 10%);}
.sort-option-row h5:first-child{margin-left:4px; min-width:40px;}
.sort-option-items{display:flex; gap:4px;}
/* section */
.section{display:flex; flex-direction:column; gap:16px; width:100%;}
.section h2{font-size:40px;}
.section h3{font-size:32px;}
.section h4{font-size:24px;}
.section h5{font-size:18px;}
.section h6{font-size:16px;}
.section :is(h2, h3, h4, h5, h6){color:#333; font-weight:600; word-break:keep-all;}
.section :is(h2, h3, h4, h5, h6)>b{font-weight:500;}
.section :is(h2, h3, h4, h5, h6)>span{font-weight:400;}
.section :is(h2, h3, h4, h5, h6)>em{font-weight:300; font-style:normal;}
.section-header{display:flex; gap:16px; padding:0 4px; font-family:var(--font-poppins);}
.section-header.column{flex-direction:column; align-items:baseline; gap:8px;}
.section-header.align-center{justify-content:center;}
.section-header>em{color:#7b7b7b; font-size:15px; font-style:normal;}
.section-header>span{color:#777; font-size:13px;}
.section-header>span.date-info{padding-left:16px; border-left:1px solid #ccc;}
.section-header>.function{flex-grow:1; display:flex; justify-content:flex-end; align-items:flex-end;}
.section-items{display:flex; flex-direction:column; gap:16px; position:relative;}
.section-items:empty{align-items:center; gap:4px; padding:40px 0; border-radius:16px; border:1px dashed rgb(0 0 0 / 10%); background-color:rgb(255 255 255 / 50%); white-space:pre-line;}
.section-items[data-title]:empty::before{content:attr(data-title); color:var(--brand-color-3); font-size:18px; white-space:pre-line; text-align:center;}
.section-items[data-empty]:empty::after{content:attr(data-empty); color:#777; font-size:18px;}
.section-items[data-title]:empty::after{font-size:15px;}
.section-items.zero-gap{gap:0;}
.section-items>h6{display:flex; align-items:center; gap:4px; color:#333; font-size:15px; font-weight:400;}
.section-items>h6.emphasis{color:var(--brand-color-1);}

/* quick list */
.quick-list{display:flex; justify-content:space-around; flex-wrap:wrap; gap:16px; margin:16px 0;}
.quick-list button[type=button].icon>span{padding:8px 4px;}
.quick-list button[type=button].icon:hover>:is(i, span){color:var(--dark-lavender);}

/* user setting */
.user-info{flex-shrink:0; display:flex; align-items:center; gap:8px; position:relative; z-index:10; height:40px; border-radius:8px; cursor:pointer;}
.user-info>.profile-thumb>span{margin:0; width:36px; height:36px; border-radius:50%; overflow:hidden;}
.user-info>.profile-thumb>span>img{width:100%; height:100%;}
.user-info>span{font-family:var(--font-poppins);}


/*####################
Navigation
######################*/
.nav-bar{display:flex; align-items:center; column-gap:24px; padding:0 32px; max-width:1280px; width:100%; height:64px;}
.nav-mh{display:flex; justify-content:center; align-items:center; gap:8px;}
.logo{width:112px; height:32px; background-image:url(../../../assets/img/logo-fluenc.png); background-repeat:no-repeat; background-size:contain; background-position:center;}
.logo.white{background-image:url(../../../assets/img/logo-fluenc-white.png);}
.nav-mh>.menu-icon{margin-left:-8px;}
.nav-mh>h3{display:flex; align-items:center; gap:8px; line-height:1; color:#333; font-family:var(--font-poppins); font-size:18px; font-weight:400; white-space:nowrap;}
.nav-mh>h3>i.material-symbols-rounded{flex-shrink:0; display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:50%; background-color:var(--darkgray-light); color:#fff; font-size:18px;}
.nav-items{display:flex; gap:8px;}
.nav-items>li{display:flex; justify-content:center;}
.nav-items>li>a{display:flex; align-items:center; position:relative; padding:0 16px; height:32px; color:#555; font-size:15px; white-space:nowrap;}
.nav-items>li>a:hover{background-color:#fff7ff; color:#555;}
.nav-items>li.selected>a{color:var(--brand-color-2);}
.nav-items>li.selected>a::after{content:''; position:absolute; inset:auto 12px 0 12px; border-bottom:1px solid var(--brand-color-2);}
.nav-contents{display:none; padding-right:32px; height:100%; flex-grow:1;}
/* search bar */
.search-bar{display:flex; align-items:center; position:relative; width:200px;}
.search-bar input[type=text]{padding:0 12px; height:40px; border-radius:8px; border:1px solid transparent; background-color:var(--lightgray-bg); box-shadow:0 0 4px rgb(0 0 0 / 4%) inset;}
.search-bar button[type=button].action-search{margin-left:-38px;}
/* date bar */
.date-bar{display:flex; align-items:center; gap:8px; padding:0 10px; height:40px; border-radius:8px; background-color:var(--lightgray-bg); box-shadow:0 0 4px rgb(0 0 0 / 4%) inset; color:#555;}
.date-bar>span{padding-right:4px; color:#555; font-size:15px; white-space:nowrap;}
/* account bar */
.account-bar{flex-grow:1; display:flex; justify-content:flex-end; align-items:center; gap:16px; position:relative;}
.account-bar>button{flex-shrink:0;}
.function-button{display:flex; align-items:center; gap:8px;}
.function-button>button.action-search{display:none;}
/* user info dropdown */
.user-info-dropdown{display:flex; flex-direction:column; gap:8px; position:absolute; z-index:100; top:40px; right:0; width:160px; padding:8px 0; border-radius:8px; border:1px solid #ddd; background-color:#fff; box-shadow:0 0 8px rgb(0 0 0 / 8%);}
.user-dropdown-header{display:flex;}
.user-dropdown-container{display:flex;}
.user-dropdown-menu{display:flex; flex-direction:column; gap:4px; padding:8px; width:100%;}
.user-dropdown-menu button{justify-content:flex-start;}


/*####################
Sidebar
######################*/
.sidebar{flex-shrink:0; display:flex; flex-direction:column; gap:16px; margin-top:24px; width:200px; height:100%;}
.sidebar-section{display:flex; flex-direction:column; padding:8px 12px; border-radius:16px; background-color:#fff; box-shadow:0 0 8px rgb(0 0 0 / 5%);}
.sidebar-user-info{display:flex; align-items:center; position:relative; padding:4px 0 12px 0; border-bottom:1px dotted #ddd;}
.sidebar-user-info::after{content:'keyboard_arrow_down'; color:#999;}
.sidebar-user-info .profile-info-container{flex-grow:1; display:flex; align-items:center; min-height:32px;}
.sidebar-user-info .profile-info-container:empty::before{content:attr(data-empty); flex-grow:1; color:#aaa; font-style:italic;}
.sidebar-user-info .profile-thumb>span{width:32px;}
.sidebar-user-info .profile-info{flex-grow:1; flex-direction:column; justify-content:center; align-items:flex-start; margin-left:8px;}
.sidebar-user-info .profile-info>b{font-weight:500;}
.sidebar-user-info .profile-info>span{font-size:11px;}
.sidebar h3{display:flex; align-items:center; gap:4px; padding:0 4px; height:40px; color:#999; font-family:var(--font-poppins); font-weight:400;}
.sidebar h4{flex-grow:1; color:inherit; font-family:var(--font-poppins); font-size:inherit; font-weight:inherit;}
.first-level{flex-grow:1; display:flex; flex-direction:column; gap:4px; position:relative;}
h3+.first-level{margin-bottom:8px;}
.first-level>li{display:flex; justify-content:center; position:relative; z-index:2;}
.first-level>li>a{flex-grow:1; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; column-gap:8px; position:relative; padding:0 0 2px 8px; width:100%; height:38px; line-height:1; border-radius:8px; color:#555; font-size:14px; text-transform:capitalize;}
.first-level>li>a:hover{background-color:var(--lightgray-bg); color:#555;}
.first-level>li>a>span{flex-grow:1;}
.first-level>li.selected>a{background-color:var(--brand-color-2); color:#fff; font-weight:500;}
.first-level>li.selected>a>i.material-symbols-rounded{font-variation-settings:var(--symbols-basic);}
.first-level>li>a>i.indicator{color:#aaa;}
.nav-contents{display:none; padding-right:32px; height:100%; flex-grow:1;}


/*####################
Profile Stye
######################*/
/* profile basic */
.profile-thumb>span{display:flex; justify-content:center; align-items:center; width:120px; aspect-ratio:1 / 1; border-radius:50%;}
.profile-thumb>span:empty::before{background:url(../img/profile/profile-default.png); background-size:contain; opacity:1;}
.profile-thumb.num>span::before{background:var(--darkgray-light); opacity:1;}
.profile-thumb.num>span::after{content:'+'attr(data-over-users); position:relative; line-height:1; color:#fff;}
.profile-name{display:flex; flex-direction:column; position:relative;}
.profile-name>h4{font-family:var(--font-poppins); font-size:16px; font-weight:400;}
.profile-name>h5{font-family:var(--font-poppins); font-size:14px; font-weight:400;}
.profile-name>span{line-height:1; color:#777; font-size:12px;}
.profile-name>em{display:flex; align-items:center; padding:0 8px; min-height:23px; border-radius:12px; border:1px solid var(--sunflower-normal); color:var(--sunflower-normal); font-size:11px; font-style:normal; font-weight:600; white-space:nowrap;}
.profile-name>.status-verified{margin-left:-4px;}
.profile-info{display:flex; flex-wrap:wrap; align-items:center; position:relative;}
.profile-info>b{color:#333; font-family:var(--font-poppins); font-size:13px;}
.profile-info>span{color:#555; font-size:13px; word-break:keep-all;}
:is(.profile-level, .status-subscription, .status-step, .status-verified){display:flex; min-height:24px;}
:is(.profile-level, .status-subscription, .status-step, .status-verified)>:is(em, sub){display:flex; align-items:center; padding:0 12px; border-radius:14px; font-size:12px; font-style:normal; white-space:nowrap;}
:is(.profile-level, .status-subscription, .status-step, .status-verified).small>:is(em, sub){padding:0 8px; font-size:10px; letter-spacing:-0.2px;}
:is(.profile-level, .status-subscription, .status-step, .status-verified).sub>sub{padding-right:6px; border-top-right-radius:0; border-end-end-radius:0;}
:is(.profile-level, .status-subscription, .status-step, .status-verified).sub>em{padding-left:6px; border-top-left-radius:0; border-end-start-radius:0;}
.profile-level>em{background-color:var(--sunflower-normal); color:#fff;}
.profile-level>sub{border:1px solid var(--sunflower-normal); color:var(--sunflower-normal); font-weight:500;}
.profile-level>span{align-self:center; margin-left:8px; color:var(--sunflower-normal);}
.status-subscription>em{border:1px solid var(--brand-color-1); background-color:#fff; color:var(--brand-color-1);}
.status-step>em{border:1px solid var(--dark-lavender); background-color:#fff; color:var(--dark-lavender);}
#apply-class .section-header .status-step{margin:0 -8px 0 -4px;}
.status-verified>em{border:1px solid var(--grass-normal); background-color:#fff; color:var(--grass-normal);}
.status-verified>em>i.material-symbols-rounded{margin-left:-4px; width:18px; height:18px; font-size:18px; font-variation-settings:var(--symbols-basic);}
[data-course="kindergarten"] .profile-level>em{background-color:var(--sunflower-normal);}
[data-course="kindergarten"] .profile-level>sub{border:1px solid var(--sunflower-normal); color:var(--sunflower-normal);}
[data-course="kindergarten"] .profile-level>span{color:var(--sunflower-normal);}
[data-course="phonics"] .profile-level>em{background-color:var(--bittersweet-light);}
[data-course="phonics"] .profile-level>sub{border:1px solid var(--bittersweet-light); color:var(--bittersweet-light);}
[data-course="phonics"] .profile-level>span{color:var(--bittersweet-light);}
[data-course="nttalk"] .profile-level>em{background-color:var(--topaz-light);}
[data-course="nttalk"] .profile-level>sub{border:1px solid var(--topaz-light); color:var(--topaz-light);}
[data-course="nttalk"] .profile-level>span{color:var(--topaz-light);}

/* profile list */
.profile-list{display:flex; flex-wrap:wrap; gap:16px;}
.profile-list-item{display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; padding:8px;}
.profile-list-item>i.material-symbols-rounded{position:absolute; z-index:2; top:0; left:72%; width:28px; height:28px; border-radius:50%; background-color:#fff; color:#aaa; font-size:28px;}
.new>.profile-thumb>span>i.material-symbols-rounded{position:relative; width:64px; height:64px; color:#fff; font-size:64px;}
.new>.profile-thumb>span::before{background:var(--lightgray-normal) !important;}
.new>.profile-thumb:hover>span>i{color:var(--dark-lavender);}
.new>.profile-thumb:hover>span::before{background:var(--lavender-light) !important;}
.profile-list-item .profile-thumb>span{width:96px;}
.profile-list-item .profile-name{align-items:center;}
.profile-list-item input[type=radio]{display:none;}
.profile-list-item input[type=radio]:checked~i{color:var(--grass-normal); font-variation-settings:var(--symbols-basic);}
.profile-list-item input[type=radio]:checked~.profile-thumb>span{outline:3px solid var(--grass-normal); outline-offset:2px;}
.profile-list+.btn-submit{margin-top:0;}
#user-quick .section~.section .profile-list{padding-top:24px; width:100%; max-width:368px; border-top:1px dashed rgb(0 0 0 / 10%);}
#user-quick .section-items{align-items:center;}
#edit-profile .profile-list{padding:24px 0 32px 0;}
#edit-profile .character-list>.profile-list{align-self:center; max-width:368px;}
#change-info .change-data{padding:24px 0 32px 0; border-top:1px dashed rgb(0 0 0 / 10%);}


/*####################
banner module
######################*/
.banner-module{display:flex; align-items:center; gap:32px; padding:0 32px; max-height:96px; border-radius:16px; overflow:hidden;}
.banner-module.link{cursor:pointer;}
.banner-module.blue{background-color:var(--blue-light);}
.banner-module.lavender{background-color:var(--lavender-normal);}
.banner-module-picture{flex-shrink:0; display:flex; align-self:flex-start; width:96px;}
.banner-module-picture>img{width:100%;}
.banner-module-text{flex-grow:1; display:flex; flex-direction:column; gap:4px; padding:16px 0;}
.banner-module-text>h6{color:#fff; font-family:var(--font-nanumsquareN); font-size:18px; font-weight:500;}
.banner-module-text>p{color:rgb(255 255 255 / 80%); font-size:13px; word-break:keep-all;}
.banner-module-btn{flex-shrink:0; display:flex;}


/*####################
Payment Detail (apply & myinfo common)
######################*/
.payment-original{font-size:18px; font-weight:600;}
.payment-detail{display:flex; flex-direction:column; gap:8px; width:100%;}
.payment-coupon-list{display:flex; gap:8px;}
.payment-total{display:flex; flex-direction:column; padding:16px; border-radius:8px; background-color:#fff;}
.modal-layer.setting .payment-total{margin-bottom:24px; padding:0 16px 16px 16px; border-radius:8px; background-color:var(--lightgray-bg);}
.payment-total-item{display:flex; justify-content:space-between; gap:8px; padding:4px; font-size:15px;}
.payment-total-item:not(.final){padding-left:8px; border-left:4px solid #ddd;}
.payment-total-item.final{padding:16px 0 4px 0; font-size:18px;}
.payment-total-item:not(.final)>b{color:var(--brand-color-1);}
.payment-total-item.final>b{color:var(--blue-normal);}
.payment-total-item:not(.final)>span{color:#555;}
.payment-total-item.final+.payment-total-item{margin-top:8px;}


/*####################
table style
######################*/
.table-wrapper{flex-grow:1; display:flex; position:relative; width:100%;}
.table-wrapper table{position:relative; width:100%; height:fit-content; border-collapse:separate; border-spacing:0;}
.table-wrapper table thead{position:sticky; z-index:2; top:0;}
.table-wrapper table thead::after{content:''; display:table-row; height:8px;}
.table-wrapper table tbody{position:relative; z-index:1; border-radius:8px; box-shadow:0 0 8px rgb(0 0 0 / 4%);}
.table-wrapper table tbody:empty{height:120px;}
.table-wrapper table tbody:empty::before{content:attr(data-empty); display:flex; justify-content:center; align-items:center; position:absolute; inset:0 0 auto 0; min-height:120px; border-radius:8px; border:1px dashed #e5e5e5; color:#888; font-size:15px; font-weight:400; font-style:italic;}
.table-wrapper table :is(th, td){position:relative; padding:4px 8px; height:40px; line-height:1.2; border-top:1px solid #eee; background-color:#fff; color:#555; text-align:center;}
.table-wrapper table th{height:36px; line-height:1; color:#888; font-size:11px; font-weight:400; font-style:italic; word-break:keep-all;}
.table-wrapper table :is(th, td):first-child{border-left:1px solid #eee;}
.table-wrapper table :is(th, td):last-child{border-right:1px solid #eee;}
.table-wrapper table tr:last-child>:is(th, td){border-bottom:1px solid #eee;}
.table-wrapper table tr:first-child>:is(th, td):first-child{border-top-left-radius:8px;}
.table-wrapper table tr:first-child>:is(th, td):last-child{border-top-right-radius:8px;}
.table-wrapper table tr:last-child>:is(th, td):first-child{border-bottom-left-radius:8px;}
.table-wrapper table tr:last-child>:is(th, td):last-child{border-bottom-right-radius:8px;}
.table-wrapper.show-details table tbody tr{cursor:pointer;}
.table-wrapper .left{text-align:left; word-break:break-word;}
.table-wrapper th.check-record .tablesorter-header-inner::after{content:none;}
.table-wrapper .check-record{padding:0;}
.table-wrapper .check-record label.check{margin:0; width:32px; height:32px;}
.table-wrapper .name-record:first-child{padding-left:16px;}
.table-wrapper .delete-record button{color:#aaa;}
.table-wrapper table tbody td.error{border:1px solid rgb(201 50 70 / 50%); background-color:rgb(201 50 70 / 5%); color:#c93246;}
/* common table style - selected */
.table-wrapper table tbody tr.selected>td{border-color:var(--brand-color-2); background-color:var(--brand-color-5);}
.table-wrapper table tbody tr.selected+tr>td{border-top-color:var(--brand-color-2);}
.table-wrapper table tbody tr.checked{border-top:1px solid #555 !important; border-bottom:1px solid #555 !important; background-color:rgb(82 99 134 / 10%) !important;}
.table-wrapper table tbody tr.selected button{background-color:transparent;}
/* common table style - datepicker */
.table-wrapper td.select-record label.period{width:100%;}
/* common table style - table caption */
.table_caption{padding:10px;}
.table_caption>p{color:#888; font-size:11px; font-style:italic;}

.table-wrapper.minimize thead th{background-color:var(--lightgray-bg);}
.table-wrapper.minimize table thead::after{content:none;}
.table-wrapper.minimize table tbody{box-shadow:none;}
.table-wrapper.minimize tbody tr:first-child>td{border-top:0;}
.table-wrapper.minimize tbody tr>td:first-child{border-left:0;}
.table-wrapper.minimize tbody tr>td:last-child{border-right:0;}
.table-wrapper.minimize tbody tr:last-child>td{border-bottom:0;}


/*####################
info page
######################*/
.info-page{visibility: hidden; position:absolute; z-index:20; top:0; bottom:0; left:0; right:0; background-color: #f4f6f8; -webkit-transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.info-page.expand-ani{visibility:visible;}
.info-page-wrapper{display:flex; position:relative; margin:0 auto; width:100%; height:100%; opacity:0; -webkit-transition:opacity 1s; -moz-transition:opacity 1s; transition:opacity 1s;}
.expand-ani .info-page-wrapper{border-left:1px solid #e5e5e5; opacity:1;}
.info-page-container{flex-grow:1; display:flex; flex-direction:column; overflow:auto;}
.info-page-header{display:flex; align-items:center; gap:16px; padding-top:24px; width:100%;}
.info-page-header .header-title>h3{font-size:20px; font-weight:400;}
.info-page-header .function{display:flex;}
.info-page-header .function>i{width:32px; height:32px; color:#555; font-size:32px; cursor:pointer;}
.info-page .close{position:absolute; top:0; right:0; margin:10px; transform:scale(0.75); transform-origin:top right;}
.info-page-content{flex-grow:1; display:flex; flex-direction:column; gap:40px; width:100%; padding:8px 0;}

.info-page-content .guide-info{margin:32px 0;}
.info-page-content .guide-info p{margin:4px 16px; color:rgb(255 255 255 / 80%);}
.info-page-content .tab-menu{margin:0 64px;}
.info-page-content .content-wrapper{display:flex; flex-direction:column; padding:24px 40px;}
.info-page-content .content-wrapper .access-list{margin:0 0 0 32px;}


/*####################
Footer
######################*/
#footer{display:flex; flex-direction:column; margin-top:40px; width:100%; max-width:1280px;}
#footer .section{gap:8px; padding:40px;}
#footer .terms{display:flex; flex-wrap:wrap;}
#footer .terms>a{padding-right:16px; font-size:13px; font-weight:200;}
#footer .terms>a>b{font-weight:500;}
#footer .terms>a~a{padding-left:16px; border-left:1px solid #ccc;}
#footer .info{display:flex; flex-wrap:wrap; gap:16px 24px;}
#footer .info>li{display:flex; gap:8px; color:#333; font-size:13px; font-weight:200;}
#footer .info>li>b{font-weight:500;}
#footer .copyright{color:#333; font-size:13px; font-weight:200;}


/*####################
SNS
######################*/
.sns{display:flex; align-items:center; gap:16px; margin-top:8px; padding-top:8px; border-top:1px dashed #ddd;}
.sns>h5{font-size:15px; font-weight:300;}
.social-items{display:flex; gap:8px;}
.social-items>a{display:block; width:40px; height:40px; background-repeat:no-repeat; background-size:contain;}
.social-items>.youtube{background-image:url(../img/partners/social/icon-social-youtube.png);}
.social-items>.instagram{background-image:url(../img/partners/social/icon-social-instagram.png);}


/*####################
Screen size
######################*/
/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 1024px */
@media (max-width: 1024px) {

}

/* ##Device = Desktops, ##Screen = B/w Less than 960px */
@media (max-width: 960px) {

   .mobile-view{display:flex !important;}

   /* navigation */
   .nav-bar{column-gap:16px; padding:0 24px;}
   .nav-items>li>a{padding:0 12px;}
   .detail-page-header .subnav-bar{margin-bottom:16px;}
   .search-bar{width:136px;}
   .user-info>span{display:none;}

   /* sidebar */
   .sidebar{position:fixed; z-index:100; left:-200px; margin-top:16px; transition:left 0.3s ease;}
   #container.active::before{content:''; position:fixed; z-index:99; inset:0 0 0; background-color:rgb(0 0 0 / 56%); backdrop-filter:blur(4px);}
   #container.active .sidebar{left:16px;}

   /* contents */
   #container{padding:0 24px; max-width:100%; width:100%;}
   .detail-page-header{gap:8px; min-height:72px;}
   .header-title.mobile-view{padding:4px; border-radius:8px; background-color:#fff;}
   .header-title>:is(h3, h4){font-size:17px;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 768px */
@media (max-width: 768px) {

   /* navigation */
   /* #wrap:not(.class-detail, .enroll) .nav-bar{display:grid; grid-template-columns:auto 1fr; height:auto;} */
   .nav-mh, .account-bar{height:56px;}
   .account-bar .user-info{height:auto;}
   .account-bar .profile-thumb>span{width:32px; height:32px;}
   .account-bar>button.action-search{display:inline-flex;}
   .nav-bar{padding:0 16px;}
   /* .nav-items{order:3; grid-column:1 / 3; align-items:center; height:48px;} */
   .nav-items>li>a{padding:0 12px;}
   .search-bar{display:none;}
   .function-button>button.action-search{display:inline-flex;}

   /* contents */
   #container{gap:24px; padding:0 16px;}

   /* banner module */
   .banner-module{gap:16px; padding:0 16px;}
   .banner-module-text>h6{font-size:16px;}
   .banner-module-text>p{line-height:1.1;}

   /* footer */
   #footer .section{gap:12px; padding:24px;}
   #footer :is(.terms>a, .info>li, .copyright){font-size:14px;}
   #footer .info{gap:8px 24px;}
   
}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 640px */
@media (max-width: 640px) {

   /* banner module */
   .banner-module-picture{width:80px;}
   .banner-module-text>h6{font-size:15px;}
   .banner-module-text>p{font-size:12px;}
   .banner-module-btn>button{display:none;}
   .banner-module-btn::before{content:'arrow_circle_right'; display:flex; justify-content:center; align-items:flex-start; color:rgb(255 255 255 / 80%); font-family:'Material Symbols Rounded'; font-variation-settings:var(--symbols-basic); font-weight:normal; font-style:normal; font-size:28px; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased;}

}

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */
@media (max-width: 480px) {

   .nav-mh>.logo{width:96px; height:28px;}
   .nav-mh>h3{font-size:15px;}
   .nav-mh>h3>i.material-symbols-rounded{width:28px; height:28px; font-size:16px;}
   .nav-bar{padding:0 16px;}
   #wrap:is(.class-detail, .enroll) .menu-icon{width:32px; height:32px;}
   .nav-items>li>a{padding:0 8px; font-size:13px;}
   .subnav-items{gap:16px;}
   .subnav-items>li>a{font-size:14px;}
   .search-bar input[type=text]{height:32px;}
   .date-bar{gap:4px; padding:0 8px; height:32px;}
   .date-bar .material-symbols-rounded{width:18px; height:18px; font-size:18px;}
   .date-bar>span{font-size:13px;}

   /* contents */
   #container{padding:0 12px;}
   .contents-page{margin-top:16px;}
   .header-title{min-height:auto;}
   .section-header>h4{font-size:16.5px;}

   /* banner module */
   .banner-module{gap:12px; padding:0 12px; height:80px;}
   .banner-module-picture{width:72px;}
   .banner-module-text{padding:12px 0;}
   .banner-module-text>h6{font-size:14px;}
   .banner-module-text>p{font-size:11px;}

   /* table style */
   .table-wrapper .name-record:first-child{padding-left:8px; white-space:nowrap;}

   /* footer */
   #footer .section{padding:24px 16px;}
   #footer :is(.terms>a, .info>li, .copyright){font-size:13px;}
   #footer .info{flex-direction:column;}

   /* quick list */
   .quick-list{gap:8px;}
   .quick-list button[type=button].icon>i.material-symbols-rounded{font-size:40px;}
   .quick-list button[type=button].icon{min-width:64px;}

   /* profile list */
   :is(#user-quick .section~.section, #edit-profile .character-list) .profile-list{gap:8px; max-width:296px;}
   :is(#user-quick .section~.section, #edit-profile .character-list) .profile-list-item{padding:4px;}
   .profile-list-item .profile-thumb>span{width:64px;}
   .profile-list-item .profile-name>h4{font-size:13px;}
   .profile-list-item .profile-name>span{font-size:11px;}

}

/* ##Device = Galaxy Fold (Portrait), ##Screen = B/w Less than 319px */
@media (max-width: 319px) {

   .nav-items>li{padding:0;}

}