@charset "utf-8";
@import url(reset.css);
@import url(noto.css);

.wrap{height: 100%; overflow: hidden;}
.wrap .left_box{width: 37.5%; float: left; height: 100%; text-align: center; background: #ae8f6e url(../img/logo.png) no-repeat center; text-indent:-9999px; background-size: 35.41%;}
.wrap .right_box{width: 62.5%; float: left; height: 100%; position: relative;; }
.wrap .right_box:before{content:''; position: absolute;top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_1.jpg) no-repeat; background-size:cover; opacity:1; transition:.5s; z-index: 1; }
.wrap .right_box.bg1:before{content:''; position: absolute;top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_2.jpg) no-repeat; background-size:cover; opacity:1; transition:.5s; z-index: 1; }
.wrap .right_box.bg2:before{content:''; position: absolute;top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_3.jpg) no-repeat; background-size:cover; opacity:1; transition:.5s; z-index: 1;}
.wrap .right_box.bg3:before{content:''; position: absolute;top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_4.jpg) no-repeat; background-size:cover; opacity:1; transition:.5s; z-index: 1;}
.wrap .right_box.bg4:before{content:''; position: absolute;top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_5.jpg) no-repeat; background-size:cover; opacity:1; transition:.5s; z-index: 1;}
.wrap .right_box_wrap{position: relative; height: 100%; z-index: 2; padding-left: 5vw; display: flex;flex-direction: column;justify-content: center;}
.wrap .right_box h2{color: #fff; font-size: 2.4vw;  letter-spacing: -0.4px; font-weight: 700; position: relative;}
.wrap .right_box p{color: #fff; font-size: 1.09vw; line-height: 1.43; letter-spacing: -0.4px; font-weight: 700;	margin-top: 2.22vh; position: relative; }
.wrap .right_box .search{margin-top: 1.27vh;}
.wrap .right_box .search ul li a{font-weight: 700; color: #fff;  padding: 3.33vh 0 0; font-size: 1.4vw; position: relative;line-height: 1; letter-spacing: -0.1px; display:inline-block;  }
.wrap .right_box .search ul li.li_nl a:before{content:'';position: absolute;width: 6.25vw;height: 6.25vw;background: url(../img/hover_logo5.png) no-repeat;top:50%;margin-top: -2.12vw;right: -13.9vw;opacity: 0;transition:.3s;background-size: 100% auto;}
.wrap .right_box .search ul li.li_nanet a:before{content:''; position: absolute; width: 6.25vw; height: 6.25vw; background: url(../img/hover_logo6.png) no-repeat; top:50%; margin-top: -2.12vw; right: -13.9vw; opacity: 0; transition:.3s; background-size: 100% auto;}
.wrap .right_box .search ul li.li_mimo a:before{content:''; position: absolute; width: 6.25vw; height: 6.25vw; background: url(../img/hover_logo1.png) no-repeat ; top:50%; margin-top: -2.12vw; right: -13.9vw; opacity: 0; transition:.3s; background-size: 100% auto;}
.wrap .right_box .search ul li.li_em a:before{content:''; position: absolute; width: 6.25vw; height: 6.25vw; background: url(../img/hover_logo2.png) no-repeat; top:50%;margin-top: -2.12vw; right: -13.9vw; opacity: 0; transition:.3s; background-size: 100% auto;}
.wrap .right_box .search ul li.li_kp a:before{content:''; position: absolute; width: 6.25vw; height: 6.25vw; background: url(../img/hover_logo3.png) no-repeat; top:50%; margin-top: -2.12vw ;right: -13.9vw; opacity: 0; transition:.3s; background-size: 100% auto;}
.wrap .right_box .search ul li.li_sib a:before{content:''; position: absolute; width: 6.25vw; height: 6.25vw; background: url(../img/hover_logo4.png) no-repeat; top:50%; margin-top: -2.12vw; right: -13.9vw; opacity: 0; transition:.3s; background-size: 100% auto;}
.wrap .right_box .search ul li.li_DBpia a:before{content:''; position: absolute; width: 6.25vw; height: 6.25vw; background: url(../img/hover_logo7.png) no-repeat; top:50%; margin-top: -2.12vw; right: -13.9vw; opacity: 0; transition:.3s; background-size: 100% auto;}
.wrap .right_box .search ul li.li_article a:before{content:''; position: absolute; width: 6.25vw; height: 6.25vw; background: url(../img/hover_logo8.png) no-repeat; top:50%; margin-top: -2.12vw; right: -13.9vw; opacity: 0; transition:.3s; background-size: 100% auto;}
.wrap .right_box .search ul li.li_kiss a:before{content:''; position: absolute; width: 6.25vw; height: 6.25vw; background: url(../img/hover_logo9.png) no-repeat; top:50%; margin-top: -2.12vw; right: -13.9vw; opacity: 0; transition:.3s; background-size: 100% auto;}

.wrap .right_box .search ul li span{font-weight: 500; font-size: 0.8vw; display: block;color: #e0e0e0;margin-top: 8px; position: relative;}
.wrap .right_box .search .other_link{font-size: 0.8vw;font-weight: 500;display: block;text-align: right;color: #fff;  position: absolute;right: 32px;bottom: 32px; text-decoration: underline;}

/*hover*/
.wrap .right_box .search ul li:hover a:after{opacity: 1;}
.wrap .right_box .search ul li:hover a:before{opacity: 1;}
.wrap .right_box .search ul li:hover a{ background: #1792da; background: -webkit-linear-gradient(left, #83d597 , #1792da );background: -moz-linear-gradient(right, #83d597 , #1792da ); background:  -o-linear-gradient(right, #83d597 , #1792da ); background: linear-gradient(to right, #83d597 , #1792da ); -webkit-background-clip: text;-moz-background-clip: text;  background-clip: text; color: transparent;}