@charset "UTF-8";

/* --------------------------------------------------
 Base
-------------------------------------------------- */
/* @import url('https://fonts.googleapis.com/css?family=Prompt'); */
@import url('https://fonts.googleapis.com/css?family=Sarabun');

body,ol,ul,dl,li,dt,dd,table,th,td,input,textarea,select,h1,h2,h3,h4,h5,h6{
color:#e6e6de;
font-weight:normal;
/* font-family: 'Prompt', sans-serif; */
font-family: 'Sarabun', sans-serif;
font-weight:300;
letter-spacing:0;
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
}

html{
overflow-y:scroll;
}

body{
background:#4e3013 url(../img/common/bg_pattern03.png) repeat center top;
font-size:100%;
min-width:320px;
line-height:2;
word-wrap:break-word;
position:relative;
overflow-x:hidden;
}

@media screen and (max-width: 767px) {
body{
font-size:90%;
line-height:1.8;
}
}

h1,h2,h3,h4,h5,h6{
line-height:1.8;
}

img{
max-width:100%;
vertical-align:middle;
}

input{
padding:5px 8px;
}

textarea{
padding:3px;
}

ol{
margin:0px 0px 0px 21px;
}

ol > li{
list-style:decimal outside;
margin:0px 0px 10px;
}

a:link,
a:visited{
color:#e6e6de;
text-decoration:none;
outline:0;
}

a:hover,
a:active{
color:#e6e6de;
text-decoration:none;
}

em{
font-style:normal;
font-weight:bold;
color:#e6e6de;
}

strong{
font-style:normal;
font-weight:bold;
}

hr{
border-color:rgba(0, 0, 0, 0.225);
}

/* --------------------------------------------------
 Wrapper
-------------------------------------------------- */
#wrapper{
width:100%;
}


/* --------------------------------------------------
 Pure-drawer
-------------------------------------------------- */
#leftArea{
background-color:#24231d;
display:none;
}

#leftInner{
box-sizing:border-box;
min-width:300px;
height:102%;
overflow:scroll;
padding:0 0 10%;
width:100%;
}

#leftInner .top-panel{
background-color:#1f1e1c;
display:flex;
align-items:center;
flex-wrap:wrap;
}

#leftInner .logo{
height:53px;
border-bottom:1px solid #2d2c25;
padding:12px 20px 12px 73px;
display:flex;
align-items:center;
flex:1;
}

#leftArea[data-position="right"] #leftInner .logo img{
display:none;
}

#leftInner .logo img{
max-width:200px;
}

#leftInner .menu-setting{
width:100%;
border-bottom:1px solid #2d2c25;
padding:7px 10px;
}

#leftInner .menu-setting li{
line-height:1.5;
text-align:center;
}

#leftInner .menu-setting li input[type="radio"]{
display:none;
}

#leftInner .menu-setting li label{
padding:2px 7px;
}

#leftArea[data-position="left"] #leftInner .menu-setting li label[for="left"]{
border:2px solid #645a37;
}

#leftArea[data-position="right"] #leftInner .menu-setting li label[for="right"]{
border:2px solid #645a37;
}

#leftInner .nav-bar{
width:100%;
display:none;
}

#leftArea[data-position="right"] #leftInner .nav-bar{
display:block;
}

#leftInner .nav-bar ul{
display:flex;
justify-content:center;
}

#leftInner .nav-bar ul li a{
font-size:85%;
padding:7px 15px;
display:block;
}

#leftInner .nav-bar ul li i{
color:#dec264;
}

#leftInner .nav-sp .title{
padding:7px 15px;
}

#leftInner .nav-sp ul{
display:flex;
flex-wrap:wrap;
}

#leftInner .nav-sp ul li{
width:100%;
line-height:1.5;
border-bottom:1px solid #2d2c25;
border-right:none;
}

#leftInner .nav-sp ul li a{
font-size:95%;
text-align:left;
padding: 15px 5px 15px 58px;
display:block;
position:relative;
}

#leftInner .nav-sp ul li.accordion a.accordTtl:before{
content:"";
background-color:#e6e6de;
width:1px;
height:7px;
margin:auto;
position:absolute;
top:0;
bottom:0;
right:20px;
}

