@charset "utf-8";
/*폰트*/
@import url('./font.css');
/* reset */
@import url('./normalize.css');


/* ###### Reset CSS ###### */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,body {
    height: 100%;
}
html {
    scrollbar-gutter: stable;
    /* 스크롤바 공간 항상 확보하여 들썩임 방지 */
    font-size: 62.5%;
    /* 62.5% of 16px = 10px */
}
body {
    font-family: Pretendard, sans-serif;
    line-height: 1.6;
    font-size: 1.6rem;
    /* (reset font-size = 10px) * 1.6 = 16px */
    font-weight: 400;
    color: #111827; 
    background: #fcfcff;
}
body.no-scroll {
    overflow: hidden;
    height: 100%;
}
h1,h2,h3,h4,h5,h6 {
    margin: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
ul,li {
    /* list-style: none; */
}
input {
    border: none;
    outline: none;
    border: 1px solid var(--bt);
    padding: 8px;
}
em {
    font-style: normal;
}
button {
    border: none;
    cursor: pointer;
}
select {
    border: 1px solid var(--bt);
    padding: 8px;
    padding-left: 4px;
    font-size: 1.4rem;
}
/* IE */
select::-ms-expand { 
	display: none;
}
select {
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/arrow_drop_down.png) no-repeat center right;
    background-size: 20px;
    padding-right: 28px;
}

/* ###### Variables CSS ###### */
:root {
    /* Primary Color */
    --pc1: #205EE4;


    /* Font Color */
    --tp: #111827;
    --ts: #1f2937;
    --tt: #374151;
    --tdis: #6b7280;
    --tsi: #596774;

    /* Bg Color */
    --bgs: #f4f5f6;
    --bgt: #e5e7eb;
    --bgf : #374151;
    --info-sub: #DCEEFF;
    --suc-sub: #bbf7d0;
    --p-sub: #fecdd3;
   --w-subtle: #fef08a;

    /* Border Color */
   --bp: #6b7280;
   --bs: #9ca3af;
   --bt: #d1d5db;
    --bdis: #6b7280;
    --focus-ring: #be123c;

    /* */
    --suc: #16a34a;
    --info: #2563eb;
    --danger: #dc2626;
    --warning: #ca8a04; 
}


/* ###### Common CSS ###### */

/* Scrollbar Custom */
/* Chrome, Whale, Edge */
/* 스크롤바 전체 기본 꾸미기 */
div::-webkit-scrollbar {
	width: 14px;
    height: 14px;
}
/* 스크롤바 막대 꾸미기 */
div::-webkit-scrollbar-thumb {
    background-color: var(--bt);
}
/* 스크롤바 트랙 꾸미기 */
div::-webkit-scrollbar-track {
    background: var(--bgs);
}


/* 페이징 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 48px;
}
.pagination li {
    border: 1px solid var(--bt);
    width: 36px;
    aspect-ratio: auto 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    cursor: pointer;
    border-radius: 999px;
}
.pagination li a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.pagination li:hover,
.pagination li.active {
    color: var(--pc1);
    border: 1px solid var(--pc1);
}
.pPrev {
    background: url(../img/chevron_left_page.png) no-repeat center center;
    background-size: 52%;
    border: 1px solid var(--bgs);
}
.pNext {
    background: url(../img/chevron_right_page.png) no-repeat center center;
    background-size: 52%;
    border: 1px solid var(--bgs);
}

.pFirst {
    background: url(../img/first_page.png) no-repeat center center;
    background-size: 52%;
    border: 1px solid var(--bgs);
}

.pLast {
    background: url(../img/last_page.png) no-repeat center center;
    background-size: 52%;
    border: 1px solid var(--bgs);
}

/* ### layout ### */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
    padding-bottom: 60px;
    padding-top: 16px;
}

.inner {
    width: 1440px;
    padding: 0 16px;
    max-width: 100%;
    margin: 0 auto;
}
/* ###### btn_wrap ###### */
.btn_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
    justify-content: flex-end;
}

.btn_wrap button {}
.btn_common {
    padding: 10px;
    border-radius: 4px;
    min-width: 100px;
    background: var(--bgs);
    border: 1px solid transparent;
    font-size: 1.4rem;
}
.btn1 {
    border: 1px solid var(--tsi);
    color: var(--tsi);
}
.btn1_2 {
    background: var(--pc1);
    color: #fff;
}
.btn1_3 {
    background: var(--bgs);
    color: var(--pc1);
    border: 1px solid var(--pc1);
}
.btn2 {
    background: var(--suc-sub);
    color: var(--suc);
}
.btn2_2 {
    color: var(--suc);
    border: 1px solid var(--bt);
}
.btn3 {
    background: var(--p-sub);
    color: var(--focus-ring);
}
.btn3_2 {
    background-color: var(--bgs);
    color: var(--focus-ring);
    border: 1px solid var(--bt);
}
.btn4 {
    background: var(--bgt);
    color: var(--tdis);
}



