@import url(./basic.css);

/* 
---------------------------------------------------------------------------------------------------------------------------------------------------------------
                                                        메인페이지
---------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.slideVisual {position: relative;overflow: hidden;width: 100%;height: 100vh; /* 기본 PC 높이 */}
.slideVisual video {position: absolute;top: 0;left: 0;width: 120%;height: 120%;object-fit: cover;z-index: 1;}
.slideVisual .text {position: relative;width:100%;height:100%;z-index:1;background: rgba(0, 0, 0, 0.4); /* 가독성 위한 반투명 배경 (선택사항) */}
.text .inner {padding: 20px;border-radius: 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;max-width: 1000px;padding: 20px;box-sizing: border-box;text-align: left;z-index: 2;color: white;}
.text h2 {font-size: 1.7rem;font-weight: 400;}
.text h2 strong {font-size: 2.5rem;display: block;font-weight: 700;}
.text p {font-size: 1rem;font-weight: 400;margin-top: 10px;}
@media (max-width: 1024px) {
.slideVisual {height: 500px;}
}
@media (max-width: 768px) {
.slideVisual {height: 300px;}
.text h2 {font-size: 1.3rem;}
.text h2 strong {font-size: 2rem;}
.text p {font-size: 0.95rem;}
}





.mainTitle{font-weight:600;position:relative;text-align:center;margin-bottom:30px;}





