@charset "utf-8";
/*-----------------------------------------------------------------------------
  3Wcreative Web Design
  https://www.facebook.com/3wcreative
  Updated: 2014/12/03
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
[TABLE OF CONTENTS]
    +reset
    +common
    +header
    +nav(div.menu)
    +content
        +title
        +banner
    +footer
	    +search_area
        +banner
-----------------------------------------------------------------------------*/
/* reset
*----------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { 
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; 
vertical-align: baseline; background: transparent;}
body { line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
:focus { outline: 0;}
ins { text-decoration: none;}
del { text-decoration: line-through;}
table { border-collapse: collapse; border-spacing: 0;}
/* common
*----------------------------------------------------------------------------*/
html, body {
    color: #555;
    font: 13px/18px Helvetica, sans-serif;
    /*background: #f7f7f7;*/
    background: #efefef;
    -webkit-text-size-adjust: none;
    overflow-x: hidden;
}
/**
*
* anchor
*
**/
a:link, a:visited { color: #000; text-decoration: none;}
a:hover, a:active { color: #000; text-decoration: none;}
/**
*
* clear,clearfix
*
**/
.clear { clear: both;}
.clearfix { display: inline-block;}
.clearfix:after { display: block; visibility: hidden; clear: both; height: 0; font-size: 0; line-height: 0; content: ".";}
* html .clearfix { height: 1%;}
.clearfix { display: block;}
.hidden {display: none;}
/**
*
* input placeholder
*
**/
::-webkit-input-placeholder { color: #888;}
:-moz-placeholder           { color: #888; opacity:  1;}
::-moz-placeholder          { color: #888; opacity: 1;}
:-ms-input-placeholder      { color: #888;}
/* wrapper
*----------------------------------------------------------------------------*/
#wrapper {
    position: relative;
    width: 100%;
	margin: 0 auto;
}
/* header
*----------------------------------------------------------------------------*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*width: 100%;*/
    height: 42px;
    margin: 0 auto;
    overflow: hidden;
    border-bottom: 1px #dedede solid;
	background: url(../../images/mobile/header_bg.gif) repeat-x;
	-webkit-background-size: 100% 42px;
	-o-background-size: 100% 42px;
	background-size: 100% 42px;
	z-index: 99;

    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    -o-transition: top 0.5s;
    transition: top 0.5s;
}
.header.on {z-index: 2;}

.header .topbar {
    text-align: right;
    height: 30px;
    background: #f4f4f4;
}
.header .topbar a {
    position: relative;
    top: 6px;
    line-height: 18px;
    border-right: 1px #d4c8b9 solid;
    padding: 0 15px;
    color: #333;
    font-weight: bold;
}
.header .topbar a:last-child {
    border-right: 0;
}
.header .topbar a.other {
    display: inline;
}

.header .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 86px;
    height: 43px;
/* 20th */
    width: 123px;
    height: 42px;
/* 20th end */
}
.header .logo a {
    display: block;
}
.header .logo a img {
    width: 86px;
    height: 43px;
/* 20th 
    width: 123px;
    height: 42px;
 20th end */
}
.header .theme {
    position: absolute;
    top: 0;
    left: 84px;
/* 20th 
    left: 122px;
 20th end */
    width: 102px;
    height: 42px;
    overflow: hidden;
    z-index: 1;
}
.header .theme img {
    width: 102px;
    height: 42px;
}
.header .tools {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    z-index: 99;
}
.header .tools a.msgComplex,
.header .tools a.qaComplex,
.header .tools a.retail, 
.header .tools a.menu {
    float: left;
    display: block;
    height: 42px;
    text-indent: -10000px;
}
.header .tools a.msgComplex { background: url(../../images/mobile/btn_msgComplex.gif) no-repeat;}
.header .tools a.qaComplex { background: url(../../images/mobile/btn_qaComplex.gif) no-repeat;}
.header .tools a.retail { background: url(../../images/mobile/btn_retail.jpg) no-repeat center;}
.header .tools a.menu {	background: url(../../images/mobile/btn_menu.jpg) no-repeat center;}
.header .tools a.msgComplex,
.header .tools a.qaComplex,
.header .tools a.retail,
.header .tools a.menu {
	-webkit-background-size: 42px auto;
	-o-background-size: 42px auto;
	background-size: 42px auto;
}
.header .tools a.msgComplex {
    width: 53px;
    margin: 0 6px 0 0;
	-moz-background-size: 53px auto;
	-webkit-background-size: 53px auto;
	-o-background-size: 53px auto;
	background-size: 53px auto;
}
.header .tools a.qaComplex{ width: 46px;}
.header .tools a.retail { width: 42px;}
.header .tools a.menu { width: 40px;}
/* nav
*----------------------------------------------------------------------------*/
div.menu {
    position: fixed;
     /*right: -215px;*/
	  right: -280px;
    float: right;
	/*width: 215px;*/
    width: 280px;
	background: #f2f2f2;
	z-index: 90;
}
div.menu.on {
    position: relative;
    right: 0;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
div.menu .menubox {
    /*width: 215px;*/
	width: 280px;
    margin-top: 43px;
}

div.menu .menuhd {
    text-align: right;
    padding: 10px 15px 12px 15px;
}
div.menu .menuhd .logout {
    line-height: 20px;
    padding: 4px 0 0 0;
    font-size: 14px;
}
div.menu .menuhd .logout a {}
div.menu .menuhd .logout .icon {
    float: left;
    width: 24px;
    height: 24px;
    overflow: hidden;
}
div.menu .menuhd .login {
    font-size: 15px;
    line-height: 38px;
}
div.menu .menuhd .login .icon.vip,
div.menu .menuhd .login .icon.vip2,
div.menu .menuhd .login .icon.fet,
div.menu .menuhd .login .icon.web {
    float: left;
    text-align: left;
    overflow: hidden;
}
div.menu .menuhd .logout .icon img {max-width: 24px; max-height: 24px;}
div.menu .menuhd .login .icon.vip img {max-width: 60px; max-height: 48px;}
div.menu .menuhd .login .icon.vip2 img {max-width: 81px; max-height: 48px;}
div.menu .menuhd .login .icon.fet img {max-width: 105px; max-height: 24px;}
div.menu .menuhd .login .icon.web img {max-width: 92px; max-height: 24px;}
div.menu .menuhd .login .icon.vip {
    width: 60px;
    height: 48px;
    margin: -6px 0 0 0;
}
div.menu .menuhd .login .icon.vip2 {
    width: 81px;
    height: 48px;
    margin: -6px 0 0 0;
}
div.menu .menuhd .login .icon.fet {
    width: 105px;
}
div.menu .menuhd .login .icon.web {
    width: 92px;
}
div.menu .menuhd .login .icon.fet,
div.menu .menuhd .login .icon.web {
    height: 24px;
    margin-top: 4px;
}
div.menu .menuhd .login a.iconLogout {
    display: block;
    float: right;
	color: #333;
	font-weight: bold;
    top: auto;
    line-height: 30px;
    padding: 0 0 0 37px;
    border-right: 0;
	background: url(../../images/mobile/icon_logout.png) no-repeat 17px 7px;
	-moz-background-size: 17px auto;
	-webkit-background-size: 17px auto;
	-o-background-size: 17px auto;
	background-size: 17px auto;
}
div.menu .menuhd .login .con {
    width: 190px;
    padding: 5px 0 0 0;
    font: 12px/14px Helvetica, sans-serif;
    text-align: left;
    word-wrap: break-word;
    -moz-binding: url(js/wordwrap.xml#wordwrap);
    display: block;
    overflow: auto;
}
div.menu .menubd {
    border-top: 1px #d8d8d8 solid;
}
div.menu .menubd h3 {
    padding: 0 0 5px 0;
    color: #666;
    font: 12px/18px Helvetica, sans-serif;
}
div.menu .menubd hr {
    display: block;
    height: 1px;
    border: 0;
    margin: 7px auto;
	background: #ede5dc;
}
div.menu .menubd ul {
	display: block;
	clear: both;
	overflow: hidden;
    padding: 0 0 0 33px;
}
div.menu .menubd ul:nth-child(1) {
    background: #fff;
    padding: 0 0 0 15px;
}
div.menu .menubd ul:nth-child(2) {
    background: #e8e8e8;
}
div.menu .menubd.friday ul:nth-child(1) {
    background: #f2f2f2;
    /* ginayeh move 2019/06/27
	border-top: 4px #ddd solid;
    border-bottom: 4px #ddd solid;*/
}
div.menu .menubd.friday ul:nth-child(1) img {
    max-width: 48px;
    vertical-align: middle;
}
div.menu .menubd ul li {
    padding: 12px 0;
    border-top: 1px #a9a9a9 solid;
    /*background: url(../../images/mobile/icon/icon_arrow_nav.png) no-repeat right center;*/
	-moz-background-size: 30px auto;
	-webkit-background-size: 30px auto;
	-o-background-size: 30px auto;
	background-size: 30px auto;
}
div.menu .menubd ul li.noArrow {
    background: none;
}
div.menu .menubd ul li:nth-child(1) {
    border-top: 0;
}
div.menu .menubd ul li,
div.menu .menubd ul li a {
    display: block;
    font: 16px/22px Helvetica, sans-serif;
}
div.menu .menubd ul:nth-child(1) li,
div.menu .menubd ul:nth-child(1) li a {
    font-weight: bold;
}
div.menu .menubd ul li a span {
    color: #e71a0f;
}
div.menu .menubd ul li .app a {
    float: left;
    width: 40px;
    margin: 10px 12px 0 0;
}
div.menu .menubd ul li .app a.last {
    margin: 10px 0 0 0;
}
div.menu .menubd .box {
    padding: 8px 0;
    display: block;
    clear: both;
    overflow: hidden;
}
div.menu .menubd .box a {
    float: left;
    display: block;
    height: 27px;
    text-indent: -10000px;
}
div.menu .menubd .box a.fans {
    float: left;
    width: 110px;
	background: url(../../images/mobile/icon_fans.gif) no-repeat;
	-webkit-background-size: 68px 27px;
	-o-background-size: 68px 27px;
	background-size: 89px 27px;
}
div.menu .menubd .box a.video {
    float: left;
    width: 103px;
	background: url(../../images/mobile/icon_video.gif) no-repeat;
	-webkit-background-size: 103px 27px;
	-o-background-size: 103px 27px;
	background-size: 103px 27px;
}
div.menu .menuft {
    border-top: 1px #bbb solid;
    padding: 8px 8px 40px 8px;
}
div.menu .menuft .menubd {
    border-top: 0;
}
div.menu .menuft .menubd .box {
    margin: 0 0 18px;
    padding: 0 0 10px;
}
div.menu .menuft .box {
    margin: 10px 0 10px 0;
    font: 12px/20px Helvetica, sans-serif;
}
div.menu .menuft .privacy,
div.menu .menuft .copyright {
    font: 12px/18px Helvetica, sans-serif;
}
div.menu .menuft .privacy span {
    padding: 0 3px;
}
/* content
*----------------------------------------------------------------------------*/
.content {
    position: relative;
    width: 100%;
    padding-top: 42px;
	background: #efefef url(../../images/mobile/icon/bg_section.gif) repeat-x 0 42px;
    z-index: auto;
}
.content.on,
.content.ch {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
}
/**
*
* btn
*
**/
.content .btnbox {
    position: relative;
    height: 32px;
}
.content .btnbox span.remove {
    position: absolute;
    top: 0;
    margin: 0;
}
.content .btnbox span.remove.odd ,
.content .btnbox a.btn.odd,
.content .btnboxft a.btn.odd  { left: 0; right: 51%;}
.content .btnbox span.remove.even,
.content .btnbox a.btn.even { left: 51%; right: 0;}
.content .selectCon .btnbox {
    position: relative;
    height: auto;
    line-height: 40px;
    text-align: center;
}
.content .selectCon .btnbox span.remove {
    display: block;
    width: auto;
    height: auto;
    margin: inherit;
    text-align: center;
    color: #000;
}
.content .selectCon .btnbox span.remove.odd { left: 0; right: 52%;}
.content .selectCon .btnbox span.remove.even { left: 52%; right: 0;}
/** 
*
* title
*
**/
.content h2.title {
    position: relative;
    padding: 10px 0 10px 12px;
    font: bold 20px/20px Helvetica, sans-serif;
	background: url(../../images/mobile/icon_unit.gif) no-repeat 0 center;
	-webkit-background-size: 7px 14px;
	-o-background-size: 7px 14px;
	background-size: 7px 14px;
}
.content h2.title fieldset div.btn {
    position: absolute;
    top: 5px;
    right: 6px;
}
.content h2.title fieldset div.btn input[type=reset],
.content h2.title fieldset div.btn input[type=submit],
.content h2.title fieldset div.btn input[type=button] {
    padding: 2px 8px;
    margin: 0;
    font-size: 12px;
    line-height: 22px;
    font-weight: bold;
}
.content h3.titleSearch {
    position: relative;
    padding: 0 0 0 8px;
    margin: 0 6px 7px;
    font: 14px/16px Helvetica, sans-serif;
    border-left: 3px #e71a0f solid;
}
.content h3.titleSearch b {
    color: #e71a0f;
    font: bold 14px/16px Helvetica, sans-serif;
}
/**
*
* banner 
*
**/
.content .banner {
    padding: 2px 0 2px 0;
	background: #fff;
}
.content .banner img {
    width: 100%;
    min-width: 320px;
    vertical-align: bottom;
}
/* backtop
*----------------------------------------------------------------------------*/
.backtop {
    position: fixed;
    right: 5px;
    bottom: 100px;
    width: 40px;
    height: 30px;
    display: none;
    z-index: 80;
}
.backtop a {
    display: block;
    width: 40px;
    height: 30px;
    font-size: 0;
    text-indent: -100000px;
	background: url(../../images/mobile/icon_top.png) no-repeat;
	-webkit-background-size: 40px auto;	
	-o-background-size: 40px auto;	
	background-size: 40px auto;	
}
/* footer
*----------------------------------------------------------------------------*/
.footer {
    position: relative;
    width: 100%;
    margin: 0 auto;
	background: #e9e4de;
}
.content .footer .banner {
    padding: 2px 0 0 0;
}
.footer .link {
    margin: 0 7px;
    padding: 10px 0 10px 0;
}
.footer .link h3  {
    font-size: 17px;
    line-height: 24px;
    font-weight: bold;
    color: #8a5f3c;
	background: none;
	padding: 0 6px;
	margin: 0 0 8px 0;
}
.content .footer hr {
    border: 0 none;
    display: block;
    height: 1px;
    margin: 6px 6px 10px 6px;
    background: #c2afa0;
}
.footer .link h4 {
    margin: 0 0 0 0;
    padding: 0 6px;
    color: #555;
    font: bold 17px/26px Helvetica, sans-serif;
}
.footer .link ul.column {
    padding: 0 6px 6px 6px;
}
.footer .link ul li {
	display: table-cell; 
	*display: inline;
	zoom: 1;
	vertical-align: top;
    width: 50%;
    padding: 5px 0 0 0;
    font: 16px/26px Helvetica, sans-serif;
}
.footer .link ul li.odd a {
    margin: 0 8px 0 7px;
}
.footer .link ul li.even a {
    margin: 0 7px 0 8px;
}
/* search
*----------------------------------------------------------------------------*/
/**
*
* search
*
**/
/*---------------------------------------------------------------------------*/
/* searchrevampbox
/*---------------------------------------------------------------------------*/
.searchrevampbox {
    position: relative;
    width: 100%;
    clear: both;
}
.searchrevampbox .searchbox {
    position: relative;
}
.searchrevampbox.schon .searchbox {
    margin: 3px 10px 3px 10px;
    background: #fff;
}
/**
*
* schselect
*
**/
.searchrevampbox .searchbox .arrowdelbox {
    float: left;
    width: 68px;
	height: 33px;
    display: block;
	display: none;
}
.searchrevampbox .searchbox .arrowdelbox select.schselect {
    position: relative;
    top: 7px;
    left: 3px;
    width: 60px;
	height: auto;
	font-size: 1em;
    border: 0;
	background: url(../../images/mobile/SearchRevamp/icon_selectArrow.png) no-repeat right center;
	-webkit-background-size: 16px auto;
	-o-background-size: 16px auto;
	background-size: 16px auto;
    cursor: inherit;
    -webkit-appearance: none;
}
.searchrevampbox.schon .searchbox .arrowdelboxno {
    float: left;
    width: 58px;
	height: 33px;
    display: block;
	background: url(../../images/mobile/SearchRevamp/search_select.gif) no-repeat;
}
.searchrevampbox.schon .searchbox .arrowdelboxno select.schselect {
    position: relative;
    top: 7px;
    left: 3px;
    width: 82px;
	height: auto;
	font-size: 1em;
    border: 0;
	background: url(../../images/mobile/SearchRevamp/search_select.gif) no-repeat -7px -7px;
    cursor: inherit;
}
/**
*
* schtags
*
**/
.searchrevampbox .searchbox .schtags {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    right: 34px;
	height: 33px;
	overflow: hidden;
}
.searchrevampbox .searchbox .schtags a.schclose {
    position: absolute;
    top: 0;
    right: -31px;
    width: 31px;
    height: 33px;
    text-indent: -10000px;
	background: url(../../images/mobile/SearchRevamp/icon_search_close.gif) no-repeat 5px 0;
	display: none;
    z-index: 9;
}
.searchrevampbox .searchbox .schtags input.schtext {
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
	height: 23px;
	text-indent: 5px;
	color: #636363;
	border: 0;
	font: 13px/26px Helvetica, sans-serif;
	text-indent: 1px;
	-webkit-appearance: none;
    border-radius: 0;
    z-index: 0;
}
.searchrevampbox .searchbox .schtags.on {}
/**
*
* schsubmit
*
**/
.searchrevampbox .searchbox input.schsubmit {
    float: right;
    width: 33px;
	height: 33px;
	border: 0;
	cursor: pointer;
	background: #b0b0b0 url(../../images/mobile/SearchRevamp/icon_magnifier.png) no-repeat center;
	-webkit-background-size: 22px auto;
	-o-background-size: 22px auto;
	background-size: 22px auto;
	-webkit-appearance: none;
    border-radius: 0;
}
/**
*
* popupsearch
*
**/
.searchrevampbox .popupsearch {
    background: #f6f6f6;
    z-index: 980;
    display: none;
}
.searchrevampbox .popupsearch .searchbox {
    position: relative;
    margin: 10px;
}
.searchrevampbox .popupsearch ul.schcon {
    clear: both;
    display: block;
    overflow: hidden;
	background: #fff;
}
.searchrevampbox .popupsearch ul.schcon li {
    float: left;
    width: 50%;
}
.searchrevampbox .popupsearch ul.schcon li a {
    display: block;
    margin: 0 5px;
    padding: 5px;
    color: #333;
	font: 13px/30px "Arial";
	text-decoration: none;
    text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.searchrevampbox .popupsearch ul.schcon li a:hover {
    color: #333;
	text-decoration: underline;
}
.hot_key { display:none;}
.footer .search_area { 
	position: relative; 
	font-size: 13px; 
	padding: 8px 0 6px;
	background: #d5d5d5;
}
/* media
*----------------------------------------------------------------------------*/
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
	.searchrevampbox .searchbox .arrowdelbox select.schselect {
	    text-indent: 3px;
	    background-image: url(../../images/mobile/SearchRevamp/search_select_max.gif);
        -webkit-background-size: 58px 33px;
        background-size: 58px 33px;
	}
	.searchrevampbox .searchbox .schtags a.schclose {
	    background-image: url(../../images/mobile/SearchRevamp/icon_search_close_max.gif);
        -webkit-background-size: 21px 33px;
        -o-background-size: 21px 33px;
        background-size: 21px 33px;
	}
}
/* popup
*----------------------------------------------------------------------------*/
.popupMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: url(../../images/mobile/icon_mask.png) repeat;
	display: none;
	z-index: 89;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
	background: url(../../images/mobile/icon_mask.png) repeat;
	display: none;
	z-index: 89;
}
/**
*
* line-height
*
**/
.ht1  { height: 1px;}
.ht3  { height: 3px;}
.ht4  { height: 4px;}
.ht5  { height: 5px;}
.ht6  { height: 6px;}
.ht7  { height: 7px;}
.ht8  { height: 8px;}
.ht9  { height: 9px;}
.ht10 { height: 10px;}
.ht11 { height: 11px;}
.ht12 { height: 12px;}
.ht13 { height: 13px;}
.ht14 { height: 14px;}
.ht15 { height: 15px;}
.ht16 { height: 16px;}
.ht18 { height: 18px;}
.ht21 { height: 21px;}
.ht30 { height: 30px;}
.ht40 { height: 40px;}
.ht3,  .ht4,  .ht5,
.ht6,  .ht7,  .ht8,
.ht9,  .ht10, .ht11,
.ht12, .ht13, .ht14,
.ht15, .ht16, .ht18,
.ht21, .ht30, .ht40 { clear: both;}
/**
*
* width
*
**/
/* Percentage */
.wpe20  { width: 20%;}
.wpe45  { width: 45%;}
.wpe100 { width: 100%;}
/* Pixels */
.wpx10  { width: 10px;}
.wpx60  { width: 60px;}
.wpx80  { width: 80px;}
.wpx100 { width: 100px;}
.wpx120 { width: 120px;}
.wpx135 { width: 135px;}
.wpx150 { width: 150px;}
.wpx160 { width: 160px;}
.wpx180 { width: 180px;}
.wpx200 { width: 200px;}
/* em */
.wem30  { width: 3em;}
.wem35  { width: 3.5em;}
.wem40  { width: 4em;}
.wem45  { width: 4.5em;}
.wem50  { width: 5em;}
.wem55  { width: 5.5em;}
.wem60  { width: 6em;}
.wem65  { width: 6.5em;}
.wem70  { width: 7em;}
.wem72  { width: 7.2em;}
.wem75  { width: 7.5em;}
.wem80  { width: 8em;}
.wem85  { width: 8.5em;}
.wem90  { width: 9em;}
.wem95  { width: 9.5em;}
.wem100 { width: 10em;}
.wem105 { width: 10.5em;}
.wem110 { width: 11em;}
.wem115 { width: 11.5em;}
/**
*
* font-size
*
**/
.font12  { font-size: 12px;}
.font12.gray { color: #888;}
.font13  { font-size: 13px;}
.font14  { font-size: 14px;}
.font16  { font-size: 16px;}
.font17  { font-size: 17px;}
.font18  { font-size: 18px;}