/* ###### sub_visual ###### */
.subVisual_nav {
    position: relative;
    padding: 16px;
}
.sub_visual {
    margin-top: 67px;
    background: url(../img/sub_visu_2.png) no-repeat center center;
    background-size: cover;
    height: 240px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.sub_visual h1 {
    color: #111827;
    font-size: 4.2rem;
}
.breadcrumb {
    position: absolute;
    bottom: 32px;
    left: 0;
    width: 100%;
}
.breadcrumb .inner {
}
.breadcrumb ul {
    border-radius: 999px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.breadcrumb li.home {
}
.breadcrumb li.home img {
    height: 16px;
    display: block;
}
.breadcrumb li {
    font-size: 1.4rem;
    color: #fff;
    list-style: none;
}
.breadcrumb li + li {
    position: relative;
    margin-left: 16px;
}
.breadcrumb li + li::before {
    content: '';
    background: url(../img/keyboard_arrow_down.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}





/* ###### Header ###### */
header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    background: #fcfcff;
    border-bottom: 1px solid var(--bt);
    box-shadow: 0 -6px 10px #4C62AA71;
    z-index: 999;
}
.header_l,
.header_r {
}
.header_l {
    display: flex;
    align-items: center;
    gap: 24px;
}
.logo {
    display: block;
}
.logo img {
    width: 96px;
    display: block;
}
nav {

}
.gnb {
    display: flex;
    list-style: none;
}
.gnb li {
}
.gnb li a {
    display: block;
    font-weight: 500;
    text-align: center;
    min-width: 126px;
}
.gnb li > a {
    padding: 20px 16px;
}
.gnb li:hover > a {
    color: var(--pc1);
    font-weight: 700;
}
.gnb li {
    position: relative;
}
.gnb_sub {
/*     display: none; */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--pc1);
    box-shadow: 0 0 10px #11182724;
    border-radius: 8px;
    overflow: hidden;
    transition: .3s;
}
/* .gnb li:has(.gnb_sub):hover::before {
    display: block;
} */
.gnb li:hover::before {
    display: block;
}
.gnb li::before {
    display: none;
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    /* width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pc1); */
    /* 삼각형 */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 5px 8.66px 5px;
    border-color: transparent transparent var(--pc1) transparent;
}
.gnb li:hover .gnb_sub {
/*     display: block; */
    top: calc(100% - 6px);
   	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.gnb_sub a {
    padding: 12px;
    color: #fff;
    border-bottom: 2px solid transparent;
}
.gnb_sub a:hover {
    background-color: var(--pc1);
    border-bottom: 2px solid #fff;
}
.header_r {
    display: flex;
    align-items: center;
    gap: 16px;
}
.user_area {
    color: var(--tsi);
    display: flex;
    align-items: center;
    gap: 2px;
}
.user_area span {
    font-size: 1.4rem;
    font-weight: 600;
}
.btn_log {
    width: 24px;
    height: 24px;
}
.btn_log.out:hover {
    /* border: 1px solid var(--tsi); */
}
.btn_log.in {
    background: url(../img/login.png) no-repeat center center;
    background-size: 16px;
}
.btn_log.out {
    background: url(../img/logout.png) no-repeat center center;
    background-size: 16px;
    border: 1px solid transparent;
    border-radius: 999px;
}
.inq_btn {
    background: #F5DC4D;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 600;
    display: none;
}
.inq_btn i {
    width: 16px;
    height: 16px;
    background: url(../img/north_east.png) no-repeat center center;
    background-size: contain;
    transition: .3s;
}


/* ###### Trigger & m_gnb_wrap ###### */
.trigger {
    display: none;
}
/* m_gnb_wrap */
.m_gnb_wrap {
    display: none;
}





/* ###### Footer ###### */
footer {
    font-size: 1.4rem;
    color: var(--tsi);
    padding: 40px 0;
}
.footer_top {
    border-bottom: 1px solid var(--tsi);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: var(--tsi);
    font-weight: 600;
    padding-bottom: 26px;
}
.footer_top_r {
    display: flex;
}
.fnb {
    display: flex;
    gap: 24px;
}
.fnb a {
}
.fBtn {
    padding: 12px 20px;
    border: 1px solid var(--tsi);
    border-radius: 999px;
    position: relative;
    cursor: default;
}
.fBtn:hover::after {
	display: block;
}
.fBtn::after {
	content: '본 웹사이트에 게시된 이메일 주소가 전자우편 수집 프로그램이나 그 밖의 기술적 장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반시 정보통신망법에 의해 형사 처벌됨을 유념하시기 바랍니다.';
	position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
	padding: 10px;
	background: #fff;
	
	color: var(--tdis);
	font-weight: 400;
	border-radius: 8px;
	box-shadow: 0 0 10px #00000064;
	display: none;
}
.footer_bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 26px;
    flex-wrap: wrap;
    gap: 24px;
}
.copyright {
    font-size: 1rem;
    margin-top: 16px;
    font-weight: 300;
}
.footer_btm_r {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.footer_btm_r li {
    margin-bottom: 2px;
    display: flex;
}
.footer_btm_r strong {
    margin-right: 8px;
    min-width: 60px;
    display: inline-block;
    font-weight: 600;
}
.footer_btm_r .address strong {
    color: var(--pc1);
}

/* title_wrap */
.title_wrap {
    margin: 30px 0;
}
.title_wrap h1 {
    font-size: 3.2rem;
    position: relative;
    width: fit-content;
}
/* .title_wrap h1::after,
.title_wrap h1::before {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    transform-origin: center;
}
.title_wrap h1::after {
    width: 40px;
    height: 40px;
    background: #C2F01B;
    right: -24px;
    top: -16px;
    animation: bubble1 1.8s ease-out 0.2s 1;
}
.title_wrap h1::before {
    width: 16px;
    height: 16px;
    background: #6DE9FF;
    right: -46px;
    top: 8px;
    animation: bubble2 1.8s ease-out 0.4s 1;
}

@keyframes bubble1 {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.25); opacity: 0.9; }
    60% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bubble2 {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.4); opacity: 0.8; }
    70% { transform: scale(0.85); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
 */


/* ###### total_search_box ###### */
.total_search_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 12px;
}
.total span{
    font-size: 1.4rem;
}
.total em {
    color: var(--pc1);
    font-weight: 600;
}
.search_box {
    display: flex;
    gap: 4px;
}
.search_box select {
    border-radius: 6px;
}
.search_input {
    display: flex;
    border-radius: 6px;
    border: 1px solid var(--bt);
    overflow: hidden;
}
.search_input input {
    border: 1px solid transparent;
    font-size: 1.4rem;
}
.search_input button {
    background: transparent;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search_input button img {
    width: 24px;
}

/* ###### Board_wrap: 게시판 목록 ###### */
.board_t {
    width:100%;
    border-collapse: collapse;
    border-top: 1px solid #111827;
}
.board_t tr {

}
.board_t th,
.board_t td {
    padding: 8px;
    white-space: nowrap;
}
.board_t th {
    font-weight: 400;
    background: var(--bgs);
}
.board_t td {
    text-align: center;
    border-bottom: 1px solid var(--bt);
}
.board_t td.t_title {
    white-space: wrap;
    font-weight: 500;
}
.board_t td.t_align_l {
    text-align: left;
}
.m_t_block {
    display: none;
}
.t_title a {
    display: block;
}
.t_8p {
    width: 8%;
}
.t_10p {
    width: 10%;
}
/* 게시판 목록 제목 말줄임 */
.bbs_title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}



/* ###### board_view 게시판 상세 ###### */
.board_view {
    border-top: 1px solid #111827;
}
.view_title,
.view_info,
.view_content {
    padding: 12px 16px;
}
.view_title {
    font-size: 1.8rem;
    background: var(--bgs);
    font-weight: 500;
}
.view_info {
    border-bottom: 1px solid var(--bt);
    display: flex;
    gap: 12px;
    font-size: 1.4rem;
    color: var(--tsi);
}
.view_content {
    min-height: 360px;
}
.view_content img {
	max-width: 100%;
}
.view_move {
    border-top: 1px solid var(--bt);
    margin-top: 16px;
}
.move_box {
    border-bottom: 1px solid var(--bt);
}
.move_box:hover {
    background: var(--bgs);
}
.move_box > a {
    display: flex;
    gap: 16px;
    padding: 8px 10px;
}
.move_box .post {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.move_box .post p {
    white-space: nowrap;
}
.move_box i {
    width: 16px;
    height: 16px;
    background: url(../img/chevron_right.png) no-repeat center center;
    background-size: contain;
}
.move_box i.next_i {
}
.move_box i.prev_i {
    transform: rotate(180deg);
}

/* ## view_file ## */
.view_file {
    border-radius: 6px;
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bgs);
}
.file_i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #fff url(../img/text_snippet.png) no-repeat center center;
    background-size: 64%;
    box-shadow: 0 0 10px #11182710;
}
.file_list {
    list-style: none;
    font-size: 1.4rem;
    flex: 1;
}
.file_list li + li {
    margin-top: 12px;
}
.file_list li a {
    display: block;
}
.file_list li a:hover {
    text-decoration: underline;
}

