@charset "UTF-8";
/*========================================================
  Name: GONTA
  Author: GONTA
  Version: 0.1
========================================================*/
/*=======================================================
  Start Table Of Content
========================================================*/
/*=======================================================
  01. Fonts
  02. Variables
  03. Default
  04. Loading
  05. Header
  06. Footer
  07. Page Not Found
  08. Breadcrumb
  09. Slideshow
  10. Col1
  11. Col2
  12. Col3
  13. Col4
  14. Col5
  15. Col6
  16. Col7
  17. Col8
  18. Col9
  19. Col10
  20. Col11
  21. Col12
  22. Col13
  23. Col14
  24. Col15
  25. Col16
  26. Col17
  27. Col18
  28. Col19
  29. Col20
  30. Col21
  31. Col22
  32. Col23
  33. Empty Search
========================================================*/
/*=======================================================
  End Table Of Content
========================================================*/
/*=======================================================
  01. Fonts
========================================================*/

@import url('define.css?v=0.1.4');

/*=======================================================
  02. Variables
========================================================*/

:root {
  --font-default: "Inter", sans-serif;
  --font-primary: "Open Sans", sans-serif;
  --font-size-default: 1rem;
  --font-weight-default: 400;
  --color-default:#555555;
  --white:#ffffff;
  --black:#000000;
  --black-primary:#150a33;
  --black-secondary:#131313;
  --back-tertiary:#2C2C2E;
  --blue:#0053b6;
  --red:#d50000;
  --gray:#f5f5f5;
  --gray-primary:#666666;
  --gray-secondary:#e6e6e6;
  --gray-tertiary:#adadad;
  --gray-quaternary:#767676;
  --gray-quinary:#D9D9D9;
  --container-default:60rem;
  --container:56.688rem;
  --w-loading:2.5rem;
  --h-loading:2.5rem;

  --gradient-default: linear-gradient(270deg, #2377E0 0%, #134A9E 100%);
  --gradient-primary: linear-gradient(270deg, #EC0000 0%, #B70000 100%);
}

/*=======================================================
  03. Default
========================================================*/

*, *::before, *::after {box-sizing:border-box;}

html,
body {background:var(--white);font-family:var(--font-default);color:var(--color-default);font-size:var(--font-size-default);font-weight:var(--font-weight-default);margin:0;padding:0;-webkit-text-size-adjust:100%;-webkit-font-smoothing:subpixel-antialiased;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variation-settings:normal;}
body {text-rendering:optimizelegibility;overflow-x:hidden;overflow-y:auto;}

a {text-decoration:none;outline:none;transition:all 0.3s ease-out;}

ul, li {list-style:none;padding:0;margin:0;}

input, textarea {outline:none;}

figure {margin:0;}

h1, h2, h3, h4, h5, h6 {margin:0;}

.wrap {width:calc(100% - 2.5rem);max-width:var(--container-default);margin:0 auto;position:relative;}
.container {width:calc(100% - 2.5rem);max-width:var(--container);margin:0 auto;position:relative;}

.clearfix {clear:both;}

.submit a {background:var(--gradient-default);font-size:.875rem;color:var(--white);text-transform:uppercase;padding:.3rem 1.5rem;overflow:hidden;position:relative;display:inline-block;z-index:1;}
.submit a::before {content:"";background:var(--gradient-primary);position:absolute;top:0;left:-100%;bottom:0;width:100%;z-index:-1;transition:all .4s ease;}
.submit a:hover::before {left:0;}

.visually-hidden {display: none !important;}

.taj {text-align:justify;}

@media only screen and (min-width:600px) {
  html,
  body {line-height:1.75rem;}
  .mb-display {display:none !important;}
}

@media only screen and (max-width:599px) {
  html,
  body {line-height:1.5rem;}
  .dt-display {display:none !important;}

  .submit {margin-top:.5rem;}
}

/*=======================================================
  04. Loading
========================================================*/

#loading {background:var(--white);width:100%;height:100vh;position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;}
#loading img {width:var(--w-loading);height:var(--h-loading);}

/*=======================================================
  05. Header
========================================================*/

.progress {position:fixed;top:0;left:0;height:2px;background:var(--gradient-default);transition:all linear 0.1s;min-width:0%;z-index:3;}
.progress-backup {width:0;height:3px;background:var(--gradient-default);transition:all linear 0.1s;min-width:0%;}

header {background:var(--white);transition:all .8s;position:fixed;top:0;left:0;right:0;z-index:9998;top: 0px;border-bottom:2px solid var(--blue);}
header .wrap {position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:1.2rem 0;}
header .wrapper {display:flex;flex-direction:row;align-items:center;gap:1.4rem;}

header .collapse {font-size:.875rem;position:relative;display:flex;flex-direction:row;align-items:center;}
header .collapse #lang {display:flex;flex-direction:row;align-items:center;cursor:pointer;}
header .collapse #lang span {color:var(--black);text-align:center;padding:0 .5rem;}
header .collapse #lang .arrow {transition: all .25s ease;}

header .collapse .options-list {background:var(--white);position:absolute;top:2.7rem;right:0;padding:.4rem .8rem;box-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.4);-webkit-box-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.4);transition:all .36s ease-out;opacity:0;z-index:1;min-width:8rem;border-radius:.5rem;}
header .collapse .options-list li {display:flex;flex-direction:row;align-items:center;transform:translateX(10px);transition:all .24s ease-out;transition-delay:.1s;opacity:0;cursor:pointer;}
header .collapse .options-list li a {color:var(--color-default);}
header .collapse .options-list li.selected a {color:var(--blue);}

header .collapse .options-list.selected {opacity:1;}
header .collapse .options-list.selected li {transform:translateX(0);opacity:1;}

header .collapse .options-list li figure {width:1.6rem;max-height:1.1rem;margin-right:.5rem;}
header .collapse .options-list li img {width:100%;height:100%;object-fit:cover;}

header .collapse #nav_user {display:flex;flex-direction:row;align-items:center;font-weight:500;position:relative;}

.logo a img {height:2rem;}

@media only screen and (min-width:600px) {
  .logo-m {display:none;}

  header .collapse #nav_user {margin-right:1rem;padding-right:1rem;}
  header .collapse #nav_user::after {content:"";position:absolute;top:calc(50% - .375rem);right:0;background:var(--black);width:1px;height:.75rem;}
  header .collapse #nav_user a {text-transform:uppercase;padding:0 .2rem;}
  header .collapse #nav_user a span {background:linear-gradient(to right, var(--blue) 50%, var(--black) 50%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-size:200%, 100%;background-position:100%;transition:.5s;}
  header .collapse #nav_user a:hover span {background-position:0;}

  header .collapse #nav_user > div {margin-left:.5rem;}

  #menu {display:none;}
  
  .menu {display:none;}
}

