@charset "utf-8";

#wrap {background:url(../images/background.jpg) no-repeat center top; background-size:cover;}



/* header */
#header {width:100%; height:140px; background:url(../images/headerDim.png) repeat-x left top; background-size:auto 100%; position:fixed; left:0; top:0; z-index:300; transition:all 0.5s; transition-property:height, background;}

#header .h_util {float:right;}

#header .h_sns {float:left;}
#header .h_sns li {float:left; display:flex; align-items:center; height:140px; margin-right:35px; transition:all 0.5s; transition-property:height;}
#header .h_sns li:last-child {margin-right:0;}
#header .h_sns li a {display:inline-block; letter-spacing:-0.025em;}
#header .h_sns li a img {max-width:35px; transition:transform 0.5s}
#header .h_sns li:hover a img {transform:scale(1.3)}

#header .h_lang {float:left; margin:0 35px; position:relative;}
#header .h_lang > a {display:block; font-size:1.25em; line-height:140px; letter-spacing:-0.025em; font-weight:800; padding-right:20px; position:relative; transition:all 0.5s; transition-property:line-height;}
#header .h_lang > a:after {content:''; display:block; width:15px; height:10px; background:url(../images/icon_lang_arrow.png) no-repeat center center; background-size:contain; position:absolute; right:0; top:50%; transform:translateY(-50%)}
#header .h_lang ul {width:50px; border:1px solid #fff; border-radius:10px; position:absolute; left:0; top:60%; text-align:center; padding:7px 0; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility;}
#header .h_lang ul li a {display:block; font-size:1em; color:#fff; line-height:1.5em; letter-spacing:-0.0.25em; font-weight:800;}
#header .h_lang.active > a:after {transform:translateY(-50%) rotate(180deg)}
#header .h_lang.active ul {opacity:1; visibility:visible;}

#header .h_member {float:right;}
#header .h_member li {float:left; margin-right:15px;}
#header .h_member li:last-child {margin-right:0;}
#header .h_member li a {display:block; font-size:1.25em; line-height:140px; letter-spacing:-0.025em; font-weight:800; text-transform:uppercase; transition:all 0.5s; transition-property:line-height;}
#header .h_member li a span {position:relative;}
#header .h_member li a span:after {content:''; display:block; width:0; height:2px; background:#fff; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); transition:width 0.5s;}
#header .h_member li a:hover span:after {width:100%;}

#logo {float:left; width:220px; height:64px; background:url(../images/logo_w.png) no-repeat center center; background-size:contain; margin-top:38px; transition:all 0.5s; transition-property:margin;}
#logo a {display:block; width:100%; height:100%;}

#gnb {float:left; margin-left:55px;}
#gnb > ul:after {content:''; display:block; width:100%; clear:both;}
#gnb > ul > li {float:left; position:relative;}
#gnb > ul > li:last-child {display: none;}
#gnb > ul > li > a {display:block; font-size:1.25em; line-height:140px; letter-spacing:-0.025em; font-weight:800; padding:0 25px; transition:all 0.5s; transition-property:line-height;}
#gnb > ul > li > a > span {position:relative;}
#gnb > ul > li > a > span:after {content:''; display:block; width:0; height:2px; background:#fff; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); transition:width 0.5s;}
#gnb > ul > li:hover > a > span:after {width:100%}
#gnb > ul > li > ul {position:absolute; left:50%; top:75%; transform:translateX(-50%); text-align:center; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility;}
#gnb > ul > li > ul > li > a {display:block; font-size:1em; color:rgba(255,255,255,0.6); line-height:1.8em; letter-spacing:-0.025em; font-weight:700; white-space:nowrap; transition:color 0.5s;}
#gnb > ul > li > ul > li > a:hover {color:#fff;}
#gnb > ul > li:hover > ul {opacity:1; visibility:visible;}

#all_gnb {display:none;}
#all_gnb .h_member li a span:after {display:none;}

#menuToggle {display:none;}

#header.scroll_on #logo {margin-top:18px;}

@media screen and (min-width:1025px){
    #header.scroll_on {height:100px;}

    #header.scroll_on .h_sns li {height:100px;}
    
    #header.scroll_on .h_lang > a {line-height:100px;}
    
    #header.scroll_on .h_member li a {line-height:100px;}

    #header.scroll_on #gnb > ul > li > a {line-height:100px;}
}

@media screen and (max-width:1440px){
    #header .h_sns li {margin-right:15px;}
    #header .h_sns li a img {max-width:25px;}

    #header .h_lang {margin:0 20px;}
    #header .h_lang > a {font-size:1em;}

    #header .h_member li {margin-right:10px;}
    #header .h_member li a {font-size:1em;}

    #logo {width:180px; height:52px; margin-top:44px;}

    #gnb {margin-left:25px;}
    #gnb > ul > li > a {font-size:1em; padding:0 12px;}

    #header.scroll_on #logo {margin-top:26px;}
}

