@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

/*-- Variable. --*/
html{
    --global-nav-height:90px;
    --global-footer-height:380px;
    --class-nav-height:50px;
    --color-blue:#0e99e5;
    --color-red:#dc5050;
    --color-soft-red:#f8dcdc;
    --color-cyan:#6bc6cc;
    --color-white:#ffffff;
    --color-hard-white:#cccccc;
    --color-soft-white:#aaaaaa;
    --color-black:#000000;
    --color-dark:#222222;
    --color-gray:#666666;
    --color-hard-gray:#444444;
    --color-soft-gray:#888888;
    --color-bubble:#f8f8f9;
    --color-border:#eeeeee;
    --color-facebook:#1877f2;
    --color-naver:#19ce60;
}

/*-- Reset. --*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,main,hgroup,menu,nav,section{display:block}
audio,canvas,progress,video{display:inline-block}
a,abbr,address,article,aside,audio,b,blockquote,body,br,button,canvas,caption,cite,code,col,data,datalist,dd,del,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,html,i,iframe,img,input,ins,kbd,label,legend,li,main,mark,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,select,small,span,strong,sub,sup,table,td,textarea,th,time,u,ul,var,video{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{-ms-content-zooming:none;-ms-touch-action:pan-x pan-y}
body{-webkit-text-size-adjust:none}
fieldset,img{border:0 none}
dl,ul,ol,menu,li{list-style:none}
blockquote,q{quotes:none}
blockquote::before,blockquote::after,q::before,q::after{content:"";content:none}
input,select,textarea,button{font-size:100%;vertical-align:middle;outline:none}
button{border:0 none;background-color:transparent;cursor:pointer;overflow:hidden}
table{border-collapse:collapse;border-spacing:0}
input[type="text"],input[type="tel"],input[type="password"],input[type="submit"],input[type="search"],input[type="number"]{background-color:transparent;border-radius:0;box-shadow:0 0 0 0 transparent inset;transition:color .1s ease,border-color .1s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input:checked[type="checkbox"]{background-color:var(--color-black);-webkit-appearance:checkbox}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
input[type="date"]{text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input[type="date"]:invalid::-webkit-datetime-edit{color:var(--color-black)}
input[type="date"]::-webkit-clear-button{display:none}
input[type="date"]::-webkit-inner-spin-button{display:none}
input[type="date"]::-webkit-calendar-picker-indicator{color:var(--color-black)}
input[type="date"]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}
textarea{background-color:transparent;border:none;resize:none}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a,a:active,a:hover{text-decoration:none}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}
i{font-style:normal}
a,button{position:relative;-webkit-tap-highlight-color:transparent}
input{border-radius:0;border:none;outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{opacity:1}
a{color:var(--color-dark);-webkit-transition:color 120ms ease-in-out;-moz-transition:color 120ms ease-in-out;-ms-transition:color 120ms ease-in-out;-o-transition:color 120ms ease-in-out;transition:color 120ms ease-in-out}
a:focus,input:focus,textarea:focus,button:focus{outline:none}
.blind{overflow:hidden;display:none;visibility:hidden;position:absolute;clip:rect(0 0 0 0);width:0;height:0}
html{font-size:12px;font-weight:400;line-height:1.5rem}
body,th,td,input,select,textarea,button{color:var(--color-dark);font-family:"Lato","Noto Sans KR","Helvetica Neue","Helvetica","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:1rem;font-weight:400;line-height:1.5rem}
::-moz-selection{background:var(--color-cyan);text-shadow:none;color:var(--color-white)}
::selection{background:var(--color-cyan);text-shadow:none;color:var(--color-white)}

/*-- View. --*/
/*.inactive{visibility:hidden !important;opacity:0 !important}*/
/*.inactive a{pointer-events:none}*/
/*html{overflow:-moz-scrollbars-none;-ms-overflow-style:none}*/
html::-webkit-scrollbar{width:0 !important}
body{overflow-x:hidden;width:100%}
body.mode-lecture{background-color:var(--color-dark);color:var(--color-white)}
body.mode-lecture a{color:var(--color-white)}


/*-- Bankin. --*/
#___bankin{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

/*-- Global Navigation. --*/
#gn{position:absolute;z-index:1000;top:0;right:0;left:0;width:100%;background-color:var(--color-white);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);-moz-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1)}
body.mode-lecture #gn{background-color:var(--color-dark)}
#gn .gn-content{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#gn h1#gn-bi a{display:block}
#gn h1#gn-bi a svg#svg-gn-bi{display:block}
#gn h1#gn-bi a svg#svg-gn-bi path.bi-bank{fill:#888888}
#gn h1#gn-bi a svg#svg-gn-bi path.bi-in{fill:#0e99e5}
body.mode-lecture #gn h1#gn-bi a svg#svg-gn-bi path.bi-bank{fill:#ffffff}
body.mode-lecture #gn h1#gn-bi a svg#svg-gn-bi path.bi-in{fill:#ffffff}
#gn .lecture-title{margin-right:auto;font-weight:700}
#gn .lecture-title span{display:inline-block;vertical-align:top}
#gn .gn-menu .gn-menu-list{display:-webkit-box;display:-ms-flex;display:flex}
#gn .gn-menu .gn-menu-list li{display:inline-block;vertical-align:top}
#gn .gn-menu .gn-menu-list li a{display:inline-block;position:relative;z-index:1000;vertical-align:top;color:var(--color-dark);font-weight:700;cursor:pointer}
#gn .gn-menu .gn-menu-list li.active a{cursor:pointer}
#gn .gn-menu .gn-menu-list li a::after{content:"";display:block;position:absolute;background-color:var(--color-blue);border-radius:50%;pointer-events:none;opacity:0;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
#gn .gn-menu .gn-menu-list li a:hover::after,#gn .gn-menu .gn-menu-list li.active a::after{opacity:1}
#gn .gn-menu .gn-menu-list li a span{display:block;vertical-align:top}
#gn .util-menu .util-menu-list{display:-webkit-box;display:-ms-flex;display:flex}
#gn .util-menu .util-menu-list li{display:inline-block;vertical-align:top}
#gn .util-menu .util-menu-list li a{display:inline-block;z-index:1000;vertical-align:top;color:var(--color-soft-gray);font-weight:500;cursor:pointer}
#gn .util-menu .util-menu-list li a:hover,#gn .util-menu .util-menu-list li.active a{color:var(--color-dark)}
#gn .util-menu .util-menu-list li a span{display:block;vertical-align:top}
#gn .me-menu{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#gn .me-menu .user{}
#gn .me-menu .user span,#gn .me-menu a.btn-signout span{display:inline-block;vertical-align:top;font-weight:500}
#gn .me-menu .user span,#gn .me-menu a.btn-signout{color:var(--color-soft-gray)}
#gn .me-menu .user span.name{color:var(--color-dark)}
body.mode-lecture #gn .me-menu .user span.name{color:var(--color-white)}
#gn .me-menu a.btn-signout{display:block;position:relative}
#gn .me-menu a.btn-signout:hover{color:var(--color-dark)}
#gn .me-menu a.btn-room{background-color:var(--color-blue);color:var(--color-white);font-weight:500;cursor:pointer}
body.mode-lecture #gn .me-menu a.btn-room{background-color:var(--color-white);color:var(--color-dark)}
#gn .me-menu a.btn-room::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
#gn .me-menu a.btn-room:hover::after{opacity:1}
#gn .me-menu a.btn-room span{display:inline-block;position:relative;z-index:1;vertical-align:top}

/*-- Global Footer. --*/
#gf{background-color:var(--color-dark)}
#gf #gf-bi{display:block}
#gf #gf-bi svg#svg-gf-bi{display:block}
#gf #gf-bi svg#svg-gf-bi path{fill:#ffffff}
#gf .gf-links{color:var(--color-white)}
#gf .gf-links li{display:inline-block;vertical-align:top}
#gf .gf-links li a{color:var(--color-white);font-weight:700}
#gf .gf-infos{color:var(--color-soft-gray)}
#gf .gf-infos li{display:inline-block;vertical-align:top;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
#gf .gf-infos li span,#gf .gf-infos li a,#gf .gf-infos li address{display:inline-block;vertical-align:top}
#gf .gf-infos li span.name{text-transform:uppercase;font-weight:500}
#gf .gf-infos li span.name{position:relative}
#gf .gf-infos li span.name::after{content:"";display:block;position:absolute;top:50%;width:0;border-right:1px solid var(--color-gray);pointer-events:none;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
#gf .gf-infos li a{color:var(--color-soft-gray)}
#gf .gf-infos li a.tel span.country::before{content:"+";display:inline-block;vertical-align:top}
#gf .gf-infos li a.tel span:not(.country) + span::before{content:".";display:inline-block;vertical-align:top}

/*-- Content. --*/
main{position:relative;min-height:calc(100vh - var(--global-footer-height))}
body.mode-lecture main{padding-top:60px;padding-bottom:inherit}
/*-- Section. --*/
.section-content > h2.title{font-weight:700}
.section-content > h2.title span{display:inline-block;vertical-align:top}

/*-- About. --*/
main#about figure{width:100%}
main#about figure.about-pc{position:relative;width:1920px}
main#about figure img{display:inline-block;width:100%;vertical-align:top}

/*-- Class. --*/
#class-nav{position:absolute;z-index:900;top:0;width:100%;background-color:var(--color-white);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);-moz-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1)}
#class-nav .nav-content{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#class-nav .nav-menu .nav-menu-list{display:-webkit-box;display:-ms-flex;display:flex}
#class-nav .nav-menu .nav-menu-list li{display:inline-block;vertical-align:top}
#class-nav .nav-menu .nav-menu-list li a{display:inline-block;position:relative;z-index:900;vertical-align:top;color:var(--color-dark);font-weight:700;line-height:1.667rem;cursor:pointer}
#class-nav .nav-menu .nav-menu-list li.active a{cursor:default}
#class-nav .nav-menu .nav-menu-list li a::after{content:"";display:block;position:absolute;bottom:0;right:0;left:0;width:100%;height:0;border-bottom-style:solid;border-bottom-color:var(--color-blue);pointer-events:none;opacity:0;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
#class-nav .nav-menu .nav-menu-list li a:hover::after,#class-nav .nav-menu .nav-menu-list li.active a::after{opacity:1}
#class-nav .nav-menu .nav-menu-list li a span{display:block;vertical-align:top}

/*-- Accounts. --*/
main#accounts .accounts-content h2.title{font-weight:700}
main#accounts .accounts-content h2.title span{display:inline-block;vertical-align:top}