.main-article{padding:70px 0;}
.main-article.white{padding:65px 0;background-color:#fff;}


/*탭*/			 
.tab-button-outer {text-align:center;}
.tab-select-outer {display: none;}
#tab-button{height:50px;display:inline-block;background-color:#F3F4F6;border-radius:25px;}
#tab-button li{position:relative;display:inline-block;font-size:.9rem;height:50px;} 
#tab-button li a{font-size:1.1rem;line-height: 50px;display: block;width: 100%;height: 100%;padding:0 40px;color:#2A2A2A;} 
#tab-button li.is-active{background-color:#1D4ED8;border-radius:25px;} 
#tab-button li.is-active a{color:#fff;font-size:1.1rem;} 
#tab-button .mobile{ display: none; }
#tab-select{margin-bottom:30px;border: 1px solid #ddd; width: 100%; height: 50px; padding:10px;}

@media screen and (max-width: 1530px) {
	#tab-button .mobile{display: block; }
}

@media screen and (max-width: 760px) {
	.tab-contents .row .col-xs-12{padding:0 !important;}
	.tb05 thead tr th{font-size:.9rem; }

	.tab-button-outer,#tab-button .mobile {display: none; }
	.tab-select-outer { display: block; margin-bottom:30px;}
}
@media screen and (max-width: 480px) {
	.tb05 thead tr th{font-size:.8rem; }
}



 /*공지*/
.boardSwipe {width: 100%;height: 540px; margin-left: auto;margin-right: auto;margin-top: 30px;padding-bottom: 30px !important;}
.boardSwipe .swiper-slide {font-size: 18px;background: #fff;height: calc((100% - 40px) / 3) !important; display: flex;justify-content: center;border: 1px solid #D6D6D6;border-radius: 12px;padding: 20px 30px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);background-color: #fff;flex-direction: column; /* 텍스트 위아래 배치 */}
.boardSwipe .date {color: #007bff;font-size: 14px;margin-bottom: 8px;}
.boardSwipe .title {font-weight: bold;font-size: 18px;margin-bottom: 10px;}
.boardSwipe .desc {color: #666;font-size: 14px;line-height: 1.4;}
.boardSwipe .swiper-horizontal > .swiper-pagination-bullets, .boardSwipe .swiper-pagination-bullets.swiper-pagination-horizontal, .boardSwipe .swiper-pagination-custom, .boardSwipe .swiper-pagination-fraction {bottom: 0 !important;}
.boardSwipe .swiper-pagination-bullet-active {width: 30px;border-radius: 5px;}


/*주요서비스*/
.photoBox {display: flex;flex-flow: row wrap;justify-content: space-between;align-content: center;max-width:800px;margin:20px auto 0;}
.photoBox .photo{margin:10px 5px 0;width:45%;background-color: #fff;overflow: hidden;}
.photoBox .photo .text{padding:30px;}
.photoBox .photo.noimg .text{padding:20px 15px;position:relative;}
.photoBox .photo .text .tit{font-size:1.2rem;font-weight:500;}
.photoBox .photo .text p{height:35px;color:#8E8E8E;font-weight:400;font-size:.9rem;margin:10px 0;}
.photoBox .photo:not(.noimg) .text p{overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap:break-word;}
.photoBox .photo.noimg .text p{height:100px;text-align:justify;}
.photoBox .photo .text span{font-size:.9rem;}
.photoBox .photo.noimg .text span{position:absolute;bottom:10px;left:15px;}
.photoBox .photo:after{clear:both;display:block;content:'';}
.photoBox .photo figure{position:relative;margin:0;display: block;color: #000;position: relative;bottom: 0;width:100%;height: 200px;overflow: hidden;-webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;}
.photoBox .photo figure img{position: absolute; top: 50%; transform: translateY(-50%);display: block;width: 100%;height: auto;webkit-border-radius:7px;-moz-border-radius:7px;-webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;}
.photoBox .photo:hover figure img{transform:translateY(-50%) scale(1.1);-webkit-transform: translateY(-50%) scale(1.1);-ms-transform: translateY(-50%) scale(1.1)}



	@media (max-width: 991px) { 
	   .photoBox .photo:nth-child(4){display:none;}
	   .photoBox .photo:nth-child(5){display:none;}
	}

	@media (max-width: 767px) { 
	   .photoBox .photo{width:100%;margin-bottom:20px}
	   .photoBox .photo:nth-child(4){display:block;}
		.photoBox .photo .text p { font-size: 1rem;}
		.photoBox .photo .text span {font-size: 1rem;}
		.photoBox .photo figure {  height: 250px;}

	}


/* 
---------------------------------------------------------------------------------------------------------------------------------------------------------------
                                                         일반컨텐츠
---------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

em{color:#000;font-size:1.4rem;}
hr.guidline {display: block;margin: 3rem 0;padding: 0;width: 100%;height: 1px;background: #ddd;border: none;}
.grayBox{text-align: justify;padding: 40px;margin-bottom: 30px;border-radius: 15px;border:1px solid #e1e7ed;box-shadow: 0px 1px 16px -2px rgba(22, 22, 22, .1);border-radius: 12px;background-color: #fff;}

ol.towLine{margin-left:20px;}
ol.towLine li{font-size:1rem;padding-bottom:10px;list-style-type:decimal;}
ol.towLine li a{color:#000;}
ol.towLine li a.on{color:#df7625}
ol.towLine::after{clear:both;display:block;content:'';width:0;height:0;}

@media (max-width: 767px) {
		ol.towLine li{width:calc(100% - 10px);}
		.grayBox{padding: 20px;}

}

ul.dotted{margin-bottom:30px;}
ul.dotted li{position: relative;padding-left: .7rem;text-align: left;margin-bottom: 0.5rem;font-size: 1rem;}
ul.dotted li::before {content: '';width: .25rem;height: .25rem;border-radius: 50%;background: #777;position: absolute;top: .45rem;left: 0;}

/*테이블*/
table.tableStyle_01{width:100%; border-collapse:collapse; border-spacing:0; border-left:1px solid #d8d8d8;border-top:1px solid #444;margin-top:20px;}
table.tableStyle_01 th{width:150px;font-size:1rem;line-height:2rem;padding:8px 5px;border-bottom:1px solid #d8d8d8; font-weight:400; border-right:1px solid #d8d8d8;background-color:#f4f4f4;}
table.tableStyle_01 td{font-size:1rem;padding:8px 5px;border-bottom:1px solid #d8d8d8; border-right:1px solid #d8d8d8}
table.tableStyle_01 td .alert{display:block;font-size:.9rem;color:#8d8d8d;}
table.tableStyle_01 td.center{text-align:center;}

	@media (max-width: 767px) { 
	   table.tableStyle_01 tr,
	   table.tableStyle_01 td,
	   table.tableStyle_01 th{width:100%;display:block;font-size:1.1rem;}
	   table.tableStyle_01 td{padding:15px 10px;font-size:1.1rem;}

	}

.tableStyle_02 { width: 100%; text-align: center;}
.tableStyle_02 table { position: relative; width: 100%; word-break: break-all; border-radius: 4px;}
.tableStyle_02 table::before { content: ''; width: 100%; height: 2px; background: #0c385a; position: absolute; top: 0; left: 0; }
.tableStyle_02 table th { text-align: center; color: #000; font-size: 1rem; font-weight: 500; background: #fcfcfc; }
.tableStyle_02 table thead th { font-weight: 600; color: #000; border-bottom-color: #aaa; background: #f9f9f9; padding: .8rem 1rem; }
.tableStyle_02 table td { font-size: 1rem; color: #000; }
.tableStyle_02 table td.text-left {text-align:left}
.tableStyle_02 table th{ border-bottom: 1px solid #ddd;border-right:1px solid #ddd;padding: .8rem 1rem; }
.tableStyle_02 table td { border-bottom: 1px solid #ddd; border-right:1px solid #ddd;word-break: keep-all; padding: .8rem 1rem; }
.tableStyle_02 table th:last-child,
.tableStyle_02 table td:last-child{ border-right:none;}
.tableStyle_02 table tr:first-child th, .tableStyle_02 table tr:first-child td { border-top: 0; }

.tableStyle_02::-webkit-scrollbar { height: 3px; }
.tableStyle_02::-webkit-scrollbar-thumb { background-color: #333; border: 3px solid #333; border-radius: 5px; }
.tableStyle_02::-webkit-scrollbar-track { background-color: #e5e5e5; }

@media screen and (max-width: 767px) { 

	.tableStyle_02 table th {  font-size: 1.1rem; }
	.tableStyle_02 table td { font-size: 1.1rem;}
}


.tableStyle_03 { width: 100%; text-align: center; }
.tableStyle_03 table { position: relative; width: 100%; word-break: break-all; }
.tableStyle_03 table::before { content: ''; width: 100%; height: 2px; background: #0c385a; position: absolute; top: 0; left: 0; }
.tableStyle_03 table th { text-align: center; color: #000; font-size: .8rem; font-weight: 400; background: #fcfcfc; }
.tableStyle_03 table thead th { font-weight: 600; color: #000; border-bottom-color: #aaa; background: #f9f9f9; }
.tableStyle_03 table td { font-size: .8rem; color: #000; }
.tableStyle_03 table th, .tableStyle_03 table td { border: 1px solid #ddd; word-break: keep-all; padding: .8rem 5px; }
.tableStyle_03 table tr:first-child th, .tableStyle_03 table tr:first-child td { border-top: 0; }
.tableStyle_03::-webkit-scrollbar { height: 3px; }
.tableStyle_03::-webkit-scrollbar-thumb { background-color: #333; border: 3px solid #333; border-radius: 5px; }
.tableStyle_03::-webkit-scrollbar-track { background-color: #e5e5e5; }

@media screen and (max-width: 767px) { 
  .tableStyle_03 { width: 100%; overflow-x: scroll; }
  .tableStyle_03 table { min-width: 45rem; }
}

/* 인사말 */
.intro-container {max-width: 800px;margin: 0 auto;padding: 3rem 1.5rem;text-align: left;}
.intro-title {font-size: 2rem;font-weight: bold;color: #1e3a8a;margin-bottom: 2rem;}
.intro-content {font-size: 1.1rem;line-height: 1.8;margin-bottom: 2rem;text-align: left;}
.intro-content strong {color: #2563eb;}
.signature {margin-top: 3rem;font-weight: bold;color: #374151;}
.highlight-box {background-color: #e0f2fe;border-left: 5px solid #0284c7;padding: 1rem;margin-top: 2rem;font-size: 1rem;}

	@media (max-width: 600px) {
	  .intro-title {font-size: 1.5rem;}
	}

/*인증특허*/
.gallery {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 15px;max-width: 1200px;margin: auto;}
.gallery figure {margin: 0;text-align: center;}
.gallery img {width: 100%;height: auto;cursor: pointer;transition: transform 0.2s;}
.gallery img:hover {transform: scale(1.03);}
.gallery figcaption {margin-top: 20px;font-size: 0.9rem;height: 90px;color: #333;background:#fff;line-height: 1.4;padding: 10px 10px 15px;border-radius: 6px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
.modal {display: none;position: fixed;z-index: 999;left: 0; top: 0;width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.8);align-items: center;justify-content: center;}
.modal.show {display: flex;}
.modal-content {max-width: 90%;max-height: 90%;border: 8px solid white;box-shadow: 0 0 30px rgba(255,255,255,0.5);}
.modal .close-btn {position: absolute;top: 30px;right: 50px;font-size: 40px;color: white;cursor: pointer;}
.modal .nav-btn {position: absolute;top: 50%;transform: translateY(-50%);font-size: 50px;color: white;background: rgba(0, 0, 0, 0.3);padding: 10px 20px;border: none;cursor: pointer;user-select: none;border-radius:100%;width: 85px;height: 85px;}
.modal .prev-btn { left: 30px; }
.modal .next-btn { right: 30px; }
@media (max-width: 600px) {
	.close-btn {top: 10px;right: 20px;font-size: 30px;}
	.nav-btn {font-size: 30px;}
}


/*서비스장점*/
.servicebox {  display: flex;  flex-wrap: wrap;  gap: 20px;  }
.servicebox .box { flex: 1 1 25%; background-color: #fff;  color: white;  border-radius: 15px;  padding: 20px;  box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.servicebox .box h3 {  margin:0 0 20px;  font-size: 1.2rem;  background-color: #ebf5ff; color:#1D4ED8; padding: 8px;  border-radius: 10px;  text-align: center;}
.servicebox .box ul { }
.servicebox .box ul li {  margin-bottom: 10px;  list-style: none;  position: relative;color:#111;}
.servicebox .highlight {  color: #1D4ED8;  font-weight: bold;}
@media (max-width: 720px) {
.servicebox .box { flex: 1 1 50%; }
}


/*솔루션소개*/
.grid-container .category {  background: white;  border-radius: 10px;  box-shadow: 0 2px 10px rgba(0,0,0,0.1);  padding: 20px;}
.grid-container .category-title {  font-size: 1.2rem;  font-weight: bold;  color: #1A73E8;  margin-bottom: 15px;}
.grid-container .item-list {  display: flex;  flex-wrap: wrap;  gap: 10px;}
.grid-container .item {  flex: 1 1 120px;  background: #ebf5ff;  padding: 10px;  border-radius: 8px;  text-align: center;  font-size: 0.9rem;}
.grid-container .item img{ display:block;margin:0 auto;width:40px;}
.grid-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));grid-auto-rows: auto;gap: 20px;}
.category {background: white;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);padding: 20px;}
.span-2row {display: grid;grid-template-rows: 1fr 1fr; /* 위/아래 나누기 */gap: 20px;}
.half-box {background: white;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);padding: 20px;}

  @media (max-width: 768px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }


/* 가입절차*/
.stepInfo_wrap{min-height:100px;}
.stepInfo{vertical-align: middle; width: 100%;font-size:.9em;margin-left:20px;}
.stepInfo li{position: relative; float: left; width: 25%; height: 90px; border-radius: 50px; border-style: solid; border-width: 15px; margin-left: -15px; text-align: center;}
.stepInfo li p.textL{padding-bottom: 5px; margin-bottom: 5px;line-height:1.35em;margin-top: 20px;font-weight:bold;font-size:1.1rem;}
.stepInfo li.t1{border-color:#0072bc;}
.stepInfo li.t2{border-color: #00b3b3;}
.stepInfo li.t3{border-color: #f7941e;}
.stepInfo li.t4{border-color:#7ca348;}
.stepInfo li span{position: absolute; right:-17px; top:25px; font-size: 0; width: 19px; height: 15px; background: url(/image/sub/icon_right_arrow.png) no-repeat; -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;  z-index: 10;}
.stepInfo .fs11 {letter-spacing: -1px; font-size: .7em;line-height:1.3em;}