@charset "utf-8";

body {
	background-color:#1B3A6F;
	color:#e7e8ea;
}

#nav A:link {
	text-decoration: none;
	color: #e7e8ea;
	/*font-size: 13px;*/
}
#nav A:visited {
	text-decoration: none;
	color: #e7e8ea;
	/*font-size: 13px;*/
}
#nav A:active {
	text-decoration: none;
	color: #e7e8ea;
	font-size: 13px;
}
#nav A:hover {color: #FFF; /*text-decoration:overline; border-bottom: 1px solid #000;font-size: 13px;*/}

#top{
	color:#e7e8ea;
}

#atphon_main_ad_video {
	box-shadow: rgba(0, 0, 0, 0.70) 0px 0px 20px;
	width: 70%;
	border-radius: 15px;
	cursor:pointer;
	margin-top:50px;
	margin-bottom:24px;
	max-height:330px;
}

#atphon_submenu{
  z-index:2;
  position: -webkit-sticky;
  position: sticky;
  top: 58px;
  backdrop-filter: blur(5px);
  /*opacity:0;*/
  /*background-color:#f6f6f6;*/
  background-color:#102A43;
  font-weight:800;
  /*animation: fadeIn 2.2s ease-in-out 3000ms forwards;*/
  text-align:center;
}

.atphon_submenu{
opacity:0;	
animation: fadeIn 2.2s ease-in-out 3000ms forwards;
}


#atphon_ad{
height:360px; max-width:1280px;color:white;
background-image:url(img/index/banner.png);
background-repeat:no-repeat;
background-position:center bottom;
padding:20px;
}

#title_text {
	text-align:left;
	margin-top:20px;
	/*animation: moveStart 1s ease-in-out 2800ms forwards;*/
}

#title_1st{
	position:relative;
	top: 0px;
	display:inline-block;
	opacity:1;
	color:#F00;
/*animation: moveAway 1.5s ease forwards;*/
animation: fadeIn 3.5s;
}
#title_2nd{
	position:relative;
	top: 0px;
	display:inline-block;
	opacity:0%;
	color:#F00;
	margin-right:8px;
/*animation: moveAway 1.5s ease forwards;*/
animation: fadeIn 3.5s, moveAway 1000ms ease-in-out 3200ms forwards;
}
#title_3rd{
	position:relative;
	top: 0px;
	left:0px;
	opacity:1;
	color:#FFF;
	display:inline-block;
/*animation: moveAway 1.5s ease forwards;*/
animation: fadeIn 3.5s, moveLeft 1200ms ease-in-out 3500ms forwards;
}
#title_4th{
	position:relative;
	top: 0px;
	opacity:0%;
	color:#FFF;
	display:inline-block;
/*animation: moveAway 1.5s ease forwards;*/
animation: fadeIn 3.5s, moveAway 1000ms ease-in-out 3200ms forwards;
}
#title_trademark{
	position:relative;
	top: 0px;
	left:-65px;
	display:inline-block;
	opacity:0;
	color:#FFF;
	font-size:36px;
	animation: fadeIn 2.2s ease-in-out 4200ms forwards;	
}

#title_sub {
	color:#fff;
	opacity:0;
	animation: fadeIn 2.2s ease-in-out 4200ms forwards;
}

@keyframes moveAway {
  to{
    top: -100px;
    opacity:0;
	margin-right:0px;
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes moveLeft {
  to{
    left: -51px;
    opacity:1;
  }
}

@keyframes moveStart {
  to{
    top:20px;
	left:0px;
  }
}

.orange_sign{
	background-color:#3A8A99;
	border-radius:15px;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:16px;
	padding-right:16px;
	border:none;
	left:-20px;
	position:relative;
}

#content{
	padding-bottom:50px;
}

#content_1{
	/*opacity:0;
	animation: fadeIn 2.2s ease-in-out 4300ms forwards;*/
}

