@charset "utf-8";

/* sec-selector */
/*
.sec-selector { position: sticky; top:140px;   z-index: 8; height: 87px;}
.sec-selector .content-top { width: 100%; height: 87px; border-top: 1px solid #ddd; box-sizing: border-box; background: #fff; border-radius:0 0 20px 20px; position: relative; top: 0;}
.sec-selector .inner { position: relative; max-width:1400px; margin:0 auto; height: 100%;}

.sec-selector .flex-box { display: flex;  height: inherit; align-items: center; justify-content: space-between;}
.sec-selector .flex-box .btns { display: flex;}
.sec-selector .content-top .link-btn,
.sec-selector .btns .drop { padding: 6px 14px 6px 22px; justify-content: space-between; border: 1px solid #ddd; border-radius: 35px;}
.sec-selector .content-top .link-btn.v2 { padding-inline: 14px;}
.sec-selector .content-top .link-btn .ico,
.sec-selector .btns .drop .ico { margin-left: 5px;}
.sec-selector .content-top .link-btn .text span { font-size: 15px; font-weight: 600; text-shadow: 0px 22px 0px #000;}
.sec-selector .content-top .link-btn + .link-btn { margin-left: 12px;}
.sec-selector .content-top.active { top: 0; z-index: 9;}

@media (pointer: fine) {
  .sec-selector .btns .drop ul li a:hover { color: #fff; background: #000;}
  .sec-selector .btns .drop ul li a:hover .ico { filter: invert(1);}
  .sec-selector .content-top .btns .link-btn:not(.small):hover { border-color: rgba(0,94,184,1);}
  .sec-selector .content-top .btns .link-btn:hover .text span { color: var(--accent-color); text-shadow: 0px 22px 0px var(--accent-color);}
  .sec-selector .content-top .btns .link-btn:hover .ico { background-image: url(../images/ico-download-active.png);}
}



@media screen and (max-width: 1430px) {
	.sec-selector .inner { padding:0 15px;;}
}

@media screen and (max-width: 1280px) {
	.sec-selector { top:80px;}
}

@media screen and (max-width: 1024px) {
  .sec-selector .content-top { height: auto;}
  .sec-selector .flex-box { flex-direction: column; align-items: flex-start; padding: 10px 0; gap:10px;}
}
@media screen and (max-width: 767px) {
  .sec-selector { height: auto; min-height: 90px;}
  .sec-selector .inner { width: 95%; padding:0 15px;}
  .sec-selector .content-top .link-btn .text span { font-size: 14px;}
  .sec-selector .content-top .link-btn, .sec-selector .btns .drop { padding: 4px 8px 4px 16px;}
  .sec-selector .flex-box .btns { flex-wrap: wrap; gap: 5px;}
  .sec-selector .flex-box .btns .link-btn { margin: 0;}
  .sec-selector .flex-box .btns .link-btn.v2 { padding-inline: 8px;}
}
*/