@media only screen and (max-width:599px) {
  .logo {margin-left:1.75rem;}

  .menu .logo-m {margin-left:2rem;}
  .menu .logo-m a img {height:2rem;}
  .menu.selected .logo-m a img {height:2rem;}

  header .collapse .options-list li {padding-bottom:.3rem;}

  header .collapse #nav_user {margin-right:.5rem;padding-right:.5rem;}
  header #nav_user img,
  header #lang > img:first-child {width:1.25rem;}

  #menu {cursor:pointer;position:fixed;left:1.25rem;top:1.75rem;width:1.25rem;height:1.25rem;z-index:10000;transition:all .8s;}
  #menu div span {background:var(--blue);height:.125rem;display:block;border-radius:30px;-webkit-transition-duration:300ms;transition-duration:300ms;}
  #menu div span:nth-child(1) {width:.625rem;}
  #menu div span:nth-child(2) {margin:.3rem 0;width:1.25rem;}
  #menu div span:nth-child(3) {width:1.25rem;}
  #menu.selected {top:1.75rem !important;}
  #menu.selected span:nth-child(1) {background:var(--black);-webkit-transform:rotate3d(0, 0, 1, 45deg);transform:rotate3d(0, 0, 1, 45deg);position:absolute;top:6px;left:-2px;width:1.25rem;}
  #menu.selected span:nth-child(2) {display:none;}
  #menu.selected span:nth-child(3) {background:var(--black);-webkit-transform:rotate3d(0, 0, 1, -45deg);transform:rotate3d(0, 0, 1, -45deg);position:absolute;top:6px;left:-2px;width:1.25rem;}
  #menu.moved {top:-100px;}

  .menu {background:var(--white);position:fixed;top:0;bottom:0;left:0;right:0;padding-top:1.2rem;transition:.5s;z-index:9999;display:none;overflow:hidden;}
  .menu.selected {display:inline-block;}
  .menu ul li {margin:1.5rem 0;}
  .menu ul li a {color:var(--black-primary);font-size:1.5rem;font-weight:500;}
  .menu ul li.m-user a {color:var(--blue);position:relative;display:inline-block;}
  .menu ul li.m-user > a:first-child {padding-right:.7rem;margin-right:.5rem;}
  .menu ul li.m-user > a:first-child::after {content:'';background:var(--blue);position:absolute;top:.2rem;right:0;bottom:.2rem;width:2px;transform:skew(-20deg);}

  .menu .social {font-size:1.1rem;display:flex;flex-direction:row;align-items:center;}
  .menu .social figure {margin-left:.5rem;}
  .menu .social figure img {height:2.5rem;}

  .menu.selected .download {bottom:0;}
  .menu .download {background:var(--gray);color:var(--black);font-size:1.25rem;font-weight:600;margin-top:1.5rem;text-align:center;position:fixed;left:0;right:0;bottom:-100%;padding:1.5rem 0;transition:all .5s;}
  .menu .download > div:first-child {margin-bottom:1rem;}
  .menu .download img {max-width:142px;width:45%;}
  .menu .download img:hover {opacity:.8;}
  .menu .download > div:last-child > a:first-child img {margin-right:10px;}
}

/*=======================================================
  06. Footer
========================================================*/

footer {background:var(--black);color:var(--gray-primary);font-size:.875rem;}
footer a {color:var(--gray-primary);transition:all .3s ease-in-out;}

footer .social {display:flex;flex-direction:row;align-items:center;}
footer .social figure {background:var(--gray-primary);padding:.4rem;border-radius:50%;margin-left:.6rem;}
footer .social figure img {filter:brightness(0) saturate(100%);height:.9rem;transition:.5s;}
footer .social figure:hover {background:var(--white);}

footer .copyright {margin-top:.5rem;}

footer .widget a {color:var(--gray-tertiary);transition:.5s;}
footer .widget a:hover {color:var(--white);}

