@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');



.rajdhani-light {
    font-family: "Rajdhani", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.rajdhani-regular {
    font-family: "Rajdhani", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.rajdhani-medium {
    font-family: "Rajdhani", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.rajdhani-semibold {
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.rajdhani-bold {
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-style: normal;
}




@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}

이 폰트로 만든 디자인

/* 초기화 */
html {

    overflow-y: scroll;
}

body {
    word-break: keep-all;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: 'Pretendard';
    background: #fff;
    color: #333333;
    overflow-x: hidden;
}

main {
    overflow-x: hidden;
}

html,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
img {
    margin: 0;
    padding: 0;
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em;
    font-family: 'Pretendard';
    font-weight: 700;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ul,
dl,
dt,
dd {
    margin: 0;
    padding: 0;
    list-style: none;
}

legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden;
}

label,
input,
button,
select,
img {
    vertical-align: middle;
    font-size: 1em;
}

input,
button {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard';
    font-size: 14px;
}

input[type='submit'] {
    cursor: pointer;
}

button {
    border: none;
    outline: none;
    background-color: inherit;
    cursor: pointer;
}

textarea,
select {
    font-family: 'S-CoreDream-3Light';
    font-size: 1em;
}

select {
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
    word-break: break-all;
}

hr {
    display: none;
}

pre {
    overflow-x: scroll;
    font-size: 1.1em;
}

a {
    color: #000;
    text-decoration: none;
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type='text'],
input[type='password'],
textarea {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    outline: none;
}

input[type='text']:focus,
input[type='password']:focus,
textarea:focus,
select:focus {
    -webkit-box-shadow: 0 0 5px #9ed4ff;
    -moz-box-shadow: 0 0 5px #9ed4ff;
    box-shadow: 0 0 5px #9ed4ff;
    border: 1px solid #558ab7 !important;
}

.placeholdersjs {
    color: #aaa !important;
}

/* 레이아웃 크기 지정 */
#hd,
#wrapper,
#ft {
    width: 100%;
}

#hd_pop,
#hd_wrapper,
#tnb .inner,
#gnb .gnb_wrap,
#container_wr,
#ft_wr {
    width: 100%;
}


/* 팝업레이어 */
#hd_pop {
    z-index: 1000;
    position: relative;
    margin: 0 auto;
    height: 0;
}

#hd_pop h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.hd_pops {
    position: absolute;
    border: 1px solid #e9e9e9;
    background: #fff;
}

.hd_pops img {
    max-width: 100%;
}

.hd_pops_con {}

.hd_pops_footer {
    padding: 0;
    background: #000;
    color: #fff;
    text-align: left;
    position: relative;
}

.hd_pops_footer:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.hd_pops_footer button {
    padding: 10px;
    border: 0;
    color: #fff;
}

.hd_pops_footer .hd_pops_reject {
    background: #000;
    text-align: left;
}

.hd_pops_footer .hd_pops_close {
    background: #393939;
    position: absolute;
    top: 0;
    right: 0;
}

/* 상단 레이아웃 */
#hd {
    background: #ffff;
    position: sticky;
}

#hd_h1 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#tnb {
    border-bottom: 1px solid #383838;
    margin: 0 auto;
}

#tnb:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

#tnb .inner {
    margin: 0 auto;
}

#hd_wrapper {
    position: relative;
    margin: 0 auto;
    height: 70px;
    zoom: 1;
    background: #eee;
}

#hd_wrapper:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

#logo {
    float: left;
    padding: 30px 0 0;
}

.hd_sch_wr {
    float: left;
    padding: 30px 0;
    width: 445px;
    margin-left: 65px;
}

#hd_sch h3 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#hd_sch {
    border-radius: 30px;
    overflow: hidden;
}

#hd_sch #sch_stx {
    float: left;
    width: 385px;
    height: 45px;
    padding-left: 10px;
    border-radius: 30px 0 0 30px;
    background: #2c2c2c;
    border: 0;
    border-right: 0;
    font-size: 1.25em;
    color: #fff;
}

#hd_sch #sch_submit {
    float: left;
    width: 60px;
    height: 45px;
    border: 0;
    background: #2c2c2c;
    color: #fff;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    font-size: 16px;
}

#hd_define {
    float: left;
}

#hd_define:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

#hd_define li {
    float: left;
    font-size: 1.083em;
    line-height: 14px;
    border-right: 1px solid #4a4a4a;
    position: relative;
    text-align: center;
    margin: 15px 10px 15px 0;
    padding-right: 10px;
}

#hd_define li:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
}

#hd_define li a {
    display: inline-block;
    color: #919191;
}

#hd_define li.active a {
    color: #fff;
}

#hd_qnb {
    float: right;
    text-align: right;
}

#hd_qnb:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

#hd_qnb li {
    float: left;
    font-size: 1.083em;
    line-height: 14px;
    border-right: 1px solid #4a4a4a;
    position: relative;
    text-align: center;
    margin: 15px 10px 15px 0;
    padding-right: 10px;
}

#hd_qnb li:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
}

#hd_qnb li span {
    display: block;
    margin-top: 5px;
    font-size: 0.92em;
}

#hd_qnb li a {
    display: inline-block;
    color: #919191;
}

#hd_qnb .visit .visit-num {
    display: inline-block;
    line-height: 16px;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 10px;
    background: #da22f5;
    color: #fff;
    font-size: 10px;
}

.hd_login {
    position: absolute;
    right: 0;
    top: 60px;
}

.hd_login li {
    float: left;
    margin: 0 5px;
    border-left: 1px solid #616161;
    padding-left: 10px;
    line-height: 13px;
}

.hd_login li:first-child {
    border-left: 0;
}

.hd_login a {
    color: #fff;
}

/* 메인메뉴 */
#gnb {
    position: relative;
    background: #fff;
    display: none;
}

#gnb>h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#gnb .gnb_wrap {
    margin: 0 auto;
    position: relative;
}

#gnb .gnb_wrap:hover,
#gnb .gnb_wrap:focus,
#gnb .gnb_wrap:active {
    z-index: 3;
}

#gnb #gnb_1dul {
    font-size: 1.083em;
    padding: 0;
    border-bottom: 1px solid #e0e2e5;
    zoom: 1;
}

#gnb ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

#gnb .gnb_1dli {
    float: left;
    line-height: 55px;
    padding: 0px;
    position: relative;
}

#gnb .gnb_1dli:hover>a {
    color: #3a8afd;
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
}

.gnb_1dli .bg {
    position: absolute;
    top: 24px;
    right: 8px;
    display: inline-block;
    width: 10px;
    height: 10px;
    overflow: hidden;
    background: url('../img/gnb_bg2.gif') no-repeat 50% 50%;
    text-indent: -999px;
}

.gnb_1da {
    display: block;
    font-weight: bold;
    padding: 0 15px;
    color: #080808;
    text-decoration: none;
}

.gnb_1dli.gnb_al_li_plus .gnb_1da {
    padding-right: 25px;
}

.gnb_2dli:first-child {
    border: 0;
}

.gnb_2dul {
    display: none;
    position: absolute;
    top: 54px;
    min-width: 140px;
    padding-top: 2px;
}

.gnb_2dul .gnb_2dul_box {
    border: 1px solid #e0e2e5;
    border-top: 0;
    padding: 0;
    -webkit-box-shadow: 0px 1px 5px rgba(97, 97, 97, 0.2);
    -moz-box-shadow: 0px 1px 5px rgba(97, 97, 97, 0.2);
    box-shadow: 0px 1px 5px rgba(97, 97, 97, 0.2);
}

.gnb_2da {
    display: block;
    padding: 0 10px;
    line-height: 40px;
    background: #fff;
    color: #080808;
    text-align: left;
    text-decoration: none;
}

a.gnb_2da:hover {
    color: #3a8afd;
    background: #f7f7f8;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.gnb_1dli_air .gnb_2da {}

.gnb_1dli_on .gnb_2da {}

.gnb_2da:focus,
.gnb_2da:hover {
    color: #fff;
}

.gnb_1dli_over .gnb_2dul {
    display: block;
    left: 0;
}

.gnb_1dli_over2 .gnb_2dul {
    display: block;
    right: 0;
}

.gnb_wrap .gnb_empty {
    padding: 10px 0;
    width: 100%;
    text-align: center;
    line-height: 2.7em;
    color: #080808;
}

.gnb_wrap .gnb_empty a {
    color: #3a8afd;
    text-decoration: underline;
}

.gnb_wrap .gnb_al_ul .gnb_empty,
.gnb_wrap .gnb_al_ul .gnb_empty a {
    color: #555;
}

#gnb .gnb_menu_btn {
    background: #4158d1;
    color: #fff;
    width: 50px;
    height: 55px;
    border: 0;
    vertical-align: top;
    font-size: 18px;
}

#gnb .gnb_close_btn {
    background: #fff;
    color: #b6b9bb;
    width: 50px;
    height: 50px;
    border: 0;
    vertical-align: top;
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 0;
}

#gnb .gnb_mnal {
    float: right;
    padding: 0;
}

#gnb_all {
    display: none;
    position: absolute;
    border: 1px solid #c5d6da;
    width: 100%;
    background: #fff;
    z-index: 1000;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#gnb_all h2 {
    font-size: 1.3em;
    padding: 15px 20px;
    border-bottom: 1px solid #e7eeef;
}

#gnb_all .gnb_al_ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

#gnb_all .gnb_al_ul>li:nth-child(5n + 1) {
    border-left: 0;
}

#gnb_all .gnb_al_li {
    float: left;
    width: 20%;
    min-height: 150px;
    padding: 20px;
    border-left: 1px solid #e7eeef;
}

#gnb_all .gnb_al_li .gnb_al_a {
    font-size: 1.2em;
    display: block;
    position: relative;
    margin-bottom: 10px;
    font-weight: bold;
    color: #3a8afd;
}

#gnb_all .gnb_al_li li {
    line-height: 2em;
}

#gnb_all .gnb_al_li li a {
    color: #555;
}

#gnb_all_bg {
    display: none;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
}

/* 배너 */

.banner {
    margin-left: 100px;
    height: 850px;
    overflow: hidden;
    position: relative;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mySwiper {
    border-radius: 0 0 0 70px;
    width: 100%;
    height: 100%;
}

.text_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
}

.text_wrap h1 {
    margin-bottom: 0.3rem;
    font-size: 60px;
}

.text_wrap p {
    font-size: 47.8px;

}

/* 중간 레이아웃 */
.bo_gall_wrap {
    width: 80%;
    margin: 0 auto;
}

#wrapper {}

#container_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

#container_wr {

    margin: 0 auto;
    zoom: 1;
}

#aside {
    float: right;
    width: 235px;
    padding: 0;
    height: 100%;
    margin: 20px 0 20px 20px;
    display: none;
}

#container {
    position: relative;
    width: 100%;
}

#container:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

#container_title {
    font-size: 2rem;
    width: 80%;
    margin: 0 auto;
    font-weight: 600;
    padding: 100px 0 0 0;
    color: #333;
    text-align: left;
}

.head_title {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

#container_title .bgtext {
    text-align: right;
    border-bottom: 1px solid #eeeeee;
    line-height: 93px;
    font-size: 132px;
    color: #eee;
    font-weight: 800;
}



.container_title2 {
    background: url(/img/business_bg_1.png) no-repeat;
}

.container_title3 {
    background: url(/img/product_bg_1.png) no-repeat;
}

.container_title4 {
    background: url(/img/contact_bg_1.png) no-repeat;
}

.container_info1 {
    background: url(/img/intro_bg_2.png) no-repeat !important;
}

#container_title:first-child {
    display: none;
}

#container_title .head_title span {
    text-align: left;
    font-size: 45px;
    font-weight: 700;
}


.container_menu {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.container_menu ul {
    position: absolute;
    bottom: 18px;
    display: flex;
    font-size: 1rem;
    gap: 20px;
    /* text-align: center; */
    transform: translate(-50%);
    left: 50%;
}

.container_menu ul li {
    background: rgb(255, 255, 255, 0.5);
    padding: 10px 20px;
    border-radius: 50px;
    border: 2px solid #13007d;
}

.container_menu ul li a {
    font-size: 1rem;
}

.container_menu ul :is(li:hover, li.active) {
    background: #13007d;
}

.container_menu ul :is(li:hover, li.active) a {
    color: #fff;
}

/* 인사말 */
.greeting {
    width: 80%;
    margin: 160px auto;
}

.info_head h1 {
    padding-right: 22px;
    display: inline-block;
    position: relative;
}

.info_head h1:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 7px;
    right: 0;
    width: 14px;
    height: 14px;
    border: 5px solid #416EF2;
    border-radius: 50%;


}

.info_head h1 {
    font-size: 40px;
    font-weight: 700;
}

.greeting_content {
    margin: 80px 0;
    justify-content: space-between;
    display: flex;
    gap: 100px;

}

.ment {
    display: flex;
    flex-direction: column;
}

.ceo_img {}

.ceo_img img {
    width: 100%;
}