@media screen and (max-width:1024px){
    #header {height:90px;}

    #header .h_util {display:none;}

    #header .h_sns {float:none; display:flex; justify-content:space-between; width:100%; padding:0 40px; overflow:hidden; position:absolute; left:0; bottom:120px;}
    #header .h_sns li {float:none; height:35px;}
    #header .h_sns li a img {max-width:32px;}

    #header .h_lang {float:none; text-align:center;}
    #header .h_lang > a {display:inline-block; font-size:1.33em; line-height:1.5; padding-right:0;}
    #header .h_lang > a:after {right:auto; left:100%; margin-left:8px;}
    #header .h_lang ul {width:53px; left:50%; top:100%; transform:translateX(-50%);}
    #header .h_lang ul li a {font-size:1.2em;}

    #header .h_member {float:none; margin:0; overflow:hidden; padding:0 40px;}
    #header .h_member li a {font-size:1.2em; line-height:90px;}

    #logo {width:130px; height:37px; margin-top:26px;}

    #gnb {display:none;}

    #all_gnb {display:block; width:240px; height:100vh; background:rgba(0,0,0,0.8); position:fixed; right:-240px; top:0; transition:right 0.5s;}
    #all_gnb .gnb_menu {width:100%; margin-top:40px;}
    #all_gnb .gnb_menu > li {margin-bottom:30px;}
    #all_gnb .gnb_menu > li:last-child {display: none;}
    #all_gnb .gnb_menu > li > a {display:block; font-size:1.46em; color:#fff; line-height:1.5em; font-weight:800; text-align:center;}
    #all_gnb .gnb_menu > li.depth2 > a > span {position:relative;}
    #all_gnb .gnb_menu > li.depth2 > a > span:after {content:''; display:block; width:15px; height:10px; background:url(../images/icon_lang_arrow.png) no-repeat center center; background-size:contain; position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:8px;}
    #all_gnb .gnb_menu > li.depth2 > a.active > span:after {transform:translateY(-50%) rotate(180deg)}
    #all_gnb .gnb_menu > li > ul {display:none; padding-top:5px;}
    #all_gnb .gnb_menu > li > ul > li > a {display:block; font-size:1.06em; color:rgba(255,255,255,0.6); line-height:1.5em; font-weight:800; letter-spacing:-0.04em; text-align:center;}

    #menuToggle {float:right; display:block; width:26px; height:22px; position:relative; margin-top:34px; z-index:30; transition:margin-top 0.5s;}
    #menuToggle span {display:block; width:100%; height:2px; background:#fff; position:absolute; right:0; transition:all 0.5s;}
    #menuToggle span:nth-child(1) {top:0;}
    #menuToggle span:nth-child(2) {top:50%; margin-top:-1px;}
    #menuToggle span:nth-child(3) {bottom:0; width:calc(100% - 10px)}

    #header.scroll_on {height:70px;}
    #header.scroll_on .h_member li a {line-height:70px;}
    #header.scroll_on #logo {margin-top:15px;}
    #header.scroll_on #menuToggle {margin-top:25px;}

    #header.active #all_gnb {right:0;}    

    #header.active #menuToggle span:nth-child(1) {transform:translateY(10px) rotate(45deg)}
    #header.active #menuToggle span:nth-child(2) {width:0;}
    #header.active #menuToggle span:nth-child(3) {width:100%; transform:translateY(-10px) rotate(-45deg)}
}

@media screen and (max-width:767px){
    #header {height:80px;}

    #header .h_lang > a {font-size:1.53em;}
    #header .h_lang ul li a {font-size:1.38em;}

    #header .h_sns {padding:0 20px; bottom:60px;}
    #header .h_sns li a img {max-width:28px;}

    #header .h_member {padding:0 20px;}
    #header .h_member li a {font-size:1.23em; line-height:80px;}

    #logo {width:118px; height:34px; margin-top:23px;}

    #all_gnb {width:188px; right:-188px;}
    #all_gnb .gnb_menu {margin-top:20px;}
    #all_gnb .gnb_menu > li {margin-bottom:20px;}
    #all_gnb .gnb_menu > li > a {font-size:1.53em;}
    #all_gnb .gnb_menu > li > ul > li > a {font-size:1.07em; line-height:1.7em;}

    #menuToggle {width:22px; height:18px; margin-top:31px;}
    #menuToggle span:nth-child(3) {width:calc(100% - 8px)}

    #header.scroll_on {height:60px;}
    #header.scroll_on .h_member li a {line-height:60px;}
    #header.scroll_on #logo {margin-top:13px;}
    #header.scroll_on #menuToggle {margin-top:20px;}

    #header.active #menuToggle span:nth-child(1) {transform:translateY(8px) rotate(45deg)}
    #header.active #menuToggle span:nth-child(3) {transform:translateY(-8px) rotate(-45deg)}
}



/* footer */
#footer {width:100%; position:relative;}
#footer .inner {position:absolute; left:50%; top:0; margin-left:-720px; text-align:center;z-index: 9;}
#footer .f_sns {display:flex; justify-content:center; align-items:center; margin:35px 0 40px;}
#footer .f_sns li {margin-right:60px;}
#footer .f_sns li:last-child {margin-right:0;}
#footer .f_sns li img {display:block; transition:transform 0.5s;}
#footer .f_sns li:hover img {transform:scale(1.1)}
#footer .f_info {display:flex; justify-content:center; align-items:center; width:100%; margin-top:70px;}
#footer .f_info li {margin-right:25px;}
#footer .f_info li:last-child {margin-right:0;}
#footer .f_info li a {display:block; font-size:1em; font-weight:800;}
#footer .copy {font-size:1em; color:rgba(255,255,255,0.5); font-weight:800; margin-top:10px;}

@media screen and (max-width:1440px){
    #footer .inner {left:40px; margin-left:0;}
}

@media screen and (max-width:1024px){
    #footer .f_logo img {width:216px;}
    #footer .f_sns {margin:25px 0;}
    #footer .f_sns li  {margin-right:25px;}
    #footer .f_sns li img {width:36px;}
    #footer .f_info {margin-top:50px;}
    #footer .f_info li {margin-right:20px;}
    #footer .f_info li a {font-size:1.06em;}
    #footer .copy {font-size:1.06em; margin-top:15px;}
}

@media screen and (max-width:767px){
    #footer {height:355px;}
    #footer .inner {left:20px;}
    #footer .f_logo img {width:186px;}
    #footer .f_sns {margin:20px 0 30px;}
    #footer .f_sns li img {width:32px;}
    #footer .f_info {margin-top:40px;}
    #footer .f_info li a {font-size:1.07em;}
    #footer .copy {font-size:1.07em; margin-top:10px;}
}

@media screen and (max-width:499px){
    #footer {height:auto;}
}


/* main */
.main_title .tit {font-size:3.75em; line-height:1.16em; font-weight:800;}
.main_title .txt {font-size:1.25em; line-height:1.5em; font-weight:700; margin-top:30px;}

@media screen and (max-width:1024px){
    .main_title .tit {font-size:2.53em;}
    .main_title .txt {font-size:1.2em; margin-top:20px;}
}

@media screen and (max-width:767px){
    .main_title .tit {font-size:2.46em;}
    .main_title .txt {font-size:1.23em; margin-top:10px;}
}

.app_btn {display:flex; justify-content:center; width:100%;}
.app_btn a {display:block; margin-right:25px;}
.app_btn a:last-child {margin-right:0;}
.app_btn a img {display:block; transition:transform 0.5s}
.app_btn a:hover img {transform:translateY(-10px)}

@media screen and (max-width:1024px){
    .app_btn a {width:180px; margin-right:20px;}
    .app_btn a img {width:100%;}
}

@media screen and (max-width:767px){
    .app_btn a {width:133px; margin-right:16px;}
}

