@charset "utf-8";



.bg-img01{background-image: url(../images/common/main_bg.svg); background-size: cover;}
.col-1 {float: left;width: 25%;position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px;}
.col-2 {float: left;width: 50%;position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px;}

/* main btn */
.main {position: relative;padding: 60px 0 60px;overflow: hidden;}
.main .btn-box {width: 100%; flex-grow: 0;border-radius: 10px 30px;margin-right: 10px;padding: 60px 5px;float: left;min-height: 340px;max-height: 340px}
.main .btn-box.sky{background-color: #00aeef;width: 100%;}
.main .btn-box .btn-pt{padding-top: 25px}
.main .btn-box.orange{background-color: #ff932f;width: 100%;}
.main .btn-box li{font-size: 28px;font-weight: bold; text-align: center;color: #fff;}
.main .btn-box .mw-115{min-width: 115px}

.main .btn-box02 {width: 100%; flex-grow: 0;border-radius: 10px 30px;margin-right: 10px;padding: 40px 5px;float: left;min-height: 340px;max-height: 340px}
.main .btn-box02.sky{background-color: #00aeef;width: 100%;}
.main .btn-box02.orange{background-color: #ff932f;width: 100%;}
.main .btn-box02 li{font-size: 28px;font-weight: bold; text-align: center;color: #fff;display: flex;align-items: center;justify-content: center}
.main .btn-box02 li.ex{font-size: 16px;padding-top: 15px;font-weight: 400}
.main .btn-box02.orange .btn{box-shadow: 2px 2px 5px 1px rgba(0, 99, 135, 0.2);padding:10px 60px;border-radius: 5px;margin-top: 25px}
.main .btn-box02.orange em{font-size: 12px;padding: 15px 0 0 5px ;font-weight: 400}
.main .btn-box02.sky .btn{box-shadow: 2px 2px 5px 1px rgba(0, 99, 135, 0.2);padding:10px 30px;border-radius: 5px;margin-top: 20px!important}
.main .btn-box02.sky em{font-size: 12px;padding: 15px 0 0 5px ;font-weight: 400}
.main .btn-box02 .txt-box01 {border-radius: 10px 30px;background-color: rgba( 255, 255, 255, 0.5);margin: 30px 20px;padding: 20px;display: flex; justify-content: space-evenly;font-size: 16px;line-height: 1.8;color: #222;font-weight: 500}
.main .btn-box02 .txt-box02 {border-radius: 10px 30px;background-color: rgba( 255, 255, 255, 0.7);margin: 20px 20px;padding: 20px;display: flex; justify-content: space-evenly;font-size: 16px;line-height: 1.8;color: #222;font-weight: 500}
.main .btn-box02 .line01 {height: 100%; background-color: #ffb65a;width: 1px; min-height: 40px; margin: 20px 5px;}
.main .btn-box02 .line02 {height: 100%; background-color: #7fb5c9;width: 1px; min-height: 40px; margin: 20px 5px;}

/* main visualSwiper */
.shadow-box{border-radius: 10px 30px;box-shadow: 0 5px 8px 1px rgba(172, 224, 224, 0.39);background-color: #fcfcfc;}
.visualSwiper .swiper-wrapper {width: 100%;height: 340px;align-items: stretch}
.visualSwiper .swiper-wrapper .txt-box{line-height: 1.32;font-size: 18px;font-weight: 500;padding: 50px 30px}
.visualSwiper .swiper-wrapper .title{font-size: 24px;font-weight: 600;padding-bottom: 20px}
.visualSwiper .swiper-wrapper .txt{font-size: 14px;font-weight: normal;position: absolute;bottom: 50px}
.visualSwiper .swiper-wrapper .bg-img { background-position: center; background-size: cover;  height: 100%; width: 100%; position: absolute; top: 0; left: 0;z-index: -2;border-radius: 10px 30px;min-height: 120px}
.visualSwiper .swiper-wrapper a:hover{color: #222}
.visualSwiper .swiper-wrapper .swiper-slide {
      text-align: left;
      font-size: 18px;
      background: rgba(255, 255, 255, 0);
      display: block;
      justify-content: left;
      align-items: left;
    }
.swiper-pagination{text-align: right!important;padding-right: 10px}
.swiper-pagination-bullet {
	width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px)) !important;
	height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px))!important;
	border: solid 0.5px #eaeaea;
}
:root {--swiper-theme-color: #00879b!important;}

/* notice */
.notice{padding-top: 30px;padding-bottom: 30px}
.notice .head{display:flex;align-items: center; justify-content: space-between;font-size: 24px;border-bottom: 1px solid #222}
.notice .title {font-size: 24px; font-weight: bold; color: #222;padding-left: 5px;padding-bottom: 8px}
.notice .more a{text-align: right;font-size: 16px;line-height: 24px; font-weight: 500;font-size: 12px;font-weight: 500;color: #00879b;padding-right: 5px;}
.notice .more a:after {content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px;color:#00879b;font-size:10px;vertical-align: middle;padding-left: 2px}
.notice .body {margin-top: 15px;border-bottom: 1px solid #dadada}
.notice li {display:flex;justify-content: space-between;align-items: center;font-size: 14px;padding:10px 10px}
.notice li .subject{display: flex; align-items: center;}
.notice li .subject:before {content: ""; margin-right: 8px;width: 4px;height: 4px;display: inline-block; border-radius: 100%; background: #222; display: inline-block;}
.notice .date {width:30%;text-align: right;color: #c0bebe}

/* service center*/
.service{position: relative;}
.service .btn-box {width: 50%; flex-grow: 0;border-radius: 10px 30px;margin-right: 10px;padding: 30px 20px;float: left;max-height: 180px;overflow: hidden;}
.service .btn-box .title{font-size: 24px; font-weight: 600; padding-bottom: 10px}
.service .btn-box.bg01{background-color: #00879b;width: 100%;}
.service .btn-box.bg02{background-color: #10a3b9;width: 100%;}
.service .btn-box li{font-size: 18px;font-weight: 500; text-align: left;color: #fff;}
.service .btn-box li a{display: flex; justify-content: space-between; align-items: center; font-size: 14px;padding: 15px 10px 0;}
.service .center{display:flex;justify-content: space-evenly;width: 100%; height: 180px; margin: 0px auto; box-shadow: 0 5px 8px 1px rgba(172, 224, 224, 0.39); border-radius: 10px 30px;background: #fff;overflow: hidden; }
.service .center .txt-box{width: 50%;padding: 10px 0px 0px 30px;line-height: 1.32;font-size: 14px;}
.service .center .title{font-size: 14px;font-weight: 500;padding-bottom: 10px}
.service .center .time{max-width: 210px; margin: 5px 0 0;padding: 8px 10px 8px 10px; border-radius: 303px;background-color: #f6f6f6;font-size: 15px;text-align: center;}
.service .center .time .line-s {color: #222; font-size: 12px;margin: 0 5px 0 5px; vertical-align: 10%;}
.service .center .number{ font-size: 30px;color: #00879b;font-weight: 600;padding-top: 10px}
.service .center .email{font-size: 14px;position: absolute;bottom:20px;text-align: center}
.service .center .email em{color: #b4b4b4}
.service .center .line { height: 100%; background: #e8e8e8;  width: 1px;max-height: 143px;margin: 20px 5px}
.service .center .title02{font-size: 28px;font-weight: 600;padding:30px 0 10px}
.service .center a{margin-right:5px;}
.yellow{color: #f1ae00!important}



@keyframes animation1 {
  0% {margin-left: 0}
  20% {margin-left: 0}
  25% {margin-left: -100%}
  45% {margin-left: -100%}
  50% {margin-left: -200%}
  70% {margin-left: -200%}
  75% {margin-left: -300%}
  95% {margin-left: -300%}
  100% {margin-left: 0}
}
@keyframes animation2 {
  0% {margin-left: -100%}
  20% {margin-left: -100%}
  25% {margin-left: -200%}
  45% {margin-left: -200%}
  50% {margin-left: -300%}
  70% {margin-left: -300%}
  75% {margin-left: 0}
  95% {margin-left: 0}
  100% {margin-left: -100%}
}
@keyframes animation3 {
  0% {margin-left: -200%}
  20% {margin-left: -200%}
  25% {margin-left: -300%}
  45% {margin-left: -300%}
  50% {margin-left: 0}
  70% {margin-left: 0}
  75% {margin-left: -100%}
  95% {margin-left: -100%}
  100% {margin-left: -200%}
}
@keyframes animation4 {
  0% {margin-left: -300%}
  20% {margin-left: -300%}
  25% {margin-left: 0}
  45% {margin-left: 0}
  50% {margin-left: -100%}
  70% {margin-left: -100%}
  75% {margin-left: -200%}
  95% {margin-left: -200%}
  100% {margin-left: -300%}
}



@media (max-width: 1024px) {

	.main {position: relative; padding: 30px 0 30px; overflow: hidden;}
	.service .btn-box {padding-top: 20px}
	.service .center .txt-box{padding-left: 20px}
	.service .center .number{font-size: 24px}
	.service .center .time{padding:5px 0}
	.service .center .title02{font-size: 24px;padding-top: 15px}
	.service .center a{padding-right: 0}
	.main .btn-box02 .txt-box01{margin: 50px 10px 0;font-size: 14px;padding: 10px;}
	.main .btn-box02 .txt-box02{margin: 30px 10px 0;font-size: 14px;padding: 10px;}
	.main .btn-box02 li.ex{font-size: 13px;padding-top:30px }
}

@media (max-width: 768px) {
	.col-1{width: 50%}
	.col-2{width: 100%}
	.visualSwiper{margin-top: 10px;min-height: 130px;}
	.visualSwiper .swiper-wrapper{margin-top: 10px;height: auto}
	.visualSwiper .swiper-wrapper .txt-box{font-size: 14px;padding:20px 30px}
	.visualSwiper .swiper-wrapper .title{padding-bottom: 10px;font-size: 16px}
	.visualSwiper .swiper-wrapper .txt{bottom: 15px;display: none;}
	.swiper-pagination-bullet {
	width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 10px)) !important;
	height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size,10px))!important;
	border: solid 0.5px #eaeaea;
	}	
	.m-no{display: none;}
	.main .btn-box {padding: 10px 0}
	.main .btn-box li{font-size: 24px}
	.main .btn-box .btn-pt{padding-top: 20px}
	.main .btn-box{min-height: 250px}
	.main .btn-box.orange{max-width: 100%}
	.main .btn-box02 {padding: 20px 5px;min-height: auto}
	.main .btn-box02 li {font-size: 22px;}
	.main .btn-box02.orange .btn{padding:10px 50px;border-radius: 5px;margin-top: 15px}
	.main .btn-box02.sky .btn{padding:10px 10px;border-radius: 5px;margin-top: 15px}
	.main .btn-box02 .txt-box01{margin: 15px 10px 0;font-size: 14px;padding: 10px;font-size: 13px}
	.main .btn-box02 .txt-box02{margin: 15px 10px 0;font-size: 14px;padding: 10px;font-size: 13px}
	.main .btn-box02 li.ex{font-size: 13px}
	.notice .title {font-size: 16px;}
	.notice li {font-size: 14px;padding: 8px 10px}
	.notice .body{margin: 10px 0}
	.service .btn-box{padding: 5px 20px}
	.service .btn-box li a{padding: 0}
	.service .btn-box .title{font-size: 20px}
	.service .center{text-align: center;height: 160px;margin-top: 15px }
	.service .center .time{margin: 0 auto}
	.service .center .email{font-size: 14px;position:inherit;text-align: center;padding-top: 10px}
	.service .center .line {height: 100%;background: #e8e8e8; width: 1px;max-height: 140px; margin: 10px 5px;}
}

@media (max-width: 575px) {
	.col-1{width: 50%}
	.blank02{padding: 15px 0}
	.main .btn-box {padding: 20px 0;min-height: 150px }
	.main .btn-box .btn-pt{padding-top: 10px;display: inline-block;}
	.main .btn-box li{font-size: 18px;}
	.main .btn-box li img{display: none}
	.w-115 {display: block}
	.main .btn-box.orange button{margin: 20px}
	.service .btn-box li{font-size: 14px}
	.service .btn-box li a{padding: 0}
	.service .btn-box .title{font-size:16px}
	.service .center{text-align: center;height: 140px;margin-top: 15px }
	.service .center .txt-box{padding:10px 5px}
	.service .center .time{margin: 0 auto;font-size: 12px;}
	.service .center .number{font-size: 18px}
	.service .center .email{font-size: 12px;position:inherit;text-align: center;padding-top: 10px}
	.service .center .title02{font-size: 18px}
	.service .center .line {height: 100%;background: #e8e8e8; width: 1px;max-height: 120px; margin: 10px 5px;}
}

.input-container {
	position: relative;
	display: inline-block;
}

.input-container input {
	padding-right: 35px; /* X 아이콘 공간 확보 */
}

.clear-icon {
	position: absolute;
	right: 18px;
	top: 42%;
	transform: translateY(-50%);
	cursor: pointer;
	color: gray;
}

.clear-icon:hover {
	color: red;
}