.gap {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.ment h1 {
    line-height: 3.4rem;
    margin-bottom: 80px;
    font-size: 40px;
}

.ment p {
    font-size: 20px;
    line-height: 1.9rem;
    font-weight: 400;
}

.text_box3 p {
    word-break: keep-all;
    margin-bottom: 24px;
}

.sign {
    display: flex;
    gap: 18px;
}

.greeting .grey {
    line-height: 30px;
    font-size: 18px;
    color: #999999;
}

.greeting .name {
    font-size: 24px;
    font-weight: 700;
}

.sign img {
    position: absolute;
    bottom: -10px;
    left: 242px;
}




/* 주요사업분야 */
.business_head {
    text-align: center;
    font-weight: 600;
    line-height: 39px;
    font-size: 28px;
    margin: 51px 0;
}

.container_title_business {
    width: 80%;
    margin: 0 auto;
}

.info_head p {
    word-break: keep-all;
    font-size: 26px;
    font-weight: 500;
    margin: 50px 0;
}

.hero {
    padding-left: 50px;
    object-fit: contain;
    width: 100%;
    margin: 150px auto;
}

.core_pc {
    width: 100%;
}

.core_tablet {
    display: none;
    width: 100%;
}


.section {
    margin-bottom: 150px;
    background-color: #000;
    border-radius: 33px;
    padding: 160px 110px 90px 110px;
    display: flex;
    justify-content: space-between;
    gap: 100px;
    word-break: keep-all;
}


.col {
    flex: 1;
}

.col h3 {
    position: relative;
    display: block;
    font-size: 28px;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: 60px;
    padding-bottom: 18px;
}

.col h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 130px;
    height: 2px;
    background: #4070ff;
    z-index: 1;
}

.col h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #383838;
}


.col h4 {
    font-size: 24px;
    margin: 26px 0 16px;
    color: #fff;
}

.col_height {
    padding: 0px 0 40px 0;
}

.col p {
    height: 107px;
    word-break: keep-all;
    font-size: 20px;
    font-weight: 400;
    color: #aaa;
    margin: 0 0 20px;
    line-height: 1.6;
    border-bottom: 1px solid #383838;
}

/*오시는길*/


.group_tablet_img {
    display: none;
}


/* 조직도 */

.group_bg {
    padding: 180px 0 200px 0;
    /* background-color: #000; */
    border-radius: 80px 80px 0 0;

}

.group {
    color: #333;

    width: 80%;
    margin: 0 auto;
}

.group_img {
    width: 100%;
    margin-top: 70px;
    display: flex;
    justify-content: center;
}


.lt_wr {
    width: 32%;
}

.lt_wr:nth-child(3n + 1) {
    clear: both;
}

.latest_wr {
    margin-bottom: 20px;
}

.latest_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.latest_top_wr {
    margin: 0 -10px 20px;
}

.latest_top_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

/* 하단 레이아웃 */
#ft {

    border-top: 1px solid #353535;
    background: #000000;
    margin: 0 auto;
    text-align: center;
}

#ft h1 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#ft_wr {
    gap: 210px;
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: space-between;
}

/* #ft_wr:after {display:block;visibility:hidden;clear:both;content:""} */
#ft_wr .ft_cnt {
    width: 25%;
    float: left;
    padding: 0 20px;
}

#ft_link {
    text-align: left;
}

#ft_link a {
    display: block;
    color: #fff;
    line-height: 2em;
    font-weight: bold;
}

#ft_company h2 {
    font-size: 1.2em;
    margin-bottom: 20px;
}

#ft_company {
    font-weight: normal;
    color: #e3e3e3;
    line-height: 2em;
}

#ft_catch {
    margin: 20px 0 10px;
}

/* #ft_copy {
    text-align: start;
    margin: 0 auto;
    padding: 20px 0;
    color: rgb(255, 255, 255, 0.6);
    font-size: 0.92em;
    border-top: 1px solid #383838;
    width: 80%;
    font-size: 1rem;
} */
.ft_login_wrap {
    display: flex;
    text-align: start;
    margin: 0 auto;
    padding: 20px 0;
    color: rgb(255, 255, 255, 0.6);
    font-size: 0.92em;
    border-top: 1px solid #383838;
    width: 80%;
    font-size: 1rem;
    justify-content: space-between;
    align-items: center;
}

.ft_login {
    word-break: keep-all;
}

.ft_login a {
    color: #fff;
    font-size: 0.9rem;
}

#top_btn {
    transition: all 0.5s;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border: 2px solid #333;
    color: #333;
    text-align: center;
    font-size: 15px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.5);
}

#top_btn:hover {
    border-color: #13007d;
    background: #13007d;
    color: #fff;
}

#ft .ft_wrap {

    padding: 70px 0 45px 0;
}

#ft_wr .ft_lef ul {
    width: 365px;
    display: flex;
    flex-direction: column;
    gap: 120px;
    justify-content: space-between;
}

#ft_wr .ft_lef ul li {
    padding-bottom: 10px;

}

#ft_wr .ft_lef dl {
    display: flex;

}

#ft_wr .ft_lef dl dt {
    font-weight: 700;
}

#ft_wr .ft_lef dl dt:nth-child(1) {
    font-weight: 700;
    font-size: 32px;
}

#ft_wr .ft_lef dl dd {
    color: rgb(255, 255, 255, 0.6);
}

#ft_wr .ft_rigt ul {
    display: flex;
    gap: 40px;
    text-align: left;
}

#ft_wr .ft_rigt ul li {
    flex: 1;
}

#ft_wr .ft_rigt ul li dl a {
    color: #fff;

}

#ft_wr .ft_rigt {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#ft_wr .ft_rigt ul li dl dt {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #353535;
}

#ft_wr .ft_rigt ul li dl dd {
    padding-bottom: 10px;
    line-height: 24px;
    color: rgb(255, 255, 255, 0.6);
}

.footer_logo h1 {
    font-size: 35px;
    font-weight: 700;
}

/* 푸터-관리자로그인 */
.f_login {
    opacity: 0.2;
    display: flex;
    display: block;
    justify-content: flex-end;
    position: relative;
}

.f_login a {
    color: #fefefe;
    right: 9px;
    top: 0px;
    position: absolute;

}


/* 게시물 선택복사 선택이동 */
#copymove {}

#copymove .win_desc {
    text-align: center;
    display: block;
}

#copymove .tbl_wrap {
    margin: 20px;
}

#copymove .win_btn {
    padding: 0 20px 20px;
}

.copymove_current {
    float: right;
    background: #ff3061;
    padding: 5px;
    color: #fff;
    border-radius: 3px;
}

.copymove_currentbg {
    background: #f4f4f4;
}

/* 화면낭독기 사용자용 */
#hd_login_msg {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.msg_sound_only,
.sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}

/* 본문 바로가기 */
#skip_to_container a {
    z-index: 100000;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#skip_to_container a:focus,
#skip_to_container a:active {
    width: 100%;
    height: 75px;
    background: #21272e;
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 3.3em;
}

/* ie6 이미지 너비 지정 */
.img_fix {
    width: 100%;
    height: auto;
}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {
    display: inline-block;
    position: relative;
}

#captcha legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden;
}

#captcha #captcha_img {
    height: 40px;
    border: 1px solid #898989;
    vertical-align: top;
    padding: 0;
    margin: 0;
}

#captcha #captcha_mp3 {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.png') no-repeat;
    text-indent: -999px;
    border-radius: 3px;
}

#captcha #captcha_reload {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.png') no-repeat 0 -40px;
    text-indent: -999px;
    border-radius: 3px;
}

#captcha #captcha_key {
    margin: 0 0 0 3px;
    padding: 0 5px;
    width: 90px;
    height: 40px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 1.333em;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    vertical-align: top;
}

#captcha #captcha_info {
    display: block;
    margin: 5px 0 0;
    font-size: 0.95em;
    letter-spacing: -0.1em;
}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
/*#captcha.m_captcha audio {
    display: block;
    margin: 0 0 5px;
    width: 187px;
}
*/
#captcha.m_captcha #captcha_img {
    width: 160px;
    height: 60px;
    border: 1px solid #e9e9e9;
    margin-bottom: 3px;
    margin-top: 5px;
    display: block;
}

#captcha.m_captcha #captcha_reload {
    position: static;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.png') no-repeat 0 -40px;
    text-indent: -999px;
}

#captcha.m_captcha #captcha_reload span {
    display: none;
}

#captcha.m_captcha #captcha_key {
    margin: 0;
    padding: 0 5px;
    width: 115px;
    height: 29px;
    border: 1px solid #b8c9c2;
    background: #f7f7f7;
    font-size: 1.333em;
    font-weight: bold;
    text-align: center;
    line-height: 29px;
    margin-left: 3px;
}

#captcha.m_captcha #captcha_info {
    display: block;
    margin: 5px 0 0;
    font-size: 0.95em;
    letter-spacing: -0.1em;
}

#captcha.m_captcha #captcha_mp3 {
    width: 31px;
    height: 31px;
    background: url('../../../img/captcha2.png') no-repeat 0 0;
    vertical-align: top;
    overflow: hidden;
    cursor: pointer;
    text-indent: -9999px;
    border: none;
}

/* ckeditor 단축키 */
.cke_sc {
    margin: 0 0 15px;
    text-align: right;
}

.btn_cke_sc {
    display: none;
    padding: 0 10px;
    height: 30px;
    border: 1px solid #ccc;
    background: #fafafa;
    color: #000;
    text-decoration: none;
    line-height: 1.9em;
    vertical-align: middle;
    cursor: pointer;
}

.cke_sc_def {
    margin: 0 0 5px;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    text-align: center;
}

.cke_sc_def dl {
    margin: 0 0 5px;
    text-align: left;
    zoom: 1;
}

.cke_sc_def dl:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.cke_sc_def dt,
.cke_sc_def dd {
    float: left;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #e9e9e9;
}

.cke_sc_def dt {
    width: 20%;
    font-weight: bold;
}

.cke_sc_def dd {
    width: 30%;
}

/* ckeditor 태그 기본값 */
#bo_v_con ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

#bo_v_con ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

#bo_v_con li {
    display: list-item;
}

/* 버튼 */
a.btn,
.btn {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
    text-align: center;
    font-weight: bold;
    border: 0;
    font-size: 1.4em;
    -webkit-transition: background-color 0.3s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
}

a.btn01 {
    display: inline-block;
    padding: 7px;
    border: 1px solid #ccc;
    background: #fafafa;
    color: #000;
    text-decoration: none;
    vertical-align: middle;
}

a.btn01:focus,
a.btn01:hover {
    text-decoration: none;
}

button.btn01 {
    display: inline-block;
    margin: 0;
    padding: 7px;
    border: 1px solid #ccc;
    background: #fafafa;
    color: #000;
    text-decoration: none;
}

a.btn02 {
    display: inline-block;
    padding: 7px;
    border: 1px solid #3b3c3f;
    background: #4b545e;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
}

a.btn02:focus,
.btn02:hover {
    text-decoration: none;
}

button.btn02 {
    display: inline-block;
    margin: 0;
    padding: 7px;
    border: 1px solid #3b3c3f;
    background: #4b545e;
    color: #fff;
    text-decoration: none;
}

.btn_confirm {
    padding: 40px 0;
    text-align: center;
}

/* 서식단계 진행 */

.btn_submit {
    border: 0;
    background: #416EF2;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
}

.btn_submit:hover {
    background: #416EF2;
}

.btn_close {
    border: 1px solid #dcdcdc;
    cursor: pointer;
    border-radius: 3px;
    background: #fff;
}

a.btn_close {
    text-align: center;
    line-height: 50px;
}

a.btn_cancel {
    border: 2px solid #6781ef;
    display: inline-block;
    color: #6781ef;
    text-decoration: none;
    vertical-align: middle;
}
button.btn_cancel {
    display: inline-block;
    background: #969696;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
}

.btn_cancel:hover {
    background: #aaa;
}

a.btn_frmline,
button.btn_frmline {
    display: inline-block;
    width: 128px;
    padding: 0 5px;
    height: 40px;
    border: 0;
    background: #434a54;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    vertical-align: top;
}

/* 우편번호검색버튼 등 */
a.btn_frmline {}

button.btn_frmline {
    font-size: 14px;
}

/* 게시판용 버튼 */
a.btn_b01,
.btn_b01 {
    font-size: 16px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
    border: 0;
    background: transparent;
}

.btn_b01:hover,
.btn_b01:hover {
    font-size: 16px;
    color: #fff;
}

a.btn_b02,
.btn_b02 {
    display: inline-block;
    background: #253dbe;
    padding: 0 10px;
    color: #fff;
    text-decoration: none;
    border: 0;
    vertical-align: middle;
}

a.btn_b02:hover,
.btn_b02:hover {
    background: #0025eb;
}

a.btn_b03,
.btn_b03 {
    display: inline-block;
    background: #fff;
    border: 1px solid #b9bdd3;
    color: #646982;
    text-decoration: none;
    vertical-align: middle;
}

a.btn_b03:hover,
.btn_b03:hover {
    background: #ebedf6;
}

a.btn_b04,
.btn_b04 {
    display: inline-block;
    background: #fff;
    border: 1px solid #ccc;
    color: #707070;
    text-decoration: none;
    vertical-align: middle;
}

a.btn_b04:hover,
.btn_b04:hover {
    color: #333;
    background: #f9f9f9;
}

a.btn_admin,
.btn_admin {
    font-size: 16px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
}

/* 관리자 전용 버튼 */


