@charset "utf-8";
body,form,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,p,hr,input,em{margin:0;padding:0;list-style:none;-webkit-text-size-adjust:none; vertical-align: middle; font-weight:normal;}
body{ font-size:14px; color:#000;  font-family:'\5FAE\8F6F\96C5\9ED1','Nanum Gothic','-apple-system';}
h1,h2,h3,h4,h5,h6{font-size:100%}
table,img,iframe{border:none}ul{list-style:none}
a{ color:#333; text-decoration:none;outline:none;}
a:hover {color:#ff2626;text-decoration:none;}
a:active {color:#000;text-decoration:none;}
ol,ul {list-style:none;}
fieldset,img {border:0;}
i,em{ font-style:normal;}
.left{ float:left;}
.right{float:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}/* Hides from IE-mac \*/
* html .clearfix{height:1%;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
.mt10{ margin-top:10px;}
.mt20{ margin-top:20px;}
.mt25{ margin-top:25px;}
.mt30{ margin-top:30px;}
.mt35{ margin-top:35px;}
.mt40{ margin-top:40px;}
.mt45{ margin-top:45px;}
.mt55{ margin-top:55px;}
.mt60{ margin-top:60px;}
.mr30{ margin-right:30px;}
.w1170{width: 1170px;margin-left: auto;margin-right: auto;height:  auto;overflow: hidden;}
.bk1,.bk2,.bk3,.bk4{overflow:hidden; height: auto;}
.trans{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
.trans:hover{transform:scale(1.04,1.04);-ms-transform:scale(1.04,1.04);-webkit-transform:scale(1.04,1.04);transition:1s}
body{background: #333; }
img{vertical-align: top;}
/*****************************************************************************************************************************/
.yy_wk750{width:auto;margin-left: auto;margin-right: auto;height:  auto;background: #fff;}
.yy_wk750 img{width:100%;height:100%;}
.wh{white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }

/*loding*/
.yy_minw{position: relative; }
.yy_loding{width:100%;height: 100vh; margin-left:auto;margin-right:auto; position: fixed; top: 0; z-index: 99999; background: #fff;}
.yy_loding img{display: block; width: 200px; height: auto; margin: 0 auto; padding-top:20vh;}
.yy_cont{display:none; width: 100%;margin-left:auto;margin-right:auto;}

.title{width:100%;height: auto; padding: 15px 0; border-bottom: 1px solid #f5f3f3; margin-bottom: 35px;}
.title h2{width:100%;height: auto;text-align: center; font-size: 30px; font-weight: bold;}

.ry{width:300px;height:100%; text-align: center; font-size: 16px; background: #fff; text-align: center; float: left;display: flex;justify-content: center;align-items: center; line-height: 38px;}

.wh{height: 60vh; margin-top: 20vh;}
.show_img,.show_img1{position: relative; width: 650px; height:100%; float: left;}
.show_img img{position:absolute; top: 0; left: 0; cursor: pointer; width:auto; height: 100%;}
.show_img1 img{width:auto; height: 100%;}



.img_fadein{
    position:absolute;
    top:0;
    left: 0;
    opacity:1;
    transition: opacity 2s;
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    z-index: 1000;
    float: left;
    }

.img_fadeout{position:absolute; top:0; left: 0; opacity: 0;
    transition: opacity 2s;
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s; }



@media screen and (max-width:900px){
	.yy_wk750{width: 100%;}
	.yy_loding{width:100%;}
	.yy_loding img{width:20%;}
	.yy_cont{width: 90%;}
	body{background: #fff;}
	.wh{height:auto; margin-top: 0;}
	.yy_loding img.no-top{padding-top: 2px;}
}



@media screen and (orientation: portrait) {
    html{
        width : 100vmin;
         height : auto;
    }
    body{
        width : 100vmin;
        height : auto;
    }
    #gyroContain{
        width : 100vmax;
        height : auto;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    }
  }
@media screen and (orientation: landscape) {
    html{
        width : 100vmax;
         height : auto;
    }
    body{
        width : 100vmax;
         height : auto;
    }
    #gyroContain{
        width : 100vmax;
        height : auto;
    }
}
















