@import url('https://fonts.googleapis.com/css?family=Kanit');


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}
body {
    background: url(../images/pattern-big.jpg) center 0 repeat-y fixed;
    
}
a {
 margin:0;
 padding:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}
img {
    display: block;
}
* {
    box-sizing: border-box;
}
.submenuSwiper .subSwp-item {
    width: auto !important;
}
#nav-inpage .nav-inside a {
    padding: 0px 10px 3px;
    line-height: initial;
}
.pread-wrapper h1, 
.pread-wrapper h2,
.pread-wrapper h3{
    font-family: Sukhumvitreg, tahoma, sans-serif;
}
.pread-wrapper h1 {
    font-size: 26px;
}
.text-head-sub {
    font-family: Sukhumvitreg, tahoma, sans-serif;
    font-size: 26px;
    margin: 8px 0 10px;
    color: #fe3333;
}
.pread-wrapper h2 {
    font-size: 24px;
    line-height: 24px;
}

/* default style */
.pread-wrapper #box-mainmenu.sticky{
    max-width: 1070px;
}
.pread-wrapper {
    max-width: 1070px;
    min-width: 1070px;
    width: 100%;
    margin: 0 auto;
    line-height: 1.5em;
    color: #000;
    background: #fff;
}
._clearfix:after {
    content: "";
    display: block;
    clear: both;
}
._rel {
    position: relative;
}
._abs {
    position: absolute;
}
._left{
    float: left;
}
._right {
    float: right;
}
._showm {
    display: none !important;
}

/* top section */
.content-wrap.topsection {
    text-align: center;
    background-color: #f0f0f0;
    margin-top: 4px;
}
.content-box {
    padding: 0 50px;
}
.content-box.round2-part{
    background: url(../images/pic-bgbottom.jpg)0 0 no-repeat #f93b3b;
    min-height: 326px;
}
.content-box.regist-part{
    background-color: #ffb31a;
}
.content-box.timeline-part{
    background: linear-gradient(#fd8508,#fe9300);
    padding-top: 20px;
}
.content-box.fee-part {
    background: linear-gradient(#fd7709,#fe7d07);
    padding: 20px 50px;
}
.desktop-section.-left {
    max-width: 715px;
    width: 100%;   
}
.subject-part {
    max-width: 355px;
    width: 100%;
    right: 0;
    top: 513px;
}
.content-box.subject-part {
    padding: 0;
}
.logo-index {
    display: block;
    margin: 0 auto;
}
.txt-www {
    background-color: #000;
    color: #fff;
    font-size: 11px;
    width: 135px;
    border-radius: 15px;
    line-height: 20px;
    margin: -20px auto 0;
}
.content-box h2 {
    text-shadow: 0 2px 0 rgba(0,0,0,0.13);
}
.content-box h1 {
    margin-top: 25px;
    line-height: 32px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.13);
    letter-spacing: -0.3px;
}
.txt-sub b {
    font-weight: bold;
}
.txt-sub {
    font-size: 12px;
    margin-top: -2px;
}
.tl-con img {
    display: block;
    margin: 0 auto;
}
.topsection .fee-titlesub {
    margin-bottom: 20px;
    font-family: sukhumvitreg,tahoma,sans-serif;
    font-size: 20px;
    color: #331900;
}
.topsection h2.fee-title {
    padding: 25px 0 0;
}
.txt-coupon a:first-child{
    text-decoration: none;
}
.txt-coupon a{
    color: #fff;
    text-decoration: underline;
}
.txt-coupon a:hover{
    color: #331900;
}
.txt-coupon {
    color: #fff;
    margin-top: 20px;
    font-family: sukhumvitreg,tahoma,sans-serif;
    font-size: 18px;
}
.topsection h2 {
    color: #fff;
    padding: 10px 0;
}
.topsection h2 span.txt-sub {
    font-family: tahoma, sans-serif;
}
.tl-con.-left {
    float: left;
}
.tl-con.-right {
    float: right;
}
.tl-con.-left:after{
    content: "";
    display: block;
    position: absolute;
    height: 303px;
    right: 0;
    top: 7px;
    width: 1px;
    background-color: #fab816;
    opacity: 0.3;
}
.tl-con.-left p span {
    margin: 0 4px;
    display: inline-block;
}
.tl-con {
    width: 50%;
    font-size: 12px;
}
.tl-con.-right ul {
    text-align: left;
    padding-left: 27px;
}
.tl-con.-right li:after {
    content: "";
    display: block;
    clear: both;
}
.tl-con.-right li span:first-child {
    font-weight: bold;
    color: #fff;
    margin-right: 10px;
    float: left;
}
.tl-con.-right li span:first-child,
.tl-con.-right li span:last-child {
    line-height: 1.2em;
    margin-top: 3px;
    margin-bottom: 3px;
}
.tl-con.-right li span:last-child {
    float: left;
    width: calc(100% - 79px);
}
.tl-con.-right li span:last-child b {
    font-weight: bold;
}
.fee-box {
    background-color: #331900;
    max-width: 135px;
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.13);
    padding: 25px 0; 
    height:120px;
    margin-right: 10px;
    float: left;
}
.fee-pro2 .fee-box {
   height: 256px;
}
.fee-box.-last {
    margin-right: 0;
}
.fee-box.f-2 {
    max-width: 280px;
}
.fee-box.f-2 .subj-name span {
    line-height: 1.2em;
    margin-top: 0;
}
.fee-box.f-1 {
    padding: 8px 0 0;
}
.subj-name {
    color: #fff;
    font-size: 24px;
    font-family: sukhumvitreg, tahoma, sans-serif;
    padding: 0 7px;
}
.subj-name span.fee-txtsub {
    font-size: 14px;
    margin-bottom: -20px;
    color: #ffffff;
}
.subj-name span {
    font-size: 11px;
    color: #a8a8a8;
    font-family: tahoma, sans-serif;
    margin-top: -5px;
    display: block;
    margin-bottom: 5px;
}
.price {
    color: #a3d530;
    font-size: 24px;
    font-family: sukhumvitreg, tahoma, sans-serif;
}
.price span {
    font-size: 14px;
}
.txt-recommand {
    position: absolute;
    font-weight: bold;
    color: #fff;
    background-color: #ff3333;
    line-height: 20px;
    border-radius: 10px;
    width: 70px;
    left: 50%;
    top: -10px;
    margin-left: -35px;
    font-size: 12px;
}
.fee-box img {
    display: block;
    margin: 10px auto;
}
.subj-pack span{
    font-family: sukhumvitreg, tahoma, sans-serif;
    font-size: 24px;
    color: #f37a01;
    display: block;
    margin-top: 3px;
}
.subj-pack {
    font-size: 12px;
    color: #fff;
}
.price-old u{    
    color: #ff3333;
    text-decoration: line-through;
    display: block;
}
.price-old {
    font-size: 12px;
    color: #575757;
    line-height: 1.2em;
    display: block;
    margin: 15px 0 10px;
}
.fee-box.f-1 .subj-pack span {
    font-size: 24px;
    line-height: 20px;
}
.round2-part .-right {
/*    max-width: 310px;
    margin-top: 40px;
    float: right;*/
    max-width: 475px;
    margin: 0 auto;
    padding-top: 45px;
}
.round2-part .girl{
    position: absolute;
    bottom: 0;
    left: 50px;
}
.r2-pack i{
    font-size: 12px;
    color: #ff3333;
    display: inline-block;
    margin-right: 3px;
}
.r2-pack {
    font-weight: bold;
    color: #241200;
    border-radius: 3px;
    line-height: 30px;
    background-color: #fff;
    float: left;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.13);
    margin-bottom: 5px;
}
.r2-pack span {
    color: #ff3333;
}
.r2-desc .rp1{
    margin-right: 5px;
}
.r2-desc .rp1,
.r2-desc .rp2 {
        width: calc(50% - 3px);
    }