#leftInner .nav-sp ul li.accordion a.accordTtl:after{
content:"";
background-color:#e6e6de;
width:7px;
height:1px;
margin:auto;
position:absolute;
top:0;
bottom:0;
right:17px;
}

#leftInner .nav-sp ul li.accordion a.accordTtl.onclick:before{
display:none;
}

#leftInner .nav-sp ul li i{
font-size:140%;
color:#dec264;
width:40px;
height:40px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
position:absolute;
top:0;
bottom:0;
left:5px;
}

#leftInner .nav-sp ul li .accordContent > li > a{
background-color:#1f1e1c;
padding:10px 5px 10px 68px;
}

#leftInner .nav-sp ul li .accordContent > li > a i{
font-size:95%;
left:25px;
}

.pure-pusher-container{
/* height:100%; */
/* position:relative; */
}

.pure-pusher{
/* height:100%; */
}

input#pure-toggle-left,
input#pure-toggle-top,
input#pure-toggle-right,
label.pure-toggle-label{
display:none;
}

@media screen and (max-width: 1200px) {
#leftArea{
display:block;
height:100%;
margin-top:0;
overflow:hidden;
position:fixed;
}

.pure-pusher{
overflow-y:auto;
}
}

@media screen and (max-width: 767px) {
}

@media only screen and (max-width: 40.063em) {
}

@media screen and (max-width: 480px) {
#leftInner .nav-bar{
display:block;
}
}


/* --------------------------------------------------
 Header
-------------------------------------------------- */
#header{
width:100%;
position:relative;
box-sizing:border-box;
}

#header .topBar{
width:100%;
min-width:320px;
position:fixed;
top:0;
left:0;
z-index:999;
}

#header .topBar .top-panel{
background-color:#945b22;
height:64px;
display:flex;
}

#header .topBar .top-panel #logo{
padding:12px 20px;
display:flex;
align-items:center;
flex:1;
}

#header .topBar .top-panel #logo img{
max-width:200px;
}

#header .topBar #mainNav{
background-color:#4e3013;
width:100%;
text-align:center;
transition:all 200ms ease-in-out;
}

#header .topBar #mainNav.fixNav{
background:#fff;
width:100%;
position:fixed;
top:0;
left:0;
z-index:999;
}

#header .topBar #mainNav > ul{
display:flex;
justify-content:center;
position:static;
}

#header .topBar #mainNav > ul > li{
box-sizing:border-box;
}

#header .topBar #mainNav li .toggleCheck{
display:none;
}

#header .topBar #mainNav li a .line,
#header .topBar #mainNav li .txt .line{
color:#dec264;
padding:8px 18px;
display:block;
position:relative;
}

/* #header .topBar #mainNav li a:hover,
#header .topBar #mainNav li .txt:hover{
color:#ff0000;
}

#header .topBar #mainNav li.active a .line,
#header .topBar #mainNav li.active .txt .line{
color:#ff0000;
} */

#header .topBar #mainNav li a .line:after,
#header .topBar #mainNav li .txt .line:after{
content:"";
background-color:#dec264;
width:0;
height:2px;
margin:0 auto;
position:absolute;
bottom:0;
left:0;
right:0;
transition:all 200ms ease-in-out;
}

#header .topBar #mainNav.fixNav li a .line:after,
#header .topBar #mainNav.fixNav li .txt .line:after{
background-color:#dec264;
}

#header .topBar #mainNav li a:hover .line:after,
#header .topBar #mainNav li.active a .line:after,
#header .topBar #mainNav li .txt:hover .line:after,
#header .topBar #mainNav li.active .txt .line:after{
width:100%;
}

#header .topBar #mainNav li a[href^="#"],
#header .topBar #mainNav li .txt{
cursor:default;
}

#header .topBar #mainNav ul .subNav > ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

#header .topBar #mainNav ul .subNav li{
width:49%;
margin-bottom:15px;
float:none;
display:block;
}

#header .topBar #mainNav ul .subNav li a:hover{
background-color:#26335a;
background-image:url(../img/common/arrow_right_white.png);
color:#fff;
}

