@charset "utf-8";
/* ---------------------------------------------------------
  section-vi
----------------------------------------------- */
.section-vi{
	position: relative;
	z-index: 1;
	width: 100%;
	margin-bottom: var(--sectionpd);
}
.vi-1{
	position: absolute;
	right: -10px;
	top: 0;
	width: 20%;
	z-index:-1 ;
}
.vi-2{
	position: absolute;
	left: -10%;
	top: 0;
	width: 50%;
	z-index:-1 ;
}
.vi-main{
	position: relative;
	z-index: 1;
	gap: 1rem;
	padding-top: 3rem;
}
.vi-main__p{
	margin-left: -3%;
    width: 30%;

}
.vi-main__logo{
    width: 60%;
    margin-right: 10%;
}
.vi-main__dec{
	margin-top: 10%;
    display: none;
}

@media screen and (min-width: 576px) {
.vi-main__dec{
    display: flex;
}
.vi-main__logo{
    width: auto;
    margin-right: 0%;
}
.vi-main__p{
	margin-left: -3%;
    width: auto;

}
}
/*--------------------------
vi-main2
-----------------------------*/
.vi-main2{
	margin-top: -6%;
}
.vi-main2__1{
	margin-left: -32%;
	width: 60%;
}
.vi-main2__2{
	margin-left: auto;
	width: 20%;
    margin-top: 30px;
}
.vi-main2__3{width: 20%;}
/*------------------------------
section-info-------------------*/
.section-info{
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	gap: 3rem;
}
.page-title__main{
    color: var(--sub-color);
    font-weight: bolder;  
    font-size: 1.5rem;
}
.page-title__main:before{
    content:"";
    background-image: url("../img/page/dot-title.png");
    background-size:contain ;
    width: 40px;
    height: 30px;
    display:inline-block;
    background-repeat:no-repeat ;
    margin-left: -40px;
}
.page-title__date{
    color:#71B6E5;
    font-size: 0.8rem;
 }
.page-sub-title{
    color: var(--third-color);
    font-size: 1.2rem;
    font-weight:bold;
    line-height: normal;
}
.list-file{
    color:#71B6E5;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.list-file:before{
    content:"";
    background-image: url("../img/page/bg-icon-more.png");
    background-repeat:no-repeat ;
    background-size:50px ;
    background-position:-15px  5px ;
    clip-path: circle(50% at 50% 50%);
    background-color: black;
    width: 40px;
    height: 40px;
    display:inline-block;
  }
.list-file:hover{ text-decoration: underline;}
.list-file:hover:before{background-size:65px ;
     background-position:-30px  0px ;}
.i-news__ul{
	margin-bottom: 1rem;
}
.i-news__ul li{
	line-height: normal;
	margin-bottom: 1rem;
	font-size: 1.1rem;
}
.box-gift{
	max-width: 200px;
}
.itetx{	font-size: 1.1rem;}
.itetx br{
    display: none;
}
.ipalyrow{
	gap: 1rem;
	/* margin-top: 0.2rem; */
}
.box-play__title{
    font-size: 1rem;
    color:var(--foruth-color);
font-weight: bold;
position: relative;
padding-left: 20px;}
.box-play__title span:before{
    content:"";
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom:5px solid transparent;    
    border-left: 5px solid var(--foruth-color);  
    display: block;
    position: absolute;
    left: 0;
    top:8px
}
.box-play__des{
	color: #badbf2;
}
@media screen and (min-width: 576px) {
   .page-title__main{
    font-size: 2rem;
}
.page-sub-title{
    font-size: 1.5rem; 
}
}
@media screen and (min-width: 768px) {
    .itetx br{
        display: block;
    }
	.section-info{
		padding-left:2.5rem;
		padding-right: 2.5rem;
		gap: 5rem;
	}
	}
