@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400&display=swap');

@font-face{
    font-family: "rockinsoda";
    src:url("../fonts/ROCKINSODA.woff") format("woff");
    font-style:normal;
    font-weight:normal;
}

@font-face{
    font-family: "Arita";
    src:url("../fonts/Arita4.0_L.woff") format("woff");
    font-style:normal;
    font-weight:400;
}

@font-face{
    font-family: "Arita";
    src:url("../fonts/Arita4.0_M.woff") format("woff");
    font-style:normal;
    font-weight:500;
}

/*
    font-family: 'Heebo', sans-serif;
    font-family: "Arita"
    font-family: "rockinsoda"
*/



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Arita', sans-serif;
    -webkit-text-size-adjust: none;
    
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    color: #777;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{border: none;} 
address{font-style: normal;}
fieldset{border: none;} 
legend{position: absolute;left: -999em;} 
input[type=button],
input[type=submit],
input[type=reset],
input[type=image],
button, a, select{cursor: pointer; outline: none;} 
input{ outline: none;}

label.away{position: absolute;left: -999em;} 

/* *{ color: #777; font-family: 'Arita', sans-serif; margin: 0; padding: 0; font-weight: 500;} */

/* li{list-style: none;} 
a{text-decoration: none;} 
img{ border: none; vertical-align : bottom} 
table{border-collapse: collapse;border-spacing: 0;} 
address{font-style: normal;} 
fieldset{border: none;} 
legend{position: absolute;left: -999em;} 

input[type=button],
input[type=submit],
input[type=reset],
input[type=image],
button, select{cursor: pointer;} 

label.away{position: absolute;left: -999em;}  */

.wrap{
    max-width: 1230px;
    padding: 0 15px;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}
.ratio {
    position: relative;
}
.content {
    position: relative;
    overflow: hidden
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.cb{
    clear: both;
}

.t-center{
    text-align: center;
}

.ib{
    display: inline-block;
}


.col-1 {
    width: 100% !important;
    display: block;
}

.col-2 {
    width: 50% !important;
    display: block;
}

.col-3 {
    width: 33% !important;
    display: block;
}

.col-4 {
    width: 25% !important;
    display: block;
}

.none-pc {
    display: none!important;
}


.point01 {
    color: #fc6c93!important;
}

.point02{
    color: #46c9f3!important;
}

.yellow{
    color: #fcd380!important;
}

.orange{
    color: #f37647!important;
}

.green{
    color: #8dc8ae!important;
}

.blue{
    color: #4559b3!important;
}

.hee{font-family: 'Heebo', sans-serif!important;}
.ari{font-family: 'Arita', sans-serif!important; color: #777;}
.roc{font-family: "rockinsoda", sans-serif!important;}
.upp{text-transform: uppercase;}


.pad100 {padding: 100px 0;}
.pad120 {padding: 120px 0;}


.pt120{padding-top: 120px;}

.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pb60 {padding-bottom: 60px;}
.pb70 {padding-bottom: 70px;}
.pb80 {padding-bottom: 80px;}
.pb90 {padding-bottom: 90px;}
.pb100 {padding-bottom: 100px;}


/* .line-center {width: 50px;height: 1px;background-color: #000;margin:0 auto;} */
/* .sub-title h2 {font-size: 50px;font-weight: 700;color: #3d3935;} */
.flex-jcsb {display: flex;justify-content: space-between;flex-wrap: wrap;}




/* =================== 1024px =================== */
@media (max-width: 1024px){
    .m-col-1 {
        width: 100% !important;
        display: block
    }

    .m-col-2 {
        width: 50% !important;
        display: block
    }

    .m-col-3 {
        width: 33.3% !important;
        display: block
    }

    .m-col-4 {
        width: 25% !important;
        display: block
    }

    .none-mo {
        display: none !important
    }

    .none-pc {
        display: block!important
    }

    .wrap {
        padding: 0 15px;
        position: relative;
        height: 100%;
        width: 100%
    }
    
    .pad100 {padding: 50px 0;}
    .pad120 {padding: 60px 0;}
    
    
}

@media (max-width:540px) {
    .pt120{padding-top: 60px;}
    
    .pb10 {padding-bottom: 5px;}
    .pb20 {padding-bottom: 10px;}
    .pb30 {padding-bottom: 15px;}
    .pb40 {padding-bottom: 20px;}
    .pb50 {padding-bottom: 25px;}
    .pb60 {padding-bottom: 30px;}
    .pb70 {padding-bottom: 35px;}
    .pb80 {padding-bottom: 40px;}
    .pb90 {padding-bottom: 45px;}
    .pb100 {padding-bottom: 50px;}
}

/* mainSlider */
#mainSlider{ 
    width: 100%; 
    height: 100%; 
    position: relative;
}

#mainSlider #opc{
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 50;
    top: calc(50% - 90px);
    z-index: 100;
    text-align: center;
    
}

