/* root */
:root{
	--maxcol:1280px;
	--w100:100%;
	--sidebar:clamp(200px, 30vw, 360px);
	
	--white1:#fff;
	--white2:#ececec;
	--black1:#000;
	--black2:#151515;
	--black3:#9b9b9b;
	--black80:rgb(0 0 0 / 80%);
	--gray1:#ebebeb;
	--gray2:#f1f1f1;
	--red1:#ff0000;
	--green1:#0e5814;
	--blue1:#0068ec;
	--yellow1:#ffa916;
	
	--tem1:#26bac9;
	--tem2:#202530;
	--tem3:#526af0;
	--tem4:#a2a3aa;
	--tem5:#dde9f6;
	--tem6:#f1f1f1;	
	--tem7:#f9f9f9;
	--tem8:#860000;
	--tem9:#008923;
	--tem10:#dee1e3;
	--tem11:#23b603;
	
	--gar1:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,75%) 100%);
	--gar2:linear-gradient(90deg, rgba(38,190,26,1) 0%, rgba(2,71,126,1) 100%);
	--gar3:linear-gradient(90deg, rgba(18,18,18,1) 0%, rgba(23,23,23,1) 30%, rgba(33,33,33,1) 55%, rgba(5,5,5,1) 90%, rgba(8,8,8,1) 100%);
	--gar-line:linear-gradient(0deg, rgb(52 200 3) 0%, rgb(54 219 0) 100%);
	--gar-fb:linear-gradient(0deg, rgb(225 225 225) 0%, rgb(246 246 246) 100%);
	
	--bgh-1: url('../images/bgh-1.webp');
	
	
	--link:red;
	--linkup:#ffd012;
	
	--bgline:#2ec814;
	--bglineup:#fff;
	
	--bgfb:#4267b2;
	--bgfbup:#5889ec;
			
	--font-ct1:clamp(14px, 1vw, 18px);
	--font-ct2:clamp(15px, 1.2vw, 20px);
	--font-ct3:clamp(16px, 1.5vw, 24px);
	--font-a:clamp(14px, 1.2vw, 22px);
	--font-ss:clamp(11px, .65vw, 14px);
	--font-sm:clamp(13px, .8vw, 16px);
	--font-m:clamp(15px, 1.8vw, 24px);
	--font-l:clamp(16px, 2vw, 26px);
	--font-x:clamp(18px, 2.2vw, 30px);	
	--font-xl:clamp(22px, 2.6vw, 36px);
	--font-xx:clamp(24px, 3vw, 40px);
	--font-xxx:clamp(38px, 4vw, 50px);
	--font-xxxx:clamp(40px, 10vw, 80px);
	
}

