@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
@import url(https://cdn.jsdelivr.net/gh/eunchurn/NanumSquareNeo@0.0.6/nanumsquareneo.css);

.r  {font-weight: 300;}
.b  {font-weight: 500;}
.eb {font-weight: 700;}
.h  {font-weight: 800;}

/*------------------------------------------------------------------------------------------*/
/* 1. Defaults & Reset of specific styles across browsers */
/*------------------------------------------------------------------------------------------*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::-webkit-scrollbar {width:5px;height:5px;}
::-webkit-scrollbar-track { background-color:#efefef; }
::-webkit-scrollbar-thumb { background: #ccc; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }
::-webkit-scrollbar-thumb:active { background: #aaa; }
::-webkit-scrollbar-button { display: none; }

html {scroll-behavior: smooth;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, blockquote, th, td {margin: 0;padding: 0;direction: ltr;}
body {margin-top: env(safe-area-inset-top);padding: 0;color:#333;font-size: 1em;overflow-x: hidden;font-family:'Kanit', 'NanumSquareNeo', 'AppleSDGothicNeo-Regular';-webkit-font-smoothing: antialiased;}
p {line-height: 25px;}
.row img {height: auto;max-width: 100%;}

ul.game_list>li>div>img {height: auto;aspect-ratio: 16 / 9;width: 100%;object-fit: cover;background-color: #eee;border-radius: 5px;border: 1px solid rgba(0, 0, 0, 0.05);}

a {text-decoration: none;line-height: inherit;-webkit-transition: opacity 0.3s ease-out;-moz-transition: opacity 0.3s ease-out;-o-transition: opacity 0.3s ease-out;transition: opacity 0.3s ease-out;color: #333;}
a:hover {color: #4A91E5;}
iframe {border: 0 !important;}
.parallax-window {min-height: 400px;background: transparent;}
figure {margin: 0;}

#wrapper {position: relative;}

/*------------------------------------------------------------------------------------------*/
/* INPUT ELEMENTS                                                                           */
/*------------------------------------------------------------------------------------------*/
input, textarea {
  border: 1px solid #e1e1e1;
  padding: 10px;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  transition: all .3s linear;
  border-radius: 3px;
  font-family:'Kanit', 'NanumSquareNeo', 'AppleSDGothicNeo-Regular';
}

input {height: 40px;margin: 3px 0;outline: none;line-height: normal;}
input[type="submit"] {cursor: pointer;border-style: solid;border-width: 2px;padding-top: 0;padding-bottom: 0;}
select {border: 1px solid #e1e1e1;height: 40px;padding: 5px;}
select, option, button {font-family: 'Kanit', 'NanumSquareNeo', 'AppleSDGothicNeo-Regular';}
input:focus, textarea:focus, select:focus {border: 1px solid #4A91E5;background-color: #eee;}
*:focus {outline: none;}

/*------------------------------------------------------------------------------------------*/
/* TABLE                                                                                    */
/*------------------------------------------------------------------------------------------*/

table {border-spacing:0;border:0;border-collapse:collapse;}
th {padding:7px;border-bottom:1px solid #ddd;white-space:nowrap;}
td {padding:7px;border-bottom:1px dotted #ddd;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:hidden;}

/*------------------------------------------------------------------------------------------*/
/* LAYOUT ELEMENTS                                                                          */
/*------------------------------------------------------------------------------------------*/

section {clear: both;overflow: hidden;}
.row {max-width: 1245px;margin: 0 auto;position: relative;}
.no-padding-bottom .row, .no-padding-bottom div, .no-padding-bottom.row {padding-bottom: 0;}
.no-padding-top.row, .no-padding-top div {padding-top: 0;}
.big-padding-top {padding-top: 75px !important;}
.big-padding-bottom {padding-bottom: 85px !important;}
[class*='col-'] {float: left;}
#clients .col-2-3 [class*='col-'] {padding: 0;}
.clearfix:after {content: "";display: table;clear: both;}
.col-1 {width: 100%;}
.col-2 {width: 50%;}
.col-3 {width: 33.33%;}
.col-4 {width: 25%;}
.col-5 {width: 20%;}
.col-6 {width: 16.6666666667%;}
.col-7 {width: 14.2857142857%;}
.col-8 {width: 12.5%;}
.col-9 {width: 11.1111111111%;}
.col-10 {width: 10%;}
.col-11 {width: 9.09090909091%;}
.col-12 {width: 8.33%;}
.col-2-3 {width: 100%;}
.col-3-4 {width: 75%;}
.col-9-10 {width: 90%;}
.col-61 {width: 61.8%;}
.col-38 {width: 38.2%;}

ul.list li {
  display: block;
  float: left;
  width: calc(20% - 8px);
  margin-right: 10px;
  padding-top:5px;padding-bottom:26px;
  transition: opacity .3s ease-in;
}
ul.list li:hover {
  filter: opacity(0.9);
  cursor: pointer;
  padding-top:0px;padding-bottom:31px;
}
ul.list li:hover span.live-quiz-game-bullet {top: 15px;} 
ul.list li:nth-child(5n) { margin-right: 0px; }
ul.list li p.title {font-weight: bold;font-size: 1.1em;}

/*------------------------------------------------------------------------------------------*/
/* HEADER LAYOUT                                                                            */
/*------------------------------------------------------------------------------------------*/

#header {
  padding: calc(10px + env(safe-area-inset-top)) 10px 10px 10px;
  margin-top: calc(0px - env(safe-area-inset-top));
  overflow: visible;z-index: 500;width: 100%;position: absolute;
}
#header .row {padding: 0;}
#header li {display: inline-block;list-style: none; margin: 0;}
#header_language {display:none;width: 100%;height:46px;}

#logo {float: left;line-height: 50px;width: 50px;margin-left: 0px;}
#logo h1, #logo h2 {display: inline-block;}
#banner #logo h1 {font-size: 3em;margin-right: 10px;font-weight: 900;padding: 0;}
#logo h2 {font-size: 2em;padding: 0;}
#logo img {max-width: 36px;max-height: 36px;vertical-align: middle;margin-right: 15px;margin-top: 5px;}
.nav-solid #logo #banner-logo {display: none;}
.nav-solid #logo #navigation-logo {display: inline-block;}

div.sticky-head, section.sticky-head {
  position:sticky;
  top:calc(0px - env(safe-area-inset-top));
  padding-top: calc(20px + env(safe-area-inset-top));
  z-index:200;
  background-color:#fff;
}
div.without-navigation-header {
  position: fixed;width:100%;text-align:center;
  background-color:#fff;border-bottom: 1px solid rgba(150, 150, 150, .1);
  padding: calc(0px + env(safe-area-inset-top)) 0 0 0;
  margin: calc(0px - env(safe-area-inset-top)) 0 0 0;
  z-index: 400;
}
div.without-navigation-header i.fa-angle-left {
  display:none;position:absolute;margin-top:18px;margin-left:5px;
  font-size:32px;cursor:pointer;color:rgba(150,150,150,0.5);
}
div.without-navigation-header img.logo {width:54px;margin:32px;}

#header aside {position: absolute;right: 0;float: left; z-index: 501;}
#header nav ul {text-transform: uppercase;}
#header nav a {line-height: 50px;display: block;padding: 0 10px;font-size: 0.9em;}
#header nav a:hover {opacity: 0.6;}
#header.nav-solid [class*='col-'] {padding: 0 10px;}
#header.nav-solid {background: #fff;box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);left:0;}
#header.nav-solid nav a, #header.nav-solid .social-icons a {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#header.nav-solid nav a:hover {opacity: 1;}
#header.nav-solid .social-icons a {opacity: 0.5;}
#header.nav-solid .social-icons a:hover {opacity: 1;color: #e4473c;}
#nav-trigger {display: none;text-align: right;}
#nav-trigger span {
  display: inline-block;
  width: 38px;
  color: #111;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 22px;
  text-align: center;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#nav-trigger span:after {font-family: "fontAwesome";display: inline-block;width: 38px;line-height: 54px;content: "\f0c9";}
#nav-trigger span.open:after {content: "\f00d";}
#nav-trigger span:hover, .nav-solid #nav-trigger span.open:hover, .nav-solid #nav-trigger span:hover {opacity: 0.6;}
#nav-trigger span.open, #nav-trigger span.open:hover {color: #111;}
.nav-solid #nav-trigger span.open:hover {color: #999;}
.nav-solid #nav-trigger span {color: #999;opacity: 1;}
nav#nav-mobile {position: relative;display: none;}
nav#nav-mobile ul {
  display: none;list-style-type: none;position: absolute;left: 0;right: 0;
  margin-top: 0px;margin-left: -20px;margin-right: -20px;
  padding-top: 10px;padding-bottom: 10px;
  text-align: center;background-color: #fff;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
nav#nav-mobile ul:after {display: none;}
nav#nav-mobile li {margin: 0 20px;float: none;text-align: left;border-bottom: 1px solid #e1e1e1;}
nav#nav-mobile li:last-child {border-bottom: none;}
.nav-solid nav#nav-mobile li {border-top: 1px solid #e1e1e1;border-bottom: none;}
nav#nav-mobile a {
  display: block;
  padding: 12px 10px;
  width: 100%;
  height: auto;
  line-height: normal;
  display: block;
  border-bottom: none !important;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
nav#nav-mobile a:hover {background: #fafafa;opacity: 1;}
#header .col-4 {text-align: right;}
.social-icons a:hover, .social-icons img:hover {opacity: 0.6;cursor:pointer;}
.social-icons span {display: none;}





img {vertical-align: top;}
a img {border: none;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
a img:hover {opacity: 0.7;}

/*------------------------------------------------------------------------------------------*/
/* 3. Fonts */
/*------------------------------------------------------------------------------------------*/

h1 {padding: 20px 0;font-size: 1.6em;}
h2 {padding: 14px 0;}
h3 {padding: 10px 0;font-size: 2em;}
h4 {padding: 7px 0;}
h5 {padding: 7px 0;}
h6 {padding: 7px 0;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.section-heading {padding: 0 0 15px 0;}
.section-subtitle {font-size: 1.2em;padding-top: 0;}
.section-heading h3 {font-size: 1.2em;font-weight: bold;color: #ccc;letter-spacing: 2px;padding-bottom: 0;}
font.separator {color: rgba(100, 100, 100, 0.5) !important;padding:0 3px;}

/*------------------------------------------------------------------------------------------*/
/* 4. Banner */
/*------------------------------------------------------------------------------------------*/

#banner-content.row {padding-top: 70px;padding-bottom: 10px;}
#banner .section-heading:before {content: "";display: block;width: 30px;height: 5px;margin-top: 30px;}

/*------------------------------------------------------------------------------------------*/
/* Sections */
/*------------------------------------------------------------------------------------------*/

main#content {margin-top: calc(70px - env(safe-area-inset-top));}

section#pagetitle {font-size:1.6em;font-weight:bold;line-height: 1.8em;}
section#pagetitle:after {
  background: rgba(71,141,226,0.5);
  content: "";
  display: block;
  width: 30px;
  height: 5px;
  margin-top: 20px;
  margin-bottom: 40px;
}
section#pagetitle p {margin-bottom: 15px;text-transform: uppercase;padding-top: calc(0px + env(safe-area-inset-top));}
section#pagetitle span {
  font-size: 0.6em;
  color: gray;
  text-transform: uppercase;
}
section#pagetitle span.more {
  display: block;
  position: absolute;
  right: 10px;
  margin-top: -36px;
  text-align: right;
}
section#pagetitle span.more a {
  padding: 10px;
  border: 2px solid #333;
}
section#pagetitle span.more a:hover {
  border: 2px solid #888;
  color: #888;
}


.introduction img.featured {padding: 55px 0 0 0;}
.creator:hover {filter: opacity(70%);cursor: pointer;}
.testimonial {padding: 15px;}
blockquote {position: relative;}
.testimonial img {max-height: 120px;border-radius: 250em;}
.testimonial footer {padding-top: 12px;line-height: 1.6em;}
.testimonial.classic img {display: inline-block;margin-bottom: 0px;}
.testimonial.classic q {display: block;}
.testimonial.classic footer:before {display: block;content: "";width: 30px;height: 4px;margin: 10px auto 15px auto;background-color: #e4473c;}
.testimonial.bigtest {padding-top: 0;}
.testimonial.bigtest q {font-size: 22px;}



#landing-footer {clear: both;margin-top: 50px;padding-bottom: 80px;border-top: 1px solid rgba(50, 50, 50, 0.2);}
#landing-footer .row {padding: 0;}
#landing-footer p {margin: 0;}
#landing-footer ul {list-style: none;text-align: right;}
#landing-footer li {display: inline-block;}

#copyright {white-space:nowrap;font-size: 0.9em;}
#landing-footer .social-icons {text-align:right;white-space:nowrap;}
#landing-footer .social-icons img {width:24px;height:24px;margin-right:10px;cursor:pointer;}

/* Scroll Up */

#scrollUp {
  bottom: 0px;right: 0px;
  width: 70px;
  height: 80px;
  margin-bottom: -10px;
  padding: 0 5px 20px 5px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  -webkit-transition: margin-bottom 150ms linear;
  -moz-transition: margin-bottom 150ms linear;
  -o-transition: margin-bottom 150ms linear;
  transition: margin-bottom 150ms linear;
}
#scrollUp:hover {margin-bottom: 0;}
#scrollUp:before {
  background: #ccc;
  font-family: "fontawesome";
  font-size: 2.4em;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  color: #fff;
  width: 45px;
  height: 45px;
  display: inline-block;
  line-height: 45px;
  content: "\f106";
  opacity: 1;
  border-radius: 20%;
}
#scrollUp.isCircle {right:18px;bottom:18px;}
#scrollUp.isCircle:before {border-radius:50%;} /* FOR IOS */

/*Preloader*/

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff; /* change if the mask should have another color then white */
  z-index: 99999; /* makes sure it stays on top */
}

