@charset "utf-8"; 



.quick04_kotra {width:100%;float:left;text-align:center;box-sizing:border-box;background:white;overflow:hidden;position: relative;}
	
.quick04_kotra .backimg {width:100%;height: 100%;}
.quick04_kotra .backimg img {position:absolute;bottom: 0;right: 0;width: auto;height:auto;min-height:100%;z-index:0;margin: auto;}
.quick04_kotra .backimg .titbox {margin: 0 auto;text-align:center; display:inline-block;position: relative; z-index:2;}
.quick04_kotra .backimg .titbox .tit {font-size: 36px; display:inline-block; letter-spacing:-1px; color: #fff; text-align: left; font-weight: 200; float: left; box-sizing: border-box;}
.quick04_kotra .backimg .titbox .tit b {font-weight:600;}
.quick04_kotra .quickWrap {float:left;clear:both;display:inline-block;text-align:center;width: 100%;max-width: 1300px;}
.quick04_kotra .quickWrap .qbox {display:inline-block; box-sizing:border-box;} 

.quick04_kotra .quickWrap .qbox a {vertical-align:middle;display:inline-block;position: relative;padding-bottom: 50px;}
.quick04_kotra .quickWrap .qbox a:hover {}
.quick04_kotra .quickWrap .qbox a:focus {outline:2px solid #000}
.quick04_kotra .quickWrap .qbox a:before {content:"";width: 19px;height: 19px;display: inline-block;border-radius: 100%;background: #004a98;border: 5px solid #91c6ff;box-sizing: border-box;box-shadow: 0px 0px 24px 2px rgb(163 255 252);position: absolute;left: 50%;bottom: 22px;transform: translateX(-50%);transition: border-color 0.5s;}
.quick04_kotra .quickWrap .qbox a:hover:before {border-color:#fff; box-shadow:0px 0px 24px 2px #fff;}
.quick04_kotra .quickWrap .qbox a p {font-size: 20px;display:inline-block;margin-top:5px;line-height:22px;color: #fff;vertical-align:middle;letter-spacing: -1px;font-weight: 600;}




/* FX */
.slick-active .quick04_kotra .quickWrap {animation:twinkleFX linear 2s 1 normal forwards;}
.slick-active .quick04_kotra .quickWrap .qbox {animation:twinkleFX linear 1s 1 normal forwards;}
.slick-active .quick04_kotra .quickWrap .qbox:nth-child(2) {animation-delay:0.2s; opacity:0;}
.slick-active .quick04_kotra .quickWrap .qbox:nth-child(3) {animation-delay:0.7s; opacity:0;}
.slick-active .quick04_kotra .quickWrap .qbox:nth-child(4) {animation-delay:1s;   opacity:0;}
.slick-active .quick04_kotra .quickWrap .qbox:nth-child(5) {animation-delay:1.3s; opacity:0;}
.slick-active .quick04_kotra .quickWrap .qbox:nth-child(6) {animation-delay:1.7s; opacity:0;}
.slick-active .quick04_kotra .quickWrap .qbox:nth-child(7) {animation-delay:2.2s; opacity:0;}

@keyframes twinkleFX {
	0%   {opacity:0;}
	100% {opacity:1;}
  }

  @keyframes moveTopFX {
	0%   {opacity:0; padding-top:60px;}
	100% {opacity:1; padding-top:0;}
  }





	@media (min-width:800px){	
		.quick04_kotra .backimg .titbox {position:absolute;left: 40%;top: 55%;}
		.quick04_kotra .quickWrap {position: absolute;left: 50%;top: 0;transform: translateX(-50%); height: 100%;background: url(../img/line.png) no-repeat 30% center;}
		.quick04_kotra .quickWrap .qbox {position: absolute;}
	}										


	@media (min-width:991px){
		.quick04_kotra {height:560px;}
		.quick04_kotra .quickWrap .qbox:nth-child(1) {left:5%;  top: 54%;}
		.quick04_kotra .quickWrap .qbox:nth-child(2) {left:15%; bottom: 18.5%;}
		.quick04_kotra .quickWrap .qbox:nth-child(3) {left:20.5%; top: 18%;}
		.quick04_kotra .quickWrap .qbox:nth-child(4) {left:28%;   top: 34.5%;}
		.quick04_kotra .quickWrap .qbox:nth-child(5) {left:44.5%; top: 15.5%;}
		.quick04_kotra .quickWrap .qbox:nth-child(6) {left:61%;   top: 17%;}
		.quick04_kotra .quickWrap .qbox:nth-child(7) {left:75.5%; top: 27.5%;}

		.slick-active .quick04_kotra .backimg .titbox .tit {animation:moveTopFX linear 1s 1 1s normal forwards; opacity:0;}
	}

	@media (min-width:1100px) and (max-width:1249px){
		.quick04_kotra .quickWrap {background-size: 73% 51%;background-position-x: 32%;}
		.quick04_kotra .quickWrap .qbox:nth-child(7) {left:78.5%;}
	}
	@media (min-width:991px) and (max-width:1099px){
		.quick04_kotra .quickWrap {background-size: 68% 53%;background-position-x: 32%;}
		.quick04_kotra .backimg img {right:-10%;}

	}

	@media (max-width:990px){
		
	}

	@media (min-width:800px) and (max-width:990px){
		.quick04_kotra {height: 420px;}
		.quick04_kotra .quickWrap {background-size: 70% 48%;background-position: 35% 54%;}

		.quick04_kotra .quickWrap .qbox:nth-child(1) {left:5%;  top: 54%;}
		.quick04_kotra .quickWrap .qbox:nth-child(2) {left:15%; bottom: 18.5%;}
		.quick04_kotra .quickWrap .qbox:nth-child(3) {left:20.5%; top: 18%;}
		.quick04_kotra .quickWrap .qbox:nth-child(4) {left:28%;   top: 34.5%;}
		.quick04_kotra .quickWrap .qbox:nth-child(5) {left:44.5%; top: 15.5%;}
		.quick04_kotra .quickWrap .qbox:nth-child(6) {left:61%;   top: 17%;}
		.quick04_kotra .quickWrap .qbox:nth-child(7) {left:75.5%; top: 27.5%;}
        
        .quick04_kotra .backimg .titbox .tit {font-size:30px;}
        .quick04_kotra .backimg img {right: -30%;}
	}



	@media (max-width:799px){
		.quick04_kotra .quickWrap {padding-bottom:50px;}
		.quick04_kotra .quickWrap .qbox {width:100%; float:left; text-align:left;}
        .quick04_kotra .quickWrap .qbox a {padding: 14px  80px 11px;width: 100%;}
        .quick04_kotra .quickWrap .qbox a p {font-size:18px;}
        .quick04_kotra .quickWrap .qbox a:before {left: 51px;bottom: 24%;box-shadow: 0px 0px 14px 1px rgb(163 255 252);}
        
        .quick04_kotra .backimg .titbox {display:block;}
        .quick04_kotra .backimg .titbox .tit {font-size:34px;padding: 30px 20px;width: 100%;float: left;display: block;}
        .quick04_kotra .backimg .titbox .tit b:first-child {display:block;}
        
	}

	@media (max-width:799px) and (min-width:600px) {
		.quick04_kotra {height:750px;}
        .quick04_kotra .backimg img {right: -50%;}
	}

	@media (max-width:599px){
		.quick04_kotra {height:90vh;}
        .quick04_kotra .backimg .titbox .tit {font-size:25px;}
	    .quick04_kotra .backimg img {right: -50%;}
	    .quick04_kotra .quickWrap .qbox a {padding: 8px  80px;}
	}