*:focus {outline: none !important;}
*, *:before, *:after {box-sizing:border-box;position:relative;}
html{min-width:300px;width:100%;color:#444;background:#f7f8f9;scroll-behavior: smooth;}
body{background:transparent !important;}

/* template*/
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,a,li,span
{font-size:1rem;margin:0;padding:0;border-width:0;}
body,div,ol,ul,li,button,span,label,p,a,input,detail,h1,h2,h3,h4,h5,h6,th,td,tr,textarea,input,select,option{font-family:"Barlow Condensed", sans-serif !important;}

span{display:inline;}
p{margin:0 !important}
h1,h2,h3,h4,h5,h6{margin:0 !important;}
h1{font-size:2.9em;font-weight:inherit;}
h2{font-size:1.6em;font-weight:inherit;}
h3{font-size:1.3em;font-weight:inherit;}
h4{font-size:1.1em;font-weight:inherit;}
h5{font-size:1em;font-weight:inherit;}
h6{font-size:0.9em;font-weight:inherit;}
strong{font-weight:700;}
img{vertical-align:middle;border:none;width:100%;max-width:100%;object-position: center;object-fit: cover;}
a,img{border:none;outline:none;vertical-align:middle}
ul{list-style-type: none;}
nav ul{list-style-type: none;margin:0 auto;}
nav ul li {display:inline;margin:0;background:none;width: auto;}
a:link,a:visited{text-decoration:none !important;-webkit-transition: all 0.3s ; transition: all 0.3s;}
a:hover{color:var(--tem1);}
a:active{color:var(--black1)}
button{border:none;cursor: pointer;background:transparent;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
button:focus{outline: none;}

.rf{width:100%;position:relative;display:grid;margin:0 auto;padding:0;justify-content:stretch;justify-items:center;}
.rf-flex{width:100%;position:relative;padding:0;margin:auto;display:flex;display:-webkit-flex;justify-items:center;justify-content: center;align-items:center;flex-wrap:wrap;}
.ccc{justify-content:center;justify-items:center;align-content:center;align-items:center;}
.gab{grid-gap:1rem}

::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track {background: rgb(0 0 0 / 5%);}
::-webkit-scrollbar-thumb {background: var(--tem5);}
::-webkit-scrollbar-thumb:hover {background: var(--tem1);}



/* tranform */
.moveup{-moz-animation:moveup 20s ease-in-out infinite;-webkit-animation:moveup 20s ease-in-out infinite;-o-animation:moveup 20s ease-in-out infinite;animation:moveup 20s ease-in-out infinite;}
@keyframes moveup{0%{transform:translate(0px,0px);}
50%{transform:translate(0px,-25px);}
100%{transform:translate(0px,0px);}
}
@-moz-keyframes moveup{0%{-moz-transform:translate(0px,0px);}
50%{-moz-transform:translate(0px,-25px);}
100%{-moz-transform:translate(0px,0px);}
}
@-webkit-keyframes moveup{0%{-webkit-transform:translate(0px,0px);}
50%{-webkit-transform:translate(0px,-25px);}
100%{-webkit-transform:translate(0px,0px);}
}
@-o-keyframes moveup{0%{-o-transform:translate(0px,0px);}
50%{-o-transform:translate(0px,-25px);}
100%{-o-transform:translate(0px,0px);}
}

.character-box{
	-webkit-animation:fadeup 2s ease-in-out;
	animation:fadeup 2s ease-in-out;}
@-webkit-keyframes fadeup{
	from{-webkit-transform:translateY(100px);}
100%{-webkit-transform:translateY(0px);}
}
@keyframes fadeup{
	from{transform:translateY(100px);}
100%{transform:translateY(0px);}
}

.ico-shake:hover .btn-ico,.ico-shake:hover .btn-ico2{
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  animation-iteration-count: 2;
}
@keyframes ani-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, -1px) rotate(2deg);
  }
  
  20%, 80% {
    transform: translate3d(2px, -2px, 2px) rotate(-5deg);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, -4px) rotate(10deg);
  }

  40%, 60% {
    transform: translate3d(4px, 4px, 4px) rotate(-10deg);
  }
}

.tag-new{
  animation: textnew 0.3s infinite;
}
@keyframes textnew{
	from {color: red;}
  to {color: #5c0000;}
}
/* fogeffect */
.fog-effect{position:fixed;left:0;bottom:0;z-index: 10;width:100%;height:100vh;overflow:hidden;-webkit-filter: blur(1px) grayscale(0.2)saturate(1.2) sepia(0.2);filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);pointer-events: none;}
#foglayer_01, #foglayer_02, #foglayer_03 {
    height: 100%;
    position: absolute;
    width: 200%;
  }
  #foglayer_01 .image01, #foglayer_01 .image02,
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02 {
    float: left;
    height: 100%;
    width: 50%;
  }
  #foglayer_01 {
    -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
    -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
    animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  }
  #foglayer_02, #foglayer_03 {
    -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
    -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
    animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  }
  #foglayer_01 .image01, #foglayer_01 .image02 {
    background: url("../images/fog1.webp") center center/cover no-repeat transparent;
  }
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02{
    background: url("../images/fog2.webp") center center/cover no-repeat transparent;
  }
  /* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @-moz-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @-o-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  /* ---------- Keyframe Layer 2 ---------- */
  @-webkit-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @-moz-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @-o-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  /* ---------- Keyframe Layer 3 ---------- */
  @-webkit-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @-moz-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @-o-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @keyframes foglayer_03_opacity {
    0% { opacity: .8; }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  /* ---------- Keyframe moveMe ---------- */
  @-webkit-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @-moz-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @-o-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  
  @media only screen
    and (min-width: 280px)
    and (max-width: 767px) {
      #foglayer_01 .image01, #foglayer_01 .image02,
      #foglayer_02 .image01, #foglayer_02 .image02,
      #foglayer_03 .image01, #foglayer_03 .image02 {
        width: 100%;
      }
    }