#header .topBar #mainNav ul .subNav li a:after{
display:none;
}

#header .topBar #mainNav ul li > .btnNav .toggleCheck:checked + .txt{
/*color:#242424;*/
}

.topBar #mainNav ul li > .btnNav .toggleCheck:checked + .txt .line:after,
.topBar #mainNav ul li > .btnNav .txt.activeHover .line:after{
opacity:1;
}

#header .topBar #mainNav ul li .toggleCheck:checked ~ .subNav{
visibility:visible;
opacity:1;
}

#header .topBar #mainNav ul li .toggleCheck:checked ~ .subNav a{
visibility:visible;
opacity:1;
}

#header .topBar #mainNav ul li > .btnNav .subNav.show,
#header .topBar #mainNav ul li > .btnNav .subNav.lock,
#header .topBar #mainNav ul li > .btnNav .subNav.show a,
#header .topBar #mainNav ul li > .btnNav .subNav.lock a{
visibility:visible;
opacity:1;
}

#header .topBar #mainNav ul li > .btnNav .subNav.unLock a{
visibility:hidden;
opacity:0;
}

.topBar #mainNav li a,
.topBar #mainNav li .txt{
font-size:100%;
text-decoration:none;
display:block;
position:relative;
transition:all 200ms ease-in-out;
}

.topBar #mainNav.fixNav li a,
.topBar #mainNav.fixNav li .txt{
color:#333;
}

.topBar #mainNav > ul > li > a,
.topBar #mainNav > ul > li .txt{
position:relative;
}

.topBar #mainNav ul .subNav{
background-color:rgba(165,165,165,0.3);
width:100%;
padding:30px 0 15px;
visibility:hidden;
opacity:0;
position:absolute;
top:100%;
left:0;
z-index:999;
box-sizing:border-box;
transition:all 200ms ease-in-out;
}

.topBar #mainNav ul .subNav li a{
background:#fff url(../img/common/arrow_right_navy.png) no-repeat right 20px center;
font-size:90%;
color:#26335a;
border:2px solid #26335a;
text-decoration:none;
height:auto;
line-height:1.8;
padding:10px 5%;
text-align:center;
position:static;
display:block;
overflow:visible;
opacity:0;
visibility:hidden;
}

.topBar #mainNav ul li:hover > .btnNav .subNav:not(.unLock){
visibility:visible;
opacity:1;
}

.topBar #mainNav ul li:hover > .subNav a{
visibility:visible;
opacity:1;
}

.topBar #mainNav ul li:hover > .btnNav .subNav a,
.topBar #mainNav ul li:hover > .btnNav .toggleCheck:checked ~ .subNav a,
.topBar #mainNav ul li:hover > .btnNav .toggleCheck:not(:checked) ~ .subNav a{
visibility:visible;
opacity:1;
}

/*active*/
#header .topBar #mainNav li .txt.active .line:after{
opacity:1;
}

#header .topBar #mainNav li .txt.sActive .line:after{
opacity:0;
}

#header .topBar #nav-bar{
background-color:rgba(255,255,255,0);
text-align:center;
float:right;
transition:all 400ms ease-in-out;
}

#header .topBar #nav-bar > ul{
letter-spacing:-0.4em;
}

#header .topBar #nav-bar li{
display:inline-block;
letter-spacing:normal;
position:relative;
}

#header .topBar #nav-bar li.themes{
color:#e6e6de;
padding:16px 14px;
}

#header .topBar #nav-bar li .toggleCheck{
display:none;
}

#header .topBar #nav-bar li a,
#header .topBar #nav-bar li .txt{
letter-spacing:0.1em;
text-decoration:none;
display:block;
position:relative;
transition:all 200ms ease-in-out;
}

#header .topBar #nav-bar li.setting .txt{
background-color:#dec264;
color:#111;
}

#header .topBar #nav-bar li.setting .txt .line i{
color:#111;
}

#header .topBar #nav-bar > ul > li:hover > a,
#header .topBar #nav-bar > ul > li.active > a,
#header .topBar #nav-bar > ul > li:hover > .btnNav .txt,
#header .topBar #nav-bar > ul > li.active > .btnNav .txt{
background-color:#252421;
color:#fff;
}