.r2-desc .rp3{
    width: 100%;
    margin-top: 5px;
}
.txt-wh {
    font-size: 12px;
    color: #fff;
    margin-top: -13px;
    margin-bottom: 15px;
}
.round2-info .txt-disc span {
    font-family: 'Kanit', sukhumvitreg, tahoma, sans-serif;
    font-weight: bold;
    color: #b1f01f;
    font-size: 30px;
}
.round2-info .txt-disc {
    font-size: 24px;
    color: #fff;
    font-family: sukhumvitreg, tahoma, sans-serif;
}
.round2-info {
    background-color: #6f2212;
    margin-top: 15px;
    border-radius: 3px;
    padding: 0 10px;
    font-size: 12px;
    color: #a8a8a8;
    height: 64px;
    padding-top: 10px;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.13);
}
.txt-info a {
    color: #fff;
    text-decoration: underline;
}
.txt-info a:first-child {
    text-decoration: none;
}

/* subject info */
.date-box h2 {
    background-color: #331900;
    color: #f37a01;
    line-height: 35px;
    height: 50px;
}
.subj-list {
    padding: 10px;
}
.subj-desc.sd-1{
    height: 92px;
}
.subj-desc.sd-1 .code {
    line-height: 92px;
}
.subj-desc{
    height: 79px;
    box-shadow: 0 3px 0 0 rgba(193,193,193,0.15);
    background-color: #fff;
}
.subj-info.mg-top {
    margin-top: 10px;
}
.subj-info .timebox {    
    font-weight: bold;    
    font-size: 16px;
    color: #575757;
    position: relative;
}
.subj-info .time {
    text-align: left;
    line-height: 15px;
    margin-bottom: 5px;
    width: 290px;
}
.subj-info .time span {
    font-size: 12px;
    color: #a8a8a8;
    font-weight: normal;
    position: relative;
}
.subj-info .time span:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background-color: #a8a8a8;
    border-radius: 4px;
    left: 0;
    top: 6px;
    position: absolute;
}
.subj-sub {
    font-size: 12px;
    color: #a8a8a8;
    margin-top: -5px;
    display: block;
}
.subj-info .txt-by {
    position: absolute;
    right: 0;
    bottom: 1px;
    line-height: 1.3em;
    width: 120px;
    font-size: 12px;
}
.subj-desc {
    display: block;
    margin: 2px 0;
    width: 100%;    
}
.subj-desc:after {
    content: "";
    display: block;
    clear: both;
}
.subj-desc .code {
    font-family: sukhumvitreg,tahoma,sans-serif;
    font-size: 24px;
    color: #fff;
    background-color: #f37a01;
    width: 30px;
    float: left;
    line-height: 79px;
}
.subj-desc .subj-namebox {
    float: left;
    margin-left: 15px;
    text-align: left;
    color: #000;
    padding-top: 10px;
    font-weight: normal;
    font-size: 13px;
}
.subj-desc .subj-namebox .name b{
    font-family: sukhumvitreg,tahoma,sans-serif;
    font-size: 30px;
    display: block;
    margin-bottom: -25px;
}
.subj-desc .subj-namebox.-hide .seat {
    display: none;
}
.subj-desc .subj-namebox .seat {
    background-color: #331900;
    color: #feb31a;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    padding: 0 5px;
    margin-left: -5px;    
}
.subj-desc .subj-namebox .seat a{
    text-decoration: none;
    color: inherit;
}
.subj-desc .subj-namebox .seat.-almost {
    background-color: #ff3333;
    color: #fff;
}
.subj-desc .subj-namebox .seat.-close {
    background-color: #333;
    color: #ff9700;
}
.subj-desc .subj-namebox.-hide {
    padding-top: 23px;
}
.subj-desc.sd-1 .examby {
    padding: 10px;
    height: 92px;
}
.subj-desc .examby {
    float: right;
    width: 96px;
    height: 79px;
    border-left: 1px solid #f2f2f2;
    padding: 10px 10px 5px 10px;
}
.tt-name.-t2 {
    width: 47%;
    display: inline-block;
    vertical-align: top;
}
.tt-name img {
    max-width: 41px;
    width: 100%;
    margin: 0 auto;
}
.tt-name span {
    font-size: 9px;
    color: #a8a8a8;
    text-align: center;
}
.tt-name span b {
    display: block;
    margin-top: -7px;
    font-size: 8px;
    line-height: 16px;
}

/*reason*/
.pread-wrapper .cont-wrap h2 {
    text-align: center;
    font-size: 36px;
    color: #333;
    font-weight: normal;
    padding: 30px 0;
}
.pread-wrapper .cont-wrap h4 {
    font-size: 14px;
    font-family: Tahoma,Arial,sans-serif;
    line-height: 1.3em;
}
.rea-item {
    width: 245px;
    min-height: 100px;
    border-bottom: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    box-sizing: border-box;
    float: left;
    padding-top: 10px;
    padding-left: 10px;
}
.rea-item.n-bt{
    border-bottom: none;
}
.rea-item i {
    background: #f37a01;
    color: #fff;
    border-radius: 30px;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}
