@charset "utf-8";
body { font-size:14px; background:#FFF; }
body, html, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, th, td, form, object, iframe, blockquote, pre, a, abbr, address, code, img, fieldset, form, label, figure { margin:0; padding:0; }
body, html, input, button, textarea { color:#333; font-family:Arial, Helvetica, sans-serif;line-height:1.5 }
body{background-color: #fff; overflow-x:hidden}
article, aside, figcaption, figure, footer, header, main, nav, section { display:block; }
h1 { font-size:20px; }
h2 { font-size:18px; }
h3 { font-size:16px; }
h4, h5 { font-size:14px; }
img { border:none; vertical-align:middle; max-width:100%; }
li { list-style:none; }
i, em { font-style:normal; }
a { color:#333; text-decoration:none; }
a:focus { outline:none; }
a:hover { color:#fee953; text-decoration:none; }
input[type="text"]:focus { outline:none; }
input[type="button"], input[type="reset"], input[type="submit"] { cursor:pointer; }
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {border:none;padding:0;}
hr { height:1px; border:none; border-top:1px dashed #c1c1c1; margin:15px 0 15px 0; }
a:active, select, input, textarea { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); -webkit-tap-highlight-color:transparent; outline:0!important; }
* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; outline: 0; }


/* clear floating */
.clearfix:after,.layout:after,.sys_row:after,
.web_main:after,.page_main:after, .nav_wrap .head_nav:after,.items_list ul:after,.cate_items ul:after,
.ad_items:after,
.foot_items:after,.nav_wrap:after,.web_head:after{ content:""; display:block; clear:both; visibility:hidden; height:0;}
.clearfix,.layout,.sys_row,
.web_main,.page_main, .nav_wrap .head_nav,.cate_items ul,.items_list ul,
.ad_items,
.foot_items,.nav_wrap,.web_head{ *zoom:1;}
.clear { clear:both; }

/* layout */
.z9999 { z-index:9999!important; }
.container{}
.layout{width:1450px; margin:0 auto; position:relative;}
/*.page_main .layout{width: 1240px;}*/
.hide{display: none;}
body { width:100%;max-width:1920px; margin:0 auto;}
/* font-family */
.side-cate li .icon-cate:before, .product-btn-wrap a:before, .mobile-head-item .title:before, .head_nav > li:after, .download-item .item-button:before, .faq-item .faq-title:before{ font-family: "fontawesome"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; font-variant: normal; text-transform: none; }
.btn_more:after,
.head-search .search-btn:before,.web_head .btn--search:before,.swiper-button-next:before, .swiper-button-prev:before,
.index_company_intr .company_intr_title:before,
.foot_txt_list li:before{font-family: 'fontawesome';}

/*transition*/
a{-webkit-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.page_container{ background:#f4f4f4;}
/*guide*/
body.guide{ width:100%; height:100vh;background-repeat:no-repeat; background-position:center center; background-size:cover;}
body.guide .logo{ position:fixed;left:4.2%;z-index:99}
body.guide .logo img{ height:114px;}
.guide_page01,.guide_page02{ position:fixed; width:50%; height:100vh; left:0; top:0; overflow:hidden; }
.guide_page01:hover,.guide_page02:hover{ background-size:115% auto;}
.guide_page01 span,.guide_page02 span{ display:none; position:absolute; width:80%; height:80%; left:10%; top:10%; border:1px solid #FFF;}
.guide_page02{ left:auto; right:0;}
.guide_page01:before, .guide_page02:before{ content:""; position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden;-webkit-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.guide_page01:hover:before, .guide_page02:hover:before{opacity:1; visibility:visible}
@keyframes levitate01{0%{transform:translate3d(-5px,-10px,0);}50%{transform:translate3d(5px,10px,0);}100%{transform:translate3d(-5px,-10px,0);}} 
@keyframes levitate02{0%{transform:translate3d(5px,10px,0);}50%{transform:translate3d(-5px,-10px,0);}100%{transform:translate3d(5px,10px,0);}} 
.guide_page01 .pc{ position:fixed; left:4%; top:30%;-moz-transition-duration:.5s;-webkit-transition-duration:.5s; -o-transition-duration:.5s; -ms-transition-duration:.5s;transition-duration:.5s;
 }
.guide_page02 .pc{ position:fixed; right:3.5%; bottom:14%; -moz-transition-duration:.5s;-webkit-transition-duration:.5s; -o-transition-duration:.5s; -ms-transition-duration:.5s;transition-duration:.5s;
 }
.guide_page01:hover .pc{animation:levitate01 4s ease-in-out infinite forwards}
.guide_page02:hover .pc{animation:levitate02 4s ease-in-out infinite forwards}


.bubble { position:fixed; width:100%; height:100%; left:0; top:0; z-index:999;pointer-events:none;}
 
.bubble span {position: absolute;bottom: 0;opacity: 0; display: block; background-repeat:no-repeat; background-position:center center; background-size:100% auto}

.bubble span:nth-child(1) {left:15%;width: 161px;height: 161px;background-image:url(img/bubble/02.png); animation: lightAni 9s 1s linear infinite;}
.bubble span:nth-child(2) {left:30%;width: 78px;height: 78px;background-image:url(img/bubble/04.png);animation: lightAni 7s 2.2s linear infinite;}
.bubble span:nth-child(3) {left:45%;width: 123px;height: 123px;background-image:url(img/bubble/03.png);animation: lightAni 8s 2s linear infinite;}
.bubble span:nth-child(4) {left:60%;width: 265px;height: 265px;background-image:url(img/bubble/01.png);animation: lightAni 10s linear infinite;}
.bubble span:nth-child(5) {left:75%;width: 73px;height: 73px;background-image:url(img/bubble/05.png);animation: lightAni 6s 0.5s linear infinite;}
.bubble span:nth-child(6) {left:90%;width: 50px;height: 50px;background-image:url(img/bubble/06.png);animation: lightAni 5s 1.5s linear infinite;}

.bubble span:nth-child(7) {left:68%;width: 161px;height: 161px;background-image:url(img/bubble/02.png); animation: lightAni 9s 2.2s linear infinite;}
.bubble span:nth-child(8) {left:53%;width: 78px;height: 78px;background-image:url(img/bubble/04.png);animation: lightAni 7s 1s linear infinite;}
.bubble span:nth-child(9) {left:38%;width: 123px;height: 123px;background-image:url(img/bubble/03.png);animation: lightAni 8s linear infinite;}
.bubble span:nth-child(10) {left:23%;width: 265px;height: 265px;background-image:url(img/bubble/01.png);animation: lightAni 10s 5.2s linear infinite;}


 
@keyframes lightAni {
  0% {
    opacity: 0.5;
    transform: translate(0,200px);
  }
  50% {
    opacity: 1;
    transform: translate(-110px,-50vh);
  }
  100% {
    opacity: 0;
    transform: translate(-120px,-100vh);
  }
}
@media screen and (max-width: 768px) {
.pc{ display:none;}
.bubble{ display:block;} 
.bubble span:nth-child(1) {left:15%;width: 61px;height: 61px;background-image:url(img/bubble/02.png); animation: lightAni 9s 1s linear infinite;}
.bubble span:nth-child(2) {left:30%;width: 78px;height: 78px;background-image:url(img/bubble/04.png);animation: lightAni 7s 2.2s linear infinite;}
.bubble span:nth-child(3) {left:45%;width: 23px;height: 23px;background-image:url(img/bubble/03.png);animation: lightAni 8s 2s linear infinite;}
.bubble span:nth-child(4) {left:60%;width: 65px;height: 65px;background-image:url(img/bubble/01.png);animation: lightAni 10s linear infinite;}
.bubble span:nth-child(5) {left:75%;width: 73px;height: 73px;background-image:url(img/bubble/05.png);animation: lightAni 6s 0.5s linear infinite;}
.bubble span:nth-child(6) {left:90%;width: 50px;height: 50px;background-image:url(img/bubble/06.png);animation: lightAni 5s 1.5s linear infinite;}

.bubble span:nth-child(7) {left:68%;width: 61px;height: 61px;background-image:url(img/bubble/02.png); animation: lightAni 9s 2.2s linear infinite;}
.bubble span:nth-child(8) {left:53%;width: 78px;height: 78px;background-image:url(img/bubble/04.png);animation: lightAni 7s 1s linear infinite;}
.bubble span:nth-child(9) {left:38%;width: 23px;height: 23px;background-image:url(img/bubble/03.png);animation: lightAni 8s linear infinite;}
.bubble span:nth-child(10) {left:23%;width: 65px;height: 65px;background-image:url(img/bubble/01.png);animation: lightAni 10s 5.2s linear infinite;}
body.guide{ background:rgba(88,186,235,.5) !important}
body.guide .logo{ display:none;}
.guide_page01, .guide_page02{ width:100%; height:50vh; display:flex; align-items:center;flex-wrap:wrap;justify-content:center;}
.guide_page02{ left:0; top:50vh;}
.guide_page01:before, .guide_page02:before{ display:none;}
.guide_page01 span,.guide_page02 span{display:flex; align-items:center;flex-wrap:wrap;justify-content:center;color:#FFF; font-size:42px; text-align:center;}
}
@media screen and (max-width: 414px) {
.guide_page01 span,.guide_page02 span{font-size:30px;}	
}