#bo_list_total {
    float: left;
    line-height: 34px;
    font-size: 1rem;
    color: #4e546f;
}

#bo_list_total span {
    color: #13007d;
    font-weight: 900;
}

.more_opt {

    padding: 9px 0;
    padding-right: 14px;
    border-radius: 10px;
    height: auto;
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    background: #416EF2;
    z-index: 999;
}

.more_opt li button,
.more_opt li a {
    width: 100%;
    border: 0;
    background: #13007d;
    color: rgb(255, 255, 255, 0.9);
}

.more_opt li {
    padding: 0 5px;
    float: inherit;
    width: 77px;
    margin: 0;
    color: #6b757c;
    text-align: left;
}

.more_opt li:hover a,
.more_opt li:hover button {
    color: #fff;
}

#bo_list tbody tr:hover {
    border-left: 3px solid #13007d;
}

#bo_btn_top {
    margin: 40px 0 20px 0;
    padding-bottom: 20px;
}

.btn_b01 {
    color: #fff;
}

.btn_bo_user li {
    float: left;
    text-align: center;
    margin-left: 10px;
    background: #416EF2;
    padding: 2px 10px;
    border-radius: 50px;
}

.board_view_info {
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 10px;
    height: 50px;
}

.board_view_info_left {
    float: left;
}

.board_view_info_div {
    float: left;
    margin: 3px;
    font-size: 15px;
}

.board_view_info_div b {
    color: #333;
    font-weight: 400;
}

.board_view_info_div span {
    color: #333;
    padding: 0 10px;
}

.board_view_info_right {
    float: right;
}

.board_view_info_div {
    float: left;
    margin: 3px;
    font-size: 15px;
}

.bo_v_nb {
    font-size: 1rem;
    position: relative;
    margin: 20px 0;
    clear: both;
    text-align: left;

}

#bo_v_atc {
    min-height: 200px;
    height: auto !important;
    height: 200px;
    text-align: center;
    font-size: 1rem;
}

.nb_tit {}

#bo_v_title {
    display: block;
    font-size: 1.8rem;
    word-break: break-all;
    text-align: center;
    padding: 20px 0;
    border-top: 2px solid #000;
    margin-top: 80px;
}

.more_opt li button,
.more_opt li a {
    width: 100%;
    /* border-bottom: 1px solid #fff; */
    margin-bottom: 2px;
    background: none;
    color: rgb(255, 255, 255, 0.9);
    padding: 2px;
    font-size: 0.85rem;
}

.more_opt li button:nth-child(3) {
    border: none;
}

#bo_gall .gall_text_href a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

/* 기본테이블 */
.tbl_wrap table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0 5px;
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.tbl_wrap caption {
    padding: 10px 0;
    font-weight: bold;
    text-align: left;
}

.tbl_head01 {
    margin: 0 0 10px;
}

.tbl_head01 caption {
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.tbl_head01 thead th {
    font-size: 1.2rem;
    padding: 35px 20px;
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid #ececec;
    height: 40px;
}

.tbl_head01 thead th input {
    vertical-align: top;
}

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th,
.tbl_head01 tfoot td {
    padding: 10px 0;
    border-top: 1px solid #c1d1d5;
    border-bottom: 1px solid #c1d1d5;
    background: #d7e0e2;
    text-align: center;
}

.tbl_head01 tbody th {
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.tbl_head01 td {
    font-size: 18px;
    color: #666;
    padding: 24px 5px;
    border-top: 1px solid #ecf0f1;
    border-bottom: 1px solid #ecf0f1;
    line-height: 1.4em;
    height: 80px;
    word-break: break-all;
}

.tbl_head01 tbody tr:hover td {
    background: #fafafa;
}

.tbl_head01 a:hover {
    text-decoration: underline;
}

.tbl_head01 .col_number {
    width: 10%;
}

.tbl_head01 .col_title {
    width: 70%;
}

.tbl_head01 .col_writer {
    width: 15%;
}

/* .tbl_head01 .col_view { width: 10%;} */
.tbl_head01 .col_date {
    width: 15%;
}

thead.list_th {
    background: none;
    
}

tbody.list_body {
 
}

.tbl_head02 {
    margin: 0 0 10px;
}

.tbl_head02 caption {
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.tbl_head02 thead th {
    padding: 5px 0;
    border-top: 1px solid #d1dee2;
    border-bottom: 1px solid #d1dee2;
    background: #e5ecef;
    color: #383838;
    font-size: 0.95em;
    text-align: center;
    letter-spacing: -0.1em;
}

.tbl_head02 thead a {
    color: #383838;
}

.tbl_head02 thead th input {
    vertical-align: top;
}

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th,
.tbl_head02 tfoot td {
    padding: 10px 0;
    border-top: 1px solid #c1d1d5;
    border-bottom: 1px solid #c1d1d5;
    background: #d7e0e2;
    text-align: center;
}

.tbl_head02 tbody th {
    padding: 5px 0;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
}

.tbl_head02 td {
    padding: 5px 3px;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
    line-height: 1.4em;
    word-break: break-all;
}

.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {
    margin: 0 0 20px;
}

.tbl_frm01 table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.tbl_frm01 th {
    width: 70px;
    padding: 7px 13px;
    border: 1px solid #e9e9e9;
    border-left: 0;
    background: #f5f8f9;
    text-align: left;
}

.tbl_frm01 td {
    padding: 7px 10px;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: transparent;
}

.wr_content textarea,
.tbl_frm01 textarea,
.form_01 textarea,
.frm_input {
    border: 1px solid #d0d3db;
    background: #fff;
    color: #000;
    vertical-align: middle;
    border-radius: 3px;
    padding: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tbl_frm01 textarea {
    padding: 2px 2px 3px;
}

.frm_input {
    height: 40px;
}

.full_input {
    width: 100%;
}

.half_input {
    width: 49.5%;
}

.twopart_input {
    width: 385px;
    margin-right: 10px;
}

.tbl_frm01 textarea,
.write_div textarea {
    width: 100%;
    height: 100px;
}

.tbl_frm01 a {
    text-decoration: none;
}

.tbl_frm01 .frm_file {
    display: block;
    margin-bottom: 5px;
}

.tbl_frm01 .frm_info {
    display: block;
    padding: 0 0 5px;
    line-height: 1.4em;
}

/*기본 리스트*/
.list_01 ul {
    border-top: 1px solid #ececec;
}

.list_01 li {
    border-bottom: 1px solid #ececec;
    background: #fff;
    padding: 10px 15px;
    list-style: none;
    position: relative;
}

.list_01 li:nth-child(odd) {
    background: #f6f6f6;
}

.list_01 li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.list_01 li:hover {
    background: #f9f9f9;
}

.list_01 li.empty_li {
    text-align: center;
    padding: 20px 0;
    color: #666;
}

/*폼 리스트*/

.form_01 {
    width: 100%;
    font-size: 14px;
    margin: 0 auto;
}

.form_01 h2 {
    font-size: 1.167em;
}

.form_01 li {
    margin-bottom: 10px;
}

.form_01 ul:after,
.form_01 li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.form_01 .left_input {
    float: left;
}

.form_01 .margin_input {
    margin-right: 1%;
}

.form_01 textarea {
    height: 100px;
    width: 100%;
}

.form_01 .frm_label {
    display: inline-block;
    width: 130px;
}

/* 자료 없는 목록 */
.empty_table {
    padding: 50px 0 !important;
    text-align: center;
}

.empty_list {
    padding: 20px 0 !important;
    color: #666;
    text-align: center;
}

/* 필수입력 */
.required,
textarea.required {
    font-size: 14px;
    background-image: url('../img/require.png') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
}

/* 테이블 항목별 정의 */
.td_board {
    width: 80px;
    text-align: center;
}

.td_category {
    width: 80px;
    text-align: center;
}

.td_chk {
    width: 30px;
    text-align: center;
}

.td_date {
    width: 60px;
    text-align: center;
}

.td_datetime {
    width: 110px;
    text-align: center;
}

.td_group {
    width: 80px;
    text-align: center;
}

.td_mb_id {
    width: 100px;
    text-align: center;
}

.td_mng {
    width: 80px;
    text-align: center;
}

.td_name {
    width: 100px;
    text-align: left;
}

.td_nick {
    width: 100px;
    text-align: center;
}

.td_num {
    width: 50px;
    text-align: center;
}

.td_numbig {
    width: 80px;
    text-align: center;
}

.td_stat {
    width: 60px;
    text-align: center;
}

.txt_active {
    color: #5d910b;
}

.txt_done {
    color: #e8180c;
}

.txt_expired {
    color: #ccc;
}

.txt_rdy {
    color: #8abc2a;
}

/* 새창 기본 스타일 */
.new_win {
    position: relative;
}

.new_win .tbl_wrap {
    margin: 0 20px;
}

.new_win #win_title {
    font-size: 1.3em;
    height: 50px;
    line-height: 30px;
    padding: 10px 20px;
    background: #fff;
    color: #000;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.new_win #win_title .sv {
    font-size: 0.75em;
    line-height: 1.2em;
}

.new_win .win_ul {
    margin-bottom: 15px;
    padding: 0 20px;
}

.new_win .win_ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.new_win .win_ul li {
    float: left;
    background: #fff;
    text-align: center;
    padding: 0 10px;
    border: 1px solid #d6e9ff;
    border-radius: 30px;
    margin-left: 5px;
}

.new_win .win_ul li:first-child {
    margin-left: 0;
}

.new_win .win_ul li a {
    display: block;
    padding: 8px 0;
    color: #6794d3;
}

.new_win .win_ul .selected {
    background: #3a8afd;
    border-color: #3a8afd;
    position: relative;
    z-index: 5;
}

.new_win .win_ul .selected a {
    color: #fff;
    font-weight: bold;
}

.new_win .win_desc {
    position: relative;
    margin: 10px;
    border-radius: 5px;
    font-size: 1em;
    background: #f2838f;
    color: #fff;
    line-height: 50px;
    text-align: left;
    padding: 0 20px;
}

.new_win .win_desc i {
    font-size: 1.2em;
    vertical-align: baseline;
}

.new_win .win_desc:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 50px;
    background: #da4453;
    border-radius: 3px 0 0 3px;
}

.new_win .frm_info {
    font-size: 0.92em;
    color: #919191;
}

.new_win .win_total {
    float: right;
    display: inline-block;
    line-height: 30px;
    font-weight: normal;
    font-size: 0.75em;
    color: #3a8afd;
    background: #f6f6f6;
    padding: 0 10px;
    border-radius: 5px;
}

.new_win .new_win_con {
    margin: 20px 0;
    padding: 20px;
}

.new_win .new_win_con:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.new_win .new_win_con2 {
    margin: 20px 0;
}

.new_win .btn_confirm:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.new_win .win_btn {
    text-align: center;
}

.new_win .cert_btn {
    margin-bottom: 30px;
    text-align: center;
}

.new_win .btn_close {
    padding: 0 20px;
    height: 45px;
    overflow: hidden;
    cursor: pointer;
}

.new_win .btn_submit {
    padding: 0 20px;
    height: 45px;
    font-weight: bold;
    font-size: 1.083em;
}

/* 검색결과 색상 */
.sch_word {
    color: #fff;
    background: #ff005a;
    padding: 2px 5px 3px;
    line-height: 18px;
    margin: 0 2px;
}

/* 자바스크립트 alert 대안 */
#validation_check {
    margin: 100px auto;
    width: 500px;
}

#validation_check h1 {
    margin-bottom: 20px;
    font-size: 1.3em;
}

#validation_check p {
    margin-bottom: 20px;
    padding: 30px 20px;
    border: 1px solid #e9e9e9;
    background: #fff;
}

/* 사이드뷰 */
.sv_wrap {
    position: relative;
    font-weight: normal;
}

.sv_wrap .sv {
    z-index: 1000;
    display: none;
    margin: 5px 0 0;
    font-size: 0.92em;
    background: #333;
    -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
}

.sv_wrap .sv:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #333 transparent;
}

.sv_wrap .sv a {
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    line-height: 30px;
    width: 100px;
    font-weight: normal;
    color: #bbb;
}

.sv_wrap .sv a:hover {
    background: #000;
    color: #fff;
}

.sv_member {
    color: #333;
}

.sv_on {
    display: block !important;
    position: absolute;
    top: 23px;
    left: 0px;
    width: auto;
    height: auto;
}

.sv_nojs .sv {
    display: block;
}

/* 페이징 */
.pg_wrap {
    clear: both;
    margin: 30px 0;
    text-align: center;
}

.pg_wrap:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.pg {
    text-align: center;
}

.pg_page,
.pg_current {
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #eee;
}

.pg a:focus,
.pg a:hover {
    text-decoration: none;
}

.pg_page {
    color: #959595;
    font-size: 1.083em;
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
    min-width: 30px;
    text-decoration: none;
    border-radius: 30px;
}

.pg_page:hover {
    background-color: #fff;
}

.pg_start {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_first.gif') no-repeat 50% 50% #fff;
    padding: 0;
    border: 1px solid #eee;
}

.pg_prev {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_prev.gif') no-repeat 50% 50% #fff;
    padding: 0;
    border: 1px solid #eee;
}

.pg_end {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_end.gif') no-repeat 50% 50% #fff;
    padding: 0;
    border: 1px solid #eee;
}

