html,body {padding:0;margin:0;width:100%;height:100%}
* {box-sizing:border-box}
body {background:#212428;color:#fff;font-family:'Prompt','Kanit',Tahoma,Arial,sans-serif;font-size:18px}
a,a:hover,a:focus,a:active {text-decoration:none;transition:.5s all}
b,strong {font-weight:700}
/* #000000 ดำ */
/* #272a2c เทา */
/* #ffffff ขาว */
/* #124268 น้ำเงิน */
/* #508f9f ฟ้า */
/* #007797 ฟ้า */

/* ===== Main CSS ===== */
#top {padding-top:128px}

.tn-menu {z-index:1000;position:fixed;top:0;left:0;right:0}
.tn-menu {background:#272a2c;width:100%;height:128px;white-space:nowrap}
.tn-menu:after {display:block;content:'';clear:both}
.tn-menu a {color:#fff}
.tn-menu a.active {color:#007797}
.tn-menu .th-box {max-height:128px;overflow-y:hidden}
.tn-menu .box-l {float:left}
.tn-menu .box-r {float:right}

.tn-logo {height:128px;padding:26px 64px 0}
.tn-navi {height:128px;padding:40px 8px 0}
.tn-lang {height:128px;padding:34px 48px 0}
.tn-chat {height:128px;padding:24px 8px 0}

.tn-navi a {display:inline-block;margin-right:48px;padding:8px;font-size:20px}
.tn-navi a:hover,.tn-navi a.active {text-decoration:underline}

.lang-box {display:inline-block;padding:8px;background:#124268}
.lang-box a {display:inline-block;background:#fff0;text-align:center;width:48px;height:44px;padding-top:8px}
.lang-box a:hover {background:#508f9f;color:#fff}
.lang-box a.active {background:#fff;color:#007797}

.chat-box a {display:inline-block;width:256px;height:80px;line-height:80px;text-align:center;background:#124268;color:#fff;font-size:20px;transition:.5s all}
.chat-box a:hover {background:#508f9f}

.btn-main {display:inline-block;padding:6px 24px;text-decoration:none;text-align:center;font-size:20px;background:#fff;color:#124268;border:2px solid #124268;border-radius:8px}
.btn-main.arrow {padding-right:48px;text-decoration:underline;background:url(svg/btn-effect.svg) right center no-repeat;background-size:45px 30px}
.btn-main.mgy {margin-top:24px;margin-bottom:24px}
.btn-main.mgx {margin-left:24px;margin-right:24px}
.btn-main:hover {background-color:#124268;color:#fff}
.btn-main.arrow:hover {background-image:url(svg/btn-effect-2.svg);background-size:30px 30px}

/* ===== Home Intro ===== */
.home-intro {height:calc(100vh - 128px);position:relative;background:url(jpg/home-intro-bg.jpg) top center no-repeat;background-size:cover}
.home-intro-effect {position:absolute;width:100%;height:100%;margin:0 auto;left:0;right:0;top:0;background:linear-gradient(to top,#124268,#508f9f05,transparent);background-size:cover}
.hi-left-bot {z-index:500;position:absolute;left:64px;bottom:64px}
.hi-left-bot img {width:25.95vw;height:15.1vw}
.hi-right-top {z-index:501;position:absolute;right:64px;top:12%}
.hi-right-top img {width:15.55vw;height:14.05vw}
.hi-right-bot {z-index:502;position:absolute;right:64px;bottom:48px}
.hi-right-bot img {height:16vw}
.hi-right-bot:after {z-index:503;position:absolute;right:-40px;top:-40px;width:80px;height:80px;display:inline-block;content:''}
.hi-right-bot:after {background:url(svg/play_rt.svg) center no-repeat;background-size:contain}

.home-about {background:#fff;color:#333;padding:96px 140px}
.home-about:after {display:block;content:'';clear:both}
.ha-img,
.ha-txt {display:inline-block;width:48.88%}
.ha-img {float:left}
.ha-txt {float:right}

.home-expert {background:#fff;color:#333;padding:64px 140px 64px}
.home-expert.board {background:url(jpg/board.jpg) no-repeat center bottom;background-size:cover}
.tbl-pad {width:100%;margin:24px auto}
.tbl-pad td {padding:16px;width:33.33%}
.tbl-pad td div {background:#eee url(png/TN_trans.png) top left no-repeat;background-size:cover}
.tbl-pad td div.sq {padding-top:80%}
.tbl-pad td div.colspan {padding-top:calc(160% + 32px)}
.tbl-pad td div:hover {filter:contrast(120%) brightness(108%)}

.home-what {background:#fff;color:#333;padding:64px 0}

.home-event {background:#124268;color:#fff;padding:64px 0 0}

.home-outro {background:#124268;color:#fff;padding:96px 24px;background:url(jpg/digital_sky.jpg) no-repeat center bottom;background-size:cover}

.home-blog {background:#fff;color:#333;padding:96px 0}

.home-news {background:#fff;color:#333;padding:96px 24px}
.latest-news {position:relative;padding:16px}
.latest-news:after {display:block;content:'';clear:both}
.news-box {float:left;width:33.33%;padding:16px}
.news-box:hover {filter:contrast(120%) brightness(108%)}

.home-footer {background:#fff;color:#333;padding:24px 0 20px}

/* ===== Retro Smart Menu ===== */
.pc-menu {position:absolute;top:0;left:0;right:0;width:100%;padding:0;box-shadow:0 1px 4px #01010124;z-index:100}
.pc-menu .nlogo {width:100%;height:128px;text-align:center;background:#000}
.pc-menu .nlogo img {display:inline-block;margin:0 auto;width:128px;height:128px}
.pc-menu .navi {width:100%;height:96px;text-align:center;white-space:nowrap;padding:24px 36px}
.pc-menu .navi a {display:inline-block;padding:0 32px;border-radius:4px;color:#fff;font-size:20px;font-weight:600;text-transform:uppercase}
.pc-menu .navi a:hover {background:#fff;color:#000}

.sm-menu {position:fixed;top:0;left:0;right:0;background:#000;width:100%;padding:12px;box-shadow:0 1px 4px #7777;z-index:101}
.sm-menu .nlogo {float:left;width:100px;height:80px;text-align:center}
.sm-menu .nlogo img {display:inline-block;margin:0 auto;width:80px;height:80px}
.nbars {position:absolute;right:48px;top:50%;transform:translateY(-50%)}
.nbars {width:32px;height:28px;cursor:pointer;border-top:4px solid #fff;border-bottom:4px solid #fff}
.nbars:after {position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:block;content:'';width:32px;height:4px;background:#fff;margin:0 auto}

.minimenu {position:fixed;top:0;left:0;right:0;background:#fff;width:100%;height:100vh;padding:160px 32px 0;background:#fdfffd;z-index:99;overflow:hidden;opacity:1;transition:.5s all}
.minimenu a {display:block;margin:16px auto;height:48px;line-height:40px;text-align:center;font-size:24px;font-weight:600;text-transform:uppercase}
.minimenu a {background:#fff;border:2px solid #020202;border-radius:4px;color:#020202}
.minimenu a.active {background:#000 linear-gradient(to top,#010101,#020202);color:#fff}
.minimenu.inactive {height:0px;opacity:0}

.hero {position:relative;background:#000;padding:128px 128px 24px}
.hero img:first-child {display:block;width:100%;max-width:100%;margin:0 auto}
.hero:after {display:block;content:'';margin:0 auto;position:absolute;bottom:0;left:0;right:0;background:url(png/shadow_bot.png) center bottom no-repeat;background-size:contain;width:100%;height:11vw;z-index:11}
.hero-intro {margin:0 auto;position:absolute;bottom:0;left:0;right:0;background-size:contain;width:640px;height:480px;max-width:80%;max-height:60vw;z-index:12}
.hr {width:66%;height:1px;margin:48px auto 32px;background:#000}

.viewport-home,.viewport-who,.viewport-what,.viewport-events,.viewport-shows,.viewport-get {width:1px;height:1px;position:absolute;top:120px;left:0;overflow:hidden;z-index:2}
#home,#who,#what,#events,#shows,#get {width:1px;height:1px;position:absolute;top:-108px;left:0;overflow:hidden;z-index:1}
#sk-home,#sk-who,#sk-what,#sk-events,#sk-shows,#sk-get {position:relative;padding:48px 32px}
.ask-intro {margin:0 auto;text-align:center;max-width:1440px;letter-spacing:-1px}
.ask-intro h1,.ask-intro h2,.ask-intro p:first-of-type {color:#020202;margin:8px auto}
.ask-intro p {margin:16px auto}
.ts48 {font-size:48px}
.ts40 {font-size:40px}
.ts32 {font-size:32px}
.ts24 {font-size:24px}
.ts20 {font-size:20px}
.ts16 {font-size:16px}
.lazi {display:block;width:100%;max-width:100%;margin:0 auto}
.lazi-one {display:block;max-width:100%;margin:0 auto}

#sk-who {padding-top:0;background:#fff}
#sk-what {padding:0;background:#000}
#sk-get {padding:8vw 0 48px;background:#000;color:#fff}
#sk-get .ask-intro h1,#sk-get .ask-intro h2,#sk-get .ask-intro p:first-of-type {color:#fff}
#sk-get p {color:#fff}
#sk-get:after {display:block;content:'';position:absolute;top:0;left:0;right:0;background:url(png/shadow_top.png) center top no-repeat;background-size:contain;width:100%;height:11vw;z-index:11}

.please {color:#020202;padding:8px 0 16px;font-size:18px}

.request-form {padding:24px 128px;width:100%;max-width:1360px;margin:32px auto 48px;background:#f5f5f5;border-radius:32px}

.agent-ready {padding:24px;width:100%;max-width:1360px;margin:0 auto}
.agent-imgs {float:left}
.agent-form {float:right}
.agent-imgs,
.agent-form {width:45%}
.agent-imgs img {width:100%}

.skg-contain,.skc-contain,.skg-event {position:relative;text-align:center}
.skg-contain:after,.skc-contain:after,.skg-event:after {display:block;content:'';clear:both}
.skg-contain .skg-imgs {display:inline-block;margin:0 auto}
.skg-contain .skg-imgs {max-width:360px;width:25%}
.skg-contain .skg-imgs img {width:360px;max-width:100%}
.skc-contain .skc-imgs {display:inline-block;margin:0 auto}
.skc-contain .skc-imgs {max-width:288px;width:16.66%}
.skc-contain .skc-imgs img {width:288px;max-width:100%}

.skg-event {padding:24px 256px}
.skg-event .skg-imgs {float:left;display:inline-block;margin:0 auto;white-space:nowrap}
.skg-event .skg-imgs {width:33.33%;padding:24px}
.skg-event .skg-img {width:100%;padding-top:144%;background-position:center;background-repeat:no-repeat;background-size:contain}

.ev-title {font-size:20px;font-weight:600;padding-top:16px}
.ev-mute {font-size:20px}
.ev-date {font-size:16px;font-weight:700;padding:16px 8px 2px}

.contact-ft,.contact-ft a {color:#fff}
.tri-row {position:relative}
.tri-col {float:left;width:33.33%;padding:24px}
.tri-col:nth-child(1) {text-align:right}
.tri-col:nth-child(2) {text-align:center}
.tri-col:nth-child(3) {text-align:left}
.tri-col:nth-child(2) img {display:inline-block;width:40%;margin:12px auto 0}
.tri-col-1 {text-align:center}
.tri-col-1 > img {display:inline-block;width:33.33%;max-width:256px;margin:12px auto 0}
.contact-ft h3 {padding-top:20px}
.contact-ft .sns {padding:80px 0}
.contact-ft .tri-col-1 .sns {padding:0 0 48px}
.contact-ft {padding-top:96px}
.ft-sns {text-align:center}
.ft-sns-icons {display:inline-block;padding:48px 24px 24px;white-space:nowrap;border-bottom:1px solid #fff}
.ft-sns-icons a {display:inline-block;padding:4px}

.skpop,.skpop * {text-align:center;transition:.5s all}
.skpop {position:fixed;left:0;right:0;top:0;width:100%;height:100vh;overflow:hidden;z-index:998}
.skpop-in {position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 auto;width:96%;max-width:384px;padding:32px 24px;border-radius:16px;z-index:999}
.skpop {background:#000e;opacity:0;display:none}
.skpop-in {background:#fff}
.skpop.active {opacity:1;display:block}
.skpop .data {color:#020202}
.skpop .btn {border-radius:8px;height:32px;line-height:24px;font-size:20px;padding:0 32px;border:2px solid #020202;background:#080 linear-gradient(to top,#0d2c1c,#020202);color:#fff;text-align:center;cursor:pointer;font-weight:600;margin:16px auto}
.skpop .btn:hover {border:2px solid #020202;background:#fff;color:#020202}

/* ===== Form Decoration ===== */
input,button,select {font-family:inherit;background:#fff;transition:.3s all;border-radius:12px;display:inline-block;padding:0 16px}
input,select {height:40px;line-height:40px;font-size:20px;border:2px solid #d9d9d9;color:#080}
input:focus {background:#f5fff5}
button {height:48px;line-height:32px;font-size:24px;border:2px solid #020202;background:#080 linear-gradient(to top,#0d2c1c,#020202);color:#fff;text-align:center;cursor:pointer;font-weight:600;margin:16px auto}
button:hover {border:2px solid #020202;background:#fff;color:#020202}
input:valid,select:valid {border-color:#d9d9d9}
input:invalid,select:invalid {border-color:#494}

.text-in {padding:8px 0}
.text-in input,.text-in select {width:100%}
.text-special {position:relative}
.text-special select {float:left;width:108px}
.text-special input {float:right;width:calc(100% - 120px)}
.check-options {padding:16px 0;white-space:nowrap}

/* ===== After Clear Both ===== */
.pc-menu:after,
.sm-menu:after,
.skg-contain:after,
.skc-contain:after,
.agent-ready:after,
.text-special:after,
.request-row:after,
.tri-row:after {display:block;content:'';clear:both}

/* Responsive Style */
@media screen and (min-width:992px) {
	.hidden-pc {display:none}
	.request-col {float:right;width:48%}
	.request-col:first-child {float:left}
}

@media screen and (max-width:991px) {
	.hidden-sm {display:none}
	.ts48 {font-size:32px}
	.ts40 {font-size:28px}
	.ts32 {font-size:24px}
	.tri-row {padding-bottom:64px}
	.tri-col:nth-child(1),
	.tri-col:nth-child(2),
	.tri-col:nth-child(3) {text-align:center}
	.tri-col {float:left;width:100%;padding:0px}
	.skg-contain .skg-imgs {width:50%}
	.skc-contain .skc-imgs {width:33.33%}
	.skg-event {padding:0px}
	.skg-event .skg-imgs {float:none;width:100%;padding:8px 8px 64px}
	.ev-date {padding-bottom:16px;border-bottom:1px solid #eee}
	.contact-ft .sns {padding:0}
	.agent-imgs,
	.agent-form {width:100%}
	.request-form {padding:24px 32px}
	.hero {padding:108px 0 8vw}
	button {height:48px;line-height:32px;font-size:20px;width:100%;padding:0}
}


/* Mstyle Mod */
.ns-only {display:none;opacity:0;width:0;height:0;overflow:hidden}
.w-100 {width:100% !important}
.text-left {text-align:left}
.text-center {text-align:center}
.text-right {text-align:right}
.scroller {
	scrollbar-color: #aaad #0801;
	scrollbar-width: thin;
}
.scroller::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.scroller::-webkit-scrollbar-track-piece  {
	background-color: #0801;
}
.scroller::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb:vertical,
.scroller::-webkit-scrollbar-thumb:horizontal {
	height: 8px;
	background-color: #aaad;
}
.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1;}
.line-clamp-2 { -webkit-line-clamp: 2;}
.line-clamp-3 { -webkit-line-clamp: 3;}
.line-clamp-4 { -webkit-line-clamp: 4;}
.line-clamp-5 { -webkit-line-clamp: 5;}