﻿
.container {width:90%;max-width:1600px;margin:auto;}
        
#header{}
#header .h_state{background-color:#ededed;padding:10px; position:relative;}
#header .h_state *{}
#header .h_state .ip{font-size:.75rem; font-weight:500;}
#header .h_state .ip i{color:#EB6329; margin-right:4px; font-size:.85rem; vertical-align:middle;}
#header .h_state .tnb{position:absolute;right:7px;top:5px;}
#header .h_state .tnb ul{display:none;}
#header .h_state .tnb ul li{float:left;margin-right:15px;}
#header .h_state .tnb ul li:last-child{margin-right:0px;}
#header .h_state .tnb ul li *{font-size:.85rem; font-weight:400;}
#header .h_state .btn-menu{width: 30px;height: 30px;transition: all .4s;overflow: hidden; border:none;}
#header .h_state .btn-tnb{background:url(/Images/Common/m_menu_bar.png) no-repeat 50%; background-size: 75%; float: right;margin-right: 2%;}
#header .h_state .btn-close {background-image: url(/Images/Common/ic_btnClose_black.png); background-size: 60%;transform: rotate(-180deg);transition: all .4s;}
        
#header .h_title{ padding:30px 0px 30px;  text-align:center;}
#header .h_title .logo{padding-bottom:30px; text-align:center;}
#header .h_title .logo img{width:270px;}
#header .h_title .search{width: 95%;margin:auto;text-align:left;}
#header .h_title .mainSearch{position:relative;}
#header .h_title .mainSearch .rescan-checker{display:none; position:absolute;top:-24px; }
#header .h_title .mainSearch .rescan-checker input{padding:0px;width:18px;height:18px; vertical-align:text-bottom;}
#header .h_title .mainSearch .rescan-checker label{color:#fff;}
#header .h_title .mainSearch input{width: calc(100% - 45px);height:45px;font-size:1.2rem;padding:0px 5px;border:2px solid #EB6329;}
#header .h_title .mainSearch button{position:absolute;right: 0px;top:0px;width:45px;height:45px;background-color:#EB6329;border:2px solid #EB6329;}
#header .h_title .mainSearch button *{color:#fff; font-size:1.6rem;}
#header .h_title .otherSearch{ display:none;}
#header .h_title .subscription{ display:none;}


@media (min-width : 640px) {
    #header .h_title .logo img{width:286px;}
    #header .h_title .search{width:90%;}
}


@media (min-width : 850px) {
	#header .h_state {}
    #header .h_state .tnb ul{ display:block;}
	#header .h_state .btn-menu{display:none;}
    #header .h_state .tnb{right:17px;}
	#header .h_title {}
    #header .h_title .logo img{width:320px;}
    #header .h_title .mainSearch{ margin-bottom:10px;}
    #header .h_title .otherSearch{display:block;position:relative;}
	#header .h_title .otherSearch {width: 100%;}
    #header .h_title .otherSearch ul{}
    #header .h_title .otherSearch ul li{float:left;width:calc(100%/3); text-align:center;}
    #header .h_title .otherSearch ul li a{display:inline-block;width:calc(100% - 20px); font-size:1.2rem; color:#EB6329; font-weight:bold;}
    #header .h_title .otherSearch ul li:nth-child(2)::before{content:'|'; color:#EB6329; font-weight:bold;}
    #header .h_title .otherSearch ul li:nth-child(2)::after{content:'|'; color:#EB6329; font-weight:bold;}
}

