
/*wrap banner*/
.banner{
    margin-bottom: 20px;
}
.banner img{
    min-height: 1px;
    width: 100%;
}

/*wrap about*/
.wrap-about .panal-btn{
    width: 380px;
    float: right;
    top: 40px;
    padding-top: 35px;
}
.wrap-about .panal-btn div[class*="btn-"]{
    width: 360px;
    height: 133px;
    text-align: right;
    color: #fff;
    font-family: 'kanitregular';
    font-size: 2.75em;
    padding: 35px 110px 35px 0px;
}
.wrap-about .panal-btn div[class*="btn-"] a{
    color: #fff;
    display: block;
}
.wrap-about .panal-btn .btn-regis{
    background-color: #ec6d22;
    margin-bottom: 5px;
}
.wrap-about .panal-btn .btn-download{
    background-color: #1a6fb2;
}
.wrap-about .panal-btn .btn-regis::before,
.wrap-about .panal-btn .btn-download::before{
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    transform: rotate(45deg);
    top: 35px;
    left: -32px;
    position: absolute;
    background-color: #ec6d22;
    transform: rotate(45deg) skew(25deg, 25deg);
    z-index: -1;
}
.wrap-about .panal-btn .btn-download::before{
    background-color: #1a6fb2;
}
.wrap-about .panal-about{
    width: 800px;
    padding: 33px 20px;
    left: 50%;
    margin-left: -400px;
}
.wrap-about .panal-about .head{
    font-size: 2.8em;
    color: #1e75ba;
    font-family: 'kanitregular';
    margin-bottom: 20px;
}
.wrap-about .panal-about  p{
    font-family: 'kanitregular';
    font-size: 1.7em;
    color: #00293d;
}
.wrap-about .panal-about  p span{
    color: #1e75ba;
}
.wrap-about .panal-about div[class*="icon-"]{
    position: absolute;
}
.wrap-about .panal-about .icon-open{
    top: 0px;
    left: 0px;
}
.wrap-about .panal-about .icon-closed{
    bottom: 0px;
    right: 0px;
}

/*wrap gallery*/
.wrap-gallery .topic {
    width: 326px;
    margin-left: calc(50% - 163px);
}
.wrap-gallery .topic span {
    background-color: #ffff!important;
    width: 132px;
}

/*wrap diagram fade1*/
.diagram-fade1 .topic{
    width: 400px;
    margin-left: calc(50% - 200px);
    margin-bottom: 30px;
}
.diagram-fade1 .topic span{
    background-color: #ffff!important;
    width: 200px;
}

/*wrap diagram*/
.wrap-diagram .bg-diagram{
    height: 1218px;
    background: url('../images/bg-diagram.jpg') no-repeat 0px 0px;
}
.wrap-diagram .bg-diagram .company,
.wrap-diagram .bg-diagram .spornsor{
    position: absolute;
    width: 380px;
}
.wrap-diagram .bg-diagram ul li{
    position: relative;
    float: left;
    width: 100%;
    padding: 0px 13px;
    font-size: 1.6em;
    color: #181617;
    box-sizing: border-box;
    font-family: 'kanitregular';
    height: 28px;
    line-height: 28px;
}
.wrap-diagram .bg-diagram ul li:nth-child(even){
    background-color: #ddecf1;
}
.wrap-diagram .bg-diagram ul li:nth-child(odd){
    background-color: #f4f4f4;

}
.wrap-diagram .bg-diagram ul li.head{
    height: 42px;
    line-height: 42px;
    background-color: #ec6d22;
    color: #fff;
    font-size: 1.25rem;
}
.wrap-diagram .bg-diagram ul li span{
    float: right;
    width: 30px;
    text-align: center;
}
.wrap-diagram .bg-diagram .company ul li.head{
    background-color: #1e75ba;
}
.wrap-diagram .bg-diagram .spornsor{
    top: 0px;
    right: 0px;
}
.wrap-diagram .bg-diagram .company.com-1{
    bottom: 0px;
    left: 0px;
}
.wrap-diagram .bg-diagram .company.com-2{
    bottom: 0px;
    left: 408px;
}
.wrap-diagram .bg-diagram .company.com-3{
    bottom: 0px;
    right: 0px;
}

