html{
    font-size:62.5%;
}
body{
    font-family: Microsoft Yahei;
    margin:0;
    overflow-y:overlay;
}
.canvas{
    background-color: #2e75b6;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    align-content: flex-start;
    width: 90%;
    max-width:922px;
    min-width:710px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom:20px;
    border: 1px solid #dcdcdc;
    box-shadow: -1px -1px 5px 0px #c7c7c7;
}
.left{
    flex: 1;
    background: #ffffff;
    text-align: right;
    border-right:1px solid #2e75b6;
    padding-right: 13px;
    border-top-right-radius: 47px;
}
.right{
    flex: 3;
    background: #ffffff;
    padding-left: 13px;
    border-top-left-radius: 33px;
    border-left:1px solid #2e75b6;
}
.avtar{
    text-align: center;
    width: 120px;
    height: 120px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.avtar>img{
    width: 100%;
}
.name{
    color: #2e75b6;
}
.basic{
    color: #2e75b6;
}
ol{
    list-style-type:none;
}
.leftTitle{
    font-weight: bold;
    margin:0;
    font-size: 16px;
}
.leftTitle~p,a,.leftTitle~p,span{
    font-size: 16px;
    color:#333333;
    margin:8px 0;
    display:block;
}
.section{
    margin-left: 15px;
    color: #dedede;
}
.position{
    font-size:17px;
    color:#333333;
    margin:0;
}
.basic+ol>li{
    font-size: 16px;
    color:#333333;
    margin:8px 0;
}
.rb_title>p:nth-of-type(1){
    height:40px;
    width: 7%;
    min-width: 40px;
    text-align: center;
}
.rb_title img{
    width: 40px;
}
.right h2.rb_title>p{
    display:inline-block;
    vertical-align: middle;
}
.right h2.rb_title p:nth-of-type(1){
    
}
.right h2.rb_title p:nth-of-type(2){
    color:#2e75b6;
    width: 87%;
    border-bottom: 1px solid #2e75b6;
    margin-left: 8px;
}
h2.rb_title {
    margin-bottom: 0;
}
.rbt_title{
    margin-top:0;
    font-weight:bold;
    font-size: 18px;
}
.rbt_desc{
    font-size: 16px;
    color:#333333;
}
.right>.box>.title>div{
    margin-left:20px;
    margin-right: 20px;
}
/*已注释*/
.box2 {
    background: #ffffff;
    width: 100%;
}

.box2>.title {
    padding: 0 18px;
}

.box2>.title h2.rb_title>p {
    display: inline-block;
    vertical-align: middle;
}

.box2>.title h2.rb_title>p:nth-of-type(2) {
    color: #2e75b6;
    border-bottom: 1px solid #2e75b6;
    width: 90%;
}
.profileTable{
    width:100%;
    table-layout:fixed;
    border-collapse: collapse;
}
.profileTable th,td a{
    margin:0;
}
.profileTable th,td{
    padding:8px 6px;
    width:12%;
    border-bottom: 1px solid #ddd;
    border: 1px solid #dedede;
}
.mediaQuery{
    display:none;
}
@media screen and (max-width:710px) {
    .left{
        display:none;
    }
    .right{
        height:auto !important;
    }
    .canvas{
        min-width:550px;
    }
    .grid4,.extras{
        min-width:550px !important;
    }
    .mediaQuery{
        display:block;
    }
    .page>div:nth-of-type(1)>ul>li{
        font-size:1.4rem !important;
        line-height: 2.5rem !important;
    }
}
@media print  {
    /*
    .mediaQuery{
        display:block;
    }
    .left{
        display:none;
    }
    .right{
        height:auto !important;
    }
    .canvas{
        min-width:550px;
    }
    */
    .notPrint{display:none;}
    .noprint{display:none;}
    .noprint>button,.noprint>select{display:none;}
    #waifu-toggle,#waifu,#waifu-tips,#live2d{display:none;}
  }


.noprint {
    position: fixed;
    right: 20px;
    top: 20px;
    display: flex;
    flex-flow: column;
    align-items: center;
}
.noprint select{
    width: 56px;
    padding: 4px;
    font-size: 12px;
    background: #2e75b63d;
    border: none;
    border-top: 1px solid #b1b1b1;
}
.noprint button {
    width: 56px;
    height: 27px;
    background: #2e75b63d;
    cursor: pointer;
    font-size: 12px;
    border: none;
}
.skill{
    font-weight:bold;
}
.rbtttitle{
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    padding: 0 20px;
    color: #333333;
}
.grid4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: none;
    width:90%;
    margin:0 auto;
    min-width:710px;
    max-width: 922px;
}
.grid4>div{
    text-align:center;
}
.grid4>div img {width:120px;}
.extras{
    width: 90%;
    margin: 20px auto;
    min-width: 710px;
    max-width: 922px;
}
.swiper {
    width:100%;
    max-height: 600px;
    background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
  }
  .swiper-wrapper{
    max-height: 600px;
  }
  .swiper-slide>img{
    height:100%;
  }
  .swiper-slide{
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    font-size: 1.8rem;
  }
  .verALisw{
    position:relative;
    height:600px !important;
  }
  .verALisw>img{
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
  }
  .fila{
    width: 100%;
    height:100%;
    display: flex;
    flex-flow: row nowrap;
    gap: 4rem;
    justify-content: center;
  }
  .fila>img{height:100%;}
  .tema{
    position: absolute;
    width: 96%;
    height: 100%;
    left: 0%;
    top: 100%;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    text-align: left;
    padding: 2%;
    z-index: 2;
    transition:all 1s 0s ease-in-out;
  }
  .tema p{
    text-indent: 2em;
  }
  .textEffect{
        -webkit-animation: blurFadeInOut 3s ease-in 1s 1 backwards;
        -moz-animation: blurFadeInOut 3s ease-in 1s 1 backwards;
        -ms-animation: blurFadeInOut 3s ease-in 1s 1 backwards;
        animation: blurFadeInOut 3s ease-in 1s 1 backwards;
    }
  @-webkit-keyframes blurFadeInOut {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	20%, 75% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
	100% {
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		-webkit-transform: scale(0);
	}
}
@-webkit-keyframes blurFadeIn {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	50% {
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		-webkit-transform: scale(1.1);
	}
	100% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
}
@-webkit-keyframes fadeInBack {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
	}
	50% {
		opacity: 0.4;
		-webkit-transform: scale(2);
	}
	100% {
		opacity: 0.2;
		-webkit-transform: scale(5);
	}
}
@-webkit-keyframes fadeInRotate {
	0% {
		opacity: 0;
		-webkit-transform: scale(0) rotate(360deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}
/**/

@-moz-keyframes blurFadeInOut {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	20%, 75% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
	100% {
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		-moz-transform: scale(0);
	}
}
@-moz-keyframes blurFadeIn {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	100% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
}
@-moz-keyframes fadeInBack {
	0% {
		opacity: 0;
		-moz-transform: scale(0);
	}
	50% {
		opacity: 0.4;
		-moz-transform: scale(2);
	}
	100% {
		opacity: 0.2;
		-moz-transform: scale(5);
	}
}
@-moz-keyframes fadeInRotate {
	0% {
		opacity: 0;
		-moz-transform: scale(0) rotate(360deg);
	}
	100% {
		opacity: 1;
		-moz-transform: scale(1) rotate(0deg);
	}
}
/**/

@keyframes blurFadeInOut {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	20%, 75% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
	}
}
@keyframes blurFadeIn {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50% {
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}
@keyframes fadeInBack {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		opacity: 0.4;
		transform: scale(2);
	}
	100% {
		opacity: 0.2;
		transform: scale(5);
	}
}
@keyframes fadeInRotate {
	0% {
		opacity: 0;
		transform: scale(0) rotate(360deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}