.pg_next {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_next.gif') no-repeat 50% 50% #fff;
    padding: 0;
    border: 1px solid #eee;
}

.pg_start:hover,
.pg_prev:hover,
.pg_end:hover,
.pg_next:hover {
    background-color: #fff;
}

.pg_current {
    display: inline-block;
    background: #416EF2;
    border: 1px solid #416EF2;
    color: #fff;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    min-width: 30px;
    border-radius: 30px;
}

/* cheditor 이슈 */
.cheditor-popup-window *,
.cheditor-popup-window :after,
.cheditor-popup-window :before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* Mobile화면으로 */
#device_change {
    display: block;
    margin: 0.3em;
    padding: 0.5em 0;
    border: 1px solid #eee;
    border-radius: 2em;
    background: #fff;
    color: #000;
    font-size: 2em;
    text-decoration: none;
    text-align: center;
}

/* common */


.dim {
    z-index: 99999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
}

.mgnb_wrap {
    z-index: 999999;
    position: fixed;
    right: -100%;
    top: 0;
    width: 70%;
    height: 100%;
    background: #fff;
    padding: 100px 20px 50px;
}

.mgnb>li {
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.mdepth2 {
    padding: 10px 0 0 40px;
}

.mdepth2>li a {
    color: #666;
    font-size: 14px;
}

.mdepth2>li {
    position: relative;
}

.mdepth2>li:before {
    content: '';
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
    position: absolute;
    left: -13px;
    top: 10px;
}

.mgnb_close {
    background-size: 25px;
    position: absolute;
    right: 7%;
    top: 2.5%;
    background: url('/img/mgnb_close.svg') no-repeat center;
    color: #fff;
    font-size: 0;
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.mbnb_logo {
    text-align: center;
}

.mgnb_login {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
}

.mgnb_login a {
    padding-right: 5px;
}

.ham {
    display: none;
    cursor: pointer;
}

.ham img {
    height: 40px;
    width: 100%;
    display: block;
}

.s_inner {
    width: 80%;
    margin: 0 auto;
}

.s_txt {
    text-align: center;
    padding: 50px;
}

.s_txt h2 {
    font-size: 1.5rem;
}

h3 {
    position: relative;
    font-size: 1rem;
    padding-bottom: 10px;
    color: #181818;
}

.h3_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 160px;
    margin: 0 auto;
}

.h3_wrap img {
    width: 10%;
    display: block;
}

/* .s_txt h3::after { content: ''; display: block; border-radius: 50%; width: 20px; height: 20px; background: #ED1B23; position: absolute; left:0; top: 0; transform: translate(-50%); } */

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 4;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

/* hd_wrapper */
#hd {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
    box-shadow: 0 2px 1px -1px rgb(128, 128, 128, 0.3);
}

#hd .hd_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    padding: 15px 0;
}

#hd h1 img {
    object-fit: contain;
    height: 30px;
    display: block;
    width: 100%;
}

#hd .gnb {
    display: flex;
}

#hd .gnb>li {
    position: relative;
}

/* 모바일버전 */
#device_change {
    display: block;
    margin: 0.3em;
    padding: 0.5em 0;
    border: 1px solid #eee;
    border-radius: 2em;
    background: #fff;
    color: #000;
    font-size: 2em;
    text-decoration: none;
    text-align: center;
}

/* common */


.dim {
    z-index: 99999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
}

.mgnb_wrap {
    z-index: 999999;
    position: fixed;
    right: -100%;
    top: 0;
    width: 45%;
    height: 100%;
    background: #fff;
    padding: 100px 20px 50px;
}

.mgnb>li {
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.mdepth2 {
    padding: 10px 0 0 30px;
}

.mdepth2>li a {
    color: #666;
    font-size: 14px;
}

.mdepth2>li {
    position: relative;
}

.mdepth2>li:before {
    content: '';
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
    position: absolute;
    left: -13px;
    top: 10px;
}

.mgnb_close {
    background-size: 25px;
    position: absolute;
    right: 7%;
    top: 2.5%;
    background: url('/img/mgnb_close.svg') no-repeat center;
    color: #fff;
    font-size: 0;
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.mbnb_logo {
    text-align: center;
}

.mgnb_login {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
}

.mgnb_login a {
    padding-right: 5px;
}

.ham {
    display: none;
    cursor: pointer;
}

.ham img {
    height: 40px;
    width: 100%;
    display: block;
}

/* #hd .gnb { display: flex; }
#hd .gnb > li { position: relative; }
#hd .gnb > li > a { display: block; padding: 10px 30px; font-size: 1.2rem; color: #121212; font-weight: 500; }

#hd .gnb > li .depth2 {  display: none; position: absolute; left: 0;  width: 160px; background: #eee; padding: 20px 0; }
#hd .gnb > li:hover .depth2 li a { text-align: center; font-size: 1.0rem; display: block; padding: 10px 0; transition: all 0.5s; font-weight: 500; }
#hd .gnb > li:hover .depth2 li a:hover { background: #13007D; color: #fff; }

#hd .gnb > li:hover .depth2 { display: block; } */

#hd .gnb {
    font-weight: 500;
    display: flex;

}

#hd .gnb>li {
    position: relative;
}

#hd .gnb>li>a:hover {
    color: #416EF2;
}

#hd .gnb>li:last-child {
    padding-right: 0;
}

#hd .gnb>li>a {
    display: block;
    padding: 20px 40px 15px;
    font-size: 18px;
    font-weight: 500;
}


#hd .gnb .depth2 {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    opacity: 1;
    position: absolute;
    top: 65px;
    left: 0px;
    z-index: 99;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px 0;
    font-weight: 500;
}

/* #hd .gnb .depth2 li { float: left; } */
#hd .gnb>li:nth-child(1) .depth2 {
    right: 0;
}

#hd .gnb>li:nth-child(3) .depth2 {
    right: 0;
    border: none;
}

#hd .gnb>li:nth-child(2) .depth2 {
    right: 0;
}

#hd .gnb .depth2 li {}

#hd .gnb .depth2 li a {
    display: block;
    padding: 10px 5px;
    color: #616161;
    transition: color 0.5s;
    font-size: 16px;

}

#hd .gnb .depth2 li a:hover {
    color: #416EF2;
}


/* #hd .ham { display: block; cursor: pointer; width: 24px; height: 18px; background: url('../images/ham.svg') no-repeat center; border: 0; font-size: 0; } */

#hd .depth2_bg {
    width: 40%;
    height: 150px;
    background-color: #ffffff;
    position: absolute;
    right: 0;
    top: 84px;
    z-index: 98;
}


h3.main_h3 {
    font-size: 2rem;
    color: #000;
}

#supp h3.main_h3 {
    color: #fff;
}

/* 어바웃태광 */

.about {
    position: relative;
    width: 80%;
    max-width: 1720px;
    margin: 150px auto;
}


/*모달창*/


.list_link{
    display: flex;
    justify-content: space-between;
}


:root {
    /* 왼쪽 탭 폭 */
    --tabs-w: 250px;
    --panel-w: 360px;
    --blue: #416EF2;
    --text: #333;
    --muted: #9aa0a6;
    --line: #ececef;
    --divider: #e6e6ea;
    --card-w: 920px;
    --radius: 18px;
}

* {
    box-sizing: border-box
}

/* ---- 카드 컨테이너 ---- */
.modal-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: #00000020;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.modal-container:has(.is-active) {
    visibility: visible;
    pointer-events: all;
    user-select: inherit;
}

.brand-modal {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.brand-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    overflow: hidden;
    display: grid;
    grid-template-columns: var(--tabs-w) 1px var(--panel-w);
    height: 460px;
}

/* 닫기 버튼(검은 원+흰 X) */
.brand-close {
    z-index: 88;
    position: absolute;
    top: 12px;
    right: 13px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #333;
    color: #fff;
    font-size: 17px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* ---- 좌측 탭 ---- */
.brand-tabs {
    padding: 30px 34px 18px;
}

.brand-tab {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 2px 5px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    position: relative;
}

.brand-tab .chev {
    font-family: 'NanumSquare';
    font-weight: 500;
    font-size: 20px;
    color: #c3c6cc;
}

.brand-tab.is-active {
    color: var(--blue);
}

.brand-tab.is-active .chev {
    font-weight: 600;
    color: var(--blue);
}

/* 파란 밑줄(탭 하단 좌측에만 짧게) */
.brand-tab.is-active::after {
    background: #416EF2;
    content: "";
    position: absolute;
    left: 0px;
    bottom: -1.5px;
    width: 72px;
    height: 2px;
}

/* 가운데 1px 구분선 */
.brand-divider {
    background: var(--divider);
    margin: 30px 0;
    width: 1px;
}


/* ---- 우측 패널 ---- */
.brand-panels {
    display: block;
    position: relative;
    background: #fff;
}


.brand-panel {
    display: none;
}

.brand-panel.is-active {
    display: block;
}

/* 우측 리스트(연한 줄) */
.brand-list {
    list-style: none;
    margin: 0;
    padding: 42px 20px 20px;
}

.brand-list li:nth-last-child(1) {
    border: none;
}

.brand-list li {
    padding: 14px 6px;
    font-size: 16.5px;
    border-bottom: 1px solid var(--line);
    color: #c3c6cc;
}

.label {
    line-height: 1.9rem;
    font-size: 16px;
    align-items: center;
    height: 30px;
}

.label img {
    width: 100%;
}



.text_area h1 {
    font-size: 40px;
    margin-bottom: 20px;
}

.text_area p {
    line-height: 1.7rem;
    font-size: 22px;
    font-weight: 500;
}

.about_box {
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.img_wrap {
    width: 34%;
    overflow: hidden;
    border-radius: 15px;
}

.img_wrap img {
    object-fit: cover;
    height: 100%;
    width: 100%;

}

/* .content_bgbox{
    background-size: cover;
    background-image: url(../img/history_bg.png);
    background-position:90% 40%;
    background-repeat: no-repeat;


} */
.content {
    margin: 80px auto;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    width: 80%;
}

.content_text {
    margin-bottom: 80px;
    text-align: right;
}

.content_text p span {
    font-family: 'Pretendard', sans-serif;
    color: #416EF2;
    font-size: 44px;
    font-weight: 700;

}

.content_text p {
    padding-top: 10px;
    font-size: 40px;
    font-weight: 700;
}

.logos ul {
    justify-content: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.logos ul li {
    background-color: #F6F9FF;
    border-radius: 20px;
    justify-content: center;
    display: flex;
    width: 23%;
    height: 120px;
    box-sizing: border-box;
}

.logos ul li a {
    gap: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
}

.logos .word img {
    width: 100%;
    max-width: 150px;
    object-fit: contain;
    height: 70px;
}

.plus {
    width: 18px;
    height: 18px;
}

.plus img {
    width: 100%;
    height: 100%;
}

.partner {
    width: 80%;
    max-width: 1720px;
    margin: 150px auto;
}

.history {
    margin: 50px 0;
}

.history ul {
    display: flex;
    gap: 30px;
    justify-content: space-between;
}

.history ul li {
    width: 30%;
    position: relative;
}

.text_box {
    width: 83%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}

.toptext {
    font-size: 22px;
    padding-bottom: 20px;
    margin-bottom: 45px;
    border-bottom: 0.3px solid #919191;
}

.bottomtext {
    font-size: 20px;
}

.toptext span {
    font-size: 80px;
    font-weight: 500;
}


/* 오시는길 */
.map {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}

.map2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.map_h1 {
    font-weight: 700;
    padding-right: 10px;
}

.iframe {
    padding: 30px 0 20px 0;
}

.iframe iframe {
    width: 100%;
    border-radius: 15px;
}

.location {

    font-size: 20px;
    margin: 55px 0;
}

.location p {
    font-weight: 400;
    line-height: 1.7rem;
    word-break: keep-all;
}

.location_img img {
    width: 100%;
}

.location_img {
    width: 38px;
    height: 38px;
}

.location p span {
    font-weight: 700;
    padding-right: 10px;
}

.location_head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location_head p {
    font-size: 22px;
    font-weight: 700;
}

.taekwang {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.taekwang2 {
    gap: 100px;
}

.taekwang>li {
    flex: 1;
}

.map_text {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 견적확인서 */
.pro_bg {
    background-image: url(../img/footer_img.png);
    background-repeat: no-repeat;
    background-position: right 0 top -250px;
    border-radius: 3.5rem 3.5rem 0 0;
    background-color: #000000;
}

.project {
    color: #fff;
    padding: 150px 0;
    width: 80%;
    margin: 150px auto 0;
}

.project_text {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.project h1 {
    line-height: 3.5rem;
    font-size: 40px;
}

.project_text .text2 p {
    word-break: keep-all;
    font-size: 18px;
    font-weight: 200;
    line-height: 1.7rem;
}

.project_btn a {
    margin-top: 80px;
    background-color: #416EF2;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    display: inline-block;
    padding: 18px;
    border-radius: 30px;
}







/* supp */
#supp {
    background: url('/img/cus_bg.png') no-repeat center / cover;
    padding-bottom: 100px;
}

#supp .s_txt {
    padding: 50px 0 20px;
    color: #fff;
}

/* #supp ul { display: flex; gap: 20px; width: 100%;} */
#supp ul.supp_ul {
    display: grid;
    gap: 80px;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
}

#supp ul.supp_ul>li {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-sizing: border-box;
    min-width: 0;
}

#supp ul.supp_ul>li h4 {
    font-weight: 600;
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
}

/* business */
#business .business_inner {
    width: 80%;
    margin: 0 auto;
}