/*wrap location*/
.wrap-location{
    background-color: #f6f6f6;
}
.wrap-location .topic{
    width: 480px;
    margin-left: calc(50% - 240px);
}
.wrap-location .topic span{
    background-color: #f6f6f6!important;
    width: 280px;
}
.wrap-location .wrap-panal{
    margin-top: 25px;
}
.wrap-location .panal-location{
    width: 379px;
    height: 452px;
    margin-left: 31px;
}
.wrap-location .panal-location:first-child{
    padding-top: 32px;
    margin-left: 0px;
}
.wrap-location .panal-location p{
    font-size: 2em;
    color: #2275b7;
    font-family: 'kanitregular';
}
.wrap-location .panal-location .box-images{
    margin-top: 23px;
}
.wrap-location .panal-location .logo-hotel{
    text-align: center;
    margin-bottom: 12px;
}
.wrap-location .panal-location:last-child {
    background-color: #fff;
    padding: 2px;
}
.wrap-location .panal-location:last-child img{
    width: 100%;
    height: 100%;
}

/*wrap sponsor*/
.wrap-sponsor .topic{
    width: 490px;
    margin-left: calc(50% - 245px);
}
.wrap-sponsor .topic span{
    width: 290px;
}
.wrap-sponsor ul {
    text-align: center;
}
.wrap-sponsor ul li{
    position: relative;
    width: 200px;
    height: 100px;
    box-sizing: border-box;
    border: 3px solid #ebebeb;
    text-align: center;
    margin-left: 47px;
    margin-top: 25px;
    display: inline-block;
    overflow: hidden;
}
.wrap-sponsor ul li:nth-child(5n+1){
    margin-left: 0px;
}
.wrap-sponsor ul li img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 197px;
    max-height: 97px;
}

/*wrap partner*/
.wrap-media-partner .topic{
    width: 370px;
    margin-left: calc(50% - 185px);
}
.wrap-media-partner .topic span{
    width: 170px;
}
.wrap-media-partner ul{
    text-align: center;
}
.wrap-media-partner ul li{
    position: relative;
    width: 100px;
    height: 80px;
    background-color: #1a6fb2;
    margin-left: 22px;
    margin-top: 25px;
    display: inline-block;
    border: 2px solid #ebebeb;
}
.wrap-media-partner ul li:nth-child(10n+1){
    margin-left: 0px;
}
.wrap-media-partner ul li img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 200px;
    max-height: 100px;
}

/*wrap sent sms*/
.wrap-sms-line .flex{
    display: flex;
    width: auto;
    left: 50%;
    margin: 10px 0px;
    margin-left: -330px;
}
.wrap-sms-line .flex div{
    width: auto;
    margin: 5px;
    cursor: pointer;
}
.wrap-sent-sms{
    position: fixed;
    left: 50%;
    width: 450px;
    margin-left: -225px;
    box-shadow: 0px 0px 6px #555555;
    display: block;
    z-index: 21;
    padding-bottom: 30px;
    background-color: #fff;
    top: 70px;
    display: none;
}
.wrap-sent-sms .topic-sms{
    font-family: 'kanitregular';
    font-size: 30px;
    color: #fff;
    background-color: #f9a61a;
    text-align: center;
}
.wrap-sent-sms .topic-sms span{
    color: #ffdd55;
}
.wrap-sent-sms .detail-sms{
    background-color: #fff;
}
.wrap-sent-sms .detail-sms .main-note{
    color: #1e75ba;
    font-size: 30px;
    font-family: 'kanitregular';
    text-align: center;
    margin-top: 20px;
    line-height: 35px;
}
.wrap-sent-sms .detail-sms .sub-note{
    color: #666666;
    font-size: 14px;
    font-family: 'tahoma';
    text-align: center;
    margin-top: 20px;
}
.wrap-sent-sms .detail-sms .sub-note span{
    color: #fe0000;
    font-weight: bold;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 0px 3px;
}
.wrap-sent-sms .detail-sms .inp-sms input{
    width: 304px;
    height: 44px;
    box-sizing: border-box;
    color: #666;
    font-family: 'tahoma';
    font-size: 16px;
    text-align: center;
    outline: none;
    border-radius: 13px;
    border: 1px solid #cccccc;
    margin-left: 73px;
    margin-top: 20px;
}
.wrap-sent-sms .detail-sms .inp-sms input.error{ border: 1px solid #ff0000; }
.wrap-sent-sms .detail-sms .inp-sms input::placeholder{
    color: #cccccc;
    font-size: 16px;
    text-align: center;
}
.wrap-sent-sms .detail-sms .g-recaptcha{ margin-left: 73px; margin-top: 20px;}
.wrap-sent-sms .detail-sms .btn-sent-sms{
    width: 160px;
    height: 44px;
    background-color: #f9a61a;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    border-radius: 13px;
    border: 0px;
    left: 50%;
    margin-left: -80px;
    margin-top: 20px;
}
/*.bg-light-box{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 20;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */
    filter: alpha(opacity=50);/* IE 5-7 */
    -moz-opacity: 0.5;/* Netscape */
    -khtml-opacity: 0.5;/* Safari 1.x */
    opacity: 0.5;/* Good browsers */
    display: none;
}*/
.alert-validate{
    position: absolute;
    right: 85px;
    font-size: 12px;
    color: #ff0000;
    top: 5px;
    display: none;
}
.alert-recaptcha{
    text-align: center;
    color: #ff0000;
    font-size: 12px;
    top: 2px;
    display: none;
}