@media (min-width : 1000px) {
    #header .h_title{text-align:center;}
    #header .h_title .container{}

    #header .h_title .logo{ display:inline-block;}
	#header .h_title .logo img{max-width:100%; vertical-align:middle;}
    #header .h_title .search{ display:inline-block;width:60%; margin-left:20px;  padding:15px 10px;}
}
@media (min-width : 1350px) {
    #header .h_title .container{width:1330px;}
    #header .h_title .logo img{ position: relative; top: 5px;}
    #header .h_title .search{ width:56%; }
	#header .h_title .subscription{position:relative;top:-17px; display:inline-block;text-align:center; line-height:0px; vertical-align:bottom;border:1px solid #cacaca;}
    #header .h_title .subscription img{padding:17px 0px;max-width:80%;}
    #header .h_title .subscription p{background-color:#cacaca; font-size:.85rem;}
}
.mo-fixed{position:fixed;}
.mo-menu{display:none; position:fixed; z-index:3000;left:0;top:0;width:100%;height:100vh;  overflow:auto;}
.mo-menu .container{position:absolute;left:100%;top:0px;width:0%; padding-top:40px; min-height:100vh; overflow:hidden;}  
.mo-menu-open { display:block;}
.mo-menu-open .container-open{left: 0%;width: 100%;overflow:auto; transition: all .4s;}
.mo-menu .m-head{ position:absolute; right:0px; top:8px; height:32px;min-width:30%; padding-right:10px; text-align:right;}
.mo-menu .m-body { height: -moz-calc(100vh - 50px); height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); overflow-y:auto; background-color: #fff; }
.mo-menu .link-btn{display:inline-block;padding:7px 0px;width:42%;max-width:180px;border-radius:6px;text-align:center;margin-right: 5%;}
.mo-menu .m-head i{color:#EB6329;}
.mo-menu .m-head button.close{margin-left: 3px;border:none;background:none;}
.mo-menu .m-head button.close i{color:#808080;position: relative;bottom: 3px;font-size: 1.9rem;}
.mo-menu .m-head #m_icon1 {font-size: 1.4rem;}
.mo-menu .m-head #m_icon2 {font-size: 1.2rem;position: relative;bottom: 1px;margin-left: 8px;}
.mo-menu .m-logo{padding-top:10px;padding-bottom: 20px;background:url('/Images/Common/sub_top_bg.jpg') no-repeat;text-align:center;}
.mo-menu .m-logo img{max-width: 70%;}
.mo-menu .logout{position:absolute;right: 10px;padding: 5px 10px;border-radius: 5px;}
.mo-menu .m-account-group {padding-top: 20px;padding-bottom: 20px;}
.mo-menu .m-account-group .login{  background-color:#EB6329; color:#fff;}
.mo-menu .m-account-group .not-user{position:relative;/* display: none; */}
.mo-menu .m-account-group .not-user p{position:absolute;bottom:0px;right: 10px;width:50%;line-height:130%;text-align: right;}
.mo-menu .m-account-group .not-user p span{display:inline-block;font-size: .85rem;color: #545454;}
.mo-menu .m-account-group .user{position:relative;}
.mo-menu .m-account-group .auto-login {} 
.mo-menu .m-account-group .user .group-logo{width:50%;}
.mo-menu .m-account-group .auto-login .group-logo{margin:auto;}
.mo-menu .m-account-group .group-logo img{max-width:100%;}
.mo-menu .m-account-group .logout{top: 8px;border: 1px solid #999999;background-color: #fff;color: #999999;}
.mo-menu .m-account-user {padding-top: 20px;padding-bottom: 20px;margin-bottom:20px;background-color: #E6E6E6;}
.mo-menu .m-account-user .login{ background-color:#5F5F5F; color:#fff;}
.mo-menu .m-account-user .join{margin-left: 3%;text-decoration:underline;width: 45%;display: inline-block;text-align: right;font-size: 1.2rem;color: #545454;}
.mo-menu .m-account-user .user {position:relative;}
.mo-menu .m-account-user .user a.my{display:inline-block;width: 60%;padding:5px;margin-right:3%;font-weight:600;vertical-align:text-top; text-align:center; background-color:#f7f7f7; overflow:hidden;}
.mo-menu .m-account-user .logout{top: 0px;background-color:#5F5F5F;color:#fff;}
.mo-menu .m-account-user ul li{float:left;width:32%;margin-top:15px; margin-right:2%;padding:2px 0px; border:1px solid #999999;border-radius:3px; text-align:center; background-color:#fff;}
.mo-menu .m-account-user ul li:last-child{margin-right:0%;}
.mo-menu .m-search form{width:96%;padding:5px; margin:auto;margin-bottom:20px;border:1px solid #cecece; border-radius:6px;}
.mo-menu .m-search input{padding:4px 0px; width:calc(100% - 45px); border:none; font-size:1.1rem;}
.mo-menu .m-search button{background-color:#fff; border:none;}
.mo-menu .m-search button i{font-size:2rem; color:#939393;}
.mo-menu .m-quick .q1{margin-bottom: 10px;text-align:center;}
.mo-menu .m-quick .q1 a{display:inline-block;width:32%; max-width:150px; padding:100px 0px 20px;border:1px solid #cecece; border-radius:6px;background-repeat:no-repeat; background-size:contain; text-align:center; font-weight:600;transition: background 0.5s ease-out; }
.mo-menu .m-quick .q1 a:last-child{margin-right:0px;}
.mo-menu .q_pu{ background-image:url(/Images/icon/m_icon1.png); background-position-y:15%; }
.mo-menu .q_jr{ background-image:url(/Images/icon/m_icon2.png); background-position-y:10%; }
.mo-menu .q_ad{ background-image:url(/Images/icon/m_icon3.png); background-position-y:20%;   }
.mo-menu .m-quick .q1 .q_pu:hover { background:#efefef url('/Images/icon/m_icon1.png') no-repeat 0 15%;  background-size:contain;   }
.mo-menu .m-quick .q1 .q_jr:hover { background:#efefef url('/Images/icon/m_icon2.png') no-repeat 0 10%;  background-size:contain;   }
.mo-menu .m-quick .q1 .q_ad:hover { background:#efefef url('/Images/icon/m_icon3.png') no-repeat 0 20%;   background-size:contain; }
.mo-menu .m-quick .q2 a{display:inline-block;width: 48.5%;max-width:225px;padding:30px 0px 30px;border-radius:6px;background-color:#e6e6e6;font-weight:600;text-align: center;}
.mo-menu .m-quick .q2 a:hover {  background: #4444;  }
.mo-menu .m-quick .q2 i{color:#a0a0a0;font-size: 1.5rem;margin-right:8px;}
.mo-menu .m-quick .q2 .q_cs { margin-right:1%;   }
.mo-menu .space{padding-left:30px;padding-right:30px;}
  
	@media(min-width:450px) {
		.mo-menu .m-body { position:absolute;right:0px;max-width:450px;}
		.mo-menu .m-body::after { content: ''; background-color:rgba(0,0,0,0.7); position: fixed ; width:100%; height:100%; top:40px; left:0; z-index:-1  }
    }
    @media (min-width : 850px) {
		.mo-menu-open {display:none;}
        .mo-fixed{position:initial;}
    }


#footer{padding:30px 10px; background:url(/Images/Common/footer_bg.jpg) no-repeat 50% 0% rgba(27, 27, 17, .1);}
#footer .f_logo{display:none;}
#footer .fnb{ text-align:center;margin-bottom:40px;}
#footer .fnb *{ color:#d0d0d0;letter-spacing:-1px;}
#footer .fnb li{ display:inline-block;}
#footer .fnb li::before{content:'|'; margin-left:10px;margin-right:10px;}
#footer .fnb li:first-child::before{content:'';margin:0px;}
        
#footer .copyright{ text-align:center;}
#footer .copyright *{font-size:.75rem; font-weight:200; color:#fff; letter-spacing:-1px;}
#footer .copyright p{ }
#footer .copyright span{ display:inline-block; word-break:break-all;margin-right:10px;}
#footer .copyright span::before{content:'|';margin-right:10px; }
#footer .copyright span:first-child::before{content:'';margin-right:0px;}

@media (min-width : 900px) {
    #footer{padding:60px 10px;}
}
@media (min-width : 1000px) {
    #footer .container{position:relative;}
    #footer .f_logo{display:block;margin-bottom:20px;}
	#footer .fnb{position:absolute;right:0px; top:0px;}
	#footer .copyright{text-align:left;}
    #footer .copyright *{ font-size:.8rem;}
}
@media (min-width : 1200px) {
	
	#footer{padding:80px 10px;}
}

#move_top {position:fixed;right:10px;bottom:10px; display: inline-block;padding: 10px 15px;border-radius: 50%;transition: background 0.5s ease-out;background-color: #a4a4a4;font-size: 2rem;color: #fff; cursor:pointer;}
#move_top:hover{background-color:#EB6329;}