/* ###### form 입력폼 레이아웃 ###### */
.w100p {
    width: 100%;
}
.fx_1 {
	flex: 1;
}
.form_t {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #111827;
}
.guide_mt {
    font-size: 1.4rem;
}
.r_point {
    color: var(--focus-ring);
}
.form_t .guide_mt {
    color: var(--tsi);
    margin-top: 4px;
    word-break: keep-all;
}
.form_t tr {
    border-bottom: 1px solid var(--bt);
}
.form_t th,
.form_t td {
    padding: 8px;
}
.form_t th {
    text-align: left;
    font-weight: 500;
    background-color: var(--bgs);
    word-break: keep-all;
    width: 120px;
}
.form_t td {}
.form_t input:not(input[type="checkbox"]) {
    border-radius: 4px;
}
.form_t select {
	border-radius: 4px;
}
.form_t .btn_common {
    min-width: auto;
    padding: 4px 6px;
    white-space: nowrap;
}
.form_t .df_box {
    display: flex;
    gap: 6px;
}
.form_t .df_box_w {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.form_t .df_box_c {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form_t .df_box input[type="text"] {

}


/* ###### 회원가입 입력폼 레이아웃 ###### */
.inner.joinForm {
	width: 860px;
}
.joinForm .agree_title_wrap i {
	background: #C2F01B url(../img/join_form.png) no-repeat center center;
	background-size: 46%;
}
.inner.joinForm .form_wrap {
    box-shadow: 0 0 12px #0F2B6012;	
	border-radius: 16px;	
	padding: 40px;
	margin-top: 16px;
	
}
.form_t.type2 {
	width: 100%;
    border-collapse: collapse;
    border-top: none;
    table-layout: fixed;
}
.form_t.type2 {
	
}
.form_t.type2 input:not(input[type="checkbox"]) {
	background: transparent;
	min-width: 0;
	
}
.form_t.type2 th {
	background: transparent;
/* 	color: var(--tsi); */
}
.form_t.type2 tr {
	border-bottom: none; 
}
.form_t.type2 th,
.form_t.type2 td {
	font-size: 1.4rem;
	padding: 0 0;
	padding-bottom: 32px;
}
.form_t.type2 td {
	width: calc(100% - 120px);
}
.form_t.type2 .df_box_center {
	display: flex;
	gap: 6px;	
	align-items: center;
	flex-wrap: wrap;
}
.form_t.type2 .df_box span {
	
}

.form_t.type2 select {
	min-width: 160px;
}



/* ###### Login_wrap ###### */
.loginMain {
    display: flex;
    justify-content: center;
    padding-top: 160px;
}
.login_wrap {
    width: 520px;
    max-width: calc(100% - 32px);
}
.login_logo {
    width: 126px;
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
}
.login_top {
    list-style: none;
    display: flex;
    
}
.login_form {
    border: 1px solid var(--tsi);
    border-top: none;
    padding: 24px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.login_top li {
    width: 50%;
}
.login_title,
.joinBtn {
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 1.8rem;
    font-weight: 500;
}
.login_title {
    padding: 16px;
    color: var(--pc1);
    border: 1px solid var(--tsi);
    border-bottom: 1px solid transparent;
}
.joinBtn {
    color: var(--tsi);
    background-color: var(--bgt);
    border: 1px solid transparent;
    border-bottom: 1px solid var(--tsi);
}
.joinBtn:hover {
    background: var(--tsi);
    color: #fff;
}
.joinBtn a {
    display: block;
    padding: 16px;
}
.inputWrap input {
    width: 100%;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 4px;
    border: 1px solid #AEBBC8;
}
.inputWrap input:focus {
    border: 1px solid var(--pc1);
}
.inputWrap input:focus::placeholder {
    visibility: hidden;
    opacity: 0;
}
.inputWrap input::placeholder {
    color: var(--tsi);
}


/* 기본 아이콘 */
.inputWrap .idInput {
  background: url(../img/perm_identity.png) no-repeat center left 12px;
  background-size: 20px;
  padding-left: 40px;
}
.inputWrap .pwInput {
  background: url(../img/password.png) no-repeat center left 12px;
  background-size: 20px;
  padding-left: 40px;
}

/* 포커스 OR 값이 있을 때 active 아이콘 유지 */
.inputWrap .idInput:focus,
.inputWrap .idInput:not(:placeholder-shown) {
  border: 1px solid var(--pc1);
  color: var(--pc1);
  padding-left: 16px;
  background: #fff;	
}
.inputWrap .pwInput:focus,
.inputWrap .pwInput:not(:placeholder-shown) {
  border: 1px solid var(--pc1);
  color: var(--pc1);
  padding-left: 16px;
  background: #fff;	
}




.loginStat {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    font-weight: 500;
}
.label_chk {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.label_chk:has(input:checked) {
    color: var(--pc1);
}
.label_chk:hover {
    color: var(--pc1);
}
.loginStat a:hover {
    color: var(--pc1);
}
.goBtn {
    margin-top: 26px;
    width: 100%;
    border-radius: 8px;
    padding: 18px;
    font-size: 1.8rem;
    background-color: var(--pc1);
    color: #fff;
    border: 1px solid transparent;
}
.goBtn:hover {
    background-color: #fff;
    color: var(--pc1);
    border: 1px solid var(--pc1);
}



/* ###### tab ####### */
.tab_content {
    display: none;
}
.tab_content.active {
    display: block;
}
.tab_menu {
    display: flex;
}

.tab_btn {
    background: var(--bgs);
    flex: 1;
    padding: 16px;
    color: var(--tdis);
    border: 1px solid transparent;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.tab_btn.active {
    color: var(--pc1);
    background: #fff;
    border: 1px solid var(--tsi);
    border-bottom: 1px solid transparent;
    font-weight: 500;
}
.tab_btn:hover {
    color: var(--pc1);
    font-weight: 600;
}


/* ### login_wrap tab### */
/* .login_wrap .tab_content {
    min-height: 420px;
}
.login_wrap .tab_content.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
} */
.login_wrap .tab_btn {
    border-bottom: 1px solid var(--tsi);
}
.login_wrap .tab_btn.active {
    border-bottom: 1px solid transparent;
}
.login_form .guide_mt {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 20px;
    background-color: var(--w-subtle);
    font-weight: 500;
    border-radius: 6px;
    padding: 8px;
}
.labelWrap + .labelWrap {
    margin-top: 4px;
}
.labelWrap label {
    display: inline-block;
    margin-bottom: 4px;
}
.result_view {
    text-align: center;
}
.result_view span {

}
.id_result {
    font-size: 3.6rem;
    font-weight: 600;
}
.pw_illu {
    display: block;
    max-width: 100%;
    width: 160px;
    margin: 0 auto;
}


/* ###### agree_wrap ###### */
/* .agree_wrap {

}
.agree_wrap .label_chk.total {
    justify-content: center;
    border-top: 2px solid #111827;
    border-bottom: 1px solid #111827;
    background-color: var(--bgt);
}
.agree_wrap .label_chk {
    border-top: 1px solid transparent;
    border-bottom: 1px solid var(--bt);
    padding: 12px;
}
.agree_wrap .label_chk:has(input:checked) {
    background-color: var(--info-sub);
    border-bottom: 1px solid var(--info);
    font-weight: 600;
}
.agree_detail {
}
.agree_detail textarea {
    width: 100%;
    height: 150px;
    display: block;
    padding: 0.6rem;
    font-size: 1.3rem;
    border: 1px solid transparent;
    color: var(--tsi);
    border-radius: 0.2rem;
    background-color: var(--bgs);
    resize: none;

} */

.inner.agree_term {
	width: 860px;
}
.agree_title_wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 24px;
}
.agree_title_wrap i {
	width: 40px;
	height: 40px;
	background: #C2F01B url(../img/term.png) no-repeat center center;
	background-size: 60%;
	border-radius: 999px;
}
.agree_title_wrap h1 {
	font-size: 2.8rem;
	margin-bottom: 4px; 
}
.agree_wrap .total {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	box-shadow: 0 0 12px #0F2B6012;
	border-radius: 16px;
	font-size: 2rem;
	font-weight: 700;
	margin: 24px 0;
}
.label_chk.total:has(input:checked) {
	background: var(--info-sub);
}



/* 실제 체크박스 숨기기 */
.agree_wrap .label_chk input[type="checkbox"] {
	appearance: none;
	position: absolute;
	left: -9999px;
}

/* 커스텀 박스 */
.agree_wrap .label_chk .checkmark {
	/*   border: 2px solid var(--bt); */
	border-radius: 999px; /* ← 살짝 둥글게 */
	background-color: var(--bgs);
	transition: all 0.25s ease;
	position: relative;
	width: 24px;
	height: 24px;
}
.agree_wrap .label_chk.total .checkmark {
	width: 40px;
	height: 40px;
}

.agree_wrap .label_chk .checkmark::after {
	content: '';
	position: absolute;
	left: 50%;
	top: calc(50% - 1px);
	transform: translate(-50%, -50%) rotate(45deg);
	width: 4px;
	height: 8px;
	border: solid var(--bp);	
	border-width: 0 2px 2px 0;
}
.agree_wrap .label_chk.total .checkmark::after {
	border-width: 0 3px 3px 0;
	width: 8px;
	height: 14px;
	top: calc(50% - 2px);
	
}
/* hover 효과 */
.agree_wrap .label_chk:hover .checkmark {
	background: var(--info-sub);
}
.agree_wrap .label_chk:hover .checkmark::after {
	/* border-color: var(--pc1); */
	border: solid var(--pc1);
	border-width: 0 2px 2px 0;
}
.agree_wrap .label_chk.total:hover .checkmark::after {
	border: solid var(--pc1);
	border-width: 0 3px 3px 0;
}
/* 체크 상태 */
.agree_wrap .label_chk:has(input[type="checkbox"]:checked) .checkmark {
	background-color: var(--info-sub);
	
}

/* 체크 표시 (✔) */
.agree_wrap .label_chk:has(input[type="checkbox"]:checked) .checkmark::after {
	border: solid var(--pc1);
	border-width: 0 2px 2px 0;
}
.agree_wrap .label_chk.total:has(input[type="checkbox"]:checked) .checkmark::after {
	border: solid var(--pc1);
	border-width: 0 3px 3px 0;
}

.agree_box_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	padding: 20px 0;
	border-bottom: 1px solid var(--bt);
}
.view_arrow {
	font-size: 1.2rem;
	color: var(--tsi);
	display: flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--bt);
	border-radius: 999px;
	padding: 2px 8px;
	padding-right: 4px;
	cursor: pointer;
}
.view_arrow i {
	width: 14px;
	height: 14px;
	background: url(../img/chevron_right_page.png) no-repeat center center;
	transform: rotate(90deg);
	background-size: contain;
	cursor: pointer;
	border: 1px solid transparent;
}
.view_arrow.active i {
    transform: rotate(270deg);
}
.agree_wrap .label_chk {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #333;
	position: relative;
	font-size: 1.8rem;
	font-weight: 700;
}
.agree_box .label_chk {
}
.agree_detail {
	display: none;
}
.agree_detail textarea {
    width: 100%;
	height: 260px;
    display: block;
    padding: 0.6rem;
    font-size: 1.3rem;
    border: 1px solid transparent;
    color: var(--tsi);
    border-radius: 0.2rem;
    resize: none;
   	background: var(--bgs);
}



/* ### file_wrap: 파일업로드 ### */
.upList {
    list-style: none;
    margin-top: 12px;
}
.upList li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 1.4rem;
}
.upList li + li {
    border-top: 1px solid var(--bt);
}
.upList li .file_name {
    width: calc(100% - 34px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.file_remove_btn {
    width: 28px;
    height: 28px;
    background: var(--bgt) url(../img/close.png) no-repeat center center;
    background-size: 64%;
    border-radius: 4px;
    border: 1px solid transparent;
}
.file_remove_btn:hover {
    border: 1px solid var(--tt);
}



/* Main */

/* ## 메인 스크롤 애니메이션 ##*/
/* 위에서 아래로 이동 */
.hide.t_to_b {
    opacity: 0;
    transform: translateY(-40px);
}
.hide.t_to_b.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.hide.t_to_b.show.dealy_01 {
    transition-delay: 0.8s;
}
.hide.t_to_b.show.dealy_02 {
    transition-delay: 1.6s;
}
.hide.t_to_b.show.dealy_03 {
    transition-delay: 2.4s;
}

/* 제자리 */
.hide.in_place {
    opacity: 0;
    transform: translateY(0);
}
.hide.in_place.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.hide.in_place.show.dealy_01 {
    transition-delay: 0.8s;
}
.hide.in_place.show.dealy_02 {
    transition-delay: 1.6s;
}
.hide.in_place.show.dealy_03 {
    transition-delay: 2.4s;
}



/* mainSec1 */
.mainSec {
    padding: 120px 0;
}
.mainSec1 {
    padding: 0 0 0 0;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(to right, #111827 48% , #ffffff00 48%);
    position: relative;
    overflow: hidden;
}
.mainSec1::after {
    content: '';
    position: absolute;
    left: -16%;
    top: -26%; 
    width: 50%;
    height: 160%;
    background: url(../img/connect.png) no-repeat center center;
    background-size: contain;
    transform-origin: center center; /* 회전 중심 설정 */
    animation: slowSpin 100s linear infinite; /* 회전 속도, 부드럽게 */
}
@keyframes slowSpin {
    from {
        transform: rotate(0deg) scale(1) translateX(-60px);
    }
    to {
        transform: rotate(360deg) scale(1.2) translateX(0);
    }
}

.mainSec1 .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
}
.mainSec1 .secRight {
    width: 46%;
    position: relative;
    margin-left: 80px;
}
.mainSec1 .secRight::after,
.mainSec1 .secRight::before {
    content: '';
    position: absolute;
    border-radius: 999px;
    animation: float 4s ease-in-out infinite;
}
.mainSec1 .secRight::after {
    width: 120px;
    height: 120px;
    background: #6DE9FF;
    left: -52px;
    bottom: calc(50% + 30px);

}
.mainSec1 .secRight::before {
    width: 36px;
    height: 36px;
    background: #FEE78D;
    top: 100%;
    right: 0;
    animation-delay: 1s;
}
/* 둥둥 떠다니는 애니메이션 */
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-24px);
    }
    100% {
        transform: translateY(0);
    }
}


