@charset "utf-8";


/* banner */
.koita-banner-area-wrap {background-image: url('.././../img/koita/koita_banner.png'); background-repeat: no-repeat; background-size: cover; width:100%; height:510px; background-position:center; }
.koita-banner-area-wrap .banner-txt { width:1200px; margin:0 auto; padding:85px 0;  }
.koita-banner-area-wrap .banner-txt .tit { font-size: 5rem; line-height: 1.2; color:#000; padding-bottom: 25px; }
.koita-banner-area-wrap .banner-txt .txt { font-size: 2rem; line-height: 1.4; padding-bottom: 40px; }
.koita-banner-area-wrap .banner-txt .btn-style-wrap { margin-bottom:30px; }
.koita-banner-area-wrap .banner-txt .btn-style-wrap .button { font-size: 1.5rem; font-weight: 600; padding: 0 25px; height: 45px;}
.koita-banner-area-wrap .banner-txt .his-report { position:relative; }
.koita-banner-area-wrap .banner-txt .his-report .a-his { display: inline-block; position: relative; color: #422c4f; font-size: 1.4rem; font-weight: 500; padding:0 20px 3px 0; }
.koita-banner-area-wrap .banner-txt .his-report .a-his:after { content: ''; position: absolute; bottom:0; left:0; width:100%; height:1px; background:#422c4f; }
.koita-banner-area-wrap .banner-txt .his-report .a-his:before { content: ''; position: absolute; bottom:-1px; right:4px; background: #422c4f; width:1px; height:10px; transform: rotate(-45deg); }
.koita-banner-area-wrap .banner-txt .his-report .a-his .material-icons { font-size: 16px; position: relative; top:2px;}

@media (max-width: 1200px) {
	.koita-banner-area-wrap { background-image: url('.././../img/koita/koita_banner_mo.png'); height:auto;}
	.koita-banner-area-wrap .banner-txt { width: 100%; padding: 50px ;}
}
@media (max-width: 650px) {
	.koita-banner-area-wrap .banner-txt { padding:40px; }
	.koita-banner-area-wrap .banner-txt .tit { font-size: 4rem; padding-bottom:10px;}
	.koita-banner-area-wrap .banner-txt .txt { font-size: 1.8rem;}
	.koita-banner-area-wrap .banner-txt .btn-style-wrap { margin-bottom:15px;}
	.koita-banner-area-wrap .banner-txt .btn-style-wrap .button { height:38px; padding: 0 15px;}
}
@media (max-width: 650px) {
	.koita-banner-area-wrap .banner-txt { padding:40px 30px;}
	.koita-banner-area-wrap .banner-txt .tit { font-size: 3rem; }
	.koita-banner-area-wrap .banner-txt .txt { font-size: 1.6rem; padding-bottom:20px;}
}

.manual-wrap { margin: 50px 0; padding: 15px 0; width:590px; display: inline-block; background: #422c4f; border-radius: 5px; }
.manual-wrap .manual-title { display: block; font-size: 1.5rem; color: #fff; font-weight: 900; padding:0 30px; margin-bottom: 15px; position: relative;}
.manual-wrap .manual-title i { margin-right: 5px; }
.manual-wrap .manual-title .tip-btn { position:absolute; top:-4px; right:30px;}
.manual-wrap .manual-title .tip-btn i { font-size: 1.5rem;}
.manual-wrap .manual-button { width: 100%; position: relative; }
.manual-wrap .manual-title .material-icons { font-size: 18px; margin-right:5px; position: relative; top: 2px;}

.manual-wrap a.mual-btn { border-radius: 3px; margin-right: 5px; display: inline-block; padding: 0 14px; line-height: 30px; font-size: 1.3rem; font-weight: 500; transition: background .3s; }
.manual-wrap a.mual-btn:last-child { margin-right: 0; }
.manual-wrap a.mual-btn i { font-size: 1.2rem; margin-right: 4px; }
.manual-wrap a.mual-btn.sty-bg-w { background:rgba(255,255,255,1); color:#422c4f; font-weight: 600}
.manual-wrap a.mual-btn.sty-bg-w:hover {background:rgba(255,255,255,0.8);}
.manual-wrap a.mual-btn.sty-bd { border:1px solid #fff; color:#fff; }
.manual-wrap a.mual-btn.sty-bd:hover {background:rgba(255,255,255,0.1);}
.manual-wrap a.mual-btn.orange-bd {border: 1px solid #fc694b; background-color: #fff; color: #fc694b}
.manual-wrap a.mual-btn.orange-bg {background-color: #f77b38; color: #fff; }

.manual-wrap a.mual-btn.sty-bg-premium { color: #fff;
background: #f28e26; /* Old browsers */
background: -moz-linear-gradient(left,  #f28e26 0%, #fd644f 100%, #fd644f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f28e26 0%,#fd644f 100%,#fd644f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f28e26 0%,#fd644f 100%,#fd644f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28e26', endColorstr='#fd644f',GradientType=1 ); /* IE6-9 */ 
}

.manual-wrap .manual-group { position: relative; width: 100%; margin-top: 5px; padding: 0 30px; }
.manual-wrap .manual-group:nth-child(2) { padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.3); }
.manual-wrap .manual-group:after { content: ''; display: block; clear: both; }
.manual-wrap .manual-group .m-left { float: left; width: 170px; font-size: 1.5rem; color: #fff; line-height: 30px; font-weight: 500; padding-left:5px }
.manual-wrap .manual-group .m-left span {position: relative; display: inline-block; color: #f38b29}
.manual-wrap .manual-group .m-left span::after {position: absolute; width: 105%; height: 3px; content: ''; background-color: #f38b29; bottom: 0; left: 0; border-radius: 3px;}
.manual-wrap .manual-group .m-left.bd-orange {border: 1px solid #f38b29; background-color: rgba(0,0,0,0.1); border-radius: 3px; color: #f38b29;}
.manual-wrap .manual-group .m-left.txt-orange {color: #fff; border-radius: 3px; background: #f28e26; /* Old browsers */
background: -moz-linear-gradient(left,  #f28e26 0%, #fd644f 100%, #fd644f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f28e26 0%,#fd644f 100%,#fd644f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f28e26 0%,#fd644f 100%,#fd644f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28e26', endColorstr='#fd644f',GradientType=1 ); /* IE6-9 */ }
.manual-wrap .manual-group.bd-orange {border: 2px solid #f38b29; background-color: rgba(0,0,0,0.1); border-radius: 3px; color: #f38b29; padding: 5px 5px 2px;}
.manual-wrap .manual-group .m-right { float: right; width: 245px; text-align: right; }
.manual-wrap .manual-group .m-right a.mual-btn { line-height: 25px; }
.manual-wrap .manual-group .m-left i { font-size:11px; margin-right:7px; position:relative; top:-1px;}

.manual-wrap .manual-group.orange-manual-group a.mual-btn.sty-bg-w {
	color: #fff; 
	background: #ff7d00;
    background: -moz-linear-gradient(left,  #ff7d00 -1%, #ff7d00 0%, #ffa912 100%);
    background: -webkit-linear-gradient(left,  #ff7d00 -1%,#ff7d00 0%,#ffa912 100%);
    background: linear-gradient(to right,  #ff7d00 -1%,#ff7d00 0%,#ffa912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7d00', endColorstr='#ffa912',GradientType=1 );
}
.manual-wrap .manual-group.orange-manual-group a.mual-btn.sty-bd { color: #fda313; border-color: #fda313; }

.system-manual-area-wrap { width:1200px; margin:0 auto; position: relative;}
.system-manual-area-wrap .manual-item { position: absolute; bottom:-12px; right:90px; }

@media (max-width: 1200px) {
	.system-manual-area-wrap { width: 100%; padding: 30px;}
	.system-manual-area-wrap .manual-item { right:0;}
}
@media (max-width: 1024px) {
	.manual-wrap { width: 470px; }
	.manual-wrap .manual-title { padding: 0 20px; }
	.manual-wrap .manual-title .tip-btn { right: 20px; }
	.manual-wrap .manual-group { padding: 0 20px; }
	.manual-wrap .manual-group .m-left { width:110px; }
	.manual-wrap .manual-group .m-right { width:calc(100% - 110px); }
	.system-manual-area-wrap .manual-item { right:-100px;}
}
@media (max-width: 768px) {
	.manual-wrap { width: 100%; margin:0; }
	.system-manual-area-wrap .manual-item { display: none;}
}
@media (max-width: 899px) {
	.manual-wrap .manual-group .m-left { text-align: left; }
	.manual-wrap .manual-title { text-align: left;}
}
@media (max-width: 490px) {
	.manual-wrap { width: 100%; }
	.manual-wrap .manual-button a.mual-btn { margin-bottom: 4px; display: block;}
	.manual-wrap .manual-group .m-left { padding:0;}
	.manual-wrap .manual-group .m-left i { margin-right:5px; }
}
@media (max-width: 410px) {
	.manual-wrap .manual-title { text-align: center;}
	.manual-wrap .manual-title .tip-btn { position: static; text-align: center; margin-top: 10px;}
	.manual-wrap .manual-group .m-right { width:100%; }
	.manual-wrap .manual-group .m-right a.mual-btn { width:48%; text-align:center;}
}