#business .business_inner .bus_h2 {
    padding: 50px 0;
    text-align: center;
    color: #13007d;
    font-size: 1.5rem;
    font-weight: 700;
}

#business .business_inner ul {
    word-break: keep-all;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 50px;
}

#business .business_inner ul li {
    float: left;
    width: calc((100% - 240px) / 5);
    height: 211px;
    border: 2px solid #13007d;
    padding: 35px 0 0;
    /* margin: 6px; */
    text-align: center;
    border-radius: 20px;
    padding: 20px;
}

#business .business_inner ul .img {
    display: block;
    margin-bottom: 20px;
}

#business1 .business1_inner {
    width: 80%;
    margin: 0 auto;
}

#business1 .bus_wrap {
    padding: 50px 0;
    display: flex;
    justify-content: space-between;
}

#business1 .bus_wrap .bus_tit {
    width: 30%;
}

#business1 .bus_wrap .bus_tit h4 {
    width: 80%;
    font-size: 1.8rem;
    word-break: keep-all;
}

#business1 .bus_wrap ul.bus_block {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    width: 70%;
}

#business1 .bus_wrap ul.bus_block li {
    padding: 25px;
    border: 2px solid rgb(51, 51, 51, 0.3);
    width: calc((100% - 20px) / 2);
}

#business1 .bus_wrap ul.bus_block li dl dt {
    word-break: keep-all;
    padding-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 700;
}

#business1 .bus_wrap ul.bus_block li dl dd {
    word-break: keep-all;
    padding-bottom: 3px;
    font-size: 1.1rem;
    font-weight: 400;
}

.root_daum_roughmap .wrap_btn_zoom {
    z-index: 1 !important;
}

#story dl dt br {
    display: none;
}

/*견적문의*/

.info_quote {
    margin: 80px 0;
    display: flex;
    justify-content: center;
}


.search {
    width: 95%;
    display: flex;
    justify-content: end;
}

.search-box {
    display: flex;
    align-items: center;
    background: #f0f8ff;
    border-radius: 45px;
    padding: 18px 30px;
    width: 340px;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 18px;
    color: #333;
}

.search-box input::placeholder {
    color: #888;
}

.search-btn {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: #555;
}

/* 게시판 */
.board-list {
    text-align: center;
    width: 90%;
    margin: 32px auto;
    font-size: 24px;
    color: #333;
}


.board-list ul {
    display: flex;
    margin: 0;
    list-style: none;
}

.board-header {
    font-weight: 700;
    border-bottom: 1px solid #000000;
    background: #fff;
}

.board-header li {
    padding: 30px 0;
}

.board-header li:nth-child(2) {
    text-align: center;
}

.board-row li:nth-child(2) {
    padding-left: 30px;
}

.board-row:hover {
    background: #fafafa;
}

.board-row {
    align-items: center;
}

.board-row li {
    padding: 30px 0;
    font-size: 20px;
    font-weight: 400;
    border-bottom: 1px solid #eeeeee;
}

/* 열 비율 */
.col-no {
    width: 124px;
    flex-shrink: 0;
}

.col-date {
    width: 120px;
}

.col-writer {
    width: 140px;
}

.col-status {
    width: 140px;
    flex-shrink: 0;
    text-align: center;
}

.col-title {
    flex: 1;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*상태버튼*/
.button {
    padding: 12px 20px;
    background: #256aff;
    color: #fff;
    border-radius: 90px;
    font-size: 16px;
}

/*견적문의버튼*/
.quote-box {
    width: 94%;
    display: flex;
    justify-content: end;
}

.quote-btn {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 6px;
    padding: 14px 32px;
    font-size: 20px;
    color: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 999px;
    background: #fff;
    transition: all 0.2s ease;
}

.quote-btn:hover {
    background: #2563eb;
    color: #fff;
}

/*페이지버튼*/
.board-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* 좌-중앙-우 */
    align-items: center;
    padding: 100px 70px;
    gap: 16px;
}

.board-controls .pagination {
    justify-content: center;
}

.pagination {
    display: flex;
    gap: 10px;
}

.page-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
    font-size: 18px;
}

.page-item:hover {
    border-color: #2563eb;
}

.page-item.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/*사업자*/
.certificate {
    width: 80%;
    margin: 150px auto;
}

.info_certificate {
    padding-bottom: 50px;
}

.certificate_img {
    width: 100%;
}

.certificate_img img {
    width: 50%;
}

.top1 {
    display: flex;
    justify-content: space-between;
}

.logos ul li {
    width: calc((100% - 45px)/3);
}

/*제품안내*/
.about_box1 {
    width: 80%;
    margin: 0 auto;
    padding: 150px 0;
    flex-direction: row-reverse;
}

.content_text2 {
    text-align: left;
}

.content2 {
    width: 100%;
}

.logos2 ul {
    width: 100%;
    justify-content: flex-start;
}

.logos2 ul li {
    width: calc((100% - 45px)/3);
}

.chain {
    margin-bottom: 100px;
}


/*경영이념*/
.value_content {
    width: 80%;
    margin: 100px auto 180px;
}

.value_img1 {
    object-fit: contain;
}

.value_img1 img {
    width: 100%;

}

.info_head2 {
    margin: 170px 0 40px 0;
}

.info_head p {
    font-weight: 600;
    line-height: 45px;
    font-size: 32px;
    margin: 50px 0;
}

.infohead_text p {
    line-height: 1.8rem;
    font-size: 20px;
    font-weight: 400;
    word-break: keep-all;
}

.core_img {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.core_img img {
    width: 100%;
}

.core_img li {
    color: #fff;
    position: relative;
    width: calc((100% / 3));
}

.font1 {
    opacity: 0.7;
    font-size: 20px;
    font-weight: 500;
    font-family: "Rajdhani", sans-serif;
}

.font2 {
    font-size: 40px;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
}

.core_word {
    position: absolute;
    bottom: 45px;
    left: 45px;
}

.infohead_text2 p {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 400;
}





/*레퍼런스*/
.info_head3 {
    width: 80%;
    margin: 100px auto 40px;
}

.panel-head h3,
.panel-head .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.25s ease;
}



.case-card:hover .panel-head h3,
.case-card:hover .panel-head .desc {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.panel-body::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: #4690ff;
    margin: 30px 0 20px;
}

.cases {
    width: 82%;
    margin: 0 auto;
    padding: 36px 20px 150px;
}

.cases-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width:1100px) {
    .cases-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:1440px) {
    .cases-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}






.case-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;

}


.thumb {
    aspect-ratio: 16/20;
    background: #f3f4f6;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.case-card {
    --panel-min: 120px;
    --panel-max: 100%;
}

.panel {
    padding: 20px 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--panel-max);
    background: #fff;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    /* 평상시에는 아래로 내린 상태: 전체높이 - 보이는 높이 만큼 */
    transform: translateY(calc(100% - var(--panel-min)));
    transition: transform .35s ease, box-shadow .25s ease;
    box-shadow: 0 -10px 24px rgba(17, 24, 39, .05);
}

.case-card:hover .panel {
    transform: translateY(0);
    /* 위로 슬라이드 */
}

/* 패널 내부 텍스트 */
.panel-head {
    color: #333333;
    padding: 16px 18px 10px;

}

.panel-head h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 2px;
    ;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-head .desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.45;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-body {
    padding: 0 20px 20px;
    opacity: .0;
    transform: translateY(8px);
    transition: opacity .3s ease .05s, transform .3s ease .05s;
    max-height: calc(100% - var(--panel-min));
    overflow: auto;
}

.case-card:hover .panel-body {
    opacity: 1;
    transform: translateY(0);
}

/* 불릿 */
.bullets {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #4b5563;
}

.bullets li {
    font-size: 13px;
    line-height: 1.6;
}

/* 스크롤바(패널 내용이 길 때) */
.panel-body::-webkit-scrollbar {
    width: 6px;
}

.panel-body::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 6px;
}


.panel-body p {
    padding-top: 20px;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4rem;
    word-break: break-all;
}

.svc {
    display: none;
}


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



    .group_bg {
        padding: 180px 0 130px 0;
        border-radius: 80px 80px 0 0;
    }


    .content2 {
        width: 100%;
    }

    .logos2 ul {
        width: 100%;
        justify-content: flex-start;
    }

    .toptext span {
        font-size: 65px;
    }

    .toptext {
        font-size: 18px;
        padding-bottom: 12px;
        margin-bottom: 30px;
        border-bottom: 0.3px solid #919191;
    }

    .bottomtext p {
        font-size: 18px;
    }

    .taekwang>li {
        flex: 1;
    }

    #ft_wr {
        flex-direction: column-reverse;
        gap: 80px;

    }

    #ft_wr .ft_lef ul {
        width: 100%;
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
        align-items: end;
    }

    #ft_wr .ft_lef dl dt:nth-child(1) {
        font-weight: 700;
        font-size: 28px;
        opacity: 0.9;
    }

    #ft_wr .ft_right ul {
        flex: 1;
    }

    #ft_wr .ft_right ul li {
        flex: 1;
    }

    .ceo_img img {
        border-radius: 20px;
        object-position: 50% 50%;
        height: 400px;
        width: 100%;
        object-fit: cover;
    }

    .greeting_content {
        flex-direction: column-reverse;
    }

    .sign {
        margin-top: 0;
        justify-content: end;
    }

    /* 주요사업분야 */
    .section {
        border-radius: 40px;
        padding: 140px 90px 80px 90px;
    }

    .taekwang2 {
        margin-bottom: 60px;
        flex-direction: column;
        gap: 100px;
    }


}

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

    #hd .hd_wrapper {
        width: 90%;
    }

    #hd .gnb>li>a {
        padding: 20px 14px 15px;
        font-size: 16px;
    }

    #hd .gnb .depth2 li a {
        font-size: 14px;
    }

    #hd .gnb .depth2 {
        width: 100px;
        left: -10px;
    }

    .section {
        display: flex;
        border-radius: 34px;
        padding: 140px 90px 80px 90px;
        flex-direction: column;
    }

    #container_title .bgtext {
        text-align: right;
        border-bottom: 1px solid #eeeeee;
        line-height: 74px;
        font-size: 105px;
        color: #eee;
        font-weight: 800;
    }

}

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



    .hero {
        padding-left: 0;
        width: 104%;
        margin: 160px auto 20px;
    }

    /*레퍼런스*/

    /* .cases-grid{ grid-template-columns:repeat(2,1fr);} */
    .panel-body::before {
        margin: 16px 0 20px;
    }

    .panel-body p {
        padding-top: 10px;
        font-weight: 300;
        font-size: 14px;
        line-height: 1.4rem;
        word-break: break-all;
    }

    .content_bgbox img {
        display: none;
    }

    .banner {
        height: 780px;
    }

    .text_wrap h1 {
        margin-bottom: 0.3rem;
        font-size: 41px;
    }

    .text_area p {
        word-break: keep-all;
    }

    .text_wrap p {
        font-size: 32.3px;
    }

    .about_box {
        flex-direction: column;
    }

    .about_box .img_wrap {
        width: 100%;
    }

    .about_box .img_wrap img {
        border-radius: 1.2rem;
        object-fit: cover;
        width: 100%;
        height: 300px;
    }

    .content {
        margin: 90px 0;
        width: 100%;
    }

    .logos ul {
        justify-content: flex-start;
    }

    .logos ul li {
        width: calc((100% - 45px) / 3);
    }

    .content_text {
        margin-bottom: 50px;
        text-align: left;
    }

    .history ul {
        flex-direction: column;
    }

    .history ul li {

        width: 100%;
    }

    .history ul li img {
        border-radius: 1.2rem;
        object-fit: cover;
        height: 300px;
        width: 100%;
    }

    .taekwang {
        gap: 100px;
        flex-direction: column;
    }

    #ft_wr {
        flex-direction: column-reverse;
        gap: 80px;

    }

    #ft_wr .ft_lef ul {
        width: 100%;
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
        align-items: end;
    }

    #ft_wr .ft_lef dl dt:nth-child(1) {
        font-weight: 700;
        font-size: 28px;
        opacity: 0.9;
    }

    #ft_wr .ft_right ul {
        flex: 1;
    }

    #ft_wr .ft_right ul li {
        flex: 1;
    }




    /* 인삿말 */
    #container_title .bgtext {

        z-index: -1;
        border: none;
        right: 0;
        bottom: 0;
        position: absolute;
        line-height: 65px;
        font-size: 95px;
    }

    #container_title {
        position: relative;
        border-bottom: 1px solid #eee;
        font-size: 2rem;
        width: 80%;
        margin: 0 auto;
        font-weight: 600;
        padding: 70px 0 90px 0;
        color: #333;
        text-align: left;
    }

    .info_head h1 {
        font-size: 35px;
    }

    .ment {
        margin: 0;
    }

    .ment h1 {
        line-height: 2.8rem;
        margin-bottom: 40px;
        font-size: 35px;
    }

    .ment p {
        margin-bottom: 18px;
        font-size: 18px;
    }

    .greeting_content {
        gap: 80px;
        flex-direction: column-reverse;
        justify-content: space-between;
        display: flex;
    }

    .ceo_img {
        width: 100%;
        margin-top: 50px;
    }

    .ceo_img img {
        border-radius: 30px;
        object-position: 50% 48%;
        object-fit: cover;
        height: 402px;
        width: 100%;
    }

    .sign {
        justify-content: end;
    }

    .sign img {
        position: absolute;
        bottom: -10px;
        left: 616px;
    }

    .greeting {
        margin: 82px auto;
    }

    .greeting_content {
        margin: 34px 0;
    }

    .group_bg {
        padding: 0 0 120px 0;
        margin-top: 120px;
    }

    .group_img {
        margin-top: 100px;
    }

    /*주요사업계획*/
    .section {
        gap: 60px;
        border-radius: 40px;
        padding: 100px 60px 80px 60px;

    }

    .col p {
        height: 91px;
    }

    .col h3 {
        margin-bottom: 44px;
    }

    /*오시는길*/
    .location {
        font-size: 20px;
        margin: 14px 0 75px 0;
    }

    /*견적문의게시판*/
    .info_quote {
        margin: 85px 0 85px 0;
        display: flex;
        justify-content: center;
    }

    .search-box {
        padding: 16px 24px;
        width: 320px;
    }

    .board-list {
        text-align: center;
        width: 100%;
        margin: 70px auto 30px;
        font-size: 22px;
        color: #333;
    }

    .board-row li {
        font-size: 18px;
    }

    .button {
        padding: 10px 16px;
    }

    .quote-btn {
        padding: 12px 26px;
        font-size: 18px;
    }

    .page-item {
        width: 44px;
        height: 44px;
    }

    .board-row li {
        padding: 24px 0;
    }

    .board-header li {
        padding: 20px 0;
    }

    .board-header li:nth-child(2) {
        text-align: left;
    }

    .board-row li:nth-child(2) {
        padding-left: 0;
    }

    /* 조직도 */
    .group_img>img {
        width: 80%;
    }

    .group_img>img.group_img_pc {
        display: none;
    }

    .group_img>img.group_tablet_img {
        display: block;
    }

    /*연혁*/
    .box {
        text-align: center;
        display: flex;
        gap: 40px;
        /* padding: 60px 0; */
        padding: 27px 0;
        flex-direction: column;
    }

    .right .box h4 {

        font-size: 22px;
        width: 126px;
    }

    .right .box dl dt {
        color: #333;
        font-size: 18px;
        font-weight: 500;
    }

    .right .box h4 {
        font-size: 34px;
        color: #333;
        font-weight: 800;
        width: auto;
    }

    .right .box {
        gap: 55px;
        align-items: center;
        padding: 40px 0;
    }

    .box .mobile_line {
        padding: 0;
        opacity: 0.8;
        margin-top: 20px;
        align-items: center;
        width: 1px;
        /* 선 두께 */
        height: 80px;
        /* 선 길이 */
        background: linear-gradient(to bottom, #e0e0e0, #a8a8a8);
    }

    /*제품안내*/
    .logos2 ul li {
        width: 48%;
    }

    .about_box1 {

        padding: 90px 0 55px 0;

    }

    .chain {
        margin-bottom: 46px;
    }

    /*경영이념*/
    .info_head p {
        font-weight: 600;
        line-height: 36px;
        font-size: 26px;
        margin: 35px 0;
    }

    .infohead_text p {
        line-height: 1.4rem;
        font-size: 16px;
        font-weight: 400;
        word-break: keep-all;
    }

    .font2 {
        font-size: 24px;
    }

    .font1 {
        opacity: 0.7;
        font-size: 14px;
    }

    .core_word {
        position: absolute;
        bottom: 24px;
        left: 24px;
    }
}