.mainSec1 .secLeft {
    width: 54%;
    padding: 100px 0;
    padding-right: 80px;
    border-bottom-right-radius: 72px;
    background: #111827 url(../img/connect_2.png) no-repeat right -60px bottom -50px;
    background-size: 40%;
   
}
.hero_txt {
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}
.hero_txt h1 {
    font-size: 4.8rem;
    line-height: 1.3;
    font-weight: 800;
    margin-bottom: 18px;
}
.hero_txt em {
    color: var(--pc1);
    position: relative;
}
.hero_txt em::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: -8px;
    width: 12px;
    height: 12px;
    background-color: var(--pc1);
    border-radius: 999px;
}

.hero_txt span {
    display: block;
}
.hero_txt p {
    color: var(--tsi);
    font-weight: 600;
    font-size: 2rem;
}
.downBtn {
    background: #111827;
    color: #fff;
    border-radius: 999px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.downBtn:hover {
    background: var(--pc1);
}
.downBtn i {
    width: 20px;
    height: 20px;
	background: url(../img/north_east_w.png) no-repeat center center;
    background-size: contain;
}


/* # swiper slide css # */
.mySwiper {
}

.mainSlide {
	color: #fff;
}
.mainSlide .swiper-wrapper {
	padding-bottom: 64px;
}
.mainSlide .swiper-slide {
	color: #fff;
    border-radius: 20px;
    z-index: 1;
    backdrop-filter: blur(4px);
    background: linear-gradient(to bottom, #ffffff00, #ffffff32);
    position: relative;
}
.mainSlide .swiper-slide h2 {
	width: fit-content;
	font-weight: 700;
}
.mainSlide .swiper-slide-active h2 {
	color: transparent;
	background-image:linear-gradient(120deg ,#C2F01B,#6DE9FF);
	background-clip: text;
	webkit-background-clip: text;
	font-weight: 800;
}
.mainSlide .swiper-slide p {
	display: none;
}
.mainSlide .swiper-slide-active p {
	display: block;
}
.mainSlide .swiper-slide em {
	font-size: 1.2rem;
	font-weight: 200;
}
.mainSlide .swiper-slide-active em {
	
}
.mainSlide .swiper-slide .biz_inner {
	justify-content: center;
}
.mainSlide .swiper-slide-active .biz_inner {
	justify-content: space-between;
}
.mainSlide .swiper-slide-active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(120deg, #C2F01B72, #6DE9FF80);
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: -1;
}
.mainSlide .swiper-slide-active {
	backdrop-filter: blur(16px);
    background: linear-gradient(to bottom, #ffffff00, #ffffff32);
}

.mainSlide .biz_slide {
	height: 100%;
}
.mainSlide .biz_inner {
	padding: 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}

/* ### 스와이퍼 컨트롤러 영역 ### */
.swiper-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}
/* 스와이퍼 재생 일시정지 */
.swiper-toggle-btn {
    width: 26px;
    height: 26px;
    background: transparent url(../img/motion_photos_pause.png) no-repeat center center;
    background-size: contain;
}
.swiper-toggle-btn.play {
    background: transparent url(../img/play_circle.png) no-repeat center center;
    background-size: contain;
}
/* 프로그레스바 스타일 */
.swiper-controls .swiper-pagination {
    border-radius: 999px;
    overflow: hidden;
}
.swiper-controls .swiper-pagination-progressbar {
    background: #ffffff64;
    backdrop-filter: blur(16px);
    height: 8px;
    position: static;
}
.swiper-controls .swiper-pagination-progressbar-fill {
    border-radius: 999px;
    background:linear-gradient(to right ,#C2F01B,#6DE9FF);
}




/* ### mainSec2 ### */
/* 메타볼 */
.metaball-wrap {
    position: absolute;
    right: calc(-50% + 50px);
    bottom: calc(50% + 100px);
    z-index: -1;
}
.metaball-wrap svg {
    width: 420px;
    transform: rotate(30deg);
    filter: url(#metaball);
}

.mainSec .inner {
    display: flex;
    justify-content: space-between;
}
.mainSec2 .secLeft {
    position: relative;
    width:30%;
}
.video-container {
	/* main.jsp 내부 스타일링 되어있어 우선순위때문에 important 사용 */
    width: 340px !important;
    max-width: 100%; 
    aspect-ratio: 9/16;
    background-color: #111827;   
    border-radius: 16px;
}
.video-container img,
.video-container video {
	object-fit: contain !important; 
}
.mainSec2 .secRight {
    width: 60%;
    display: flex;
    gap: 36px;
}
.mainSec2 .secRight .main_txt_wrap {
    width: calc(50% - 36px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mainSec2 .secRight .desc_txt {
    color: var(--tsi);
    font-size: 1.8rem;
}
.mainSec2 .secRight .desc_txt + .desc_txt {

}
.project_go {
    background: url(../img/gradient_bg.png) no-repeat center center;
    background-size: cover;
    border-radius: 20px;
    padding: 40px;
    width: 50%;
}
.project_go .main_txt {
    font-size: 2.8rem;
}
.project_go {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.go_txt_wrap .main_txt {
    word-break: keep-all;
    margin-bottom: 12px;
}
.go_txt_wrap p {
    font-weight: 600;
}
.go_btns {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.go_btns li {
}
.go_btns li a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: #ffffff64;
    backdrop-filter: blur(20px);
    border: 1px solid #ffffff64;
    border-radius: 999px;
    font-weight: 600;
}
.go_btns li a:hover {
    background: #fff;
}
.go_btns i {
    width: 20px;
    height: 20px;
    background: url(../img/north_east.png) no-repeat center center;
    background-size: contain;
}

/* ### mainSec3 ### */
.mainSec3 {

}
.main_txt {
    font-weight: 800;
    line-height: 1.4;
    word-break: keep-all;
}
.mainSec3 .secLeft {
    position: relative;
    width: 24%
}
.mainSec3 .secRight {
    width: calc(76% - 300px);
}
.idea_img {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: -1;
}
.idea_img img {
    position: absolute;
    bottom: 0;
}
.idea_img img:nth-child(1) {
    width: 60px;
    left: 0;
}
.idea_img img:nth-child(2) {
    width: 60px;
    left: 40px;
}
.idea_img img:nth-child(3) {
    width: 86px;
    left: 80px;
}
.mainSec3 .main_txt {
    position: relative;
}
.mainSec3 .main_txt::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: #FEE78D;
    left: -20px;
    top: 0;
    z-index: -1;
    border-radius: 999px;
    animation: float 4s ease-in-out infinite;
}
.mainSec3 .desc_txt {
    color: var(--tsi);
    font-weight: 500;
    font-size: 1.8rem;
    margin-top: 16px;
}
.contactUs {
    list-style: none;
    display: flex;
    gap: 30px;
}
.contactUs li {
    border: 1px solid var(--bt);
    border-radius: 12px;
    flex: 1;
    background: #ffffff88;
    backdrop-filter: blur(10px);
}
.contactUs li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
}
.contactUs li:nth-child(1) {
    border: 1px solid #FEE78D;
    box-shadow: 0 0 9px #EBE14946;
}
.contactUs li:nth-child(2) {
    box-shadow: 0 0 9px #2F698D24;
}
.contactUs span {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bgs);
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--tsi);
}
.contactUs li img {
    width: 20px;
}
.contactUs h3 {
    font-size: 2.6rem;
    word-break: break-all;
    text-align: center;
}

/* mainSec4 */
.mainSec4 {
    background: url(../img/blur_bg.png) no-repeat center center;
    background-size: cover;
}
.mainSec4 .inner {
    display: flex;
    gap: 40px;
}
.mainSec4 .secLeft {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.moreBtn {
	white-space: nowrap;
}
.mainSec4 .secRight {
    width: calc(80% - 40px);
}


.moreBtn {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--pc1);
    backdrop-filter: blur(20px);
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 600;
}
.moreBtn:hover {
    background: var(--tp);
}
.moreBtn i {
    width: 20px;
    height: 20px;
    background: url(../img/north_east_w.png) no-repeat center center;
    background-size: contain;
}
.newsList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.newsList li {
    width: calc(33.333% - 16px);
}
.newsList li a {
    background: #ffffff64;
    backdrop-filter: blur(14px);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 36px;
    gap: 6px;
    box-shadow:  0 0 8px #3F69A924;
}
.news_title {
    font-size: 2rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.news_detail {

}
.news_cont {
    color: var(--tsi);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 52px;
}
.news_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}
.news_date {
    color: var(--tsi);
    font-size: 1.4rem;
    font-weight: 500;
}
.news_info i {
    width: 18px;
    height: 18px;
    background: url(../img/north_east_g.png) no-repeat center center;
    background-size: contain;
}
.newsList li a:hover .news_title {
    color: var(--pc1);
}
.newsList li a:hover .news_date {
    color: var(--pc1);
}
.newsList li a:hover .news_info i {
    background: url(../img/north_east_b.png) no-repeat center center;
    background-size: contain;
}



/* ## project ## */
.project_visu {
    padding: 60px;
    border-radius: 16px;
    margin-bottom: 30px;
    background: url(../img/p_visu.png) no-repeat right -16px bottom -50px,
                url(../img/gradient_bg.png) no-repeat center center;
    background-size: 56% auto, cover;
    /* background: url(../img/p_visu1.png) no-repeat center bottom -10px,
                url(../img/p_visu3.png) no-repeat right bottom,
                url(../img/p_visu2.png) no-repeat center center,
                url(../img/gradient_bg.png) no-repeat center center;
    background-size: 300px auto, 200px auto, 200px auto, cover; */
}
.project_visu h2 {
    font-weight: 800;
    font-size: 2.8rem;
}
.project_visu span {
    display: block;
}
.project_tab .tab_menu {
    gap: 12px;
    flex-wrap: wrap;
}
.project_tab .tab_btn {
    background: #fff;
    border-radius: 999px;
    border: 1px solid var(--tp);
    color: var(--tp);
    flex: none;
    font-weight: 600;
}
.project_tab .tab_btn.active,
.project_tab .tab_btn:hover {
    color: var(--pc1);
    border: 1px solid var(--pc1);
}


/* ## pj_layout ## */
.pj_layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 80px;
    padding-top: 64px;
}
.pj_right,
.pj_left {
    width: calc(50% - 40px);
}
.pj_right img {
    width: 100%;
    display: block;
    margin:  0 auto;
}
.pj_left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.pj_title h1 {
    font-weight: 800;
}
.pj_title span {
    color: var(--tsi);
}
.pj_desc {
    font-size: 2rem;
    word-break: keep-all;
    font-weight: 500;
    margin-top: 16px;
}
.pj_desc .point {
    color: var(--pc1);
}
.pj_layout ul {
    list-style: none;
}
.func_list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.func_list li {
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--info-sub);
    text-align: center;
    font-weight: 600;
    color: var(--pc1);
    font-size: 2rem;
}
.benefit {
    padding: 32px;
    border-radius: 16px;
    background: var(--bgs);
}
.benefit li {
    color: var(--tsi);
    font-weight: 600;
    font-size: 2rem;
}
.benefit li + li {
    margin-top: 16px;
}
.pj_layout .btn_wrap {
    justify-content: flex-start;
}
.pj_layout .downBtn {
    flex: 1;
}


/* ## company ## */
.company_info {
    background: var(--bgs);
    border-radius: 12px;
    padding: 24px;
    margin-top: 16px;
}
.company_info table {
    width: 100%;
    border-collapse: collapse;
}
.company_info th,
.company_info td {
    text-align: left;
    padding: 16px;
    color: var(--tsi);
}
.company_info th {
    white-space: nowrap;
}
.company_info td {

}
.company_info ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.company_info ul em {
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--tsi);
    display: block;
}

.history_wrap .title_wrap h1 {
	font-weight: 800;
}
.history_1 {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-top: 40px;
	margin-bottom: 160px;
	position: relative;
	flex-wrap: wrap;
	padding: 64px;
    box-shadow: 0 0 10px #00000012;
    border-radius: 12px;
    background: rgb(252, 252, 255, .64);
}
.history_1::after {
	content: '';
	position: absolute;
	width: 120px;
	height: 120px; 
	right: 0;
	bottom: -24px;
	background: #C2F01B;
	border-radius: 999px;
	animation: float 4s ease-in-out infinite;
	z-index: -1;
}
.history_1 .title_wrap {
	margin: 0 0;
}
.history_1 .title_wrap h1 {
	font-size: 4rem;
}
.history_list {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	font-size: 2.2rem;
	font-weight: 600;
}
.history_list ul {
	list-style: none;
	width: 50%;
}
.history_list ul:nth-child(1) {
	border-left: 3px solid #5E9988;
}
.history_list ul:nth-child(2) {
	border-left: 3px solid var(--pc1);
}
.history_list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.history_list li + li {
	margin-top: 20px;
}
.history_list li em {
	padding: 0 16px;
	font-weight: 800;
	position: relative;
}
.history_list li em::before {
	position: absolute;
	content: '';
	width: 12px;
	height: 12px;
	border-radius: 999px;
	left: -7px;
	top: 50%;
	transform: translateY(-50%);
}
.history_list ul:nth-child(1) li em::before {
	background: #5E9988;
}
.history_list ul:nth-child(2) li em::before {
	background: var(--pc1);
}
.history_list ul:nth-child(1) em {
	color: #5E9988;
}
.history_list ul:nth-child(2) em {
	color: var(--pc1);
}
.history_detail a + a {
	margin-top: 10px;
}
.history_detail p {
	position: relative;
}
.history_detail p::before {
	content:'';
	position: absolute;
	width: 4px;
	height: 4px;
	background: var(--tp);
	border-radius: 999px;
	left: -10px;
	top: 16px;
}
.history_2 {
	
}
.history_2 .title_wrap {
	font-size: 4rem;
	margin-bottom: 0;
}
.history_2 .title_wrap em {
	color: var(--pc1);
	position: relative;
}
.history_2 .title_wrap em::before {
	content:'';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 18px;
	height: 18px;
	background: #C2F01B;
	border-radius: 999px;
	animation: float 4s ease-in-out infinite;
}




/* direction */
.map_wrap {
}
.map_wrap iframe {
    width: 100%;
    display: block;
}


/* ## greet ## */
.greeting_img {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 78px;
    padding: 40px 0;
    width: 1180px;
    max-width: 100%;
    margin: 0 auto;
}

/* 동그라미 css */
.circle_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.outer_circle {
    width: 370px;
    height: 370px;
    border-radius: 50%;
    border: 1px solid #92CAFB;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.middle_circle {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background:linear-gradient(to bottom,#CCE2FF,#4DACF5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner_circle {
    width: 86%;
    height: 86%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.greet_content .logo {
    width: 64%;
    margin-top: 28px;
    margin-bottom: 24px;
}

.greet_content .text {
    background: rgba(255, 255, 255, 0.69);
    padding: 16px 24px;
    border-radius: 999px;
    font-size: 2rem;
    color: #3769D5;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    word-break: keep-all;
}

/* 네모 두개 css */
.square_wrap {
    display:flex;
    justify-content: center;
    width: calc(100% - 370px - 78px);
    gap: 40px;
    position: relative;
}

.square_left,
.square_right {
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #3B6EDD;
    flex-direction: column;
    color: #fff;
    border-radius: 20px;
    width: 50%;
    padding: 40px;
}
.box_icon {
    margin-bottom: 19px;
    height: 52px;
}
.box_icon1 {

}

.box_icon2 {

}

.box_text {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
}
.box_text span {
    display: block;
}
.divider {
    width: 40px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top: 1px dashed #b3c7ff;
    position: absolute;
}

.greeting_text_main {
    margin-top: 72px;
    font-size: 2rem;
    font-weight: 500;
}

.greeting_text_introduction {
    text-align: right;
}

.greeting_text_introduction small {
    font-size: 2rem;
    font-weight: 600;
    margin-right: 18px;
}

.greeting_text_introduction span {
    font-size: 3.2rem;
    font-weight: 700;
}





/* busi */
.busMain .hero_txt {
    margin-bottom: 0;
}
.busMain .hero_txt h1 {
    font-size: 3.6rem;
}
.bus_top,
.bus_bottom {
    display: flex;
    gap: 36px;
}
.bus_top {
    margin-bottom: 36px;
}
.bus_box {
    padding: 32px;
    border-radius: 16px;
    color: #fff;
}
.bus_title {
    margin-bottom: 16px;
}
.bus_title .sub {
    font-size: 1.4rem;
    font-weight: 300;
}
.bus_title h1 {
    font-size: 2.8rem;
}
.bus_content {
    word-break: keep-all;
}
.bus_top_l {
    background: url(../img/biz1_1.png) no-repeat center center;
    background-size: cover;
    width: 60%;
}
.bus_top_r {
    background: url(../img/biz1_2.png) no-repeat center center;
    background-size: cover;
    width: 40%;
}
.bus_bottom_l {
    background: url(../img/biz2_1.png) no-repeat center center;
    background-size: cover;
    width: 46%;
}
.bus_bottom_r {
    background: url(../img/biz2_2.png) no-repeat center center;
    background-size: cover;
    width: 54%;
}

/* tr 포인터 설정 */
.click-row {
  cursor: pointer;
}

/* 메인 팝업 슬라이드:main_pop_wap */
.main_pop_wrap {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #00000092;
    z-index: 1000;
    padding-bottom: 80px;
    overflow: auto;
    top: 0;
}
.main_pop_wrap .inner {
	max-width: calc(100% - 92px - 92px);
}
.main_pop_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 4px;
    padding-top: 40px;
    margin-bottom: 16px;
}
.main_pop_header h1 {
    color: #fff;
    text-align: center;
    font-size: 4rem;
}
.main_pop_header_l {
    display: flex;
    align-items: center;
    gap: 12px;
}
.main_pop_header_r {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    font-size: 1.8rem;
}
.pop_gun,
.pop_close {
    padding: 6px 12px;
    border-radius: 8px;
}
.pop_gun {
    background-color: var(--pc1);
    color: #fff;
}
.pop_close {
    background-color: #000000cf;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    text-align: left;
    gap: 10px;
    box-shadow: 0 0 10px #00000088;
}
.pop_close i {
    width: 24px;
    height: 24px;
    background: url(../img/cancle_2.png) no-repeat center center;
    background-size: contain;
    border-radius: 999px;
}

.main_pop {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.main_pop.slick-initialized {
    opacity: 1;
}

.main_pop {

}

.pop_thum {
    display: block;
    /* border: 2px solid transparent; */
}
.pop_thum img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.pop_thum:hover img {
    border: 2px solid var(--pc1);
}
.main_pop_wrap  .slick-prev,
.main_pop_wrap .slick-next {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	box-shadow: 0 0 10px #00000064;
	z-index: 999;
}
.main_pop_wrap  .slick-prev {
	background: var(--pc1) url(../img/prev_arrow.png) no-repeat center center;
	background-size: 72%;
	left: -82px;
}
.main_pop_wrap  .slick-prev:hover {
	background: var(--tsi) url(../img/prev_arrow.png) no-repeat center center;
	background-size: 72%;
	left: -82px;
}
.main_pop_wrap .slick-prev:before {
	display: none;
}
.main_pop_wrap  .slick-next {
	background: var(--pc1) url(../img/next_arrow.png) no-repeat center center;
	background-size: 72%;
	right: -82px;
}
.main_pop_wrap  .slick-next:hover {
	background: var(--tsi) url(../img/next_arrow.png) no-repeat center center;
	background-size: 72%;
	right: -82px;
}
.main_pop_wrap .slick-next:before {
	display: none;
}
.main_pop_wrap .slick-track {
}
.main_pop_wrap .slick-track > div{
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}



/* ### modal ### */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .6);
	z-index: 999;
	display: none;
}

