/*****header*****/

/*헤더 탑 배너*/
#side_none .side_menu{display: none;}

.h_top_close{position: absolute;}
.h_top_bn a,.h_top_bn span{color:#fff;}
.h_top_bn span{font-size: 22px;}

.logo img{width: 150px;}

#header{width: 100%; z-index: 10000; position: fixed; top:0; transition: top 0.3s ease-in-out;}
#header.nav_up {top: -141px;}
.menu{font-size: 16px; font-weight: 500;}
.menu .b_txt span{vertical-align: top;}
.menu .b_txt span.material-symbols-outlined{font-size:18px;}
.menu li.menu_off a{color:#ffa074}
.menu li#on a{color:#1e202e}

.logo,.menu,.util{flex: none;}
.util{margin-left: auto;}
.search{border:1px solid #1e202e; background: #fff; padding:5px 15px; padding-right: 5px; position: relative;}
.search input[type="text"]{width: 300px; height: 30px; border:0;}
.search_icon{width:30px; height:30px; background:#1e202e; justify-content: center; align-items: center;}
.search_icon span{color:#fff; font-size: 20px;}
.search_box{width:100%; position: absolute; left:0; background:#fff; top:50px; display: none;}
.search_box .h_top_close{right: 10px; top: 10px;} 
.search_box_item{padding:10px 0; font-size: 12px;}
.search_box_item li:hover a{opacity: 0.7;}
.search_box_item h3{margin-bottom: 10px;}
.search_recommend ul{flex-wrap: wrap;}
.search_recommend li{border:1px solid #999; border-radius: 30px; margin-right: 5px; margin-bottom: 5px;}
.search_recommend li a{display: block; padding:5px 10px; }
.search_faq li{ line-height: 25px; border-bottom: 1px solid #eee;}
.util .material-symbols-outlined.fill{
  font-variation-settings:
  'FILL' 1,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}
.util ul span{font-size: 28px;}

.h_login{font-size:14px}
.h_login a{display:block; padding:10px 15px;}
.h_login li:last-child{border-radius:10px;}

/*페이지네이션*/
.pagenation{justify-content: center;}
.pagenation button,.pagenation a{vertical-align: middle; line-height: 20px;}
.pagenation button{padding:0 10px}
.pagenation a{padding:0 5px; color:#999;}
.pagenation button span{font-size: 14px; display: block;}
.pagenation .active{font-weight: bold; color: #4f53fd;}

/*탭*/
.tab_area li{background:#fff; padding:10px 15px; border-radius: 20px; font-size: 14px; cursor: pointer;}
.tab_area li.active{background: #4f53fd; color: #fff;}

/*팝업*/
.popup_wrap{position: fixed; width: 100%; height: 100%; left:0; top:0; z-index: 10000; display: none;}
.popup_bg{width: 100%; height: 100%; background: rgba(0,0,0,0.7);}
.popup_con{width:450px; height: 700px; position: absolute; top: 50%; left:50%; background: #fff; transform: translate(-50%,-50%); padding:20px; overflow-y: auto;}
.popup_btn_wrap button{width: 80px; padding:10px 0; border-radius: 5px;}



/*사이드메뉴*/
.side_menu{position: fixed; left:30px; top:200px; padding:20px; padding-right: 0; background:#fff; border-radius: 30px; z-index:100;}
.side_menu>ul>li{font-size: 18px; font-weight: 700; line-height: 50px;}
.side_menu>ul>li:first-child a span{display: none;}
.side_menu>ul>li:first-child a.active::before{display: none;}
.side_menu>ul>li .arrow{position: absolute; right:0; transition: all 0.3s;}
.side_menu>ul>li .active .arrow{transform: rotate(-180deg);}
.side_menu>ul>li>a{display: flex; gap: 10px; align-items: center; padding-right: 40px; position: relative;}
.side_menu>ul>li>a.active::before{content: ""; display: block; width: 55%; position: absolute; left:40px; bottom:18px; height: 8px; background: rgba(98,85,246,0.2);}
.side_menu>ul>li>a span{font-variation-settings:'wght' 500}

.side_sub_cate{font-size:14px; font-weight: 500; line-height: 30px; padding-left: 35px; margin-bottom: 30px;}

/*공통 셀렉트 박스*/
.btn_filter > div{border-radius: 10px; font-size:13px; cursor:pointer;}
.btn_filter ul{ text-align: left; width: 100%; font-size:13px; cursor:pointer; border-radius:10px; overflow:hidden; display: none;}
.btn_filter li{padding:5px 20px;}
.btn_filter li.active{background: #f9f9f9;}
.btn_filter li:hover{background: #f9f9f9;}

.sub_filter>div .open.active,.btn_filter .open.active{display: block;}
.sub_filter>div .material-symbols-outlined.active,.btn_filter .material-symbols-outlined.active{transform: rotate(180deg);}
.btn_filter .open,.sub_filter .open{position: absolute; right: 0; z-index: 100; background: #fff; top:40px; display: none;}

input::placeholder{font-size:13px; color: #1e202e;}


/*footer*/
#footer,#footer a{color:#fff; font-size: 12px;}
#footer .inner{padding:0 30px}
.footer_top{background: #1e1e35;}
.footer_top h3{font-size: 14px; margin-bottom: 20px;}
.ft_cs ul,#footer .ft_cs a{color: rgba(255,255,255,0.5);}
.ft_cs ul{line-height: 25px;}
.ft_cs .num{font-size: 25px; color: #4f53fd; font-weight: bold; margin-bottom: 20px;}

.guide{padding-top: 25px;}
.guide span{display: block; font-size: 50px; font-variation-settings:'wght' 300}
#footer .guide li:hover a{color:rgba(255,255,255); transition: color 0.5s;}

.footer_bottom{background: #181825; color:rgba(255,255,255,0.5);}
.fb_left_info ul li{display: inline-block; margin-right: 20px; margin-bottom: 20px;}
.fb_left_info ul li span{font-weight: bold;}
.copyright{margin-top: 20px; color:#fff;}
.copyright span{color:#b4b4ff}

.sns{position: absolute; right:0; top:0}
.sns li{background: #4d4d6b; border-radius: 50%;}
.sns li a{display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; vertical-align: middle;}
.sns li a img{width: 18px;}

#right_quick {position:fixed; bottom:30px; right:50px; z-index:1000;}
#right_quick > div {margin-top:-5px;opacity:1;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
#right_quick > div:hover {opacity:0.5;}
#right_quick > div img {width:50px;}
#right_quick > div:first-child {display: flex;justify-content: center;margin-bottom:10px;}
#right_quick > div:first-child a {display: flex;justify-content: center; align-items:center; width:45px;height:45px;background:#ffe300;border-radius:50%;}
#right_quick > div:first-child img {width: 28px; height: 28px;}

/*반응형*/
.panel{display: none;}
@media all and (max-width:767px) {
    /*공통*/
    #header>.inner{display: block;}
    .inner{width: auto;}

    /*헤더*/
    #header{text-align: center; border-radius: 0; padding:15px 0;}
    .logo img{width: 40%;}
    .panel_wrap{position: fixed; top: 0; left:0; width: 0; overflow: hidden; height: 100%; background: #fc5709; padding:50px 0; box-sizing: border-box; z-index: 1000;}
    .nav_bg{content: ""; position: fixed; width: 100%; height: 100%; background:rgba(0,0,0,0.7); top:0; padding-top:99px; z-index: 100; display: none;}
    .menu{display: block; margin-top: 100px; text-align: left;}
    .menu li{width:230px; box-sizing: border-box; line-height: 45px; padding:0 50px}
    .menu li#on a{color: #fff;}
    .menu li.menu_off a{color:#ffa074;}

    .close {
        width: 30px;
        height: 30px;
        position: absolute;
        right:20px;
        top:20px;
    }
    .close:after {
        content: '';
        height: 30px;
        border-left: 2px solid #fff;
        position: absolute;
        transform: rotate(45deg);
        left: 14px;
        margin-top:0;
    }
    
    .close:before {
        content: '';
        height: 30px;
        border-left: 2px solid #fff;
        position: absolute;
        transform: rotate(-45deg);
        left: 14px;
    }
    .panel{display:block; position:absolute; top:50%; margin-top:-8px; left:20px;}
	.panel a{display:block;}
    .open_nav span,.open_nav:before,.open_nav:after{content:""; display:block; width:25px; height:2px; background:#fff;}
	.open_nav span{margin:5px 0; text-indent:-9999px;}
}