#opc.visible{
    animation: opc 1s;
    transform-origin: 50% 50%;
}

@keyframes opc{
	0% {
        top: calc(50% - 100px);
        opacity: 0;
    }
    
    100%{
        top: calc(50% - 90px);
        opacity: 1;
    }
}

#mainSlider h2{  
    font-size: 80px;
    color: #fff; 
    font-weight: 400; 
}
#mainSlider p{
    font-size: 15px;
    color: #fff;
}

#mainSlider p.top{
    font-size: 44px;
    color: #fff;
    letter-spacing: 40px;
}

#mainSlider p.bottom{
    font-size: 22px;
    color: #fff;
    font-weight: bold
}

#mainSlider .swiper-container1{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

#mainSlider .swiper-slide{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#mainSlider .swiper-slide .videoWrap{
    width: 100%;
    height: 100%;
}

#mainSlider .swiper-slide .inner{
    width: 1920px;
    height: 100%;
}

#mainSlider .swiper-slide iframe{
    width: 120%;
    height: 120%;
    position: relative;
    left: -10%;
    top: -10%;
}

#mainSlider .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* swipercontrol */
#mainSlider .swipercontrol{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}


#mainSlider .swiper-button-next1, #mainSlider .swiper-button-prev1{
    position: absolute; 
    top: calc(50% - 25px);
    background-size: cover; 
    background-repeat: no-repeat; 
    z-index: 100;
    display: block;
    width: 50px;
    height: 50px;
    transition: .3s;
    cursor: pointer;
}

#mainSlider .swiper-button-next1{
    right: 2%;
    background-image: url(../img/common/btn_next.png); 
}
#mainSlider .swiper-button-prev1{
    left: 2%;
    background-image: url(../img/common/btn_prev.png);
}

#mainSlider .swiper-button-next1:hover{
    background-image: url(../img/common/btn_next_hover.png); 
}

#mainSlider .swiper-button-prev1:hover{
    background-image: url(../img/common/btn_prev_hover.png); 
}


#mainSlider .swiper-button-next1:after,
#mainSlider .swiper-button-prev1:after{
    position: absolute; top: -999em;
}

#mainSlider .pagwrap{
    width: auto;
    position: absolute;
    text-align: center;
    left: calc(50% - 100px);
    bottom: 50px;
    z-index: 100;
    display: inline;
}
#mainSlider .swiper-pagination1{
    color: #fff;
    font-size: 18px;
    text-align: center;
    float: left;
}

.swiper-pagination1 .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 0 10px;
    background: #fff;
    opacity: 1;
}

.swiper-pagination1 .swiper-pagination-bullet-active{
    background: #fc6c93;
    position: relative;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
}

#mainSlider .swiper-button-pause1,
#mainSlider .swiper-button-play1{
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    position: relative;
    left: 0;
}

#mainSlider .swiper-button-pause1 i,
#mainSlider .swiper-button-play1 i{
    font-size: 20px;
    color: #fff;
}

#mainSlider .swiper-button-play1{
    display: none;
}


@media screen and (max-width: 1024px) {
    /* slider */
    #mainSlider{ 
        width: 100%; 
        height: auto; 
        position: relative;
    }
    
    #mainSlider .swiper-wrapper{ 
        padding-bottom: 30px;
    }
    
    #mainSlider .swiper-container1{ 
        width: 100%; 
        height: 60.13vw; 
        overflow: hidden; 
        position: relative;
        padding-bottom: 30px;
    }
    #mainSlider .swiper-slide .inner{
        width: 100%;
    }
    
    #mainSlider .pagwrap{
        width: 90%;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 0;
        z-index: 100;
        display: inline;
    }
    
    #mainSlider .swiper-pagination1{
        color: #fff;
        font-size: 18px;
        text-align: center;
        float: none;
    }
    .swiper-pagination1 .swiper-pagination-bullet{
        background: #999;
        margin: 0 5px;
    }
    
    .swiper-pagination1 .swiper-pagination-bullet-active{
        background: #fc6c93;
    }
    
    #mainSlider .swiper-button-pause1,
    #mainSlider .swiper-button-play1{
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        left: 95%;
        text-align: center;
    }
    
    #mainSlider .swiper-button-pause1 i,
    #mainSlider .swiper-button-play1 i{
        font-size: 16px;
        color: #999;
    }
    
}

@media (max-width:540px) {
    
    #mainSlider .swiper-button-next1, #mainSlider .swiper-button-prev1{
        position: absolute; 
        top: calc(50% - 17px);
        background-size: cover; 
        background-repeat: no-repeat; 
        z-index: 100;
        display: block;
        width: 35px;
        height: 35px;
        transition: .3s;
        cursor: pointer;
    }
    .swiper-pagination1 .swiper-pagination-bullet{
        width: 6px;
        height: 6px;
        margin: 0 3px;
    }

    .swiper-pagination1 .swiper-pagination-bullet-active{
        width: 10px;
        height: 10px;
        top: 2px;
    }
    
}