@media screen and (max-width: 768px) {
    .brand-card {
        /* top: 300px; */
        /* left: 0; */
        /* align-items: start; */
        /* margin: 0 auto; */
        padding: 10px;
        height: auto;
        display: block;
        width: 100%;
        max-width: 580px;
        border-radius: 16px;
        overflow: hidden;
    }
    .brand-close {
        top: 12px;
       place-items: center;
    }
    /* 탭 전체를 3×2 그리드로 */
    .brand-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 20px;
        padding: 30px 20px;
    }

    /* 탭 버튼 디자인 */
    .brand-tab {
        display: flex;
        justify-content:center;
        align-items: center;
        gap: 20px;
        border-bottom: 1px solid #ececec;
        font-size: 16px;
        font-weight: 700;
        padding: 12px 6px;
        text-align: center;
    }

    .brand-tab .chev {
        opacity: 0.9;
        font-weight: 500;
        font-size: 14px;
    }

    .label {
        font-size: 14px;
    }

    /* 활성 탭 */
    .brand-tab.is-active {
        
        border-bottom: 2px solid #416EF2;

    }

    .brand-tab.is-active::after {
        display: none;
    }

    /* 가운데 구분선 / 데스크탑 패널 숨김 */
    .brand-divider {
        display: none;
    }

    .brand-panels {
        /* display: none; */
    }
    .brand-list li{
        display: flex;
        justify-content: space-between;
    }
    .brand-list {

        padding:0px 0px 20px;
    }

    /* 아코디언 패널: 한 줄 전체 폭으로 펼쳐지게 */
    .brand-panel {
        grid-column: 1 / -1;
        display: block;
        padding: 0px 14px 6px;
        background: #fff;
        animation: fade 0.18s ease;
        height: auto;
        display: none;
    }

    .brand-panel.is-active {
        display: block;
    }

    .brand-panel.mobile .brand-list {
        margin: 10px 0 6px;
        padding: 0;
        list-style: none;
    }

    .brand-panel.mobile .brand-list li {
        padding: 8px 0;
        border-bottom: 1px solid #ededed;
        font-size: 16px;
        color: #333;
    }

    .brand-panel.mobile .brand-list li:last-child {
        border: none;
    }

    .svc {
        display: block;
    }

    .svc-wrap {
        width: 100%;
        margin: 80px auto 20px;
    }

    .svc {
        position: relative;
        padding-bottom: 20px;
        padding-top: 30px;
        border-top: 1px solid #eee;
        margin-bottom: 40px;
    }

    .svc::before {
        content: "";
        position: absolute;
        top: -1px;
        /* 회색선과 겹치게 */
        left: 0;
        /* 오른쪽 끝 정렬 */
        width: 50px;
        /* 파란선 길이 */
        height: 2px;
        /* 파란선 두께 */
        background-color: #3a8afd;
        /* 파란색 */
        border-radius: 2px;
        /* 살짝 부드럽게 */
    }

    .svc h2 {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.01em;
        margin: 0 0 14px;
    }

    .svc ul {

        list-style: disc;
        padding-left: 22px;
        /* 불릿 들여쓰기 */
        margin: 0;
    }

    .svc li {

        font-size: 18px;
        font-weight: 400;
        margin: 6px 0;
    }



    .hero {
        margin: 110px auto;
        padding-left: 0;
        width: 100%;
    }

    .core_pc {
        display: none;
        width: 100%;
    }

    .core_tablet {
        align-items: center;
        display: block;
        width: 100%;
    }



    /*레퍼런스*/
    .cases {
        padding: 36px 20px 120px;
    }

    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .info_head3 {
        width: 80%;
        margin: 100px auto 30px;
    }

    .panel-head {
        padding: 2px 20px 10px;
    }

    .case-card {
        --panel-min: 100px;
        --panel-max: 100%;
    }

    #hd h1 img {
        width: 90%;
    }

    .banner {
        height: 540px;
        margin-left: 0;
    }

    .mySwiper {
        border-radius: 0 0 0 50px;
    }

    .text_wrap h1 {
        margin-bottom: 0.3rem;
        font-size: 34px;
    }

    .text_wrap p {
        font-size: 26.8px;
    }

    .about {
        margin: 110px auto;
    }

    .about_box {
        margin: 30px 0 0 0;
    }

    .content_text p span {
        font-size: 32px;
        font-weight: 900;
    }

    .content_text p {
        padding-top: 10px;
        font-size: 28px;
        font-weight: 700;
    }

    .content {
        margin: 30px 0;
        width: 100%;
    }

    .partner {
        margin: 100px auto;
    }

    .history {
        margin: 48px 0;
    }

    .location_head p {
        font-size: 20px;
        font-weight: 700;
    }

    .location p {
        font-size: 18px;
    }

    .location_img {
        width: 34px;
        height: 34px;
    }

    .iframe {
        padding: 20px 0 20px 0;
    }

    .location {
        font-size: 20px;
        margin: 40px 0;
    }

    .project {
        padding: 100px 0;
    }

    .project h1 {
        line-height: 3.0rem;
        font-size: 34px;
    }

    .project_btn a {
        margin-top: 80px;
        font-size: 18px;
        padding: 18px;
    }


    .swiper-slide {
        width: 100%;
    }

    .text_area h1 {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .text_area p {
        line-height: 1.7rem;
        font-size: 20px;
        font-weight: 500;
    }

    #hd .ham {
        display: block;
    }

    #hd .hd_wrapper nav {
        display: none;
    }


    .about {
        margin: 130px auto;
    }

    .about_box {
        margin: 50px 0 0 0;
    }

    .partner {
        margin: 130px auto;
    }

    .logos {
        width: 100%;
    }

    .logos ul {
        justify-content: center;
        align-content: space-between;
    }

    .logos ul li {
        width: calc((100% - 15px) / 2);
    }

    .project {

        margin: 100px auto 0;
    }

    #ft_wr .ft_rigt ul li dl a {
        color: #fff;
        width: 11rem;

    }

    #ft_wr {
        font-size: 16px;
        word-break: keep-all;
    }

    #ft_wr .ft_rigt ul {
        gap: 30px;
    }

    #ft_wr .ft_rigt ul li dl dd {
        text-align: right;
    }

    #ft_wr .ft_rigt ul li dl dt {
        margin-bottom: 15px;
        padding-bottom: 0px;
        border-bottom: none;
    }

    #ft_wr .ft_lef dl dt:nth-child(1) {
        font-size: 24px;
    }

    #ft_wr .ft_rigt ul {
        flex-direction: column;
    }

    #ft_wr .ft_rigt ul li {
        padding-bottom: 14px;
        border-bottom: 1px solid #232323;
    }

    #ft_wr .ft_rigt ul li dl {
        display: flex;
        gap: 50px;
        justify-content: space-between;
        flex-direction: row;
    }

    #ft_wr .ft_rigt ul li dl dt a {
        border: none;
    }

    /* 인삿말 */

    #container_title {
        padding: 80px 0 56px 0;
    }

    #container_title .head_title span {
        font-size: 42px;
    }

    .ceo_img img {
        border-radius: 20px;
        object-position: 50% 51%;
        height: 308px;
    }

    .sign {
        gap: 12px;
    }

    .greeting {
        margin: 70px auto;
    }

    .info_head h1 {
        font-size: 32px;
    }

    .ment h1 {
        font-size: 32px;
    }

    .ment {
        margin: 60px 0;
    }

    .ment p {
        line-height: 1.6rem;
        font-size: 18px;
    }

    .ceo_img {
        margin-top: 40px;
    }

    .greeting_content {
        margin: 10px 0;
        gap: 10px;
    }

    #container_title .bgtext {

        z-index: -1;
        border: none;
        right: 0;
        bottom: 0;
        position: absolute;
        line-height: 51px;
        font-size: 72px;
    }

    /*주요사업분야*/
    .section {
        gap: 60px;
        border-radius: 40px;
        padding: 90px 80px 70px 80px;
    }

    .info_head p {
        font-size: 24px;
        font-weight: 500;
        margin: 50px 0;
    }

    .hero {}

    .section {
        border-radius: 40px;
        padding: 75px 60px 70px 60px;
    }

    .section .col2 .col_height {
        padding: 0px 0 42px 0;
    }

    .col h3 {
        position: relative;
        display: block;
        font-size: 24px;
        font-weight: 600;
        color: #4070ff;
        margin-bottom: 30px;
        padding-bottom: 18px;
    }

    .col h4 {
        font-size: 20px;
        margin: 26px 0 8px;
    }

    .col p {
        height: 0px;
        padding: 10px 0 15px 0;
        word-break: keep-all;
        font-size: 16px;
        font-weight: 400;
        color: #aaa;
        margin: 0 0 20px;
        line-height: 1.6;
        border-bottom: none;
    }

    .col_height {
        padding: 0px 0 12px 0;
    }

    /* 조직도 */
    .group_img>img {
        width: 90%;
    }

    .group_bg {
        padding: 0 0 100px 0;
        margin-top: 120px;
    }

    .group_img {
        margin-top: 72px;
    }

    /* .group_img {
        background-image: url(../img/group_mobile.png);
        height: 741px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;   
    } */

    /*연혁*/
    .box {
        text-align: center;
        display: flex;
        gap: 40px;
        /* padding: 60px 0; */
        padding: 27px 0;
        flex-direction: column;
    }

    .right .box h4 {

        font-size: 22px;
        width: 126px;
    }

    .right .box dl dt {
        color: #333;
        font-size: 16px;
        font-weight: 500;
    }

    .right .box h4 {
        font-size: 30px;
        color: #333;
        font-weight: 800;
        width: auto;
    }

    /*게시판*/

    /*제품안내*/
    .about_box1 {
        width: 80%;
        margin: 0 auto;
    }

    .logos2 ul li {
        width: 48%;
    }

    /*경영이념*/
    .info_head p {
        font-weight: 600;
        line-height: 36px;
        font-size: 26px;
        margin: 35px 0;
    }

    .infohead_text p {
        line-height: 1.4rem;
        font-size: 16px;
        font-weight: 400;
        word-break: keep-all;
    }

    .font2 {
        font-size: 22px;
    }

    .font1 {
        opacity: 0.7;
        font-size: 14px;
    }

    .core_word {
        position: absolute;
        bottom: 16px;
        left: 18px;
    }

    .info_head2 {
        margin: 120px 0 40px 0;
    }

    .value_content {
        margin: 100px auto 130px;
    }

    .core_img {
        gap: 10px;
    }
}