.bgImg {width:100%; min-width:1920px; position:relative; left:50%; transform:translateX(-50%)}
.bgImg img {width:100%;}

img.tab_img, img.mo_img {display:none;}

@media screen and (max-width:1024px){
    .bgImg {min-width:768px;}
    img.tab_img {display:block;}
    img.pc_img {display:none}
}

@media screen and (max-width:767px){
    .bgImg {min-width:375px;}
    img.tab_img {display:none;}
    img.mo_img {display:block;}
}


#mVisu {width:100%; position:relative;}
#mVisu .bgImg {position:relative; top:0; z-index:3;}
#mVisu .bgImg2 {width:100%; min-width:1920px; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:4; animation:mVisu 1.5s linear infinite alternate;}
#mVisu .bgImg2 img {width:100%;}
#mVisu .motionImg {width:100%; height:100%; position:absolute; left:0; top:0; z-index:4}
#mVisu .motionImg > div {display:none; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0;}
#mVisu .motionImg > div.pc {display:block;}
#mVisu .motionImg > div img {display:block; width:92vw; position:absolute; left:56vw; top:-33vw; transform-origin:center center;}
#mVisu .motionImg > div img:nth-child(1) {animation:mVisuMotion1 12s linear infinite;}
#mVisu .motionImg > div img:nth-child(2) {animation:mVisuMotion2 12s linear infinite;}
#mVisu .txt_box {position:absolute; left:50%; top:15.5vw; margin-left:-720px; z-index:7;}
#mVisu .txt_box .tit {font-size:3.75em; line-height:1.16em; font-weight:800; letter-spacing:-0.025em; text-transform:uppercase;}
#mVisu .txt_box .txt {font-size:1.25em; line-height:1.5em; font-weight:700; margin-top:30px;}
#mVisu .txt_box .btn_box {display:block; width:237px; line-height:60px; background:rgba(0,0,0,0.4); border-radius:10px; font-size:1.25em; text-align:center; font-weight:800; margin-top:30px; transition:background 0.5s;}
#mVisu .txt_box .btn_box:hover {background:rgba(0,0,0,0.8)}
#mVisu .img1 {position:absolute; right:50%; top:700px; margin-right:400px; z-index:5;}
#mVisu .img2 {position:absolute; left:50%; top:470px; margin-left:500px; z-index:5;}

@keyframes mVisu {
    0% {top:0}
    100% {top:-15px;}
}

@keyframes mVisuMotion1 {
    0% {transform:rotate(0)}
    25% {transform:rotate(-20deg)}
    50% {transform:rotate(0)}
    75% {transform:rotate(20deg)}
    100% {transform:rotate(0)}
}

@keyframes mVisuMotion2 {
    0% {transform:rotate(0)}
    25% {transform:rotate(20deg)}
    50% {transform:rotate(0)}
    75% {transform:rotate(-20deg)}
    100% {transform:rotate(0)}
}

@media screen and (min-width:1921px){
    #mVisu .img1 {top:35vw;}
}

@media screen and (max-width:1440px){
    #mVisu .txt_box {left:40px; top:230px; margin-left:0;}
    #mVisu .img1 {right:auto; left:-100px; margin-right:0;}
    #mVisu .img2 {left:auto; right:0; margin-left:0;}
}

@media screen and (max-width:1024px){
    #mVisu .motionImg > div.pc {display:none;}
    #mVisu .motionImg > div.tab {display:block;}
    #mVisu .motionImg > div img {width:200vw; left:20vw; top:-58vw;}
    #mVisu .txt_box {text-align:center; top:170px;}
    #mVisu .txt_box .tit {font-size:2.53em;}
    #mVisu .txt_box .txt {font-size:1.2em; margin-top:25px;}
    #mVisu .txt_box .btn_box {width:210px; line-height:50px; background:rgba(0,0,0,0.8); font-size:1.2em; margin:440px auto 0;}
    #mVisu .img1 {width:50%; left:-20px; top:66vw;}
    #mVisu .img1 img {width:100%;}
    #mVisu .img2 {width:28%; transform:scaleX(-1); top:63vw;}
    #mVisu .img2 img {width:100%;}
}

@media screen and (max-width:767px){
    #mVisu .motionImg > div.tab {display:none;}
    #mVisu .motionImg > div.mo {display:block;}
    #mVisu .motionImg > div img {width:305vw; left:19vw; top:-94vw;}
    #mVisu .txt_box {left:20px; top:33vw;}
    #mVisu .txt_box .tit {font-size:2em;}
    #mVisu .txt_box .txt {min-height:4.5em; font-size:1.23em; margin-top:18px;}
    #mVisu .txt_box .btn_box {width:200px; line-height:45px; border-radius:12px; font-size:1.38em; margin-top:75vw;}
    #mVisu .img1 {width:50%; left:-40px; top:115vw;}
    #mVisu .img2 {width:32%; top:110vw;}
}

@media screen and (max-width:499px){
    #mVisu .txt_box {top:125px;}
    #mVisu .txt_box .btn_box {margin-top:255px;}
    #mVisu .img1 {width:60%;}
}


