@charset "utf-8";

:root {
	--box-shadow: 0 0 16px rgba(0, 0, 0, .05);
}

input::placeholder {color: rgba(51, 51, 51, 0.6);}

section {position: relative;}
.background-img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1}
.background-img img {width:100%; height: 100%; object-fit: cover;}
.icon-title {display: flex; align-items: center; gap: .9rem;}
.icon-title-icon {width: 1.77rem; height: 1.88rem; position: relative;}
.icon-title-icon:before, .icon-title-icon:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../images/ico_logo_blue.svg) no-repeat center / contain; transition: 1s ease;}
.icon-title-icon:before {transform: scale(.5) translateX(-15%);}
.icon-title-icon:after {transform: scale(.5) translateX(15%);}
.icon-title-icon:after {background-image: url(../../images/ico_logo_green.svg);}
.icon-title-text {font-size: 1.7rem; font-weight: 800; color: var(--dark-blue); overflow: hidden;}
.icon-title.aos-animate .icon-title-icon:before, .icon-title.aos-animate .icon-title-icon:after {transform: none;}
.icon-title.aos-animate .icon-title-text span {animation: fadeUp_100 1s ease both;}
.button-box {display: flex; align-items: center; gap: 1.35rem;}
.click-btn {width: 100%; box-sizing: border-box; overflow: hidden; transition: .5s ease;}
.click-btn span {transition: .5s ease;}
.click-btn.type1 {padding-left: 1.35rem; padding-right: .9rem; display: flex; align-items: center; justify-content: space-between; max-width: 7.7rem; height: 2.6rem; border-radius: 3rem;}
.click-btn.blue {background: var(--blue); color: #fff;}
.click-btn.type1 .icon {width: 1.0rem; height: 1.0rem; mask-image: url(../../images/ico-arrow-right.svg); background: #fff; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../../images/ico-arrow-right.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;}
.click-btn.type2 {max-width: 8.8rem; height: 3.3rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; text-align: center;}
.click-btn.type2.down {max-width: 13.3rem;}

.tabList {position: relative;}
.tabList .bg {position: absolute; transition: .5s ease;}
.tabList ul {display: flex;}
.tabList ul .tabList-li a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;}
.tabList.type1 .bg {background: var(--blue); height: 5px;}
.tabList.type1 ul {justify-content: center; flex-wrap: wrap;}
.tabList.type1 ul .tabList-li a {padding: .9rem 1.6rem; height: clamp(3.8rem, 3vw, 4.4rem); color: var(--silver); font-weight: 500;}
.tabList.type1 ul .tabList-li.active a {color: var(--blue); font-weight: 600;}
.tabList.type2 {border-bottom: 1px solid var(--blue);}
.tabList.type2 ul {justify-content: center;}
.tabList.type2 ul .tabList-li {width: clamp(8rem, 15vw, 11.1rem); height: clamp(3rem, 7vw, 3.5rem); border-radius: .9rem .9rem 0 0; box-sizing: border-box; padding-bottom: 1px; margin-bottom: -1px;}
.tabList.type2 ul .tabList-li a {color: #bbb; font-size: clamp(1.0rem, 3vw, 1.35rem); font-weight: 600;}
.tabList.type2 ul .tabList-li.active {border: 1px solid var(--blue); border-bottom-color: #fff;}
.tabList.type2 ul .tabList-li.active a {color: var(--blue);}

.mgb5 {margin-bottom: 5px;}
.mgb24 {margin-bottom: 1.35rem;}
.mgb32 {margin-bottom: 1.7rem;}
.mgb48 {margin-bottom: 2.6rem;}
.mgb64 {margin-bottom: 3.5rem;}
.mgb80 {margin-bottom: 4.4rem;}

.text-list-type1 {display: flex; gap: .9rem; flex-direction: column;}
.text-list-type1 > div {display: flex; gap: .2rem;}
.text-list-type1 > div .ash-color {font-weight: 500;}
.text-list-type1 > div .ash-color:not(:first-child) {margin-left: .4rem;}
.text-list-type1 > div strong {font-weight: 700;}

.table-box table {width: 100%;}
.table-box table caption {display: none;}
.table-box table tr > * {vertical-align: middle; padding: .5rem; box-sizing: border-box;}
.table-box.type1 table {border-collapse: separate; border-spacing: 0 .4rem; margin-top: -.4rem; margin-bottom: -.4rem;}
.table-box.type1 table tr > *:first-child {border-top-left-radius: .9rem; border-bottom-left-radius: .9rem; padding-left: 1.35rem;}
.table-box.type1 table tr > *:last-child {border-top-right-radius: .9rem; border-bottom-right-radius: .9rem; padding-right: 1.35rem;}
.table-box.type1 table tr > *:first-child {text-align: left;}
.table-box.type1 table thead tr {border-radius: .9rem; background: var(--light-blue);}
.table-box.type1 table thead th {color: #fff; font-size: .9rem; font-weight: 600; height: 2.6rem;}
.table-box.type1 table tbody tr {background: #F5F5F5;}
.table-box.type1 table tbody tr:nth-child(even) {background: #EEEEEE;}
.table-box.type1 table tbody tr > * {height: 2.6rem; font-weight: 500; text-align: center;}

.flex-box {display: flex;}
.flex-box.type1 {gap: 1rem; justify-content: space-between;}
.flex-box .flex-right.img {flex: none;}
.flex-box.type1.show .flex-left > *{animation: fadeRight 1s ease both;}
.flex-box.type1.show .flex-right.img {animation: zoomIn 1s ease both;}

/* 메인  */
.splash-wrap {position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--blue); z-index: 100000000; animation: splash_move 3s ease both;}
.splash-wrap:after {content: ""; position: absolute; width: 100%; height: 100%; background: #fff; top: 0; left: 0; animation: splash_move_bg 3s ease both;}
.splash-wrap .icon {width: clamp(70px, 50vw, 100px); height: clamp(74px, 51vw, 106px); position: relative; z-index: 2;}
.splash-wrap .icon:before, .splash-wrap .icon:after {content: ""; width: 100%; height: 100%; position: absolute; top: 0; mask-repeat: no-repeat; mask-size: cover; mask-position: left center;  -webkit-mask-repeat: no-repeat; -webkit-mask-position: left center; -webkit-mask-size: cover; background: #fff;}
.splash-wrap .icon:before {mask-image: url(../../images/ico_logo_blue.svg); -webkit-mask-image: url(../../images/ico_logo_blue.svg); animation: splash_move_icon1 3s ease both;}
.splash-wrap .icon:after {mask-image: url(../../images/ico_logo_green.svg); -webkit-mask-image: url(../../images/ico_logo_green.svg); animation: splash_move_icon2 3s ease both;}
@keyframes splash_move {80% {opacity: 1;} 100% {opacity: 0;}}
@keyframes splash_move_bg {0% {clip-path: circle(150% at 50% 50%);} 35%, 100% {clip-path: circle(0% at 50% 50%);}}
@keyframes splash_move_icon1 {0%, 30% {opacity: 0; left: 12%;} 60%, 80% {opacity: 1; left: 0; transform: none;} 100% {opacity: 0; transform: scale(15);}}
@keyframes splash_move_icon2 {0%, 30% {opacity: 0; left: -12%;} 60%, 80% {opacity: 1; left: 0; transform: none;} 100% {opacity: 0; transform: scale(15);}}

.main section {overflow: hidden;}
.main section[class*="main-sec"] {padding: 6.6rem 0; position: relative;}
.main:not(.start) section[class*="main-sec"] {opacity: 0;}
.main section[class*="main-sec"].show {opacity: 1}
*[class*="title"], *[class*="text"] {word-break: keep-all;}
.main-visual {height: clamp(400px, 42vw, 620px); position: relative;}
.main-visual:before, .main-visual:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 1);}
.main-visual:after {opacity: .8;}
.main-visual-bg-img:after {content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: linear-gradient(180deg, #0047BA, transparent); opacity: .6; mix-blend-mode: multiply;}
.main-visual-bg-img:before {content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: #000000; opacity: .2;}
.main-visual-bg-img .slick-list, .main-visual-bg-img .slick-track, .main-visual-bg-img .slick-track .slick-slide div {height: 100%;}
.main-visual-inner {position: relative; display: flex; z-index: 1; color: #fff; padding-bottom: 3.5rem; align-items: flex-end; height: 100%;}
.main-visual-text-box {display: flex; flex-direction: column; gap: 1.35rem; width: 100%;}
.main-visual-text-top {line-height: 1; display: flex; gap: clamp(1rem, 2vw, 2.6rem); align-items: center;}
.main-visual-text-top-title {font-size: clamp(2.6rem, 3vw, 4rem); font-weight: 200; overflow: hidden;}
.main-visual-text-top-title strong {font-weight: 800;}
.main-visual-text-top-text {line-height: 1.4; font-weight: 600;}
.main-visual-text-bot {line-height: 1; font-size: 1.4rem;}
.main.start .main-visual:before, .main.start .main-visual:after {animation: heightMoveHide 1s ease both;}
.main.start .main-visual:after {animation-delay: .1s;}
.main.start .main-visual-text-top-title p, .main.start .main-visual-text-bot p {animation: fadeUp_100 1s .15s ease both;}
.main.start .main-visual-text-bot p {animation-delay: .35s;}
.main.start .main-visual-text-top-text p {animation: fadeLeft 1s .25s ease both;}

.main-sec02-img img {height: clamp(180px, 47vw, 320px); border-radius: 999px; width: 100%; object-fit: cover; object-position: center 23%;}
.main-sec02-text-box-title {color: var(--blue); font-size: clamp(1.75rem, 2vw, 2.3rem); font-weight: 700; line-height: 1.5; text-align: center;}
.main-sec02-text-box-text {text-align: center; color: #555555; line-height: 1.5; font-weight: 600;}
.main-sec02-button-box {justify-content: center;}
.main.start .main-sec02 .main-sec02-img.aos-animate {animation: clip_path_height_up 1s ease both;}
.main.start .main-sec02 .main-sec02-img.aos-animate img {animation: borderRadius0 5s .1s linear both;}
.main.start .main-sec02 .main-sec02-text-box.aos-animate .main-sec02-text-box-title {animation: clip_path_height 1s .1s ease both;}
.main.start .main-sec02 .main-sec02-text-box.aos-animate .main-sec02-text-box-text {animation: clip_path_height 1s .1s ease both;}
.main.start .main-sec02 .main-sec02-button-box.aos-animate {animation: fadeIn 1s .1s ease both;}

.main-sec03:after {content: ""; position: absolute; width: 100vw; min-width: 360px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); background: #D2E3FF; z-index: -1;}
.main-sec03-inner {max-width: 1660px;}
.main-sec03-left-box {width: clamp(320px, 42vw, 668px); flex: none; box-sizing: border-box; text-align: center; position: relative;}
.main-sec03-left-box:after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; width: calc(100% + (100vw - 100%) / 2); border-radius: 0 30rem 30rem 0; background: rgba(255, 255, 255, .7); min-width: 360px; pointer-events: none;}
.main-sec03-left-swiper {z-index: 1; padding: 5px 0;}
.main-sec03-left-swiper, .main-sec03-left-swiper .slick-list, .main-sec03-left-swiper .slick-track, .main-sec03-left-swiper .slick-slide > div {height: 100%;}
.main-sec03-left-swiper .slide {height: 100%; text-align: center; display: flex !important; align-items: center; justify-content: center;}
.main-sec03-left-swiper .slide img {width: 100%; height: 100%; object-fit: contain; aspect-ratio: 668 / 509;}
.main-sec03-text-box-num {color: var(--sky); font-size: 1.35rem; font-weight: 800; line-height: 1;}
.main-sec03-text-box-title {color: var(--dark-blue); font-weight: 800; font-size: clamp(2rem, 2vw, 2.3rem);}
.main-sec03-box {gap: 4%;}
.main-sec03-top-swiper .slick-list {padding-bottom: 1rem; margin-bottom: -1rem; padding-left: 1rem; margin-left: -1rem;}
.main-sec03-right-box {display: flex; flex-direction: column; gap: 3.5rem; width: calc(100% - clamp(320px, 42vw, 668px) - 4%); margin-top: auto;}
.main-sec03-right-swiper .slick-list {margin: 0 -.66rem;}
.main-sec03-right-swiper .slick-slide {margin: 0 .66rem; cursor: pointer;}
.main-sec03-right-swiper .slide {transition: .5s ease;}
.main-sec03-right-swiper .slide .img {width: 100%; aspect-ratio: 200 / 200;}
.main-sec03-right-swiper .slide .img img {width: 100%; height: 100%; object-fit: contain; transition: .5s ease;}
.main-sec03-right-swiper .slide .name {color: #555555; font-weight: 700; text-align: center; margin-top: .9rem; word-break: keep-all;}
.main.start .main-sec03.show:after {animation: clip_path_circle_leftBot 1s ease both;}
.main.start .main-sec03.show .main-sec03-left-box:after {animation: clip_path_width 1s .1s ease both;}
.main.start .main-sec03.show .main-sec03-left-box {animation: zoomIn 1s .2s ease both;}
.main.start .main-sec03.show .main-sec03-right-text-box > * {animation: fadeLeft 1s .2s ease both;}
.main.start .main-sec03.show .main-sec03-right-swiper {animation: fadeUp 1s .3s ease both;}

.main-sec04-swiper {position: relative; width: calc(100% + (100vw - 100%) / 2); cursor: grab;}
.main-sec04-swiper-slide {display: flex; flex-direction: column; gap: 2.8rem; align-items: center; width: calc(100% / 4.5)}
.main-sec04-slide-img {border-radius: 50%; overflow: hidden; width: clamp(180px, 15vw, 240px); max-width: 80%; aspect-ratio: 1 / 1;}
.main-sec04-slide-text-box {display: flex; flex-direction: column; gap: 6px; padding: 0 1.35rem; text-align: center;}
.main-sec04-slide-text-box-title {color: var(--blue); font-size: 1.35rem; font-weight: 700;}
.main-sec04-slide-text-box-text {color: var(--ebony); font-weight: 500; line-height: 1.3;}
.main.start .main-sec04.show .main-sec04-swiper .main-sec04-swiper-slide {animation: fadeUp 1s .1s ease both;}

/* 서브 */
.sub-visual {position: relative; height: clamp(180px, 31vw, 320px); display: flex; align-items: center; }
.sub-visual:before, .sub-visual:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 1);}
.sub-visual:after {opacity: .8;}
.sub-visual-bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;}
.sub-visual-bg:before {content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: #000000; opacity: .2;}
.sub-visual-bg:after {content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: linear-gradient(180deg, #0047BA, transparent 50%); opacity: .6; mix-blend-mode: multiply;}
.sub-visual-bg img {width: 100%; height: 100%; object-fit: cover;}
.sub-visual-text {color: #fff; font-size: clamp(2.2rem, 4vw, 2.6rem); font-weight: 700; overflow: hidden;}
.sub-container {position: relative; padding-top: var(--sub-container-padding); padding-bottom: var(--sub-container-padding);}
.sub-container-inner {display: flex; flex-direction: column; gap: 4.4rem;}
/* .sub-container-inner > * {opacity: 0;} */
.sub-page-title-wrap {display: flex; flex-direction: column; gap: .9rem; line-height: 1;}
.sub-page-title-dep1 {color: var(--sky); font-size: clamp(.9rem, 2vw, 1.0rem); font-weight: 700;}
.sub-page-title-dep2 {font-size: clamp(2rem, 2vw, 2.3rem); font-weight: 800; color: #112f5f;}
.text-blue-big-size {color: var(--blue); line-height: 1.6; font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 300;}
.sub-visual:before, .sub-visual:after {animation: heightMoveHide 1s ease both;}
.sub-visual:after {animation-delay: .1s;}
.sub-visual-text h2 {animation: fadeUp_100 1s .2s ease both;}
.sub-visual-nav {animation: fadeIn 1s .2s ease both;}
.sub-page-title-wrap.show .sub-page-title-dep1 {animation: clip_path_height 1s ease both;}
.sub-page-title-wrap.show .sub-page-title-dep2 {animation: clip_path_height 1s .1s ease both;}
.text-blue-big-size.show {animation: fadeIn 1s ease both;}

/* 인사말 */
.flex-box.greetings-flex-box {gap: 5.5%;}
.greetings-flex-left-box {display: flex; flex-direction: column; gap: 4.4rem; width: 100%;}
.greetings-text-list {display: flex; flex-direction: column; gap: 1.35rem; line-height: 1.6; font-size: 1.0rem;}
.greetings-list-wrap {width: clamp(320px, 42vw, 767px); flex: none; background:  var(--ghost); border-radius: 1.7rem; padding: 1rem clamp(1rem, 3vw, 2.6rem); display: flex; align-items: center; justify-content: center; box-sizing: border-box;}
.greetings-list {display: flex; flex-wrap: wrap; gap: 0 4%; justify-content: center;}
.greetings-list > li {padding: 6px; border-radius: 50%; border: 1px solid rgba(116, 157, 222, .6); width: calc(50% - (4% / 2)); max-width: 320px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, .9rem); box-sizing: border-box;}
.greetings-list > li:first-child {margin: 0 5%;}
.greetings-list-icon {width: clamp(30px, 4vw, 80px); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;}
.greetings-list-title {color: var(--blue); font-size: clamp(1.2rem, 3vw, 1.35rem); font-weight: 700; text-align: center;}
.greetings-list-text {color: var(--ash); text-align: center; line-height: 1.6; font-weight: 500; font-size: clamp(.85rem, 1vw, 1rem);}
.greetings-flex-box.show .sub-page-title-wrap .sub-page-title-dep1 {animation: clip_path_height 1s ease both;}
.greetings-flex-box.show .sub-page-title-wrap .sub-page-title-dep2 {animation: clip_path_height 1s .1s ease both;}
.greetings-flex-box.show .text-blue-big-size {animation: fadeIn 1s ease both;}
.greetings-flex-box.show .greetings-text-list > * {animation: fadeUp 1s ease both;}
.greetings-flex-box.show .greetings-list > * {animation: zoomIn 1s ease both;}

/* 연혁 */
.history-list-wrap {display: flex; gap: 4.3%;}
.history-list-img {display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.8rem); width: clamp(300px, 44vw, 708px); flex: none; position: sticky; height: fit-content; top: var(--header-height);}
.history-list-img img {border-radius: .9rem; overflow: hidden;}
.history-list-detail-box {display: flex; flex-direction: column; gap: 2.7rem; width: 100%;}
.history-list-detail-box > li {display: flex; flex-direction: column; gap: 1.35rem;}
.history-list-detail-box-year {color: var(--blue); font-weight: 800; font-size: 1.6rem;}
.history-list-detail {display: flex; flex-direction: column; gap: .9rem; word-break: keep-all; line-height: 1.4;}
.history-list-detail > li {display: flex; gap: 2%; font-size: .9rem;}
.history-list-detail-date {width: 1.7rem; flex: none;}
.history-list-wrap.show .history-list-img img {animation: zoomIn 1s ease both;}
.history-list-wrap.show .history-list-detail-box > li {animation: fadeUp 1s ease both;}
.history-list-wrap.show .history-list-detail-box-year {animation: clip_path_height 1s .1s ease both;}

/* 조직도 */
.organization-list {max-width: 1128px; width: calc(100% - clamp(4rem, 11vw, 8.8rem)); margin: 0 auto; position: relative;}
.organization-list:after {content: ""; position: absolute; width: 1px; height: 100%; border-right: 1px solid #B7BAC7; left: 50%; transform: translateX(-50%); top: 0; z-index: -1; transition: .5s ease;}
.organization-list .name {width: 100%; height: 3.5rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; padding: .3rem; box-sizing: border-box; text-align: center; color: #fff;}
.organization-list .li1 {display: flex; flex-direction: column; gap: 6.6rem; align-items: center;}
.organization-list .li1 > .name {background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), var(--dark-blue); max-width: 8.8rem;} 
.organization-list .li2 > .name {background: var(--blue);} 
.organization-list .li3 > .name {background: var(--light-blue); width: clamp(4rem, 11vw, 8.8rem);}
.organization-list .ul2 {display: flex; justify-content: space-between; gap: 1rem; width: 100%; position: relative;}
.organization-list .ul2:after, .organization-list .ul2 .li2 .ul3:after {content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: -3.3rem; border-top: 1px solid #b7bac7; border-left: 1px solid #b7bac7; border-right: 1px solid #b7bac7; height: 3.3rem; width: calc(100% - 8.8rem); z-index: -1; transition: .5s ease;}
.organization-list .ul2:after {height: calc(3.3rem + 3.3rem + 3.5rem);}
.organization-list .ul2 .li2 .ul3:after {width: calc(100% - clamp(4rem, 11vw, 8.8rem));}
.organization-list .ul2 .li2 {padding-bottom: calc(6.6rem + 3.5rem); position: relative; max-width: 8.8rem; width: 100%;}
.organization-list .ul2 .li2 .ul3 {position: absolute; bottom: 0; display: flex; gap: clamp(.3rem, 1.2vw, 1.35rem); justify-content: center; left: 50%; transform: translateX(-50%);}
.organization-list.show {animation: fadeUp 1s ease both;}
.organization-list.show .name {animation: zoomIn 1s .1s ease both;}
.organization-list.show:after, .organization-list.show .ul2:after, .organization-list.show .ul2 .li2 .ul3:after {animation: fadeIn 1s .2s ease both;}

/* 인증현황 */
.patent-list {display: flex; flex-wrap: wrap; gap: 1.7rem;}
.patent-list li {width: calc(100% / 4 - (1.7rem / 4) * 3); display: flex; flex-direction: column; text-align: center; gap: .9rem; transition: .5s ease;}
.patent-list-img {padding: .9rem; border: 1px solid var(--silver); border-radius: .9rem; aspect-ratio: 346 / 480;}
.patent-list-name {font-size: 1.0rem; font-weight: 500; word-break: keep-all;}
.patent-list.show {animation: fadeUp 1s ease both;}

/* CI */
.ci_logo {text-align: center;}
.ci_logo > img {max-width: 60%;}
.ci-box {display: flex; flex-wrap: wrap; gap: 2.66rem 3.2%;}
.ci-box .h4-title {width: 100%; color: var(--dark-blue); font-size: 1.5rem; font-weight: 800;}
.ci-box-img {width: clamp(200px, 43vw, 716px); border: 1px solid var(--mist); padding: 2.6rem; display: flex; align-items: center; justify-content: center; gap: 1.7rem; background: url(../../images/ci_box_img_bg.svg) repeat left top; box-sizing: border-box;}
.ci-box-img.column {flex-direction: column;}
.ci-box-img:not(.column):has(img+img) > img {width: 50%;}
.ci-box-text {width: calc(100% - 3.2% - clamp(200px, 43vw, 716px)); line-height: 1.6; font-weight: 500; font-size: 1.0rem}
.ci-box-color-list {width: 100%; display: flex; gap: 3.3%;}
.ci-box-color-list > li {width: 100%; display: flex; flex-direction: column; gap: .9rem;}
.ci-box-color-list .color {aspect-ratio: 334 / 128; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.5rem); text-transform: uppercase;}
.ci-box-color-list .text-list-type1 > div:last-child {gap: 0;}
.ci_logo.show {animation: zoomIn 1s ease both;}
.ci-box.show .h4-title {animation: clip_path_height_up 1s ease both;}
.ci-box.show .ci-box-img {animation: fadeRight 1s ease both;}
.ci-box.show .ci-box-text {animation: fadeLeft 1s ease both;}
.ci-box.show .ci-box-color-list li {animation: fadeUp 1s ease both;}

/* 오시는 길 */
.location-map-wrap {display: flex; flex-direction: column; gap: .9rem;}
.location-kakao-map .wrap_map {height: clamp(400px, 50vw, 779px) !important;}
.location-kakao-map .cont {display: none;}
.location-map-wrap .text-list-type1 > div {gap: .6rem;}
.location-map-wrap.show .location-kakao-map {animation: zoomIn 1s ease both;}
.location-map-wrap.show .text-list-type1 {animation: fadeIn 1s .1s ease both;}

/* 모델 */
.board-list {display: flex; flex-wrap: wrap;}
.board-list.type1 {gap: 1.7rem;}
.board-list.type1 > li {width: calc(100% / 4 - (1.7rem / 4) * 3);}
.board-list.type1 > li > a {width: 100%; height: 100%; display: flex; flex-direction: column; gap: .9rem;}
.board-list.type1 > li > a .img-box {position: relative; width: 100%; border-radius: .9rem; aspect-ratio: 1 / 1; transition: .5s ease;}
.board-list.type1 > li > a .img-box:after {content: ""; position: absolute; pointer-events: none; width: 100%; height: 100%; top: 0; left: 0; border-radius: .9rem; border: 2px solid var(--sky); box-sizing: border-box; opacity: 0; transition: .5s ease;}
.board-list.type1 > li > a .img-box img {width: 100%; height: 100%; object-fit: contain; border-radius: .9rem; border: 1px solid var(--mist); box-sizing: border-box; transition: .5s ease;}
.board-list.type1 > li > a .text-box {display: flex; flex-direction: column; gap: .4rem;}
.board-list-text-top {font-size: .9rem; color: var(--ash); font-weight: 700;}
.board-list-text-name {font-size: 1.0rem; font-weight: 500; word-break: keep-all;}
.board-list.type1.show > li {animation: fadeUp 1s ease both;}

/* 모델 상세 */
.board-detail-top {display: flex; gap: 4%; align-items: flex-start;}
.board-detail-top-img {width: clamp(200px, 42vw, 750px); flex: none;}
.board-detail-top-img img {width: 100%; height: 100%; object-fit: contain;}
.board-detail-top-text-wrap {width: 100%; display: flex; flex-direction: column; gap: 2.2rem; overflow: hidden;}
.board-detail-top-text-top {display: flex; flex-direction: column;}
.board-detail-top-text-top-tt1 {font-size: 1.35rem; color: var(--sky); font-weight: 700; line-height: 1;}
.board-detail-top-text-top-tt2 {color: var(--dark-blue); font-size: clamp(1.75rem, 2vw, 2.3rem); font-weight: 800; margin-top: .9rem; line-height: 1;}
.board-detail-top-text-top-tt3 {font-size: 1.35rem; color: var(--silver); font-weight: 600; line-height: 1; margin-top: 1.35rem;}
.board-detail-top-text-bot {position: relative; border-radius: clamp(1rem, 3vw, 2.6rem); background: var(--ghost); padding: clamp(1rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 2.6rem;}
.board-detail-top-text-bot:after {content: ""; position: absolute; width: clamp(100px, 50vw, 445px); height: clamp(106px, 51vw, 473px); background: url(../../images/logo_icon_white.svg) no-repeat center / contain; max-width: 80%; max-height: 80%; bottom: -9%; right: -25%;}
.board-detail-top-text-bot > li {display: flex; flex-direction: column; gap: .9rem;}
.board-detail-top-list-title {color: var(--blue); font-size: 1.35rem; font-weight: 700;}
.board-detail-top-list-text {font-weight: 500; display: flex; flex-direction: column; gap: .4rem; line-height: 1.6; color: var(--ebony);}
.board-detail-bot {display: flex; flex-direction: column; gap: 4.4rem;}
.board-detail-bot > li {display: flex; flex-direction: column; gap: 3.3rem; margin-top: -7rem; padding-top: 7rem;}
.board-detail-bot-list-wrap {display: flex; gap: 4%;}
.board-detail-bot-list-wrap > ol.board-detail-bot-list {width: 100%;}
.board-detail-bot-list {display: flex; flex-direction: column; gap: 2.2rem;}
.board-detail-bot-list > li {display: flex; flex-direction: column; gap: .9rem;}
.board-detail-bot-list-name {font-size: 1.3rem; font-weight: 700; padding-left: .9rem; color: var(--blue);}
.board-detail-top.show .board-detail-top-img {animation: zoomIn 1s ease both;}
.board-detail-top.show .board-detail-top-text-top > * {animation: fadeLeft 1s ease both;}
.board-detail-top.show .board-detail-top-text-bot {animation: fadeUp 1s .1s ease both;}
.board-detail-bot.show > li > * {animation: fadeUp 1s ease both;}

/* 게시글 */
.table-box.type1.board-table table thead th {font-size: 1rem; text-align: center; white-space: nowrap;}
.table-box.type1.board-table table tbody tr {background: var(--ghost);}
.table-box.type1.board-table table tbody tr > * {height: 5.6rem; cursor: pointer;}
.table-box.type1.board-table table tbody tr td.num {text-align: center; font-size: .9rem; color: var(--ash); font-weight: 400;}
.table-box.type1.board-table table tbody tr td.title {font-size: 1.0rem; font-weight: 500; text-align: left;}
.table-box.type1.board-table table tbody tr td.title p {overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 500;}
.table-box.type1.board-table table tbody tr td.date {text-align: center; font-size: .9rem; color: var(--ash); font-weight: 400; padding-left: 0;}
.page-wrap {margin-top: -1.8rem;}
.page-wrap ul {display: flex; gap: clamp(6px, .8%, .8%); justify-content: center;}
.page-wrap ul li {border: 1px solid var(--mist); width: clamp(2rem, 5vw, 2.2rem); height: clamp(2rem, 5vw, 2.2rem); border-radius: 50%; overflow: hidden;}
.page-wrap ul li a {color: var(--ash); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: .5s ease;}
.page-wrap ul li.arrow a {-webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-repeat: no-repeat; mask-position: center; background-color: var(--silver);}
.page-wrap ul li.first.active {mask-image: url(../../images/ico_page_first_active.svg); -webkit-mask-image: url(../../images/ico_page_first_active.svg);}
.page-wrap ul li.first a {mask-image: url(../../images/ico_page_first.svg); -webkit-mask-image: url(../../images/ico_page_first.svg);}
.page-wrap ul li.prev a {mask-image: url(../../images/ico_page_prev.svg); -webkit-mask-image: url(../../images/ico_page_prev.svg);}
.page-wrap ul li.next a {mask-image: url(../../images/ico_page_next.svg); -webkit-mask-image: url(../../images/ico_page_next.svg);}
.page-wrap ul li.last a {mask-image: url(../../images/ico_page_last.svg); -webkit-mask-image: url(../../images/ico_page_last.svg);}
.page-wrap ul li.first:not(.active) a, .page-wrap ul li.last:not(.active) a {opacity: .4;} 
.page-wrap ul li.now {border-color: transparent;}
.page-wrap ul li.now a {background: var(--blue); color: #fff;}
.table-box.type1.board-table.show {animation: fadeUp 1s ease both;}
.table-box.type1.board-table.show + .page-wrap {animation: fadeIn 1s .1s ease both;}

/* 게시글 상세 */
.board-view-wrap {display: flex; flex-direction: column;}
.board-view-title-box {padding: 0 1.0rem .9rem; display: flex; flex-direction: column; gap: 1.0rem; border-bottom: 1px solid #EEEEEE;}
.board-view-title-text {font-size: 1.35rem; font-weight: 700; line-height: 1.3;}
.board-view-title-date {font-size: .9rem; color: var(--ash); line-height: 1;}
.board-view-content {padding: 2.2rem clamp(1rem, 3vw, 2.2rem); border-bottom: 1px solid #ddd; display: flex; flex-direction: column; gap: 1.35rem; line-height: 1.6; font-size: 1.0rem; font-weight: 500;}
.board-view-bottom {padding-top: 2.2rem;}
.board-view-bottom .click-btn {margin-left: auto;}
.board-view-wrap.show {animation: fadeUp 1s ease both;}

/* 카탈로그 */
.catalog-bg {position: absolute; bottom: 0; width: clamp(200px, 35vw, 607px); aspect-ratio: 608 / 484; left: 14%; z-index: -1;}
.catalog-img {width: clamp(200px, 35vw, 420px); border-radius: .9rem; border: 1px solid var(--mist); overflow: hidden;}
.sub-container:has(.flex-box.catalog.show) .catalog-bg {animation: clip_path_height 1s ease both;}

/* 문의하기 */
.flex-box.contact {align-items: flex-start;}
.contact-address-list > li {display: flex; gap: .6rem; font-size: 1.0rem; line-height: 1.6;}
.contact-address-list > li .tt1 {font-weight: 500; width: 3.3rem;}
.contact-address-list > li .tt2 {font-weight: 700;}
.contact-img {position: relative; width: clamp(200px, 35vw, 716px);}
.contact-img .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 55%; max-height: 55%;}

@media screen and (min-width: 1920px) {
	.catalog-bg {left: 50%; transform: translateX(-114%);}
}
@media screen and (max-width: 1620px) {
	.main-sec04-slide-text-box-text br {display: none;}
}
@media screen and (max-width: 1400px) {
	.greetings-text-list br {display: none}
}
@media screen and (max-width: 1200px) {
	.flex-box.greetings-flex-box {flex-direction: column; gap: 4.4rem;}

	.greetings-list-wrap {width: 100%; padding: 2rem 1rem;}
}
@media screen and (min-width: 1025px) {
	.click-btn.blue:hover {box-shadow: 0 0 10px var(--blue)}
	.click-btn.blue:hover span {text-shadow: 1px 1px #5e88c9, 2px 2px #5e88c9, 3px 3px #5e88c9, 4px 4px #5e88c9, 5px 5px #5e88c9, 6px 6px #5e88c9, 7px 7px #5e88c9, 8px 8px #5e88c9, 9px 9px #5e88c9, 10px 10px #5e88c9, 11px 11px #5e88c9, 12px 12px #5e88c9, 13px 13px #5e88c9, 14px 14px #5e88c9, 15px 15px #5e88c9, 16px 16px #5e88c9, 17px 17px #5e88c9, 18px 18px #5e88c9, 19px 19px #5e88c9, 20px 20px #5e88c9, 21px 21px #5e88c9, 22px 22px #5e88c9, 23px 23px #5e88c9, 24px 24px #5e88c9, 25px 25px #5e88c9, 26px 26px #5e88c9, 27px 27px #5e88c9, 28px 28px #5e88c9, 29px 29px #5e88c9, 30px 30px #5e88c9, 31px 31px #5e88c9, 32px 32px #5e88c9, 33px 33px #5e88c9, 34px 34px #5e88c9, 35px 35px #5e88c9, 36px 36px #5e88c9, 37px 37px #5e88c9, 38px 38px #5e88c9, 39px 39px #5e88c9, 40px 40px #5e88c9;}
	.button-box:has(.click-btn:hover) .click-btn:not(:hover) {opacity: .4;}

	html:has(.main) header .inner {opacity: 0;}
	html:has(.main.start) header .inner {animation: fadeDown 1s ease both;}
	.main-sec03-right-swiper:has(.slide:hover) .slide:not(:hover) {opacity: .4;}
	.main-sec03-right-swiper .slide:hover .img img {filter: drop-shadow(0 0 10px rgba(29, 81, 163, .4));}

	.patent-list li:hover .patent-list-img {box-shadow: 0 0 10px rgba(0, 0, 0, .1);}
	.patent-list:has(li:hover) li:not(:hover) {opacity: .4;}

	.board-list.type1 > li:hover .img-box {box-shadow: 0 0 10px rgba(0, 0, 0, .1);}
	.board-list.type1 > li:hover > a .img-box:after {opacity: 1;}
	.board-list.type1:has(li:hover) > li:not(:hover) a {opacity: .4;}
}

@media screen and (max-width: 1024px) {
	.main-sec03-box {flex-direction: column; gap: 2rem;}
	.main-sec03-left-box, .main-sec03-right-box {width: 100%;}
	.main-sec03-right-text-box {text-align: center;}
	.main-sec03-right-text-box .button-box {justify-content: center;}
	.main-sec04-swiper-slide {display: flex; flex-direction: column; gap: 2.8rem; align-items: center; width: calc(100% / 3.5)}

	.patent-list li {width: calc(100% / 3 - (1.7rem / 3) * 2);}

	.ci-box-img {width: 100%;}
	.ci-box-text {width: 100%; margin-top: -1.35rem;}
	.ci-box-color-list {flex-wrap: wrap; row-gap: 2rem;}
	.ci-box-color-list > li {width: calc(50% - (3.3% / 2))}
	.ci-box.show .ci-box-img {animation-name: zoomIn;}
	.ci-box.show .ci-box-text {animation-name: fadeUp;}

	.board-list.type1 > li {width: calc(100% / 3 - (1.7rem / 3) * 2);}

	.board-detail-top {flex-direction: column; gap: 2rem;}
	.board-detail-top-img {width: 100%; max-width: 400px; margin: 0 auto;}
	.board-detail-bot-list-wrap {flex-direction: column; gap: 2.2re.;}
}

@media screen and (max-width: 768px) {
	.table-box:not(.scroll) table colgroup, .table-box:not(.scroll) table thead {display: none;}
	.table-box.type1.board-table table tbody {display: flex; flex-direction: column; gap: .6rem;}
	.table-box.type1.board-table table tbody tr {display: flex; flex-wrap: wrap; border-radius: 1rem; padding: 1.5rem 1rem; gap: .6rem;}
	.table-box.type1.board-table table tbody tr > * {height: auto; padding: 0;}
	.table-box.type1.board-table table tbody tr td.title {width: 100%;}
	.table-box.type1.board-table table tbody tr td.title p {display: block; line-height: 1.5;}
	.flex-box.type1:has(.flex-right.img) {flex-direction: column-reverse; gap: 3rem;}

	.main-visual-text-top {flex-direction: column; gap: 1rem; align-items: flex-start; width: 100%;}
	.main-sec04-swiper-slide {display: flex; flex-direction: column; gap: 2.8rem; align-items: center; width: calc(100% / 2.5)}

	.greetings-list.show > * {animation-name: zoomIn !important;}

	.history-list-wrap {flex-direction: column; gap: 1rem;}
	.history-list-img {width: 100%; flex-direction: row; background: #fff; gap: 1%; padding-bottom: 1rem;}
	.history-list-wrap .history-list-img {order: -1;}

	.organization-list {padding-bottom: 11rem; max-width: 500px; width: 100%;}
	.organization-list .ul2 .li2 {padding-bottom: 3.3rem;}
	.organization-list .ul2 .li2 .ul3 {flex-direction: column; gap: .5rem; bottom: auto; top: 100%; width: 100%;}
	.organization-list .ul2 .li2 .ul3:after {display: none;}
	.organization-list .li3 > .name {width: 100%;}

	.catalog-bg {width: clamp(150px, 43vw, 607px); left: auto; right: 0%;}
	.catalog-img {width: 100%;}

	.contact-img {width: 100%;}
}

@media screen and (max-width: 640px) {
	.patent-list li {width: calc(100% / 2 - (1.7rem / 2) * 1);}

}

@media screen and (max-width: 480px) {
	.main-sec04-swiper-slide {display: flex; flex-direction: column; gap: 2.8rem; align-items: center; width: calc(100% / 1.6)}

	.greetings-text-list p br {display: none;}

	.board-list.type1 > li {width: calc(100% / 2 - (1.7rem / 2) * 1);}
}

@media screen and (max-width: 400px) {
	.ci-box-color-list > li {width: 100%;}
}