@media screen and (max-width: 691px) {
    #ft {
        border-top: 1px solid #121212;
        background: #000000;
        margin: 0 auto;
        text-align: center;
    }

    #ft_wr {
        font-size: 14px;
        gap: 60px;
    }

    #ft_wr .ft_rigt ul li dl dd {
        text-align: left;
    }

    #ft_wr .ft_rigt ul li dl dt {
        margin-bottom: 12px;
        padding-bottom: 0px;
        border-bottom: none;
    }

    #ft_wr .ft_rigt ul li dl {
        display: flex;
        gap: -7px;
        justify-content: space-between;
        flex-direction: column;
        gap: 0px;
    }

    #ft_wr .ft_rigt ul li dl dt a {
        margin-bottom: 0px;
        padding-bottom: 20px;
    }

    #ft_wr .ft_lef ul {
        flex-direction: column;
        gap: 10px;
        justify-content: space-between;
        align-items: start;
    }

    #ft_wr .ft_lef dl dt:nth-child(1) {
        font-size: 20px;
    }

    #ft_wr .ft_lef dl dd {
        text-align: left;
        color: rgb(255, 255, 255, 0.6);
    }

    /*경영이념*/
    .info_head p {
        font-weight: 600;
        line-height: 36px;
        font-size: 26px;
        margin: 35px 0;
    }

    .infohead_text p {
        line-height: 1.4rem;
        font-size: 16px;
        font-weight: 400;
        word-break: keep-all;
    }

    .font2 {
        font-size: 22px;
    }

    .font1 {
        opacity: 0.7;
        font-size: 14px;
    }

    .core_word {
        position: absolute;
        bottom: 20px;
        left: 20px;
    }

    .info_head2 {
        margin: 120px 0 40px 0;
    }

    .value_content {
        margin: 100px auto 130px;
    }

    .core_img {
        flex-direction: column;
    }

    .core_img li {
        width: 100%;
    }

    .core_img img {
        border-radius: 11px;
        object-fit: cover;
        width: 100%;
        height: 200px;
    }

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

        .cases {
            width: 90%;
            margin: 0 auto;
            padding: 36px 20px 80px;
        }

        .panel-head {
            padding: 4px 16px 10px;
        }
    }

}

@media screen and (max-width: 469px) {
    .logos2 ul li {
        width: 100%;
    }

}


@media screen and (max-width: 425px) {
    a.btn_b01,
    .btn_b01 {
        font-size: 14px;
    }   
    

    .label {
        line-height: 28px;
        font-size: 9px;
    }
    .brand-panel {
        padding: 10px 0px 6px;
    }
    .brand-card {
        width: 100%;
        padding: 20px;
        /* top: 300px;
        left: -130px; */
    }
    .brand-list {
        padding: 10px 0px 5px;
    }
    .brand-list li {
        padding: 12px 6px;
        font-size: 15px;
    }
    .brand-close {
        align-items: center;
        z-index: 88;
        position: absolute;
        top: 12px;
        right: 13px;
        width: 25px;
        height: 25px;
        font-weight: 500;
        font-size: 13px;
    }

    .label {
        font-size: 9px;
    }

    .brand-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px 5px 10px 5px;
        background: #fff;
    }



    .business_head {
        margin: 10px 0;
    }


    .head_title_b {
        padding-bottom: 50px !important;
    }

    .svc::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 40px;
        height: 2px;
        background-color: #3a8afd;
        border-radius: 2px;
    }

    .svc-wrap {
        width: 100%;
        margin: 70px auto 40px;
    }

    .svc {
        padding-bottom: 20px;
        padding-top: 20px;
        margin-bottom: 35px;
    }

    .svc li {
        font-size: 16px;
    }

    .svc h2 {
        font-size: 20px;

    }


    html {
        font-size: 14px;
    }


    .group_img {

        margin-top: 50px;
    }

    .info_head h1:before {

        bottom: 3px;
    }

    #hd h1 img {
        width: 60%;
    }

    .ham img {
        height: 40px;
        width: 100%;
        display: block;
    }

    .banner {
        height: 460px;
        margin-left: 0;
    }

    .about_box {
        margin: 30px 0 0 0;
    }

    .about {
        margin: 80px auto;
    }

    .text_area p {
        font-size: 16px;
        font-weight: 500;
    }

    .text_area h1 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .text_wrap h1 {
        margin-bottom: 0.3rem;
        font-size: 24px;
    }

    .text_wrap p {

        font-size: 19px;
    }

    .content_text p span {
        font-size: 28px;
        font-weight: 900;
    }

    .content_text p {
        padding-top: 5px;
        font-size: 24px;
        font-weight: 700;
    }

    .content_text {
        margin-bottom: 30px;

    }

    .word {
        width: 140px;
    }

    .partner .text_area p {
        line-height: 1.5rem;
    }

    .logos ul li {
        width: 100%;
        padding: 0px;
    }

    .logos ul {
        gap: 10px;
    }

    .logos ul li a {
        gap: 20px;
    }

    .logos .word img {
        width: 100%;
    }

    .plus {
        width: 16px;
        height: 16px;
    }

    .bottomtext p {
        font-size: 16px;
    }

    .toptext p {
        font-size: 16px;
    }

    .partner {

        margin: 100px auto;
    }

    .location {
        margin: 40px 0;
    }

    .location2 {
        margin: 22px 0;
    }

    .location p {
        line-height: 1.5rem;
        font-size: 16px;
    }

    .location_img {
        width: 28px;
        height: 28px;
    }

    .location_head {
        gap: 6px;
    }

    .location p span {
        padding-right: 2px;
    }

    .iframe iframe {
        height: 84%;
        width: 100%;
        border-radius: 15px;
    }

    .iframe {
        height: 250px;
        padding: 12px 0 12px 0;
    }

    .iframe iframe {
        height: 100%;
    }

    .project h1 {
        line-height: 2.1rem;
        font-size: 24px;
        font-weight: 600;
    }

    .project_text .text2 p {
        word-break: keep-all;
        font-size: 16px;
        font-weight: 200;
        line-height: 1.5rem;
    }

    .project {
        padding: 80px 0;
    }

    .project_btn a {
        padding: 16px;
        font-size: 16px;
        margin-top: 50px;
    }

    .project_text {
        gap: 30px;
    }

    #ft {
        border-top: 1px solid #121212;
        background: #000000;
        margin: 0 auto;
        text-align: center;
    }

    #ft_wr {
        font-size: 14px;
        gap: 60px;
    }

    #ft_wr .ft_rigt ul li dl dd {
        text-align: left;
    }

    #ft_wr .ft_rigt ul li dl dt {
        margin-bottom: 12px;
        padding-bottom: 0px;
        border-bottom: none;
    }

    #ft_wr .ft_rigt ul li dl {
        display: flex;
        gap: -7px;
        justify-content: space-between;
        flex-direction: column;
        gap: 0px;
    }

    #ft_wr .ft_rigt ul li dl dt a {
        margin-bottom: 0px;
        padding-bottom: 20px;
    }

    #ft_wr .ft_lef ul {
        flex-direction: column;
        gap: 10px;
        justify-content: space-between;
        align-items: start;
    }

    #ft_wr .ft_lef dl dt:nth-child(1) {
        font-size: 20px;
    }

    #ft_wr .ft_lef dl dd {
        text-align: left;
        color: rgb(255, 255, 255, 0.6);
    }

    .mgnb_wrap {
        width: 65%;
    }


    /* 인삿말 */
    .sign {
        gap: 12px;
        padding-right: 0px;
        justify-content: flex-start;
    }

    #container_title span .head_title {
        font-size: 30px;
    }

    #container_title .head_title span {
        font-size: 32px;
    }

    #container_title {
        width: 90%;
        padding: 60px 0 3px 0;
    }

    .head_title {
        padding-bottom: 38px;
    }

    .info_head h1 {
        font-size: 26px;
    }

    .greeting {
        width: 84%;
        margin: 60px auto 60px;
    }

    .greeting .grey {
        font-size: 14px;
    }

    .greeting .name {
        font-size: 20px;
    }

    .ment {
        margin: 45px 0 22px 0;
    }

    .ment h1 {
        display: none;
        margin-bottom: 30px;
        font-size: 28px;
        line-height: 2.1rem;
    }

    .ment p {
        word-break: keep-all;
        margin-bottom: 16px;
        font-size: 16px;
    }

    .group_bg {
        margin-top: 98px;
        padding: 0px 0 60px 0;
        border-radius: 50px 50px 0 0;
    }

    .group {
        width: 84%;
    }

    .sign {
        margin-top: 0;
    }

    .gap {
        gap: 1rem;
    }

    .group_bg {
        margin-top: 60px;
    }

    #container_title .bgtext {
        z-index: -1;
        border: none;
        right: 0;
        bottom: 0;
        position: absolute;
        line-height: 32px;
        font-size: 46px;
    }


    .info_head h1:before {
        content: "";
        display: block;
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 12px;
        height: 12px;
        border: 4px solid #416EF2;
        border-radius: 50%;
    }

    /*주요사업분야*/
    .info_head p {
        line-height: 1.8rem;
        font-size: 20px;
        margin: 20px 0 26px 0;
    }

    .col p {
        height: 0px;
        padding: 9px 0 12px 0;
    }

    .col h3 {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .col h4 {
        font-size: 18px;
    }

    .hero {
        margin: 70px auto;
    }

    /* 조직도 */
    .group_img>img {
        width: 100%;
    }

    .section {
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.7);
        border-radius: 32px;
        padding: 50px 35px 50px 35px;
    }

    .info_head_map h1:before {
        content: "";
        display: block;
        position: absolute;
        bottom: 36px;
        left: -4px;
        width: 14px;
        height: 14px;
        border: 5px solid #416EF2;
        border-radius: 50%;
    }

    .taekwang {
        gap: 80px;
    }

    .right .box {
        gap: 42px;
        align-items: center;
        padding: 40px 0;
    }

    .box .mobile_line {
        padding: 0;
        opacity: 0.8;
        margin-top: 20px;
        align-items: center;
        width: 1px;
        /* 선 두께 */
        height: 80px;
        /* 선 길이 */
        background: linear-gradient(to bottom, #e0e0e0, #a8a8a8);
    }

    .about_box1 {
        padding: 80px 0 50px 0;
        width: 80%;
        margin: 0 auto;
    }

    .chain {
        margin-bottom: 30px;
    }

    .about_box1 .img_wrap img {

        height: 220px;
    }

    /*경영이념*/
    .infohead_text p {
        line-height: 1.4rem;
        font-size: 16px;
        font-weight: 400;
        word-break: keep-all;
    }

    .info_head2 {
        margin: 85px 0 40px 0;
    }

    .value_content {
        width: 90%;
        margin: 70px auto 100px;
    }

    .value_img1 img {
        border-radius: 12px;
        width: 100%;
        object-fit: cover;
        height: 200px;
    }

}

.mobile_line {
    opacity: 0;
}





/* banner */

#banner1 {
    position: relative;
    text-align: center;
    /* height: 300px;  */
    color: #fff;
    font-size: 2rem;
    color: #000;
}

#banner2 {
    position: relative;
    text-align: center;
    background: url('/img/banner_business.png') no-repeat center/cover;
    height: 300px;
    color: #fff;
    font-size: 2rem;
}

#banner3 {
    position: relative;
    text-align: center;
    background: url('/img/banner_product.png') no-repeat center/cover;
    height: 300px;
    color: #fff;
    font-size: 2rem;
}

#banner4 {
    position: relative;
    text-align: center;
    background: url('/img/banner_contact.png') no-repeat center/cover;
    height: 300px;
    color: #fff;
    font-size: 2rem;
}

#banner h2 {
    padding-top: 20px;
}

#banner ul.s_menu {
    width: 80%;
    margin: auto;
    display: block;
    background: #333333;
    display: flex;
    justify-content: space-between;
}

#banner ul.s_menu li {
    /* width: calc(100% / 4); */
    flex: 1;
    /* padding: 5px 0 15px; */
    padding: 5px 0;
    transition: all 0.5s;
}

#banner ul.s_menu li a {
    color: #fff;
    font-size: 1.1rem;
    display: inline-block;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#banner ul.s_menu :is(li:hover, li.active, li:has(#bo_cate_on)) {
    background: #416EF2;
}

/* info */

/* #info1 { background: url(/img/info_bg.png) no-repeat center/cover;} */
#info1 .info_inner {
    padding: 100px 0;
    width: 80%;
    margin: 0 auto;
}