@media only screen and (min-width:900px) {
  footer {padding:1.5rem 0;}
  footer .widget {display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
  footer .widget a {padding:0 1rem;position:relative;display:inline-block;line-height:normal;}
  footer .widget > a:first-child,
  footer .widget > a:last-child {display:contents;}

  footer .widget i {background:var(--gray-primary);width:1px;height:14px;}

  footer .social {position:absolute;bottom:0;right:0;}
}

@media only screen and (min-width:768px) and (max-width:899px) {
  footer {padding:2rem 0;}
  footer .widget a {text-align:left;float:left;}
  footer .widget i {display:none;}
  footer .widget a {width:25%;}

  footer .copyright {margin-bottom:.5rem;}
}

@media only screen and (max-width:767px) {
  footer {padding:2rem 0;}
  footer .widget a {text-align:left;float:left;}
  footer .widget i {display:none;}
  footer .widget a {width:50%;}

  footer .copyright {margin-bottom:.5rem;}
}

@media only screen and (max-width:299px) {
  footer .widget a {width:100%;}
}

/*=======================================================
  07. Page Not Found
========================================================*/

#page_not_found {color:var(--black);text-align:center;}
#page_not_found h1 {font-weight:600;margin:0;}
#page_not_found h2 {background:var(--gradient-default);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;margin:1rem 0;animation:zoomIn 1s ease-in both;}
#page_not_found div {margin-top:2rem;}
#page_not_found div a {background:var(--gradient-primary);color:var(--white);outline:0;line-height:1.7;text-transform:uppercase;border-radius:1.875rem;padding:.4rem 1.25rem;}

@media only screen and (min-width: 600px) {
  #page_not_found {margin:10rem 0 7rem 0;}
  #page_not_found h1 {font-size:2rem;line-height:2rem;}
  #page_not_found h2 {font-size:12rem;line-height:12rem;}
}
@media only screen and (max-width: 599px) {
  #page_not_found {padding:6rem 0;min-height:calc(100vh - 200px);}
  #page_not_found h1 {font-size:1.5rem;line-height:1.5rem;}
  #page_not_found h2 {font-size:7rem;line-height:8rem;}
}

/*=======================================================
  08. Breadcrumb
========================================================*/

.breadcrumb a {color:var(--gray-quaternary);position:relative;padding-right:.7rem;margin-right:.7rem;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;transition: all 0.6s ease;}
.breadcrumb a:not(:last-child)::after {content: "";position:absolute;top:calc(50% - 3px);right:0;border: solid #a3a3a3;border-width: 0 .094rem .094rem 0;display: inline-block;padding:2.5px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
.breadcrumb a:hover {color:var(--blue);}

.breadcrumb.normal {margin-top:2rem;}

@media only screen and (min-width:600px) {
  .breadcrumb {margin-top:7rem;}
}

@media only screen and (max-width:599px) {
  .breadcrumb {margin-top:5.5rem;}
}

/*=======================================================
  09. Slideshow
========================================================*/

#slideshow {color:var(--white);position:relative;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-position:center;-webkit-background-position:center;-moz-background-position:center;-o-background-position:center;}
#slideshow .slogan img {max-width:25rem;width:90%;}
#slideshow .widget {display:flex;flex-direction:row;}
#slideshow .widget > div {display:flex;flex-direction:column;justify-content:space-between;}
#slideshow .widget > div > a {padding-left:.5rem;}
#slideshow .widget > div > a:hover > img {opacity:.8;}

@media only screen and (min-width: 992px) {
  #slideshow {padding:10rem 0 5rem 0;}
  #slideshow .wrap {display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;}

  #slideshow .s-left {width:410px;margin-bottom:4rem;}
  #slideshow .s-right {width:420px;}

  #slideshow .mb-d {display:none !important;}
}

@media only screen and (max-width: 991px) {
  #slideshow {text-align:center;}
  #slideshow .s-left {max-width:410px;margin:0 auto 2rem auto;}
  #slideshow .widget {justify-content:center;margin-top:2rem;}

  #slideshow .dt-d {display:none !important;}
}

@media only screen and (min-width:600px) and (max-width: 991px) {
  #slideshow {padding:8rem 0 5rem 0;}
}

@media only screen and (min-width:600px) {
  #slideshow {background-image:url('../images/bg-slideshow.webp?v=0.0');}
  #slideshow .slogan-info {margin:1rem 0;}
}

@media only screen and (max-width:599px) {
  #slideshow {background-image:url('../images/bg-slideshow-mb.webp');padding:7rem 0 3rem 0;}

  #slideshow .slogan-info {margin-top:1rem;}
}

/*=======================================================
  10. Col1
========================================================*/

#col1 h3 {color:var(--black-primary);font-weight:700;text-transform:uppercase;}

#col1 .thumbnail {position:relative;z-index:2;}
#col1 .thumbnail .bg {background:url("../images/iphonex.webp") no-repeat;background-size: 100% 100%;position:absolute;top:-6px;;left:-6px;width:calc(100% + 11px);height:calc(100% + 20px);z-index:3;pointer-events:none;}

@media only screen and (min-width:768px) {
  #col1 h3 {font-size:1.75rem;line-height:2.2rem;}
}

@media only screen and (max-width:767px) {
  #col1 h3 {font-size:1.5rem;line-height:2rem;}
}

@media only screen and (min-width:600px) {
  #col1 ul {margin:5rem 0;}

  #col1 > .container > ul > li {display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
  #col1 > .container > ul > li:not(:last-child) {margin-bottom:3.125rem;}
  #col1 > .container > ul > li:nth-child(2n) {flex-direction:row-reverse;}

  #col1 > .container > ul > li:nth-child(2n-1) .inner-section {animation:fadeInLeft 1s ease-in both;}
  #col1 > .container > ul > li:nth-child(2n) .inner-section {animation:fadeInRight 1s ease-in both;}
}

@media only screen and (max-width:599px) {
  #col1 ul {margin:calc(3rem + 7px) 0;}

  #col1 > .container {width:100%;}
  #col1 > .container > ul > li {padding-left:1.5rem;padding-right:1.5rem;}
  #col1 > .container > ul > li:not(:last-child) {margin-bottom:3rem;}
  #col1 > .container > ul > li:nth-child(2n) {background:var(--gray);padding-top:calc(3rem + 7px);padding-bottom:3rem;}
  #col1 > .container > ul > li:nth-child(2n) .thumbnail .bg {background-image:url("../images/iphonex-.webp");}
  #col1 .thumbnail {margin:0 auto;}
  #col1 .thumbnail .bg {background-position:center;}
}

/*=======================================================
  11. Col2
========================================================*/

#col2 {color:var(--white);display:flex;flex-direction:column;justify-content:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-position:center;-webkit-background-position:center;-moz-background-position:center;-o-background-position:center;}
#col2 h2 {font-weight:700;line-height:normal;text-transform:uppercase;margin-bottom:1rem;}
#col2 h2 span {display:block;}

#col2 .slideshow .swiper-wrapper .swiper-slide img {height:100%;}

@media only screen and (min-width:768px) {
  #col2 {background-attachment:fixed;}
  @supports (-webkit-touch-callout: inherit) {
    #col2 {background-attachment:scroll;}
  }
  #col2 .slogan span {display:block;}
}

@media only screen and (min-width:600px) {
  #col2 {background-image:url('../images/bg-watch.webp?v=0.1');padding:3rem 0;}
  #col2 .container {display:flex;flex-direction:row;justify-content:space-around;align-items:center;}
  #col2 .s-right {width:251px;}
  #col2 h2 {font-size:2.188rem;}
}

@media only screen and (max-width:599px) {
  #col2 {background-image:url('../images/bg-watch-mb.webp?v=0.0');background-size:100% auto;background-position:0 100%;text-align:center;padding:2rem 0;}
  #col2 .container {display:flex;flex-direction:column;}
  #col2 h2 {font-size:1.75rem;}
  #col2 .s-right {margin-top:3rem;}
}

/*=======================================================
  12. Col3
========================================================*/

#col3 {background:var(--gray);}
#col3 .thumbnail {position:relative;z-index:2;}
#col3 .thumbnail .bg {background:url("../images/iphonex-.webp") no-repeat;background-size: 100% 100%;position:absolute;top:-6px;;left:-6px;width:calc(100% + 11px);height:calc(100% + 20px);z-index:3;pointer-events:none;}

#col3 .thumb img {max-width:25rem;width:90%;}

@media only screen and (min-width:600px) {
  #col3 {padding:5rem 0;}

  #col3 .container {display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
  #col3 .inner-section {animation:fadeInLeft 1s ease-in both;}
}

@media only screen and (max-width:599px) {
  #col3 {padding:calc(3rem + 7px) 0 3rem 0;}

  #col3 .thumbnail {margin:0 auto;}
  #col3 .thumbnail .bg {background-position:center;}
}

/*=======================================================
  13. Col4
========================================================*/

#col4 {background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-image:url('../images/bg.webp?v=0.0');text-align:center;}

@media only screen and (min-width:768px) {
  #col4 {background-attachment:fixed;height:450px;}
  @supports (-webkit-touch-callout: inherit) {
    #col4 {background-attachment:scroll;}
  }
}

@media only screen and (max-width:767px) {
  #col4 {height:300px;}
}

@media only screen and (min-width:500px) {
  #col4 {background-position:center;-webkit-background-position:center;-moz-background-position:center;-o-background-position:center;}
}

@media only screen and (max-width:499px) {
  #col4 {background-position:50% center;-webkit-background-position:45% center;-moz-background-position:45% center;-o-background-position:45% center;background-size:auto 200%;-webkit-background-size:auto 200%;-moz-background-size:auto 200%;-o-background-size:auto 200%;}
}

/*=======================================================
  14. Col5
========================================================*/

#col5 .thumbnail {position:relative;z-index:2;}
#col5 .thumbnail .bg {background:url("../images/iphonex.webp") no-repeat;background-size: 100% 100%;position:absolute;top:-6px;;left:-6px;width:calc(100% + 11px);height:calc(100% + 20px);z-index:3;pointer-events:none;}

#col5 .thumb img {max-width:25rem;width:90%;}
#col5 .widget {padding-top:.5rem;}
#col5 .widget .name {color:var(--black);margin-bottom:1rem;font-weight:700;font-size:21px;}
#col5 .widget .download img {max-width:142px;width:45%;}
#col5 .widget .download img:hover {opacity:.8;}
#col5 .widget .download > a:first-child img {margin-right:10px;}

@media only screen and (min-width:600px) {
  #col5 {margin:5rem 0;}
  #col5 .container {display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-direction:row-reverse;}
  #col5 .inner-section {animation:fadeInRight 1s ease-in both;}
}

@media only screen and (max-width:599px) {
  #col5 {margin:calc(3rem + 7px) 0 3rem 0;}
  #col5 .thumbnail {margin:0 auto;}
  #col5 .thumbnail .bg {background-position:center;}
}

/*=======================================================
  15. Col6
========================================================*/

#col6 {color:var(--white);height:240px;background-color:var(--black-secondary);text-align:center;position:relative;}
#col6::before {content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:url('../images/ic-quote.svg') no-repeat;background-position:center 3rem;-webkit-background-position:center 3rem;-moz-background-position:center 3rem;-o-background-position:center 3rem;z-index:0;}

#col6 .swiper {pointer-events:none;}
#col6 .swiper-button-next,
#col6 .swiper-button-prev {pointer-events:all;outline:none;}

#col6 .swiper-slide {display:flex;flex-direction:column;justify-content:center;padding:0 1.5rem;}
#col6 .swiper-slide p {font-size:1.5rem;font-weight:400;line-height:1.5rem;font-family:'UTM Bustamalaka';margin:2.5rem 0 1rem 0;}

@media only screen and (min-width:600px) {
  #col6::before {background-size:32px;-webkit-background-size:32px;-moz-background-size:32px;-o-background-size:32px;}

  #col6 .swiper-slide p > span {display:block;}
}

@media only screen and (max-width:599px) {
  #col6::before {background-size:20px;-webkit-background-size:25px;-moz-background-size:25px;-o-background-size:25px;}
}

/*=======================================================
  16. Col7
========================================================*/

#col7 {color:var(--black);margin-bottom:5rem;min-height:70vh;}
#col7 h1 {line-height:2.2rem;margin:1rem 0 .5rem 0;}
#col7 h3 {font-weight:700;font-size:1.2rem;margin:1rem 0;}
#col7 ul > li {margin:0;padding:0;display:flex;flex-direction:row;}
#col7 ul > li > div {width:100%;}

#col7 .datetime {color:var(--gray-primary);font-size:.75rem;}
#col7 .updated-datetime {display:none;}
#col7 .rule {color:var(--blue);}

#col7 .contact-us {margin:2.5rem 0;position:relative;padding-left:1rem;}
#col7 .contact-us::after {content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gray-secondary);}

#col7 .share-social {border-top:1px solid var(--gray-secondary);padding:1.2rem 0;display:flex;flex-direction:row;align-items:center;}
#col7 .share-social > div {font-weight:600;}
#col7 .share-social figure {margin-left:.7rem;}
#col7 .share-social figure img {width:30px;}

#col7 .circle {padding:0;}
#col7 .circle > li {list-style:disc;display:list-item;}

#col7 .square {padding:0;}
#col7 .square > li {list-style:square;display:list-item;}

#col7 .section {counter-reset:section;}
#col7 .section > li {counter-increment:section;}
#col7 .section > li::before {content:counter(section)".";margin-right:.2rem;}
#col7 .section.hiden > li::before {visibility:hidden;}

#col7 .sectionb {counter-reset:section;}
#col7 .sectionb > li {counter-increment:section;}
#col7 .sectionb > li::before {content:counter(section)".";font-weight:700;font-size:1.2rem;margin:1rem .2rem 1rem 0;}

#col7 .section1 {counter-reset:section1;padding:0;}
#col7 .section1 > li {counter-increment:section1;margin:0;padding:0;display:flex;flex-direction:row;}
#col7 .section1 > li::before {content:counter(section) "." counter(section1) ".";margin-right:.2rem;}

#col7 .section2 {counter-reset:section2;padding:0;}
#col7 .section2 > li {counter-increment:section2;margin:0;padding:0;display:flex;flex-direction:row;}
#col7 .section2 > li::before {content:counter(section) "." counter(section1) "." counter(section2) ".";margin-right:.2rem;}

#col7 .law {text-decoration:underline;font-style:italic;}

#col7 .small-image {cursor:zoom-in;}

#col7 .large-image {position:fixed;top:0;left:0;right:0;bottom:0;display:none;background:rgba(0,0,0,.9);overflow:auto;z-index:99999;}
#col7 .large-image > div {display:flex;flex-direction:column;justify-content:center;min-height:100vh;}
#col7 .large-image > div > div {max-width:var(--container);position:relative;margin:0 auto;}
#col7 .large-image .l-thumber {width:100%;height:auto;cursor:zoom-in;}
#col7 .large-image.selected {display:block;}

#col7 .large-image.selected .close {background:var(--black);padding:12px;border-radius:50%;position:fixed;cursor:pointer;z-index:1;}
#col7 .large-image.selected .close:hover {background:var(--white);}
#col7 .large-image.selected .close > img {width:12px;filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);position:relative;}
#col7 .large-image.selected .close:hover > img {filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);}

#col7 .large-image.selected .zoomin {background:var(--black);padding:7px;border-radius:50%;position:fixed;cursor:pointer;z-index:1;}
#col7 .large-image.selected .zoomin:hover {background:var(--white);}
#col7 .large-image.selected .zoomin > img {width:22px;filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);position:relative;}
#col7 .large-image.selected .zoomin:hover > img {filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);}

#col7 .large-image.selected .zoomout {background:var(--black);padding:7px;border-radius:50%;position:fixed;cursor:pointer;visibility:hidden;z-index:1;}
#col7 .large-image.selected .zoomout:hover {background:var(--white);}
#col7 .large-image.selected .zoomout > img {width:22px;filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);position:relative;}
#col7 .large-image.selected .zoomout:hover > img {filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);}

#col7 .icon {width:1.125rem;margin:0 .3rem;}

#col7 .hashtag {margin:2rem 0;}
#col7 .hashtag a {color:var(--gray-primary);font-size:.75rem;border:1px solid var(--gray-primary);border-radius:.2rem;padding:0 .5rem;margin-right:.5rem;margin-bottom:.5rem;display:inline-flex;white-space:nowrap;position:relative;overflow:hidden;}
#col7 .hashtag a:hover {background:var(--gray-primary);color:var(--white);}

#col7 figcaption {color:var(--gray-primary);font-size:.75rem;font-style:italic;text-align:center;}

#col7 table {border-collapse:collapse;width:100%;margin:1rem 0;font-size:.875rem;}
#col7 table td {border:1px solid var(--color-default);text-align:center;padding:.5rem 0;}

#col7 .ic-arrow {position:relative;padding:0 .5rem;}
#col7 .ic-arrow::after {content: "";border: solid var(--black);border-width: 0 .094rem .094rem 0;display: inline-block;padding: 3px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);position:absolute;bottom:5.5px;left:0;}
#col7 .row2 .note {text-align:center;font-size:.75rem;}

#col7 a {color:var(--blue);}

.col7-law figure {width:100%;max-width:750px;margin:1rem auto;}
.col7-law figure img {width:100%;}

.col7-faq figure {margin:0 auto;}
.col7-faq figure img {width:100%;}
.col7-faq .center {display:flex;flex-wrap:wrap;align-items:center;}

@media only screen and (min-width:768px) {
    .col7-faq figure {width:322px;}
}
@media only screen and (min-width:600px) and (max-width:767px) {
    .col7-faq figure {width:215.65px;}
}
@media only screen and (min-width:500px) and (max-width:599px) {
    .col7-faq figure {width:274.46px;}
}
@media only screen and (min-width:400px) and (max-width:499px) {
    .col7-faq figure {width:245.05px;}
}
@media only screen and (min-width:320px) and (max-width:399px) {
    .col7-faq figure {width:220.548px;}
}
@media only screen and (max-width:319px) {
    .col7-faq figure {width:205.845px;}
}

@media only screen and (min-width:600px) {
  #col7 h1 {font-size:1.75rem;}
  #col7 .row2 {display:flex;flex-direction:row;justify-content:space-around;align-items:center;}

  #col7 .large-image.selected .close {top:12px;right:12px;}
  #col7 .large-image.selected .zoomin {top:12px;right:53px;}
  #col7 .large-image.selected .zoomout {top:12px;right:53px;}
}

@media only screen and (max-width:599px) {
  #col7 h1 {font-size:1.5rem;}
  #col7 .row2 {text-align:center;}

  #col7 .share-social > div span {display:none;}

  #col7 .large-image.selected .close {top:12px;right:10px;}
  #col7 .large-image.selected .zoomin {top:12px;right:51px;}
  #col7 .large-image.selected .zoomout {top:12px;right:51px;}
}

/*=======================================================
  17. Col8
========================================================*/

#col8 h3 {color:var(--black-primary);font-weight:600;text-transform:uppercase;}
#col8 figure {z-index:1;}

@media only screen and (min-width:768px) {
  #col8 h3 {font-size:1.75rem;line-height:2.2rem;}
}

@media only screen and (max-width:767px) {
  #col8 h3 {font-size:1.5rem;line-height:2rem;}
}

@media only screen and (min-width:600px) {
  #col8 ul {margin:5rem 0;}
  #col8 > .container > ul > li {display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
  #col8 > .container > ul > li:not(:last-child) {margin-bottom:3.125rem;}
  #col8 > .container > ul > li:nth-child(2n) {flex-direction:row-reverse;}

  #col8.reverse > .container > ul > li:nth-child(2n-1) {flex-direction:row-reverse !important;}
  #col8.reverse > .container > ul > li:nth-child(2n) {flex-direction:row !important;}

  #col8 > .container > ul > li:nth-child(2n-1) .inner-section {animation:fadeInLeft 1s ease-in both;}
  #col8 > .container > ul > li:nth-child(2n) .inner-section {animation:fadeInRight 1s ease-in both;}
}

@media only screen and (max-width:599px) {
  #col8 ul {margin:3rem 0;}
  #col8 ul > li:not(:last-child) {margin-bottom:2.5rem;}
  #col8 figure {text-align:center;}
}

/*=======================================================
  18. Col9
========================================================*/

#col9 {text-align:center;background-position:center;-webkit-background-position:center;-moz-background-position:center;-o-background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-image:url('../images/bg-gps.webp?v=10');}

@media only screen and (min-width:768px) {
  #col9 {height:465px;}
}

@media only screen and (max-width:767px) {
  #col9 {height:300px;}
}

/*=======================================================
  19. Col10
========================================================*/

#col10 {text-align:center;background-position:center;-webkit-background-position:center;-moz-background-position:center;-o-background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-image:url('../images/bg-faq.jpg');}

#col10 form {position:relative;display:inline-flex;width:530px;max-width:100%;}
#col10 form input[type=text] {width:100%;border:transparent;background-color:var(--white);color:var(--black);outline:0;padding:.8rem 1.25rem .8rem 2rem;}
#col10 form input[type=text]::placeholder {color:#a6a6a6;}
#col10 form button {background:transparent;border:none;width:2.4rem;outline:0;position:absolute;top:0;bottom:0;cursor:pointer;}
#col10 form button img {width:1.1rem;}
#col10 form #ic_search {left:0;}
#col10 form #ic_close {right:0;display:none;}

#col10 #search-results {background:var(--white);position:absolute;top:2.5rem;left:0;right:0;z-index:1;}
#col10 #search-results li {text-align:left;border-bottom:1px solid var(--gray-secondary);padding:.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
#col10 #search-results li a {font-size:.875rem;color:var(--gray-quaternary);}

@media only screen and (min-width: 600px) {
  #col10 {padding:14.5rem 0 10rem 0;}
}

@media only screen and (max-width: 599px) {
  #col10 {padding:9rem 0 5rem 0;}
}

/*=======================================================
  20. Col11
========================================================*/

#col11 .desc {text-align:center;}

#col11 h2 {color:#2F363F;font-size:2.188rem;line-height:2.5rem;font-weight:700;margin-bottom:1rem;}

#col11 ul {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
}

#col11 ul li {border:1px solid var(--gray-secondary);}
#col11 h3 {font-size:1.25rem;font-weight:500;color:var(--back-tertiary);margin:1rem 0 .2rem 0;}
#col11 ul li:hover h3 {color:var(--blue);}
#col11 img {width:2.5rem;}
#col11 .info {color:var(--gray-quaternary);font-size:.875rem;font-weight:300;font-style:italic;letter-spacing:.5px;position:relative;}

@media only screen and (min-width: 768px) {
  #col11 ul li {
    width: calc(33.33333% - 2rem);
    padding: 3rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
  #col11 ul li {
    width: calc(33.33333% - 1.3333rem);
    padding: 3rem 0;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 400px) and (max-width: 599px) {
  #col11 ul li {width:calc(50% - 0.5rem);}
}

@media only screen and (max-width:399px) {
  #col11 ul li {width:100%;}
}

@media only screen and (min-width: 600px) {
  #col11 {margin:5rem 0;}
  #col11 .desc {margin-bottom:5rem;}
}

@media only screen and (max-width: 599px) {
  #col11 {margin:3rem 0;}
  #col11 ul li {padding: 2.5rem 0;margin-bottom:1rem;}
  #col11 .desc {margin-bottom:3rem;}
}

@media only screen and (min-width: 320px) and (max-width: 599px) {
  #col11 h2 span {display:block;}
}

/*=======================================================
  21. Col12
========================================================*/

#col12 {width:100%;overflow:hidden;position:relative;}
#col12 figure {
  position: absolute;
  background-image: url('../images/bg-before.jpg?v=12');
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

#col12 #divisor {
  background-image: url('../images/bg-after.jpg?v=12');
  background-size: cover;
  position: absolute;
  width: 50%;
  bottom: 0; height: 100%;}