.modal_active {
  display: block;
}
.modal_content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
/* 회사소개서 모달 */
.doc_modal_header {
	
}
.doc_modal .modal_body {
	height: calc(100vh - 70px - 78px);
	overflow: auto;
	box-shadow: 0 0 10px #00000088;
	border: 8px solid #fff;
}
.doc_slider {
	height: 100%;
}
.doc_modal .slick-track,
.doc_modal .slick-list{
	height: 100%;
}
.doc_modal .slick-slide {
	background: #000;	
	height: 100%;
	width: 100%;
}
.doc_modal img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
.doc_modal .modal_header {
	display: flex;
	justify-content: flex-end;
	padding: 16px;
}
.doc_modal .close_modal {
	width: 38px;
	height: 38px;
	background: #000000 url(../img/cancle_2.png) no-repeat center center;
	background-size: contain;
	border-radius: 6px;
	box-shadow: 0 0 10px #00000088;
}
.doc_modal .downBtn {
	background: #6DE9FF;
	color: #111827;
	padding: 6px 16px;
	padding-right: 12px;
}
.doc_modal .downBtn:hover {
	background: var(--pc1);
	color: #fff;
}
.doc_modal .downBtn i {
	background: url(../img/file_download_bk.png) no-repeat center center;
	background-size: contain;
}
.doc_modal .downBtn:hover i {
	background: url(../img/file_download.png) no-repeat center center;
	background-size: contain;
}
.doc_modal .modal_footer {
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
}
.slider_nav {
	display: flex;
	align-items: center;
	gap: 12px;
}
.slider_nav button {
	width: 38px;
	height: 38px;
	border-radius: 999px;
} 
.slider_nav .prev_btn {
	background: var(--bgs) url(../img/chevron_left_page.png) no-repeat center center;
	background-size: contain;
}
.slider_nav .next_btn {
	background: var(--bgs) url(../img/keyboard_arrow_right.png) no-repeat center center;
	background-size: contain;
}
.slider_nav span {
	color: #fff;
	font-weight: 800;
}