#header .topBar #nav-bar > ul > li.home a,
#header .topBar #nav-bar > ul > li.home .txt{
background-color:#aaa;
color:#fff;
}

#header .topBar #nav-bar > ul > li.home a:hover,
#header .topBar #nav-bar > ul > li.home.active a,
#header .topBar #nav-bar > ul > li.home .txt{
background-color:#252421;
}

#header .topBar #nav-bar > ul > li.setting:hover > .btnNav .txt,
#header .topBar #nav-bar > ul > li.setting.active > .btnNav .txt{
background-color:#dec264;
color:#111;
}

#header .topBar #nav-bar li a .line,
#header .topBar #nav-bar li .txt .line{
font-size:90%;
padding:18px 14px;
display:block;
position:relative;
}

#header .topBar #nav-bar li a .line i, #header .topBar #nav-bar li .txt .line i{
color:#dec264;
}

/*#header .topBar #nav-bar li a .line:after,
#header .topBar #nav-bar li .txt .line:after{
content:"";
background-color:#fff;
width:100%;
height:3px;
position:absolute;
bottom:0;
left:0;
opacity:0;
transition:all 200ms ease-in-out;
}

#header .topBar #nav-bar li:hover a .line:after,
#header .topBar #nav-bar li.active a .line:after,
#header .topBar #nav-bar li:hover .txt .line:after,
#header .topBar #nav-bar li.active .txt .line:after{
opacity:1;
}*/

#header .topBar #nav-bar li a[href^="#"],
#header .topBar #nav-bar li .txt{
cursor:default;
}

#header .topBar #nav-bar ul .subNav{
border-top:2px solid #dec264;
visibility:hidden;
opacity:0;
position:absolute;
top:100%;
right:0;
z-index:999;
transition:all 200ms ease-in-out;
}

#header .topBar #nav-bar ul .subNav li{
width:230px;
float:none;
display:block;
}

#header .topBar #nav-bar ul .subNav li a{
background:#252421;
font-size:75%;
color:#fff;
text-decoration:none;
height:auto;
line-height:1.8;
padding:7px 5%;
text-align:left;
position:static;
display:block;
overflow:visible;
-webkit-transform:rotateY(90deg) skewY(10deg) translateY(-20px);
transform:rotateY(90deg) skewY(10deg) translateY(-20px);
opacity:0;
visibility:hidden;
-webkit-transition:.4s ease;
transition:.4s ease;
}

#header .topBar #nav-bar ul .subNav li a:hover{
background:#303c5c;
}

#header .topBar #nav-bar ul .subNav li:last-child a{
border-bottom:none;
}

/*#header .topBar #nav-bar ul .subNav li a:after{
display:none;
}*/

#header .topBar #nav-bar ul li:hover >  .btnNav .subNav{
visibility:visible;
opacity:1;
}

#header .topBar #nav-bar ul li:hover >  .btnNav .subNav.unLock{
visibility:hidden;
opacity:0;
}

.topBar #nav-bar ul li:hover > .subNav a{
-webkit-transform:rotateY(0deg) skewY(0deg) translateY(0px);
transform:rotateY(0deg) skewY(0deg) translateY(0px);
visibility:visible;
opacity:1;
}

.topBar #nav-bar ul li > .btnNav .toggleCheck:checked + .txt,
.topBar #nav-bar ul li > .btnNav .txt.activeHover{
background-color:#252421;
color:#fff;
}

/*.topBar #nav-bar ul li > .btnNav .toggleCheck:checked + .txt .line:after,
.topBar #nav-bar ul li > .btnNav .txt.activeHover .line:after{
opacity:1;
}*/

.topBar #nav-bar ul li:hover > .btnNav .subNav,
.topBar #nav-bar ul li:hover > .btnNav .toggleCheck:checked ~ .subNav,
.topBar #nav-bar ul li:hover > .btnNav .toggleCheck:not(:checked) ~ .subNav{
visibility:visible;
opacity:1;
}

