@charset "UTF-8";

@import url("common.css");

/* 151103 SM */

/*pop*/
#server.pop{position:absolute;text-align:center;z-index:200;}
.bgPop{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:url('../images/common/bg_pop.png') 0 0 repeat;z-index:100;}

/*guidepop*/
#wrap.guide{background:#eaeaea url('../images/sub/bg_pop.jpg') center 0 no-repeat}
#wrap.guide #hdWrap{background:none}
#wrap.guide #ftWrap{margin-top:0}
#wrap.guide h2{float:left;padding:40px 0 0;color:#fff;font-size:34px;font-weight:bold}
.guide #container .cLeft{width:275px}
.guide #container .cRight{width:705px}
.guide #container #top{
position:absolute;
bottom:56px;
right:-50px;
width:50px;
height:100px;
background:url('../images/sub/bg_top.png') 0 0 repeat}
#top a{
display:block;
width:100%;
height:50px;
padding:50px 0 0;
color:#fff;
font-size:12px;
text-align:center;
text-decoration:none;
background:url('../images/sub/btn_top.png') center 27px no-repeat}

.cLeft .gMenu{margin:10px 35px 10px 10px}
.gMenu>ul>li{margin:0 0 1px;font-size:14px}
.gMenu>ul>li>a{
display:block;
width:190px;
height:29px;
line-height:28px;
padding:1px 20px 0;
color:#fff;
background:#61100e url('../images/sub/btn_guide.png') 96% 50% no-repeat}
.gMenu>ul>li.on>a,
.gMenu>ul>li>a:hover{
color:#ff8711;
text-decoration:none;
background-image:url('../images/sub/btn_guide_over.png')}
.gMenu .dept2{padding:0 7px;letter-spacing:-1px}
.gMenu .dept2>li{padding:7px 0 5px 7px;font-size:12px;border-top:1px dotted #adadad}
.gMenu .dept2>li:first-child{border-top:0}
.gMenu .dept2>li>a{color:#18324f;line-height:1.4em;}
.gMenu .dept2>li.on>a,
.gMenu .dept2>li>a:hover{color:#ff8711;font-weight:bold}

.cRight .title{margin:12px 0 0;font-size:15px;font-weight:bold;border-bottom:2px solid #ebebeb}
.cRight .title h3{padding:0 0 7px;color:#18324f;letter-spacing:-1px;border-bottom:2px solid #191e3b}
.gTab{margin:10px 0 0}
.gCont{margin:25px 10px 0;padding:0 0 35px}
.gCont p{color:#666;line-height:1.3em}
.gCont p.image{margin:0 0 17px;text-align:center}
.gCont p img{max-width:100%}

/*serverPop*/
#server{
position:relative;
width:680px;
height:380px;
padding:93px 30px 37px;
background:url('../images/common/bg_server.jpg') 0 0 no-repeat}
#server .close{position:absolute;right:0;top:0;text-align:right}
.sList{float:left;width:400px;height:350px;margin:0 0 0 32px;padding:30px 22px 0 26px}
.sList.fir{width:180px;margin-left:0;padding-left:10px;padding-right:10px}
.sList th,
.sList td{padding:0;text-align:center;font-weight:normal}
.sList th,
.sList td.state{color:#31b7c0}
.sList td.state.new{color:#fe0000}
.sList td.state.reco{color:#40d600}
.sList td.state.ppl{color:#ffde00}
.sList td.state.conge{color:#ff00e4}
.sList th{
height:19px;
border-bottom:1px solid #364189;
border-left:1px solid #21285c;
background:#0b0f2e}
.sList th:first-child{border-left:0}
.sList td{height:30px;color:#fff;border-left:1px solid #222c63}
.sList td:first-child{border-left:0}
.sList td.server{font-weight:bold}

/*paging*/
.paging{
display:table;
width:100%;
padding:8px 0 0
;font-size:0;
line-height:0;
text-align:center;
background:url('../images/board/bg_server.jpg') 0 0 repeat-x}
.paging a img{vertical-align:middle}
.paging p,
.paging ul,
.paging ul li{display:inline-block;vertical-align:top}
.paging p{margin:-2px 0 0 17px}
.paging p:first-child{margin-left:0}
.paging ul{margin:0 3px 0 20px}
.paging ul li{position:relative;padding:0 0 0 20px;vertical-align:middle}
.paging ul li:before{
content:"|";
position:absolute;
top:0px;
left:8px;
color:#fff;
font-size:11px;
line-height:1em}
.paging ul li:first-child{padding-left:0}
.paging ul li:first-child:before{content:"";width:0}
.paging ul li a{color:#fff;font-size:11px;line-height:1em}
.paging ul li.on a,
.paging ul li a:hover{font-weight:bold}