html,body {padding:0;margin:0;width:100%;height:100%}
* {box-sizing:border-box}
body {background:#fff;color:#000;font-family:'Open Sans','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 ดำ */
/* #7d7c7b เทา */
/* #ffffff ขาว */
/* #ec228e ชมพู */
/* #6d5cc9 ม่วง */
/* #00f7f7 ฟ้า */

/* ===== Main CSS ===== */
#top {padding-top:120px}
.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;}