#col12 #divisor::before,
#col12 #divisor::after {
  content: '';
  position: absolute;
  right: -1px;
  width: 2px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
}

#col12 #divisor::before {
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
}

#col12 #divisor::after {
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
}

#col12 #handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;}

#col12 #handle::before,
#col12 #handle::after {
  content: '';
  width:26px;
  height:50px;
  position: absolute;
  top:0;
}

#col12 #handle::before {
  background:#fff url('../images/ic-arrow-red-left.svg') no-repeat 10px center;
  left:0;
  border-top-left-radius:50px;
  border-bottom-left-radius:50px;
}

#col12 #handle::after {
  background:#fff url('../images/ic-arrow-red-right.svg') no-repeat 5px center;
  right:0;
  border-top-right-radius:50px;
  border-bottom-right-radius:50px;
}

#col12 input[type=range]{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  position: absolute;
  top: 50%; left: -25px;
  transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;}

#col12 input[type=range]:focus,
#col12 input[type=range]:active {
    border: none;
    outline: none;
}
#col12 input[type=range]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance:none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  outline: 10px solid rgba(255, 255, 255, .4);
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
#col12 input[type=range]::-moz-range-track {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  height:15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;
}

@media only screen and (min-width: 600px) {
  #col12 {padding-bottom:450px;}
}