/*ผังงาน*/
#diagram-fade1 .diagram{
    width: 1200px;
    height: 1038px;
}
#diagram-fade1 .diagram ul li{
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #d6d6d6;
    cursor: pointer;
    width: 56px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    font-family: 'tahoma';
    color: #fff;
}
#diagram-fade1 .diagram ul li div{
    height: 48px;
    z-index: 3;
    transition: .5s ease-in-out;
}
#diagram-fade1 .diagram ul li div.img-logo{
    /*overflow: hidden;*/
    background-color: #f6f6f6;
    width: 54px;
    height: 48px;
}
#diagram-fade1 .diagram ul li div.img-logo img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    transition: .2s ease-in-out;
    z-index: 2;
}
#diagram-fade1 .diagram ul li div.box-booth{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
#diagram-fade1 .diagram ul li:hover div.img-logo{
    z-index: 5;
}
#diagram-fade1 .diagram ul li:hover div.img-logo img{
    width: 180px;
    height: 180px;
    max-width: 180px;
    max-height: 180px;
    left: -60px;
    border: 1px solid #939498;
}
#diagram-fade1 .diagram ul li div.img-logo div span{
    position: absolute;
    height: 30px;
    display: block;
    line-height: 30px;
    font-size: 18px;
    width: 54px;
    z-index: 1;
    color: transparent;
    /*display: none;*/
    transition: .2s ease-in-out;
}
#diagram-fade1 .diagram ul li:hover div.img-logo div span{
    transform: translate3d(0,0,0) translate3d(-60px,-94px,0);
    width: 182px;
    display: block;
    color: #fff;
    background-color: #939498;
    top: -95px\9;
    left: -60px\9;
}
_:-ms-lang(x),#diagram-fade1 .diagram ul li:hover div.img-logo div span {
    top: 0px\9;
    left: 0px\9;
}

.box-postjob .topic {
    width: 390px;
    margin-left: calc(50% - 195px);
}
.box-postjob ul{
    margin: 20px 1%;
    width: 98%;
}
.box-postjob ul li{
    position: relative;
    float: left;
    width: 100%;
    border-bottom: 1px solid #d0d0d0;
    box-sizing: border-box;
    padding: 5px;
    margin-bottom: 10px;
}
.box-postjob ul li a{
    display: block;
}
.box-postjob ul li div[class*="data-"]{
    position: relative;
    float: left;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 18px;
    font-family: 'kanitregular';
    color: #1a6fb2;
    line-height: 22px;
}
.box-postjob ul li div.data-namehotel{
    font-size: 16px;
    color: #ff5200;
}
.box-postjob ul li:last-child {
    text-align: center;
    color: #fff;
    background-color: #faa51a;
    border: none;
    width: 320px;
    margin-left: calc(50% - 160px);
    margin-bottom: 0px;
}
.box-postjob ul li:last-child a .data-all-job{
    color: #fff!important;
}