#mGames {width:100%; position:relative; margin-top:-428px; z-index:5;}
#mGames:before {content:''; display:block; width:100%; height:200%; background:url(../images/mGames_background1.png) no-repeat left bottom; background-size:100% auto; position:absolute; left:0; bottom:0; z-index:5; pointer-events:none;}
.mGames_slide {width:100%; height:100%; position:relative;}
.mGames_slide .swiper-slide {opacity:0 !important;}
.mGames_slide .swiper-slide-active {opacity:1 !important;}
.mGames_slide .img_box {width:100%; min-width:1920px; position:relative; left:50%; top:0; transform:translateX(-50%)}
.mGames_slide .img_box img {width:100%;}
.mGames_slide .txt_box {position:absolute; left:50%; top:440px; margin-left:-720px; z-index:30; overflow:hidden; text-align:center;}
.mGames_slide .txt_box > div {float:right; width:50%;}
.mGames_slide .txt_box .main_title .tit {text-transform:uppercase; opacity:0; transform:translateX(-50px)}
.mGames_slide .txt_box .main_title .txt {min-height:4.5em; opacity:0; transform:translateX(50px)}
.mGames_slide .txt_box .app_btn {margin-top:70px;}
.mGames_slide .txt_box .app_btn a {opacity:0;}
.mGames_slide .txt_box .stocks_btn {display:flex; justify-content:center; width:100%; margin-top:60px;}
.mGames_slide .txt_box .stocks_btn a {display:block; width:220px; line-height:63px; border:1px dashed rgba(255,255,255,0.7); border-radius:8px; font-size:1.5em; letter-spacing:-0.025em; font-weight:700; text-align:center; margin-right:25px; opacity:0;}
.mGames_slide .txt_box .stocks_btn a:last-child {margin-right:0;}
.mGames_slide .txt_box .web_btn {display:inline-block; font-size:1.5em; line-height:1.4em; letter-spacing:-0.025em; font-weight:700; margin-top:30px; opacity:0;}
.mGames_slide .txt_box .web_btn:after {content:''; display:inline-block; width:25px; height:13px; background:url(../images/mGames_icon1.png) no-repeat center center; background-size:contain; margin-left:8px; vertical-align:middle;}
.mGames_slide .swiper-button-next, .mGames_slide .swiper-button-prev {width:80px; height:80px; background-color:rgba(0,0,0,0.4); background-repeat:no-repeat; background-position:center center; background-size:19px 32px; border-radius:34px; top:565px; margin-top:0; transition:background-color 0.5s}
.mGames_slide .swiper-button-next {background-image:url(../images/icon_swiper_next.png); right:50%; margin-right:-800px;}
.mGames_slide .swiper-button-prev {background-image:url(../images/icon_swiper_prev.png); left:50%; margin-left:-800px;}
.mGames_slide .swiper-button-next:after, .mGames_slide .swiper-button-prev:after {display:none;}
.mGames_slide .swiper-button-next:hover, .mGames_slide .swiper-button-prev:hover {background-color:rgba(0,0,0,0.8)}

.mGames_slide .swiper-slide-active .txt_box .main_title .tit {opacity:1; transform:translateX(0); transition:all 1s; transition-property:opacity, transform;}
.mGames_slide .swiper-slide-active .txt_box .main_title .txt {opacity:1; transform:translateX(0); transition:all 1s 0.5s; transition-property:opacity, transform;}
.mGames_slide .swiper-slide-active .txt_box .app_btn a, .mGames_slide .swiper-slide-active .txt_box .stocks_btn a {opacity:1; transition:opacity 0.9s 1s;}
.mGames_slide .swiper-slide-active .txt_box .app_btn a:last-child, .mGames_slide .swiper-slide-active .txt_box .stocks_btn a:last-child {transition-delay:1.3s}
.mGames_slide .swiper-slide-active .txt_box .web_btn {opacity:1; transition:opacity 0.9s 1.4s;}

@media screen and (min-width:1921px){
    #mGames {margin-top:-22vw;}
    .mGames_slide .txt_box {top:21vw;}
    .mGames_slide .swiper-button-next, .mGames_slide .swiper-button-prev {top:29vw;}
}

@media screen and (max-width:1440px){
    .mGames_slide .txt_box {left:40px; top:250px; margin-left:0;}
}

@media screen and (max-width:1024px){
    #mGames {margin-top:-47vw;}
    #mGames:before {background-image:url(../images/mGames_background1_tab.png); opacity:0.4;}
    .mGames_slide .img_box {min-width:768px;}
    .mGames_slide .txt_box {top:105px;}
    .mGames_slide .txt_box > div {float:none; width:100%;}
    .mGames_slide .txt_box .app_btn {margin-top:30px;}
    .mGames_slide .txt_box .stocks_btn {margin-top:30px;}
    .mGames_slide .txt_box .stocks_btn a {width:180px; line-height:52px; font-size:1.46em; margin-right:20px;}
    .mGames_slide .txt_box .web_btn {font-size:1.46em; margin-top:20px;}
    .mGames_slide .txt_box .web_btn:after {width:23px; height:11px;}
    .mGames_slide .swiper-button-next, .mGames_slide .swiper-button-prev {width:50px; height:50px; background-color:rgba(0,0,0,0.6); background-size:10px 19px; border-radius:20px; bottom:35%;}
    .mGames_slide .swiper-button-next {right:40px; margin-right:0;}
    .mGames_slide .swiper-button-prev {left:40px; margin-left:0;}
}

@media screen and (max-width:767px){
    #mGames {margin-top:-68vw;}
    #mGames:before {display:none;}
    .mGames_slide .img_box {min-width:375px;}
    .mGames_slide .img_box.case2 {position:absolute; top:0;}
    .mGames_slide .txt_box {left:20px; top:36vw;}
    .mGames_slide .txt_box .app_btn {margin-top:20px;}
    .mGames_slide .txt_box .stocks_btn {margin-top:20px;}
    .mGames_slide .txt_box .stocks_btn a {width:133px; line-height:38px; font-size:1.23em; margin-right:16px;}
    .mGames_slide .txt_box .web_btn {font-size:1.23em; margin-top:15px;}
    .mGames_slide .txt_box .web_btn:after {width:14px; height:11px;}
    .mGames_slide .swiper-button-next, .mGames_slide .swiper-button-prev {width:40px; height:40px; background-color:rgba(0,0,0,0.6); background-size:9px 17px; border-radius:15px;}
    .mGames_slide .swiper-button-next {right:20px;}
    .mGames_slide .swiper-button-prev {left:20px;}
}



