#header{ position:fixed; z-index:1000; top:0; left:0; width:100%; transition:0.3s background-color; padding:0 20px; background-color:rgba(27,27,27,0.4); }
#header, #header *{ box-sizing:border-box; }
#header.fixed{ box-shadow:0 0 10px 0 rgba(0,0,0,0.2); }
#header .hd_box{ position:relative; z-index:1; max-width:1763px; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }

.hd_logo{ padding:12.5px 30px 12.5px 0; font-size:30px; font-weight:700; line-height:1em; width:228px; }
.hd_logo > a{ position:relative; display:block; }
.hd_logo > a > img{ display:block; max-height:36px; width:auto; }
.hd_logo > a > img.fixed{ position:absolute; top:0; left:0; opacity:0; transition:0.4s opacity 0s; }
#header.fixed .hd_logo > a > img.fixed{ opacity:1; }


.mo_btn{ width:50px; height:60px; align-items:center; justify-content:center; display:none; }
.mo_btn:hover{ cursor:pointer; }
.mo_btn > i{ font-size:20px; }


/* pc_gnb */
.hd_mn{ display:flex; align-items:center; }
.pc_gnb{ display:flex; }
.pc_gnb > li{ position:relative; }
.pc_gnb > li > a{ position:relative; display:block; font-size:17px; font-weight:700; padding:22.5px 40px; }
.pc_gnb > li > a.on:after{ content:''; position:absolute; z-index:1; bottom:0; left:0; height:2px; width:100%; }
.pc_gnb > li > a > p{ width:100%; overflow:hidden; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.pc_gnb > li > ul{ position:absolute; z-index:1; top:100%; left:0; min-width:100%; background-color:#444; display:none; }
.pc_gnb > li > ul > li{ position:relative; }
.pc_gnb > li > ul > li > a{ position:relative; display:block; width:100%; font-size:14px; font-weight:300; padding:10px 20px; color:#ddd; white-space:nowrap; }
.pc_gnb > li > ul > li > a.list{ padding-right:25px; }
.pc_gnb > li > ul > li > a.list:after{ content:''; position:absolute; z-index:1; top:16.5px; right:16px; width:7px; height:7px; border-top:1px solid #ddd; border-right:1px solid #ddd; transform:rotate(45deg); }
.pc_gnb > li > ul > li > ul{ position:absolute; z-index:1; left:100%; top:0; min-width:100%; background-color:#444; display:none; }
.pc_gnb > li > ul > li > ul > li{ position:relative; }
.pc_gnb > li > ul > li > ul > li > a{ display:block; font-size:14px; font-weight:300; padding:10px 20px; color:#ddd; white-space:nowrap; }


/* mo_gnb */
.mo_gnb{ position:absolute; top:100%; left:0; width:100%; box-sizing:border-box; max-height:350px; overflow-x:hidden; overflow-y:auto; background-color:#2b2b2b; display:none; }
.mo_gnb::-webkit-scrollbar { width:5px; background-color:transparent; position:fixed; z-index:999999; }
.mo_gnb::-webkit-scrollbar-track{ background-color:#666; }
.mo_gnb::-webkit-scrollbar-thumb { background-color:rgba(255, 255, 255, 0.4);  border-radius:20px; }
.mo_gnb *{ box-sizing:border-box; }
.mo_gnb > li{ position:relative; }
.mo_gnb > li > a{ background-color:#3e3e3e; display:block; padding:12px 15px; font-size:14px; font-weight:400; color:#eee; border-top:1px solid rgba(30,30,30,1); border-bottom:1px solid rgba(255,255,255,0.1); }
.mo_gnb > li > a.list{ padding-right:61px; }
.mo_gnb > li > .list_btn{ position:absolute; top:0; right:0; background-color:#4e4e4e; width:46px; height:46px; font-size:17px; display:flex; align-items:center; justify-content:center; border-top:1px solid rgba(30,30,30,1); border-bottom:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(30,30,30,0.4); }
.mo_gnb > li > .list_btn:hover{ cursor:pointer; }
.mo_gnb > li > .list_btn > i{ color:#aaa; }
.mo_gnb > li > .list_btn.act > i{ transform:rotate(90deg); }
.mo_gnb > li > ul{ background-color:#212121; display:none; }
.mo_gnb > li > ul > li{ position:relative; }
.mo_gnb > li > ul > li > a{ background-color:#212121; display:block; padding:13px 15px 13px 20px; font-size:14px; font-weight:400; color:#ddd; }
.mo_gnb > li > ul > li > a.list{ padding-right:61px; }
.mo_gnb > li > ul > li > .list_btn{ position:absolute; top:0; right:0; background-color:#4e4e4e; width:46px; height:46px; font-size:17px; display:flex; align-items:center; justify-content:center; border-top:1px solid rgba(30,30,30,1); border-bottom:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(30,30,30,0.4); }
.mo_gnb > li > ul > li > .list_btn > i{ color:#aaa; }
.mo_gnb > li > ul > li > .list_btn.act > i{ transform:rotate(90deg); }
.mo_gnb > li > ul > li > ul{ background-color:#181818; display:none; }
.mo_gnb > li > ul > li > ul > li{ position:relative; }
.mo_gnb > li > ul > li > ul > li > a{ background-color:#181818; display:block; padding:12px 15px 12px 25px; font-size:14px; font-weight:400; color:#ccc; }

.hd_add{ display:flex; align-items:center; justify-content:flex-end; padding-left:15px; width:228px; }

/* pc_lang */
.pc_lang{ position:relative; }
.pc_lang > .lang_btn{ position:relative; padding:4px 15px 4px 0; }
.pc_lang > .lang_btn:hover{ cursor:pointer; }
.pc_lang > .lang_btn:after{ content:''; position:absolute; z-index:1; top:9.5px; right:0; border-top:5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent; }
#header.fixed .pc_lang > .lang_btn:after{ border-top:5px solid #212121; }
.pc_lang > .lang_btn > i{ display:block; font-size:16px; }
.pc_lang > .lang_btn:focus{ outline:none; }
.pc_lang > .lang_btn.opened, #header.fixed .pc_lang > .lang_btn.opened{ border-bottom:none !important; }
.pc_lang > .lang_btn > img{ margin-right:10px; }
.pc_lang > .lang_btn > i.pull-right{ position:absolute; z-index:10; top:50%; right:7px; transform:translate(0, -50%); }
.pc_lang > .lang_list{ position:absolute; z-index:1; top:40px; right:0; min-width:150px; display:none; border:1px solid #e5e5e5; box-sizing:border-box; background-color:#fff; border-radius:3px; padding:0 10px; }
.pc_lang > .lang_list > li{ border-bottom:1px solid #e5e5e5; }
.pc_lang > .lang_list > li:last-child{ border-bottom:none; }
.pc_lang > .lang_list > li > a{ display:flex; align-items:center; padding:10px; text-align:left; font-size:14px; color:#777; }
.pc_lang > .lang_list > li > a > img{ margin-right:10px; }

/* hd_mail */
.hd_mail{ margin-left:20px; }
.hd_mail > a{ display:inline-block; padding:5px 12px; font-size:13px; font-weight:300; color:#fff; display:flex; align-items:center; justify-content:center; border-radius:30px; border:1px solid #fff; transition:0.3s border-color 0s, 0.3s background-color 0s, 0.3s color 0s; }
#header.fixed .hd_mail > a{ border:1px solid #ddd; color:#333; }
.hd_mail > a:hover, #header.fixed .hd_mail > a:hover{ border-color:#3c9eff; background-color:#3c9eff; color:#fff; }
.hd_mail > a > i{ margin-right:5px; }

/* mo_mail */
.mo_mail{ margin-left:15px; display:none; }
.mo_mail > a{ display:block; font-size:20px; }
.mo_mail > a > i{ display:block; }

/* mo_lang */
.mo_lang{ height:50px; align-items:center; justify-content:center; display:none; }
.mo_lang:hover{ cursor:pointer; }
.mo_lang > i{ font-size:20px; }

.lang_menu_wrap{ background-color:#353535; position:fixed; z-index:9999; top:0; bottom:0; left:0; right:0; padding:50px 20px; background-color:rgba(0,0,0,0.3); overflow-y:auto; transition-duration:0.4s; display:none; }
.lang_menu_box{ width:100%; height:100%; position:relative; }
.lang_menu_close{ position:absolute; top:8px; right:8px; color:#fff; font-size:20px; line-height:20px; cursor:pointer; }
.lang_title{ font-size:17px; margin-bottom:10px; text-align:center; }

.lang_menu{ width:350px; padding:40px 20px; background-color:#2c2f3e; position:relative; }
.lang_menu ul.lang_list{ padding:12px 25px; background-color:#222531; }
.lang_menu ul li{ border-bottom:1px solid #51556a; }
.lang_menu ul li:last-child{ border-bottom:none; }
.lang_menu ul li a{ font-size:14px; transition-duration:0.3s; color:#fff; display:flex; align-items:center; padding:7px 3px; }
.lang_menu ul li a:hover{ padding-left:10px; } 
.lang_menu ul li a img{ margin-right:10px; }

/* member */
.hd_mem{ position:relative; height:50px; padding-right:15px; margin-right:15px; display:flex; align-items:center; justify-content:center; }
.hd_mem:after{ content:''; position:absolute; z-index:1; width:1px; height:12px; top:calc(50% - 6px); right:0; background-color:#fff; }
#header.fixed .hd_mem:after{ background-color:#ddd; }
.hd_mem:hover{ cursor:pointer; }
.hd_mem > p{ font-size:14px; }
.hd_mem > i{ font-size:23px; }

.member_menu_wrap{ background-color:#353535; position:fixed; z-index:9999; top:0; bottom:0; left:0; right:0; padding:50px 20px; background-color:rgba(0,0,0,0.3); overflow-y:auto; transition-duration:0.4s; display:none; }
.member_menu_box{ width:100%; height:100%; position:relative; }
.member_menu_close{ position:absolute; top:8px; right:8px; color:#fff; font-size:20px; line-height:20px; cursor:pointer; }
.member_menu{ width:350px; padding:40px 45px 30px; background-color:rgba(44, 47, 62, 0.9); position:relative; }
.member_profile_wrap{ width:150px; height:150px; border-radius:100%; overflow:hidden; margin:0 auto 12px; }
.member_profile_wrap img{ display:block; width:100%; height:auto; }
.member_profile_desc{ font-size:15px; text-align:center; line-height:1.5; word-break:keep-all; margin-bottom:30px; }
.member_login_form .form{ border-bottom:1px solid #51556a; margin-bottom:10px; position:relative; }

.form span{ color:#fff; font-size:21px; position:absolute; top:6px; left:0; }
.form input{ width:100%; border:none; background-color:transparent !important; color:#a7a9b7; padding:12px 5px 12px 30px; font-size:14px; position:relative; }
.form input.inputid:before{ content:'\e68a'; font-family:xeicon; position:absolute; top:0; left:0; color:#fff; font-size:14px; }
.form input.inputpw:before{ content:'\e66b'; font-family:xeicon; position:absolute; top:0; left:0; color:#fff; font-size:14px; }

.log_add_wrap{ margin-bottom:30px; }

.keep_login{ display:flex; align-items:center; }
.keep_login input[id="keepid_opt"] + label{ display:inline-block; width:12px; height:12px; border:1px solid #51556a; margin-right:10px; float:left; position:relative; }
.keep_login input[id="keepid_opt"]:checked + label:before{ content:"\f00c"; font-family:FontAwesome; font-size:12px; color:#d4d4d4; position:absolute; top:0; left:0; }
input#keepid_opt{ display:none; }
.keep_login label{ font-size:12px; color:#adadad; }
.find_account{ text-align:center; font-size:14px; margin-top:10px; }
.find_account a{ display:block; color:#adadad; padding:7px; }
.login_submit, .login_signup{ width:100%; padding:10.5px 5px; font-size:14px; color:#fff; border-radius:100px; display:inline-block; box-sizing:border-box; margin-bottom:10px; text-align:center; cursor:pointer; }
.login_signup{ background-color:#efefef; color:#666; }

.logged_menu{ padding:12px 25px; background-color:#222531; }
.logged_menu ul li a{ border-bottom:1px solid #51556a; }
.logged_menu ul li:last-child a{ border-bottom:none; }
.logged_menu ul li a{ font-size:14px; transition-duration:0.3s; color:#fff; display:block; padding:7px 3px; }
.logged_menu ul li a:hover{ padding-left:10px; } 

.logged_menu ul li.logged_btn{ display:block; }
.logged_menu ul li.logged_btn a{ position:relative; padding:7px 3px 7px 20px; transition-duration:0.3s; }
.logged_menu ul li.logged_btn a:before{ position:absolute; transition-duration:0.3s; top:9px; right:calc(100% - 15px); color:#fff; font-family:xeicon; }
.logged_menu ul li.logged_btn:nth-child(2) a:before{ content:'\e68a'; }
.logged_menu ul li.logged_btn:nth-child(3) a:before{ content:'\e64e'; }
.logged_menu ul li.logged_btn:nth-child(4) a:before{ content:'\e651'; }
.logged_menu ul li.logged_btn:nth-child(5) a:before{ content:'\e673'; }
.logged_menu ul li.logged_btn:nth-child(6) a:before{ content:'\e68e'; }
.logged_menu ul li.logged_btn:nth-child(7) a:before{ content:'\e6ed'; }
.logged_menu ul li.logged_btn a:hover{ padding-left:27px; }
.logged_menu ul li.logged_btn a:hover:before{ margin-right:-7px; }


@media(max-width:1240px){
	.pc_gnb > li > a{ padding:22.5px 30px; }
}
@media(max-width:1140px){
	.pc_gnb > li > a{ padding:22.5px 15px; }
}
@media(max-width:991px){
	.mo_btn{ display:flex; }
	#header{ padding:0; border-bottom:1px solid rgba(255,255,255,0.3); }
	
	.hd_logo{ position:absolute; z-index:1; top:50%; left:50%; width:auto; padding:0; font-size:25px; transform:translate(-50%, -50%); }
	.hd_logo > a > img{ max-height:25px; }

	.pc_gnb{ display:none; }
	
	.hd_mail{ display:none; }
	.mo_mail{ display:block; }

	.hd_add{ margin-left:0; padding-right:10px; width:auto; }

	.pc_lang{ display:none; }
	
	.mo_lang{ display:flex; }

	.hd_mem{ height:60px; display:none; }
}