@charset "UTF-8";

/* * {font-family: 'Gmarket Medium';}*/

.inner {padding:0 20px}

.slick-arrow {text-indent: -9999px;width: 50px;aspect-ratio: 1/1;border-radius: 5px;background-size: 50% !important;z-index: 1;}
.slick-arrow.next {background: url(/sites/test19/images/main/chevron-right.png) center no-repeat;}
.slick-arrow.prev {background: url(/sites/test19/images/main/chevron-left.png) center no-repeat;}

.prevnext {display: flex;}

@media all and (min-width: 1024px) { 
    
	.prevnext button:hover {transition: 0.3s; }
	.prevnext button.prev:hover {}
	.prevnext button.next:hover { }
    
}

@media all and (max-width: 1200px) { 
    
    .title-wrap {margin-bottom: 30px;}
    .title-wrap .title, .title-wrap .title span {font-size: 33px;} 
    .title-wrap .txt {font-size: 21px;width: 75%;} 
    
}
@media all and (max-width: 1024px) { 
    
    .title-wrap .txt { width: 100%;}  
	.inner {padding:0 15px}
    
}
@media all and (max-width:768px) {  
    
    .title-wrap .title, .title-wrap .title span {font-size: 30px;} 
    .title-wrap .txt {font-size: 19px;}
 
}
@media all and (max-width:550px) { 
    
    .title-wrap {margin-bottom: 20px;}
    .title-wrap .title,  .title-wrap .title span {font-size: 27px;} 
    .title-wrap .txt {font-size: 18px;} 
    
}
@media all and (max-width:480px) { 
    
    .title-wrap {margin-bottom: 15px;}
    .title-wrap .title,  .title-wrap .title span {font-size: 25px;} 
    .title-wrap .txt {font-size: 17px;} 
}


 
/* 4칸 바로가기 */
#multipleDiv_temp_05_10{overflow:hidden;margin-top: -100px;} 
.scut-wrap {padding: 0 20px;margin: 0 auto;border-top: 1px solid #ffffff9c;max-height: 100px;}

.scut {display: flex;max-width: 1600px;margin: 0 auto;border-left: 1px solid #ffffff9c;}
.scut > li {width: 100%;border-right: 1px solid #ffffff9c;}
.scut > li > a {padding: 28px 30px;display: flex;height: 100%;flex-direction: row;position: relative;padding-right: 100px; transition:0.3s}
.scut > li > a:before {content:'';position:absolute;top:50%;transform: translateY(-50%);right: 28px;border-radius:500px;width: 55px;height: 55px; background:#cccccc36; transition:0.3s}
.scut > li > a:after {content:'';position:absolute;top:50%;transform: translateY(-50%);right: 35px;border-radius:500px;background:url(../../images/main/arrow.png) center no-repeat;width: 40px;height: 40px;background-size: 70%; transition:0.3s}
.scut > li > a img {width: 45px;height: 45px;}
.scut .line > * {border: 1px solid #ffffff4a;}

.scut > li > a:hover {background: #213b57c4;transition:0.3s}
.scut > li > a:hover:before {background: #2b5a8bc4; transition:0.3s; border-color:transparent;}
.scut > li > a:hover:after {background-color: #005db3; transition:0.3s}
 
.scut p {color: #fff;z-index: 1;display: flex;flex-direction: column;justify-content: center;font-size: 22px;margin-left: 20px;}

@media all and (max-width:1620px) {
  
  .scut p {font-size: 20px; margin-left: 7px;}
  .scut > li > a {padding: 20px 15px; height: 100px; align-items: center;}
  .scut > li > a:before {right: 15px;}
  .scut > li > a:after {right: 23px;}
  
}
@media all and (max-width:1300px) {
	
	#multipleDiv_temp_05_10 {margin-top: -132px;} 	
	.scut-wrap {max-height:100%;}
	.scut{flex-wrap:wrap;}
	.scut > li {width:50%;border-bottom: 1px solid #b8c0c8;}  
	.scut > li > a {padding: 15px 15px; height: auto;} 
	.scut > li > a:before {right: 15px;width: 41px;height: 40px;}
	.scut > li > a:after {right:20px; width: 30px;height: 30px; }
	.scut > li > a img {width: 35px;height: 35px;}
	.scut p {font-size: 19px;margin-left: 10px;}

	.scut > li > a img {}
	.scut p {font-size: 18px;}
 
}
@media all and (max-width:1024px) {
	
	#multipleDiv_temp_05_10 {margin-top:0;}
	.scut-wrap {margin-top: 20px;}
	.scut, .scut * {border-color: #052a3e;}
	.scut > li {background: #485c72; border-bottom: 1px solid #b8c0c8;}  
	.scut > li > a {padding: 13px 15px;}
	.scut > li > a:before {display: none;}
	.scut > li > a:after {display: none;}
	.scut > li > a img {display: none;}
 
}
@media all and (max-width:768px) {
	
	.scut{flex-wrap:wrap;}
	.scut > li {width:50%} 
    
}
@media all and (max-width:550px) {
	 
	.scut > li {width: 100%;}  
	.scut p {margin-left:0}
	
}


.service {background: #f2fcfb;padding: 90px 20px;}
.service ul {position: relative;z-index: 1;gap: 0 10px;display: flex;justify-content: space-between;height: 410px;max-width: 1600px;margin: 0 auto;}
.service ul li {flex-grow: 1;transition: width .75s;cursor: pointer;overflow: hidden;position: relative;border-radius: 25px;margin: 0 10px;width: 0;box-shadow: 0px 0px 13px #23232359;}
.service ul li:first-child {margin-left: 0;}
.service ul li:last-child {margin-right: 0;}
.service ul li a {}
.service ul li a .bg {width: 100%;height: 100%;overflow: hidden;position: relative;}
.service ul li a .bg:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background: #0e0e0e70;z-index:1}
.service ul li a .bg img {width:100%;height:100%;/* display:block; */filter: blur(2px);object-fit: cover;}
.service ul li a .big-title {color: #fff;font-size: 28px;writing-mode: vertical-rl;left: 50%;transform: translateX(-50%);font-weight: 500;position: absolute;bottom: 40px;z-index: 1;}
.service ul li a i {text-align:center;background: #2f2f2f8a;border-radius: 50px;position: absolute;bottom: -70px;left: 50%;transform: translateX(-50%);width: 50px;height: 50px;display: flex;flex-direction: column;justify-content: center;transition: 0.3s;display: none;}

.service ul li a .txt-wrap {font-size: 30px;display: none;position: absolute;bottom: 0;height: 100%;width: 85%;background: #ffffff;max-height: 200px;z-index: 1;max-width: 720px;}
.service ul li a .txt-wrap .title {/* display: flex; */font-weight: bold;}
.service ul li a .txt-wrap .txt {font-size: 18px;word-break: keep-all;margin-top: 10px;width: 95%;display: none;line-height: 1.3;}

.service ul li.on {width: 55%;flex-grow: 0;flex-shrink: 0;transform-origin: left top;box-shadow: 0px 0px 18px #9fc2d3;}
.service ul li.on a {pointer-events: auto;transition: 0.3s;}
.service ul li.on a .bg {border-bottom-left-radius: 30px;}
.service ul li.on a .bg img {filter: blur(1px);transition:0.3s;/* object-fit: fill; */}
.service ul li.on a .big-title {display:none}
.service ul li.on a .txt-wrap {display: flex;flex-direction: column;justify-content: center;transition: 0.3s;min-width: 200px;padding: 0px 40px;}
.service ul li.on a .txt-wrap:before {content:'';position:absolute;top: -25px;right: -25px;width: 60px;height: 60px;border-radius:50px;background: #014f98 url(/sites/test19/images/main/plus-w.png) center no-repeat;background-size: contain;z-index: 1;}
.service ul li.on a .txt-wrap:after {content:'';position:absolute;top: -35px;right: -35px;width: 80px;height: 80px;border-radius:50px;background: #014f9885;}

.service ul li.on a .txt-wrap .title i {position:initial;transform: initial;margin-left: 10px;width: 40px;height: 40px;font-size: 18px;background: #ffffffbf;color: #3d3c3c;}
.service ul li.on a .txt-wrap .title i:before {content: '\F285';}
.service ul li.on a .txt-wrap .txt {display: block;}

.service ul li.on:hover a .txt-wrap:before {transform:rotate(180deg); transition:0.3s}

.service .control .prevnext {display:flex; justify-content: center; margin-top: 30px;}
.service .control .prevnext button {width: 50px; height: 50px; text-align: center; display: flex; flex-direction: column; justify-content: center; border-radius: 50px; background: #fff; box-shadow: 0px 5px 5px gray; position: absolute; bottom: 165px; z-index: 1; max-width: 1600px;}
.service .control .prevnext button.prev {left: 0; transition:0.3s}
.service .control .prevnext button.next {right: 0; transition:0.3s}
.service .control .prevnext button i {display: block; width: 100%; font-size: 24px; position: relative;}
.service .control .prevnext button.prev i {left: -1px;}
.service .control .prevnext button.next i {right: -2px;}
.service .control .swiper-button-disabled {opacity: 0; transition: 0.2s;}
.service .control .prevnext button.prev:hover {left: -3px; transition:0.3s}
.service .control .prevnext button.next:hover {right: -3px; transition:0.3s}


/*-- notice --*/
.tab-content {display: none;}
.tab-content.active {display: block;}

@keyframes rota-ani {

    100% {transform: rotate(360deg);}

}
@media (min-width:1024px) {

    .service ul li:hover a i {transition:0.3s;background: #1662acba !important;color: #fff !important;}
    .service ul li.on a:hover .bg img {transition:0.3s}
    .service ul li.on a:hover .txt-wrap .title i {margin-left:30px;transition: 0.3s;}

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

    .service ul li a .txt-wrap .txt {}

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

	.service ul li {margin: 0 3px;border-radius: 20px;}
    .service ul li a {}
    .service ul li a .txt-wrap .title {font-size:27px}
    .service ul li a .txt-wrap .txt {}
    .service ul li.on a {}

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

	.service {padding: 50px 20px;}
    .service .title-wrap h2 {text-align: center;}
    .service ul {flex-direction:column;height: 550px;}
    .service ul li {width: 100%; margin: 0;margin-bottom: 20px;transition: 0.3s;border-radius: 15px;box-shadow: 0px 0px 5px #56565680;}
    .service ul li:last-child {margin-bottom:0} 
    .service ul li a .big-title {writing-mode: lr;font-size: 20px;transform: translateY(-50%);left: 30px;top: 50%;bottom: auto;}
    .service ul li a .txt-wrap {max-width: 100%;width: 100%;}
    .service ul li a .txt-wrap .title {font-size: 21px;line-height: 1;display: block;}
    .service ul li a .txt-wrap .title i {left: auto; right: 20px; bottom: auto; top: 50%; transform: translateY(-50%); width: 35px; height: 35px;}
    .service ul li a .txt-wrap .txt {font-size: 15px;transition: 0.3s;height: auto;padding-right: 45px;}
    .service ul li.on {height: 140px;width: 100%;padding-right: 0;}
    .service ul li.on a .bg img {object-fit:cover;}
    .service ul li.on a .txt-wrap .title i {font-size: 16px;margin-top: -48px;position: absolute;}
    .service ul li.on a .txt-wrap .txt {margin-top: 13px;}
    .service ul li.on a .txt-wrap {transition: 0.3s; padding: 0px 23px;background: #fff;}
	.service ul li.on a .txt-wrap:before, .service ul li.on a .txt-wrap:after {display:none}
	
}
@media (max-width:768px) {

	.service ul li {margin-bottom:10px;}
	.service ul li a .txt-wrap .title {font-size: 19px;}
	.service ul li a .txt-wrap .title i {left: auto; right: 20px; bottom: auto; top: 50%; transform: translateY(-50%); width: 35px; height: 35px;}
	.service ul li a .txt-wrap .txt {padding-right: 0;}

}
/*@media (max-width:550px) {

	.service ul {height: 400px;}
	.service ul li {height: 80px !important;}
	.service ul li a .txt-wrap .title {color: #fff;}
    .service ul li.on a .txt-wrap .txt {display:none}
	.service ul li.on a .txt-wrap {background: transparent;}
	.service ul li.on a .bg {border-radius: 0;}
    
}*/
@media (max-width:550px) {
  	.service ul li.on {height: 160px !important;}
}
@media (max-width:400px) {
  	.service ul li.on {height: 190px !important;}
}