.sec-selector {  margin-top:80px;   z-index: 8; }
.sec-selector .inner { max-width:1400px; margin:0 auto; padding:0 15px; }
.sec-selector .inner ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4¿­ */ gap: 16px; }
.sec-selector .inner ul li a { display:block; width:100%; text-align:center; padding:15px 0;  color:#fff; font-size:1.275rem; border:1px solid #fff; border-radius:18px;  word-break:keep-all;  }
.sec-selector .inner ul li a.active { background:#ed6d00; }

/* ¹ÝÀÀÇü ¿¹½Ã */
@media (max-width: 1200px) { .sec-selector .inner ul  { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { 
	.sec-selector {  margin-top:50px;   }
	.sec-selector .inner ul  { grid-template-columns: repeat(2, 1fr); } 
}

@media (max-width:680px)  { 
	.sec-selector .inner ul  { gap: 10px;  }
	.sec-selector .inner ul li a { padding:15px 10px;  font-size:1rem; letter-spacing: -0.05em; }
}


/* sub-link-boxs */
.sub-link-boxs ul { display: flex; color: #fff;}
.sub-link-boxs > ul > li + li { position: relative; margin-left: 43px; display: flex; align-items: center;}
.sub-link-boxs > ul > li + li::before { content: ''; display: block; width: 3px; height: 3px; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); left: -21px;}
.sub-link-boxs ul li.drop { cursor: pointer;}
.sub-link-boxs ul li.drop i { font-size:25px; margin-left:5px; }
.sub-link-boxs ul li.drop ul { position: absolute; left: 0; top: 100%; display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: 0.3s; gap: 5px; opacity: 0.8; z-index: 9; width: max-content;}
.sub-link-boxs ul li.drop ul li a { color: #fff; padding: 10px 0;}
.sub-link-boxs ul li.drop.active i { transform: rotate(180deg);}
.sub-link-boxs ul li.drop.active ul { max-height: 500px; padding-top: 20px;}
.sub-link-boxs ul li.drop ul li a:hover { text-decoration: underline;}
.sub-link-boxs.basic { display: flex; align-items: center; font-size:18px;}
.sub-link-boxs.basic > ul > li + li { padding-left: 43px; margin: 0;}
.sub-link-boxs.basic ul { color: inherit; font-weight: 400; background: #fff; min-width: 100%;}
.sub-link-boxs.basic ul li.drop ul { width: auto; white-space: nowrap; z-index: 9; opacity: 1; padding-bottom: 5px;}
.sub-link-boxs.basic ul li.drop ul li a { color: inherit; font-weight: 400; padding: 5px 40px; display: block; font-size: 16px;}
.sub-link-boxs.basic > ul > li + li::before { background: #000; left: 21px;}
.sub-link-boxs.basic .ico-arrow-drop { filter: invert(1);}
.sub-link-boxs.basic .ico-home { filter: invert(1);}
.sub-link-boxs.basic .sub-link-home i { font-size:25px; }
.sub-link-boxs ul li.drop ul li.active { text-decoration: underline; text-underline-offset: 5px;}
.sub-link-boxs ul li.drop ul li { pointer-events: none;}
.sub-link-boxs ul li.drop.active ul li { pointer-events: auto;}
@media (pointer: fine) {
  .sub-link-boxs > ul > li.drop:hover { text-decoration: none; text-underline-offset: 5px; }
}
@media screen and (max-width: 1024px) {
  .sub-link-boxs > ul > li + li { margin-left: 33px;}
  .sub-link-boxs > ul > li + li::before { left: -17px;}
  /* .sub-link-boxs.basic > ul > li:not(.drop):not(:first-child) { display: none;} */
  .sub-link-boxs.basic > ul > li + li { padding-left: 33px;}
  .sub-link-boxs.basic > ul > li + li::before { left: 17px;}
  .sub-link-boxs.basic ul li.drop ul li a { padding: 5px 30px;}
}
@media screen and (max-width: 767px) {
  .sub-link-boxs > ul > li:not(:last-child):not(:nth-child(1)) { display: none;}
  .sub-link-boxs > ul > li + li { margin-left: 23px;}
  .sub-link-boxs > ul > li + li::before { left: -14px;}
  .sub-link-boxs.basic > ul > li + li { padding-left: 23px;}
  .sub-link-boxs.basic > ul > li + li::before { left: 8px;}
  .sub-link-boxs ul li.drop.active ul { padding-top: 10px;}
  .sub-link-boxs.basic ul li.drop ul li a { padding: 5px 20px; font-size: 14px;}
  .ico-arrow-drop { margin-left: 10px;}
}

/* Client */
.client-list { padding-top: 40px; border-top: 1px solid #fff; }
.client-list ul { display: flex; flex-wrap: wrap; margin: -18px -10px; }
.client-list li { padding: 18px 10px; width: 20%; }
.client-list .thumbnail { position: relative; }
.client-list .thumbnail::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #e5e5e5; }
.client-list .thumbnail img { display: block; max-width: 100%; }
.client-list .contents .title { margin-top: 16px; padding: 0 12px; text-align: center; font-weight: 500; color: #fff;  font-size: clamp(14px, 3.6vw, 18px); }

@media screen and (max-width: 1024px) {
	.client-list { padding-top: 32px; }
	.client-list ul { display: flex; flex-wrap: wrap; margin: -16px -6px; }
	.client-list li { padding: 16px 6px; width: 25%; }
	.client-list .contents .title { margin-top: 12px; }
}

@media screen and (max-width: 768px) {
	.client-list { padding-top: 24px; }
	.client-list ul { display: flex; flex-wrap: wrap; margin: -12px -3px; }
	.client-list li { padding: 12px 3px; width: 33.33333%; }
	.client-list .contents .title { margin-top: 10px; }
}
@media screen and (max-width: 568px) {
	.client-list li { width: 50%; }
}