#mAbout {width:100%; position:relative; margin-top:-287px; margin-bottom:-243px;}
#mAbout .main_title .txt {min-height:3em;}
#mAbout .txt_box {position:absolute; left:50%; top:12vw; margin-left:-720px; z-index:10;}
#mAbout .txt_box .tit_box > div {opacity:0; visibility:visible; transition:all 0.5s; transition-property:opacity, visibility;}
#mAbout .txt_box .tit_box > div:first-child {position:relative; z-index:3;}
#mAbout .txt_box .tit_box > div:not(:first-child) {width:100%; position:absolute; left:0; top:0;}
#mAbout .txt_box .tit_box > div.active {opacity:1; visibility:visible; z-index:5;}
.mAbout_slide {width:100%; margin-top:120px;}
.mAbout_slide .swiper-slide {width:235px; position:relative; transition:all 0.5s;}
.mAbout_slide .swiper-slide div {width:100%; height:100%; background:#000; border-radius:30px; position:relative;}
.mAbout_slide .swiper-slide div:before {content:''; display:block; width:135px; height:75px; border-radius:50%; box-shadow:0 40px 50px rgba(24,20,108,0.4); position:absolute; left:50%; bottom:0; transform:translateX(-50%);}
.mAbout_slide .swiper-slide div .img_box {width:100%; height:405px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:28px; opacity:0.2; transition:all 0.5s; position:relative; z-index:5;}
.mAbout_slide .swiper-slide div p {display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:1.25em; color:rgba(255,255,255,0.6); border-radius:30px; letter-spacing:-0.025em; font-weight:800; text-align:center; position:absolute; left:0; top:0; z-index:10; transition:opacity 0.5s;}
.mAbout_slide .swiper-pagination {display:none;}
#mAbout .img1 {position:absolute; right:50%; top:2vw; margin-right:400px; z-index:20;}
#mAbout .img2 {position:absolute; left:50%; top:2vw; margin-left:430px; z-index:20;}

.mAbout_slide .swiper-slide:hover div .img_box {opacity:1;}
.mAbout_slide .swiper-slide:hover div p {opacity:0.6;}

@media screen and (min-width:1921px){
    #mAbout {margin-top:-15vw; margin-bottom:-12vw;}
}

@media screen and (min-width:1441px){
    .mAbout_slide .swiper-slide.active {width:320px; margin:-70px 30px 0;}
    .mAbout_slide .swiper-slide:first-child.active {margin-left:0;}
    .mAbout_slide .swiper-slide:last-child.active {margin-right:0;}
    .mAbout_slide .swiper-slide.active .img_box {height:550px; opacity:1;}
    .mAbout_slide .swiper-slide.active p {opacity:0;}
}

@media screen and (min-width:1025px) and (max-width:1440px){
    .mAbout_slide .swiper-slide.active {width:22%; margin:-2vw 0 0;}
    .mAbout_slide .swiper-slide.active .img_box {height:32vw; opacity:1;}
    .mAbout_slide .swiper-slide.active p {opacity:0;}
}

@media screen and (min-width:1025px){
    .mAbout_slide .swiper-wrapper {display:flex; justify-content:space-between; align-items:start; width:100%;}
}

@media screen and (max-width:1440px){
    #mAbout .txt_box {left:40px; margin-left:0;}
    .mAbout_slide .swiper-slide {width:calc(18% - 10px)}
    .mAbout_slide .swiper-slide div .img_box {height:28vw;}
}

@media screen and (max-width:1024px){
    #mAbout {margin-top:-22vw; margin-bottom:0;}
    #mAbout .txt_box {top:50%; transform:translateY(-50%)}
    .mAbout_slide {width:256px; height:443px; margin:60px auto 0;}
    .mAbout_slide .swiper-slide div {width:177px; height:311px; margin:65px auto 0; transition:all 0.5s;}
    .mAbout_slide .swiper-slide div .img_box {height:100%;}
    .mAbout_slide .swiper-slide-active div {width:100%; height:100%; margin-top:0;}
    .mAbout_slide .swiper-slide-active div .img_box {opacity:1;}
    .mAbout_slide .swiper-slide-active div p {opacity:0;}
    .mAbout_slide .swiper-pagination {display:block; bottom:-45px;}
    .mAbout_slide .swiper-pagination-bullet {width:6px; height:6px; border-radius:3px; background:#fff; opacity:0.5;}
    .mAbout_slide .swiper-pagination-bullet-active {width:15px; opacity:1;}
    #mAbout .img1 {width:45%; right:auto; left:-50px; top:5vw; margin-right:0;}
    #mAbout .img1 img {width:100%;}
    #mAbout .img2 {width:38%; left:auto; right:-50px; top:5vw; margin-left:0;}
    #mAbout .img2 img {width:100%;}
}

@media screen and (max-width:767px){
    #mAbout {margin-top:-50vw;}
    #mAbout .txt_box {left:20px; transform:translateY(-40%); /*padding-top:50px;*/}
    .mAbout_slide .swiper-slide div p {font-size:1.23em;}
    .mAbout_slide .swiper-slide-active div {width:100%; height:100%; margin-top:0;}
    .mAbout_slide .swiper-pagination {bottom:-35px;}
    #mAbout .img1 {width:70%; left:-100px; top:0;}
    #mAbout .img2 {width:45%; right:-40px; top:0;}
}

@media screen and (max-width:499px){
    #mAbout {margin-top:-64vw;}
    #mAbout .txt_box {transform:translateY(-50%)}
    .mAbout_slide {width:218px; height:373px; margin-top:30px;}
    .mAbout_slide .swiper-slide div {width:158px; height:274px; margin-top:48px;}
    .mAbout_slide .swiper-slide-active div {width:100%; height:100%; margin-top:0;}

}



#mCharacter {width:100%; position:relative;}
#mCharacter .inner {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:10}
#mCharacter .tab_box {display:flex; justify-content:center; width:100%; margin-top:30px; position:relative; z-index:10;}
#mCharacter .tab_box li {width:122px; height:122px; margin-right:20px;}
#mCharacter .tab_box li:last-child {margin-right:0;}
#mCharacter .tab_box li button {display:block; width:100%; height:100%; background:rgba(255,255,255,0.4); border-radius:30px; transition:all 0.5s; transition-property:background, transform;}
#mCharacter .tab_box li button img {max-width:100%;}
#mCharacter .tab_box li:hover button {transform:translateY(-10px)}
#mCharacter .tab_box li.active button {background:#fff; transform:translateY(-10px);}
.mCharacter_slide {text-align:center; position:relative;}
.mCharacter_slide .swiper-slide {opacity:0 !important;}
.mCharacter_slide .swiper-slide-active {opacity:1 !important;}
.mCharacter_slide .img_box {width:100%; height:550px; position:relative;}
.mCharacter_slide .img_box:before {content:''; display:block; width:1215px; height:980px; background:url(../images/mCharacter_shadow.png) no-repeat center center; background-size:contain; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.mCharacter_slide .img_box img {max-width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:5;}
.mCharacter_slide dl dt {font-size:3.75em; line-height:1.16em; font-weight:800; opacity:0; transform:translateX(-70px)}
.mCharacter_slide dl dd {font-size:1.25em; color:#fff; line-height:1.3em; font-weight:700; margin-top:20px; opacity:0; transform:translateX(70px)}
.mCharacter_slide .swiper-button-next, .mCharacter_slide .swiper-button-prev {width:50px; height:50px; background-color:rgba(0,0,0,0.4); background-repeat:no-repeat; background-position:center center; background-size:9px 17px; border-radius:22px; top:275px; transition:background-color 0.5s;}
.mCharacter_slide .swiper-button-next {background-image:url(../images/icon_swiper_next.png); right:50%; margin-right:-475px;}
.mCharacter_slide .swiper-button-prev {background-image:url(../images/icon_swiper_prev.png); left:50%; margin-left:-475px;}
.mCharacter_slide .swiper-button-next:after, .mCharacter_slide .swiper-button-prev:after {display:none;}
.mCharacter_slide .swiper-button-next:hover, .mCharacter_slide .swiper-button-prev:hover {background-color:rgba(0,0,0,0.8)}

.mCharacter_slide .swiper-slide-active dl dt {opacity:1; transform:translateX(0); transition:all 1s; transition-property:opacity, transform;}
.mCharacter_slide .swiper-slide-active dl dd {opacity:1; transform:translateX(0); transition:all 1s 0.2s; transition-property:opacity, transform;}

@media screen and (max-width:1024px){
    .mCharacter_slide .img_box {width:452px; height:400px; margin:0 auto;}
    .mCharacter_slide dl {max-width:610px; margin:0 auto;}
    .mCharacter_slide dl dt {font-size:2.53em;}
    .mCharacter_slide dl dd {font-size:1.2em;}
    .mCharacter_slide dl dd br {display:none;}
    .mCharacter_slide .swiper-button-next, .mCharacter_slide .swiper-button-prev {width:50px; height:50px; background-color:rgba(0,0,0,0.6); border-radius:20px; background-size:10px 19px; top:200px;}
    .mCharacter_slide .swiper-button-next {right:0; margin-right:0;}
    .mCharacter_slide .swiper-button-prev {left:0; margin-left:0;}
}

@media screen and (max-width:767px){
    #mCharacter .tab_box li {width:62px; height:62px; margin-right:6px;}
    #mCharacter .tab_box li button {border-radius:15px;}
    .mCharacter_slide .img_box {width:100%; height:75vw;}
    .mCharacter_slide dl dt {font-size:2.46em; }
    .mCharacter_slide dl dd {font-size:1.23em; margin-top:10px;}
    .mCharacter_slide .swiper-button-next, .mCharacter_slide .swiper-button-prev {width:30px; height:30px; background-color:rgba(0,0,0,0.6); background-size:7px 12px; border-radius:12px; top:32.5vw;}
}

@media screen and (max-width:499px){
    .mCharacter_slide .img_box {width:90%; height:300px;}
    .mCharacter_slide .img_box img {max-height:290px;}
    .mCharacter_slide .swiper-button-next, .mCharacter_slide .swiper-button-prev {top:150px;}

}



#mGallery {width:100%; position:relative;}
#mGallery .inner {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:10;}
.mGallery_slide {width:1200px; margin:60px auto 0; position:relative; padding-bottom:80px;}
.mGallery_slide .swiper-slide {box-shadow:0 50px 100px rgba(27,28,71,0.7); border-radius:40px; overflow:hidden; text-align:right; margin-top:73px;}
.mGallery_slide img {width:100%; max-width:933px; position:relative; z-index:5;}
.mGallery_slide .swiper-slide-active {margin-top:0;}
.mGallery_slide .swiper-slide-active img {max-width:100%;}
.mGallery_slide .swiper-slide-active ~ div {text-align:left;}
.mGallery_slide .swiper-button-next, .mGallery_slide .swiper-button-prev {width:50px; height:50px; background-color:rgba(0,0,0,0.4); background-repeat:no-repeat; background-position:center center; background-size:9px 17px; border-radius:22px; top:auto; bottom:50%; margin-top:0; z-index:30; transition:background-color 0.5s;}
.mGallery_slide .swiper-button-next {background-image:url(../images/icon_swiper_next.png); right:-80px;}
.mGallery_slide .swiper-button-prev {background-image:url(../images/icon_swiper_prev.png); left:-80px;}
.mGallery_slide .swiper-button-next:after, .mGallery_slide .swiper-button-prev:after {display:none;}
.mGallery_slide.swiper-container-horizontal>.swiper-pagination-bullets {bottom:0;}
.mGallery_slide .swiper-pagination-bullet {width:8px; height:8px; background:#fff; opacity:0.5; border-radius:4px;}
.mGallery_slide .swiper-pagination-bullet-active {width:20px; opacity:1;}
.mGallery_slide .swiper-button-next:hover, .mGallery_slide .swiper-button-prev:hover {background-color:rgba(0,0,0,0.8)}

@media screen and (max-width:1440px){
    .mGallery_slide {width:calc(100% - 160px)}
    .mGallery_slide .swiper-slide {margin-top:5%;}
    .mGallery_slide img {max-width:80%;}
    .mGallery_slide .swiper-slide-active {margin-top:0;}
}

@media screen and (max-width:1024px){
    #mGallery .inner {top:15%; transform:translateX(-50%)}
    .mGallery_slide {width:calc(100% - 80px); margin-top:40px; padding-bottom:55px;}
    .mGallery_slide .swiper-button-next, .mGallery_slide .swiper-button-prev {width:30px; height:30px; background-color:rgba(0,0,0,0.6); background-size:7px 12px; border-radius:12px; top:auto; bottom:-8px;}
    .mGallery_slide .swiper-button-next {right:50%; margin-right:-130px;}
    .mGallery_slide .swiper-button-prev {left:50%; margin-left:-130px;}
}

@media screen and (max-width:767px){
    #mGallery .inner {top:10%;}
    .mGallery_slide {width:calc(100% - 45px); height:455px; margin-top:30px;}
    .mGallery_slide .swiper-slide {border-radius:30px; height:93.5vw; margin-top:6.65vw;}
    .mGallery_slide img {width:auto; max-width:none; height:100%; position:absolute; left:50%; top:0; transform:translateX(-50%)}
    .mGallery_slide .swiper-slide-active {height:106.8vw; margin-top:0;}
    .mGallery_slide .swiper-slide-active img {max-width:none;}
}



#mThethys {width:100%; position:relative;}
#mThethys .box {width:100%; height:100%; position:absolute; left:0; bottom:0;}
.mThethys_slide {width:100%; height:100%; position:relative;}
.mThethys_slide .swiper-slide {opacity:0 !important;}
.mThethys_slide .swiper-slide-active {opacity:1 !important;}
.mThethys_slide .img_box {width:100%; min-width:1920px; position:absolute; left:50%; bottom:0; transform:translateX(-50%)}
.mThethys_slide .img_box img {width:100%}
.mThethys_slide .img_box.case1 .img1 {position:absolute; left:0; top:0; z-index:4;}
.mThethys_slide .img_box.case1 .img2 {position:absolute; left:0; top:0;}
.mThethys_slide .img_box.case1 .img3 {position:absolute; left:0; top:0; transform-origin:right center; animation-delay:0.2s;}
.mThethys_slide .img_box.case2 {height:100%;}
.mThethys_slide .img_box.case2 img {width:50%; position:absolute; left:47%; top:0;}
.mThethys_slide .img_box.case3 .img1 {width:717px; position:absolute; left:1041px; top:315px;}
.mThethys_slide .txt_box {position:absolute; left:50%; bottom:50%; margin:0 0 -20px -720px;}
.mThethys_slide dl dt {font-size:3.75em; line-height:1.16em; font-weight:800; opacity:0; transform:translateX(70px)}
.mThethys_slide dl dd {font-size:1.5em; line-height:1.4em; letter-spacing:-0.025em; font-weight:700; margin-top:20px; opacity:0; transform:translateX(70px)}
.mThethys_slide .swiper-button-next, .mThethys_slide .swiper-button-prev {width:50px; height:50px; background-color:rgba(0,0,0,0.4); background-repeat:no-repeat; background-position:center center; background-size:9px 17px; border-radius:22px; top:50%; margin-top:70px; transition:background-color 0.5s;}
.mThethys_slide .swiper-button-next {background-image:url(../images/icon_swiper_next.png); right:auto; left:50%; margin-left:-650px;}
.mThethys_slide .swiper-button-prev {background-image:url(../images/icon_swiper_prev.png); left:50%; margin-left:-720px;}
.mThethys_slide .swiper-button-next:after, .mThethys_slide .swiper-button-prev:after {display:none;}
.mThethys_slide.swiper-container-horizontal>.swiper-pagination-bullets {display:none; bottom:11%;}
.mThethys_slide .swiper-pagination-bullet {width:6px; height:6px; border-radius:3px; background:#fff; opacity:0.5;}
.mThethys_slide .swiper-pagination-bullet-active {width:15px; opacity:1;}
.mThethys_slide .swiper-button-next:hover, .mThethys_slide .swiper-button-prev:hover {background-color:rgba(0,0,0,0.8)}

.mThethys_slide .swiper-slide-active dl dt {opacity:1; transform:translateX(0); transition:all 1s; transition-property:opacity, transform;}
.mThethys_slide .swiper-slide-active dl dd {opacity:1; transform:translateX(0); transition:all 1s 0.2s; transition-property:opacity, transform;}

.mThethys_slide .swiper-slide-active .img_box.case1 .img2, .mThethys_slide .swiper-slide-active .img_box.case1 .img3 {animation-name:mThethys_slide; animation-duration: 1s; animation-fill-mode: both;}
.mThethys_slide .swiper-slide-active .img_box.case2 img {animation-duration: 1s; animation-fill-mode: both; animation-name: mThethys_slide;}
.mThethys_slide .swiper-slide-active .img_box.case2 img:last-child {animation-delay:0.3s}
.mThethys_slide .swiper-slide-active .img_box.case3 .img1 {animation-duration: 1s; animation-fill-mode: both; animation-name: mThethys_slide;}

@keyframes mThethys_slide{
    0%{opacity:0; transform:scale(0)}
    50%{opacity:1; transform:scale(1.1)}
    100%{opacity:1; transform:scale(1)}
}

@media screen and (min-width:1921px){
    .mThethys_slide .img_box.case3 .img1 {width:37vw; left:54vw; top:16vw;}
}

@media screen and (max-width:1440px){
    .mThethys_slide .txt_box {left:40px; margin-left:0;}
    .mThethys_slide .swiper-button-next {left:110px; margin-left:0;}
    .mThethys_slide .swiper-button-prev {left:40px; margin-left:0;}
}

@media screen and (max-width:1024px){
    .mThethys_slide .img_box {min-width:767px; left:auto; right:0; transform:translateX(0)}
    .mThethys_slide .img_box.case2 img {width:100%; left:0;}
    .mThethys_slide .img_box.case3 .img1 {width:70vw; left:13vw; top:30vw;}
    .mThethys_slide .txt_box {text-align:center; bottom:auto; top:70%; margin:0;}
    .mThethys_slide dl dt {font-size:2.53em;}
    .mThethys_slide dl dd {font-size:1.2em }
    .mThethys_slide .swiper-button-next, .mThethys_slide .swiper-button-prev {background-color:rgba(0,0,0,0.6); top:30%;}
    .mThethys_slide .swiper-button-next {left:auto; right:40px; margin-left:0;}
    .mThethys_slide .swiper-button-prev {left:40px; margin-left:0;}
    .mThethys_slide.swiper-container-horizontal>.swiper-pagination-bullets {display:block;}
}

@media screen and (max-width:767px){
    .mThethys_slide .img_box {min-width:375px;}
    .mThethys_slide .img_box.case1 img {position:relative; top:-20px;}
    .mThethys_slide .img_box.case2 {width:122%; right:50%; bottom:auto; top:7%; transform:translateX(50%)}
    .mThethys_slide .img_box.case3 .img1 {width:83vw; left:7vw; top:53vw;}
    .mThethys_slide .swiper-slide-active .img_box.case2 img:last-child {top:2%; left:3%;}
    .mThethys_slide .txt_box {left:20px; top:60%; margin-top:-20px;}
    .mThethys_slide dl dt {font-size:2.46em;}
    .mThethys_slide dl dd {font-size:1.23em; margin-top:10px;}
    .mThethys_slide .swiper-button-next, .mThethys_slide .swiper-button-prev {width:30px; height:30px; background-color:rgba(0,0,0,0.6); background-size:7px 12px; border-radius:12px; top:27%;}
    .mThethys_slide .swiper-button-next {right:20px;}
    .mThethys_slide .swiper-button-prev {left:20px;}
    .mThethys_slide.swiper-container-horizontal>.swiper-pagination-bullets {bottom:50%; margin-bottom:-320px;}

}

@media screen and (max-width:499px){
    .mThethys_slide.swiper-container-horizontal>.swiper-pagination-bullets {bottom:11%; margin-bottom:0;}
}



.popup_wrap {display:none; justify-content:center; align-items:center; width:100%; height:100vh; background:rgba(0,0,0,0.7); position:fixed; left:0; top:0; z-index:350;}
.popup_wrap.on {display:flex;}
.popup_inner {width:1280px; position:relative;}
.popup_inner .close_btn {display:block; width:28px; height:28px; position:absolute; right:6px; bottom:100%; margin-bottom:15px;}
.popup_inner .close_btn:before, .popup_inner .close_btn:after {content:''; display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; top:50%;}
.popup_inner .close_btn:before {transform:rotate(45deg)}
.popup_inner .close_btn:after {transform:rotate(-45deg)}
.popup_inner iframe {width:100%; height:720px;}

@media screen and (max-width:1280px){
    .popup_inner {width:calc(100% - 80px)}
    .popup_inner .close_btn {right:0;}
    .popup_inner iframe {height:50.3vw;}
}

@media screen and (max-width:767px){
    .popup_inner {width:calc(100% - 40px)}
}



/* top */
.gotop { display: none; overflow: hidden; position:fixed; right:0; bottom:60px; width:60px; height:60px; margin-right:60px; z-index:999; background-color: #fff; border-radius: 25px; box-shadow: 0px 15px 30px 0 rgba(0, 0, 0, 0.3); }
.gotop:before { display: block; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 19px; height: 26px; background: url(../images/top_btn.png) no-repeat center center/cover; transition: top .6s ease; }
.gotop:after { display: block; content: ""; position: absolute; top: 150%; left: 50%; transform: translate(-50%, -50%); width: 19px; height: 26px; background: url(../images/top_btn.png) no-repeat center center/cover; transition: top .6s ease; }
.gotop:hover:before {top: -150%;}
.gotop:hover:after {top: 50%;}

@media screen and (max-width:1024px){
    .gotop { bottom:60px; width:50px; height:50px; margin-right:40px; border-radius: 20px; }
    .gotop:before,.gotop:after { width: 15px; height: 21px;}  
}

@media screen and (max-width:768px){
    .gotop { width: 40px; height: 40px; bottom:40px; margin-right:16px; border-radius: 16px; }
    .gotop:before,.gotop:after { width: 13px; height: 17px;}
}



.bubble_cont {height: 100vh; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.bubble_cont .bubble {width: 13px; height: 13px; background: #f2f6fd ; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
/* bubble keyframes */
@-webkit-keyframes animateBubble {
    0% {margin-top: 1000px;}
    100% {margin-top: -100%;}
}
@-moz-keyframes animateBubble {
    0% {margin-top: 1000px;}
    100% {margin-top: -100%;}
}
@keyframes animateBubble {
    0% {margin-top: 1000px;}
    100% {margin-top: -100%;}
}
@-webkit-keyframes sideWays { 
    0% {margin-left:0px;}
    100% {margin-left:50px;}
}
@-moz-keyframes sideWays { 
    0% {margin-left:0px;}
    100% {margin-left:50px;}
}
@keyframes sideWays { 
    0% {margin-left:0px;}
    100% {margin-left:50px;}
}
/* bubble animation */
.x1 {-webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 0; top: 5%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6);}
.x2 {-webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 5%; top: 80%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4);}
.x3 {-webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 10%; top: 40%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7);}
.x4 {-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 20%; top: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3);}
.x5 {-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 30%; top: 50%; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5);}
.x6 {-webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 50%; top: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8);}
.x7 {-webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 65%; top: 70%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4);}
.x8 {-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 80%; top: 10%; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3);}
.x9 {-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 90%; top: 50%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6);}
.x10 {-webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 80%;  top: 80%; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3);}
.x11 {-webkit-animation: animateBubble 35s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 35s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 35s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 20%; top: 25%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4);}
.x12 {-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 5%; top: 10%; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2);}
.x13 {-webkit-animation: animateBubble 38s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 38s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 38s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 85%; top: 15%; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5);}
.x14 {-webkit-animation: animateBubble 32s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 32s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 32s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 95%; top: 55%; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2);}
.x15 {-webkit-animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 70%; top: 75%; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3);}
.x16 {-webkit-animation: animateBubble 31s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 31s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 31s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 55%; top: 50%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6);}
.x17 {-webkit-animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 35%; top: 55%; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2);}
.x18 {-webkit-animation: animateBubble 32s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 32s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 32s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 15%; top: 45%; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1);}
.x19 {-webkit-animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 25%; top: 5%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4);}