@media only screen and (max-width: 599px) {
  #col12 {padding-bottom:300px;}

}

/*=======================================================
  22. Col13
========================================================*/

#col13 {color:var(--black);margin-bottom:5rem;min-height:70vh;}
#col13 h1 {color:var(--blue);line-height:2.2rem;margin:1rem 0;}

#col13 a {color:var(--black);}
#col13 a:hover {color:var(--blue);}

#col13 ul > li {padding:1rem 0;}
#col13 ul > li:not(:last-child) {border-bottom:1px solid var(--gray-secondary);}

#col13 ul > li .name {position:relative;}
#col13 ul > li .name::after {content:'';background:url("../images/ic-arrow-blue.svg?v=0.0") no-repeat;background-size: 100% 100%;width:.8rem;height:.8rem;position: absolute;top:calc(50% - .4rem);right:0;transition:all .25s ease;}
#col13 ul > li .name > a {width:calc(100% - 1.5rem);display:block;}
#col13 ul > li .name .livescore {font-weight:700;}
#col13 ul > li .name .livescore-live {color:var(--blue);}
#col13 ul > li .name .description {color:var(--black);}
#col13 ul > li .livescore-live .live {position:absolute;right: 0;top: 8px;width:14px;height:14px;}
#col13 ul > li .name .livescore-live span.name-live{position: relative;display: inline-block;padding-right: 22px;}
#col13 ul > li .name .livescore span.name-live{padding-right: 22px;}
#col13 ul > li .livescore .live .ping {position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background-color:#9ed500;opacity:.75;animation:ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;z-index:1;}
#col13 ul > li .livescore .live .dot {position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background-color:#9ed500;z-index:2;}
#col13 ul > li .name .description .countdown {color:var(--red);}
#col13 ul > li .name .description .countdown_ {color:var(--blue);display:flex;flex-direction:row;gap:.2rem;align-items:center;}
#col13 ul > li .name .description .countdown_ span {background:var(--blue);color:var(--white);display:flex;flex-direction:row;width:1.6rem;height:1.3rem;justify-content:center;align-items:center;}