#status {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 50%; /* centers the loading animation horizontally one the screen */
  top: 50%; /* centers the loading animation vertically one the screen */
  background-position: center;
  margin: -55px 0 0 -55px; /* is width and height divided by two */
  text-align: center;
}

/*------------------------------------------------------------------------------------------*/
/* RESPONSIVE ELEMENTS                                                                      */
/*------------------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------------------*/
/* BUTTON STYLE                                                                             */
/*------------------------------------------------------------------------------------------*/

a.btn {
  border:1px solid #999;
  width: auto !important;
  font-size: 0.825em;
  font-weight: bold;
}
a.btn:hover {
  background-color: #999;
  color: white !important;
}

#header a.btn {
  padding:7px 15px 11px 15px;
  line-height: 47px;
}

/*------------------------------------------------------------------------------------------*/
/* SIGN ZONE                                                                                */
/*------------------------------------------------------------------------------------------*/

#header aside>ul.signzone>li>img {
  width:52px;height:52px;
  max-width:52px;max-height:52px;
  border-radius:50%;cursor:pointer;
  vertical-align: middle;
  border:5px solid #ddd;
  transition:border .4s ease-in-out;
  object-fit: cover;
}
#header aside>ul.signzone>li>img:hover {border:0 solid #eee;}

ul#person_menu {z-index:9999;width: 200px;}
ul#person_menu li {
  width: 100%;
  display:block;
  text-align: left;
  line-height:30px;
  padding: 6px 0 6px 30px;
  cursor:pointer;
  background-color:#fff;
  border-bottom: 1px solid #eee;
  font-size:1em;
}
ul#person_menu li i {
  color: transparent !important;
  width: 15px;
}
ul#person_menu li span.list {
  display:inline-block;
  position:absolute;
  padding-left:10px;
  font-size: 0.9em;
}
ul#person_menu li:first-child {
  padding: 0;
  padding-top: 5px;
  font-weight: bold;
  font-size: 1.2em;
  height:60px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
ul#person_menu li:hover {
  background-color:#fafafa;
  font-weight: bold;
}
ul#person_menu li:first-child:hover {background-color:#fff;}
ul#person_menu li:last-child {padding-bottom:20px;border:0;border-bottom-left-radius: 14px;border-bottom-right-radius: 14px;}
ul#person_menu li:first-child span {display:inline-block;vertical-align:middle;max-width:110px;margin-top:-2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
ul#person_menu img {display:inline-block;vertical-align:middle;width:42px;height:42px;max-width:42px;max-height:42px;object-fit: cover;border:0;border-radius:50%;margin-left:10px;margin-right:5px;}