﻿.tbanner {background-color: var(--m-color); text-align: center;}
.tbanner a {display: inline-block; width: 100%; font-size: 18px; line-height: 50px;}


header {position: absolute; top: 0; left: 0; right: 0; z-index: 2; transition: top 0.1s ease, background-color 0.1s ease; /*transform: translateY(50px);*/}
header.on {background-color: #fff; position: fixed; transform: translateY(0); border-bottom: 1px solid #ededed;}
header.on .inner {height: 80px;}
header .inner {display: flex; align-items: center; height: 120px;}
header nav {margin-left: 100px;}
header nav ul {display: flex; justify-content: center; align-items: center;}

header nav ul li a {padding: 0 25px; display: inline-block;  height: 80px; line-height: 95px; font-size: 17px; font-family: var(--font-l);}

header .sub_menu a {margin-left: 10px; display: inline-block; font-size: 20px;}
header .sub_menu a i {font-size: 22px;}

header .m_menu {display: none; cursor: pointer;}

.celebon_nav li a.active {color: #ba7ce3; font-weight: bold;}

.m_side {display: none;}
.m_dim {display: none;}


/* 태블릿 */
@media screen and (max-width: 1200px) {
    header .m_menu {display: inline-block; flex-basis: 70px;}
    header .header_logo {flex-basis: calc(100% - 140px); text-align: center;}
    header .header_logo img {height: 28px;}
    header i {font-size: 20px;}

    header .pc_menu {display: none;}
    header .sub_menu a.pc_menu {display: none; flex-basis: 70px;}

    header .inner {height: 80px;}


    .m_side {background-color: #fff; position: fixed; top: 0; left: -100%; bottom: 0; width: 80%; z-index: 23; transition: 0.5s; height: 100vh; overflow-y: auto; padding: 20px; display: block;}
    .m_side.on {display: flex; left: 0; flex-direction: column; justify-content: space-between;}

    .m_side .ms_top {margin-top: 50px;}
    .m_side .ms_top .m_close {position: absolute; top: 0; right: 0; cursor: pointer;}
    .m_side .ms_top .m_close .xi-close {padding: 20px; font-size: 20px;}
    .m_side .ms_top .ms_login {border-bottom: 1px solid #ededed; padding-bottom: 25px; margin-bottom: 25px;}
    .m_side .ms_top .ms_login p {font-family: var(--font-sb); margin: 40px 0 20px; font-size: 18px;}
    .m_side .ms_top .ms_login .ms_member {display: flex;}
    .m_side .ms_top .ms_login .ms_member a {border: 1px solid #ededed; margin-right: 5px; width: 100%; font-size: 14px; padding: 10px 0; text-align: center; border-radius: 3px;}
    .m_side .ms_top .ms_login .ms_member a:last-of-type {margin-right: 0;}

    .m_side .ms_top .ms_category {border-bottom: 1px solid #ededed; padding-bottom: 10px; margin-bottom: 10px;}
    .m_side .ms_top .ms_category p {font-family: var(--font-pa); font-size: 16px; margin-bottom: 20px;}
    .m_side .ms_top .ms_category ul li a {padding: 15px 0; display: inline-block; width: 100%; font-size: 16px;}

    .m_side .ms_top .ms_my {padding-bottom: 30px;}
    .m_side .ms_top .ms_my ul li a {font-size: 15px; color: #777; display: inline-block; padding: 10px 0;}

    .m_side .ms_sns {display: flex; justify-content: center; margin-bottom: 40px;}
    .m_side .ms_sns a {width: 35px; height: 35px; border-radius: 50%; background-color: #eee; margin: 0 5px; display: flex; align-items: center; justify-content: center;}
    .m_side .ms_sns a i {font-size: 17px; color: #777;}
    .m_side .copyright {font-size: 12px; color: #777; text-align: center;}
    
    .m_dim {position: fixed; background-color: rgba(0,0,0,0.2); width: 100%; height: 100vh; top: 0; left: -100%; bottom: 0; z-index: 5;}
    .m_dim.on {display: block; transition: 0.5s; left: 0;}


}
/* 모바일 */
@media screen and (max-width:767px) {
    .tbanner a {font-size: 15px; line-height: 40px;}

/*    header {transform: translateY(40px);}*/
    header .inner {height: 60px;}
    header.on .inner {height: 50px;}
    header .header_logo img {height: 20px;}
}