@media screen and (max-width:1024px){
    .x1 {-webkit-animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;}
    .x2 {-webkit-animation: animateBubbl13 5s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble135s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 13s linear infinite, sideWays 4s ease-in-out infinite alternate;}
    .x3 {-webkit-animation: animateBubble713s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 73s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 17s linear infinite, sideWays 2s ease-in-out infinite alternate;}
    .x4 {-webkit-animation: animateBub11le 7s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubbl11 7s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 11s linear infinite, sideWays 3s ease-in-out infinite alternate;}
    .x5 {-webkit-animation: animateBubb8e 14s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble814s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 18s linear infinite, sideWays 4s ease-in-out infinite alternate;}
    .x6 {-webkit-animation: animateB14bble 6s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubb14e 6s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 14s linear infinite, sideWays 2s ease-in-out infinite alternate;}
    .x7 {-webkit-animation: animat13Bubble 5s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBub13le 5s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 13s linear infinite, sideWays 2s ease-in-out infinite alternate;}
    .x8 {-webkit-animation: anima5eBubble 7s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBub5le 7s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 15s linear infinite, sideWays 3s ease-in-out infinite alternate;}
    .x9 {-webkit-animation: animate9ubble 15s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubb9e 15s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;}
    .x10 {-webkit-animation: animate7ubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubb7e 11s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 17s linear infinite, sideWays 2s ease-in-out infinite alternate;}
    .x11,.x12,.x13,.x14,.x15,.x16,.x17,.x18,.x19 {display: none;}

    /* bubble keyframes */
    @-webkit-keyframes animateBubble {
        0% {margin-top: 700px;}
        100% {margin-top: -100%;}
    }
    @-moz-keyframes animateBubble {
        0% {margin-top: 700px;}
        100% {margin-top: -100%;}
    }
    @keyframes animateBubble {
        0% {margin-top: 700px;}
        100% {margin-top: -100%;}
    }   
}