#diagram-fade1 .diagram .sponsor ul li div.box-booth{ background-color: #ed6d22; }
#diagram-fade1 .diagram .hotel ul li div.box-booth{ background-color: #1e75ba; }
#diagram-fade1 .diagram .hotel ul li:nth-child(-n+13) div.box-booth{ background-color: #be1d2c; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-1{ right: 162px; top: 452px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-2{ right: 162px; top: 511px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-3{ right: 162px; top: 570px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-4{ right: 217px; top: 626px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-5{ right: 276px; top: 626px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-6{ right: 335px; top: 626px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-7{ right: 394px; top: 626px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-8{ right: 453px; top: 626px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-9{ right: 512px; top: 626px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-10{ right: 402px; top: 398px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-11{ right: 461px; top: 398px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-12{ right: 544px; top: 332px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-13{ right: 544px; top: 273px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-14{ right: 471px; top: 230px; }
#diagram-fade1 .diagram .sponsor ul li.list-sponsor-15{ right: 412px; top: 230px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-1{ left: 520px; top: 63px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-2{ left: 520px; top: 122px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-3{ left: 520px; top: 181px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-4{ left: 532px; top: 271px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-5{ left: 532px; top: 330px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-6{ left: 494px; top: 525px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-7{ left: 435px; top: 525px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-8{ left: 435px; top: 425px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-9{ left: 435px; top: 366px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-10{ left: 435px; top: 307px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-11{ left: 435px; top: 248px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-12{ left: 435px; top: 189px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-13{ left: 435px; top: 130px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-14{ left: 374px; top: 130px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-15{ left: 374px; top: 189px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-16{ left: 374px; top: 277px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-17{ left: 374px; top: 336px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-18{ left: 374px; top: 395px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-19{ left: 374px; top: 516px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-20{ left: 369px; top: 601px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-21{ left: 369px; top: 660px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-22{ left: 369px; top: 719px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-23{ left: 369px; top: 809px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-24{ left: 369px; top: 868px; }


#diagram-fade1 .diagram .hotel ul li.list-hotel-25{ left: 279px; top: 769px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-26{ left: 220px; top: 769px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-27{ left: 161px; top: 769px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-28{ left: 161px; top: 716px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-29{ left: 220px; top: 716px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-30{ left: 279px; top: 716px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-31{ left: 279px; top: 626px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-32{ left: 220px; top: 626px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-33{ left: 161px; top: 626px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-34{ left: 161px; top: 573px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-35{ left: 220px; top: 573px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-36{ left: 279px; top: 573px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-37{ left: 279px; top: 483px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-38{ left: 220px; top: 483px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-39{ left: 161px; top: 483px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-40{ left: 161px; top: 430px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-41{ left: 220px; top: 430px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-42{ left: 279px; top: 430px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-43{ left: 279px; top: 340px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-44{ left: 220px; top: 340px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-45{ left: 161px; top: 340px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-46{ left: 161px; top: 287px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-47{ left: 220px; top: 287px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-48{ left: 279px; top: 287px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-49{ left: 279px; top: 197px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-50{ left: 220px; top: 197px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-51{ left: 161px; top: 197px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-52{ left: 161px; top: 144px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-53{ left: 220px; top: 144px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-54{ left: 279px; top: 144px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-55{ left: 333px; top: 61px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-56{ left: 274px; top: 61px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-57{ left: 200px; top: 61px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-58{ left: 118px; top: 61px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-59{ left: 73px; top: 127px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-60{ left: 73px; top: 186px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-61{ left: 73px; top: 277px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-62{ left: 73px; top: 336px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-63{ left: 73px; top: 395px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-64{ left: 73px; top: 493px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-65{ left: 73px; top: 588px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-66{ left: 73px; top: 647px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-67{ left: 73px; top: 706px; }

#diagram-fade1 .diagram .hotel ul li.list-hotel-68{ left: 73px; top: 789px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-69{ left: 73px; top: 848px; }
#diagram-fade1 .diagram .hotel ul li.list-hotel-70{ left: 73px; top: 907px; }

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
 // IE9 CSS
 .ie9{property:value;}
}
