@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('//fonts.googleapis.com/css?family=Lato:300,400');

html, body	{height: 100%; width: 100%;}
body	{margin: 0; padding: 0; font: 13px 'Nanum Gothic', sans-serif;}

/* reset style */
a	{outline: none; text-decoration:none;}
a:hover	{text-decoration:none;}
a:visited	{text-decoration:none;}
a:active	{text-decoration:none;}
a, input, button, textarea	{outline: none;}
section, aside, nav, header, footer	{display: block;}
textarea	{resize: vertical;}
pre	{padding: 10px 15px; background: #FFF url(../images/bg_pre.png); overflow: auto; word-wrap: normal;}

ul, ol, dl, dd, dt	{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, p, figure	{margin:0; padding:0;}
img	{border:none;}
button, input[type=button]	{background: none; border: none; cursor: pointer; padding: 0; margin: 0;-webkit-font-smoothing: subpixel-antialiased !important;}
input, textarea, button, select	{font: 13px 'Nanum Gothic', sans-serif;  outline: none;}
.hide	{visibility: hidden; padding: 0; margin: 0; height: 0; width: 0; overflow: hidden;}
.num	{font: 11px "Lato", "Nanum Gothic", sans-serif;}
.round5	{border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
.round10	{border-radius: 10px; -webkit-border-radius:10px; -moz-border-radius: 10px;}
.round50p	{border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}
.addon_menu_new_comment,
.addon_menu_new	{margin-left: 5px !important; vertical-align: middle;}

.dis-table	{display: table; height: 100%;}
.dis-table-in	{display: inline-table; height: 100%; vertical-align: middle;}
.dis-cell	{display: table-cell; vertical-align: middle;}

.newIcon	{margin-left: 3px; vertical-align: middle;}
.bPf-wrap	{display: inline-block; background-color: #FFF; padding: 5px; width: 40px; height: 40px;}
.bPf	{display: inline-block; background: url('../images/profile.png') no-repeat center bottom; overflow: hidden;}
.bPf-wrap,
.bPf,
.bPf-img,
.bSc	{width: 40px; height: 40px;}
.bPf.sm	{width: 30px; height: 30px; background-image: url('../images/profile_min.png');}
.bPf.sm .bPf-img	{width: 30px; height: 30px;}
.bSc	{display: inline-block; text-align: center;}
.bSc i	{display: inline-block; margin-top: 7px; font-size: 26px; color: #FFF;}


.bBt	{display: inline-block; padding: 0 15px !important; height: 25px; line-height: 25px; border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; font-size: 11px; transition-property: background-color, color, box-shadow; transition-duration: 0.5s;}
.bBt:hover	{box-shadow: none;}
.bBt.bs2	{background-color: #FFF;}
.bBt.smt	{color: #FFF;}
.bBt.smt:hover	{box-shadow: none;}

.bt-group	{display: inline-block; border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; vertical-align: middle; overflow: hidden;}
.bt-group .bt	{display: inline-block; margin-right: 1px; height: 25px; line-height: 25px; padding: 0 15px; font-size: 11px; transition-property: background-color, color; transition-duration: 0.5s;}
.bt-group .bt:hover	{background-color: #FFF;}
.bt-group .bt:last-child	{margin-right: 0;}

.rBtCtn .bBt	{margin-left: 5px;}
.lBtCtn .bBt	{margin-right: 5px;}
.cBtCtn .bBt	{margin: 0 3px;}
.aRight	{text-align: right;}
.aCenter	{text-align: center;}
.aLeft	{text-align: left;}

#popup_menu_area	{outline: none !important; box-shadow: none !important;}
.scrollToTop	{position:fixed; bottom:10px; right:10px; display: none; z-index: 100;}
.scrollToTop span	{display: inline-block; width: 40px; height: 40px; line-height: 40px; color: #FFF; font-size: 24px; text-align: center;}
.scrollToTop span::after	{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; z-index: -1;}


/* layout */
.cCtn	{position: relative; min-height: 100%; width: 100%; min-width: 1400px; padding-bottom: 120px; box-sizing: border-box;}
.wrapper	{position: relative; width: 1400px; margin: 0 auto;}
.cCon	{float: left; width: 850px; margin: 0;}
.sidebar1	{float: left; width: 200px;}
.sidebar2	{float: right; width: 250px;}
.sidebar1	{position: relative; z-index: 3;}
.sidebar2	{position: relative; z-index: 0;}
.cFt-wrap	{position: absolute; left: 0; bottom: 0; width: 100%;}
.fg-wrap	{position: absolute; top: 0; left: 50%; width: 1400px; height: 100%; margin-left: -700px; z-index: -1;}
.fg-sb1	{position: absolute; left: 200px; top: 0; width: 1px; height: 100%; z-index: 2}
.fg-sb2	{position: absolute; right: 250px; top: 0; width: 1px; height: 100%; z-index: 2}
.fg-sb3	{position: absolute; left: 0; top: 0; width: 1px; height: 100%; z-index: 2}
.fg-sb4	{position: absolute; right: 0; top: 0; width: 1px; height: 100%; z-index: 2}
.fg-con	{position: absolute; left: 201px; top: 0; width: 950px; height: 100%; z-index: 1;}


/* color changer */
#colorChanger .bt-wrap	{position: fixed; left: 0; top: 0; height: 100%; padding: 0 10px; z-index: 10;}
#colorChanger .bt-wrap::before	{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; opacity: 0.6; z-index: -1;}
#colorChanger .bt-wrap::after	{content: ''; position: absolute; right: -1px; top: 0; width: 1px; height: 100%; background-color: #000; opacity: 0.1;}
#colorChanger button	{display: block; margin-top: 10px;}
#colorChanger .close	{width: 30px; margin: 15px 0 25px; text-align: center; font-size: 24px;}
#colorChanger .open	{position: fixed; left: -50px; top: 4px; display: block; width: 45px; height: 45px; margin-top: 0; padding-right: 10px; border-radius: 0 25px 25px 0; font-size: 24px; z-index: 11; overflow: hidden;}
#colorChanger .open::before	{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; opacity: 0.6; z-index: -1;}


/* header */
.cHd-wrap	{position: relative; min-width: 1400px;}
.cHd-img img	{display: block; position: relative; max-width: 1400px; height: auto; margin: 0 auto; z-index: 2;}
.cHd-wrap::after	{content:''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.cHd-wrap::before	{content:''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.cHd	{position: relative; width: 1400px; height: 54px; margin: 0 auto; z-index: 4;}
.cHd-logo	{display: inline-table; width: 54px; height: 54px; margin-right: 15px; background-repeat: no-repeat; background-position: center center; vertical-align: middle;}
.cHd-h1	{font: 300 18px/18px "Lato", "Nanum Gothic", sans-serif;}
.brd	{padding-left: 8px; padding-top: 2px;}
.brd i	{margin: 0 8px;}
.brd span	{display: none;}
.cHd a,
.cHd i	{color: #FFF;}

.cHd .bt-area-wrap	{float: right; position: relative;}
.cHd button i,
.cHd .cn-icon i 	{margin-left: 5px; font-size: 18px;}
.cn	{display: inline-block; vertical-align: middle;}
.cn-icon	{position: relative; display: inline-block; font-size: 18px;}
.cn-num	{position: absolute; left: 15px; top: -7px; padding: 1px 5px; font-size: 10px; color: #FFF;}
.cn-list,
.no-notify	{display: none; position: absolute; top: 80%; right: 0; width: 251px; font-size: 12px; line-height: 160%; color: #CCC;}
.cn-list a	{color: #CCC !important;}
.cn-list button	{font-size: 11px; color: #CCC;}
.cn-list::after,
.no-notify::after	{content: ''; position: absolute; bottom: 100%; right: 6px; border-right: 4px solid transparent; border-top: 4px solid transparent; border-left: 4px solid transparent;}
.cn-list li	{position: relative; padding: 10px 10px 10px 60px; min-height: 40px; border-bottom: 1px dashed #666;}
.cn-list .bPf	{position: absolute; left: 10px; top: 10px;}
.cn-list .ago	{margin-left: 5px; color: #888;}
.cn-list strong	{font-weight: normal; color: #FFF;}
.cn-list strong:nth-child(2)	{border-bottom: 1px solid #888;}
.no-notify	{padding: 8px 12px; width: auto; white-space: nowrap;}

.cn-extra	{padding: 10px 10px 0; text-align: center;}
.cn-close	{float: right; margin-top: 3px; margin-bottom: 12px;}
.cn-more i	{font-size: 11px !important;}
.bt_readall	{float: left; margin-top: 3px; margin-bottom: 12px;}
.desc_readall	{display: none; clear: both; padding: 10px 0; margin: 0 -10px; background-color: #ffffd1;}
.desc_readall button	{margin: 0 5px;}
.desc_readall button:hover	{text-decoration: underline;}

.gSearch	{display: inline-block; position: relative;}
.gSearch button	{display: inline-block; vertical-align: middle; cursor: text;}
.in_global_search	{display: none; position: absolute; right: 30px; top: 50%; margin-top: -15px; width: 0; padding: 7px 10px; border: 1px solid #efefbf; border-top: none; background-color: #ffffd1; box-sizing: border-box; vertical-align: middle; font-size: 14px; line-height: 14px; z-index: 2;}

.con-notice-icon	{vertical-align: middle; opacity: 0.5}
.con-notice-icon.on	{opacity: 1.0;}

/* sidebar1 */
.sidebar	{box-sizing: border-box;}
.sidebar1	{padding-right: 20px; font-size: 12px;}
.cLogin	{height: 31px; padding-top: 19px; padding-left: 15px;}
.cLogin li	{display: inline-block; width: calc(50% - 15px); text-align: center;}

.cLogged	{position: relative; height: 31px; padding-top: 19px; padding-left: 40px;}
.cLogged .bPf	{position: absolute; top: 10px; left: 0; background: url('../images/profile_min.png') no-repeat center bottom;}
.cLogged .bPf,
.cLogged .bPf-img	{width: 30px; height: 30px;}
.cLogged .bt-logout	{display: inline-block; position: absolute; right: 0; top: 50%; margin-top: -6px; width: 12px; height: 12px; background-color: #FFF; text-align: center;}

/* gnb */
.cGnb	{border-top: none !important;}
.cGnb>ul>li	{margin-bottom: -1px;}
.cGnb>ul>li>div	{position: relative; padding: 8px 10px 8px 10px;}
.cGnb>ul>li>ul	{margin: 12px 10px 0 10px;}
.cGnb>ul>li>ul>li	{margin-bottom: 12px;}
.cGnb>ul>li>ul>li>ul	{margin-top: 12px; padding-left: 10px;}
.cGnb>ul>li>ul>li>ul>li	{margin-bottom: 6px;}
.cGnb>ul>li>ul>li>ul>li:last-child	{margin-bottom: 0;}

.cGnb>ul>li.active>div	{margin: 0 -1px; border-left: none; z-index: 1;}
.cGnb>ul>li.active>div::after	{content:''; position: absolute; right: -1px; top: 50%; margin-top: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid transparent;}
.cGnb>ul>li.active>div>a	{color: #FFF;}
.cGnb>ul>li>ul>li.active>a,
.cGnb>ul>li>ul>li>ul>li.active>a	{text-decoration: underline;}

.cGnb .m_link>span	{display: inline-block; margin-right: 8px; width: 14px; height: 14px; font: 10px/14px "Lato", sans-serif; text-transform: uppercase; text-align: center; color: #FFF;}

.cGnb .menu_toggle	{display: inline-block; position: absolute; right: 0; top: 0; width: 30px; height: 30px; text-align: center;}
.cGnb .active .menu_toggle	{color: #FFF;}
.cGnb .down	{display: none}
.cGnb .up	{display: inline-block;}
.cGnb .closed .down	{display: inline-block;}
.cGnb .closed .up	{display: none;}

/* content */
.cCon	{padding: 50px;}
.con-notice	{display: none; margin-bottom: 25px; overflow: hidden;}
.con-notice .inner	{padding: 20px 25px; line-height: 180%;}
.con-notice .bBox-under	{padding: 10px; text-align: right;}
.con-notice .close	{font-size: 11px;}
.con-notice a	{text-decoration: underline; color: #2793e6;}
.con-notice a:hover	{text-decoration: none;}

/* sidebar2 */
.sidebar2	{padding-left: 20px;}
.sidebar .c_widget	{font-size: 12px;}
.sidebar2 .c_widget	{padding: 20px 0;}
.sidebar1 .c_widget	{padding: 10px; margin-top: 20px;}
.myAtc h2	{margin-bottom: 15px ; font-weight: normal; font-size: 12px;}
.myAtc li	{margin-bottom: 10px;}
.myAtc li:last-child	{margin-bottom: 0;}
.myAtc .check	{margin-right: 5px; padding: 1px 1px 0 2px; font-size: 11px; line-height: 100%; color: #FFF;}

.sidebar2.hided	{position: absolute; right: -251px; top: 0; height: auto;}
.sb2-icon i.xi-hamburger-out	{display: none;}
.sb2-icon i.xi-hamburger-back	{display: inline-block;}
.sb2-icon.on i.xi-hamburger-out	{display: inline-block; color: #cc0000;}
.sb2-icon.on i.xi-hamburger-back	{display: none;}

/* footer */
.cFt-wrap	{min-width: 1400px;}
.cFt	{width: 1400px; position: relative; margin: 0 auto; padding: 20px 0; font-size: 12px; color: #888;}
.cFt a	{color: #888;}
.cFt a:hover	{color: #ccc;}
.cFt-code	{margin-bottom: 5px; line-height: 160%;}
.copyright a	{color: #ccc; text-decoration: underline;}
.copyright a:hover	{text-decoration: none;}

.cFt-menu	{position: absolute; right: 0; top: 50%; margin-top: -8px;}
.cFt-menu li	{display: inline-block; position: relative; padding-left: 20px;}
.cFt-menu li::before	{content: ''; position: absolute; left: 10px; top: 3px; width: 1px; height: 8px; background-color: #888;}
.cFt-menu li:first-child::before	{display: none;}


/* slider */
.cCon_slider	{position: relative; margin: -50px 0 25px; overflow: hidden; z-index: 3}
.swiper-container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	/* Fix of Webkit flickering */
	z-index: 1;
}
.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.swiper-slide	{
	-webkit-flex-shrink: 0;
	-ms-flex: 0 0 auto;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
}
.w_slide_info	{position: absolute; left: 0; bottom: 0; padding: 15px; width: 100%; box-sizing: border-box; font-size: 12px; font-weight: normal;}
.w_slide_info:before	{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.4;}
.w_slide_info>div	{position: relative; z-index: 1;}
.w_slide_info .w_browser	{margin-right: 5px;}
.w_slide_info .w_category	{margin-right: 3px; color: #CCC;}
.w_slide_info .title	{color: #FFF; font-weight: bold; line-height: 22px;}
.w_slide_page	{position: absolute; right: 15px; bottom: 18px; z-index: 10;}
.w_slide_page.center	{width: 100%; left: 0; text-align: center;}
.swiper-pagination-bullet	{display: inline-block; margin-left: 4px; width: 10px; height: 10px; cursor: pointer; background-color: #FFF; opacity: 0.5;}
.swiper-pagination-bullet-active	{opacity: 1.0;}
.w_slide_prev,
.w_slide_next	{display: none; position: absolute; top: 50%; margin-top: -25px; width: 33px; height: 50px; line-height: 50px; overflow: hidden; z-index: 10; cursor: pointer; text-align: center; font-size: 20px; color: #FFF;}
.w_slide_prev	{left: 0;}
.w_slide_next	{right: 0;}
.swiper-container:hover .w_slide_prev,
.swiper-container:hover .w_slide_next	{display: block;}
.w_slide_link	{display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5;}

.w_slide	{position: relative;}
.w_slide_title	{position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-size: 12px; z-index: 10;}
.w_slide_title a	{display: inline-block; padding: 0 15px; height: 30px; line-height: 30px; color: #FFF !important; -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);-webkit-backface-visibility: hidden; color: #FFF !important;}

/* memeber slider */
.m_slider	{margin-top: 20px;}
.m_slider h2, .m_slider h3	{font-weight: normal; font-size: 12px;}
.m_slider h2	{padding: 10px; margin: -1px -1px 0; color: #FFF;}
.m_slider h3	{padding: 5px 10px; margin-bottom: -1px; cursor: pointer;}
.m_slider .cRank	{padding: 10px;}
.m_slider h3+div	{display: none;}
.m_slider .on h3+div	{display: block;}

/* custom_select */
.sbHolder	{position: relative; display: inline-block; vertical-align: middle; text-align: left;}
.sbSelector	{display: inline-block; position: relative; padding: 0 22px 0 8px; box-sizing: border-box; background: #FFF url(../images/icn_select_arrow.png) no-repeat right 6px top -10px; font-size: 12px;}
.sbToggleOpen+.sbSelector	{background-position: right 6px top 10px;}
.sbOptions	{position: absolute; left: -1px; top: 100%; width: calc(100% - 1px); padding-bottom: 8px; background-color: #FFF; list-style: none; overflow-y: auto; z-index: 100; font-size: 11px;}
.sbOptions li	{padding: 8px 8px 0;}

.cs-bs .sbSelector	{height: 26px; line-height: 26px; font-size: 12px;}
.cs-bs .sbOptions	{left: 0; width: calc(100% - 2px);}

/* custom check */
input.custom_check	{display: none;}
input.custom_check + label	{cursor: pointer; font-size: 12px;}
input.custom_check + label span	{display: inline-block; vertical-align: middle;}
.check_dummy	{display: inline-block; margin-right: 5px; width: 15px; height: 15px; line-height: 15px; background-color: #FFF; text-align: center;}
.check_dummy i	{font-size: 14px; line-height: 14px; color: #FFF;}

.custom_check2 input	{display: none;}
.custom_check2 label.check_dummy	{cursor: pointer;}
.custom_check2 input:checked + label.check_dummy i	{display: inline; font-size: 14px; line-height: 14px;}
.custom_check2 input:checked + label.check_dummy span	{display: none;}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
 
.clearfix:after {
    clear: both;
}