/* header */
.noticeWrap {display: flex;justify-content: space-between;align-items: center;}
.noticeWrap .langbtn {width: 80px;margin-left: auto;}
.noticeWrap .langdropbtn {height: 32px;border-radius: 0;padding: 0 10px;display: flex;align-items: center;}
.noticeWrap .langdropdown {top: 35px;background: #141414;width: 60px;padding: 5px 0;text-align: center;border-radius: 10px;font-size: 12px;}
.noticeWrap .langdropdown a:first-child {margin-top: 0;}
.noticeWrap .langdropdown a {color: #fff;margin-top: 5px;}
header .notice {
	width: calc(100% - 80px);
	height: 32px;
	display: flex;
	align-items: center;
	background: #1c594e;
	z-index: 2;
	overflow: hidden;
}
header .notice em {
	background: #1c594e;
	color: #fff;
	font-size: 12px;
	z-index: 1;
	padding: 10px;
}
header .notice span {
	letter-spacing: -0.025em;
	animation: banneranimation 20s infinite;
	animation-timing-function: linear;
	position: relative;
	color: #fff;
	font-size: 12px;
}
@keyframes banneranimation {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}

.msgArt {width: 230px;background: url("../assets/img/msg_bg.svg") no-repeat;border: 2px solid #d6a630;z-index: 100;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);text-align: center;}
.msgArt img {margin: 47px 0 20px;}
.msgArt p {font-size: 14px;color: #fff;line-height: 1.5em;margin: 27px 0;}
.msgArt a {height: 39px;border: solid 1px #ecd14c;background-color: #d6a630;display: flex;align-items: center;justify-content: center;font-size: 18px;color: #070709;}

.header {
	padding: 0 20px;
	height: 50px;
	display: flex;
	justify-content: space-between;
   align-items: center;
	box-shadow: rgb(0 0 0 / 24%) 0px 0px 5px;
	background: #1a191c;
   border-bottom: 1px solid #333;
}
.langbtn {
	position: relative;
}
.langbtn img:first-child {width: 25px;border-radius: 30px;}
.langbtn img {
	height: 25px;
	vertical-align: middle;
}
.langdropbtn {
	background: #141414;
	border: 0;
	border-radius: 30px;
	padding: 3px;
}
.langsp {
	padding: 0 5px 0;
	color: #fff;
	font-weight: bold;
	vertical-align: middle;
}
.langdropdown {
	position: absolute;
	top: 35px;
	right: 0;
	z-index: 2;
}
.langdropdown a {
	display: block;
}
.langbtnb {
	height: 4px !important;
	margin-right: 3px;
}
.logininfowrap {display: flex;gap: 10px;align-items: center;}
.mloginbtn {background: #222;border: 1px solid #777;border-radius: 30px;padding: 5px 10px;color: #fff;font-size: 13px;}
.mym {display: flex;font-size: 11px;gap: 5px;}
.myc {display: flex;justify-content:space-between;align-items: center;gap: 3px;color: #e5972d;}
.myp {display: flex;justify-content:space-between;align-items: center;gap: 3px;color: #60c359;}
.myg {display: flex;justify-content:space-between;align-items: center;gap: 3px;color: #6c42a3;}
.mymsg {position: relative;font-size: 10px;display: inline-block;}
.mymsg img {height: 15px;}
.mymsg .mgsn {position: absolute;top: -5px;right: -8px;background: #ed2f59;color: #fff;border-radius: 30px;padding: 3px 5px;}
.fx {position: fixed;bottom: 0;width: 100%;z-index: 1;box-shadow: rgb(0 0 0 / 35%) 1px 2px 10px;}
.fxhead {display: flex;}
.fxhead li {width: 100%;background: #1a191c;border-top: 1px solid #333;box-sizing: border-box;}
.fxhead li.on {background: #222;border-left: 1px solid #333;border-right: 1px solid #333;}
.fxhead li a {display: block;}
.fxhead li em {display: block;width: 40px;height: 40px;margin: auto;margin-top: 5px;}
.fxhead li span {display: block;font-size: 12px;color: #fff;text-align: center;padding: 5px 0 10px;}
.fxhead .atten em {background: url(../assets_mobile/img/headin_off.svg) no-repeat;background-position: center;}
.fxhead .notice em {background: url(../assets_mobile/img/headout_off.svg) no-repeat;background-position: center;}
.fxhead .home em {background: url(../assets_mobile/img/headboard_off.svg) no-repeat;background-position: center;}
.fxhead .ques em {background: url(../assets_mobile/img/headqna_off.svg) no-repeat;background-position: center;}
.fxhead .my em {background: url(../assets_mobile/img/headmy_off.svg) no-repeat;background-position: center;}
.fxhead .atten.on em {background: url(../assets_mobile/img/headin_on.svg) no-repeat;background-position: center;}
.fxhead .notice.on em {background: url(../assets_mobile/img/headout_on.svg) no-repeat;background-position: center;}
.fxhead .home.on em {background: url(../assets_mobile/img/headboard_on.svg) no-repeat;background-position: center;}
.fxhead .ques.on em {background: url(../assets_mobile/img/headqna_on.svg) no-repeat;background-position: center;}
.fxhead .my.on em {background: url(../assets_mobile/img/headmy_on.svg) no-repeat;background-position: center;}
.fxhead .on span {color: #b5bebc;}

.loginWrap{	margin-top: -45px;height: 45px;float: right;display: flex;align-items: center;position: absolute;right: 0;}
.logindropbtn {border: none;cursor: pointer;}
.logindropdown {position: relative;display: inline-block;margin-left: 10px;}
.logindropdown-content {display: none;position: absolute;right: 0;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 2;}
.logindropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}
.mybtn{border-radius: 20px;padding:8px 10px;}
.msgbtn{border-radius: 20px;padding: 10px 9px;margin-left: 10px;}
.msgbtn img{vertical-align: middle;}
.langbtn img{}

.moneybtn{background: none;}
.moneysp{font-weight: bold;display:block;}
.logindropdown-content a:hover {background-color: #f1f1f1;}
.logindropdown:hover .logindropdown-content {display: block;}

/* login */
.loginbtn{background:#3484cb;border-radius: 20px;padding: 8px 10px;color: #fff;margin: 5px 0;cursor: pointer;}
.loginmodal {display: block;position: fixed;z-index: 100;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.8);}
.modal-content {background-color: #f5f9fb;margin: 15% auto;padding: 30px 50px;border-radius: 4px;box-shadow: 4px 4px 10px 2px #000000;width: 350px;position: relative;}
.login-popup-title {font-weight: bold;font-size: 35px;text-align: center;padding: 0 0 15px;background: linear-gradient(to right, #865c03, #c78a00);-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: block;font-weight: 800;display:block;}
.logininput{border: 1px solid #101010c7;border-radius: 3px;padding: 6px 45px 6px 20px;position: relative;margin-bottom: 15px;width:calc(100% - 5px);height: 45px;padding: 0 0 0 5px;}
.loginnbtn,.joinnbtn{height: 45px;line-height: 45px;display: block;text-align: center;font-weight: bold;}
.loginnbtn.on,.joinnbtn.on{background: linear-gradient(to right, #865c03, #c78a00);border-radius: 3px;color: #fff;cursor: pointer;}
.loginclose{position: absolute;right: 30px;top: 30px;cursor: pointer;}

/* join */
.joinwrap{width: 500px;margin: 0 auto;padding: 100px 50px;margin-top: 100px;margin-bottom: 100px;border: 1px solid #101010c7;border-radius: 4px;}
.join-title{font-weight: bold;font-size: 35px;text-align: center;padding: 0 0 15px;background: linear-gradient(to right, #865c03, #c78a00);-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: block;font-weight: 800;display:block;}
.join-fx{display: flex;}
.join-fx input:first-child{margin-right: 15px;}
.joinwrap	input{width: calc(100% - 5px);padding: 0 0 0 5px;height: 52px;margin: 0 0 15px;border-radius: 4px;border: 1px solid #101010c7;}
.joinbtn{display: block;text-align: center;border-radius: 4px;background: linear-gradient(to right, #865c03, #c78a00);color: #fff;height: 52px;line-height: 52px;cursor: pointer;font-weight: bold;}
