:root{
    --bg-1: #fff;
    --bg-2: #333;
    --bg-3: #c34671; /* #f1f1f1 */
    --text-1: #fff;
    --text-2: #111;
    --text-3: #f3f3f3 /* green */
    --border: #888;
    
    --font-1: Verdana;
    --font-2: sans-serif;
    
    --font-size-s: 16px;
    --font-size-m: 19px;
    --font-size-l: 23px;
    
    --font-weight-s: 300;
    --font-weight-m: 500;
    --font-weight-l: 800;
}

html,body{font-family:var(--font-1), var(--font-2); font-size:var(--p-font-size); color:var(--text-2); background:var(--bg-1);}
h1{font-size:34px;}h2{font-size:29px;}h3{font-size:26px;}h4{font-size:23px;}h5{font-size:19px;}h6{font-size:17px;}
* {box-sizing: border-box;} 
a{text-decoration:none; font-size:var(--font-size-m);}
button {
  touch-action: manipulation;
  transition: all 0.3s;
}
/* button */
.g-btn-1{padding:8px 16px; font-size:var(--font-size-m); font-weight:var(--font-size-m); text-align:center; cursor:pointer; color:var(--text-1); background:var(--bg-2); border:solid 2px var(--border);}
.g-btn-1:hover{box-shadow:0px 3px 2px #111; color:inherit; background:inherit;}

.g-btn-2{padding:8px 16px; font-size:var(--font-size-m); font-weight:var(--font-size-m); text-align:center; cursor:pointer; color:var(--text-1); background:var(--bg-2); border:solid 2px var(--border); border-radius:7px;}
.g-btn-2:hover{box-shadow:0px 3px 2px #111; color:inherit; background:inherit;}

.g-btn-3{padding:8px 16px; font-size:var(--font-size-m); font-weight:var(--font-size-m); text-align:center; cursor:pointer; color:var(--text-1); background:var(--bg-2); border:none; border-radius:12px;}
.g-btn-3:hover{box-shadow:0px 3px 2px #111; color:inherit; background:inherit;}

.g-btn-4{
  background: #222;
  border: 2px solid transparent;
  border-radius: 23px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  transition: all 0.3s;
  padding: 12px 31px;
  border: 2px solid #fff;
  cursor: pointer;
}
.g-btn-4:hover {
  background: #111;
  color: #fff;
}

.g-btn-active{background:var(--bg-1);color:var(--text-2);}
/* ul */

.g-ul-1{padding:1px; margin:1px;}
.g-ul-1 li{padding:8px 17px; border-bottom:groove 2px var(--border);}
.g-ul-1 li:last-child{border-bottom:none;}

.g-ul-2{padding:1px; margin:1px;}
.g-ul-2 li{padding:8px 17px;}
/* input */

.g-input-1{padding:8px; width:100%; font-size:var(--font-size-m); font-weight:var(--font-weight-m); } 
.g-input-2{padding:8px; width:100%; font-size:var(--font-size-m); font-weight:var(--font-weight-m); border-radius:11px; border:solid 1px var(--border);} 
.g-input-3{padding:8px; width:100%; font-size:var(--font-size-m); font-weight:var(--font-weight-m); border:none; border-bottom:solid 1px var(--border);} 
/* col */

.g-row{display:table;clear:both;content:"";}
.g-contain{padding:17px;}
.g-col{float:left; width:100%; display:inline-block; margin-bottom:12px;}
.g-col.s1{width:8.333333%;}.g-col.s2{width:16.666666%;}.g-col.s3{width:24.999999%;}.g-col.s4{width:33.333333%;}
.g-col.s5{width:41.666666%;}.g-col.s6{width:49.999999%;}.g-col.s7{width:58.333333%;}.g-col.s8{width:66.666666%;}
.g-col.s9{width:74.999999%;}.g-col.s10{width:83.333333%;}.g-col.s11{width:91.666666%;}.g-col.s12{width:99.999999%;}

@media (min-width:600px) {
    .g-col.m1{width:8.333333%;}.g-col.m2{width:16.666666%;}.g-col.m3{width:24.999999%;}.g-col.m4{width:33.333333%;}
.g-col.m5{width:41.666666%;}.g-col.m6{width:49.999999%;}.g-col.m7{width:58.333333%;}.g-col.m8{width:66.666666%;}
.g-col.m9{width:74.999999%;}.g-col.m10{width:83.333333%;}.g-col.m11{width:91.666666%;}.g-col.m12{width:99.999999%;}

}

@media (min-width:990px) {
.g-col.l1{width:8.333333%;}.g-col.l2{width:16.666666%;}.g-col.l3{width:24.999999%;}.g-col.l4{width:33.333333%;}
.g-col.l5{width:41.666666%;}.g-col.l6{width:49.999999%;}.g-col.l7{width:58.333333%;}.g-col.l8{width:66.666666%;}
.g-col.l9{width:74.999999%;}.g-col.l10{width:83.333333%;}.g-col.l11{width:91.666666%;}.g-col.l12{width:99.999999%;}

}
/* bar */

.g-bar-1{background-color:var(--bg-2);overflow: hidden;}.g-bar-1 a{float:left;display:block;color:var(--text-1);text-align:center;padding:15px 16px;text-decoration:none;font-size:var(--font-size-m);}
.g-bar-1 a:hover{background:var(--bg-3);color:var(--text-3);}.g-bar-1 a.active{background:var(--bg-1);color:#222;}
.g-bar-1 .icon{display:none;}

.g-bar-2{background-color:#fff;color:#222;overflow: hidden;}.g-bar-2 a{float:left;display:block;color:#222;text-align:center;padding:16px 17px;text-decoration:none;font-size:var(--font-size-m); }
.g-bar-2 a:hover{color:var(--bg-3);}.g-bar-2 a.active{background:#222;color:#fff;}
.g-bar-2 .icon{display:none;}

.g-bar-3{background-color:#222;color:#fff;overflow: auto; white-space:nowrap;-ms-overflow-style: none;scrollbar-width: none;}.g-bar-3 a{display:inline-block;color:#fff;text-align:center;padding:11px 12px; margin-right:8px; text-decoration:none;font-size:var(--font-size-m);}
.g-bar-3::-webkit-scrollbar {display: none;}
.g-bar-3 a:hover{background:var(--bg-3);}.g-bar-3 a.active{color:var(--bg-3);}
.g-bar-3 .icon{display:none;}

.g-bar-4{background-color:#222;overflow: hidden;text-align:center; padding:6px;}.g-bar-4 a{float:left;display:block;color:#fff;padding:18px;text-align:center;padding:6px 7px;text-decoration:none;font-size:var(--font-size-m);}
.g-bar-4 a:hover{background:var(--bg-3);color:var(--text-3);}.g-bar-4 a.active{background:#fff;color:#111;}
.g-bar-4 .icon{display:none;}

@media screen and (max-width:700px) {
    .g-bar-1 a:not(:first-child){display:none;}.g-bar-1 a.icon{float:right;display:block;}
    .g-bar-2 a:not(:first-child){display:none;}.g-bar-2 a.icon{float:right;display:block;}
    .g-bar-3 a:not(:first-child){display:none;}.g-bar-3 a.icon{float:right;display:block;}
    .g-bar-4 a:not(:first-child){display:none;}.g-bar-4 a.icon{float:right;display:block;}
}

@media screen and (max-width:700px) {
    .g-bar-1.res{position:relative;}
    .g-bar-1.res .icon{position:absolute;right:0;top:0;}
    .g-bar-1.res a{float:none;display:block;text-align:left;}
    
    .g-bar-2.res{position:relative;}
    .g-bar-2.res .icon{position:absolute;right:0;top:0;}
    .g-bar-2.res a{float:none;display:block;text-align:left;}
    
    .g-bar-3.res{position:relative;}
    .g-bar-3.res .icon{position:absolute;right:0;top:0;}
    .g-bar-3.res a{float:none;display:block;text-align:left;}
    
    .g-bar-4.res{position:relative;}
    .g-bar-4.res .icon{position:absolute;right:0;top:0;}
    .g-bar-4.res a{float:none;display:block;text-align:left;}
}
/* text */

.g-bolder{font-weight:700;}
.g-lighter{font-weight:200;}
.g-undertext{text-decoration:underline 2px solid var(--text-3);text-underline-offset:6px;}
.g-highlight{color:var(--text-3);}
.g-title{font-size:var(--font-size-l);font-weight:--var(--font-weight-l);display:block;}
/* card */

.g-card-1{box-shadow:0px 2px 2px 0px #222; max-width:98%; margin:auto; font-family:var(--font-1); text-align:center; padding:8px; border:none;}
.g-card-1 h2{font-size:var(--font-size-l); font-weight:var(--font-weight-l);}
.g-card-1 p{color:#888; font-size:var(--font-size-s); font-weight:var(--font-weight-m); width: 97%;height: 80px; overflow: hidden; text-overflow: ellipsis; }
.g-card-1 a {border:none;display:inline-block;padding:12px;color:var(--text-3);background:var(--bg-3);text-align:center;cursor:pointer;width:80%;font-size:var(--font-size-m); font-weight:var(--font-weight-m); border-radius:23px; margin-bottom:17px;}
.g-card-1 a:hover{opacity:0.8; }
.g-card-1 img{width:100%; height:43vh;}

.g-card-2{box-shadow:0px 2px 2px 0px #f1f1f1; max-width:100%; margin:auto; font-family:var(--font-2); text-align:center; padding:1px; border:none;}
.g-card-2 h1{font-size:2.3em; font-weight:700;}
.g-card-2 p{color:#888; font-size:var(--font-size-s); font-weight:var(--font-weight-m); width: 97%;height: 80px; overflow: hidden; text-overflow: ellipsis; }
.g-card-2 a {border:none;display:inline-block;padding:12px;color:var(--text-3);background:#222;text-align:center;cursor:pointer;width:71%;font-size:var(--font-size-m); font-weight:var(--font-weight-m); border-radius:23px; margin-bottom:17px;}
.g-card-2 a:hover{opacity:0.8;}
.g-card-2 img{width:100%; height:43vh; border-radius:11px;}
/* animate */

.g-animate-fading{animation:fading 10s infinite;}@keyframes fading{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
.g-animate-opacity{animation:opa 1.8s;}@keyframes opa{from{opacity:0;}to{opacity:1;}}
.g-animate-top{position:relative; animation:animatetop 0.6s;}@keyframes animatetop{from{top:-200px;opacity:0;}to{top:0;opacity:1;}}
.g-animate-bottom{position:relative; animation:animatebottom 0.6s;}@keyframes animatebottom{from{bottom:-200px;opacity:0;}to{bottom:0;opacity:1;}}
.g-animate-bottom-1{position:relative; animation:animatebottom-1 2s;}@keyframes animatebottom-1{0%{bottom:-200px;opacity:0;}80%{bottom:-200px;opacity:0;}100%{bottom:0;opacity:1;}}
.g-animate-left{position:relative; animation:animateleft 0.6s;}@keyframes animateleft{from{left:-200px;opacity:0;}to{left:0;opacity:1;}}
.g-animate-right{position:relative; animation:animateright 0.6s;}@keyframes animateright{from{right:-200px;opacity:0;}to{right:0;opacity:1;}}
.g-animate-z{animation:animatez 0.6s;}@keyframes animatez{from{transform:scale(0);}to{transform:scale(1);}}
/* loader */

.g-loader-1{position:absolute;left:50%;top:50%;z-index:1;width:100px;height:100px;border:solid 16px #f1f1f1;border-top:solid 16px #3498db;margin:-76px 0 0 -76px;border-radius:50%;animation:loader_1 2s linear infinite;}@keyframes loader_1{0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
/* flex */

.g-flex-1{display:flex; flex-wrap:wrap; justify-content:space-around; background-color:var(--bg-2); padding:6px;}
.g-flex-1 a{margin:5px;}.g-flex-1 a:hover{color:#222;}
/* disabled item */

.g-item-d{cursor:not-allowed;opacity:0.3;pointer-events:none;}
/* hover */

.g-hover-1:hover{color:green}
/* active */

.g-active-1:active{background:f1f1f1;color:#222}
/* scroll bar */

.g-scrollbar-1::-webkit-scrollbar {
    display: none;
}
.g-scrollbar-1 {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}