.rea-text {
    display: inline-block;
    vertical-align: top;
    width: 175px;
}
.rea-text p {
    font-size: 12px;
    line-height: 1.3em;
}
.rea-note {
    font-size: 12px;
    text-align: center;
    line-height: 1.3em;
    padding: 3px;
}
.rea-item:nth-child(4), .rea-item:nth-child(8) {
    border-right: none;
}
.rea-box {
    margin-bottom: 15px;
}
.txt-note span{
    color: #f37a01;
}
.txt-note {
    font-size: 13px;
    line-height: 1.4em;
    color: #666;
    text-align: center;
    margin-top: 20px;
}
.s-gry {color: #a8a8a8;}
.s-org{color: #f37a01;}
.cont-wrap {
    padding: 40px;
}
.cont-wrap.field {
    padding-top: 80px;
}
.cont-wrap.howto {
    padding-bottom: 0;
}
._ct{
    text-align: center;
}
.vir-part{
    padding: 40px;
}
.vir-box {
    float: left;
    width: 242px;
    box-sizing: border-box;
    margin-right: 7px;
}
.vir-box:last-child {
    margin-right: 0;
}
.vir-box p{
    padding: 10px;
    line-height: 1.3em;
}
.vir-box img {
    margin: 0 auto;
}
.video-wrap {
    width: 743px;
    height: 417px;
    margin: 0 auto;
}
.howto-box {
    float: left;
    width: 160px;
    height: 212px;
    border-radius: 3px;
    margin-right: 5px;
    padding: 10px 7px;
}
.howto-box span.ht-num {
    background: #fff;
    display: block;
    width: 23px;
    height: 23px;
    margin: 0 auto;
    border-radius: 25px;
}
.howto-box.bg-s1 {
    background: #f37a01;
}
.howto-box.bg-s2 {
    background: #ff9700;
}
.cont-part{
    width: 49%;
}
.howto-box i {
    font-size: 65px;
    color: #fff;
    padding: 15px 0;
}
.howto-box h3 {
    font-family: Tahoma,Arial,sans-serif;
    color: #fff;
    margin-bottom: 5px;
}
.howto-box p {
    font-size: 12px;
    line-height: 1.3em;
}
.howto-box a.ht-sam {
    display: block;
    font-size: 12px;
    color: #fff;
    background-color: #381c01;
    border-radius: 3px;
    padding: 1px 0;
    margin-bottom: 5px;
    box-shadow: 0 2px rgba(0, 0, 0, 0.23);
}
.howto-detail p.ht-sam {
    font-size: 12px;
    color: #fff;
    background-color: #9e5108;
    border-radius: 3px;
    padding: 3px 0;
    box-shadow: none;
    text-align: center;
}
.howto-box a {
    color: inherit;
}
/*schrdule*/
.purpose-box ol {
    list-style: decimal;
    padding-left: 25px;
}
.purpose-box li {
    list-style: inherit;
    margin-bottom: 10px;
    line-height: 1.4em;
}
.purpose-box {
    background: #fff2e5;
    box-sizing: border-box;
    padding: 35px 15px;
}
.purpose-box li:last-child {
    margin-bottom: 0;
}
.text-box-l {
    width: 25%;
    float: left;
    padding: 7px 10px;
}
.text-box-r {
    width: 75%;
    float: left;
    vertical-align: top;
    padding: 5px 7px;
    border-left: 1px solid #e5e5e5;
}
.text-box-r p.rou-subj-list {
    line-height: 1.2em;
}
.round-1 {
    width: 50%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    min-height: 160px;
}
.sch-list {
    border-bottom: 1px solid #e5e5e5;
}
.round-1._left {
    border-right: 1px solid #e5e5e5;
}
.text-box-r span.text-desc {
    font-size: 12px;
}
.text-box-r p.first {
    line-height: 1.2em;
}
.text-box-r span.sch-time {
    width: 120px;
    display: inline-block;
}

.rou-subj-list i {
    margin-right: 6px;
    color: #f37a00;
}
span.rou-dt {
    background: #f37a01;
    color: #fff;
    border-radius: 3px;
    min-width: 65px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 5px;
    vertical-align: middle;
}
.round-1 li {
    text-align: left;
    padding-left: 50px;
    margin: 0 auto;
}
.sch-title h3, .pre-round h3 {
    font-size: 20px;
    font-family: sukhumvit;
    color: #fff;
    background: #f37a00;
    padding: 7px;
}
.rou-m span {
    color: initial;
}
p.rou-note {
    font-size: 11px;
    margin-top: 2px;
}
.rou-note a {
    color: #000;
}
.pre-round {
    padding-top: 25px;
}
.fo-b{
    font-weight: bold;
}
.sample-box {
    background: #eeeeef;
    padding: 20px 0 0;
    border-radius: 3px;
}
.img-sample {
    margin: 10px auto 0;
    height: 125px;
    display: block;
    cursor: pointer;
    box-sizing: border-box;
    border-left: 2px solid #636363;
    border-top: 2px solid #636363;
    border-right: 2px solid #636363;
    -webkit-box-shadow: 5px -5px 0px 0px rgba(50, 50, 50, 0.15);
    -moz-box-shadow: 5px -5px 0px 0px rgba(50, 50, 50, 0.15);
    box-shadow: 5px -5px 0px 0px rgba(50, 50, 50, 0.15);
    text-decoration: none;
    width: 295px;
}
.img-sample.img-sample2 {
    background: url(../images/simple01.png)0 0 no-repeat;
}
.img-sample.img-sample1 {
    background: url(../images/simple01.png)0 0 no-repeat;
}
h3.sam-title {
    padding: 10px 0;
    font-family: sukhumvitreg;
    font-size: 24px;
    line-height: 18px;
}
h3.sam-title span {
    font-size: 14px;
    font-family: Tahoma;
    color: #575757;
}
.img-sample span {
    display: block;
    margin-left: auto;
    font-size: 17px;
    margin-right: auto;
    margin-top: 44px;
    width: 165px;
    height: 50px;
    box-sizing: border-box;
    color: #FFF;
    text-align: center;
    padding: 15px 0;
    background-color: rgba(112, 112, 112, 0.55);
    -webkit-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.15);
    -moz-box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.15);
    box-shadow: 5px 0px 5px 0px rgba(50, 50, 50, 0.15);
    border-radius: 3px;
}
.sample-box:hover {
    background: #f37a00;
}
.sample-box:hover>h3.sam-title.s-org, .sample-box:hover>h3.sam-title.s-org
 span {
    color: #fff;
}
.sample-box:hover>.img-sample span {
    background: #f37a00;
}
/*reward*/
.reward-box {
    width: 243px;
    margin-right: 5px;
    background: #241200;
    font-size: 12px;
    line-height: 1.3em;
    float: left;
    box-sizing: border-box;
    border-radius: 3px;
    padding: 10px;
}
.reward-box:nth-child(4) {
    margin-right: 0;
}
.re-text {
    display: inline-block;
}
.reward-box img {
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
}
.reward-box h3 {
    font-family: Tahoma,Arial,sans-serif;
    margin-bottom: 5px;
    font-size: 14px;
}
.reward-box p {
    color: #fff;
}
.re-note{
    font-size: 12px;
    padding-top: 10px;
}
/*province*/
.pread-wrapper .cont-wrap h2 span {
    font-size: 24px;
    line-height: 1.7em;
}
.pro-sub {
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    margin-bottom: 15px;
}
.pro-note i {
    margin-right: 5px;
}
.map-img {
    width: 38%;
    float: left;
    padding: 65px 30px 0;
}
.map-img img {
    margin: 0 auto;
}
.pro-zone {
    width: 31%;
}
.pro-title {
    background: #f37a01;
    color: #fff;
    padding: 10px 10px 7px;
    box-sizing: border-box;
    z-index: 1;
}
.pro-title h3 {
    font-size: 19px;
    text-align: left;
    display: inline-block;
    width: 60%;
}
.pro-desc .seat {
    float: right;
    font-size: 11px;
    color: #a8a8a8;
}
.pro-desc .near {
    font-size: 11px;
    display: block;
    line-height: 1em;
    margin-top: -3px;
}
.pro-desc {
    padding: 0 10px;
    border: 1px solid #ebebeb;
    font-size: 12px;
}
.pro-desc li {
    border-bottom: 1px solid #ebebeb;
    padding: 5px 0;
}
.pro-desc .pro-bkk li {
    padding: 5px 0 6px;
}
.pro-desc li:last-child {
    border-bottom: none;
}
.map-note {
    font-size: 12px;
}
.pro-desc .province {
    width: 96px;
    float: left;
}
.pro-desc .sname {
    display: inline-block;
    width: 130px;
    line-height: 1.3em;
}
.pro-box {
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 3px;
}
.pread-wrapper .cont-wrap.pro-wrap h2 {
    padding-bottom: 0;
}
/*project*/
span.proj-mon {
    color: #fff;
    background: #f37a01;
    display: inline-block;
    font-size: 12px;
    line-height: 1.6em;
    border-radius: 3px;
    margin-right: 4px;
    padding: 0px 5px;
    box-sizing: border-box;
    vertical-align: top;
}
.proj-name {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    line-height: 1.3em;
}
.proj-wrap {
    max-width: 412px;
    margin: 0 auto;
    text-align: left;
}
.proj-wrap li {
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 10px;
    padding: 5px 0;
}
.proj-name span {
    font-size: 12px;
    color: #000;
}
/*table*/
.ht-table table {
    border-collapse: collapse;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    margin-bottom: 15px;
    margin: 0 auto;
}
.ht-table th {
    font-size: 14px;
    padding: 5px 10px;
    color: #fff;
    background: #251200;
    vertical-align: middle;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.ht-table tr:nth-child(even) {
    background: #efefef;
}
.ht-table tr.t-head{
    background: #f37a01;
    color: #fff;
}
.ht-table .t-head td {
    padding: 9px 13px;
}
.ht-table td {
    padding: 1px 6px;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    line-height: 28px;
}
.ht-table td.first-body {
    height: 100%;
    width: 45%;
    line-height: 27px;
    padding-left: 5px;
    text-align: left;
}
.ht-table td.ht-num {
    vertical-align: middle;
}
.ht-table td i {
    font-size: 16px;
}
.position-idown {
    padding-top: 10px;
}
.ht-table td.last-body {
    width: 19%;
    text-align: left;
    line-height: 27px;
}
.text-note .choice {
    display: inline-block;
    vertical-align: top;
}
.text-note {
    padding-top: 20px;
    padding-left: 30px;
}
.ht-table .text-note span.num {
    margin-right: 15px;
    display: inline-block;
    vertical-align: middle;
}
.choice i {
    margin-right: 10px;
}
.s-grn{
    color: #8bc321;
}
.ht-table .note-title {
    font-family: sukhumvitreg,tahoma,sans-serif;
    font-size: 20px;
}
.pr-poppage .clo-pop {
    display: none;
}
.nav-mobile{
    display: none;
}
.howto-box a:hover {
    color: #fab816;
}
.howto-box a.ht-sam:hover {
    background-color: #633608;
}
._showm6{
    display: none !important;
}
.print-pop{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.8);
    box-sizing: border-box;
    /*page-break-after: 1em;*/
    text-align: center;
    z-index: 32;
    padding: 2em;
}
.print-pop .ptp-wrap {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 100%;
}
.ptp-wrap .ptp-wrap-img {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.print-pop .ptp-wrap .ptp-clos {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-block;
    padding: 5px;
    background: #362f2d;
    cursor: pointer;
}
/*regist button*/
.btn-linkbox {
    margin-top: 25px;
    padding-bottom: 3px;
}
.btn-linkbox .btn-login span,
.btn-linkbox .btn-seat span{
    font-size: 21px;
    color: #f37a01;
    font-family: sukhumvitreg, tahoma, sans-serif;
    font-weight: normal;    
    padding-top: 15px;
    display: block;
}
.btn-linkbox .btn-login.btn-texam span {
    color: #fff;
}
.btn-linkbox .btn-login.btn-texam {
    width: 210px;
    background-color: #381f0a;
    color: #f37a01;
}
.btn-seat.-map {
    font-size: 20px;
    color: #fff;
    font-family: sukhumvitreg, tahoma, sans-serif;
    font-weight: normal;
    display: block;
    margin-bottom: 2px;
    background-color: #f37a01;
    text-align: center;
    width: 200px;
    margin: 10px auto;
    height: 40px;
    border-radius: 5px;
    line-height: 45px;
}
.btn-linkbox .btn-seat span {
    padding-top: 17px;
    margin-bottom: 0;
}
.btn-linkbox a span {
    font-size: 14px;
    font-weight: bold;
    color: #f37a01;
}
.btn-linkbox a {
    height: 60px;
    border-radius: 3px;
    font-size: 12px;
    background-color: #fff;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.13);
    outline: none;
    border: none;
    width: 180px;
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
    cursor: pointer;
    color: #898989;
}
.btn-linkbox .btn-main .txt-top1 {
    font-size: 24px;
    font-weight: normal;
    padding-top: 19px;
    display: block;
    color: #fff;
    margin-bottom: 5px;
}
.btn-linkbox .btn-main {
    background-color: #000;
    font-family: sukhumvitreg, tahoma, sans-serif;
    width: 300px;
    margin: 0 5px;
    line-height: 1.3em;
    border-radius: 3px;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.13);
}
.btn-linkbox .btn-main.-regist{
    width: 260px;
}
.btn-main.-regist .txt-blink {
    font-size: 32px;
    padding-top: 18px;
    margin-bottom: 8px;
}
.btn-main .txt-blink {
    color: #fff;
    display: block;
    font-size: 24px;
    padding-top: 18px;
    margin-bottom: 5px;
    font-weight: normal;
    animation-name: blink;
    animation-duration: 0.6s;
    animation-iteration-count: infinite;
}
.btn-main .txt-blink2 {
    color: #898989;
    font-size: 12px;
    display: block;
    font-family: Tahoma,sans-serif;
    font-weight: normal;
}
.btn-linkbox .btn-login,
.btn-linkbox .btn-seat{
    line-height: 1.5em;
}
.btn-seat {
    color: #331900;
}
.line-btn {
    color: #ca8b0c;
    margin: 0 3px;
}
.btn-link-mb {
    display: inline-block;
}
.txt-blink p {
    color: #f37a01;
    display: inline-block;
    font-size: 100%;
    padding: 0;
    font-family: sukhumvitreg;
    font-weight: normal;
}
.statebox {
    position: relative;
    clear: both;
    display: block;
    padding: 10px;
}
.pro-zone._right .pro-desc li {
    line-height: 1.9em;
}
.soc-box {
    display: inline-block;
    margin: 0 10px;
}
.condition-box h2.title {
    padding: 0;
}

