@charset "utf-8"; 
/* @latest 2021-12-23 SSJ 
    2021-12-28 SSJ
    2022-01-07 YHY */

.quick03_kotra {width:100%;float:left;}

.quick03_kotra .qboxwrap {width:100%;float:left;height:100%;}
.quick03_kotra .qblock {width:100%;float: left;box-sizing: border-box;position: relative;overflow: hidden;}
.quick03_kotra .qblock > a {display:inline-block; height:100%;}
.quick03_kotra .qblock > a:focus:after {display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:2px solid #000; box-sizing:border-box}
.quick03_kotra .qblock .titlebox h3 {width:100%;float:left;text-align: left;padding: 40px 10px 55px 45px;box-sizing: border-box;display: block;}
.quick03_kotra .qblock .titlebox .qTitle {width:100%;font-size: 42px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #fff;position: relative;}

.quick03_kotra .qblock .titlebox img {position:absolute;right: 0;bottom: 0;z-index: 1;}
.quick03_kotra .qblock .innerbox {width:100%;float:left; box-sizing: border-box;border-top: none;}
.quick03_kotra .qblock .innerbox .qbox {width: 100%;float:left;box-sizing:border-box;}
.quick03_kotra .qblock .innerbox .qbox a {width:100%;float:left;letter-spacing: -1px;color: #fff;box-sizing: border-box;}
.quick03_kotra .qblock .innerbox .qbox:last-child a {border-bottom:none;}
.quick03_kotra .qblock .innerbox .qbox .tit {width: 100%;box-sizing:border-box;word-break:keep-all;float:left;padding: 0 10px 2px 60px;position: relative;font-size: 20px;color: #fff;}
.quick03_kotra .qblock .innerbox .qbox .tit:before {content:"\b7";position: absolute;margin-left: -15px;}
.quick03_kotra .qblock .innerbox .qbox:hover a {font-weight:600;}

	.quick03_kotra .qblock:first-child  {background:#014a97;}
	.quick03_kotra .qblock:nth-child(2) {background:#2b78ca;}
	.quick03_kotra .qblock:nth-child(3) {background:#4d3fb4;}


	@media (min-width:800px) {
		@keyframes gorightFX {
			0%   {opacity:0; padding-left:0;}
			70%  {padding-left:60px;}
			100% {opacity:1; padding-left:45px;}
		  }
		@keyframes gorightFX2 {
			0%   {opacity:0; padding-left:0;}
			70%  {padding-left:70px;}
			100% {opacity:1; padding-left:55px;}
		  }
		@keyframes goleftFX {
			0%   {opacity:0; right:-50px;}
			30%  {opacity:0; right:-50px;}
			100% {opacity:1; right:0;}
  }
	
		.quick03_kotra .qblock:first-child:nth-last-child(4),
		.quick03_kotra .qblock:nth-child(2):nth-last-child(3),
		.quick03_kotra .qblock:nth-child(3):nth-last-child(2),
		.quick03_kotra .qblock:nth-child(4):nth-last-child(1) {width:25%;}

		.quick03_kotra .qblock:first-child:nth-last-child(3),
		.quick03_kotra .qblock:nth-child(2):nth-last-child(2),
		.quick03_kotra .qblock:nth-child(3):nth-last-child(1) {width:33.333%;}

		.quick03_kotra .qblock:first-child:nth-last-child(2),
		.quick03_kotra .qblock:nth-child(2):nth-last-child(1) {width:50%;}

		.quick03_kotra .qblock .titlebox .qTitle:after {content:"";width: 80px;height: 17px;display: inline-block;position: absolute;left: 45px;margin-top: 73px;background: url(../img/arrow.png) no-repeat;}
	}
    @media (min-width:991px) {
        .quick03_kotra .qblock {height:560px;}


		/* FX */
		.quick03_kotra .qblock .titlebox h3, .quick03_kotra .qblock .titlebox .qTitle {animation:gorightFX linear 1s 1 normal forwards;}
		.quick03_kotra .qblock .innerbox .qbox .tit {animation:gorightFX2 linear 1s 1 normal forwards;}
		.quick03_kotra .qblock .titlebox img {animation:goleftFX linear 1s 1 normal forwards; max-height:55%;}

		.quick03_kotra .qblock:nth-child(2) .titlebox h3,
		.quick03_kotra .qblock:nth-child(2) .titlebox .qTitle,
		.quick03_kotra .qblock:nth-child(2) .innerbox .qbox .tit,
		.quick03_kotra .qblock:nth-child(2) .titlebox img {animation-delay:0.5s; -webkit-opacity:0;}
		.quick03_kotra .qblock:nth-child(3) .titlebox h3,
		.quick03_kotra .qblock:nth-child(3) .titlebox .qTitle,
		.quick03_kotra .qblock:nth-child(3) .innerbox .qbox .tit,
		.quick03_kotra .qblock:nth-child(3) .titlebox img {animation-delay:1s; -webkit-opacity:0;}
    }
 
	@media (min-width:991px) and (max-width:1100px) {
		.quick03_kotra .qblock .titlebox img {max-width:70%;}
	}
	@media (min-width:800px) and (max-width:990px) {
		.quick03_kotra .qblock {height: 420px;}
		.quick03_kotra .qblock .titlebox .qTitle {font-size:38px;}
		.quick03_kotra .qblock .titlebox .qTitle:after {left: 30px; width:50px; height:12px; background-size:100%; margin-top:70px;}
		.quick03_kotra .qblock .titlebox h3, .quick03_kotra .qblock .titlebox .qTitle {padding:30px 10px 55px 25px;}
		.quick03_kotra .qblock .innerbox .qbox .tit {padding-left:35px;font-size: 18px;}
		.quick03_kotra .qblock .titlebox img {max-width:50%;max-height: 35%;}
	}

	@media (max-width:799px) {
		.quick03_kotra {height:100%;}
		.quick03_kotra .qblock {height: 33.333%;}
		.quick03_kotra .qblock a {width:100%;height:100%;float: left;z-index: 0;position: relative;}
		.quick03_kotra .qblock .titlebox h3, .quick03_kotra .qblock .titlebox .qTitle {padding: 20px 10px 10px 20px;}
		.quick03_kotra .qblock .innerbox .qbox .tit {padding-left: 30px;font-size: 16px;line-height: 120%;}
		.quick03_kotra .qblock .innerbox .qbox .tit:before {margin-left: -11px;}
		.quick03_kotra .qblock

        .quick03_kotra .qblock .innerbox .qbox .tit br:nth-child(2) {display: none;}
	}
	@media (max-width:799px) and (min-width:600px) {
		.quick03_kotra .qblock {/* height: 250px; */}
		.quick03_kotra .qblock .titlebox .qTitle {font-size:34px;}
		.quick03_kotra .qblock .titlebox img {max-width: 25%;max-height: 80%;}	
	}
	
	@media (max-width:599px) {
		.quick03_kotra {height: 100%;}
		.quick03_kotra .qblock {/* height:30vh; *//* min-height: 220px; */overflow: hidden;}
		.quick03_kotra .qblock .titlebox {width: 100%; float: left; position: relative;}
		.quick03_kotra .qblock .titlebox .qTitle {font-size:25px;}
		.quick03_kotra .qblock .titlebox img {max-width:35%;margin-bottom: -15px;/* max-height: 75%; */bottom: auto;z-index: 0;top: 80px;}

		

	}