@keyframes ping {
  0% {transform:scale(1);opacity:.75;}
  75%, 100% {transform:scale(2);opacity:0;}
}

#col13 .desc {color:#555;margin-top:1rem;display:none;transition:fadeIn 1s ease-out;}

#col13 .pagination {display:flex;flex-direction:row;justify-content:center;gap:.25rem;margin-top:1.5rem;}
#col13 .pagination a {border:1px solid var(--gray-secondary);width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;}
#col13 .pagination a.selected {background:var(--blue);border:1px solid var(--blue);color:var(--white);}

@media only screen and (min-width:600px) {
  #col13 .description {display:flex;flex-wrap:wrap;gap:.5rem;}
  #col13 .description i {display:none;}
  #col13 .description > div {position:relative;}
  #col13 .description > div:not(:last-child) {padding-right:.5rem;}
  #col13 .description > div:not(:last-child)::after {content:"";position:absolute;width:1px;height:60%;top:20%;right:0;background:var(--black);}
}

@media only screen and (max-width:599px) {
  #col13 .description {font-size:.875rem;width:calc(100% - 1.5rem);display:flex;flex-direction:column-reverse;gap:.5rem;margin-top:.75rem;}
  #col13 .description > div {display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
}

/*=======================================================
  23. Col14
========================================================*/

#col14 {text-align:center;background-position:center;-webkit-background-position:center;-moz-background-position:center;-o-background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-image:url('../images/bg-about-us.jpg?v=0.5');}

@media only screen and (min-width:768px) {
  #col14 {height:465px;}
}

@media only screen and (max-width:767px) {
  #col14 {height:300px;}
}

/*=======================================================
  24. Col15
========================================================*/

#col15 {color:var(--black);}
#col15 h1 {line-height:2.2rem;margin:1rem 0;}
#col15 h3 {font-size:1.5rem;font-weight:700;line-height:2.2rem;margin-bottom:1rem;}
#col15 h4 {font-size:1.125rem;line-height:1.5rem;font-weight:600;}
#col15 h5 {font-size:1.125rem;line-height:1.5rem;font-weight:400;}
#col15 .qr {margin:1rem 0;width:70%;max-width:12.5rem;}
#col15 .info {color:var(--black);text-align:center;}