/* top-section head*/
.top-section {
    background: url(../images/bg-top-section.jpg) 0 0 no-repeat #ffb31a;
    clear: both;
    display: block;
    padding-bottom: 30px;
    background-size: 100%;
}
.subject-head span {
    background-color: #ffd47c;
    padding: 3px 10px;
    margin: 4px 3px;
    display: -webkit-inline-box;
    border-radius: 5px;
    font-family: kanit;
    font-size: 16px;
    height: 26px;
    position: relative;
}
.sb-rel b {
    position: absolute;
    font-weight: bold;
    color: #fff;
    background-color: #ff3333;
    line-height: 14px;
    border-radius: 10px;
    width: 40px;
    left: 50%;
    top: -8px;
    margin-left: -20px;
    font-size: 10px;
    font-family: tahoma, sans-serif;
}
._showi6 {
    display: none;
}
.txt-pack {
    color: #fff;
    text-decoration: underline;
    display: block;
    clear: both;
}

/* show pro count */

.pro-count {
    background: #ff9700;
    border-radius: 3px;
    float: right;
    font-size: 12px;
    padding: 2px 10px;
}
.pro-count .pro-seat {
    display: inline-block;
}
.pro-count i {
    display: none;
}

.event-prev {
    color: #331900;
    position: absolute;
    right: 10px;
}
.event-prev:hover {
    color: #5f2f02;
}
.event-prev._showm {
    margin-top: 10px;
}

    .tl-con.-right li {
        margin-bottom: 3px;
    }