@media screen and (min-width: 1024px) {
    .section-info{
      gap: 2rem;
    }
    
}	
@media screen and (min-width: 1360px) {

.section-info{
	padding-left: 10rem;
	padding-right: 10rem;
	gap: 4rem;
}
}
@media screen and (min-width: 1520px) {
    .section-info{ 
        gap: 5rem;
    }
}
@media screen and (min-width: 1680px) {
    .section-info{ 
        gap: 8rem;
    }
}
/*sectioin-vi__btm--------------------
--------------------------------------*/
.sectioin-vi__btm{
    position: relative;
    margin-top: var(--sectionpd);
    padding-bottom: 5rem;
}
.vi-btm-1{
    position:absolute;
    z-index: -3;
    left: -10%;
     top:35%;
    width: 40%;
}
.vi-btm-2{
    position:absolute;
    z-index: -2;
    right: -10%;
    top:10%;
    width: 30%;
}
.vi-btm-3{
    position:absolute;
    z-index: -1;
    left: -23%;
    top:-8%;
    width: 90%;
    display: none;
}
.vi-btm-main{
    position:relative;
    z-index: 1;
}
.box-vi-btm__04{
    width: 28%;
    margin-left: -20%;

}
.box-vi-btm__date{
    margin-left: 0%;
    width: 50%;
}
.vi-btm-sun{
    position:absolute;
    z-index: 0;
    right: 0%;
    bottom:0%;
    width: 100%;
}
.vi-btm-peo{
    position: absolute;
    z-index: 1;
    width: 30%;
    margin-right: 5%;
    bottom:10%;
    left: 40%;
}
.vi-btm-fish{
    position: absolute;
    z-index: 1;
    width: 30%;
    margin-right: 1%;
    margin-top: auto;
    bottom:30%
}
.site-footer_in {
	border-top: none;
}

@media screen and (min-width: 576px) {

.box-vi-btm__date{
    margin-left: 0%;
    width: 40%;
}
}

@media screen and (min-width: 650px) {
.sectioin-vi__btm{
    padding-bottom: 10rem;
}
.vi-btm-fish{
    width: 30%;
    bottom:50%
}
.vi-btm-sun{
    bottom:-15%;
}
.vi-btm-peo{
    width: 30%;
    margin-right: 5%;
    bottom:5%;
    left: 40%;
}
}
@media screen and (min-width: 768px) {
    .sectioin-vi__btm{
        padding-bottom: 12rem;
    }
    .vi-btm-fish{
        width: 30%;
        bottom:50%
    }
    .vi-btm-sun{
        bottom:-30%;
    }
    .vi-btm-peo{
        width: 25%;
        margin-right: 5%;
        bottom:0%;
        left: 40%;
    }
    .vi-btm-2{
        top:-30%;
        width: 40%;
    }
    
    }
    @media screen and (min-width: 1024px) {
        .sectioin-vi__btm{
            padding-bottom: 20rem;
        }
        .vi-btm-fish{
            width: 25%;
            bottom:15%
        }
        .vi-btm-2{
            top:0%;
            width: 40%;
        }
        .box-vi-btm__date{
            margin-left: 0%;
            width: 30%;
        }
        

    }   
@media screen and (min-width: 1360px) {
    .sectioin-vi__btm{
        position: relative;
        margin-top: var(--sectionpd);
        padding-bottom: 0;
    }
    .vi-btm-1{
        left: -10%;
         top:35%;
        width: 40%;
    }
    .vi-btm-2{
        right: -20%;
        top:-50%;
        width: 30%;
    }
    .vi-btm-3{
        left: -23%;
        top:-8%;
        width: 90%;
        display: block;
    }
    .box-vi-btm__04{
        width: 28%;
        margin-left: -20%;
    
    }
    .box-vi-btm__date{
        margin-left: 10%;
        width: 22%;
    }
    .vi-btm-sun{
        right: 0%;
        bottom:-20%;
        width: 100%;
    }
    .vi-btm-peo{
        position: relative;
        width: 25%;
        margin-right: 5%;
        bottom:auto;
        left:auto;
    }
    .vi-btm-fish{
        position: relative;
        width: 20%;
        margin-right: 1%;
        margin-top: -13%;
        margin-bottom: auto;
    }
    
}