#col15 .download {margin-top:1.5rem;}
#col15 .download > a:first-child img {margin-right:10px;}
#col15 .download img {max-width:142px;width:45%;}
#col15 .download img:hover {opacity:.8;}

@media only screen and (min-width:600px) {
  #col15 h1 {font-size:1.75rem;}
  #col15 .info {margin:5rem 0;}
}

@media only screen and (max-width:599px) {
   #col15 h1 {font-size:1.5rem;}
   #col15 .info {margin:3rem 0;}
}

/*=======================================================
  25. Col16
========================================================*/

#col16 {color:var(--black);margin-bottom:5rem;min-height:70vh;}
#col16 h1 {line-height:2.2rem;margin:1rem 0;}

#col16 a {color:var(--black);}
#col16 a:hover {color:var(--blue);}

#col16 ul > li {padding:1rem 0;}
#col16 ul > li:not(:last-child) {border-bottom:1px solid var(--gray-secondary);}

#col16 ul > li .name {position:relative;}
#col16 ul > li .name::after {content:'';background:url("../images/ic-arrow-blue.svg?v=0.0") no-repeat;transform:rotateZ(90deg);background-size: 100% 100%;width:.8rem;height:.8rem;position: absolute;top:.3rem;right:0;transition:all .25s ease;}
#col16 ul > li .name > a {width:calc(100% - 1.5rem);display:block;}

#col16 .desc {color:#555;margin-top:1rem;display:none;transition:fadeIn 1s ease-out;}

#col16 li.selected .name {font-weight:700;}
#col16 li.selected .name a {color:var(--blue);}
#col16 li.selected .name::after {transform:rotateZ(-90deg);}
#col16 li.selected .desc {display:block;}

/*=======================================================
  26. Col17
========================================================*/

#col17 {color:var(--black);margin-bottom:5rem;min-height:70vh;}
#col17 h1 {color:var(--blue);line-height:2.2rem;}
#col17 h2 {color:var(--back-tertiary);font-size:1rem;line-height:1.5rem;margin-bottom:1.25rem;}
#col17 h3 {color:var(--back-tertiary);font-size:1rem;font-weight:600;overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:.5s;line-height:1.5rem;}
#col17 h3:hover {color:var(--blue);}

#col17 ul {display:flex;flex-wrap:wrap;}
#col17 ul > li > a:first-child > figure {margin-bottom:1rem;}

#col17 .datetime {color:var(--gray-primary);font-size:.75rem;display:flex;flex-direction:row;justify-content:space-between;}
#col17 .datetime span {max-height:1.5rem;overflow:hidden;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;}

#col17 figure img {width:100%;height:auto;align-self:flex-start;object-fit:cover;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;}

#col17 form {position:relative;width:530px;max-width:100%;}
#col17 form input[type=text] {width: 100%;border:1px solid var(--black);background-color: var(--white);color:var(--black);outline: 0;padding:.8rem 1.25rem .8rem 2rem;}
#col17 form input[type=text]::placeholder {color:#a6a6a6;}
#col17 form button {background:transparent;border:none;width:2.4rem;outline:0;position:absolute;top:0;bottom:0;cursor:pointer;}
#col17 form button img {width:1.1rem;}
#col17 form #ic_search {left:0;}
#col17 form #ic_close {right:0;display:none;}

@media only screen and (min-width:768px) {
  #col17 ul {justify-content:flex-start;gap:1.5rem;}
  #col17 ul li {width: calc(33.33333% - 1rem);}
  #col17 figure:hover img {transform:scale(1.1);-webkit-transform:scale(1.1);}
}

@media only screen and (min-width:600px) and (max-width:767px) {
  #col17 ul {justify-content:flex-start;gap:1rem;}
  #col17 ul li {width:calc(50% - 0.5rem);}
}

@media only screen and (min-width:600px) {
  #col17 h1 {margin:1rem 0 2rem 0;}
  #col17 h3 {min-height:3rem;}
  #col17 figure {width:100%;height:0;padding-bottom:70%;overflow:hidden;}
}

@media only screen and (max-width:599px) {
  #col17 h1 {font-size:1.5rem;margin:1rem 0;}
  #col17 figure {width:100%;}
  #col17 ul li {width:100%;margin-bottom:1rem;}
}

/*=======================================================
  27. Col18
========================================================*/

#col18 {margin-bottom:3rem;}

#col18 h1 {color:var(--black);line-height:2.2rem;margin:1rem 0;}
#col18 h3 {color:var(--black);font-size:1rem;font-weight:700;margin:1rem 0;}

#col18 .desc {color:var(--black);}
#col18 .address,
#col18 .phone,
#col18 .mail {font-size:.875rem;display:flex;flex-direction:row;margin-bottom:.5rem;}
#col18 .address {align-items:flex-start;}
#col18 .phone,
#col18 .mail {align-items:center;}
#col18 .address img {margin-top:.5rem;margin-right:1rem;}
#col18 .phone img,
#col18 .mail img {margin-right:1rem;}
#col18 .address,
#col18 .phone a,
#col18 .mail a {color:var(--black);}

#col18 #contact_form label {color:var(--gray-quaternary);}
#col18 #contact_form input[type=text],
#col18 #contact_form input[type=tel],
#col18 #contact_form input[type=email],
#col18 #contact_form textarea {width:100%;color:var(--gray-primary);border:1px solid var(--gray-quinary);padding:.5rem;margin-bottom:.5rem;}

#col18 #contact_form input[type=submit] {background:var(--gradient-default);color:var(--white);text-transform:uppercase;border:none;padding:.5rem 3rem;margin-top:1rem;position:relative;}
#col18 #contact_form input[type=submit]:hover {background:var(--gradient-primary);}

#col18 #contact_form .error {font-size:.75rem;color:var(--red);}

@media only screen and (min-width:600px) {
  #col18 h1 {font-size:1.75rem;}

  #col18 .container ul {display:flex;flex-direction:row;justify-content:space-between;}
  #col18 .container ul > li {width:calc(50% - 2rem);}
}

@media only screen and (max-width:599px) {
   #col18 h1 {font-size:1.5rem;}

   #col18 #contact_form {margin-top:2.5rem;}
}

/*=======================================================
  28. Col19
========================================================*/

#col19 {color:var(--black);text-align:center;}

#col19 h3 {font-size:1rem;color:var(--back-tertiary);font-weight:500;overflow:hidden;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:normal;}