.topBar #nav-bar ul li:hover > .btnNav .subNav a,
.topBar #nav-bar ul li:hover > .btnNav .toggleCheck:checked ~ .subNav a,
.topBar #nav-bar ul li:hover > .btnNav .toggleCheck:not(:checked) ~ .subNav a{
-webkit-transform:rotateY(0deg) skewY(0deg) translateY(0px);
transform:rotateY(0deg) skewY(0deg) translateY(0px);
visibility:visible;
opacity:1;
}

.topBar #nav-bar ul li > .btnNav .txt.activeHover,
.topBar #nav-bar ul li .toggleCheck:checked ~ .txt{
color:#fff!important;
}


#header .topBar #nav-bar ul li .toggleCheck:checked ~ .subNav{
visibility:visible;
opacity:1;
}

#header .topBar #nav-bar ul li .toggleCheck:checked ~ .subNav a{
-webkit-transform:rotateY(0deg) skewY(0deg) translateY(0px);
transform:rotateY(0deg) skewY(0deg) translateY(0px);
visibility:visible;
opacity:1;
}

#header .topBar #nav-bar ul li .subNav.show li a{
-webkit-transform:rotateY(0deg) skewY(0deg) translateY(0px);
transform:rotateY(0deg) skewY(0deg) translateY(0px);
visibility:visible;
opacity:1;
}

#header .topBar #nav-bar > ul > li:hover > .btnNav a,
#header .topBar #nav-bar > ul > li.active > .btnNav a,
#header .topBar #nav-bar > ul > li:hover > .btnNav .txt,
#header .topBar #nav-bar > ul > li.active > .btnNav .txt{
background-color:#252421;
color:#fff;
}

#header .topBar #nav-bar ul .subNav li.logout a{
border-top:1px solid #777;
}

#header .topBar #nav-bar > ul > li > .btnNav a:hover{
background-color:#252421;
}

#header .topBar #nav-bar ul li .subNav.show.unlock,
#header .topBar #nav-bar ul li .subNav.show.lock,
#header .topBar #nav-bar ul li .subNav.lock,
#header .topBar #nav-bar ul li .subNav.hide.lock{
visibility:visible;
opacity:1;
}

#header .topBar #nav-bar ul li .subNav.lock li a{
-webkit-transform:rotateY(0deg) skewY(0deg) translateY(0px);
transform:rotateY(0deg) skewY(0deg) translateY(0px);
visibility:visible;
opacity:1;
}

#header .topBar #nav-bar ul li .subNav.hide.unlock,
#header .topBar #nav-bar ul li .subNav.unlock{
visibility:hidden;
opacity:0;
}

/*active*/
/*#header .topBar #nav-bar li .txt.active .line:after{
opacity:1;
}

#header .topBar #nav-bar li .txt.sActive .line:after{
opacity:0;
}*/

@media screen and (max-width: 1200px) {
#header .topBar .top-panel{
height:53px;
}

.pure-pusher-container[data-position="left"] #header .topBar .top-panel #logo{
padding-left:73px;
}

#header .topBar #mainNav{
display:none;
}

.pure-pusher-container[data-position="right"] #header .topBar #nav-bar{
margin-right:53px;
}

#header .topBar #nav-bar li a .line, #header .topBar #nav-bar li .txt .line{
padding-top:14px;
padding-bottom:14px;
}

#header .topBar #nav-bar li.themes{
display:none;
}

#header .topBar #nav-bar li.setting{
display:none;
}
}

@media screen and (max-width: 1000px) {
}

@media screen and (max-width: 640px) {
#header .topBar #nav-bar li a .line, #header .topBar #nav-bar li .txt .line{
font-size:80%;
padding:16px 7px;
}
}

@media screen and (max-width: 480px) {
#header .topBar .top-panel #logo img{
max-width:160px;
}

#header .topBar #nav-bar li.vip{
display:none;
}
}


/* --------------------------------------------------
 Contents
-------------------------------------------------- */
#contents{
width:100%;
position:relative;
z-index:1;
}

@media screen and (max-width: 1000px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 480px) {
}



/* --------------------------------------------------
 Footer
-------------------------------------------------- */
#footer{
background-color:#4e3013;
width:100%;
box-sizing:border-box;
}

#footer .copyright{
color:#fff;
font-size:90%;
text-align:center;
padding:15px 0;
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 480px) {
}