#info1 .info4_inner {
    padding: 100px 0;
    width: 70%;
    margin: 0 auto;
}

#info1 .info1_wrap {
    display: flex;
    justify-content: space-between;
}

#info1 .info1_wrap dl {
    width: 48%;
}

/* #info1 .info1_wrap:nth-child(odd) { padding-bottom: 150px;} */
#info1 h2 {
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 20px;
}

#info1 dl dt {
    font-size: 1.5rem;
    font-weight: 700;
    padding-bottom: 20px;
}

#info1 dl dd {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8;
}

dd.sign {
    float: right;
    width: 20%;
    padding-top: 20px;
}

.info_img1 img {
    border-radius: 20px;
}

/* business */

/* #info1 {  background: linear-gradient(90deg, #f8f8f8 50%, #fff 50%);} */
#info1 .info_inner {
    width: 80%;
    margin: 0 auto;
}

#info1 .info1_wrap {
    display: flex;
    justify-content: space-between;
}

/* #info1 .info1_wrap:nth-child(odd) { padding-bottom: 150px;} */
#info1 h2 {
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 20px;
}

#info1 dl dt {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0 0 20px 0;
}

/* s */

/* content */

/* intro1 */
.ceo_wrap {
    background: #f2f2f2 url('/img/info_img1.png') no-repeat right bottom;
    width: 100%;
    height: 350px;
    padding: 50px 150px;
}

.ceo_wrap p {
    font-size: 1.5rem;
    padding-top: 30px;
}

.ceo_wrap p span {
    font-weight: 900;
}

.sign_wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 50px 0 0 0;
    font-size: 1rem;
}

.sign_wrap img {
    width: 8%;
}

.ceo_message {
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
}

.ceo_message p {
    font-size: 1.2rem;
    line-height: 1.5;
}

.ceo_message p span {
    font-weight: 900;
}

.ci_img {
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
}

.ci_img img {
    width: 100%;
    display: block;
}

.ci_img_li {
    display: none;
}

.ci_wrap {
    text-align: center;
}

.ci_wrap h2 {
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 20px;
}

.menu_wrap {
    width: 80%;
    margin: 0 auto;
    padding: 50px 0;
}

.menu_wrap h5 {
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 20px;
}

.menu_wrap p {
    font-size: 1rem;
    padding-bottom: 10px;
}

img {
    max-width: 100%;
    vertical-align: top;
}

.info_history {
    font-size: 40px;
    margin: 100px 0;
}

.info_history span {
    color: #256aff;
}

.right .box p {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 기본 테두리 원 (비활성: 투명) */
.right .box .circle {
    position: absolute;
    left: 55%;
    top: 94%;
    width: 34px;
    /* ●보다 살짝 크게 조절 */
    height: 34px;
    border: 2px solid transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    transition: border .25s ease, box-shadow .25s ease, transform .25s ease;
    pointer-events: none;
}

/* 활성화 시: 빨간 테두리 + 빛 */
.right .box.active .circle {
    border-color: rgba(65, 110, 242, 0.5);
    /* 연한 파란색 테두리 */
    transform: translate(-50%, -50%) scale(1.15);
    animation: ringPulse 1.5s ease-in-out infinite;
    box-shadow:
        0 0 4px rgba(65, 110, 242, 0.35),
        0 0 10px rgba(65, 110, 242, 0.25);
}

.right .box.active p[class^="y"] {
    color: #416EF2;
    /* 파란 점 */
    transition: color .25s ease;
}

@keyframes ringPulse {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(65, 110, 242, 0.25), 0 0 8px rgba(65, 110, 242, 0.15);
    }

    50% {
        box-shadow: 0 0 10px rgba(65, 110, 242, 0.5), 0 0 18px rgba(65, 110, 242, 0.3);
    }
}

.container {
    display: flex;
    gap: 50px;
}

.container .left {
    width: calc((100% - 50px) / 2);
}

.container .right {
    width: 71.5%;
    /* padding: 100px 0 0; */
    position: relative;
    /* margin: 0 auto; */
    margin-right: 0;
    margin-left: auto;
}

/* .container .line {
    width: 2px;
    background: #d20000;
    position: absolute;
    top: 85px;
    left: 184px;
    z-index: 5;
    transition: all 1s;
} */

/* .container .s_line {
    width: 2px;
    height: 1972px;
    background: #ddd;
    position: absolute;
    top: 92px;
    left: 184px;
} */

.left img {
    border-radius: 20px;
}

.box {
    display: flex;

    gap: 40px;
    /* padding: 60px 0; */
    padding: 27px 0;
}

.box h4 {
    font-size: 40px;
    width: 150px;
    color: #416EF2;
}

.box p {
    color: #eee;
    width: 5px;
    height: 5px;
    font-size: 1.3rem;
    padding-top: 6px;
    transition: all 1s;
}

.box dl {
    padding: 5px;
}

.box dl dt {
    font-weight: 500;
    font-size: 25px;
}

.box dl dt span {
    font-weight: 900;
}

.box dl dd {
    font-size: 1.5rem;
    padding-top: 10px;
}

.box dl dd span {
    font-weight: 900;
}

.y1 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y2 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y3 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y4 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y5 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y6 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y6 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y7 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y8 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y9 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y10 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y11 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.y12 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}


table {
    border-collapse: collapse;
    border-top: 2px solid rgb(140 140 140);
    font-family: sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    font-family: 'Pretendard';
}

caption {
    caption-side: bottom;
    padding: 10px;
    font-weight: bold;
}

thead,
tfoot {
    background-color: rgb(228 240 245);
}

th,
td {
    border-bottom: 2px solid#F7F7F7;
    padding: 30px 20px;
    text-align: start;
    font-size: 1rem;
}

td:last-of-type {
    text-align: start;
}

.row_wrap {
    display: flex;
    word-break: keep-all;
    padding-bottom: 5px;
}

/* tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
} */

tfoot th {
    text-align: right;
}

tfoot td {
    font-weight: bold;
}

.container .left2 {
    height: 250px;
    position: sticky;
    top: 100px;
    /* padding-top: 100px; */
}

/* info3 */
.info3_wrap p {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
}

.info3_wrap p span {
    color: #e60000;
    font-weight: 900;
}

/* info4 */
.hide {
    display: none;
}

.info4_map img {
    width: 100%;
    display: block;
    height: 500px;
    object-fit: cover;
    margin: 0 auto;
}

ul.map_wrap {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

li.map_a {
    display: flex;
    gap: 20px;
}

li.map_a img {
    width: 16%;
    display: block;
    object-fit: contain;
}

.intro_bg1 {
    background: url(/img/intro_bg_1.png) no-repeat;
    background-size: cover;
    height: 300px;
    background-attachment: fixed;
}

.intro_bg2 {
    background: url(/img/intro_bg_2.png) no-repeat;
    background-size: cover;
    height: 300px;
    background-attachment: fixed;
}

.intro_bg3 {
    background: url(/img/intro_bg_3.png) no-repeat;
    background-size: cover;
    height: 300px;
    background-attachment: fixed;
}

#story {
    padding: 100px 0;
}

#story ul li img {
    width: 100%;
}

#story dl {
    height: auto;
}

#story dl dt {
    font-size: 1rem;
    padding-top: 20px;
    font-weight: 900;
    word-break: keep-all;

}

#story dl dd:nth-of-type(1) {
    color: #999;
    padding: 10px 0;
}

#info1 dl dt.ad_tit {
    color: #e60000;
}



.container {
    flex-direction: column;
}

.container .left2 {
    /* height: 250px; */
    position: static;
    top: 100px;
    width: 100%;
    height: auto;
}

.ci_wrap {
    text-align: start;
}

.container .right {
    width: 100%;
}

#info1 .info1_wrap {
    flex-direction: column;
}

#info1 .info1_wrap dl {
    width: 100%;
}

ul.map_wrap {
    flex-direction: column;
    gap: 20px;
}

li.map_a dl:nth-child(2) {
    display: block;
}

li.map_a dl {
    display: flex;
    gap: 20px;
    width: 100%;
}

#info1 dl dt {
    font-size: 20px;
    /* width: 100%; */
}

li.map_a img {
    display: none;
}

#info1 dl dd {
    font-size: 1.3rem;
}

li.map_a {
    align-items: center;
}

.ceo_wrap {
    background-size: 27%;
}

.ceo_wrap p {
    font-size: 1.1rem;
}

#banner ul.s_menu li a {
    font-size: 1rem;
}

.box {
    align-items: center;
    padding: 40px 0;
}



/*연혁수정화면*/
:root{
    --neon:#2f80ed;
    --neon-soft:rgba(47,128,237,.25);
    --rail-width: 420px;   /* 프리뷰 가로폭 */
    --gap: 10px;           /* 리스트와 프리뷰 사이 간격 */
  }

  .timeline-container{
    margin: 200px auto;
    padding:60px 16px;
    width: 80%;
}
  
  /* 리스트와 프리뷰 레일을 묶는 무대 */
  .timeline-stage{
    position: relative;
    display: grid;
    grid-template-columns: 1fr; /* 시맨틱만, 프리뷰는 absolute로 배치 */
  }
  
  /* 왼쪽 리스트 */
  .timeline-list{
    display:grid;
    gap:80px;  
    max-width: 640px;
}
  .timeline-card{
    text-align: left;
    position:relative; 
    padding:40px 42px; 
    border-radius:30px; 
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
     box-shadow:0 4px 10px rgba(0,0,0,.04);
    transform:scale(0.96); 
    opacity:.6; transition: all .55s ease; overflow:hidden;
  }
  .timeline-card h4{margin:0 0 6px;font-size:30px;color:#1a1a1a;}
  .timeline-card dt{color:#666;font-size:18px;line-height:1.6;}
  .marker{
    position:absolute;
    right:54px;
    top:63px;
}
  .dot{
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:50%;background:#ccc;transition:all .55s ease;
}
  .timeline-card.active{
    transform:scale(1.08); opacity:1; border-color:var(--neon);
    box-shadow:0 10px 25px rgba(47,128,237,.25);
  }
  .timeline-card.active h4{color:var(--neon);text-shadow:0 0 8px rgba(47,128,237,.4);}
  .timeline-card.active .dot{background:var(--neon);box-shadow:0 0 6px var(--neon),0 0 12px var(--neon);animation:pulse 1.8s ease-in-out infinite;}
  @keyframes pulse{0%,100%{transform:scale(1);filter:brightness(1);}50%{transform:scale(1.3);filter:brightness(1.4);}}
  
  /* 오른쪽 레일(여기에 카드별 프리뷰 박스들이 절대 배치됨) */
  .preview-rail{
    position: absolute;
    top:-60px;
    /* 리스트 오른쪽 끝 + gap 지점에 붙이기 */
    left: calc(68% + var(--gap));
    width: 25%;
    pointer-events:none; /* 오버랩되어도 스크롤/클릭 방해 X */
  }
  
  /* 개별 프리뷰 박스(스크립트로 생성) */
  .preview-float{
    opacity: 0.7;
    position:absolute; left:0; width:90%; height:260px;
    border-radius:30px; background:#313131; overflow:hidden;
    /* border:1px solid rgba(47,128,237,.25); */
    box-shadow:0 8px 20px rgba(47,128,237,0.10),0 3px 10px rgba(0,0,0,.06);
    opacity:0; transform: translateY(8px) scale(.98);
    transition: opacity .45s ease, transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  }
  .preview-float .img{
    position:absolute; 
    inset:3px;
     border-radius:30px;
    background:#f3f6fb center/contain no-repeat;
    filter:saturate(1.05) contrast(1.02);
    transition: transform .55s cubic-bezier(.2,.65,.2,1), opacity .35s ease;
    opacity:.0; transform: scale(0.2);
  }
  .preview-float .cap{
    display: none;
    position:absolute; left:16px; bottom:12px; margin:0;
    font-size:12px; color:#3a78df; background:rgba(255,255,255,.9);
    padding:4px 8px; border-radius:999px; border:1px solid rgba(47,128,237,.25);
  }
  .preview-float.on{
    opacity:1; transform: translateY(0) scale(1);
    border-color: rgba(47,128,237,.45);
    box-shadow:0 10px 28px rgba(47,128,237,0.18),0 6px 18px rgba(0,0,0,.07);
  }
  .preview-float.on .img{opacity:1; transform: scale(1);}
  
  /* 화면이 좁으면 프리뷰를 카드 아래로(모바일 대응) */
  @media (max-width: 980px){
    .preview-rail{display:none;} /* 오른쪽 레일 감춤 */
    .timeline-card{padding-bottom: 12px;}
    .timeline-card .inline-preview{
      margin-top: 12px; height: 220px; border-radius:12px;
      background:#fff; border:1px solid rgba(47,128,237,.25);
      box-shadow:0 8px 20px rgba(47,128,237,0.10),0 3px 10px rgba(0,0,0,.06);
      overflow:hidden; opacity:0; transform: translateY(6px); transition:opacity .35s ease, transform .35s ease;
    }
    .timeline-card .inline-preview .img{width:100%;height:100%;background:#f3f6fb center/cover no-repeat;}
    .timeline-card.active .inline-preview{opacity:1; transform: translateY(0);}
  }