body{
    min-width: 750px;
    text-align: center;
}
/*
    general/common
*/
.all{
    width:750px;
    margin:0 auto;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}
.containers{
    position:relative;
    /*height:962px;*/
}
/*
    first class to show section
*/
.containers .firstCover{
    position: relative;
    top: inherit;
    bottom: 0;
    left: 0;
}
.containers .productIn{
    position: absolute;
    z-index: 4;
    top: 390px;
    left: 35px;
}
.containers .firstIn{
    position: absolute;
    top: 37px;
    left: 0;
    z-index: 3;
}
.containers .secondCover{
    position: absolute;
    top: 520px;
    left: 0;
    z-index: 3;
}
.containers .secondIn{
    position: relative;
    top: -12.5px;
    left: -36px;
    z-index: 3;
}
/*
    second class to show section
*/
.secondContainers{
    position: relative;
}
.secondContainers .firstCover{
    position: relative;
    top: inherit;
    bottom: 0;
    left: 0;
}
.secondContainers .title{
    position: absolute;
    z-index: 4;
    top: 90px;
    left: 250px;
}
.secondContainers .description{
    position: absolute;
    z-index: 4;
    top: 195px;
    left: 135px;
}
.secondContainers .swanvideo{
    width: 690px;
    margin: 0 auto;
    position: absolute;
    z-index: 4;
    top: 280px;
    left: 25px;
}
/*
    third class to show section
*/
.thirdContainers{
    position: relative;
}
.thirdContainers .cover{
    top: 250px;
    position: absolute;
}
.thirdContainers .sosialMedia{
    top: 220px;
    position: relative;
    z-index: 5;
}
.thirdContainers .description{
    top: 450px;
    position: relative;
    z-index: 5;
}
.thirdContainers .gifs{
    position: absolute;
    top: 570px; left: 0;
}
.thirdContainers .gifs ul{
    position: relative; display: block;
}
.thirdContainers .gifs li{
    position: absolute;
    z-index: 2;
    background:#fff;
}
.thirdContainers .gifs li img{
    width: 100%;
    height: auto; 
    vertical-align: top;
}
.thirdContainers .gifs li:nth-child(1){
    top: 50px;
    left: 51px; 
    width: 322px;
}
.thirdContainers .gifs li:nth-child(2){
    top: 95px;
    left: 410px;
    width: 289px;
    padding: 3px 0;
}
.thirdContainers .gifs li:nth-child(3){
    top: 498px;
    left: 81px;
    width: 272px;
}
.thirdContainers .gifs li:nth-child(4){
    top: 543px;
    left: 400px;
    width: 272px;
}
.thirdContainers .gifs li:nth-child(5){
    top: 867px;
    left: 44px;
    width: 318px;
}
.thirdContainers .gifs li:nth-child(6){
    top: 942px; 
    left: 400px; 
    width: 307px;
}
/*
    fourth class to show section
*/
.fourthContainers{
    position: relative;
}
.fourthContainers .cover{
    position: absolute;
    z-index: 6;
    top: 1840px;
    left: 0;
}
.fourthContainers .title{
    position: absolute;
    z-index: 6;
    top: 1945px;
    left: 288px;
}
.fourthContainers .list{
    position: absolute;
    z-index: 6;
    top: 2028px;
    left: 345px;
}
.fourthContainers .motto{
    position: absolute;
    z-index: 6;
    top: 2290px;
    left: 100px;
}
/*
    fifth class to show section
*/
.fifthContainers{
    position: relative;
}
.fifthContainers .cover{
    position: absolute;
    z-index: 6;
    top: 2365px;
    left: 0;
}
.fifthContainers .title{
    position: absolute;
    z-index: 6;
    top: 2500px;
    left: 235px;
}
.fifthContainers .description{
    position: absolute;
    z-index: 6;
    top: 2617px;
    left: 255px;
}
/*
    sixth class to show section
*/
.sixthContainers{
    position: relative;
}
.sixthContainers .cover{
    position: absolute;
    z-index: 7;
    top: 2800px;
    left: 0;
}
.sixthContainers .title{
    position: absolute;
    z-index: 7;
    top: 2830px;
    left: 270px;
}
/*
    seventh class to show section
*/
.seventhContainers{
    position: relative;
}
.seventhContainers .cover{
    position: relative;
    z-index: 8;
    top: 3490px;
    left: 0;
}
.seventhContainers .title{
    position: absolute;
    z-index: 8;
    top: 4190px;
    left: 130px;
}
.seventhContainers .description{
    position: relative;
    z-index: 8;
    top: 3600px;
    left: 0;
}
/*
    eighth class to show section
*/
.eighthContainers{
    position: relative;
}
.eighthContainers .cover{
    position: relative;
    z-index: 9;
    top: 3620px;
    left: 0;
}
.eighthContainers .title{
    position: absolute;
    z-index: 9;
    top: 3740px;
    left: 30px;
}
.eighthContainers .description{
    position: absolute;
    z-index: 9;
    top: 4100px;
    left: 30px;
}
/*
    ninth class to show section
*/
.ninthContainers{
    position: relative;
}
.ninthContainers .cover{
    position: relative;
    z-index: 10;
    top: 3520px;
    left: 0;
}
.ninthContainers .title{
    position: absolute;
    z-index: 10;
    top: 3632px;
    left: 260px;
}
.ninthContainers .description{
    position: absolute;
    z-index: 10;
    top: 3800px;
    left: 255px;
}
/*
    tenth class to show section
*/
.tenthContainers{
    position: relative;   
}
.tenthContainers .cover{
    position: relative;
    z-index: 11;
    top: 3520px;
    left: 0;
}
.tenthContainers .title{
    position: absolute;
    z-index: 11;
    top: 3600px;
    left: 85px;
}
.tenthContainers .description_1{
    position: absolute;
    z-index: 11;
    top: 3845px;
    left: 100px;
}
.tenthContainers .description_2{
    position: absolute;
    z-index: 11;
    top: 4215px;
    left: 70px;
}
.tenthContainers .description_3{
    position: absolute;
    z-index: 11;
    top: 4705px;
    left: 210px;
}
/*
    eleventh class to show section
*/
.eleventhContainers{
    position: relative; 
}
.eleventhContainers .cover{
    position: relative;
    z-index: 12;
    top: 3511px;
    left: 0;
}
/*
    twelfth class to show section
*/
.twelfthContainers{
    position: relative; 
}
.twelfthContainers .title{
    position: absolute;
    z-index: 13;
    top: 3530px;
    left: 250px;
}
.twelfthContainers .main-accordion{
    position: relative;
    z-index: 13;
    top: 3655px;
    width: 100%;
}
/*
    override from accordion in bootstrap 5
*/
.accordion{
    border: 1px solid #29c2e5 !important;
    border-radius: 0px;
}
.accordion-button:not(.collapsed){
    color: #38B7BB;
    background-color: white;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23124b95'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:focus{
    border-color: transparent;
    /*box-shadow: 0 0 0 0.1rem rgb(41 194 229 / 105%);*/
    box-shadow: none !important;
}
.accordion-item{
    background-color: #fff !important;
    border: 1px solid #29c2e5 !important;
    border-radius: 0px !important;
}
.accordion-button{
    height: 100px;
    font-size: 20px;
    color: #38B7BB;
}
.getButton-accordion{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    text-align: left;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
    
    height: 100px;
    font-size: 20px;
    color: #38B7BB;
    
}
.getButton-accordion::after{
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: '';
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%232BC2E5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.accordion-body{
    text-align: left;
    border-top: 2px solid #29C2E5;
    padding-top: 35px;
    padding-bottom: 30px;
    font-size: 20px;
    position: relative;
    color: #584D4D;
    text-align: justify;
}
.accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%232BC2E5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%232BC2E5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/*====== override by add & modif feature accordion to show curve line ==========*/
.accordion-button::before{
    content: '';
    position: absolute;
    z-index: 99;
    width: 20px;
    height: 20px;
    
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #29c2e5 transparent  transparent transparent;
    top: 100%;
    left: 5%;
}
.accordion-inner-main-button{
    position: absolute;
    z-index: 99;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #FFF transparent transparent transparent;
    top: 97%;
    left: 5%;
}
.accordion-inner-child-button{
    position: absolute;
    z-index: 99;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #FFF transparent transparent transparent;
    top: 97%;
    left: 5%;
}
/*
    thirteenth class to show section
*/
.thirteenthContainers{
    position: relative; 
}
.thirteenthContainers .cover{
    position: relative;
    z-index: 14;
    top: 3710px;
    left: 0;
}
.thirteenthContainers .title{
    position: absolute;
    z-index: 14;
    top: 3750px;
    left: 190px;
}
.thirteenthContainers .description{
    position: relative;
    z-index: 14;
    /*top: 4171px;*/
    top: 3700px;
    left: 0;
    bottom: 0;

    height: 100px;
    background-color: #F482A6;
}
.thirteenthContainers .description .copyright{
    position: absolute;
    /*z-index: 14;*/
    top: 45px;
    left: 60px;
    bottom: 0;
    color: #FFFFFF;
    font-size: 15px;
}