@media screen and (max-width: 540px) {
    
}

.contitle p{
    color: #4559b3;
    font-size: 15px;
}

.contitle h3{
    font-size: 70px;
}

.contitle p.pb50{
    color: #666;
    line-height: 24px;
    font-size: 16px;
}


.swiper-pagination2{
    display: none;
}


/* swipercontrol */
.slideArea{
    width: 100%;
    height: auto;
    position: relative;
}
.slideArea .swipercontrol{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.swiper-button-next2,
.swiper-button-prev2{
    position: absolute; 
    top: calc(50% - 60px);
    z-index: 100;
    display: block;
    width: 50px;
    height: 50px;
    background-size: cover; 
    background-repeat: no-repeat; 
    transition: .3s;
    cursor: pointer;
   
}
.outnone{
     outline: none;
}

.swiper-button-next2{
    right: -80px;
    background-image: url(../img/common/btn_next.png); 
}
.swiper-button-prev2{
    left: -80px;
    background-image: url(../img/common/btn_prev.png);
}

.swiper-button-next2:hover{
    background-image: url(../img/common/btn_next_hover.png); 
}

.swiper-button-prev2:hover{
    background-image: url(../img/common/btn_prev_hover.png); 
}



.swiper-button-next2:after,
.swiper-button-prev2:after{
    position: absolute; top: -999em;
}
.swiper-container2{
    padding: 10px;
    position: relative;
    left: -10px;
    top: -8px;
    width: 100%;
    height: auto;
    max-height: 380px;
    overflow: hidden;
}
.swiper-container2 .swiper-slide{
    width: 100%;
}

.swiper-container2 figure{
    width: 100%;
    height: 100%;
    overflow: hidden;
}


@media screen and (max-width: 1024px) {
    .swiper-container3{
        overflow: hidden;
    }
    
    .swiper-container3 .swiper-slide{
        width: 100%;
    }
    
    .swiper-container3 .swiper-slide img{
        width: 100%;
        height: 180px;
        object-fit: cover;
        transform: scale(1);
        transition: .3s;
    }
    
    .swiper-container3 figure{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .swiper-button-next3,
    .swiper-button-prev3{
        position: absolute; 
        top: calc(50% - 55px);
        z-index: 100;
        display: block;
        width: 40px;
        height: 40px;
        background-size: cover; 
        background-repeat: no-repeat; 
        transition: .3s;
        cursor: pointer;
    }


    .swiper-button-next3{
        right: -40px;
        background-image: url(../img/common/btn_next.png); 
    }
    .swiper-button-prev3{
        left: -40px;
        background-image: url(../img/common/btn_prev.png);
    }

    .swiper-button-next3:hover{
        background-image: url(../img/common/btn_next_hover.png); 
    }

    .swiper-button-prev3:hover{
        background-image: url(../img/common/btn_prev_hover.png); 
    }

  
    
    .swiper-button-next3:after,
    .swiper-button-prev3:after{
        position: absolute; top: -999em;
    }
    
    .swiper-pagination3{
        position: absolute;
        bottom: -30px;
        text-align: center;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    
    .swiper-pagination3 .swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        border-radius: 100%;
        margin: 0 5px;
        background: #999;
        opacity: 1;
    }

    .swiper-pagination3 .swiper-pagination-bullet-active{
        background: #fc6c93;
        position: relative;
        top: 3px;
        width: 16px;
        height: 16px;
        border-radius: 100%;
    }
    
}

@media (max-width:540px) {
    .contitle p{
        color: #4559b3;
        font-size: 15px;
    }

    .contitle h3{
        font-size: 38px;
    }

    .contitle p.pb50{
        color: #666;
        line-height: 18px;
        font-size: 12px;
    }

    
    
    .swiper-button-next3,
    .swiper-button-prev3{
        position: absolute; 
        top: calc(50% - 30px);
        z-index: 100;
        display: block;
        width: 30px;
        height: 30px;
        background-size: cover; 
        background-repeat: no-repeat; 
        transition: .3s;
        cursor: pointer;
    }


  
    
    .swiper-button-next3:after,
    .swiper-button-prev3:after{
        position: absolute; top: -999em;
    }
    
    
   .swiper-pagination3 .swiper-pagination-bullet{
        width: 6px;
        height: 6px;
        margin: 0 3px;
    }

    .swiper-pagination3 .swiper-pagination-bullet-active{
        width: 10px;
        height: 10px;
        top: 2px;
    }
    
}



#title_area{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 13% 0 7%;
    text-align: center;
}

#title_area h3{
    color: #fff;
}

#title_area p{
    color: #fff;
    line-height: 20px;
}

@media (max-width:540px) {
    #title_area{
        padding: 18% 0 8%;
        text-align: center;
    }
    
    #title_area p{
        color: #fff;
        line-height: 20px;
        font-size: 12px;
    }
}