/*-- Component. --*/
/*-- Banner. --*/
.banner{overflow:hidden}
.banner .banner-wrap{overflow:hidden;position:relative;width:100%;height:0}
.banner .banner-wrap .banner-container{position:absolute;top:0;left:0;width:100%;height:100%}
.banner .banner-wrap .banner-container::after{content:"";display:block;clear:both}
.banner .banner-wrap .banner-container .banner-item{overflow:hidden;float:left;width:100%;height:100%;background-color:white;align-content:center}
.banner .banner-wrap .banner-container .banner-item img{position:relative;display:block;width:100%}
/*-- Form. --*/
.form-row .form-item{position:relative}
.form-row .form-item .form-title{position:absolute;z-index:100;left:0;color:var(--color-soft-gray);font-weight:300;-webkit-transition:all 120ms ease-in;-moz-transition:all 120ms ease-in;-ms-transition:all 120ms ease-in;-o-transition:all 120ms ease-in;transition:all 120ms ease-in}
.form-item .form-title label,.form-item .form-title label span{display:inline-block;vertical-align:top}
.form-item .form-field{position:relative}
.form-item .form-field input{display:inline-block;width:100%;vertical-align:top;font-weight:300}
.form-item .form-value{font-weight:300}
.form-item .form-value span{display:inline-block;vertical-align:top}
.form-item.form-item-password .form-password-view{position:absolute}
.form-item.form-item-password .form-password-view button{display:inline-block;position:absolute;vertical-align:top;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.form-item.form-item-password .form-password-view button svg{display:block}
.form-item.form-item-password .form-password-view button svg.svg-eye-default path{fill:var(--color-dark)}
.form-item.form-item-password .form-password-view button svg.svg-eye-active path{fill:var(--color-hard-white)}
.form-item.form-item-password .form-password-view button.default{opacity:1;pointer-events:auto}
.form-item.form-item-password .form-password-view button.active{opacity:0;pointer-events:none}
.form-item.form-item-password.view .form-password-view button.default{opacity:0;pointer-events:none}
.form-item.form-item-password.view .form-password-view button.active{opacity:1;pointer-events:auto}
.form-item .form-field::after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;border-top:1px solid var(--color-hard-white)}
.form-item .form-radio{width:100%}
.form-item .form-radio label.radio{display:block;position:relative}
.form-item .form-radio label.radio input{position:absolute;top:0;left:0;width:0;height:0;clip:rect(0,0,0,0)}
.form-item .form-radio label.radio .radio-wrap{position:relative;width:100%;cursor:pointer}
.form-item .form-radio label.radio .radio-wrap::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:1px solid var(--color-border);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color 120ms ease-in-out;-moz-transition:border-color 120ms ease-in-out;-o-transition:border-color 120ms ease-in-out;transition:border-color 120ms ease-in-out}
.form-item .form-radio label.radio .radio-wrap b.icon,.form-item .form-radio label.radio .radio-wrap span.name{display:inline-block;vertical-align:top}
.form-item .form-radio label.radio .radio-wrap b.icon{position:relative}
.form-item .form-radio label.radio .radio-wrap b.icon span{display:block;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
.form-item .form-radio label.radio .radio-wrap b.icon span svg{display:block}
.form-item .form-radio label.radio .radio-wrap b.icon span.default{z-index:1;opacity:1}
.form-item .form-radio label.radio .radio-wrap b.icon span.selected{opacity:0}
.form-item .form-radio label.radio .radio-wrap b.icon span.default svg path{fill:var(--color-hard-gray)}
.form-item .form-radio label.radio .radio-wrap b.icon span.selected svg path{fill:var(--color-dark)}
.form-item .form-radio label.radio .radio-wrap span.name{color:var(--color-hard-gray);font-weight:500;-webkit-transition:color 120ms ease-in-out;-moz-transition:color 120ms ease-in-out;-o-transition:color 120ms ease-in-out;transition:color 120ms ease-in-out}
.form-item .form-radio label.radio .radio-wrap span.check{display:block;position:absolute;opacity:0;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.form-item .form-radio label.radio .radio-wrap span.check svg{display:block}
.form-item .form-radio label.radio .radio-wrap span.check svg path{fill:var(--color-dark)}
.form-item .form-radio label.radio input:checked ~ .radio-wrap{cursor:default}
.form-item .form-radio label.radio input:checked ~ .radio-wrap::before{border-color:var(--color-dark)}
.form-item .form-radio label.radio input:checked ~ .radio-wrap b.icon span.default{opacity:0;z-index:inherit}
.form-item .form-radio label.radio input:checked ~ .radio-wrap b.icon span.selected{opacity:1;z-index:1}
.form-item .form-radio label.radio input:checked ~ .radio-wrap span.name{color:var(--color-dark)}
.form-item .form-radio label.radio input:checked ~ .radio-wrap span.check{opacity:1}
.form-item .form-message{position:absolute;left:0;color:var(--color-red);opacity:0;pointer-events:none}
.form-row .form-item.focus .form-title,.form-row .form-item.record .form-title{top:0;left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}
.form-row .form-item.focus .form-title{-webkit-transition:all 180ms ease-in-out;-moz-transition:all 180ms ease-in-out;-ms-transition:all 180ms ease-in-out;-o-transition:all 180ms ease-in-out;transition:all 180ms ease-in-out}
.form-item.error .form-field::after{border-top-color:var(--color-red)}
.form-item.error .form-field input{color:var(--color-red)}
.form-item.error .form-message{opacity:1}
.form-row-group{display:-webkit-box;display:-ms-flex;display:flex;width:100%}
.form-row-group._j-sb{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.form-row-group .form-item{display:-webkit-box;display:-ms-flex;display:flex;width:100%}
.form-row-group .form-item .form-title{padding-bottom:10px;color:var(--color-dark);font-weight:500}
.form-row-group .form-item .form-title label{display:inline-block;vertical-align:top}
.form-row-group .form-item .form-group{position:relative}
.form-item .form-field-row{position:relative}
.form-item .form-field-row .form-message{z-index:1;width:100%;background-color:var(--color-white)}
.form-extra,.form-notice{color:var(--color-soft-gray)}
.form-notice{position:relative}
.form-notice::before{content:"";display:block;position:absolute;left:0;background-color:var(--color-soft-gray);border-radius:50%;pointer-events:none}
.form-extra span,.form-extra a,.form-notice span,.form-notice a{display:inline-block;vertical-align:top}
.form-extra a,.form-notice a{position:relative;color:var(--color-dark)}
.form-extra a::before,.form-notice a::before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;border-top:1px solid var(--color-dark);pointer-events:none}
.form-buttons button{display:inline-block;width:100%;vertical-align:top;text-align:center}
.form-buttons button span{display:inline-block;position:relative;z-index:1;vertical-align:top;font-weight:700}
main#accounts .form-buttons button[type="submit"]{background-color:var(--color-blue)}
.form-buttons button.btn-red[type="submit"]{background-color:var(--color-red)}
.form-buttons button.btn-outline[type="submit"]{background-color:var(--color-white)}
.form-buttons button.btn-soft-gray[type="submit"]{background-color:var(--color-soft-gray)}
.form-buttons button.btn-outline-dark[type="submit"]{border:1px solid var(--color-dark)}
.form-buttons button[type="submit"] span{color:var(--color-white)}
.form-buttons button.btn-outline-dark[type="submit"] span{color:var(--color-dark)}
.form-buttons button::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.form-buttons button.btn-outline::after{background-color:rgba(34,34,34,0.025)}
.form-buttons button:hover::after{opacity:1}

/*-- Social Login. --*/
.sign-socials{}
.sign-socials li{}
.form-divider{display:block;width:100%;height:0;border-top:1px solid var(--color-border)}
.sign-socials li a{display:inline-block;position:relative;width:100%;vertical-align:top;background-color:var(--color-hard-white);text-align:center}
.sign-socials li a.btn-sign-facebook{background-color:var(--color-facebook)}
.sign-socials li a.btn-sign-gmail{background-color:var(--color-white)}
.sign-socials li a.btn-sign-gmail::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:1px solid var(--color-hard-white);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.sign-socials li a.btn-sign-gmail span.name{color:var(--color-dark)}
.sign-socials li a.btn-sign-naver{background-color:var(--color-naver)}
.sign-socials li a::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.sign-socials li a:hover::after{opacity:1}
.sign-socials li a.btn-sign-gmail::after{background-color:rgba(34,34,34,0.025)}
.sign-socials li a span{display:inline-block;position:relative;z-index:1;vertical-align:top}
.sign-socials li a span.icon svg{display:block}
.sign-socials li a span.icon svg.svg-icon-facebook path{fill:var(--color-white)}
.sign-socials li a span.icon svg.svg-icon-naver polygon{fill:var(--color-white)}
.sign-socials li a span.name{color:var(--color-white);font-weight:700}
/*-- Breadcrumbs. --*/
.section-content .breadcrumbs{}
.breadcrumbs .breadcrumb-list{}
.breadcrumbs .breadcrumb-list li{display:inline-block;vertical-align:top}
.breadcrumbs .breadcrumb-list li + li{position:relative}
.breadcrumbs .breadcrumb-list li + li::before{content:"";display:block;position:absolute;background-image:url(../img/common/breadcrumb-arrow.svg)}
.breadcrumbs .breadcrumb-list li a,.breadcrumbs .breadcrumb-list li b{text-transform:uppercase;font-weight:500}
.breadcrumbs .breadcrumb-list li a{color:var(--color-soft-gray)}
.breadcrumbs .breadcrumb-list li a.home{font-weight:700}
.breadcrumbs .breadcrumb-list li a span,.breadcrumbs .breadcrumb-list li b span{display:inline-block;vertical-align:top}
.breadcrumbs .breadcrumb-list li a span{position:relative}
.breadcrumbs .breadcrumb-list li a span::before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;border-top:1px solid var(--color-soft-gray);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.breadcrumbs .breadcrumb-list li a:hover span::before{opacity:1}
.breadcrumbs .breadcrumb-list li b{color:var(--color-dark)}
/*-- Steps. --*/
.section-content .steps{}
.steps .step-list{}
.steps .step-list li{display:inline-block;vertical-align:top}
.steps .step-list li + li{position:relative}
.steps .step-list li + li::before{content:"";display:block;position:absolute;top:50%;height:0;border-bottom:1px solid var(--color-soft-white);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.steps .step-list li span{display:inline-block;vertical-align:top;color:var(--color-soft-gray)}
.steps .step-list li span.no{border:1px solid var(--color-soft-white);border-radius:50%;text-align:center}
.steps .step-list li.active span.no{background-color:var(--color-dark);border-color:var(--color-dark);color:var(--color-white)}
.steps .step-list li span.name{font-weight:500}
.steps .step-list li.active span.name{color:var(--color-dark)}
/*-- Recommends. --*/
.section-content .recommends{}
.recommends h2.title{font-weight:700}
.recommends h2.title span{display:inline-block;vertical-align:top}
.recommends .recommend-list{}
.recommends .recommend-list li{display:inline-block;vertical-align:top}
.recommends .recommend-list li a{display:block;border:1px solid var(--color-hard-white);color:var(--color-hard-gray);font-weight:500;-webkit-transition:color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;-moz-transition:color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;-ms-transition:color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;-o-transition:color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;transition:color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out}
.recommends .recommend-list li a:hover{border-color:var(--color-cyan);color:var(--color-cyan)}
.recommends .recommend-list li.selected a{background-color:var(--color-cyan);border-color:var(--color-cyan);color:var(--color-white)}
.recommends .recommend-list li a span{display:inline-block;vertical-align:top}

/*-- No List. --*/
.no-list{text-align:center;color:var(--color-hard-white);font-weight:600}

/*-- Class List. --*/
.section-content .class-list{border-top:1px solid var(--color-border)}
.class-list .class-item{display:-webkit-box;display:-ms-flex;display:flex;width:100%}
.class-list .class-item .class-thumbnail{overflow:hidden}
.class-list .class-item .class-thumbnail a{overflow:hidden;display:block;width:100%;height:100%;align-content:center}
.class-list .class-item .class-thumbnail a img{display:inline-block;width:100%;vertical-align:top}
.class-list .class-item .class-info{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
.class-list .class-item .class-info h3.title{font-weight:700}
.class-list .class-item .class-info h3.title a,.class-list .class-item .class-info h3.title a span{display:inline-block;vertical-align:top}
.class-list .class-item .class-info h3.title a:hover{color:var(--color-cyan)}
.class-list .class-item .class-info .desc{margin-bottom:auto;color:var(--color-soft-gray)}
.class-list .class-item .class-info .tags{}
.class-list .class-item .class-info .tags li{display:inline-block;vertical-align:top}
.class-list .class-item .class-info .tags li a{display:block;color:var(--color-cyan);font-weight:500}
.class-list .class-item .class-info .tags li a span{display:inline-block;vertical-align:top}
.class-list .class-item .class-info .tags li a span.hash + span{position:relative}
.class-list .class-item .class-info .tags li a span.hash + span::after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;border-top:1px solid var(--color-cyan);opacity:0;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
.class-list .class-item .class-info .tags li a:hover span.hash + span::after{opacity:1}
.class-list .class-item .class-info .rating {margin-top: 3px; display: flex}
.class-list .class-item .class-info .rating .course-rating {display: inline-block}
.class-list .class-item .class-info .rating .course-rating-label {margin-left:6px; display: inline-block; color:var(--color-cyan);}

.class-list .class-item .class-util{display:-webkit-box;display:-ms-flex;display:flex;position:relative;border:1px solid var(--color-hard-white);-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
.class-list .class-item .class-util .info li{}
.class-list .class-item .class-util .info li span{display:inline-block;vertical-align:top}
.class-list .class-item .class-util .info li span.icon{}
.class-list .class-item .class-util .info li span.icon svg{display:block}
.class-list .class-item .class-util .info li span.icon svg path{fill:var(--color-hard-gray)}
.class-list .class-item .class-util .info li span.name{position:relative}
.class-list .class-item .class-util .info li span.name::after{content:'';display:block;position:absolute;border-left:1px solid var(--color-hard-white)}
.class-list .class-item .class-util .info li span.desc{font-weight:500}
.class-list .class-item .class-util .info li .period{display:inline-block;vertical-align:top}
.class-list .class-item .class-util .info li .period span.count{font-weight:700}
.class-list .class-item .class-util .info li .period span.unit{font-weight:500}
.class-list .class-item .class-util .heart{position:absolute}
.class-list .class-item .class-util .heart a.btn-heart,.class-list .class-item .class-util .heart a.btn-heart b.icon{display:block}
.class-list .class-item .class-util .heart a.btn-heart b.icon{position:relative}
.class-list .class-item .class-util .heart a.btn-heart b.icon span{display:block;position:absolute;top:0;left:0;pointer-events:none;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
.class-list .class-item .class-util .heart a.btn-heart b.icon span svg{display:block}
.class-list .class-item .class-util .heart a.btn-heart b.icon span.default{z-index:1;opacity:1}
.class-list .class-item .class-util .heart a.btn-heart b.icon span.active{opacity:0}
.class-list .class-item .class-util .heart a.btn-heart:hover b.icon span.active{opacity:0.1}
.class-list .class-item .class-util .heart a.btn-heart b.icon span.default svg path{fill:var(--color-hard-gray)}
.class-list .class-item .class-util .heart a.btn-heart b.icon span.active svg path{fill:var(--color-red)}
.class-list .class-item .class-util .heart a.btn-heart.active b.icon span.default{opacity:0;z-index:inherit}
.class-list .class-item .class-util .heart a.btn-heart.active b.icon span.active{opacity:1;z-index:1}
.class-list .class-item .class-util .price{}
.class-list .class-item .class-util .price .regular-price{display:inline-block;position:relative;vertical-align:top;color:var(--color-soft-gray)}
.class-list .class-item .class-util .price .regular-price::before{content:"";display:block;position:absolute;top:50%;height:0;border-top:1px solid var(--color-soft-gray);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.class-list .class-item .class-util .price .regular-price span.count,.class-list .class-item .class-util .price .display-price span.count{font-weight:700}
.class-list .class-item .class-util .price .regular-price span.unit,.class-list .class-item .class-util .price .display-price span.unit{font-weight:500}
.class-list .class-item .class-util .price .display-price{display:block}
.class-list .class-item .class-util .btns{position:absolute}
.class-list .class-item .class-util .btns li{}
.class-list .class-item .class-util .btns li + li{}
.class-list .class-item .class-util .btns li a{display:block;position:relative;background-color:var(--color-hard-white);text-align:center;color:var(--color-white);font-weight:700}
.class-list .class-item .class-util .btns li a::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.class-list .class-item .class-util .btns li a:hover::after{opacity:1}
.class-list .class-item .class-util .btns li a span{display:inline-block;position:relative;z-index:1;vertical-align:top;white-space:nowrap}
.class-list .class-item .class-util .btns li a.btn-apply{background-color:var(--color-red)}

/*-- Class Detail. --*/
.class-detail .class-detail-content{display:-webkit-box;display:-ms-flex;display:flex;position:relative}
.class-detail-content .class-info h2.title{font-weight:700}
.class-detail-content .class-info h2.title span{display:inline-block;vertical-align:top}
.class-detail-content .class-info .desc{color:var(--color-soft-gray)}
.class-detail-content .class-info .tags{}
.class-detail-content .class-info .tags li{display:inline-block;vertical-align:top}
.class-detail-content .class-info .tags li b{display:block;color:var(--color-cyan);font-weight:500}
.class-detail-content .class-info .tags li b span{display:inline-block;vertical-align:top}
.class-detail-content .class-util{position:relative;border:1px solid var(--color-border)}
.class-detail-content .class-util .info-content{}
.class-detail-content .class-util .info-content > span.name{font-weight:500}
.class-detail-content .class-util .info-content .lecturer{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.class-detail-content .class-util .info-content .lecturer .media{overflow:hidden;background-color:var(--color-hard-white);border-radius:50%}
.class-detail-content .class-util .info-content .lecturer .media img{display:inline-block;width:100%;vertical-align:top}
.class-detail-content .class-util .info-content .lecturer .info{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.class-detail-content .class-util .info-content .lecturer .info span.name{display:inline-block;vertical-align:top;font-weight:500}
.class-detail-content .class-util .info-content .lecturer .info a.link{color:var(--color-soft-gray)}
.class-detail-content .class-util .info-content .lecturer .info a.link span{display:inline-block;position:relative;vertical-align:top}
.class-detail-content .class-util .info-content .lecturer .info a.link span:not(.icon)::before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;border-top:1px solid var(--color-soft-gray);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.class-detail-content .class-util .info-content .lecturer .info a.link:hover span:not(.icon)::before{opacity:1}
.class-detail-content .class-util .info-content .lecturer .info a.link span.icon{background-color:var(--color-cyan);border-radius:50%}
.class-detail-content .class-util .info-content .lecturer .info a.link span.icon svg{display:block}
.class-detail-content .class-util .info-content .lecturer .info a.link span.icon svg path{fill:var(--color-white)}
.class-detail-content .class-util .info-columns{}
.class-detail-content .class-util .info-columns li{display:inline-block;vertical-align:top}
.class-detail-content .class-util .info-columns li > span.name{font-weight:500}
.class-detail-content .class-util .info-columns li .clip,.class-detail-content .class-util .info-columns li .period{color:var(--color-gray);font-weight:300}
.class-detail-content .class-util .info-columns li .clip span,.class-detail-content .class-util .info-columns li .period span{display:inline-block;vertical-align:top}
.class-detail-content .class-util .heart{position:absolute}
.class-detail-content .class-util .heart a.btn-heart{display:block}
.class-detail-content .class-util .heart a.btn-heart > b,.class-detail-content .class-util .heart a.btn-heart > span{display:inline-block;vertical-align:top}
.class-detail-content .class-util .heart a.btn-heart > span{position:relative;font-weight:500}
.class-detail-content .class-util .heart a.btn-heart > span::before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;border-top:1px solid var(--color-dark);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.class-detail-content .class-util .heart a.btn-heart:hover > span::before{opacity:1}
.class-detail-content .class-util .heart a.btn-heart b.icon{position:relative}
.class-detail-content .class-util .heart a.btn-heart b.icon span{display:block;position:absolute;top:0;left:0;pointer-events:none;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
.class-detail-content .class-util .heart a.btn-heart b.icon span svg{display:block}
.class-detail-content .class-util .heart a.btn-heart b.icon span.default{z-index:1;opacity:1}
.class-detail-content .class-util .heart a.btn-heart b.icon span.active{opacity:0}
.class-detail-content .class-util .heart a.btn-heart:hover b.icon span.active{opacity:0.1}
.class-detail-content .class-util .heart a.btn-heart b.icon span.default svg path{fill:var(--color-hard-gray)}
.class-detail-content .class-util .heart a.btn-heart b.icon span.active svg path{fill:var(--color-red)}
.class-detail-content .class-util .heart a.btn-heart.active b.icon span.default{opacity:0}
.class-detail-content .class-util .heart a.btn-heart.active b.icon span.active{opacity:1}
.class-detail-content .class-util .price-list{border-top:1px solid var(--color-border)}
.class-detail-content .class-util .price-list .price-item{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.class-detail-content .class-util .price-list .price-item span.name{font-weight:500}
.class-detail-content .class-util .price-list .price-item .regular-price,.class-detail-content .class-util .price-list .price-item .display-price{font-weight:900}
.class-detail-content .class-util .price-list .price-item .regular-price{position:relative;color:var(--color-soft-gray)}
.class-detail-content .class-util .price-list .price-item .regular-price::before{content:"";display:block;position:absolute;top:50%;height:0;border-top-style:solid;border-top-color:var(--color-soft-gray);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.class-detail-content .class-util .btns li{}
.class-detail-content .class-util .btns li + li{}
.class-detail-content .class-util .btns li a{display:block;position:relative;background-color:var(--color-hard-white);text-align:center;color:var(--color-white);font-weight:700}
.class-detail-content .class-util .btns li a::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.class-detail-content .class-util .btns li a:hover::after{opacity:1}
.class-detail-content .class-util .btns li a span{display:inline-block;position:relative;z-index:1;vertical-align:top;white-space:nowrap}
.class-detail-content .class-util .btns li a.btn-apply{background-color:var(--color-red)}
.class-detail-content .class-view{margin-right:auto;order:0}
.class-detail-content .class-view .class-hero{width:100%}
.class-detail-content .class-view .class-tabs{background-color:var(--color-white)}
.class-detail-content .class-view .class-tabs::before{content:"";display:block;position:absolute;right:0;bottom:0;left:0;height:0;border-top:1px solid var(--color-soft-gray)}
.class-detail-content .class-view .class-tabs li{display:inline-block;vertical-align:top}
.class-detail-content .class-view .class-tabs li a{display:inline-block;position:relative;z-index:900;vertical-align:top;color:var(--color-dark);font-weight:700;cursor:pointer}
.class-detail-content .class-view .class-tabs li a::after{content:"";display:block;position:absolute;bottom:0;right:0;left:0;width:100%;height:0;border-bottom-style:solid;border-bottom-color:var(--color-dark);pointer-events:none;opacity:0;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
.class-detail-content .class-view .class-tabs li a:hover::after,.class-detail-content .class-view .class-tabs li.active a::after{opacity:1}
.class-detail-content .class-view .class-tabs li a span{display:inline-block;vertical-align:top}
.class-detail-content .class-view section + section{border-top:1px solid var(--color-border)}
.class-detail-content .class-view section h3.title{display:inline-block;position:relative;vertical-align:top;font-weight:700}
.class-detail-content .class-view section h3.title span{display:inline-block;vertical-align:top}
.class-detail-content .class-view section h3.title::before{content:"";display:block;position:absolute;background-color:var(--color-cyan);border-radius:50%}
.class-detail-content .class-view section .content .subject{font-weight:700}
.class-detail-content .class-view section .content .explain{font-weight:500}
.class-detail-content .class-view section .content .clip{font-weight:700}
.class-detail-content .class-view section .content .explain,.class-detail-content .class-view section .content .clip span{display:inline-block;vertical-align:top}
.class-detail-content .class-view section .content .figures{display:-webkit-box;display:-ms-flex;display:flex}
.class-detail-content .class-view section .content .figures figure{overflow:hidden;background-color:var(--color-hard-white)}
.class-detail-content .class-view section .content .figures figure img{display:inline-block;width:100%;vertical-align:top}
.class-detail-content .class-view section .content .desc{color:var(--color-hard-gray);font-weight:300}
.class-detail-content .class-view section .content .desc p{}
.class-detail-content .class-view section .content .lecturer{display:-webkit-box;display:-ms-flex;display:flex}
.class-detail-content .class-view section .content .lecturer .media{overflow:hidden;background-color:var(--color-hard-white);border-radius:50%}
.class-detail-content .class-view section .content .lecturer .media img{display:inline-block;width:100%;vertical-align:top}
.class-detail-content .class-view section .content .lecturer .info .info-head{position:relative}
.class-detail-content .class-view section .content .lecturer .info .info-head span.name{display:inline-block;vertical-align:top;font-weight:700}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link{position:absolute;right:0;color:var(--color-soft-gray)}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link span{display:inline-block;position:relative;vertical-align:top}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link span:not(.icon)::before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;border-top:1px solid var(--color-soft-gray);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link:hover span:not(.icon)::before{opacity:1}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link span.icon{background-color:var(--color-cyan);border-radius:50%}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link span.icon svg{display:block}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link span.icon svg path{fill:var(--color-white)}
.class-detail-content .class-view section .content .lecturer .info .info-desc{color:var(--color-hard-gray);font-weight:300}
.class-detail-content .class-view section .content .lecturer .info .info-desc p{}
.class-detail-content .class-view section .content .curriculum-list{position:relative}
.class-detail-content .class-view section .content .curriculum-list::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--color-hard-white)}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item{display:-webkit-box;display:-ms-flex;display:flex;position:relative;width:100%;border:1px solid var(--color-hard-white);-webkit-transition:border-color 120ms ease-in-out;-moz-transition:border-color 120ms ease-in-out;-ms-transition:border-color 120ms ease-in-out;-o-transition:border-color 120ms ease-in-out;transition:border-color 120ms ease-in-out}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item + .curriculum-item{margin-top:-1px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item:hover{z-index:1;border-color:var(--color-cyan)}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .name{}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .name span{display:inline-block;vertical-align:top}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .name span.no{white-space:nowrap;color:var(--color-soft-gray);font-weight:500}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util{display:-webkit-box;display:-ms-flex;display:flex;margin-left:auto}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .btn-preview{display:inline-block;position:relative;background:var(--color-cyan);background:-moz-linear-gradient(120deg,rgba(80,185,211,1) 0%,rgba(46,169,220,1) 100%);background:-webkit-linear-gradient(120deg,rgba(80,185,211,1) 0%,rgba(46,169,220,1) 100%);background:linear-gradient(120deg,rgba(80,185,211,1) 0%,rgba(46,169,220,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#50b9d3",endColorstr="#2ea9dc",GradientType=1);vertical-align:top;color:#fff;font-weight:500}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .btn-preview::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:4px;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .btn-preview span{display:inline-block;position:relative;z-index:1;vertical-align:top}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .btn-preview:hover::after{opacity:1}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .btn-preview span{display:inline-block;vertical-align:top}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration{font-weight:300}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span.icon + .time{display:inline-block;vertical-align:top}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span.icon svg{display:block}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span.icon svg path{fill:var(--color-hard-gray)}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span{display:inline-block;vertical-align:top}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span + span{position:relative}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span + span::before{content:':';display:block;position:absolute;top:0;left:0;text-align:center}

.class-detail-content .class-view section .content form{margin-top: 30px;}
.class-detail-content .class-view section .content .form-name{margin-left:15px; font-size: 1.5rem;line-height: 1.5rem;}
.class-detail-content .class-view section .content .form-rating{margin-left:12px; margin-top:10px;}
.class-detail-content .class-view section .content .form-rating .course-rating{display:inline-block;}
.class-detail-content .class-view section .content .form-rating .course-rating-label{margin-left:12px; display:inline-block;}

.class-detail-content .class-view section .content .form-box{position: relative}
.class-detail-content .class-view section .content .form-box .form-field{margin-top:5px;}
.class-detail-content .class-view section .content .form-box .form-util{position: absolute; bottom:0; right:0; padding:10px 10px;width:60px; height:60px;}
.class-detail-content .class-view section .content .form-box .form-control{overflow-y: hidden;padding: 12px 14px;font-size: 1.5rem;line-height: 1.8rem; background-color: #F7F7F7; border-radius: 20px; width: 100%}
.class-detail-content .class-view section .content .form-box .form-util li{}
.class-detail-content .class-view section .content .form-box .form-util li + li{margin-left:12px}
.class-detail-content .class-view section .content .form-box .form-util li .btn{width:40px;height:40px;border-radius:8px}
.class-detail-content .class-view section .content .form-box .form-util li .btn span.icon{width:24px;height:24px}

.class-detail-content .class-view section .content .comment-item{margin-top: 15px; padding-top: 15px; border-top: 1px solid #ebebeb;}
.class-detail-content .class-view section .content .comment-item .comment-info{display: flex;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.class-detail-content .class-view section .content .comment-item .comment-info .author{text-transform: uppercase;font-size: 1.5rem;font-weight: 500;line-height: 2.5rem;}
.class-detail-content .class-view section .content .comment-item .comment-info .published {margin-left: 10px;color: #999999}
.class-detail-content .class-view section .content .comment-item .comment-content {margin-top: 10px;}
.class-detail-content .class-view section .content .comment-item .comment-content .view{display: flex;position: relative;}
.class-detail-content .class-view section .content .comment-item .comment-content .view .desc{width: 100%;padding-right: 80px;font-size: 1.3rem;font-weight: 400;line-height: 2rem;}

.class-detail-content .class-view section .content .comment-item .comment-content .util{position:absolute;top:0;right:0}
.class-detail-content .class-view section .content .comment-item .comment-content .util li{display:inline-block;vertical-align:top}
.class-detail-content .class-view section .content .comment-item .comment-content .util li + li{margin-left:12px}
.class-detail-content .class-view section .content .comment-item .comment-content .util li .btn{overflow:hidden;display:block;width:24px;height:24px;background-color:#000000;border-radius:8px}
.class-detail-content .class-view section .content .comment-item .comment-content .util li .btn span.icon{display:block;width:24px;height:24px}
.class-detail-content .class-view section .content .comment-item .comment-content .util li .btn span.icon svg{display:block}
.class-detail-content .class-view section .content .comment-item .comment-content .util li .btn span.icon svg path{fill:#ffffff}

/*-- Shop Status. --*/
.section-content .shop-status{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.shop-status .badge{overflow:hidden;display:block;background-color:var(--color-soft-red);color:var(--color-red);font-weight:500}
.shop-status .badge span{display:inline-block;vertical-align:top}
.shop-status .datetime{font-weight:500}
.shop-status .datetime span{display:inline-block;vertical-align:top}
.shop-status .datetime span.time > span + span{position:relative}
.shop-status .datetime span.time > span + span::before{content:':';display:block;position:absolute;top:0;left:0;text-align:center}

/*-- Shop Data List. --*/
.section-content .shop-data-list{}
.shop-data-list section.shop-data-item{}
.shop-data-list section.shop-data-item h3.title{font-weight:700}
.shop-data-list section.shop-data-item h3.title span{display:inline-block;vertical-align:top}
.shop-data-list section.shop-data-item .content{border-top:1px solid var(--color-dark)}

/*-- Cart List. --*/
.cart-list .cart-item{overflow:hidden;display:-webkit-box;display:-ms-flex;display:flex;position:relative;width:100%}
.cart-list .cart-item::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid var(--color-border);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.cart-list .cart-item span.name{display:inline-block;vertical-align:top;color:var(--color-gray);font-weight:300}
.cart-list .cart-item .title .desc{font-weight:700}
.cart-list .cart-item .range .period span{display:inline-block;vertical-align:top}
.cart-list .cart-item .range .period span.count{font-weight:700}
.cart-list .cart-item .range .period span.unit{font-weight:500}
.cart-list .cart-item .sell-price .price,.cart-list .cart-item .pay-price .price{display:-webkit-box;display:-ms-flex;display:flex}
.cart-list .cart-item .sell-price .price .regular-price{display:inline-block;position:relative;vertical-align:top;color:var(--color-soft-gray)}
.cart-list .cart-item .sell-price .price .regular-price,.cart-list .cart-item .sell-price .price .display-price,.cart-list .cart-item .pay-price .price .display-price{display:block}
.cart-list .cart-item .sell-price .price .regular-price::before{content:"";display:block;position:absolute;top:50%;height:0;border-top-style:solid;border-top-color:var(--color-soft-gray);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.cart-list .cart-item .sell-price .price .regular-price span,.cart-list .cart-item .sell-price .price .display-price span,.cart-list .cart-item .pay-price .price .display-price span{display:inline-block;vertical-align:top}
.cart-list .cart-item .sell-price .price .regular-price span.count,.cart-list .cart-item .sell-price .price .display-price span.count,.cart-list .cart-item .pay-price .price .display-price span.count{font-weight:700}
.cart-list .cart-item .sell-price .price .regular-price span.unit,.cart-list .cart-item .sell-price .price .display-price span.unit,.cart-list .cart-item .pay-price .price .display-price span.unit{font-weight:500}
.cart-list .cart-item .pay-price .price .display-price{color:var(--color-red)}
.cart-list .cart-item button.btn-delete{border:1px solid var(--color-border);text-align:center;-webkit-transition:border-color 120ms ease-in-out;-moz-transition:border-color 120ms ease-in-out;-ms-transition:border-color 120ms ease-in-out;-o-transition:border-color 120ms ease-in-out;transition:border-color 120ms ease-in-out}
.cart-list .cart-item button.btn-delete:hover{border-color:var(--color-dark)}
.cart-list .cart-item button.btn-delete span{display:inline-block;vertical-align:top}

/*-- Thankyou. --*/
.section-content .thankyou{text-align:center}
.thankyou .comment{background-color:var(--color-bubble)}
.thankyou .comment p{position:relative;color:var(--color-hard-gray);font-weight:700}
.thankyou .comment p span{display:inline-block;vertical-align:top}
.thankyou .comment p.underline span::before{content:"";display:block;position:absolute;background-color:var(--color-cyan)}
.thankyou .comment p span{position:relative}
.thankyou .comment p span.bankin{}
.thankyou .comment p span.bankin svg{display:inline-block;vertical-align:top}
.thankyou .comment p span.bankin svg path{fill:var(--color-hard-gray)}
.thankyou a{display:inline-block;position:relative;vertical-align:top;text-align:center;color:var(--color-white);font-weight:700}
.thankyou a.btn-lecture{background-color:var(--color-blue)}
.thankyou a::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.thankyou a:hover::after{opacity:1}
.thankyou a span{display:inline-block;position:relative;z-index:1;vertical-align:top}

/*-- Order List. --*/
.section-content .shop-data-list section.shop-data-item .content .order-list{padding-top:24px}
.order-list .order-item{overflow:hidden;display:-webkit-box;display:-ms-flex;display:flex;position:relative;width:100%;padding:24px 32px}
.order-list .order-item::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid var(--color-border);border-radius:16px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.order-list .order-item + .order-item{margin-top:16px}
.order-list .order-item span.name{display:inline-block;vertical-align:top;color:var(--color-gray);font-size:1.167rem;font-weight:300;line-height:1.667rem}

.order-list .order-item .title .desc{font-size:1.667rem;font-weight:700;line-height:2.333rem}
.order-list .order-item .order-price .price{display:-webkit-box;display:-ms-flex;display:flex}
.order-list .order-item .order-price .price .display-price{display:block;color:var(--color-red);font-size:1.333rem;line-height:2rem}
.order-list .order-item .order-price .price .display-price span{display:inline-block;vertical-align:top}
.order-list .order-item .order-price .price .display-price span.count{font-weight:700}
.order-list .order-item .order-price .price .display-price span.unit{font-weight:500}
.order-list .order-item .order-price .price .display-price span.count + span.unit{margin-left:2px}
.section-content .shop-data-list section.shop-data-item .content .orderer-form{padding-top:20px}
.section-content .shop-data-list section.shop-data-item .content .orderer-info{padding-top:20px}
.section-content .shop-data-list section.shop-data-item .content .statement-list{display:-webkit-box;display:-ms-flex;display:flex;position:relative;padding-top:28px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

/*-- Statement List. --*/
.statement-list .statement-symbol{position:relative;width:0;pointer-events:none}
.statement-list .statement-symbol.minus::before{content:"";display:block;position:absolute;width:20px;height:0;vertical-align:top;border-top:2px solid var(--color-dark);-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
.statement-list .statement-symbol.equals::before{content:"";display:block;position:absolute;width:20px;height:0;margin-top:-2px;vertical-align:top;border-top:2px solid var(--color-dark);-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
.statement-list .statement-symbol.equals::after{content:"";display:block;position:absolute;width:20px;height:0;margin-top:2px;vertical-align:top;border-top:2px solid var(--color-dark);-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
.statement-list .statement-item span.name{display:inline-block;vertical-align:top;color:var(--color-soft-gray);font-size:1.167rem;font-weight:500;line-height:1.667rem}

.statement-list .statement-item .price{}
.statement-list .statement-item .price .display-price{display:block;font-size:1.833rem;line-height:2.833rem}
.statement-list .statement-item .price .display-price span{display:inline-block;vertical-align:top;font-weight:900}
.statement-list .statement-item .price .display-price span.count + span.unit{margin-left:2px}
.statement-list .statement-item.total .price .display-price{color:var(--color-red)}
.section-content .shop-data-list section.shop-data-item .content .payment-method-form{padding-top:28px}

.shop-data-list section.shop-data-item .price span.count + span.unit{margin-left:2px}
.shop-data-list section.shop-data-item .datetime > span + span{margin-left:4px}
.shop-data-list section.shop-data-item .datetime span.time > span + span{position:relative;padding-left:7px}
.shop-data-list section.shop-data-item .datetime span.time > span + span::before{content:':';display:block;position:absolute;top:0;left:0;width:7px;text-align:center}
.section-content .shop-data-list section.shop-data-item .content .payment-method-info{padding-top:20px}
.section-content .shop-data-list section.shop-data-item .content .refund-info{padding-top:20px}
.shop-data-list section.shop-data-item + .shop-util{margin-top:80px}
.section-content .shop-data-list.cancel .payment-method-info .price{position:relative}
.section-content .shop-data-list.cancel .payment-method-info .price::before{content:"";display:block;position:absolute;top:50%;right:-2px;left:-2px;height:0;border-top:1px solid var(--color-dark);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.section-content .shop-data-list .shop-util{text-align:center}
.section-content .shop-data-list .shop-util .form-notice{display:inline-block;vertical-align:top}
.section-content .shop-data-list .shop-util .form-buttons{text-align:center}
.section-content .shop-data-list .shop-util .form-buttons button{max-width:350px}

/*-- Section Columns. --*/
.section-columns{display:-webkit-box;display:-ms-flex;display:flex}
.section-columns .section-side{width:230px;padding-right:30px}

/*-- Side Navigation. --*/
nav#side-nav .side-nav-content{}
nav#side-nav .side-nav-content .greeting{font-size:2.5rem;font-weight:700;line-height:3.75rem}
nav#side-nav .side-nav-content .greeting span{display:inline-block;position:relative;vertical-align:top}
nav#side-nav .side-nav-content .greeting span + .me{margin-top:2px}
nav#side-nav .side-nav-content .greeting .me{}
nav#side-nav .side-nav-content .greeting .me span.name + span{margin-left:4px}
nav#side-nav .side-nav-content .greeting .me span.name + span::after{content:"";display:block;position:absolute;bottom:7px;right:-8px;width:6px;height:6px;background-color:var(--color-blue);border-radius:50%;pointer-events:none}
nav#side-nav .side-nav-content .greeting + .side-nav-menu{margin-top:40px}
nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list{overflow:hidden;border:1px solid var(--color-border);border-radius:4px}
nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list li{}
nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list li + li{border-top:1px solid var(--color-border)}
nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list li a{display:block;padding:9px 16px 11px;vertical-align:top;color:var(--color-gray);font-size:1.167rem;font-weight:300;line-height:1.667rem;cursor:pointer}
nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list li a:hover{color:var(--color-black)}
nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list li.active a{color:var(--color-black);font-weight:700;cursor:default}
nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list li a span{display:inline-block;vertical-align:top}
nav#side-nav .side-nav-content a.btn-signout{display:block;padding:9px 16px 11px;border-radius:4px;vertical-align:top;text-align:center;background-color:var(--color-soft-gray);color:var(--color-white);font-size:1.167rem;font-weight:500;line-height:1.667rem;-webkit-transition:background-color 120ms ease-in-out;-moz-transition:background-color 120ms ease-in-out;-ms-transition:background-color 120ms ease-in-out;-o-transition:background-color 120ms ease-in-out;transition:background-color 120ms ease-in-out}
nav#side-nav .side-nav-content a.btn-signout:hover{background-color:var(--color-black)}
nav#side-nav .side-nav-content a.btn-signout span{display:inline-block;vertical-align:top}

/*-- Section View. --*/
.section-columns .section-view > h2.title{font-size:2.5rem;font-weight:700;line-height:3.75rem}
.section-columns .section-view > h2.title + .content{margin-top:40px}

/*-- My Room. --*/
.section-columns .section-view .room-class-list-wrap{border-top:1px solid var(--color-black)}
.section-columns .section-view .room-class-list{display:-webkit-box;display:-ms-flex;display:flex;margin:-24px -20px;padding-top:24px;flex-wrap:wrap}
.section-columns .section-view .room-class-list .class-item{margin:24px 20px}
.room-class-list .class-item{display:-webkit-box;display:-ms-flex;display:flex;width:100%;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
.room-class-list .class-item .class-badge{}
.room-class-list .class-item .class-badge .badge{overflow:hidden;display:inline-block;padding:5px 11px 4px;background-color:var(--color-cyan);vertical-align:top;border-radius:12px;color:var(--color-white);font-size:0.8333rem;font-weight:500;line-height:1.25rem}
.room-class-list .class-item.end .class-badge .badge,.room-class-list .class-item.complete .class-badge .badge{background-color:var(--color-border);color:var(--color-soft-white)}
.room-class-list .class-item .class-badge .badge span{display:inline-block;vertical-align:top}
.room-class-list .class-item .class-badge + .class-thumbnail{margin-top:12px}
.room-class-list .class-item .class-thumbnail{overflow:hidden;width:100%;background-color:var(--color-border);border-radius:4px}
.room-class-list .class-item .class-thumbnail a,.room-class-list .class-item .class-thumbnail b{overflow:hidden;display:block;width:100%;height:100%}
.room-class-list .class-item .class-thumbnail a img,.room-class-list .class-item .class-thumbnail b img{display:inline-block;width:100%;vertical-align:top}
.room-class-list .class-item .class-thumbnail + .class-info{margin-top:10px}
.room-class-list .class-item .class-info{display:-webkit-box;display:-ms-flex;display:flex}
.room-class-list .class-item .class-info h3.title{font-size:1.667rem;font-weight:700;line-height:2.5rem}
.room-class-list .class-item .class-info h3.title a,.class-list .class-item .class-info h3.title a span,.room-class-list .class-item .class-info h3.title b,.class-list .class-item .class-info h3.title b span {display:inline-block;vertical-align:top}
.room-class-list .class-item .class-info h3.title a:hover{color:var(--color-cyan)}
.room-class-list .class-item .class-info .remain{margin-left:auto;padding-top:8px;color:var(--color-gray);font-weight:300}
.room-class-list .class-item .class-info .remain span{display:inline-block;vertical-align:top}
.room-class-list .class-item .class-info .remain span.count + span.unit{margin-left:1px}
.room-class-list .class-item .class-info + .class-progress{margin-top:10px}
.room-class-list .class-item .class-progress{position:relative;width:100%;height:30px}
.room-class-list .class-item.end .class-progress,.room-class-list .class-item.complete .class-progress{opacity:0.5}
.room-class-list .class-item .class-progress .process{color:var(--color-blue)}
.room-class-list .class-item.end .class-progress .process,.room-class-list .class-item.complete .class-progress .process{color:var(--color-dark)}
.room-class-list .class-item .class-progress .process span{display:inline-block;vertical-align:top}
.room-class-list .class-item .class-progress .process span.count + span.unit{margin-left:1px}
.room-class-list .class-item .class-progress .progress-bar{overflow:hidden;position:absolute;right:0;bottom:0;left:0;height:6px;border-radius:3px}
.room-class-list .class-item .class-progress .progress-bar span{display:block;position:absolute;top:0;left:0;vertical-align:top}
.room-class-list .class-item .class-progress .progress-bar span.track{width:100%;height:100%;background-color:var(--color-border)}
.room-class-list .class-item .class-progress .progress-bar span.current{width:0;height:100%;border-radius:3px;background-color:var(--color-blue)}
.room-class-list .class-item.end .class-progress .progress-bar span.current,.room-class-list .class-item.complete .class-progress .progress-bar span.current{background-color:var(--color-dark)}
.room-class-list .class-item .class-progress + .class-util{margin-top:10px}
.room-class-list .class-item .class-util{}
.room-class-list .class-item .class-util .btns{}
.room-class-list .class-item .class-util .btns ul{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
.room-class-list .class-item .class-util .btns li{}
.room-class-list .class-item .class-util .btns li a{display:inline-block;position:relative;padding:8px 16px;background-color:var(--color-hard-white);border-radius:8px;vertical-align:top;text-align:center;color:var(--color-white);font-size:1.167rem;font-weight:700;line-height:1.667rem;-webkit-transition:opacity 120ms ease-in-out,background-color 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out,background-color 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out,background-color 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out,background-color 120ms ease-in-out;transition:opacity 120ms ease-in-out,background-color 120ms ease-in-out}
.room-class-list .class-item .class-util .btns li a.btn-play{background-color:var(--color-soft-red);color:var(--color-red)}
.room-class-list .class-item .class-util .btns li a.btn-play:hover{background-color:var(--color-red);color:var(--color-white)}
.room-class-list .class-item .class-util .btns li a span{display:inline-block;position:relative;z-index:1;vertical-align:top;white-space:nowrap}
.room-class-list .class-item .class-util .btns li a span.icon{margin-top:4px;margin-bottom:4px}
.room-class-list .class-item .class-util .btns li a span.icon svg{display:block;width:12px;height:12px}
.room-class-list .class-item .class-util .btns li a span.icon svg path{fill:var(--color-red);-webkit-transition:fill 120ms ease-in-out;-moz-transition:fill 120ms ease-in-out;-ms-transition:fill 120ms ease-in-out;-o-transition:fill 120ms ease-in-out;transition:fill 120ms ease-in-out}
.room-class-list .class-item .class-util .btns li a.btn-play:hover span.icon svg path{fill:var(--color-white)}
.room-class-list .class-item .class-util .btns li a span.icon + span{margin-left:8px}

/*-- History. --*/
main#history-list .section-columns .section-view > h2.title + .content{margin-top:20px}
.section-columns .section-view .history-tabs{position:relative;width:100%;height:50px}
.history-tabs::before{content:"";display:block;position:absolute;right:0;bottom:0;left:0;height:0;border-top:1px solid var(--color-soft-gray)}
.history-tabs li{display:inline-block;vertical-align:top}
.history-tabs li + li{margin-left:24px}
.history-tabs li a{display:inline-block;position:relative;z-index:900;padding-top:15px;padding-bottom:15px;vertical-align:top;color:var(--color-gray);font-size:1.167rem;font-weight:300;line-height:1.667rem;cursor:pointer}
.history-tabs li a::after{content:"";display:block;position:absolute;bottom:0;right:0;left:0;width:100%;height:0;border-bottom:3px solid var(--color-dark);pointer-events:none;opacity:0;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
.history-tabs li.active a{font-weight:700}
.history-tabs li a:hover,.history-tabs li.active a{color:var(--color-dark)}
.history-tabs li a:hover::after,.history-tabs li.active a::after{opacity:1}
.history-tabs li a span{display:inline-block;vertical-align:top}
.section-columns .section-view .history-list{padding-top:24px}
.history-list .order-item{overflow:hidden;display:-webkit-box;display:-ms-flex;display:flex;position:relative;width:100%;padding:24px 32px;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
.history-list .order-item::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid var(--color-border);border-radius:16px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.history-list .order-item + .order-item{margin-top:24px}
.history-list .order-item span.name{display:inline-block;vertical-align:top;color:var(--color-gray);font-size:1.167rem;font-weight:300;line-height:1.667rem}
.history-list .order-item .title span.name + .desc{margin-top:10px}
.history-list .order-item .title .desc{font-size:1.667rem;font-weight:700;line-height:2.333rem}
.history-list .order-item .title + .statement{margin-top:20px}
.history-list .order-item .statement{display:-webkit-box;display:-ms-flex;display:flex;width:680px}
.history-list .order-item .statement .statement-price,.history-list .order-item .statement .statement-pay{flex:1}
.history-list .order-item .statement .statement-item{display:-webkit-box;display:-ms-flex;display:flex}
.history-list .order-item .statement .statement-item + .statement-item{margin-top:8px}
.history-list .order-item .statement .statement-item span.name{display:inline-block;width:110px;vertical-align:top;color:var(--color-soft-gray);font-size:1.167rem;font-weight:300;line-height:1.667rem}
.history-list .order-item .statement .statement-item .price{flex:1}
.history-list .order-item .statement .statement-item .price .display-price{display:inline-block;position:relative;vertical-align:top;font-size:1.167rem;font-weight:500;line-height:1.667rem}
.history-list .order-item .statement .statement-item .price .display-price span{display:inline-block;vertical-align:top}
.history-list .order-item .statement .statement-item .price .display-price span.count + span.unit{margin-left:1px}
.history-list .order-item .statement .statement-item.pay .price .display-price,.history-list .order-item .statement .statement-item.refund .price .display-price{color:var(--color-red);font-weight:700}
.history-list .order-item .statement .statement-pay.cancel .statement-item.pay .price .display-price{color:var(--color-soft-gray);font-weight:500}
.history-list .order-item .statement .statement-pay.cancel .statement-item.pay .price .display-price::before{content:"";display:block;position:absolute;top:50%;right:-2px;left:-2px;height:0;border-top:1px solid var(--color-soft-gray);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.history-list .order-item .statement .statement-item .method{flex:1;font-size:1.167rem;font-weight:500;line-height:1.667rem}
.history-list .order-item .statement .statement-item .method span{display:inline-block;vertical-align:top}
.history-list .order-item .status,.history-list .order-item a.btn-order-view{position:absolute;right:32px}
.history-list .order-item .status{display:-webkit-box;display:-ms-flex;display:flex;top:22px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.history-list .order-item .status .badge{overflow:hidden;display:block;padding:4px 12px 5px;background-color:var(--color-soft-red);border-radius:12px;color:var(--color-red);font-size:0.8333rem;font-weight:500;line-height:1.25rem}
.history-list .order-item .status .badge span{display:inline-block;vertical-align:top}
.history-list .order-item .status .badge + .datetime{margin-left:8px}
.history-list .order-item .status .datetime{font-size:1.167rem;font-weight:300;line-height:1.667rem}
.history-list .order-item .status .datetime span{display:inline-block;vertical-align:top}
.history-list .order-item .status .datetime > span + span{margin-left:4px}
.history-list .order-item .status .datetime span.time > span + span{position:relative;padding-left:7px}
.history-list .order-item .status .datetime span.time > span + span::before{content:':';display:block;position:absolute;top:0;left:0;width:7px;text-align:center}
.history-list .order-item a.btn-order-view{display:block;bottom:27px;font-size:0.9167rem;font-weight:500;line-height:1.417rem;border-bottom:1px solid var(--color-black)}
.history-list .order-item a.btn-order-view span{display:inline-block;vertical-align:top}

/*-- History View. --*/
main#history-view .section-content > h2.title + .shop-status,main#history-view .section-content > h2.title + .shop-data-list{margin-top:40px}
main#history-view .section-content .shop-status + .shop-data-list{margin-top:24px}

/*-- Heart. --*/
.section-columns .section-view .heart-class-list-wrap{border-top:1px solid var(--color-black)}
.section-columns .section-view .heart-class-list{display:-webkit-box;display:-ms-flex;display:flex;margin:-12px -20px;padding-top:24px;flex-wrap:wrap}
.section-columns .section-view .heart-class-list .class-item{width:400px;margin:12px 20px}
.heart-class-list .class-item{display:-webkit-box;display:-ms-flex;display:flex;position:relative;width:100%;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
.heart-class-list .class-item .class-thumbnail{overflow:hidden;width:100%;background-color:var(--color-border);border-radius:4px}
.heart-class-list .class-item .class-thumbnail a,.room-class-list .class-item .class-thumbnail b{overflow:hidden;display:block;width:100%;height:100%}
.heart-class-list .class-item .class-thumbnail a img,.room-class-list .class-item .class-thumbnail b img{display:inline-block;width:100%;vertical-align:top}
.heart-class-list .class-item .class-thumbnail .heart{position:absolute;top:20px;right:24px;width:20px;height:16px}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart,.heart-class-list .class-item .class-thumbnail .heart a.btn-heart b.icon{display:block;width:20px;height:16px}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart b.icon{position:relative}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart b.icon span{display:block;position:absolute;top:0;left:0;width:20px;height:16px;pointer-events:none;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart b.icon span svg{display:block;width:20px;height:16px}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart b.icon span.default{z-index:1;opacity:1}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart b.icon span.active{opacity:0}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart:hover b.icon span.active{opacity:0.1}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart b.icon span.default svg path{fill:var(--color-hard-gray)}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart b.icon span.active svg path{fill:var(--color-red)}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart.active b.icon span.default{opacity:0;z-index:inherit}
.heart-class-list .class-item .class-thumbnail .heart a.btn-heart.active b.icon span.active{opacity:1;z-index:1}
.heart-class-list .class-item .class-thumbnail + .class-info{margin-top:10px}
.heart-class-list .class-item .class-info{display:-webkit-box;display:-ms-flex;display:flex}
.heart-class-list .class-item .class-info h3.title{font-size:1.667rem;font-weight:700;line-height:2.5rem}
.heart-class-list .class-item .class-info h3.title a,.heart-class-list .class-item .class-info h3.title a span,.room-class-list .class-item .class-info h3.title b,.heart-class-list .class-item .class-info h3.title b span {display:inline-block;vertical-align:top}
.heart-class-list .class-item .class-info h3.title a:hover{color:var(--color-cyan)}
.heart-class-list .class-item .class-info + .price{margin-top:10px}
.heart-class-list .class-item .price{padding-bottom:4px}
.heart-class-list .class-item .price .regular-price{display:inline-block;position:relative;vertical-align:top;color:var(--color-soft-gray)}
.heart-class-list .class-item .price .regular-price::before{content:"";display:block;position:absolute;top:50%;right:-2px;left:-2px;height:0;border-top:1px solid var(--color-soft-gray);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.heart-class-list .class-item .price .regular-price span.count,.heart-class-list .class-item .price .display-price span.count{font-weight:700}
.heart-class-list .class-item .price .regular-price span.unit,.heart-class-list .class-item .price .display-price span.unit{font-weight:500}
.heart-class-list .class-item .price .regular-price span.count + span.unit,.heart-class-list .class-item .price .display-price span.count + span.unit{margin-left:2px}
.heart-class-list .class-item .price .regular-price + .display-price{margin-top:1px;padding-top:0}
.heart-class-list .class-item .price .display-price{display:block;padding-top:19px;font-size:1.667rem;line-height:2.333rem}
.heart-class-list .class-item .btns{position:absolute;bottom:0;right:0;width:80px}
.heart-class-list .class-item .btns li{}
.heart-class-list .class-item .btns li + li{}
.heart-class-list .class-item .btns li a{display:block;position:relative;padding:8px;background-color:var(--color-hard-white);border-radius:8px;text-align:center;color:var(--color-white);font-size:1.167rem;font-weight:700;line-height:1.667rem}
.heart-class-list .class-item .btns li a::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:4px;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.heart-class-list .class-item .btns li a:hover::after{opacity:1}
.heart-class-list .class-item .btns li a span{display:inline-block;position:relative;z-index:1;vertical-align:top;white-space:nowrap}
.heart-class-list .class-item .btns li a.btn-apply{background-color:var(--color-red)}

/*-- Edit Profile. --*/
.section-columns .section-view .edit-profile-form{padding-top:14px;border-top:1px solid var(--color-black)}
.section-columns .section-view .edit-profile-form .form-row-group + .form-row.type-submit{margin-top:80px}
.edit-profile-form .form-row.type-submit .form-buttons{width:350px}
.edit-profile-form .form-row.type-submit .form-buttons button{padding-top:14px;padding-bottom:14px;border-radius:8px}
.edit-profile-form .form-row.type-submit .form-buttons button + button{margin-top:16px}
.edit-profile-form .form-row.type-submit .form-buttons button span{font-size:1.5rem}

/*-- Board --*/
#archive-board {padding-top: 120px;}
#archive-board .section-side {width: 280px;}
.section-side-box {width: 280px; height: 100%; background-color: #223F59;}
.section-side-box span {display: inline-block; color: #FFFFFF; font-size: 2.5em; margin-left: 28px; margin-top: 77px;}
.section-side-box span svg{margin-left:-30px;}
.section-view table{width: 100%}
#archive-board .content .btns{bottom:20px;width:80px}
#archive-board .content .btns a{padding:10px 16px;border-radius:8px;font-size:1.5rem;line-height:2.333rem}
#archive-board .content .btns a::after{border-radius:4px}
#archive-board .content .btns a.btn-list{background-color: #233F58; padding: 8px 12px;}

.table-bordered,.table thead th,.table tbody td{border:none}
.section-view table{width: 100%}

.table th{font-weight:600}
.table thead th{padding:0.5rem;border-bottom:1px solid #cccccc;font-size:1.2rem;vertical-align:middle}
.table tbody tr{height: 50px}
.table tbody td{padding:0.5rem;border-bottom:1px solid #cccccc;font-size:1.2rem;vertical-align:middle}
.table tbody td .no{text-align: center}
.table tbody td .list-img{position:relative;width:80px;height:80px}
.table tbody td .list-img.round{overflow:hidden;border-radius:4px}
.table tbody td .list-img.circle{overflow:hidden;border-radius:50%}
.table tbody td .list-img img{position:absolute;width:100%;height:100%;object-fit:cover}
.table tbody td .choice{display:inline-block;position:relative;width:60px;height:60px;padding:5px;border:1px solid #eeeeee;border-radius:4px}
.table tbody td .choice.selected::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:5px solid #007bff;border-radius:4px;pointer-events:none}
.table tbody td .choice + .choice{margin-left:8px}
.table tbody td .choice img{display:inline-block;width:100%;height:100%;vertical-align:top;object-fit:cover}
.table tbody tr:last-child td{border-bottom-color:#cccccc}
.table input[type=checkbox],.table input[type=radio]{margin-top:inherit}


main#lecture-view{padding-top:60px;padding-bottom:0}
main#lecture-view input[type=checkbox]{display:none;visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;clip:rect(0,0,0,0)}
.view-columns{display:-webkit-box;display:-ms-flex;display:flex}
.view-columns .view-videos{flex:1}
.view-columns .view-videos .video-head{display:-webkit-box;display:-ms-flex;display:flex;height:60px;padding-right:16px;padding-left:40px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.view-columns .view-videos .video-head h2.title{display:-webkit-box;display:-ms-flex;display:flex;margin-right:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.view-columns .view-videos .video-head h2.title span{display:inline-block;vertical-align:top;font-size:1.167rem;font-weight:700;line-height:1.667rem}
.view-columns .view-videos .video-head h2.title span.no{font-size:1rem}
.view-columns .view-videos .video-head h2.title span.no + span{margin-left:8px}
.view-columns .view-videos .video-head .paddle{}
.view-columns .view-videos .video-head .paddle li{display:inline-block;vertical-align:top}
.view-columns .view-videos .video-head .paddle li + li{margin-left:8px}
.view-columns .view-videos .video-head .paddle li .btn{display:block;height:28px;padding:6px 10px 4px;background-color:var(--color-white);border-radius:6px;color:var(--color-dark);font-weight:700;cursor:pointer}
.view-columns .view-videos .video-head .paddle li .btn span{display:inline-block;vertical-align:top}
.view-columns .view-videos .video-head .paddle + .extend{margin-left:16px}
.view-columns .view-videos .video-head .extend{}
.view-columns .view-videos .video-head .extend .btn-extend{display:block;height:28px;padding:9px 12px;background-color:var(--color-white);border-radius:6px;cursor:pointer}
.view-columns .view-videos .video-head .extend .btn-extend span.icon{display:block;vertical-align:top;-webkit-transition:-webkit-transform 120ms ease-in-out;-moz-transition:-moz-transform 120ms ease-in-out;-ms-transition:-ms-transform 120ms ease-in-out;-o-transition:-o-transform 120ms ease-in-out;transition:transform 120ms ease-in-out}
.view-columns .view-videos .video-head .extend .btn-extend span.icon svg{display:block;width:7px;height:10px}
.view-columns .view-videos .video-head .extend .btn-extend span.icon svg path{fill:var(--color-dark)}

.view-columns .view-videos .video-body{}
.view-columns .view-videos .video-body .video-frame{position:relative;width:100%;height:0;padding-bottom:56.25%}
.view-columns .view-videos .video-body .video-frame .video{position:absolute;top:0;right:0;left:0;width:100%;height:100%;background-color:var(--color-black);}
.view-columns .view-videos .video-body .video-frame .video iframe{display:inline-block;width:100%;vertical-align:top}
.view-columns .view-lists a{color:var(--color-dark)}
.view-columns .view-lists .view-lists-container{position:absolute;top:0;right:0;bottom:0;width:400px;background-color:var(--color-white);pointer-events:auto;-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 260ms cubic-bezier(0.455, 0.030, 0.515, 0.955);-moz-transition:-moz-transform 260ms cubic-bezier(0.455, 0.030, 0.515, 0.955);-ms-transition:-ms-transform 260ms cubic-bezier(0.455, 0.030, 0.515, 0.955);-o-transition:-o-transform 260ms cubic-bezier(0.455, 0.030, 0.515, 0.955);transition:transform 260ms cubic-bezier(0.455, 0.030, 0.515, 0.955)}
.view-columns .view-lists{overflow:hidden;position:relative;width:400px;background-color:var(--color-white);color:var(--color-dark);-webkit-transition:width 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950);-moz-transition:width 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950);-ms-transition:width 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950);-o-transition:width 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950);transition:width 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950)}
body.on-resize .view-columns .view-lists .view-lists-container{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
body.on-resize .view-columns .view-lists{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
.view-columns .view-lists .view-lists-container .list-head{overflow:hidden;position:relative;z-index:100;width:100%;height:91px;padding:20px 24px 11px;background-color:var(--color-white)}
.view-columns .view-lists .view-lists-container .list-head::after{content:"";display:block;position:absolute;bottom:0;right:24px;left:24px;border-top:1px solid var(--color-dark)}
.view-columns .view-lists .view-lists-container .list-head .name{font-size:1.167rem;font-weight:700;line-height:1.667rem}
.view-columns .view-lists .view-lists-container .list-head .name span{display:inline-block;vertical-align:top}
.view-columns .view-lists .view-lists-container .list-head .name + .progress{margin-top:10px}
.view-columns .view-lists .view-lists-container .list-head .progress{position:relative;width:100%;height:30px}
.view-columns .view-lists .view-lists-container .list-head .progress .process{color:var(--color-blue)}
.view-columns .view-lists .view-lists-container .list-head .progress .process span{display:inline-block;vertical-align:top}
.view-columns .view-lists .view-lists-container .list-head .progress .process span.count + span.unit{margin-left:1px}
.view-columns .view-lists .view-lists-container .list-head .progress .progress-bar{overflow:hidden;position:absolute;right:0;bottom:0;left:0;height:6px;border-radius:3px}
.view-columns .view-lists .view-lists-container .list-head .progress .progress-bar span{display:block;position:absolute;top:0;left:0;vertical-align:top}
.view-columns .view-lists .view-lists-container .list-head .progress .progress-bar span.track{width:100%;height:100%;background-color:var(--color-border)}
.view-columns .view-lists .view-lists-container .list-head .progress .progress-bar span.current{width:0;height:100%;border-radius:3px;background-color:var(--color-blue)}
.view-columns .view-lists .view-lists-container .list-head .loop{display:-webkit-box;display:-ms-flex;display:flex;position:absolute;top:23px;right:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.view-columns .view-lists .view-lists-container .list-head .loop .btn-loop{margin-bottom:-1px;color:var(--color-gray);font-size:0.8333rem;font-weight:300;line-height:1.25rem;cursor:pointer}
.view-columns .view-lists .view-lists-container .list-head .loop .btn-loop:hover{color:var(--color-dark)}
.view-columns .view-lists .view-lists-container .list-head .loop .btn-loop span{display:inline-block;vertical-align:top}
.view-columns .view-lists .view-lists-container .list-head .loop .btn-loop + .toggle{margin-left:4px}
.view-columns .view-lists .view-lists-container .list-head .loop .toggle{height:12px;line-height:12px}
.view-columns .view-lists .view-lists-container .list-head .loop .toggle span{overflow:hidden;display:block;position:relative;width:20px;height:12px;background-color:var(--color-hard-white);border-radius:6px;-webkit-transition:background-color 120ms ease-in-out;-moz-transition:background-color 120ms ease-in-out;-ms-transition:background-color 120ms ease-in-out;-o-transition:background-color 120ms ease-in-out;transition:background-color 120ms ease-in-out}
.view-columns .view-lists .view-lists-container .list-head .loop .toggle .loop-state:checked ~ span{background-color:var(--color-cyan)}
.view-columns .view-lists .view-lists-container .list-head .loop .toggle span::before{content:"";display:block;position:absolute;top:1px;left:1px;width:10px;height:10px;background-color:var(--color-white);border-radius:50%;-webkit-transition:left 120ms ease-in-out;-moz-transition:left 120ms ease-in-out;-ms-transition:left 120ms ease-in-out;-o-transition:left 120ms ease-in-out;transition:left 120ms ease-in-out}
.view-columns .view-lists .view-lists-container .list-head .loop .toggle .loop-state:checked ~ span::before{left:9px}
.view-columns .view-lists .view-lists-container .list-body{}
.view-columns .view-lists .view-lists-container .list-body .list-scroller{overflow-x:hidden;overflow-y:auto;position:absolute;top:90px;right:0;bottom:0;left:0}
.view-columns .view-lists .view-lists-container .list-body .list-scroller .list-scroll-wrap{padding-right:24px;padding-left:24px}
.view-columns .view-lists .view-lists-container .list-body .lecture-list{padding-bottom:20px}
.view-columns .view-lists .view-lists-container .list-body .lecture-item{position:relative;padding:10px 8px 9px;-webkit-transition:background-color 120ms ease-in-out;-moz-transition:background-color 120ms ease-in-out;-ms-transition:background-color 120ms ease-in-out;-o-transition:background-color 120ms ease-in-out;transition:background-color 120ms ease-in-out}
/*.view-columns .view-lists .view-lists-container .list-body .lecture-item.active,.view-columns .view-lists .view-lists-container .list-body .lecture-item:hover{background-color:var(--color-bubble)}*/
.view-columns .view-lists .view-lists-container .list-body .lecture-item.active{background-color:var(--color-bubble)}
.view-columns .view-lists .view-lists-container .list-body .lecture-item + .lecture-item{border-top:1px solid var(--color-border)}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .name{display:-webkit-box;display:-ms-flex;display:flex;line-height:1.667rem}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .name a,.view-columns .view-lists .view-lists-container .list-body .lecture-item .name span{display:inline-block;vertical-align:top}
.view-columns .view-lists .view-lists-container .list-body .lecture-item.active .name a,.view-columns .view-lists .view-lists-container .list-body .lecture-item.active .name span{font-weight:600}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .name a{position:relative}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .name a::before{content:"";display:block;position:absolute;bottom:0;left:0;width:0;height:0;border-top:1px solid var(--color-dark);-webkit-transition:width 120ms ease-in-out;-moz-transition:width 120ms ease-in-out;-ms-transition:width 120ms ease-in-out;-o-transition:width 120ms ease-in-out;transition:width 120ms ease-in-out}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .name a:hover::before,.view-columns .view-lists .view-lists-container .list-body .lecture-item.active .name a::before{width:100%}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .name span.no{color:var(--color-soft-gray);font-size:0.8333rem}
.view-columns .view-lists .view-lists-container .list-body .lecture-item.active .name span.no{color:var(--color-dark)}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .name span.no + a{margin-left:8px}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .name + .duration{margin-top:7px}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .duration{font-size:0.917rem;font-weight:300;line-height:1.667rem}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .duration span.icon + .time{display:inline-block;margin-left:4px;vertical-align:top}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .duration span.icon{margin-top:5px;margin-bottom:5px}
.view-columns .view-lists .view-lists-container .list-body .lecture-item span.icon svg{display:block;width:10px;height:10px}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .duration span.icon svg path{fill:var(--color-hard-gray)}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .duration span{display:inline-block;vertical-align:top}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .duration span + span{position:relative;padding-left:7px}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .duration span + span::before{content:':';display:block;position:absolute;top:0;left:0;width:7px;text-align:center}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status{overflow:hidden;position:absolute;top:14px;right:8px;width:12px;height:12px;border-radius:50%}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status.none{background-color:var(--color-hard-white)}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status.complete{background-color:var(--color-cyan)}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status.progress{background-color:var(--color-dark)}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status span.icon{overflow:hidden;display:block;width:100%;height:100%}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status span.icon svg{display:block;width:12px;height:12px}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status span.icon svg path{fill:var(--color-white)}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status.progress span.icon{width:4px;height:4px;margin:4px;background-color:var(--color-white);border-radius:50%}
.view-columns .view-lists .view-lists-container .list-body .lecture-item .status.progress span.icon svg{display:none;visibility:hidden}

@media only screen and (max-width:767px){
    /*-- Variable. --*/
    html{
        --global-nav-height:60px;
        --global-footer-height:210px;
        /*--class-nav-height:50px*/
    }

    /*-- View. --*/
    html.fit{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0}
    body.menu-open,body.modal-open,html.fit body{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0}

    /*-- Bankin. --*/
    #___bankin{position:absolute;top:0;right:0;bottom:0;left:0}

    /*-- Global Navigation. --*/
    #gn{overflow:hidden;position:fixed;height:60px;-webkit-transition:all 300ms 120ms ease-in-out;-moz-transition:all 300ms 120ms ease-in-out;-ms-transition:all 300ms 120ms ease-in-out;-o-transition:all 300ms 120ms ease-in-out;transition:all 300ms 120ms ease-in-out}
    body.menu-open #gn{bottom:0;height:100%;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;-o-transition-delay:0ms;-ms-transition-delay:0ms;transition-delay:0ms}
    body.mode-lecture #gn{}
    #gn .gn-content{width:100%;padding:20px 30px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
    body.mode-lecture #gn .gn-content{width:auto}
    #gn h1#gn-bi a svg#svg-gn-bi{width:87px;height:20px}
    #gn .gn-menu-icon{position:absolute;top:0;right:0;width:80px;height:60px}
    #gn .gn-menu-icon .gn-menu-label{position:absolute;top:50%;left:0;font-size:1.167rem;font-weight:600;line-height:1.667rem;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}

    body.mode-lecture #gn .gn-menu-icon{display:none}

    #gn .gn-menu-icon input{display:none;visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;clip:rect(0,0,0,0)}
    #gn .gn-menu-icon label.btn-gn-menu{display:block;position:relative;width:100%;height:100%;padding:20px 30px;pointer-events:auto}
    #gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line{position:absolute;top:50%;width:20px;height:20px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
    #gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line::before,#gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line::after{content:"";display:block;position:absolute;top:50%;width:100%;height:2px;background-color:var(--color-black);border-radius:1px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:-webkit-transform 120ms ease-in-out,margin 120ms 120ms ease-in-out;-moz-transition:-moz-transform 120ms ease-in-out,margin 120ms 120ms ease-in-out;-ms-transition:-ms-transform 120ms ease-in-out,margin 120ms 120ms ease-in-out;-o-transition:-o-transform 120ms ease-in-out,margin 120ms 120ms ease-in-out;transition:transform 120ms ease-in-out,margin 120ms 120ms ease-in-out}
    #gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line::before{margin-top:-5px}
    #gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line::after{margin-top:5px}
    body.menu-open #gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line::before,body.menu-open #gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line::after{margin-top:0;-webkit-transition:-webkit-transform 120ms 120ms ease-in-out,margin 120ms ease-in-out;-moz-transition:-moz-transform 120ms 120ms ease-in-out,margin 120ms ease-in-out;-ms-transition:-ms-transform 120ms 120ms ease-in-out,margin 120ms ease-in-out;-o-transition:-o-transform 120ms 120ms ease-in-out,margin 120ms ease-in-out;transition:transform 120ms 120ms ease-in-out,margin 120ms ease-in-out}
    body.menu-open #gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line::before{-webkit-transform:translateY(-50%) rotate(-45deg);-moz-transform:translateY(-50%) rotate(-45deg);-o-transform:translateY(-50%) rotate(-45deg);-ms-transform:translateY(-50%) rotate(-45deg);transform:translateY(-50%) rotate(-45deg)}
    body.menu-open #gn .gn-menu-icon label.btn-gn-menu span.gn-menu-line::after{-webkit-transform:translateY(-50%) rotate(45deg);-moz-transform:translateY(-50%) rotate(45deg);-o-transform:translateY(-50%) rotate(45deg);-ms-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}
    /*body.mode-lecture #gn h1#gn-bi a svg#svg-gn-bi{width:123px;height:20px}*/
    #gn h1#gn-bi + .lecture-title{margin-left:10px}
    /*#gn .lecture-title{font-size:1.167rem;line-height:1.667rem}*/
    #gn .gn-menu{overflow-x:hidden;overflow-y:auto;position:absolute;top:60px;right:0;left:0;bottom:0;pointer-events:none}
    body.menu-open #gn .gn-menu{pointer-events:auto}
    #gn .gn-menu .gn-menu-list{width:100%;padding-top:30px;padding-bottom:100px;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
    #gn .gn-menu .gn-menu-list li + li{margin-top:30px}
    #gn .gn-menu .gn-menu-list li a{visibility:hidden;font-size:1.667rem;line-height:2.167rem;opacity:0;-webkit-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-moz-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-ms-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-o-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out}
    body.menu-open #gn .gn-menu .gn-menu-list li a{visibility:visible;opacity:1}
    body.menu-open #gn .gn-menu .gn-menu-list li:nth-of-type(1) a{-webkit-transition-delay:300ms;-moz-transition-delay:300ms;-o-transition-delay:300ms;-ms-transition-delay:300ms;transition-delay:300ms}
    body.menu-open #gn .gn-menu .gn-menu-list li:nth-of-type(2) a{-webkit-transition-delay:350ms;-moz-transition-delay:350ms;-o-transition-delay:350ms;-ms-transition-delay:350ms;transition-delay:350ms}
    body.menu-open #gn .gn-menu .gn-menu-list li:nth-of-type(3) a{-webkit-transition-delay:400ms;-moz-transition-delay:400ms;-o-transition-delay:400ms;-ms-transition-delay:400ms;transition-delay:400ms}
    body.menu-open #gn .gn-menu .gn-menu-list li:nth-of-type(4) a{-webkit-transition-delay:450ms;-moz-transition-delay:450ms;-o-transition-delay:450ms;-ms-transition-delay:450ms;transition-delay:450ms}
    body.menu-open #gn .gn-menu .gn-menu-list li:nth-of-type(5) a{-webkit-transition-delay:500ms;-moz-transition-delay:500ms;-o-transition-delay:500ms;-ms-transition-delay:500ms;transition-delay:500ms}
    #gn .gn-menu .gn-menu-list li a::after{top:3px;right:-7px;width:5px;height:5px}
    #gn .util-menu{visibility:hidden;position:absolute;z-index:1000;bottom:0;right:0;left:0;padding:25px 30px;background-color:var(--color-white);opacity:0;pointer-events:none;-webkit-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-moz-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-ms-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-o-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out}
    body.menu-open #gn .util-menu{visibility:visible;opacity:1;pointer-events:auto;-webkit-transition-delay:500ms;-moz-transition-delay:500ms;-o-transition-delay:500ms;-ms-transition-delay:500ms;transition-delay:500ms}
    #gn .util-menu .util-menu-list{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
    #gn .util-menu .util-menu-list li + li{margin-left:20px}
    #gn .util-menu .util-menu-list li a{font-size:1.167rem;line-height:1.667rem}
    body:not(.mode-lecture) #gn .me-menu{visibility:hidden;display:-webkit-box;display:-ms-flex;display:flex;position:absolute;z-index:1000;bottom:0;right:0;left:0;padding:20px 30px;background-color:var(--color-white);opacity:0;pointer-events:none;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-moz-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-ms-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;-o-transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out;transition:visibility 120ms ease-in-out,opacity 120ms ease-in-out}
    body.on-resize #gn .me-menu{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
    body.menu-open #gn .me-menu{visibility:visible;font-size:1.167rem;line-height:1.667rem;opacity:1;pointer-events:auto;-webkit-transition-delay:500ms;-moz-transition-delay:500ms;-o-transition-delay:500ms;-ms-transition-delay:500ms;transition-delay:500ms}
    #gn .me-menu .user span.name + span{margin-left:1px}
    #gn .me-menu .user + a.btn-signout{margin-left:3px}
    #gn .me-menu .user + a.btn-room,#gn .me-menu a.btn-signout + a.btn-room{margin-left:16px}
    #gn .me-menu a.btn-room{padding:4px 14px;border-radius:15px}
    #gn .me-menu a.btn-room::after{border-radius:15px}
    #gn .me-menu a.btn-room span{padding-top:2px}

    /*-- Global Footer. --*/
    #gf{padding-top:40px;padding-bottom:50px}
    #gf .gf-content{max-width:100%;padding-right:30px;padding-left:30px}
    #gf #gf-bi svg#svg-gf-bi{width:auto;height:16px}
    #gf #gf-bi + .gf-links{margin-top:22px}
    #gf .gf-links li + li{margin-left:16px}
    #gf .gf-links li{font-size:0.9167rem}
    #gf .gf-links + .gf-infos{margin-top:10px}
    #gf .gf-infos li{font-size:0.8333rem;line-height:1.333rem}
    #gf .gf-infos li._i-en{line-height:1.083rem}
    #gf .gf-infos li + li{margin-left:8px}
    #gf .gf-infos li._i-company + li{margin-left:10px}
    #gf .gf-infos br ~ li{margin-top:2px}
    #gf .gf-infos br ~ li._i-en{margin-top:4px}
    #gf .gf-infos li span.name{padding-right:11px}
    #gf .gf-infos li span.name::after{right:5px;height:7px}
    #gf .gf-infos li a.tel span + span{padding-left:1px}
    #gf .gf-infos li a.tel span.country + span{padding-left:3px}
    #gf .gf-infos li a.tel span:not(.country) + span::before{padding-right:1px}

    /*-- Content. --*/
    main{padding-top:120px;padding-bottom:100px}
    main#archive-class{padding-top:150px}
    main#about{padding-top:60px;padding-bottom:0}
    main#about figure{width:calc(100% + 60px);margin-right:-30px;margin-left:-30px}
    main .section-content{padding-right:30px;padding-left:30px}
    /*-- Section. --*/
    /*.section-content > h2.title{font-size:2.5rem;line-height:3.833rem}*/
    /*.section-content > h2.title + article{margin-top:42px}*/

    /*-- Class. --*/
    #class-nav{height:40px;margin-top:60px}
    #class-nav .nav-menu{overflow-y:hidden;width:100%}
    #class-nav .nav-menu .nav-menu-list{min-width:100%;padding-right:30px;padding-left:30px}
    #class-nav .nav-menu .nav-menu-list li + li{margin-left:16px}
    #class-nav .nav-menu .nav-menu-list li a{padding-top:10px;padding-bottom:10px;font-size:1.083rem}
    #class-nav .nav-menu .nav-menu-list li a::after{border-bottom-width:2px}

    /*-- Accounts. --*/
    /*main#accounts .accounts-content{margin-right:auto;margin-left:auto}*/
    /*main#accounts #accounts-sign-in.accounts-content{width:360px}*/
    /*main#accounts #accounts-sign-up.accounts-content{width:500px}*/
    /*main#accounts .accounts-content h2.title{font-size:2.5rem;line-height:3.833rem}*/
    /*main#accounts .accounts-content h2.title + .form-section{margin-top:44px}*/


    /*-- Board --*/
    #archive-board {padding-top: 120px;}
    #archive-board .section-side {width: 100%;}
    .section-side-box {width: 100%; height: 100%; background-color: #223F59;}
    .section-side-box span {display: inline-block; color: #FFFFFF; font-size: 2.5em; margin-left: 28px; vertical-align: middle; line-height: 80px; margin-top:0px;}
    .section-side-box span svg{margin-left:-30px;}
    .section-view table{width: 100%}
    #archive-board .content .btns{bottom:20px;width:80px}
    #archive-board .content .btns a{padding:10px 16px;border-radius:8px;font-size:1.5rem;line-height:2.333rem}
    #archive-board .content .btns a::after{border-radius:4px}
    #archive-board .content .btns a.btn-list{background-color:#233F58; padding: 8px 12px;}

}

/*-- Breadcrumbs. --*/
.breadcrumbs .breadcrumb-list li + li{padding-left:20px}
.breadcrumbs .breadcrumb-list li + li::before{top:6px;left:8px;width:4px;height:8px;background-size:4px 8px}
.breadcrumbs .breadcrumb-list li a,.breadcrumbs .breadcrumb-list li b{letter-spacing:-0.4px;font-size:1.167rem;line-height:1.667rem}
/*-- Steps. --*/
.steps .step-list li + li{padding-left:48px}
.steps .step-list li + li::before{left:16px;width:16px}
.steps .step-list li span.no{width:14px;height:14px;margin-top:3px;margin-bottom:3px;font-size:0.667rem;line-height:1rem}
.steps .step-list li span.name{letter-spacing:-0.4px;font-size:1.167rem;line-height:1.667rem}
.steps .step-list li span.no + span.name{margin-left:6px}
.section-content .steps + h2.title{margin-top:50px}
.section-content .breadcrumbs + .class-list{margin-top:20px}
.section-content .breadcrumbs + .recommends{margin-top:32px}
/*-- Recommends. --*/
.recommends h2.title{font-size:1.167rem;line-height:1.667rem}
.recommends h2.title + .recommend-list{margin-top:16px}
.recommends .recommend-list li + li{margin-left:8px}
.recommends .recommend-list li a{padding:5px 16px;border-radius:15px}


/*-- Component. --*/
/*-- Form. --*/
.form-row + .form-row{margin-top:28px}
.form-row .form-item .form-title{top:18px;font-size:1.167rem;line-height:2rem}
.form-item .form-field input{padding-top:12px;padding-bottom:12px;font-size:1.167rem;line-height:2rem}
.form-row .form-item .form-field input{padding-top:18px}
.form-item.form-item-password .form-field input{padding-right:36px}
.form-item .form-value{padding-top:6px;padding-bottom:6px;font-size:1.167rem;line-height:2rem}
.form-item.form-item-password .form-password-view{top:19px;right:8px;width:20px;height:20px}
.form-item.form-item-password .form-password-view button{width:20px;height:20px;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.form-item.form-item-password .form-password-view button svg{width:20px;height:20px}
.form-item .form-radio label.radio .radio-wrap{padding:15px 17px;border-radius:4px}
.form-item .form-radio label.radio .radio-wrap::before{border-radius:4px}
.form-item .form-radio label.radio .radio-wrap b.icon{width:20px;height:20px}
.form-item .form-radio label.radio .radio-wrap b.icon span svg{width:20px;height:20px}
.form-item .form-radio label.radio .radio-wrap b.icon + span.name{margin-left:8px}
.form-item .form-radio label.radio .radio-wrap span.name{font-size:1.167rem;line-height:1.667rem}
.form-item .form-radio label.radio .radio-wrap span.check{top:18px;right:17px;width:14px;height:14px}
.form-item .form-radio label.radio .radio-wrap span.check svg{width:14px;height:14px}
.form-item .form-message{bottom:-20px;font-size:0.833rem;line-height:1.667rem}
.form-row .form-item.focus .form-title,.form-row .form-item.record .form-title{font-size:0.833rem;line-height:1rem}
.form-row-group .form-item + .form-item{margin-left:8px}
.form-row-group .form-item .form-title{font-size:1.167rem;line-height:2rem}
.form-row-group .form-item .form-title{min-width:200px}
.form-row-group .form-item .form-group,.form-row-group .form-item .form-field{flex:1}
.form-item .form-field-row + .form-notice{margin-top:2px}
.form-row-group + .form-row-group{margin-top:8px}
.form-extra,.form-notice{font-size:0.917rem}
.form-notice{padding-left:8px}
.form-notice::before{top:8px;width:2px;height:2px}
.form-extra > span + a,.form-notice > span + a{margin-left:8px}
.form-row + .form-extra,.form-row + .form-notice{margin-top:32px}
.form-extra + .form-row.type-submit,.form-notice + .form-row.type-submit{margin-top:10px}
.form-buttons button{padding:15px 16px;border-radius:4px}
.form-buttons button.btn-outline{padding-top:14px;padding-bottom:14px}
.form-buttons button span{font-size:1.167rem;line-height:1.667rem}
.form-buttons button::after{border-radius:4px}
/*-- Social Login. --*/
.form-divider{margin-top:16px;margin-bottom:16px}
.sign-socials li + li{margin-top:8px}
.sign-socials li a{padding-top:15px;padding-bottom:15px;border-radius:4px}
.sign-socials li a.btn-sign-gmail::before{border-radius:4px}
.sign-socials li a::after{border-radius:4px}
.sign-socials li a span.icon{width:20px;height:20px}
.sign-socials li a span.icon svg{width:20px;height:20px}
.sign-socials li a span.name{font-weight:700}
.sign-socials li a span.icon + span.name{margin-left:8px}
.hero-banner{position:relative}
.hero-banner .text-area{position:absolute;top:0;right:0;left:0;width:100%;height:100%}
.hero-banner .text-area .list-menu-pc{display:-webkit-box;display:-ms-flex;display:flex;position:absolute;bottom:0;right:0;max-width:30%;height:70%;flex-wrap:wrap-reverse;flex-direction:row-reverse}
.hero-banner .text-area .list-menu-m{display:-webkit-box;display:-ms-flex;display:flex;position:absolute;bottom:0;right:0;max-width:44%;height:100%;flex-wrap:wrap-reverse;flex-direction:row-reverse}
.hero-banner .text-area .list-menu .menu-item{width:50%;height:50%}
.hero-banner .text-area .list-menu .menu-item a{display:block;width:100%;height:100%}
.hero-banner .text-area .list-menu .menu-item a img{display:inline-block;width:100%;height:100%;vertical-align:top;object-fit:cover}
main#accounts .accounts-content h2.title{font-size:2.5rem;line-height:3.833rem}
main#accounts .accounts-content h2.title + .form-section{margin-top:44px}
@media only screen and (max-width:767px){
    /*-- Accounts. --*/
    main#accounts .accounts-content{padding-right:30px;padding-left:30px}
    .section-columns{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
    .section-columns .section-side{width:100%;padding-right:inherit;}
    nav#side-nav .side-nav-content .greeting{white-space:nowrap}
    nav#side-nav .side-nav-content .greeting br{display:none}
    nav#side-nav .side-nav-content .greeting .me{display:inline-block}
    nav#side-nav .side-nav-content .greeting + .side-nav-menu{margin-top:20px}
    nav#side-nav .side-nav-content .side-nav-menu{display:inline-block}
    nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list li{display:inline-block}
    nav#side-nav .side-nav-content .side-nav-menu .side-nav-menu-list li a{padding-top:8px;padding-bottom:9px}
    nav#side-nav .side-nav-content a.btn-signout{display:inline-block}
    nav#side-nav .side-nav-content .side-nav-menu + a.btn-signout{margin-top:20px;margin-left:20px}

    .section-columns .section-view .room-class-list .class-item{width:100%}
    .section-columns .section-view{margin-top:40px}
    .section-columns .section-view > h2.title + .content{margin-top:20px}

    .view-columns{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
    main#lecture-view{min-height:100vh}

    .view-columns{height:calc(100vh - 60px)}

    .view-columns .view-lists{width:100%;height:100%}
    .view-columns .view-lists .view-lists-container{width:100%}
    .view-columns .view-videos .video-head .extend{display:none}
    .view-columns .view-videos .video-head{padding-right:24px;padding-left:24px}
    body.mode-lecture #gn .gn-content{padding-right:24px;padding-left:24px}

    /*-- No List. --*/
    .no-list{padding-top:50px;padding-bottom:50px;font-size:2.5rem;line-height:3.833rem}

    .hero-banner .text-area .list-menu.list-menu-pc{display:none}

    .view-columns .view-column{padding-top:20px;padding-right:20px;padding-left:20px}
    .view-columns .view-column:last-child{padding-bottom:30px}
    .view-columns .view-column h2.title + .form-textarea{margin-top:20px}

    #correction-view .form-textarea textarea.form-control{height:600px;padding:30px 20px;font-size:1.167rem;line-height:1.667rem}
}


@media only screen and (min-width:768px){
    /*-- Variable. --*/
    html{
        --global-nav-height:90px;
        --global-footer-height:380px;
        --class-nav-height:50px
    }
    main#lecture-view{min-height:calc(100vh - 60px)}

    .view-columns{height:calc(100vh - 60px)}

    .section-columns .section-side nav#side-nav{position:sticky;top:20px}
    nav#side-nav .side-nav-content .side-nav-menu + a.btn-signout{margin-top:15px}
    .section-columns .section-view{padding-left:30px;flex:1}

    .section-columns .section-view .room-class-list .class-item{width:400px}
    .heart-class-list .class-item .class-thumbnail{height:235px}
    .room-class-list .class-item .class-thumbnail{height:235px}

    main#lecture-view input[name=extend-state]:checked ~ .view-columns .view-videos .video-head .extend .btn-extend span.icon{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
    main#lecture-view input[name=extend-state]:checked ~ .view-columns .view-lists{width:0;-webkit-transition:width 350ms cubic-bezier(0.445, 0.050, 0.550, 0.950);-moz-transition:width 350ms cubic-bezier(0.445, 0.050, 0.550, 0.950);-ms-transition:width 350ms cubic-bezier(0.445, 0.050, 0.550, 0.950);-o-transition:width 350ms cubic-bezier(0.445, 0.050, 0.550, 0.950);transition:width 350ms cubic-bezier(0.445, 0.050, 0.550, 0.950)}
    main#lecture-view input[name=extend-state]:checked ~ .view-columns .view-lists .view-lists-container{pointer-events:none;-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-o-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);-webkit-transition:-webkit-transform 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);-moz-transition:-moz-transform 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);-ms-transition:-ms-transform 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);-o-transition:-o-transform 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);transition:transform 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955)}

    /*-- View. --*/
    html.fit,html.fit body{overflow:hidden;width:100vw;height:100vh}

    /*-- Global Navigation. --*/
    #gn{height:90px;padding-top:30px;padding-bottom:30px}
    body.mode-lecture #gn{height:60px;padding-top:15px;padding-bottom:15px}
    #gn .gn-content{max-width:1180px;margin-right:auto;margin-left:auto;padding-right:40px;padding-left:40px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
    body.mode-lecture #gn .gn-content{width:auto!important;max-width:100%}
    #gn h1#gn-bi a svg#svg-gn-bi{width:130px;height:30px}
    body.mode-lecture #gn h1#gn-bi a svg#svg-gn-bi{width:87px;height:20px}
    #gn h1#gn-bi + .lecture-title{margin-left:24px}
    #gn .gn-menu-icon{display:none;pointer-events:none}
    #gn .lecture-title{padding-top:2px;font-size:1.167rem;line-height:1.667rem}
    #gn .gn-menu{margin-right:auto;margin-left:48px}
    #gn .gn-menu .gn-menu-list{margin-right:auto}
    #gn .gn-menu .gn-menu-list li + li{margin-left:32px}
    #gn .gn-menu .gn-menu-list li a{font-size:1.333rem;line-height:2rem}
    #gn .gn-menu .gn-menu-list li a::after{top:2px;right:-6px;width:4px;height:4px}
    #gn .util-menu{padding-top:2px}
    #gn .util-menu .util-menu-list li + li{margin-left:16px}
    #gn .util-menu .util-menu-list li a{font-size:1rem;line-height:1.5rem}
    #gn .me-menu{padding-top:2px}
    #gn .me-menu .user span.name + span{margin-left:2px}
    #gn .me-menu .user + a.btn-signout{margin-left:4px}
    #gn .me-menu .user + a.btn-room,#gn .me-menu a.btn-signout + a.btn-room{margin-left:16px}
    #gn .me-menu a.btn-room{margin-top:-2px;padding:5px 14px;border-radius:15px}
    #gn .me-menu a.btn-room::after{border-radius:15px}
    #gn .me-menu a.btn-room span{padding-top:2px}

    /*-- Global Footer. --*/
    #gf{padding-top:50px;padding-bottom:70px}
    #gf .gf-content{max-width:1180px;margin-right:auto;margin-left:auto;padding-right:40px;padding-left:40px}
    #gf #gf-bi svg#svg-gf-bi{width:87px;height:20px}
    #gf #gf-bi + .gf-links{margin-top:32px}
    #gf .gf-links li + li{margin-left:24px}
    #gf .gf-links + .gf-infos{margin-top:16px}
    #gf .gf-infos li{font-size:0.917rem;line-height:1.417rem}
    #gf .gf-infos li._i-en{line-height:1.083rem}
    #gf .gf-infos li + li{margin-left:12px}
    #gf .gf-infos li._i-company + li{margin-left:16px}
    #gf .gf-infos br ~ li{margin-top:4px}
    #gf .gf-infos br ~ li._i-en{margin-top:6px}
    #gf .gf-infos li span.name{padding-right:13px}
    #gf .gf-infos li span.name::after{right:6px;height:8px}
    #gf .gf-infos li a.tel span + span{padding-left:2px}
    #gf .gf-infos li a.tel span.country + span{padding-left:4px}
    #gf .gf-infos li a.tel span:not(.country) + span::before{padding-right:2px}

    /*-- Content. --*/
    main{padding-top:210px;padding-bottom:180px}
    /*main#about{padding-top:90px;padding-bottom:90px}*/
    main#about{padding-top:90px;padding-bottom:0}
    main .section-content{max-width:1180px;margin-right:auto;margin-left:auto;padding-right:40px;padding-left:40px}


    /*-- Class. --*/
    #class-nav{height:50px;margin-top:90px}
    #class-nav .nav-content{max-width:1180px;margin-right:auto;margin-left:auto;padding-right:40px;padding-left:40px}
    #class-nav .nav-menu .nav-menu-list{margin-right:auto}
    #class-nav .nav-menu .nav-menu-list li + li{margin-left:24px}
    #class-nav .nav-menu .nav-menu-list li a{padding-top:15px;padding-bottom:15px;font-size:1.167rem}
    #class-nav .nav-menu .nav-menu-list li a::after{border-bottom-width:3px}

    /*-- Accounts. --*/
    main#accounts .accounts-content{margin-right:auto;margin-left:auto}
    main#accounts #accounts-sign-in.accounts-content{width:360px}
    main#accounts #accounts-sign-up.accounts-content{width:500px}






    /*-- No List. --*/
    .no-list{padding-top:100px;padding-bottom:100px;font-size:3.333rem;line-height:5rem}







    /*-- Shop Status. --*/
    .section-content .shop-status{top:22px}
    .shop-status .badge{padding:8px 15px 7px;border-radius:8px;font-size:1.167rem;line-height:1.667rem}
    .shop-status .badge + .datetime{margin-left:16px}
    .shop-status .datetime{font-size:1.167rem;line-height:1.667rem}
    .shop-status .datetime > span + span{margin-left:4px}
    .shop-status .datetime span.time > span + span{padding-left:7px}
    .shop-status .datetime span.time > span + span::before{width:7px}





    /*-- Thankyou. --*/
    h2.title + .thankyou{margin-top:40px}
    .thankyou .comment{width:980px;margin-right:auto;margin-left:auto;padding:40px 24px;border-radius:20px}
    .thankyou .comment p{font-size:2.667rem;line-height:3.833rem}
    .thankyou .comment p.underline span::before{z-index:-1;bottom:4px;right:-4px;left:-4px;height:8px;border-radius:4px}
    .thankyou .comment p span{z-index:1}
    .thankyou .comment p span.bankin svg{margin-top:8px;margin-bottom:8px}
    .thankyou .comment p span.bankin + span{margin-left:6px}
    .thankyou .comment + a.btn-lecture{margin-top:24px}
    .thankyou a{width:350px;padding:15px 16px;border-radius:8px;font-size:1.167rem;line-height:1.667rem}
    .thankyou a::after{border-radius:15px}
    .thankyou + .shop-data-list{margin-top:40px}


    .hero-banner .text-area .list-menu.list-menu-m{display:none}


    .view-columns .view-column{display:-webkit-box;display:-ms-flex;display:flex;position:relative;padding:40px;flex:1;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
    .view-columns .view-column h2.title + .form-textarea{margin-top:30px}
    .view-columns .view-column + .view-column::before{content:"";display:block;position:absolute;top:78px;bottom:30px;left:0;width:0;border-right:1px solid #999999;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
    .view-columns .view-column .form-textarea{width:100%;height:100%;flex:1}
    #correction-view .form-textarea textarea.form-control{width:100%;height:100%;padding:50px 40px;background-color:#ffffff;border-radius:4px;font-size:1.333rem;line-height:2rem}

}
@media only screen and (min-width:768px) and (max-width:1179px){
    main#about figure{width:calc(100% + 80px);margin-right:-40px;margin-left:-40px}
    .hero-banner .text-area{position:absolute;top:0;right:-40px;left:-40px;width:calc(100% + 80px)}
}



.class-list .class-item .class-thumbnail{border-radius:4px}
.class-list .class-item .class-info .desc{margin-bottom:auto;font-size:1.167rem;line-height:1.833rem}
.class-list .class-item .class-info .tags li + li{margin-left:8px}
.class-list .class-item .class-info .tags li a{line-height:1.667rem}
.class-list .class-item .class-info .tags li a span{display:inline-block;vertical-align:top}
.class-list .class-item .class-info .tags li a span.hash + span{position:relative;margin-left:2px}
.class-list .class-item .class-info .tags li a span.hash + span::after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;border-top:1px solid var(--color-cyan);opacity:0;-webkit-transition:opacity 180ms ease-in-out;-moz-transition:opacity 180ms ease-in-out;-o-transition:opacity 180ms ease-in-out;transition:opacity 180ms ease-in-out}
.class-list .class-item .class-info .tags li a:hover span.hash + span::after{opacity:1}
.class-list .class-item .class-util{border-radius:12px}
.class-list .class-item .class-util .info{margin-bottom:auto}
.class-list .class-item .class-util .info li + li{margin-top:4px}
.class-list .class-item .class-util .info li span.icon svg{width:10px;height:10px;margin-top:4px;margin-bottom:4px}
.class-list .class-item .class-util .info li span.icon + span.name{margin-left:4px}
.class-list .class-item .class-util .info li span.name{letter-spacing:-0.4px;padding-right:17px}
.class-list .class-item .class-util .info li span.name::after{top:5px;right:8px;width:0;height:8px}
.class-list .class-item .class-util .info li .period span.count + span.unit{margin-left:2px}
.class-list .class-item .class-util .heart{top:20px;right:24px;width:20px;height:16px}
.class-list .class-item .class-util .heart a.btn-heart,.class-list .class-item .class-util .heart a.btn-heart b.icon{width:20px;height:16px}
.class-list .class-item .class-util .heart a.btn-heart b.icon span{width:20px;height:16px}
.class-list .class-item .class-util .heart a.btn-heart b.icon span svg{width:20px;height:16px}
.class-list .class-item .class-util .price .regular-price::before{right:-2px;left:-2px}
.class-list .class-item .class-util .price .regular-price span.count + span.unit,.class-list .class-item .class-util .price .display-price span.count + span.unit{margin-left:2px}
.class-list .class-item .class-util .price .regular-price + .display-price{margin-top:1px}
.class-list .class-item .class-util .btns{bottom:20px;width:80px}
.class-list .class-item .class-util .btns li a{padding:8px;border-radius:8px;font-size:1.167rem;line-height:1.667rem}
.class-list .class-item .class-util .btns li a::after{border-radius:4px}

/*-- Class Detail. --*/
.section-content .breadcrumbs + .class-detail{margin-top:34px}
.class-detail-content .class-info-util{order:1}
.class-detail-content .class-info-util-sticky{z-index:900}
.class-detail-content .class-info{padding-top:12px}
.class-detail-content .class-info h2.title{font-size:3.333rem;line-height:4.667rem}
.class-detail-content .class-info h2.title + .desc{margin-top:28px}
.class-detail-content .class-info .desc{font-size:1.333rem;line-height:2rem}
.class-detail-content .class-info .desc + .tags{margin-top:16px}
.class-detail-content .class-info .tags li + li{margin-left:8px}
.class-detail-content .class-info .tags li b{line-height:1.667rem}
.class-detail-content .class-info .tags li b span.hash + span{margin-left:2px}
.class-detail-content .class-info + .class-util{margin-top:40px}
.class-detail-content .class-util{padding:24px 24px 28px;border-radius:12px}
.class-detail-content .class-util .info-content > span.name{font-size:1.167rem;line-height:1.667rem}
.class-detail-content .class-util .info-content > span.name + .lecturer{margin-top:10px}
.class-detail-content .class-util .info-content .lecturer .media{width:50px;height:50px}
.class-detail-content .class-util .info-content .lecturer .media + .info{margin-left:12px}
.class-detail-content .class-util .info-content .lecturer .info span.name{font-size:1.667rem;line-height:2.333rem}
.class-detail-content .class-util .info-content .lecturer .info span.name + a.link{margin-left:12px}
.class-detail-content .class-util .info-content .lecturer .info a.link{font-size:1.167rem;line-height:1.667rem}
.class-detail-content .class-util .info-content .lecturer .info a.link span.icon{width:16px;height:16px;margin-top:2px;margin-bottom:2px}
.class-detail-content .class-util .info-content .lecturer .info a.link span + span.icon{margin-left:4px}
.class-detail-content .class-util .info-content .lecturer .info a.link span.icon svg{width:16px;height:16px}
.class-detail-content .class-util .info-content .lecturer .info a.link span.icon svg path{fill:var(--color-white)}
.class-detail-content .class-util .info-content + .info-columns{margin-top:20px}
.class-detail-content .class-util .info-columns li + li{margin-left:32px}
.class-detail-content .class-util .info-columns li > span.name{font-size:1.167rem;line-height:1.667rem}
.class-detail-content .class-util .info-columns li > span.name + .clip,.class-detail-content .class-util .info-columns li > span.name + .period{margin-top:6px}
.class-detail-content .class-util .info-columns li .clip,.class-detail-content .class-util .info-columns li .period{font-size:1.333rem}
.class-detail-content .class-util .info-columns li .clip span.total + span.count{margin-left:4px}
.class-detail-content .class-util .info-columns li .clip span.count + span.unit,.class-detail-content .class-util .info-columns li .period span.count + span.unit{margin-left:2px}
.class-detail-content .class-util .heart{top:22px;right:24px}
.class-detail-content .class-util .heart a.btn-heart > b + span{margin-left:6px}
.class-detail-content .class-util .heart a.btn-heart > span{font-size:1.333rem;line-height:2rem}
.class-detail-content .class-util .heart a.btn-heart b.icon{width:24px;height:20px;margin-top:2px;margin-bottom:2px}
.class-detail-content .class-util .heart a.btn-heart b.icon span{width:20px;height:16px}
.class-detail-content .class-util .heart a.btn-heart b.icon span svg{width:25px;height:20px}
.class-detail-content .class-util .price-list{margin-top:20px;padding-top:20px}
.class-detail-content .class-util .price-list .price-item + .price-item{margin-top:4px}
.class-detail-content .class-util .price-list .price-item span.name{font-size:1.167rem;line-height:1.667rem}
.class-detail-content .class-util .price-list .price-item .regular-price,.class-detail-content .class-util .price-list .price-item .display-price{font-size:1.833rem;line-height:2.833rem}
.class-detail-content .class-util .price-list .price-item .regular-price::before{right:-2px;left:-2px;border-top-width:2px}
.class-detail-content .class-util .price-list .price-item .regular-price span.count + span.unit,.class-detail-content .class-util .price-list .price-item .display-price span.count + span.unit{margin-left:4px}
.class-detail-content .class-util .price-list + .btns{margin-top:24px}
.class-detail-content .class-util .btns li a{padding:10px 16px;border-radius:8px;font-size:1.5rem;line-height:2.333rem}
.class-detail-content .class-util .btns li a::after{border-radius:4px}
.class-detail-content .class-view{order:0}

.class-detail-content .class-view .class-hero .hero-banner .banner-wrap{padding-bottom:62.5%;border-radius:4px}
.class-detail-content .class-view .class-hero + .class-tabs{margin-top:24px}
.class-detail-content .class-view .class-tabs{position:sticky;z-index:900;top:0;height:50px}
.class-detail-content .class-view .class-tabs li + li{margin-left:24px}
.class-detail-content .class-view .class-tabs li a{padding-top:15px;padding-bottom:15px;font-size:1.167rem;line-height:1.667rem}
.class-detail-content .class-view .class-tabs li a::after{border-bottom-width:3px}
.class-detail-content .class-view .class-tabs + section{margin-top:70px}
.class-detail-content .class-view section + section{margin-top:36px;padding-top:36px}
.class-detail-content .class-view section h3.title{font-size:2.667rem;line-height:4rem}
.class-detail-content .class-view section h3.title::before{bottom:9px;right:-12px;width:8px;height:8px}
.class-detail-content .class-view section h3.title + .content{margin-top:24px}
.class-detail-content .class-view section .content .subject{font-size:2rem;line-height:3rem}
.class-detail-content .class-view section .content .explain,.class-detail-content .class-view section .content .clip{font-size:1.667rem;line-height:2.333rem}
.class-detail-content .class-view section .content .explain,.class-detail-content .class-view section .content .clip span.total + span.count{margin-left:4px}
.class-detail-content .class-view section .content .explain,.class-detail-content .class-view section .content .clip span.count + span.unit{margin-left:2px}
.class-detail-content .class-view section .content .subject + .figures{margin-top:24px}
.class-detail-content .class-view section .content .figures figure{width:240px;height:160px;border-radius:2px}
.class-detail-content .class-view section .content .figures figure + figure{margin-left:24px}
.class-detail-content .class-view section .content .figures + .desc{margin-top:12px}
.class-detail-content .class-view section .content .desc{font-size:1.167rem;line-height:1.833rem}
.class-detail-content .class-view section .content .desc p + p{margin-top:4px}
.class-detail-content .class-view section .content .explain + .lecturer{margin-top:20px}
.class-detail-content .class-view section .content .lecturer .media{width:140px;height:140px}
.class-detail-content .class-view section .content .lecturer .info{margin-left:48px;padding-top:10px;flex:1}
.class-detail-content .class-view section .content .lecturer .info .info-head span.name{font-size:2rem;line-height:3rem}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link{top:8px;font-size:1.167rem;line-height:1.667rem}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link span.icon{width:16px;height:16px;margin-top:2px;margin-bottom:2px}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link span + span.icon{margin-left:4px}
.class-detail-content .class-view section .content .lecturer .info .info-head a.link span.icon svg{width:16px;height:16px}
.class-detail-content .class-view section .content .lecturer .info .info-head + .info-desc{margin-top:12px}
.class-detail-content .class-view section .content .lecturer .info .info-desc{font-size:1.167rem;line-height:1.833rem}
.class-detail-content .class-view section .content .lecturer .info .info-desc p + p{margin-top:4px}
.class-detail-content .class-view section .content .clip + .curriculum-list{margin-top:20px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item{padding:10px 16px 10px 24px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item:hover{border-color:var(--color-cyan)}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .name{}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .name span{font-size:1.167rem;line-height:1.667rem}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .name span.no{width:20px;font-size:1rem}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .name span.no + span{margin-left:8px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util{margin-left:auto}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .btn-preview{padding:3px 8px;border-radius:4px;letter-spacing:-0.4px;font-size:0.75rem;line-height:1.167rem}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .btn-preview::after{border-radius:4px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .btn-preview + .duration{margin-left:10px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration{font-size:0.917rem;line-height:1.667rem}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span.icon + .time{margin-left:4px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span.icon{margin-top:5px;margin-bottom:5px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span.icon svg{width:10px;height:10px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span + span{padding-left:7px}
.class-detail-content .class-view section .content .curriculum-list .curriculum-item .info-util .duration span + span::before{width:7px}

@media only screen and (min-width:1180px) {
    .class-detail-content .class-info-util{width:400px}
    .class-detail-content .class-info-util-sticky{position:sticky;z-index:900;top:0}
    .class-detail-content .class-view{width:640px;margin-right:auto}
    .class-detail-content .class-view .class-hero .hero-banner{width:640px;height:400px}
    .class-detail-content .class-view .class-info-util{display:none}
    .class-detail-content .class-btns{display:none}
    main#about figure.about-pc{position:relative;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
    main#about figure.about-pc a{display:block}
    main#about figure.about-m{display:none}
}
@media only screen and (max-width:1179px) {
    body.page-single_class #gf{padding-bottom:138px}
    .class-detail-content .class-info-util-sticky{display:none}
    .class-detail-content .class-view{width:100%}
    .class-detail-content .class-view .class-hero .hero-banner{width:100%}
    .class-detail-content .class-view .class-info-util{width:100%;margin-bottom:20px}
    main#about figure.about-pc{display:none}
    main#about figure.about-m a{display:block}
    .class-detail-content .class-btns .btns li{}
    .class-detail-content .class-btns .btns li + li{}
    .class-detail-content .class-btns .btns li a{display:block;position:relative;background-color:var(--color-hard-white);text-align:center;color:var(--color-white);font-weight:700}
    .class-detail-content .class-btns .btns li a::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
    .class-detail-content .class-btns .btns li a:hover::after{opacity:1}
    .class-detail-content .class-btns .btns li a span{display:inline-block;position:relative;z-index:1;vertical-align:top;white-space:nowrap}
    .class-detail-content .class-btns .btns li a.btn-apply{background-color:var(--color-red)}
    .class-detail-content .class-btns{position:fixed;z-index:1000;bottom:0;right:0;left:0;padding:20px;background-color:var(--color-white);border-top:1px solid var(--color-border)}
    .class-detail-content .class-btns .btns li a{padding:10px 16px;border-radius:8px;font-size:1.5rem;line-height:2.333rem}
    .class-detail-content .class-btns .btns li a::after{border-radius:4px}
}

@media only screen and (max-width:767px){
    .class-detail-content .class-view .class-tabs{top:60px}
    .hero-banner .text-area{position:absolute;top:0;right:-30px;left:-30px;width:calc(100% + 60px)}
}


@media only screen and (min-width:1020px) {
    /*-- Class List. --*/
    .section-content .recommends + .class-list{margin-top:24px}
    .section-content .class-list{padding-top:40px}
    .class-list .class-item + .class-item{margin-top:24px}
    .class-list .class-item .class-thumbnail{width:300px;height:180px}
    .class-list .class-item .class-info{margin-right:auto;padding-top:24px;padding-bottom:24px;padding-left:40px}
    .class-list .class-item .class-info h3.title{font-size:2rem;line-height:3rem}
    .class-list .class-item .class-info h3.title + .desc{margin-top:12px}
    .class-list .class-item .class-util{width:308px;margin:12px;padding:24px}
    .class-list .class-item .class-util .heart{right:24px}
    .class-list .class-item .class-util .price .display-price{font-size:1.667rem;line-height:2.333rem}
    .class-list .class-item .class-util .btns{right:24px}
}

@media only screen and (max-width:1019px){
    /*-- Class List. --*/
    .section-content .recommends + .class-list{margin-top:20px}
    .class-list{display:-webkit-box;display:-ms-flex;display:flex;flex-wrap:wrap}
    .class-list .class-item{flex-wrap:wrap}
    .class-list .class-item .class-info,
    .class-list .class-item .class-util{width:100%}
    .class-list .class-item .class-info{padding-top:15px;padding-bottom:15px}
    .class-list .class-item .class-info h3.title{font-size:1.667rem;line-height:2.5rem}
    .class-list .class-item .class-info h3.title + .desc{margin-top:8px}
    .class-list .class-item .class-util{width:100%;padding:20px}
    .class-list .class-item .class-util .price .display-price{font-size:1.667rem;line-height:2.333rem}
    .class-list .class-item .class-util .heart{right:20px}
    .class-list .class-item .class-util .btns{right:20px}
}


@media only screen and (min-width:768px) and (max-width:1019px){
    /*-- Class List. --*/
    .section-content .class-list{padding-top:30px}
    .class-list .class-item{width:50%}
    .class-list .class-item:nth-child(2n){padding-right:10px}
    .class-list .class-item:nth-child(2n + 1){padding-left:10px}
    .class-list .class-item:nth-of-type(2) ~ .class-item{margin-top:30px}
}

@media only screen and (max-width:767px){
    /*-- Class List. --*/
    .section-content .class-list{padding-top:20px}
    .class-list .class-item{width:100%}
    .class-list .class-item + .class-item{margin-top:25px}
}


@media only screen and (min-width:1020px) {
    /*-- Cart List. --*/
    .cart-list .cart-item .title{width:446px}
    .cart-list .cart-item .title span.name + .desc{margin-top:10px}
    .cart-list .cart-item .title + .range{margin-left:40px}
    .cart-list .cart-item .range .period{width:60px}
    .cart-list .cart-item .range span.name + .period{margin-top:12px}
    .cart-list .cart-item .range + .sell-price{margin-left:40px}
    .cart-list .cart-item .sell-price{width:190px}
    .cart-list .cart-item .sell-price + .pay-price{margin-left:40px}
    .cart-list .cart-item .pay-price{width:100px;margin-right:auto}
    .cart-list .cart-item .sell-price span.name + .price,.cart-list .cart-item .pay-price span.name + .price{margin-top:12px}
    .cart-list .cart-item button.btn-delete{width:80px}

    .order-list .order-item .order-price{width:100px;margin-left:auto}
    .order-list .order-item .order-price span.name + .price{margin-top:12px}

    .statement-list .statement-item span.name + .price{margin-top:16px}


    .statement-list .statement-symbol.minus::before{top:53px;left:0}
    .statement-list .statement-symbol.equals::before{top:53px;left:0}
    .statement-list .statement-symbol.equals::after{top:53px;left:0}

    .section-content .shop-data-list .shop-util .form-buttons button + button{margin-left:8px}
    .section-content .shop-data-list section.shop-data-item .content .orderer-form{width:840px}

    .form-row-group .form-item .form-title{min-width:200px;padding-top:10px;padding-bottom:10px;}

    .payment-method-form .form-row-group .form-item{width:320px}


    .order-list .order-item .title span.name + .desc{margin-top:10px}

}

@media only screen and (max-width:1019px){
    /*-- Cart List. --*/
    .cart-list .cart-item{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
    .cart-list .cart-item .title,.cart-list .cart-item .range,.cart-list .cart-item .sell-price,.cart-list .cart-item .pay-price{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

    /*-- Order List. --*/
    .order-list .order-item{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
    .order-list .order-item .title,.order-list .order-item .order-price{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

    .section-content .shop-data-list .shop-util .form-buttons button{max-width:inherit}
    .cart-list .cart-item button.btn-delete{width:100%}

    .section-content .shop-data-list section.shop-data-item .content .statement-list{flex-wrap:wrap;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}

    .statement-list .statement-item{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

    .statement-list .statement-symbol{position:relative;width:100%;height:6px;margin-top:10px;margin-bottom:10px}
    .statement-list .statement-symbol.minus::before{top:50%;left:50%}
    .statement-list .statement-symbol.equals::before{top:50%;left:50%}
    .statement-list .statement-symbol.equals::after{top:50%;left:50%}

    .section-content .shop-data-list .shop-util .form-buttons{display:-webkit-box;display:-ms-flex;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}

    .section-content .shop-data-list .shop-util .form-buttons #btn-cancel{order:1;margin-top:8px}
    .section-content .shop-data-list .shop-util .form-buttons #btn-pay{order:0}

    .form-row-group .form-item{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
    .payment-method-form .form-row-group .form-item{width:100%}


    /*-- Thankyou. --*/
    h2.title + .thankyou{margin-top:20px}
    .thankyou .comment{padding:15px 10px;border-radius:10px}
    .thankyou .comment p{font-size:1.667rem;line-height:2.5rem}
    .thankyou .comment p.underline span::before{z-index:-1;bottom:2px;right:-2px;left:-2px;height:6px;border-radius:3px}
    .thankyou .comment p span{z-index:1}
    .thankyou .comment p span.bankin svg{margin-top:8px;margin-bottom:8px}
    .thankyou .comment p span.bankin + span{margin-left:6px}
    .thankyou .comment + a.btn-lecture{margin-top:24px}
    .thankyou a{width:100%;padding:15px 16px;border-radius:4px;font-size:1.167rem;line-height:1.667rem}
    .thankyou a::after{border-radius:15px}
    .thankyou + .shop-data-list{margin-top:40px}


}
/*-- Section. --*/
.section-content > h2.title{font-size:2.5rem;line-height:3.833rem}
.section-content > h2.title + article{margin-top:42px}

/*-- Shop Data List. --*/
.shop-data-list section.shop-data-item + section.shop-data-item{margin-top:40px}
.shop-data-list section.shop-data-item h3.title + .content{margin-top:12px}
.shop-data-list section.shop-data-item h3.title{font-size:1.667rem;line-height:2.333rem}
.shop-data-list section.shop-data-item .content .cart-list{padding-top:24px}



/*-- Cart List. --*/
.cart-list .cart-item{padding:24px 32px}
.cart-list .cart-item::before{border-radius:16px}
.cart-list .cart-item + .cart-item{margin-top:16px}
.cart-list .cart-item span.name{font-size:1.167rem;line-height:1.667rem}





.cart-list .cart-item .title .desc{font-size:1.667rem;line-height:2.333rem}

.cart-list .cart-item .range .period{font-size:1.333rem;line-height:2rem}

.cart-list .cart-item .range .period span.count + span.unit{margin-left:2px}



.cart-list .cart-item .sell-price .price .regular-price + .display-price{margin-left:8px}
.cart-list .cart-item .sell-price .price .regular-price,.cart-list .cart-item .sell-price .price .display-price,.cart-list .cart-item .pay-price .price .display-price{font-size:1.333rem;line-height:2rem}
.cart-list .cart-item .sell-price .price .regular-price::before{right:-2px;left:-2px;border-top-width:2px}
.cart-list .cart-item .sell-price .price .regular-price span.count + span.unit,.cart-list .cart-item .sell-price .price .display-price span.count + span.unit,.cart-list .cart-item .pay-price .price .display-price span.count + span.unit{margin-left:2px}


.cart-list .cart-item button.btn-delete{height:36px;border-radius:8px;font-size:1.167rem;font-weight:700;line-height:1.667rem;-ms-flex-item-align:center;align-self:center}


main#terms h3{font-size:1.667rem;line-height:2.333rem}
main#terms h3 + ul{margin-top:15px;margin-bottom:40px}
main#terms strong + ul{margin-top:15px}
main#terms strong{font-size:1.333rem;line-height:2rem}
main#terms li{font-size:1.083rem;line-height:2rem}
main#terms p{margin-top:10px;font-size:1.083rem;line-height:2rem}
main#terms a.btn_terms{display:inline-block;margin-top:10px;vertical-align:top;font-size:1.333rem;line-height:2rem}

body.on-resize #gn{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important}

/*.view-columns .view-column{display:-webkit-box;display:-ms-flex;display:flex;position:relative;padding:40px;flex:1;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}*/
.view-columns .view-column h2.title{text-align:center}


#correction-view .form-textarea textarea.form-control{width:100%;background-color:#ffffff;border-radius:4px}
#about .desc{color:#333333}
#about .desc .text-blue{color:#0e99e5}
#about .desc .text-dark-blue{color:#0d6692}
#about .desc i{position:relative;text-decoration:underline}
/*#about .desc i::before{content:"";display:block;position:absolute;bottom:-2px;left:0;width:100%;height:0;border-top:1px solid #999999}*/
#about .note{color:#666666}
#about .note b,#about .note span{display:inline-block}


@media only screen and (min-width:768px){
    #about .section-content{padding-top:30px;padding-bottom:150px}
    #about .about-logo{margin-bottom:40px}
    #about .about-logo img{height:120px}
    #about .desc + .note{margin-top:50px}
    #about .desc{font-size:1.5rem;line-height:3rem}
    #about .note{font-size:1.333rem;line-height:2.333rem}
    #about .note b ~ span{margin-top:10px}
}

@media only screen and (max-width:767px){
    #about .section-content{padding-top:20px;padding-bottom:90px}
    #about .about-logo{margin-bottom:20px}
    #about .about-logo img{height:80px}
    #about .desc + .note{margin-top:30px}
    #about .desc{font-size:1.083rem;line-height:2rem}
    #about .note{font-size:1.083rem;line-height:2rem}
    #about .note b ~ span{margin-top:10px}
}

.modal.modal-notice{}
.modal-notice .modal-dialog{position: absolute; left: 100px; top:130px;width: 375px; height: auto}
.modal-notice .modal-content{padding: 4px}
.modal-notice .modal-notice-footer{height: 53px}
.modal-notice .form-unit{position: relative;line-height: 53px;height: 53px;}

@media only screen and (max-width:767px) {
    .modal-notice .modal-dialog{position: absolute; left: 0; top:80px;width: 70%; height: auto; padding: 4px}
    .modal-notice .modal-notice-footer{height: 30px}
    .modal-notice .form-unit{position: relative;height:30px; line-height: 30px}
}

.view-columns .view-column .correction-util{width: 100%; text-align: center}
.view-columns .view-column .correction-btns{width: 300px; display: inline-block}
.view-columns .view-column .correction-btns li a{display:block;position:relative;background-color:var(--color-hard-white);text-align:center;color:var(--color-white);font-weight:700; padding: 8px; border-radius: 8px; margin: 10px;}
.view-columns .view-column .correction-btns li a::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.075);opacity:0;pointer-events:none;-webkit-transition:opacity 120ms ease-in-out;-moz-transition:opacity 120ms ease-in-out;-ms-transition:opacity 120ms ease-in-out;-o-transition:opacity 120ms ease-in-out;transition:opacity 120ms ease-in-out}
.view-columns .view-column .correction-btns li a:hover::after{opacity:1}
.view-columns .view-column .correction-btns li a span{display:inline-block;position:relative;z-index:1;vertical-align:top;white-space:nowrap}
.view-columns .view-column .correction-btns li a.btn-save{background-color:var(--color-blue)}
.view-columns .view-column .correction-btns li a.btn-submit{background-color:var(--color-red)}
.view-columns .view-column .correction-btns li a.btn-complete{}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.alert-dismissible {
    padding-right: 4rem;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: .75rem 1.25rem;
    color: inherit;
}