/* ### 인증서 화면 certificate ### */
.gra_title {
	  background: linear-gradient(to bottom, #1B66F0, #1A3E81);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	  text-align: center;
	  margin-top: 100px;
	  margin-bottom: 24px;
	  position: relative;
	  word-break: keep-all;
}
.gra_title::before {
	content:'';
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	height: 72px;
	width: 1px;
	background: #1B66F0;
}
.certi_wrap {
	background: linear-gradient(
	  to bottom,
	  #F4F5F6 0%,
	  #DFDFDF 75%,
	  #FFFFFF 84%,
	  #B9BCC0 100%
	);
	padding: 80px 0;
}
.certi_wrap ul {
	list-style: none;
	display: flex;	
	flex-wrap: wrap;
	justify-content: center;
	gap: 56px;
}
.certi_wrap li {
	width: 300px;
	max-width: 100%;
}
.certi_wrap li img {
	width: 100%;
	box-shadow: 0 0 10px #00000040;
}
.certi_name {
	background: #111827;
	color: #fff;
	border-radius: 6px;
	padding: 8px;
	text-align: center;
}



/* ### 사업분야 ### */
.bizMain {
	background: url('../img/bs_3.png') no-repeat center left 100px / 600px,
				url('../img/bs_9.png') no-repeat bottom right 140px / 200px,
				linear-gradient(180deg, #ffffff00, #f4f5f6);
	overflow: hidden;
	position: relative;
}
.biz_area {
	margin-top: 40px;
	margin-bottom: 80px;
}
.biz_area .item {
	padding: 40px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	word-break: keep-all;
}
.biz_area .item + .item {
	margin-top: 40px;
}
.biz_area .item .desc {
	width: 30%;
}
.biz_area .item .points {
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.biz_area .item.type2 {
	backdrop-filter: blur(4px);
	box-shadow: 0 0 10px #00000024;
}
.biz_area strong {
	font-size: 2.4rem;
}
.biz_area strong,
.biz_area em {
	color: var(--pc1);
}
.biz_area h1 {
	word-break: keep-all;
	margin-bottom: 24px;
}
.biz_area .point {
	width: calc(50% - 10px);
	border-radius: 8px;
	box-shadow: 0 0 10px #00000024;
	padding: 16px; 
}
.biz_area .point b {
	color: var(--tsi);
}
.biz_area .point p {
	font-weight: 700; 
}
.biz_area .type1 .point {
	background: #fff;
}
.biz_area .type2 .point {
	background: var(--bgs);
}
.biz_area .item1 {
	background: url('../img/bs_8.png') no-repeat bottom -60px right / 300px,
                var(--bgs);
}
.biz_area .item2 {
	background: url('../img/bs_6.png') no-repeat bottom -60px right / 260px,
                url('../img/bs_7.png') no-repeat center top -200px / 300px,
                #ffffff72;
}
.biz_area .item3 { 
	background: url('../img/bs_7.png') no-repeat bottom -100px center / 180px,
                url('../img/bs_5.png') no-repeat top -60px right -180px / 480px,
                var(--bgs);
}
.biz_area .item4 {
   background:  url('../img/bs_4.png') no-repeat bottom -60px right 24px / 200px,
 				url('../img/bs_2.png') no-repeat bottom -400px center / 600px,
                url('../img/bs_7.png') no-repeat center left -150px / 300px,
                #ffffff72;
}

.solar {
    position: absolute;
    width: 500px;
    height: 500px;
    right: 16px;
    top: 40px;
}

  /* 공통: 궤도 */
.orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	border: 1px solid var(--bt);
	transform: translate(-50%, -50%);
	animation: rotate linear infinite;
}

/* 공통: 행성 */
.planet {
	width: 14px;
	height: 14px;
	background: #ff6f6f;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translate(-50%, -50%);
}

/* 1번 궤도 크기 + 속도 */
.o1 {
	width: 260px;
	height: 260px;
	animation-duration: 8s;
}
.p1 { 
	background: var(--bt); 
}

/* 2번 궤도 */
.o2 {
	width: 400px;
	height: 400px;
	animation-duration: 14s;
	animation-direction: reverse;
}
.p2 { 
	background: var(--bt);
}

/* 3번 궤도 */
.o3 {
	width: 500px;
	height: 500px;
	animation-duration: 22s;
}
.p3 { 
	background: var(--bt);
}

/* 공전 애니메이션 */
@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}