.btn-linkbox2 {
    margin-top: 10px;
}

.info-note {
    color: #fff;
    text-align: left;
    font-size: 12px;
    line-height: 1.4em;
    padding: 10px 0;
}
.info-note p {
    font-weight: bold;
}
.info-note ul {
    padding-left: 25px;
}
.info-note ul li {
    list-style:disc;
}
.btn-linkbox .btn-main.btn-login.-main {
    width: 260px;
    background: #fff;
}
.btn-linkbox .btn-login.-main span {
    font-size: 29px;
    margin-bottom: 4px;
    padding-top: 15px;
}
.btn-linkbox .btn-login.btn-buy{
    background: #7aab1f;
    color: #fff;
}
.btn-linkbox .btn-login.btn-regist2{
    background: #ff3333;
    color: #fff;
}
.btn-linkbox .btn-login.btn-buy span, .btn-linkbox .btn-login.btn-regist2 span {
    color: #fff;
}

/*top score*/
.list-score {
    background: #fb7800;
    text-align: left;
    padding: 0 8px;
}
.boxscore{
    display: inline-block;
    box-sizing: border-box;
    width: 230px;
    vertical-align: top;
    padding: 5px;
    color: #5f3006;
}
.nav-list-top, .txt-score {
    display: none;
}
.win-condi {
    clear: both;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
}
.list-score .score-box h1 {
    text-align: center;
    font-size: 21px;
    color: #fff;
    padding: 5px 10px;
    background: #e36101;
    border-radius: 5px;
    position: relative;
}
.list-score .x-clo {
    display: none;
    position: absolute;
    top: 0;
    right: -100%;
    transition: right 0.5s ease;
    color: #fff;
    padding: 10px;
    font-size: 20px;
}
.list-score .score-box h1 img {
    margin: 0 10px;
    display: inline-block;
    margin-bottom: -4px;
}
._showedit {
    display: none;
}
.score-box ul {
    list-style: none;
    padding: 10px;
    margin: 0;
}
.score-box li {
    font-size: 13px;
    padding: 4px 0;
    position: relative;
    line-height: 1.3em;
    border-bottom: 1px solid #e3611a;
}
.score-box .ts-name {
    display: inline-block;
    width: 75%;
    box-sizing: border-box;
    text-align: left;
    color: #000;
}
.score-box .ts-score {
    display: inline-block;
    width: 22%;
    text-align: right;
    box-sizing: border-box;
    float: right;
    color: #fff;
}
.nav-list-top, .txt-score {
    display: none;
}
.score-box .ts-school {
    font-size: 12px;
    color: #913d02;
    text-align: left;
    clear: both;
    line-height: 1.2em;
    margin-bottom: 3px;
    width: 80%;
}
.score-box li.range {
    text-align: center;
}
.score-box li.range a {
    display: inline-block;
    padding: 6px;
    font-size: 12px;
    background: #fff;
    border-radius: 4px;
    margin-top: 5px;
    color: #000;
    text-decoration: none;
    width: 185px;
    line-height: 1.3em;
}
.list-score h2 {
    line-height: 35px;
    text-align: center;
    font-size: 26px;
    color: #fff;
    padding: 20px 0 5px;
    text-shadow: 1px 1px 5px rgba(139, 62, 9, 0.66);
}
.btshow-gateng, .btshow-gatth{
    display: none !important;
}
.score-box0 .btshow-gateng, 
.score-box0 .btshow-gatth{
    display: inline-block !important;
}
.score-box.score-box0 li.range a.btshow-gatth,
.score-box.score-box0 li.range a.btshow-gateng {
    width: 89px;
    padding: 2px 6px;
}
.score-box li:last-child {
    border-bottom: none;
}
.win-condi {
    clear: both;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
}
.win-condi h1 {
    color: #f37a01;
    font-weight: bold;
    font-size: 16px;
    font-family: tahoma,sans-serif;
}
.win-condi ul {
    padding-left: 20px;
    font-size: 13px;
}
.win-condi li {
    padding: 5px 0 0;
    line-height: 1.4em;
}
.win-condi li i {
    color: #f37a01;
    margin-left: -17px;
}


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

