@charset "utf-8";

#tnb_wrap {padding:0 10px;border-bottom:solid 1px #eee;}
#tnb {width:100%;max-width:var(--content-w);margin:0 auto;}
#tnb ul {}
#tnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#tnb ul li {display:block;float:left;position:relative;margin:0 12px 0 0;padding:0 12px 0 0;}
#tnb ul li:after {content:'';display:block;position:absolute;right:0;top:50%;width:1px;height:12px;margin:-6px 0 0 0;background:#ddd;}
#tnb ul li:last-child {margin:0;padding:0;}
#tnb ul li:last-child:after {display:none;}
#tnb ul li a {display:block;font-size:13px;line-height:50px;text-align:center;}
#tnb ul li i {font-size:18px;}
#tnb ul li a i.xi-star {
background: #FFB76B;
background: linear-gradient(to bottom, #FFB76B 0%, #FFA73D 30%, #FF7C00 60%, #FF7F04 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#tnb ul.left {float:left;}
#tnb ul.right {float:right;}

@media screen and (max-width:980px) {
#tnb ul li {padding:0;}
#tnb ul li:after {display:none;}
#tnb ul li span,
#tnb ul li.mob_none {display:none;}
}



#header_wrap {padding:20px 10px;}
#header {width:100%;max-width:var(--content-w);margin:0 auto;}

/* 헤더메뉴 */
#header #logo {float:left;margin:0 40px 0 0;}
#header #logo a {display:block;width:40px;line-height:40px;}
#header #logo a img {width:100%;height:auto;}

/* 검색 */
.hd_sch_wr {display:block;float:left;position:relative;width:100%;max-width:360px;}
.hd_sch_wr.active {display:block;}
.hd_sch_wr .btn_close_panel {display:none;right:10px;top:10px;}
#hd_sch {position:relative;}
#hd_sch:after {display:block;visibility:hidden;clear:both;content:""}
#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_sch #sch_submit {display:block;position:absolute;right:0;top:0;width:var(--h);height:var(--h);color:#fff;background:var(--color2);border:none;
-webkit-border-top-right-radius: var(--radius);
-webkit-border-bottom-right-radius: var(--radius);
-moz-border-radius-topright: var(--radius);
-moz-border-radius-bottomright: var(--radius);
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
#hd_sch #sch_submit i {font-size:20px;}

ul.tnb {display:block;float:right;}
ul.tnb:after {display:block;visibility:hidden;clear:both;content:""}
ul.tnb li {display:block;float:left;position:relative;margin:0 8px 0 0;}
ul.tnb li:last-child {margin:0;}
ul.tnb a {font-size:13px;line-height:var(--h);}
ul.tnb a i {font-size:18px;vertical-align:middle;}

ul.tnb.mobile {display:none;float:right;}
ul.tnb.mobile a i {font-size:20px;}


@media screen and (max-width:980px) {
#header_wrap {padding:10px 10px;}
#header #logo a img {width:auto;height:30px;}

/* 검색 */
.hd_sch_wr {display:none;float:none;position:fixed;left:0;right:0;top:0;width:100%;max-width:100%;min-height:100%;overflow-y:scroll;padding:50px 10px 20px 10px;background:#fff;z-index:999;}
.hd_sch_wr.active {display:block;}
.hd_sch_wr .btn_close_panel {display:block;}
#hd_sch {padding:0;}
#hd_sch #sch_submit {top:0;}

ul.tnb {display:none;}
ul.tnb.mobile {display:block;}
}


#gnb_wrap {display:block;position:relative;background:#fff;border-bottom:solid 1px #eee;z-index:9;}
#gnb {width:100%;max-width:var(--content-w);margin:0 auto;}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb a.home {display:block;float:left;width:40px;margin:0 20px 0 0;color:#222;text-align:center;}
#gnb a.home i {font-size:20px;line-height:50px;}
#gnb ul.gnb {display:block;float:left;height:50px;}
#gnb ul.gnb:after {display:block;visibility:hidden;clear:both;content:""}
#gnb ul.gnb li {display:block;float:left;position:relative;margin:0 30px 0 0;}
#gnb ul.gnb li:last-child {margin:0;}
#gnb ul.gnb li a {display:block;position:relative;font-weight:500;line-height:50px;}
#gnb ul.gnb li a i {margin:0 4px 0 0;font-size:18px;vertical-align:middle;}
#gnb ul.gnb li a.active {color:var(--color);}
#gnb ul.gnb li a.active:after {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--color);}
#gnb ul.gnb li ul {display:none;position:absolute;left:50%;top:55px;width:160px;margin:0 0 0 -80px;background:#fff;border:solid 1px #ddd;border-radius:var(--radius);overflow:hidden;z-index:9;}
/*#gnb ul li ul:before {content:"";position:absolute;top:-6px;left:50%;width:0;height:0;margin:0 0 0 -6px;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #f63941 transparent}*/
#gnb ul.gnb li ul li {float:none;width:100%;margin:0;border-bottom:dashed 1px #ddd;}
#gnb ul.gnb li ul li:last-child {border-bottom:none;}
#gnb ul.gnb li ul li a {padding:0 10px;color:#222;line-height:40px;font-weight:300;text-align:center;}
#gnb ul.gnb li ul li a i {font-size:18px;}
#gnb ul.gnb li ul li a.active2,
#gnb ul.gnb li ul li a:hover {color:var(--color);background:#f6f6f6;}

#gnb ul#gsnb {float:right;margin:0;}
#gnb ul#gsnb:after {display:block;visibility:hidden;clear:both;content:""}
#gnb ul#gsnb li {display:block;float:left;position:relative;}
#gnb ul#gsnb li.mob_block {display:none;}
#gnb ul#gsnb a {display:block;width:30px;font-size:18px;text-align:center;line-height:50px;}

#gnb_wrap.sticky {position:fixed;left:0;right:0;top:0;max-width:100%;}

#gnball {display:none;position:relative;left:0;right:0;background:#fff;border-top:solid 1px #eee;}
#gnball h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.gnball {display:table;table-layout:fixed;width:100%;max-width:var(--content-w);margin:0 auto;border-left:solid 1px #eee;}
.gnball .cell {display:table-cell;padding:20px;border-right:solid 1px #eee;vertical-align:top;}
.gnball .cell a {display:block;font-size:18px;font-weight:600;line-height:40px;}
.gnball .cell a i {width:20px;font-size:16px;}
.gnball .cell ul {}
.gnball .cell ul li {}
.gnball .cell ul li a {color:#666;font-size:14px;line-height:30px;font-weight:normal;}
.gnball .cell ul li a i {width:20px;font-size:16px;}
#gnball .btn_close_panel {right:20px;top:10px;}

@media screen and (max-width:980px) {
#gnb_wrap {display:none !important;}

#gnb ul.gnb {display:none;}

#gnb ul#gsnb {display:none;}
}


#gnb_mob_wrap {height:0;overflow:hidden;background:#fff;z-index:99;}
#gnb_mob_wrap:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_mob_wrap.sticky {position:fixed;left:0;right:0;top:0;width:100%;}
#gnb_mob_wrap a.btn_panel,
#gnb_mob_wrap a.home {display:block;width:40px;text-align:center;border-right:solid 1px rgba(255,255,255,0.2);}
#gnb_mob_wrap a.btn_panel i,
#gnb_mob_wrap a.home i {color:#222;font-size:20px;line-height:60px;}
#gnb_mob_wrap a.btn_panel {float:right;}
#gnb_mob_wrap a.home {float:left;}

#gnb_mob {float:left;width:calc(100% - 40px);}
#gnb_mob .swiper-slide {width:auto}
#gnb_mob {white-space:nowrap;overflow:hidden}
#gnb_mob ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_mob ul li {display:inline-block;}
#gnb_mob ul li a {display:block;position:relative;height:60px;font-size:16px;font-weight:500;line-height:60px;letter-spacing:-0.5px;}
#gnb_mob ul li a i {margin:0 4px 0 0;font-size:18px;}
#gnb_mob ul li a.active {color:var(--color);}
#gnb_mob ul li a.active:after {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--color);}

#snb_mob {display:block;width:100%;max-width:var(--content-w);height:0;overflow:hidden;margin:0 auto;background:#fff;}
#snb_mob .swiper-slide {width:auto}
#snb_mob {white-space:nowrap;overflow:hidden}
#snb_mob ul:after {display:block;visibility:hidden;clear:both;content:""}
#snb_mob li {display:inline-block;}
#snb_mob a {display:block;position:relative;line-height:40px;letter-spacing:-0.5px;}
#snb_mob a i {margin:0 4px 0 0;font-size:16px;}
#snb_mob a.active {color:var(--color);}
#snb_mob a.active:after {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color);}

@media screen and (max-width:980px) {
#gnb_mob_wrap {height:auto;border-bottom:solid 1px #eee;}
#snb_mob {height:auto;border-bottom:solid 1px #eee;}
}


#bnb_wrap {padding:0 10px;border-top:solid 1px #eee;border-bottom:solid 1px #eee;}
#bnb {display:table !important;table-layout:fixed;width:100%;max-width:var(--content-w);margin:0 auto;}
#bnb .row {display:table-row;}
#bnb .cell {display:table-cell;position:relative;width:20%;vertical-align:middle;}
#bnb .cell a {display:block;color:#666;text-align:center;line-height:46px;}

#bnb .cell:after {content:'';display:block;position:absolute;right:0;top:50%;width:1px;height:12px;margin:-6px 0 0 0;background:#ddd;}
#bnb .cell:last-child:after {display:none;}


@media screen and (max-width:980px) {
#bnb .cell a {font-size:12px;}
}


#footer_wrap {padding:40px 10px 60px 10px;}
#footer {width:100%;max-width:var(--content-w);margin:0 auto;}
#footer .list_table {border-top:none}
#footer .cell {width:40%;color:#999;font-size:13px;text-align:left;line-height:160%;border-bottom:none;vertical-align:top;}
#footer .cell:last-child {width:20%;}
#footer a.btn_cpinfo {display:block;}
#footer a.btn_cpinfo i {font-size:14px;}
#footer a.btn_cpinfo.active i {
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
}
#footer .cpinfo {display:none;}
#footer p strong {font-weight:600;}
#footer p a {display:inline-block;padding:0 6px;color:#999;line-height:20px;background:#fff;border:solid 1px #ddd;border-radius:3px;}
#footer p a i {font-size:8px;vertical-align:middle;}
#footer ul.fnb {}
#footer ul.fnb:after {display:block;visibility:hidden;clear:both;content:""}
#footer ul.fnb li {display:block;float:left;}
#footer .sns {}
#footer .sns:after {display:block;visibility:hidden;clear:both;content:""}
#footer .sns a {display:block;float:left;width:32px;margin:0 10px 10px 0;;line-height:32px;text-align:center;border-radius:50%;overflow:hidden;}
#footer .sns a img {width:80%;height:auto;}


@media screen and (max-width:980px) {

#footer .cell {float:none;width:100%;}
#footer .cell:last-child {width:100%;}
}



.panel {}
.panel .btn_close_panel,
.panel_user .btn_close_panel {display:block;position:absolute;right:0px;top:0px;width:40px;height:40px;background:none;border:none;}
.panel .btn_close_panel i,
.panel_user .btn_close_panel i {font-size:20px;}
.panel_user .btn_close_panel {left:0px;}


.panel #logo {display:block;padding:20px 10px;}
.panel #logo img {width:40px;height:auto;}

.panel_ol {padding:0 10px;line-height:50px;border-bottom:solid 1px #eee;}
.panel_ol:after {display:block;visibility:hidden;clear:both;content:""}
.panel_ol a {display:block;float:left;font-size:13px;}
.panel_ol a:last-child {margin:0;}
.panel_ol a strong {font-weight:600;}
.panel_ol a i {font-size:16px;}
.panel_ol .right {float:right;}
.panel_ol .right:after {display:block;visibility:hidden;clear:both;content:""}


.panel nav ul {}
.panel nav ul li {position:relative;display:block;border-bottom:solid 1px #eee;cursor:pointer}
.panel nav ul li a {display:block;padding:0 10px;font-size:16px;line-height:50px;font-weight:500;letter-spacing:-0.5px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.panel nav ul li a:hover {}
.panel nav ul li a i {width:26px;font-size:18px;}
.panel nav ul li ul {display:none;margin:0;padding:10px 0 0 0;}
.panel nav ul li ul li {border-bottom:none}
.panel nav ul li ul li:last-child {margin:0 0 20px 0;}
.panel nav ul li ul li a {display:block;margin:0 !important;padding:0 20px;color:#666;font-size:14px;line-height:30px;font-weight:normal;}
.panel nav ul li ul li a i {width:20px;font-size:16px;}

.panel nav ul li.active a.active {color:var(--color);}
.panel nav ul li.active ul {display:block;max-height:1000px;}
.panel nav ul li.active ul li a.active {color:var(--color);}

.panel nav ul li .cross {display:block;position:absolute;right:10px;top:0;width:30px;height:50px;text-align:center;z-index:9;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.panel nav ul li .cross i {color:#999;font-size:14px;line-height:50px;}

.panel nav ul li.active .cross {transform-origin:50% 50%;transform:rotate(180deg);}
.panel nav ul li.active .cross i {color:var(--color);}


.panel_user .user {display:block;position:relative;padding:40px 10px;text-align:center;font-weight:600;line-height:normal;border-bottom:solid 1px #eee;}
.panel_user .user .profile_img {display:block;width:60px;margin:0 auto 8px auto;}
.panel_user .user .profile_img img {width:100%;height:auto;}
.panel_user .user p {line-height:20px;}
.panel_user .user p .date {display:block;color:#999;font-size:12px;font-weight:normal;}
.panel_user .user a {display:block;position:absolute;top:50%;width:32px;height:32px;margin:-40px 0 0 0;text-align:center;background:#fff;border:solid 1px #ddd;border-radius:50%;}
.panel_user .user a i {color:#666;font-size:18px;line-height:30px;}
.panel_user .user a.btn_my {left:20px;}
.panel_user .user a.btn_logout {right:20px;}


.user_nav {}
.user_nav ul {}
.user_nav ul:after {display:block;visibility:hidden;clear:both;content:""}
.user_nav ul li {display:block;float:left;width:50%;border-bottom:solid 1px #eee;}
.user_nav ul li:nth-child(1) {width:100%;}
.user_nav ul li:nth-child(2n) {border-right:solid 1px #eee;}
.user_nav ul li a {display:block;position:relative;padding:0 10px;font-size:13px;line-height:40px;}
.user_nav ul li a:after {display:block;visibility:hidden;clear:both;content:""}
.user_nav ul li i {width:20px;color:#444;font-size:16px;vertical-align:middle;text-align:center;}
.user_nav ul li a strong {display:block;float:right;color:#f00001;font-weight:400;}
.user_nav ul li a.btn_normal {display:block;margin:20px}
.user_nav ul li a.btn_normal i {font-size:18px;}

.user_myarticle {}
.user_myarticle ul li {display:block;position:relative;border-bottom:dashed 1px #ddd;}
.user_myarticle ul li:after {content:'';display:block;position:absolute;left:10px;top:14px;width:3px;height:3px;background:#444;border-radius:50%;}
.user_myarticle ul li.empty_list:after {display:none;}
.user_myarticle ul li a {display:block;margin:0 0 0 10px;padding:8px 10px;line-height:140%;}
.user_myarticle ul li a .cnt_cmt {color:#f00001;font-size:12px;font-weight:600;}

ul.tab_my {margin:0 0 10px 0;padding:0 10px;background:#f6f6f6;border-bottom:solid 1px #eee;}
ul.tab_my:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab_my li {display:block;float:left;}
ul.tab_my li a {display:block;position:relative;padding:0 8px;font-weight:600;line-height:40px;}
ul.tab_my li a .count {color:#f00001;font-size:12px;font-weight:400;}
ul.tab_my li a.selected {color:var(--color);}
ul.tab_my li a.selected:after {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color);}


#body_wrap {width:100%;max-width:var(--content-w);min-height:640px;margin:0 auto;padding:20px 0 40px 0;}

#side_wrap {/*position:sticky;left:0;top:80px;*/float:left;width:240px;}

#content_wrap {float:right;width:calc(100% - 280px);}
h2#container_title {display:block;margin:0 0 40px 0;font-size:24px;font-weight:700;}


@media screen and (max-width:1440px) {
#body_wrap {padding:20px 20px 40px 20px;}
h2#container_title {padding:0 10px;}
}


@media screen and (max-width:1280px) {
h2#container_title {padding:0 10px;}

#content_wrap {float:right;width:calc(100% - 260px);}
}

@media screen and (max-width:980px) {
#body_wrap {padding:0 0 40px 0;}
h2#container_title {font-size:18px;line-height:50px;background:#f6f6f6;border-bottom:solid 1px #eee;}

#side_wrap {display:none !important;}

#content_wrap {float:none;width:100%;}
}


#snb {margin:20px 0 0 0;}
#snb .title {display:block;margin:0 0 18px 0;font-size:18px;font-weight:600;}
#snb ul {}
#snb ul li {display:block;}
#snb ul li a {display:block;padding:0 15px;line-height:40px;border-radius:var(--radius);}
#snb ul li a i {width:20px;font-size:18px;}
#snb ul li a:hover,
#snb ul li a.active {color:#fff;background:var(--color);}


#mygnb {margin:0 0 40px 0;background:#fff;}
#mygnb ul {display:block;width:100%;border:solid 1px #ddd;border-radius:var(--radius);overflow:hidden;}
#mygnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#mygnb ul li {display:block;float:left;width:16.66%;border-right:solid 1px #ddd;vertical-align:middle;}
#mygnb ul li:last-child {border-right:none;}
#mygnb ul li a {display:block;padding:18px 0;color:#888;text-align:center;}
#mygnb ul li a .icon {display:block;margin:0 0 6px 0;}
#mygnb ul li a .icon i {color:#ccc;font-size:20px;}
#mygnb ul li a.active {color:#fff;background:var(--color2);}
#mygnb ul li a.active .icon i {color:#fff;}

@media screen and (max-width:1280px) {
#mygnb {margin:0 10px 40px 10px}
}

@media screen and (max-width:980px) {
#mygnb ul li {width:33.33%;}
#mygnb ul li:nth-child(1),
#mygnb ul li:nth-child(2),
#mygnb ul li:nth-child(3) {border-bottom:solid 1px #ddd;}
#mygnb ul li:nth-child(3n) {border-right:none;}
}