.content-wrapper {
            /*width: 300px;*/
			width:100%;
			min-height:560px;
            overflow: hidden;
            position: relative;
            transition: max-height 0.3s ease-in-out;
        }
        .fade {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: linear-gradient(to bottom, rgba(27, 58, 111, 0), rgba(27, 58, 111, 1));
        }
        .button-container {
            margin-top: 10px;
        }

.content{
	text-align:left;
}

.series_ad{
	padding-top:20px;
	padding-right:30px;
	padding-left:90px;
	padding-bottom:50px;
}

.ad_dis{
	text-align:left;
	/*border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;*/
	border-image: linear-gradient(to right, rgba(58,207,213,0) 0%, rgba(58,207,213,0.6) 50%, rgba(58,207,213,0) 100%) 1;
	border-top: 4px solid;
	border-bottom: 4px solid;
	padding: 20px;
	min-height:100px;
	/*background: rgba(255, 255, 255, 0.2);*/
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	cursor:pointer;
	background-image:url(img/index/net.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.ad h2{
   color:#000000;
   font-size:23px;
   font-weight:600;
   letter-spacing: 0px;
   line-height:35px;
}
.ad h1{
   color:#000000;
   font-size:36px;
   font-weight:600;
   line-height:20px;
   letter-spacing: 0px;
   background-repeat:no-repeat;
   background-position: left bottom;
}

.ad h3{
   color:#000000;
   font-size:23px;
   font-weight:200;
   letter-spacing: 0px;
   line-height:38px;
}

.round_img{
	border-radius:50%;	
}

.regtan_img{
	border-radius:25px;	
}

.cs_1{
 float: left;
 width:19%;
 border: 1px solid #000;
 border-right-style:none;
 cursor: pointer;
}
.cs_1 td:hover { 
   background-color: #0066ff;
}
.cs_2{
 float: left;
 width:19%;
 border: 1px solid #000;
 cursor: pointer;
}
.cs_2 td:hover { 
   background-color: #0066ff;
}
.cs{
 float: left;
 width:19%;
 border: 1px solid #000;
 border-right-style:none;
 cursor: pointer;
}
.cs td:hover { 
   background-color: #0066ff;
}

.cf_1 {
 float: left;
 width:35%;	
}

.cf_2 {
 float: left;
 width:65%;	
}

.ch_icon {
width:72%;
border-radius:25px;
opacity: 0.9;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;	
}

@media screen and (max-width: 1330px) {
#spacer {
height:460px;	
}
.ad h2{
   line-height:35px;
}
.ad h1{
   line-height:45px;
}

.ad h3{
   line-height:30px;
}

.cs_1{
 float: left;
 width:100%;
 border: 1px solid #000;
 border-bottom-style:none;
}
.cs_1 td:hover { 
   background-color: #0066ff;
}
.cs_2{
 float: left;
 width:100%;
 border: 1px solid #000;
}
.cs_2 td:hover { 
   background-color: #0066ff;
}
.cs{
 float: left;
 width:100%;
 border: 1px solid #000;
 border-bottom-style:none;
}
.cs td:hover { 
   background-color: #0066ff;
}

.cf_1 {
 float: left;
 width:100%;
 padding-bottom: 30px;	
}

.cf_2 {
 float: left;
 width:100%;	
}
}

@media screen and (min-width: 1331px) {
#atphon_ad {
  display: grid;
  grid-template-columns: 4fr 1fr 4fr;
  grid-gap: 20px;
}

#spacer {
height:0px;	
}
.atphon_2_8 {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 20px;
  width:100%;
  padding-left:50px;
  padding-bottom:50px;
}

.atphon_2_8r {
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-gap: 20px;
  width:100%;
  padding-left:50px;
  padding-bottom:50px;
}

.atphon_3_7 {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-gap: 20px;
  width:100%;
}

.atphon_3_7r {
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-gap: 20px;
  width:100%;
  padding-left:50px;
}

.atphon_4_6 {
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-gap: 20px;
  width:100%;
  padding-bottom:50px;
}
}