/*top score*/
.list-score h2{
    display: none;
}
.nav-list-top {
    display: block;
    margin-bottom: 1.5em;
}
.nav-list-top li {
    position: relative;
    border-bottom: solid #ffb31b 1px;
    padding: 0 10px;
}
.score-box li {
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #e4e4e4;
}
.score-box .ts-school {
    font-size: 13px;
}
p.top-score {
    padding: 10px;
}
.list-score {
    position: fixed;
    z-index: 20;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: 0;
    overflow-y: auto;
    transition: left 0.5s ease;
    background: #FFF;
    margin: 0;
    padding: 0;
    font-family: tahoma,sans-serif;
}
.list-score._show {
    left: 0%;
}
.boxscore {
    width: 100%;
    padding: 0;
}
.list-score .boxscore {
    display: none;
    transition: display 2s ease;
}
.list-score .boxscore._show {
    display: block;
}
.list-score .score-box {
    width: 100%;
    background: #FFF;
    padding: 0;
    min-height: auto;
    border-bottom: 1px solid #e6e3e3;
}
.nav-list-top a {
    height: 45px;
    display: block;
    line-height: 45px;
    color: #636363;
    text-decoration: none;
    font-family: "sukhumvitlight", sans-serif;
    background: #f8f8f8;
    font-size: 24px;
    padding: 0 10px;
    text-align: left;
    box-sizing: border-box;
}
.nav-list-top a b {
    color: #f37a01;
}
.nav-list-top a .fa-angle-right {
    float: right;
    line-height: 40px;
    text-align: right;
    font-size: 32px;
    color: #cccccc;
}
.list-score .score-box h1 {
    font-size: 25px;
    text-shadow: none;
    padding: 10px 0px 5px;
    background: #f37a01;
    border-radius: 0;
}
.list-score._show .x-clo {
    right: 0%;
    display: block;
}
.score-box .ts-name {
    width: 60%;
}
.score-box .ts-score {
    width: 30%;
    color: #f37a01;
}
.txt-score {
    display: inline-block;
    width: 50%;
    text-align: left;
    color: #333;
}
.score-box li.range a {
    background: #f37a01;
    color: #fff;
    font-size: 13px;
    width: 57%;
}
.score-box.score-box0 li.range a,
.score-box.score-box0 li.range a.btshow-gatth,
.score-box.score-box0 li.range a.btshow-gateng {
    width: 28%;
    padding: 2px 6px;
}
.pread-wrapper .win-condi h1 {
    font-size: 14px;
    text-align: center;
}

