@charset "UTF-8";

* { margin: 0; padding: 0; box-sizing: border-box;}
body { word-break:keep-all;word-wrap:break-word; color: #212121; background-color: #fff; font-family: 'Noto Sans Thai', sans-serif;line-height: 1.4;}
body.on { overflow: hidden;}
a { text-decoration: none; color: #212121;}
ul, li, ol {list-style: none;}
img { vertical-align: middle; max-width: 100%;}
.wrap { width: 1200px; margin: 0 auto;}
button { cursor: pointer; padding: 0;}
button, input { border: none; background:transparent;font-family: 'Noto Sans Thai', sans-serif;line-height: 1.4;}
select {font-family: 'Noto Sans Thai', sans-serif;}
button, :focus, :active { outline: 0;}
button:focus, button:active { padding: 0;}
button span, button img { position: relative;}
.hidden { text-indent: -99999px; overflow: hidden; font-size: 0; display: none;}
.cb:after { clear: both; display: block; content: '';}
.menuBtn, .mobileOn {display: none;}
br {font-family: sans-serif !important;}

.headerTop {padding: 30px 10px;font-family: 'Noto Sans', sans-serif;}
.headerTop .logo {float:left;}
#header .topInner {float:right; padding-top: 5px; text-align: right; font-size: 0;}
#header .listMenu {display: inline-block; vertical-align: middle;}
#header .listMenu li {float:left; padding-right:15px;}
#header .listMenu li a { font-size:13px;color:#888;letter-spacing: -0.5px;font-weight: 300;}
#header .langSelect { width: 120px; display: inline-block; vertical-align: middle; position: relative;}
#header .langSelect h4 { cursor: pointer; padding-left: 30px; font-weight: normal; font-size: 12px; color: #888;height: 32px; text-align: left; line-height: 32px; border: 1px solid #999; background: url('../img/icon01.png') no-repeat left 10px top 50%/12px auto, url('../img/icon02.png') no-repeat right 10px top 50%/8px auto;}
#header .langSelect ul { display: none; position: absolute; z-index: 1; top: 32px; width: 120px;border: 1px solid #999; border-top: none; background: #fff;} 
#header .langSelect ul li { padding: 0 0 0 15px; width: 100%; height: 32px; line-height: 32px;cursor: pointer; text-align: left;}
#header .langSelect ul li a {font-size: 13px; color: #888; text-align: left;}
#header .langSelect ul li:hover { background-color: #f7f7f7;}

header {border-top: 1px solid #ebebeb; border-bottom: 1px solid #1d398d;}
header ul li {width: 25%;float:left; background: #fff;-webkit-transition: background-color .5s, color .5s;-ms-transition:background-color .5s, color .5s;transition: background-color .5s, color .5s;}
header ul li a {display: block; height: 50px; padding-top: 13px; letter-spacing: -1px; font-size:16px; text-align: center; color:#1d398d;}
header ul li:hover {background: #1d398d;}
header ul li:hover a { color: #fff;}
header ul li.on {background: #1d398d;}
header ul li.on a { color: #fff;}

/* footer */
footer { padding: 32px 0; background: #5c5e66;font-family: 'Noto Sans', sans-serif;}
footer address {float: left; font-style: normal;}
footer address span {display: block; padding-bottom: 6px; font-size:13px;color:#b2b2b2;}
footer address span i {font-style: normal;}
footer address span i a { color: #b2b2b2;}

.foList01 {float:left; padding-right: 20px;}
.foList03 {float:right;}
.foList03 > a {padding-right: 20px;}
.foList03 a { font-size: 12px; color: #fff; font-weight: 300;}
.foList03 .fooSelect { width: 160px; background: #5c5e66; display: inline-block; vertical-align: middle; position: relative;}
.foList03 .fooSelect h4 { cursor: pointer; padding-left: 10px; font-weight: 300; font-size: 12px; color: #fff;height: 32px; text-align: left; line-height: 32px; border: 1px solid #999; background:url('../img/icon03.png') no-repeat right 10px top 50%/8px auto;}
.foList03 .fooSelect ul { display: none; position: absolute; z-index: 1; bottom: 32px; width: 160px;border: 1px solid #b3b3b3; border-bottom: none; background: #5c5e66;} 
.foList03 .fooSelect ul li { padding: 0 0 0 15px; width: 100%; height: 32px; line-height: 32px;cursor: pointer;}
.foList03 .fooSelect ul li a {text-align: left;}
.foList03 .fooSelect ul li:hover { background-color: #45464d;}


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

    .wrap {width: 100%; padding: 0 4%;}
    .headerTop.wrap {padding: 30px 4%;}

    footer address {padding-bottom: 30px;}
    .foList03 {float:none; clear: both; text-align: right;}
    .foList03 .fooSelect ul {text-align: left;}
 
}

@media screen and (max-width: 768px){
    body { word-break:break-all;}
    .pcOn {display: none;}
    .menuBtn, .mobileOn {display: block;}
    .menuBtn {position: absolute; top:44px; right:4%;}
    .menuBtn span {display: block; transition:all 0.3s; width: 30px; height: 2px; margin-bottom: 5px; background: #002060;}
    .menuBtn.on span:nth-of-type(1) {-webkit-transform : translateY(7px) rotate(30deg);-ms-transform : translateY(7px) rotate(30deg);transform : translateY(7px) rotate(30deg);}
    .menuBtn.on span:nth-of-type(2) {opacity: 0;}
    .menuBtn.on span:nth-of-type(3) {-webkit-transform : translateY(-7px) rotate(-30deg);-ms-transform : translateY(-7px) rotate(-30deg);transform : translateY(-7px) rotate(-30deg);}
    .headerTop.wrap {border-bottom: 1px solid #1d398d;}
    .headerTop .logo {float:none;}
    .headerTop .topInner {float:none;}
    header{ display: none;}
    header.on {display: block; position: fixed; top: 96px; left: 0; right: 0; bottom: 0; background: #fff; overflow-y: auto; z-index: 9999;}
    header .wrap {padding: 0;}
    header ul li {float:none; width: 100%; border-top: 1px solid #ebebeb;}
    
    #header .mobileOn {float:none; padding: 0; text-align: center;}
    #header .mobileOn .listMenu {display: block;}
    #header .mobileOn .listMenu li {float:none;padding: 0;}
    #header .mobileOn .listMenu li a {font-size:16px; color: #1d398d; font-weight: normal;}
    #header .mobileOn .listMenu li a:hover {color: #fff;} 
    #header .mobileOn .langSelect {display: block; width: 100%;}
    #header .mobileOn .langSelect h4 {padding-left:0; text-align: center;height: 51px; line-height: 49px;}
    #header .mobileOn .langSelect ul {width: 100%; top: 51px;}
    #header .mobileOn .langSelect ul li {padding:0; height: auto; line-height: normal;}
    #header .mobileOn .langSelect ul li a {text-align: center;}

    .foList01, footer address {float: none;}
    footer address {padding: 30px 0;}
    .foList03 {text-align: left;}
    #mb_login {width: 80%;}
    #login_fs {padding: 0 20px;}
}

@media screen and (max-width: 499px){
    .headerTop.wrap {padding: 20px 4%;}
    .headerTop .logo {width: 196px;}
    .menuBtn {top:34px;}
    header.on {top: 76px;}
    footer address span {font-size: 12px;}
    footer address span i {display: block;padding-bottom: 12px;}
    footer address span i:last-of-type {padding-bottom: 0;}   
    .foList03 .fooSelect {margin-top: 15px;}
}

@media screen and (max-width: 374px){
    .foList03 .fooSelect {display: block; width: 100%;margin-top: 20px;}
    .foList03 .fooSelect ul {width: 100%;}
}