/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("../fonts/SukhumvitSet-Text/styles.css");
@import url("../fonts/SukhumvitSet-Medium/styles.css");
@import url("../fonts/SukhumvitSet-Bold/styles.css");
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

html { font-size: 62.5%; overflow-x: hidden; height: 100%; }

body { line-height: 1; color: black; background: white; overflow-x: hidden; letter-spacing: 0.5px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

body ::-moz-selection { background: #111111; color: #fff; }

body ::selection { background: #111111; color: #fff; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; vertical-align: middle; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: " "; }

q:before, q:after, blockquote:before, blockquote:after { content: ""; }

img { max-width: 100%; height: auto; }

a img { border: none; }

input, textarea, select, div, ul, li, a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; }

/* # Set SASS Function
================================================== */
/* #Basic Set
================================================== */
html { overflow-x: inherit; }

body { font-size: 1.8rem; line-height: 1.6; color: #FFFFFF; text-align: left; background-color: #485052; font-family: "Kanit", sans-serif; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #a5cb12; text-align: center; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: 400; }

h1 { font-size: 5.4rem; line-height: 1.2; }

h2 { font-size: 4.8rem; line-height: 1.2; }

h3 { font-size: 3rem; line-height: 1.2; }

h4 { font-size: 2.8rem; line-height: 1.6; }

h5 { font-size: 1.4rem; line-height: 1.6; }

h6 { font-size: 4.3rem; line-height: 1.2; }

strong { font-weight: 700; }

hr { position: relative; clear: both; margin: 0 10px; height: 0; border-top: 1px solid #333333; }

sub { vertical-align: sub; font-size: smaller; }

sup { vertical-align: super; font-size: smaller; }

ol { list-style: decimal; margin-left: 30px; }

ul { list-style: none; margin-left: 30px; }

ul.square { list-style: square; }

ul.circle { list-style: circle; }

ul.disc { list-style: disc; }

.detail p { margin-bottom: 10px; }

.detail ul { list-style-type: disc; }

.detail ul ul, .detail ul ol { font-size: 90%; }

a { position: relative; color: #FFFFFF; text-decoration: none; cursor: pointer; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

a:hover, a:active { color: #a5cb12; }

.clear { display: block; visibility: hidden; clear: both; overflow: hidden; width: 0; height: 0; }

section a:before { -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

section a:hover:before { -webkit-transform: scale(1); transform: scale(1); }

/* #Set Font
================================================== */
h1, h2, h4, h5 { font-family: "Kanit", sans-serif; }

body, input, textarea, select, button, p { font-family: "Kanit", sans-serif; }

h3 { font-family: "Kanit", sans-serif; }

/* #Textbox style
================================================== */
input, textarea, select, button { background: #000000; font-size: 1.6rem; border: 0; line-height: 1.4; color: #FFFFFF; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; outline: inherit; width: 100%; padding: 10px; }

button { background-color: #333333; border: 1px solid #333333; color: #f20591; cursor: pointer; font-size: 2.2rem; letter-spacing: 1.4px; font-weight: 300; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; padding: 13px 10px 10px; }

button:hover { background-color: #f20591; border: 1px solid #f20591; color: #ffffff; }

select { -moz-appearance: none; -webkit-appearance: none; padding: 13px 10px 12px; outline: 0px; line-height: 1; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: url(../images/icon--select.svg) right center no-repeat #ffffff; background-size: 35px auto; }

button::-moz-focus-inner { border: 0; }

/* #Helper Class
================================================== */
._text-j { text-align: justify; }

._small { font-size: 0.6em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }

._red { color: #dc1b35; }

._set-tablet { /* 800 */ display: none; }

._set-mobile { /* 560 */ display: none; }

/* #Grid
================================================== */
section { position: relative; z-index: 0; }

.box { position: relative; }

.container { position: relative; margin: 0 auto; padding: 0; max-width: 1200px; width: 100%; }

.container_full { position: relative; margin: 0 auto; padding: 0; }

._secpd--main { padding-top: 100px; padding-bottom: 100px; }

._secpd--sub { padding-top: 120px; padding-bottom: 120px; }

/* #Button and Link style
================================================== */
._btn-readmore { width: 100%; height: 60px; display: block; background: url(../images/bg--btn1.jpg) repeat-x center center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #000000; line-height: 1.2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-size: 2rem; font-family: "Kanit", sans-serif; padding-top: 5px; }

._btn-readmore:hover { color: rgba(0, 0, 0, 0.7); }

._btn-booknow { color: #ffffff; background-color: #f20591; padding: 6px 20px 4px; display: inline-block; min-width: 90px; text-align: center; text-transform: initial; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0); }

._btn-booknow:before { height: 0; }

._btn-booknow:hover { background-color: #f20591; }

.btn-register { background: url(../images/line-green.jpg) no-repeat center center; background-size: 100% auto; }

.btn-register a { background: url(../images/bg--btn1.jpg) repeat-x center center; width: 800px; height: 70px; margin: auto; color: #000000; font-family: "Kanit", sans-serif; font-size: 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding-top: 5px; }

.btn-register a:hover { color: rgba(0, 0, 0, 0.7); }

._btn-pink { color: #FFFFFF; background: url(../images/bg--btn2.jpg) repeat-x center center; padding: 6px 20px 4px; min-height: 60px; display: -webkit-inline-box; display: inline-flex; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-align: center; align-items: center; max-width: 320px; width: 100%; -webkit-box-pack: center; justify-content: center; }

._btn-pink:hover { color: rgba(255, 255, 255, 0.7); }

.btn-download { color: #ffffff; background-color: #f20591; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; margin: auto; padding: 8px 30px 5px 55px; position: relative; display: -webkit-inline-box; display: inline-flex; }

.btn-download:hover { color: #ffffff; background-color: #000; }

.btn-download:after { position: absolute; content: ""; height: 30px; width: 30px; left: 20px; top: 5px; background: url(../images/icon--download.svg) no-repeat center center; z-index: 2; background-size: 30px auto; }

/* #Font style
================================================== */
/* #Icon
================================================== */
.icon { position: relative; display: inline-block; width: 20px; height: 20px; background-position: center center; background-repeat: no-repeat; }

/* #Photo Effect
================================================== */
._bg-full { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }

._bg-full img { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* #Etc
================================================== */
.fixed_scroll { height: 100%; overflow: hidden; }

/* #Slide slide
================================================== */
.slick-list { height: auto !important; }

.slick-track { height: 100%; }

.slick-arrow { position: absolute; top: 50%; background: none; border: 0; width: 150px; z-index: 400; font-size: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }

.slick-arrow:hover { border: 0; background-color: inherit; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

.slick-arrow:before { position: absolute; content: ""; height: 1px; width: 130px; top: 50%; background-color: #ffffff; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.slick-arrow:hover:before { width: 80px; }

.slick-prev { left: 30px; background: url(../images/icon--arrow-prev.png) no-repeat left center; }

.slick-prev:before { left: 10px; }

.slick-next { right: 30px; background: url(../images/icon--arrow-next.png) no-repeat right center; }

.slick-next:before { right: 10px; }

.slick-dots { width: 50%; top: calc(100% + 20px); left: 25%; position: absolute; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; margin-left: 0; }

.slick-dots li { display: inline-block; }

.slick-dots li button { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; width: 12px; height: 12px; padding: 0; margin: 0 10px; border: 0px solid #ffffff; background-color: #5f9f0a; font-size: 0; }

.slick-dots li.slick-active button { background-color: #ffffff; width: 30px; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; }

/* #Back to top
================================================== */
#back-to-top { display: none; position: fixed; z-index: 9999; width: 35px; height: 33px; cursor: pointer; background-color: rgba(102, 102, 102, 0.7); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; top: auto; right: 20px; bottom: 20px; left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }

#back-to-top:before { height: 0; }

#back-to-top.show { display: block; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

#back-to-top:hover { background-color: #202020; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

#back-to-top i.icon--backtotop { background: url(../images/icon--arrow-backtotop.svg) no-repeat center center; display: block; width: 100%; height: 100%; background-size: 15px; }

/* #box layout
================================================== */
div[class*="sty__boxc"] { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

div[class*="sty__boxc"] .box { position: relative; overflow: hidden; margin-bottom: 20px; }

.sty__3slide .title h2 { color: #a5cb12; font-size: 6rem; font-style: italic; font-weight: 500; display: inline-block; margin-right: 20px; text-transform: uppercase; }

.sty__3slide .title h3 { color: #ffffff; display: inline-block; font-size: 4.2rem; }

.sty__col3box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

.sty__col3box .box { width: calc(33.33% - 30px); margin-bottom: 75px; }

.sty__col3box .wrap { background-color: #000000; }

.sty__col3box .photo { position: relative; }

.sty__col3box .photo img { width: 100%; }

.sty__col3box .photo:before { position: absolute; content: ""; height: 1px; width: 100%; left: 0; top: 100%; background: url(../images/line-green.jpg) no-repeat center center; background-size: 100% auto; }

.sty__col3box .text { padding: 30px 20px 20px; text-align: center; }

.sty__col3box .detail { padding: 0 0px; }

.sty__col3box .speed { color: #f1058d; padding-bottom: 15px; }

.sty__col3box .speed span { font-size: 3rem; font-family: "Kanit", sans-serif; }

.sty__col3box .link { padding: 0 0px; margin-bottom: -50px; }

.sty__col3box .link a { width: 100%; height: 60px; display: block; background: url(../images/bg--btn1.jpg) repeat-x center center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #000000; line-height: 1.2; }

.sty__col3box .link a:hover { color: rgba(0, 0, 0, 0.7); }

.sty__col3box .link a span { font-family: "Kanit", sans-serif; font-weight: 700; font-size: 5rem; letter-spacing: -3px; margin-right: 10px; }

.sty__col3box .link a._btn-readmore { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; }

.sty__col3box .slick-dots { top: calc(100% + 40px); }

/* #Header
================================================== */
header { background-color: #000000d9; padding: 10px 0; border-bottom: 1px solid #cfd709; position: absolute; width: 100%; z-index: 999; top: 0; left: 0; }

header .container { width: 1440px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; }

header .logo { width: 100px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

header .menu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; }

header .menu li { margin: 0 15px; }

header .menu a:before { background-color: #a5cb12; position: absolute; content: ""; height: 1px; width: 0; left: 0; bottom: 0; -webkit-transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; -moz-transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; -o-transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; -ms-transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; }

header .menu a:hover:before, header .menu a.active:before { width: 100%; }

header .menu a.active { color: #a5cb12; }

header .social ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: end; justify-content: flex-end; }

header .social li { margin-left: 10px; }

header .social a { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background-color: #a5cb12; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 40px; height: 40px; }

header .social a:hover { background-color: #ffffff; }

header .social img { height: 26px; }

header.fix_top { position: fixed; padding: 6px 0 5px; }

header.fix_top .logo { width: 80px; }

header.fix_top .menu a { font-size: 1.6rem; }

header.fix_top .social img { height: 20px; }

header.fix_top .social a { width: 30px; height: 30px; }

.mobilemenu { display: none; }

.sec_mobilemenu { display: none; }

/* #footer
================================================== */
footer { background: url(../images/line-green.jpg) no-repeat top center #3b4143; background-size: 100% auto; }

footer .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

footer .col1 { width: 280px; }

footer .col2 { width: calc(100% - 280px); }

footer .hotline { padding-top: 60px; position: relative; }

footer .hotline:before { position: absolute; content: ""; height: 100px; width: 90px; left: -45px; top: 25px; background: url(../images/logo--footeraisfibre.png) no-repeat top center; background-size: 100% auto; }

footer .hotline .row1 { color: #dae508; font-family: "Kanit", sans-serif; font-style: italic; font-size: 5rem; line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }

footer .hotline .row2 { font-size: 3.2rem; }

footer .hotline .row3 a { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; }

footer .hotline .row3 img { width: 30px; margin-right: 10px; }

footer .wrap__footermenu { padding-top: 60px; padding-bottom: 30px; }

footer .wrap__footermenu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: end; justify-content: flex-end; }

footer .wrap__footermenu ul a { color: #a5cb12; font-size: 2rem; margin-left: 40px; }

footer .wrap__footermenu ul a:hover { color: #ffffff; }

footer .wrap__footermenu ul a:before { background-color: #ffffff; position: absolute; content: ""; height: 1px; width: 0; left: 0; bottom: 0; -webkit-transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; -moz-transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; -o-transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; -ms-transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; transition: all 0.4s cubic-bezier(1, 0, 0.58, 1) 0s; }

footer .wrap__footermenu ul a:hover:before { width: 100%; }

footer .wrap__copyright { text-align: right; padding-bottom: 60px; }

/* # Newsletter
================================================== */
.wrap__newsletter input { text-align: center; margin-bottom: 1px; }

.wrap__newsletter .subject { text-align: right; }

.wrap__newsletter .wrap--loading { position: absolute; width: 320px; font-size: 1.2rem; display: none; }

.wrap__newsletter .wrap--loading.active { display: block; }

.wrap__newsletter .wrap--loading .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }

.wrap__newsletter .wrap--loading svg { width: 40px; }

/* #Main slide -- fullpage
================================================== */
.sec__banner { z-index: 1; padding-top: 79px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.sd__mainbanner { position: relative; }

.sd__mainbanner .box { text-align: center; width: 100%; }

.sd__mainbanner .box img { margin: auto; width: 100%; max-width: 1600px; }

/* #Home
================================================== */
.sec__maincontent--home { padding-top: 52px; padding-bottom: 120px; }

.sec__maincontent--home:before { position: absolute; content: ""; height: 300px; width: 100%; left: 0; top: 0; background: url(../images/bg--shadowtop.png) no-repeat top center; }

.sec__package, .sec__accessories, .sec__listpackage, .sec__listservice, .sec__maincontent-aisplaybox, .sec__listaccessories { padding-bottom: 120px; }

.sec__package .title, .sec__accessories .title, .sec__listpackage .title, .sec__listservice .title, .sec__maincontent-aisplaybox .title, .sec__listaccessories .title { margin-bottom: 60px; }

.sd__package { margin-left: -30px; margin-right: -30px; }

.sd__package .box { padding: 0 30px 30px 30px; }

.sd__package .wrap { background-color: #000000; }

.sd__package .photo { position: relative; }

.sd__package .photo img { width: 100%; }

.sd__package .photo:before { position: absolute; content: ""; height: 1px; width: 100%; left: 0; top: 100%; background: url(../images/line-green.jpg) no-repeat center center; background-size: 100% auto; }

.sd__package .text { padding: 30px 20px 20px; text-align: center; }

.sd__package .detail { padding: 0 0px; }

.sd__package .speed { color: #f1058d; padding-bottom: 15px; }

.sd__package .speed span { font-size: 3rem; font-family: "Kanit", sans-serif; }

.sd__package .link { padding: 0 0px; margin-bottom: -50px; }

.sd__package .link a { width: 100%; height: 60px; display: block; background: url(../images/bg--btn1.jpg) repeat-x center center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #000000; line-height: 1.2; }

.sd__package .link a:hover { color: rgba(0, 0, 0, 0.7); }

.sd__package .link a span { font-family: "Kanit", sans-serif; font-weight: 700; font-size: 5rem; letter-spacing: -3px; margin-right: 10px; }

.sd__package .slick-dots { top: calc(100% + 40px); }

.sec__accessories { z-index: 10; padding-top: 0px; }

.sd__accessories { margin-left: -30px; margin-right: -30px; }

.sd__accessories .box { padding: 0 30px 30px 30px; }

.sd__accessories .photo { position: relative; }

.sd__accessories .photo img { width: 100%; }

.sd__accessories .text { padding: 20px 20px 20px; text-align: center; }

.sd__accessories .detail { padding: 0 0px 10px; font-size: 2.8rem; font-family: "Kanit", sans-serif; }

.sd__accessories .link { padding: 0 0px; }

.sd__accessories .link a { width: 100%; height: 60px; display: block; background: url(../images/bg--btn1.jpg) repeat-x center center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #000000; line-height: 1.2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-size: 2rem; font-family: "Kanit", sans-serif; padding-top: 5px; }

.sd__accessories .link a:hover { color: rgba(0, 0, 0, 0.7); }

.sd__accessories .slick-dots { top: calc(100% + 0px); }

.sec__bannerpromo { padding-bottom: 120px; }

.sec__bannerpromo .container { text-align: center; }

.sec__bannerpromo img { margin: auto; }

.sec__whyais { background: url(../images/bg--checklocation.png) no-repeat top center #000; margin-bottom: 120px; }

.sec__whyais:before { position: absolute; content: ""; height: 20vw; width: 100%; left: 0; top: 100%; background: url(../images/bg--shadowtop.png) no-repeat top center; }

.sec__whyais:after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: url(../images/bg--checklocation-green.png) no-repeat left bottom; z-index: 0; }

.sec__whyais .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

.sec__whyais .container .col1 { width: 40%; z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: end; align-items: flex-end; }

.sec__whyais .container .col1 img { margin-left: -10vw; margin-top: 80px; }

.sec__whyais .container .col2 { width: 60%; z-index: 11; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: end; align-items: flex-end; -webkit-box-pack: start; justify-content: flex-start; }

.sec__whyais .container .col2 h3 { text-align: left; color: #FFFFFF; font-family: "Kanit", sans-serif; font-size: 2.8rem; }

.sec__whyais .container .col2 h4 { text-align: left; color: #a5cb12; font-family: "Kanit", sans-serif; font-size: 5.8rem; margin-left: -42px; }

.sec__whyais .container .detail { padding-bottom: 30px; }

.sec__whyais .container .link { margin-bottom: -29px; font-size: 2rem; }

/* #Contact us
================================================== */
.sec__maincontent-contactus .title { text-align: center; }

.sec__maincontent-contactus .detail { max-width: 800px; margin: auto; text-align: center; padding-bottom: 10px; }

.sec__maincontent-contactus .contactinfo { color: #f20591; font-size: 2.6rem; text-align: center; }

.sec__maincontent-contactus .contactinfo a { color: #f20591; }

.sec__maincontent-contactus .contactinfo a:before { position: absolute; content: ""; height: 1px; width: 0; left: 0; bottom: 0; background-color: #f20591; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; -webkit-transform: none; transform: none; }

.sec__maincontent-contactus .contactinfo a:hover:before { width: 100%; }

.sec__contactform { max-width: 800px; margin: auto; padding-top: 60px; padding-bottom: 120px; }

.sec__contactform #request { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

.sec__contactform label.error { color: #dc1b35; font-size: 0.8em; padding: 5px 0 0; position: absolute; top: 0; right: 0; }

.sec__contactform .row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; margin-bottom: 10px; position: relative; }

.sec__contactform .subject { width: 100%; text-align: left; padding: 0 20px 0 0; }

.sec__contactform .inputfield { width: 100%; }

.sec__contactform .-pass .inputfield { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

.sec__contactform .-pass .wrap_verify { width: 80px; background-color: #efefef; padding-top: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; }

.sec__contactform .-pass .wrap_pass { width: calc(100% - 90px); }

.sec__contactform .-btn button[value="Submit"] { text-transform: uppercase; width: calc(50% - 5px); margin-right: 10px; float: left; background-color: #f20591; color: #FFFFFF; border: 0; }

.sec__contactform .-btn button[value="Reset"] { text-transform: uppercase; width: calc(50% - 5px); float: left; border: 0; background-color: #333; color: #FFFFFF; }

.sec__contactform .-name { width: calc(50% - 20px); }

.sec__contactform .-phone { width: calc(50% - 20px); }

.sec__contactform .-remark { font-size: 1.4rem; text-align: left; }

.sec__contactform .-message textarea { max-width: 100%; width: 100% !important; }

.custom-select { position: relative; }

.custom-select select { display: none; }

.custom-select .select-hide { display: none; }

.custom-select .select-selected { background-color: #ffffff; border: 1px solid #172625; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 10px 10px 10px; text-align: left; font-size: 1.4rem; line-height: 1.6; color: #FFFFFF; }

.custom-select .select-selected:after { position: absolute; content: ""; height: 30px; width: 30px; right: 5px; top: 8px; background: url(../images/icon--select.svg) center center no-repeat; background-size: 40px auto; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.custom-select .select-selected.select-arrow-active:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.custom-select .select-items { position: absolute; border: 1px solid #ccc; background-color: #fdfdfd; top: calc(100% - 1px); left: 0; right: 0; z-index: 99; box-shadow: 2px 2px 4px 0px #f1f1f1; padding: 5px; }

.custom-select .select-items div { color: #FFFFFF; padding: 8px 16px; cursor: pointer; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.custom-select .select-items div:hover { font-weight: bold; background-color: #f1f1f1; }

.custom-select .same-as-selected { font-weight: bold; }

/* #Map
================================================== */
.sec__map .wrap__map { height: 35vw; }

.sec__map #map-canvas { height: 100%; }

.sec__map #product-right { padding: 20px 12px 20px 10px; text-align: center; }

.sec__map #product-right img { margin-bottom: 15px; width: 120px; }

/* #Gallery
================================================== */
#page__gallery .sec__maincontentpage { padding-bottom: 50px; }

#page__gallery #sec__gallery { padding-bottom: 40px; }

.filter-button-group { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: start; align-items: flex-start; -webkit-box-pack: center; justify-content: center; flex-flow: wrap; padding: 0 0 30px; }

.filter-button-group button { background: none; border: 0; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; display: inline-block; width: auto; font-size: 1.6rem; height: 30px; margin: 0 7px; padding: 5px 10px; position: relative; margin-bottom: 15px; }

.filter-button-group button:hover { color: #ffffff; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; }

.filter-button-group button.active { color: #ffffff; }

.filter-button-group button:before { content: ""; z-index: -1; width: 100%; height: 0%; background: #FFFFFF; bottom: 0; left: 0; position: absolute; -webkit-transition: height 250ms; transition: height 250ms; }

.filter-button-group button:hover:before, .filter-button-group button.active:before { height: 100%; }

.box_gallery-list .box { width: 20%; padding: 5px; position: relative; }

.box_gallery-list .box img { width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=80); -webkit-opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.box_gallery-list .box ._detail { position: absolute; top: 0; left: 10%; width: 80%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; color: #ffffff; z-index: 110; font-size: 1.6rem; line-height: 1.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.box_gallery-list .box a { display: block; border: 0; background-color: #000000; padding: 0; }

.box_gallery-list .box a:before { border: 1px solid rgba(255, 255, 255, 0); z-index: 99; width: calc(100% - 2px); height: calc(100% - 2px); top: 0; left: 0; background: none; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

.box_gallery-list .box a:hover:before { border: 1px solid white; -webkit-transform: scale(0.8); transform: scale(0.8); }

.box_gallery-list .box a:hover img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }

.box_gallery-list .box a:hover ._detail { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

/* #Package
================================================== */
.sec__listpackage, .sec__listaccessories { padding-top: 120px; }

.sec__maincontent-aisplaybox .title img { margin: 0 auto 30px; display: block; }

.sec__maincontent-aisplaybox h2 { font-family: "Kanit", sans-serif; font-weight: bolder; font-size: 6rem; margin-bottom: 10px; }

.sec__maincontent-aisplaybox h3 { color: #FFFFFF; }

.sec__maincontent-aisplaybox .detail-photo { text-align: center; }

.sec__maincontent-aisplaybox .detail-photo img { margin-bottom: 30px; }

/* #
================================================== */
.sec__listaccessories .sty__col3box .wrap { background-color: inherit; }

.sec__listaccessories .sty__col3box .photo:before { display: none; }

.sec__listaccessories .sty__col3box .detail { font-size: 2.8rem; }

.sec__content-package-detail { padding-top: 60px; }

.sec__content-package-detail .detail-photo { text-align: center; }

.sec__content-package-detail .detail-photo img { margin-bottom: 30px; }

.sec__remark-package { padding-bottom: 60px; }

.sec__remark-package .wrap__box { font-size: 1.6rem; }

.sec__remark-package .wrap__box .box { overflow: hidden; max-height: 0; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; padding: 0 30px; background-color: #3b4143; }

.sec__remark-package .wrap__box .box.active { max-height: 2000px; padding: 45px 30px 30px; }

.sec__remark-package .wrap__box a { color: #a5cb12; }

.sec__remark-package .wrap__box ol { margin-bottom: 20px; }

.sec__remark-package .wrap__box ol li { padding-left: 10px; }

.sec__remark-package .wrap__box ul { list-style-type: disc; margin-bottom: 20px; }

.sec__remark-package .wrap__box ul li { padding-left: 10px; }

.sec__remark-package .wrap__nav { margin-bottom: 40px; }

.sec__remark-package .wrap__nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; margin-left: 0; padding-left: 0; }

.sec__remark-package .wrap__nav ul li { margin: 0 5px; }

.sec__remark-package .wrap__nav ul li a { display: inline-block; color: #000000; font-weight: bold; background-color: #000000; color: #FFFFFF; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 8px 45px 5px 30px; position: relative; }

.sec__remark-package .wrap__nav ul li a:before { position: absolute; content: ""; height: 20px; width: 20px; right: 20px; top: calc(50% - 9px); background: url(../images/icon--arrowdropdown.svg) no-repeat center center; background-size: 35px auto; z-index: 10; -webkit-transform: none; transform: none; }

.sec__remark-package .wrap__nav ul li a:hover { background-color: #67a50e; }

.sec__remark-package .wrap__nav ul li a.active { background-color: #67a50e; }

.sec__remark-package .wrap__nav ul li a.active:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.sec__remark-package .wrap__nav ul li a.btn-clickregister { background-color: #f20591; color: #FFFFFF; padding-right: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; }

.sec__remark-package .wrap__nav ul li a.btn-clickregister img { width: 25px; margin-top: -1px; margin-right: 5px; }

.sec__remark-package .wrap__nav ul li a.btn-clickregister:before { display: none; }

.sec__remark-package .wrap__nav ul li a.btn-clickregister:hover { background-color: #ff6cc3; }

.sec__content-accessories-detail, .sec__content-package-detail, .sec__content-whyais, .sec__content-howtopay { padding-top: 120px; }

.sec__content-accessories-detail h2, .sec__content-package-detail h2, .sec__content-whyais h2, .sec__content-howtopay h2 { font-family: "Kanit", sans-serif; font-size: 3rem; color: #FFFFFF; margin-bottom: 10px; text-transform: uppercase; }

.sec__content-accessories-detail h3, .sec__content-package-detail h3, .sec__content-whyais h3, .sec__content-howtopay h3 { font-size: 5rem; font-weight: bold; color: #a5cb12; }

.sec__content-accessories-detail .detail, .sec__content-package-detail .detail, .sec__content-whyais .detail, .sec__content-howtopay .detail { padding-top: 30px; }

.sec__content-accessories-detail .detail .photo, .sec__content-package-detail .detail .photo, .sec__content-whyais .detail .photo, .sec__content-howtopay .detail .photo { text-align: center; }

.sec__content-accessories-detail .detail .photo img, .sec__content-package-detail .detail .photo img, .sec__content-whyais .detail .photo img, .sec__content-howtopay .detail .photo img { margin-bottom: 20px; }

.sec__content-accessories-detail .detail-photo, .sec__content-package-detail .detail-photo, .sec__content-whyais .detail-photo, .sec__content-howtopay .detail-photo { text-align: center; padding-top: 60px; }

.sec__content-accessories-detail .detail-photo img, .sec__content-package-detail .detail-photo img, .sec__content-whyais .detail-photo img, .sec__content-howtopay .detail-photo img { margin-bottom: 30px; }

.sec__content-whyais .detail, .sec__content-howtopay .detail { text-align: center; color: #ccc; }

.sec__content-whyais .detail strong, .sec__content-howtopay .detail strong { color: #FFFFFF; }

.sec__content-whyais h4, .sec__content-howtopay h4 { font-family: "Kanit", sans-serif; font-size: 3rem; font-weight: bold; }

.sec__content-whyais h5, .sec__content-howtopay h5 { color: #FFFFFF; font-family: "Kanit", sans-serif; font-size: 2.2rem; }

.sec__content-whyais .photo1, .sec__content-howtopay .photo1 { max-width: 800px; margin: 0 auto 60px; }

.sec__content-whyais .photo1 img, .sec__content-howtopay .photo1 img { width: 100%; }

.sec__content-whyais .wrap__youtube, .sec__content-howtopay .wrap__youtube { max-width: 800px; margin: 0 auto 10px; padding-top: 30px; }

.sec__content-whyais .wrap__youtube iframe, .sec__content-howtopay .wrap__youtube iframe { width: 100%; height: 480px; }

.sec__content-whyais .note, .sec__content-howtopay .note { font-size: 0.8em; text-align: center; }

.sec__content-whyais .box, .sec__content-howtopay .box { padding-bottom: 30px; }

.sec__content-whyais .photo, .sec__content-howtopay .photo { padding-bottom: 60px; }

.sec__content-whyais .cl-pink, .sec__content-howtopay .cl-pink { color: #f20591; }

.sec__content-whyais .cl-green, .sec__content-howtopay .cl-green { color: #a5cb12; }

.sec__content-support { padding-top: 120px; }

.sec__content-support h5 { font-size: 2.8rem; text-align: left; font-family: "Kanit", sans-serif; font-weight: 500; color: #dae508; margin-top: 20px; }

.sec__content-support b { font-weight: 500; }

.sec__content-support .row { padding-bottom: 60px; }

.sec__content-support .row .title { text-align: left; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid #cfd709; }

.sec__content-support .row .title h2 { display: inline-block; font-family: "Kanit", sans-serif; }

.sec__content-support .row .title h3 { display: inline-block; font-family: "Kanit", sans-serif; color: #FFFFFF; }

.sec__content-support .row .box .qua { padding-left: 40px; position: relative; padding-top: 9px; font-size: 1.2em; cursor: pointer; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.sec__content-support .row .box .qua:before { position: absolute; content: "Q."; height: 100%; width: 100%; left: 0; top: 0; color: #a5cb12; font-family: "Kanit", sans-serif; font-size: 3rem; }

.sec__content-support .row .box .ans { padding-left: 40px; padding-right: 40px; position: relative; max-height: 0; padding-top: 0; overflow: hidden; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; background-color: #3b4143; font-family: "Kanit", sans-serif; font-weight: 200; }

.sec__content-support .row .box.active .qua { color: #a5cb12; }

.sec__content-support .row .box.active .ans { max-height: 1500px; padding: 20px 40px; }

.sec__content-support .tab-border { border: 1px solid #000; margin-bottom: 20px; margin-top: 10px; }

.sec__content-support .tab-border th { background-color: #000; padding: 5px 10px; }

.sec__content-support .tab-border td { padding: 5px 10px; }

.sec__content-support .tab-border th, .sec__content-support .tab-border td { border-bottom: 1px solid #000; }

.sec__content-support .tab-border th.LRBd, .sec__content-support .tab-border td.LRBd { border-left: 1px solid #000; border-right: 1px solid #000; height: 50px; }

.sec__content-support .config .title { border: 0; margin-bottom: 0; padding-top: 20px; color: #dae508; }

.sec__content-support .download { padding-bottom: 120px; }

.sec__content-support .download a { margin-right: 10px; }

.sec__content-howtopay ul { margin: 0 auto 20px; display: inline-block; }

.sec__content-howtopay ul li { text-align: left; }

/*# sourceMappingURL=main.css.map */