#col19 form {position:relative;display:inline-flex;width:530px;max-width:100%;margin-bottom:1.25rem;}
#col19 form input[type=text] {width: 100%;border:1px solid var(--black);background-color: var(--white);color:var(--black);outline: 0;padding:.8rem 1.25rem .8rem 2rem;}
#col19 form input[type=text]::placeholder {color:#a6a6a6;}
#col19 form button {background:transparent;border:none;width:2.4rem;outline:0;position:absolute;top:0;bottom:0;cursor:pointer;}
#col19 form button img {width:1.1rem;}
#col19 form #ic_search {left:0;}
#col19 form #ic_close {right:0;display:none;}

#col19 ul.data-results li:hover h3 {color:var(--blue);}

#col19 figure img {width:100%;height:auto;align-self:flex-start;object-fit:cover;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;}

#col19 .info {border-bottom:1px solid var(--gray-quinary);border-left:1px solid var(--gray-quinary);border-right:1px solid var(--gray-quinary);padding:1rem .5rem;}
#col19 .info > div {color:var(--gray-quaternary);font-size:.875rem;font-weight:300;font-style:italic;letter-spacing:.5px;}

#col19 #search-results {background:var(--white);position:absolute;top:2.5rem;left:0;right:0;z-index:1;}
#col19 #search-results li {text-align:left;border-bottom:1px solid var(--gray-secondary);padding:.5rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
#col19 #search-results li a {font-size:.875rem;color:var(--gray-quaternary);}
#col19 #search-results figure {width:3rem;}
#col19 #search-results li > a {width:calc(100% - 3.5rem);}

@media only screen and (min-width:768px) {
  #col19 ul.data-results {display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;}

  #col19 figure:hover img {transform:scale(1.1);-webkit-transform:scale(1.1);}
}

@media only screen and (min-width:600px) and (max-width:767px) {
  #col19 ul.data-results {display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;}
}

@media only screen and (min-width:600px) {
    #col19 {margin-bottom:5rem;}
    #col19 .data-results figure {width:100%;height:0;padding-bottom:65%;overflow:hidden;}
}

@media only screen and (max-width:599px) {
    #col19 {margin-bottom:1.25rem;}
    #col19 .data-results figure {width:100%;}
}

@media only screen and (min-width:350px) and (max-width:599px) {
  #col19 ul.data-results {display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
}

@media only screen and (max-width:349px) {
  #col19 ul.data-results {display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.5rem;}
}

/*=======================================================
  29. Col20
========================================================*/

#col20 {text-align:center;background-position:center;-webkit-background-position:center;-moz-background-position:center;-o-background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-image:url('../images/bg-luat-golf.jpg?v=0.5');}
#col20 .container {display:flex;justify-content:center;}

#col20 form {position:relative;display:inline-flex;width:530px;max-width:100%;}
#col20 form input[type=text] {width:100%;border:transparent;background-color:var(--white);color:var(--black);outline:0;padding:.8rem 1.25rem .8rem 2rem;}
#col20 form input[type=text]::placeholder {color:#a6a6a6;}
#col20 form button {background:transparent;border:none;width:2.4rem;outline:0;position:absolute;top:0;bottom:0;cursor:pointer;}
#col20 form button img {width:1.1rem;}
#col20 form #ic_search {left:0;}
#col20 form #ic_close {right:0;display:none;}

#col20 #search-results {background:var(--white);position:absolute;top:2.5rem;width:530px;max-width:100%;z-index:1;}
#col20 #search-results li {text-align:left;border-bottom:1px solid var(--gray-secondary);padding:.5rem 1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
#col20 #search-results li a {font-size:.875rem;color:var(--gray-quaternary);}
#col20 #search-results figure {width:3rem;}
#col20 #search-results figure img {width:100%;height:auto;align-self:flex-start;object-fit:cover;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;}
#col20 #search-results li > a {width:calc(100% - 3.5rem);}

@media only screen and (min-width: 600px) {
    #col20 {padding:14.5rem 0 10rem 0;}
}

@media only screen and (max-width: 599px) {
    #col20 {padding:9rem 0 5rem 0;}
}

@media only screen and (min-width:600px) {
    #col20 {margin-bottom:5rem;}
}

@media only screen and (max-width:599px) {
    #col20 {margin-bottom:1.25rem;}
}

/*=======================================================
  30. Category
========================================================*/

.category h3 {font-size:1.5rem !important;}
.category ul li a {color:var(--black) !important;}
.category ul li.selected a {color:var(--blue) !important;font-weight:700;}
.category ul li:hover a {color:var(--blue) !important;font-weight:700;}

@media only screen and (min-width:600px) {
  .l-container {width:calc(100% - 11rem);float:left;border-right:1px solid var(--gray-secondary);padding-right:2rem;margin-right:2rem;}
  .category {width:9rem;float:right;}
  .category ul {display:flex;flex-direction:column;}
}

@media only screen and (max-width:599px) {
  .l-container {border-bottom:1px solid var(--gray-secondary);}
}

@media only screen and (min-width:320px) and (max-width:599px) {
  .category ul {display:block;}
  .category ul li {width:calc(50% - 2rem);float:left;}
  .category ul li:nth-child(2n) {float:right;}
}

@media only screen and (max-width:219px) {
  .category ul {display:flex;flex-direction:column;}
}

/*=======================================================
  31. Col22
========================================================*/

#col22 {text-align:center;background-position:center;-webkit-background-position:center;-moz-background-position:center;-o-background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-image:url('../images/bg-contact-us.webp');}

@media only screen and (min-width:768px) {
    #col22 {height:465px;}
}

@media only screen and (max-width:767px) {
    #col22 {height:300px;}
}

/*=======================================================
  32. Col23
========================================================*/

#col23 {color:var(--black);margin-bottom:5rem;min-height:70vh;}
#col23 h1 {font-weight:600;line-height:2rem;}
#col23 h3 {font-weight:700;font-size:1.2rem;margin:1rem 0;}

#col23 .datetime {color:var(--gray-quaternary);font-size:.875rem;margin-bottom:.5rem;}
#col23 .thumbnail {width:100%;margin:1.5rem 0 .5rem 0;}

#col23 .content {margin-top:1rem;}
#col23 .content ul {margin-left:1rem;}
#col23 .content ul li {list-style:disc;display:list-item;margin-bottom:.25rem;}

#col23 .l-container > ul > li:first-child {padding:.5rem 0 1.5rem 0;}
#col23 .l-container > ul > li:not(:first-child) {padding:1.5rem 0;}
#col23 .l-container > ul > li:not(:last-child) {border-bottom:1px solid var(--black);}

@media only screen and (min-width:600px) {
  #col23 h1 {font-size:1.5rem;}
}

@media only screen and (max-width:599px) {
  #col23 h1 {font-size:1.25rem;}
}

/*=======================================================
  33. Empty Search
========================================================*/

.empty-search {color:var(--color-default);text-align:center;}
.empty-search img {margin:2rem 0;}
.empty-search h4 {font-size:1.2rem;font-weight:500;}