/*index*/
.pread-wrapper {
    min-width: 100%;
}    
._abs {
    position: inherit;
}
._left,
._right {
    float: inherit;
}
.desktop-section.-left,
.subject-part {
    max-width: 100%;
}
.content-box.regist-part {
    background-size: 100%;
    margin-bottom: 40px;
}
.content-wrap.topsection {
    background-color: #ffb31a;
}
.subj-list {
    background-color: #f5f5f5;
}
.content-box.subject-part {
    padding: 20px 50px;
}
.bg-bottom {
    width: 100%;
    display: block;
}
.fee-pro1, 
.fee-pro2 {
    max-width: 570px;
    width: 100%;
    margin: 0 auto;
}
.content-box.round2-part{
    background-size: cover;
}
.r2-desc,
.round2-info{
    max-width: 280px;
    width: 100%;
    margin: 15px auto; 
}
/*reason*/
.cont-wrap {
    padding: 10px;
}
.pread-wrapper .cont-wrap h2 {
font-size: 30px;
padding: 20px 0;
}
.rea-item {
    width: 50%;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    padding: 10px 2px;
    min-height: 152px;
}
.rea-text {
    width: 100%;
}
.rea-item:nth-child(even) {
    border-right: none;
}
.rea-text p {
    padding: 0 4px;
}
.rea-item.n-bt{
    border-bottom: 1px solid #f2f2f2;
}
.pread-wrapper .cont-wrap h4 {
    padding: 5px 2px;
}
.video-wrap {
    position: relative;
    width: 86%;
    height: 0;
    padding-bottom: 48%;
    overflow: hidden;
    box-sizing: border-box;
}
.video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.howto-box span.ht-num {
    display: inline-block;
    font-size: 24px;
    width: 44px;
    height: 44px;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    margin: 15px 10px;
}
.howto-box i {
    display: none;
}
.howto-detail {
    display: inline-block;
    width: 85%;
    vertical-align: middle;
}
.howto-box {
    width: 100%;
    margin-bottom: 5px;
    margin-right: 0px;
    padding: 0;
    height: 74px;
    text-align: left;
}
.howto-box a.ht-sam, 
.howto-box p.ht-sam {
    display: inline-block;
    text-align: center;
    padding: 5px 0;
    width: 49%;
    line-height: 20px;
}
.howto-box h3 {
    margin-bottom: 2px;
}
.howto-box p {
    font-size: 14px;
    line-height: 1em;
}
.pr-poppage {
    box-sizing: border-box;
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    min-height: 100%;
    display: none;
    background: #FFF;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 53px;
    padding-bottom: 2em;
    margin: 0;
    width: 100%;
}
.pr-poppage._show {
    animation-name: box_show;
    animation-duration: 0.5s;
    display: block;
    opacity: 1;
}
.pr-poppage .clo-pop {
    position: fixed;
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    border-left: solid 1px rgba(255,255,255,0.3);
    top: 0;
    right: 0;
    z-index: 33;
}
.pread-wrapper .pr-poppage h2.top-menu {
    position: fixed;
    width: 100%;
    min-height: 42px;
    margin: 0;
    left: 0;
    top: 0;
    z-index: 30;
    background: #381d01;
    color: #fff;
    text-align: center;
    font-size: 20px;
    padding-right: 48px;
    padding-bottom: 5px;
    padding-top: 14px;
}
.pr-poppage._show .condition-box {
    padding: 0;
}
.nav-mobile{
    display: block;
    padding-bottom: 30px;
}
.nav-mobile h2 {
    text-align: center;
    font-size: 30px;
    color: #333;
    font-weight: normal;
    padding: 25px 0;
}
.nav-mobile a {
    display: block;
    padding: 10px 0.5em;
    font-family: sukhumvitlight;
    font-size: 22px;
    color: #444;
    background: #eeeeef;
}
.nav-mobile ul li {
    border-bottom: solid 1px #FFF;
}
.nav-mobile a i.fa-angle-right {
    float: right;
}
.map-img {
    width: 100%;
    padding: 10px;
}
.pread-wrapper .cont-wrap h2 span {
    font-size: 20px;
}
.pro-sub {
    width: 100%;
    line-height: 1.3em;
}
.pro-title {
    padding: 6px;
}
.pro-zone {
    width: 100%;
}
.pro-title h3 {
    float: left;
    padding-top: 5px;
}
.pro-title, .pro-desc {
    position: relative;
}
.pro-desc._show {
    margin-top: 0;
}
.pro-desc {
    margin-top: -500%;
    transition: margin-top 0.5s ease;
    z-index: 0;
}
.pro-box {
    position: relative;
    padding-bottom: 6px;
}
.pro-box i.fa.fa-angle-down {
    font-size: 20px;
    transition: 0.5s;
}
.pro-box i.fa.fa-angle-down._rotate {
    transform: rotate(180deg);
}
.pro-seat {
    margin-right: 5px;
}
.pro-desc .seat {
    display: inline-block;
    float: inherit;
    vertical-align: top;
}
.pro-desc .school-bkk {
    width: 86%;
    display: inline-block;
}
.pro-desc .province {
    float: inherit;
    width: 29%;
    display: inline-block;
    vertical-align: top;
}
.pro-desc .sname {
    width: 54%;
}
.reward-box {
    width: 100%;
    margin-bottom: 10px;
}
.reward-box p {
    font-size: 14px;
}
.cont-part {
    width: 100%;
    margin-bottom: 10px;
    padding: 0 10px;
}
.round-1 {
    float: left;
}
.nav-click .i-ico {
    width: 30px;
    text-align: center;
}
.sch-clear{
    padding: 0;
}
.pr-poppage.pr-box4 {
    padding-top: 65px;
}
@keyframes box_show {
0% {
    opacity: 0;
    display: block;
}
100% {
    opacity: 1;
    display: block;
}
}
.soc-box {
    margin-bottom: 10px;
}
.condition-box h2.title {
    display: none;
}
.pro-count i {
    display: inline-block;
}
.mobile-only {
    display: block; 
}
.desktop-only {
    display: none;
}
.btn-linkbox .btn-main.btn-login.-main {
    width: 100% !important;
}
.btn-linkbox .btn-login {
    width: 49%;
    float: left;
    margin: 0;
}
.btn-linkbox .btn-login.btn-buy {
    margin-right: 6px;
}
    ._showd {
        display: none;
    }
    ._showm {
        display: block !important;
    }

}
@media screen and (max-width: 768px){
.vir-box{
    padding: 0 3px;
}
.vir-box{
    width: 49%;
    padding: 0 5px;
    display: inline-block;
    float: inherit;
    vertical-align: top;
    margin-right: 0px;
}
span.sch-subj {
    display: inline-block;
    width: 44%;
}
}
@media screen and (max-width:670px){
    .fee-box.f-2 {
        max-width: 100%;
        margin-top: 20px;
    }
    .fee-box {
        max-width: calc(50% - 5px);
    }
    .content-box {
        padding: 0 10px;
    }
    .btn-linkbox {
        max-width: 354px;
        width: 100%;
        margin: 20px auto 0;
    }
    .btn-linkbox a {
        width: 220px;
        margin-bottom: 10px !important;
    }    
    .btn-linkbox a span {
        font-size: 16px;
    }
    .content-box.subject-part{
        padding: 10px;
    }
    .content-box.fee-part,
    .content-box.round2-part {
        padding: 10px 30px;
    }
    .tl-con {
        width: 100%;
        font-size: 14px;
    }
    .tl-con.-left:after {
        display: none;
    }
    .tl-con.-left {
        border-bottom: 1px solid #fab816;
        padding-bottom: 20px;
        margin-bottom: 20px;
        padding-top: 20px;
    }
    .fee-box.f-1m {
        margin-right: 0;
    }
    .fee-box.f-1 {
        margin-top: 10px;
    }
    .tl-con.-right ul {
        max-width: 260px;
        width: 100%;
        margin: 0 auto;
        padding-left: 0;
    }
    
    .content-box.regist-part {
        background: none;
        background-color: #ffb31a;
        padding: 0;
        margin-bottom: 0;
    }
    .mobile-section .field span {
        color: #f37a01;
    }
    .mobile-section .field {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: block;
        background-color: #000;
        color: #fff;
        font-size: 18px;
        font-family: sukhumvitreg,tahoma,sans-serif;
        height: 40px;
        line-height: 45px;
    }
    .top-section {
        background: none;
        padding-bottom: 10px;
    }
    .mobile-section {
        background:  url(../images/Header-bg-m.png) 0 0 no-repeat; 
        height: 260px;
        background-size: 100%;
        position: relative;
    }
    .subject-head span {
        padding: 5px 5px;
        font-size: 14px;
        height: 30px;
    }
    .txt-www {
        background-color: #000;
        font-size: 16px;
        color: #fff;
        font-family: sukhumvitreg,tahoma,sans-serif;
        width: 170px;
        line-height: 25px;
        height: 22px;
    }
    .logo-index {
        width: 300px;
        padding-top: 20px;
    }
    .girl-m {
        display: block;
        margin: 0 auto;
    }
    .content-box.round2-part{
        background: url(../images/pic-bgbottom-m.jpg)0 0 no-repeat #f93b3b;
        padding-top: 70px !important;
        background-size: 100%;
    }
    .r2-desc, .round2-info {
        max-width: 100%;
    }
    .pread-wrapper .round2-part h2 {
        font-size: 26px;
        line-height: 1em;
    }
    .txt-wh {
        font-size: 14px;
        margin-top: -10px;
    }
    .round2-part .-right {
        margin-top: 0;
        float: inherit;
        margin: 0 auto;
        max-width: 100%;
    }
    .r2-desc .rp1{
        margin-right: 10px;
    }
    .r2-desc .rp1,
    .r2-desc .rp2{
        width: calc(50% - 5px);
    }
    .r2-desc .rp3{
        width: 100%;
        margin-top: 10px;
    }
    .r2-pack {
        line-height: 38px;
    }
    .content-box h1,
    .txt-sub,
    .btn-linkbox{
        padding: 0 10px;
    }
    .txt-sub {
        font-size: 14px;
        
    }
.reward-box {
    padding: 6px;
}
.re-text {
    width: 82%;
}
.text-box-l {
    padding: 5px;
}
.text-box-r {
    padding: 5px;
}
    .pread-wrapper h1 {
        font-size: 22px;
        line-height: 1.3em;
    }
    .subj-desc.sd-1 .examby {
        padding: 14px 5px 0;
        height: 92px;
        width: 100px;
    }
    .event-prev {
        position: inherit;
    }
    .text-head-sub {
        font-size: 18px;
        margin: 3px 0 10px;
    }
.cont-wrap.field,
    #pronstage h2.pr-title {
        padding-top: 0 !important;
    }
}
@media screen and (max-width:414px){
.subj-desc .subj-namebox {
    font-size: 13px;
}
.subj-desc .subj-namebox .name b {
    font-size: 24px;
}
.subj-info .txt-by {
    width: 80px;
}   
.subj-desc .examby {
    width: 80px;
    padding: 10px 5px 0 5px;
}
.logo-index {
    padding-top: 10px;
}
.vir-part{
padding: 10px 5px;
}
.vir-box {
    padding: 0 2px;
}
.vir-box p {
    padding: 10px 5px;
}
.howto-detail {
    width: 79%;
}
.pro-desc .school-bkk {
    width: 84%;
}
.round-1 li {
    padding-left: 20px;
}
.round-1 {
    padding: 7px;
    min-height: 155px;
}
.tl-con.-right ul {
    max-width: 100%;
}
    .content-box.timeline-part {
        padding: 0 20px; 
    }
    .tl-con.-right li span:last-child {
        float: left;
        width: calc(100% - 90px);
    }
    ._showi6 {
        display: block;
    }
    .btn-linkbox .btn-main.-regist,
    .btn-linkbox a {
        width: 100%;
        margin: 0 auto;
    }
.btn-link-mb {
    text-align: center;
    display: block;
}
.btn-link-mb:after {
    content: "";
    display: block;
    clear: both;
}
.btn-link-mb a:first-child {
    width: 60% !important;
    margin-right: 2%;
}
    
.btn-linkbox .btn-login.btn-texam {
    width: 100%;
}

}
@media screen and (max-width:375px){ 
.vir-box p {
    padding: 10px 0px;
}
.howto-box span.ht-num {
    font-size: 20px;
    width: 40px;
    height: 40px;
    margin: 15px 3px 15px 6px;
}
.howto-detail {
    width: 83%;
}
.pro-desc .sname {
    width: 52%;
}
.pread-wrapper .cont-wrap h2 span {
    font-size: 18px;
}
.pro-desc .school-bkk {
    width: 82%;
}
.rou-m {
    font-size: 12px;
}
._showm6{
    display: block;
}
p.rou-note {
    line-height: 1em;
    margin: 5px;
}
.purpose-box{
    padding: 10px;
}
.proj-name {
    width: 80%;
}
.round-1 {
    min-height: 164px;
}
    
.subj-desc .subj-namebox {
    font-size: 12px;
}
    .subj-desc .subj-namebox {
        margin-left: 10px;
    }
    .rea-item.n-bt {
    min-height: 164px;
}
    .mobile-section {
        height: 240px;
    }
.pro-title h3 {
    font-size: 18px;
}
    .pro-title h3 {
        width: 55%;
    }
}
@media screen and (max-width:360px){ 
.pro-desc .school-bkk {
    width: 81%;
}
.pro-desc .sname {
    width: 47%;
}
.text-box-r span.sch-time {
    width: 115px;
}
.rou-subj-list i {
    margin-right: 0px;
}
.round-1 li {
    padding-left: 10px;
}
.pro-desc .province {
    width: 34%;
}
    .subj-info .time {
        width: 100%;
    }
    .subj-info .time span:last-child {
        padding-bottom: 20px;
        display: block;
    }
}
@media screen and (max-width:320px){ 
    ._noi5 {
        display: none;
    }
    .subj-desc .code {
        width: 30px;
    }
    .subj-info .txt-by {
        width: 80px;
    }   
    .subj-desc .examby {
        width: 80px;
        padding: 5px 5px 0 5px;
    }
    .subj-desc .subj-namebox {
        margin-left: 10px;
        width: calc(100% - 120px);
    }
    .tt-name span {
        font-size: 9px;
    }
    .subj-desc .subj-namebox {
        font-size: 11px;
    }
    .subj-desc .subj-namebox .name b {
        margin-bottom: -30px;
    }
    .mobile-section {
        height: 209px;
    }
    .logo-index {
        padding-top: 0;
    }
    .content-box.fee-part, .content-box.round2-part {
        padding: 10px;
    }
    .rea-item {
    min-height: 173px;
    padding: 10px 3px;
    }
    .rea-item.n-bt {
        min-height: 175px;
    }
    .pread-wrapper .cont-wrap h4 {
        padding: 2px 3px;
    }
    .video-wrap {
        width: 95%;
        padding-bottom: 54%;
    }
    .pread-wrapper .cont-wrap h2 {
        font-size: 28px;
    }
    .vir-box {
        padding: 0;
    }
    .howto-box span.ht-num {
        font-size: 16px;
        width: 32px;
        height: 32px;
        padding: 5px;
    }
    .howto-box a.ht-sam {
        display: block;
        width: 100%;
    }
    .howto-box {
        height: auto;
        padding: 10px 0;
    }
    .pro-title h3 {
        width: 55%;
        line-height: 1em;
    }
    .pro-count {
        padding: 1px 4px;
        font-size: 12px;
    }
    .pro-desc .school-bkk {
        width: 79%;
    }
    .pro-desc .sname {
        width: 43%;
        vertical-align: top;
    }
    .no-m5 {
        display: none;
    }
    .re-text {
        width: 70%;
    }
    .pread-wrapper .pr-poppage h2.top-menu {
        font-size: 16px;
    }
    .cont-part.sample-box {
        padding: 15px 15px 0;
    }
    h3.sam-title {
        font-size: 20px;
    }
    .img-sample {
        width: 100%;
    }
    .sch-list {
        font-size: 12px;
    }
    .text-box-r span.sch-time {
        width: 100px;
    }
    .round-1 li {
        padding-left: 0px;
    }
    span.rou-dt {
        margin-right: 4px;
    }
    .round-1 {
        padding: 5px;
        min-height: 158px;
    }
    .pre-round h3 {
        font-size: 17px;
    }
    .proj-name {
        width: 77%;
    }
    .pread-wrapper .cont-wrap h4 {
        font-size: 13px;
    }
        .pread-wrapper .round2-part h2 {
            font-size: 24px;
        }
        .howto-box a.ht-sam, .howto-box p.ht-sam {
            width: 100%;
        }
        ._nshowm5 {
            display: none;
        }
        .mobile-section .field {
            font-size: 16px;
        }
        .pread-wrapper h1 {
            font-size: 22px;
        }
        .btn-linkbox .btn-main.-regist,
        .btn-linkbox .btn-main {
            width: 100%;
            margin: 0 auto;
        }
        .tt-name.-t2 {
            width: 42px;
            line-height: 0.8em;
        }
        .tt-name span b {        
            margin-top: 0;
        }
        .subj-desc.sd-1 .examby {
            width: 110px;
        }
        .subj-desc.sd-1 .subj-namebox {
            width: calc(100% - 150px);
        }
    .btn-linkbox2 {
        font-size: 13px;
    }
    .pro-title h3 {
        width: 50%;
    }
    span.sch-subj {
    display: inline-block;
    width: 45%;
    }
    .score-box.score-box0 li.range a,
    .score-box.score-box0 li.range a.btshow-gatth,
    .score-box.score-box0 li.range a.btshow-gateng {
    width: 30%;
    }

    }

/* START popup top section */

.timetable-pop {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.8);
    box-sizing: border-box;
    text-align: center;
    z-index: 32;
    padding: 2em;
}
.timetable-pop .ttb-wrap {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 100%;
}
.ttb-wrap .ttb-wrap-img {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.timetable-pop .ttb-clos {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    padding: 5px;
    background: #362f2d;
    cursor: pointer;
}
.timeline-wrap .price-pop {
    text-decoration: underline;
    cursor: pointer;
}
.time-check {
    cursor: pointer;
    text-decoration: underline;
    color: #ffffff;
}

/* END popup top section */