@charset "utf-8";

/* common */
:root {
    --sub1-color: #22213a;
    --sub2-color: #22213a;
}

/* #sub_intro {
    width: 100%;
    height: 530px;
    padding-top: 100px;
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
} */

#sub_intro {
    border-radius: 30px;
    width: 90%;
    height: 300px;
    /* padding-top: 100px; */
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    box-sizing: border-box;
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: 150px auto 0;
    text-align: center;
}



/* sub menu */
#sub_menu {
    bottom: -35px;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    color: #222222;
}

#sub_menu .center {
    height: 70px;
    position: relative;
    display: flex;
    box-shadow: 1px 6px 12px 0 rgba(102, 102, 102, 0.2);
    background-color: #fff;

}

#sub_menu .home {
    position: absolute;
    background-color: rgba(45, 170, 102, 1);
    padding: 0 19px;
    display: flex;
    align-items: center;
    height: 100%;
    left: 0;
    top: 50%;
    border: 1px solid rgba(45, 170, 102, 1);
    border-radius: 50px;
    transform: translate(-50%, -50%);
}

#sub_menu .menu_on {
    padding: 23.5px 20px 23.5px 50px;
    min-width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-right: none;
    cursor: pointer;
    user-select: none;
}


#sub_menu .menu_on i {
    color: #D9D9D9;
}

#sub_menu .menu_on::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #CCCCCC;
}


#sub_menu .sub_nav_drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    white-space: nowrap;
    z-index: 100;
    min-width: 150px;
    width: 100%;
}

#sub_menu .sub_nav_drop div {
    padding: 12px 20px 12px 50px;
    color: #111;
    cursor: pointer;
    transition: background-color .2s, color .2s;
    text-align: left;
}

#sub_menu .sub_nav_drop div:hover {
    color: var(--sub_green);
    background-color: #EEEEEE;
}

#sub_menu ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: rgba(234, 234, 234, 1);
    word-break: keep-all;
    margin: 0;
    padding: 0;
    align-content: center;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #DDD;
    border-left: none;
}

#sub_menu ul li {
    padding: 0 40px;
    text-align: left;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2B2B2B;
    box-sizing: border-box;
    cursor: pointer;
    /* padding: 0 20px; */
    position: relative;
}

#sub_menu ul li::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 25%;
    background-color: rgba(255, 255, 255, 1);
}

#sub_menu ul li:nth-last-child(1)::after {
    display: none;
}


#sub_menu .sub_menu_center {
    background-color: #fff;
    height: 70px;
    position: relative;
    display: flex;
}

#sub_menu ul li.on {
    color: var(--sub_green);
    font-weight: 700;

}

#sub_menu ul li.on span {
    position: relative;
}

#sub_menu ul li.on span::after {
    position: absolute;
    content: "";
    width: calc(100% + 20px);
    height: 1px;
    background-color: var(--sub_green);
    bottom: calc((70px - 24px) / -2);
    left: 50%;
    transform: translate(-50%, -50%);
}


#sub_content {
    padding: 100px 0 100px 0;
    text-align: center;
    letter-spacing: -0.04em;
}




/* sub1*/
.sub1_intro {
    background-image: url("../images/sub_intro1.png");
}

/* sub2 */
.sub2_intro {
    background-image: url("../images/sub_intro2.png");
}

.sub3_intro {
    background-image: url("../images/sub_intro3.png");
}

.sub4_intro {
    background-image: url("../images/sub_intro4.png");
}

.sub5_intro {
    background-image: url("../images/sub_intro5.png");
}

.sub6_intro {
    background-image: url("../images/sub_intro6.png");
}

.sub7_intro {
    background-image: url("../images/sub_intro7.png");
}


/* sub_section 공통 */
.sub_section .common_title {
    color: #222222;
    letter-spacing: -0.04em;
}

.sub_section .common_title span {
    color: #2DAA66;
    font-weight: 700;
}


.sub_intro_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    letter-spacing: -0.02em;
    width: 100%;
}

.sub_intro_text .si_top {
    word-break: keep-all;
    overflow-wrap: break-word;
}

.sub_section .section1 .sub_title {
    color: #294C29;
}


/* 개인정보 */
.footer_info {
    padding: 200px 0 150px;
    text-align: center;
    background-color: #F6F4F3;
    letter-spacing: -0.04em;
}

.footer_info .content {
    margin-top: 50px;
    border-top: 3px solid #2DAA66;
    padding: 50px;
    background-color: #FFFFFF;
    box-shadow: 1px 6px 12px 0 rgba(102, 102, 102, 0.2);


}

.footer_info .content .content_title {
    border: 1px solid #CCCCCC;
    background-color: #F5F5F5;
    padding: 10px;
    margin-bottom: 50px;
}

.footer_info .content .content_text {
    color: #8C8C8C;
    word-break: normal;
    overflow-wrap: break-word;
    text-align: left;
}

.footer_info .content .content_text span {
    font-weight: 700;
}


#sub_content.sub1_content {
    padding-bottom: 0;
}

/* sub1_1 */
.sub1_1_section {
    background-image: url('../images/sub1_bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 100px;
}

.sub1_1_section .section1 {
    line-height: 38px;
    color: #2B2B2B;
}

.sub1_1_section .section1 .img_box {
    position: relative;
    line-height: 52px;
    width: 100%;
    margin: 70px 0 30px;
}

.sub1_1_section .section1 .img_box img {
    width: 100%;
    object-fit: cover;
}

.sub1_1_section .section1 .img_box .img_box_txt {
    position: absolute;
    color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sub1_1_section .section1 .value {
    margin: 70px 0;
}


.sub1_1_section .section1 .value .box_list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.sub1_1_section .section1 .value .box_list .box {
    padding: 75px 25px;
    box-shadow: 2px 6px 18px 2px rgba(41, 76, 41, 0.25);
    min-width: 300px;
    background-color: #fff;
    border-radius: 30px;
}

.sub1_1_section .section1 .value .box_list .box .sub_title {
    color: rgba(45, 170, 102, 1);
}

.sub1_1_section .section1 .value .box_list .box .title {
    margin: 15px 0;
}

.sub1_1_section .section1 .value .box_list .box .content {
    line-height: 29px;
    color: rgba(72, 72, 72, 1);
}

.sub1_1_section .section1 .future .description {
    margin: 50px 0 0;
}

.sub1_1_section .section1 .future .description .highlight {
    background: linear-gradient(to bottom,
            transparent 50%,
            rgba(45, 170, 102, 0.2) 50%);
}

/* sub1_2 */

#sub_content.sub1_2_content {
    padding-bottom: 0;
}

.sub1_2_section .section1 {
    background-image: url("../images/sub1_2bg.png");
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 100px;
}

/* 타임라인 전체 */
.sub1_2_section .timeline {
    position: relative;
    width: 100%;
}

/* 중앙 세로선 */
.sub1_2_section .timeline .tl-line {
    position: absolute;
    top: 28px;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background-color: #294C29;
    z-index: 0;
}

/* 아이템 공통 */
.sub1_2_section .timeline .tl-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* dot */
.sub1_2_section .timeline .tl-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: #294C29;
    border: 1px solid #294C29;
    flex-shrink: 0;
    z-index: 1;
    margin-top: 19px;
}

/* 빈 공간 */
.sub1_2_section .timeline .tl-empty {
    flex: 1;
}

/* 박스 공통 */
.sub1_2_section .timeline .tl-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sub1_2_section .timeline .tl-head {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* year */
.sub1_2_section .timeline .tl-year {
    font-size: 48px;
    font-weight: 700;
    color: #4a7c4e;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.sub1_2_section .timeline .tl-right .tl-bar {
    width: 80px;
    height: 1px;
    background-color: #CCCCCC;
    flex-shrink: 0;
}

.sub1_2_section .timeline .tl-left .tl-bar {
    flex: 1;
    height: 1px;
    background-color: #CCCCCC;
}

/* body */
.sub1_2_section .timeline .tl-body {
    padding-left: 0;
}

/* 리스트 */
.sub1_2_section .timeline .tl-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sub1_2_section .timeline .tl-right .tl-list li {
    padding-left: 130px;
}

.sub1_2_section .timeline .tl-list li {
    display: flex;
    gap: 40px;
    color: #111;
    line-height: 1.6;
    letter-spacing: -0.04em;
}

.sub1_2_section .timeline .tl-list .tl-text {
    color: #6E6E6E;
}

.sub1_2_section .timeline .tl-month {
    flex-shrink: 0;
    color: #222
}




/* sub1_3 */
.sub1_3_section .section1 {
    display: flex;
    align-items: center;
}

.sub1_3_section .road .wrap_btn_zoom,
.sub1_3_section .road .cont {
    display: none;
}

.sub1_3_section .text,
.sub1_3_section .road {
    width: 50%
}

.sub1_3_section .text {
    margin: 0 0 0 70px;
}

.sub1_3_section map img {
    width: 100%;
    height: 450px;
}

.sub1_3_section .title {
    color: rgba(34, 34, 34, 1);
    letter-spacing: -0.04em;
}

.sub1_3_section .content {
    padding: 20px 0 0 0;
    color: rgba(82, 82, 82, 1);
    letter-spacing: -0.04em;
    line-height: 40px;

}

.sub1_3_section .section1 li {
    list-style: none;
}

.root_daum_roughmap .wrap_controllers {
    display: none;
}

/* sub2_1 */
.sub2_1_section {
    background-color: #FFFFFF;
}

.sub2_1_section .icon_all {
    padding: 10px;
}

.sub2_1_section .product_list {
    padding: 2.5% 0 5%;
    display: flex;
    flex: 1;
    gap: 2.5%;
    justify-content: center;
}

.sub2_1_section .product_list .product {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    align-items: center;
    color: rgba(34, 34, 34, 1);
    opacity: 0.5;
    cursor: pointer;
}

.sub2_1_section .product_list .product.on {
    opacity: 1;
}

.sub2_1_section .item_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.sub2_1_section .item_list .item {
    border: 1px solid rgba(204, 204, 204, 1);
    padding: 20px 0;
}

.sub2_1_section .item_list .item:hover {
    color: var(--sub_green);
    border: 1px solid var(--sub_green);

}

.sub2_1_section .item_list .item img {
    width: 100%;
    object-fit: cover;
}

.sub2_1_section .item_list .item_name {}


/* sub2_1_d */

.sub2_1_d_section .section1 {
    display: flex;
}

.sub2_1_d_section .section2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.sub2_1_d_section .picture {
    width: 60%;
    position: relative;
    /* padding-right: 10%; */
    /* box-sizing: border-box; */
}

.sub2_1_d_section .picture .main_img img {
    width: 80%;
    object-fit: contain;
    border: 1px solid #CCCCCC;
    height: 700px;
}

.sub2_1_d_section .picture .thumb_list {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    gap: 10px;
    list-style: none;
    padding: 0;
    width: 20%;
}

.sub2_1_d_section .picture .thumb_list li {
    width: 80px;
    height: 80px;
    border: 2px solid #ddd; 
    cursor: pointer;
    overflow: hidden;
}

.sub2_1_d_section .picture .thumb_list li.on {
    border-color: var(--sub_green);
}

.sub2_1_d_section .picture .thumb_list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}


.sub2_1_d_section .item_info {
    width: 40%;
    display: flex;
    flex-direction: column;
    letter-spacing: -0.04em;
    color: rgba(34, 34, 34, 1);
    box-sizing: border-box;
    padding: 40px 0;
    justify-content: flex-start;
    border-top: 1px solid #222222;
}

.sub2_1_d_section .item_info .img_title img {
    padding-top: 10px;
    padding-right: 30px;
    cursor: pointer;
}

.sub2_1_d_section .item_info .img_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}

.sub2_1_d_section .item_info .title {
    color: #222;
    text-align: left;
}

.sub2_1_d_section .item_info .desciption {
    text-align: left;
    padding: 20px 0 30px;
    color: rgba(140, 140, 140, 1);
    white-space: normal;
    word-break: break-word;

}

.sub2_1_d_section .item_info .price {
    padding: 40px 0;
}

.discount_percent {
    color: red
}

.soldout {
    color: #fff;
    padding: 3px 6px;
    background-color: rgba(82, 82, 82, 1);
}

.sub2_1_d_section .item_info .price .regular_price {
    color: #ccc;
    position: relative;
}

.sub2_1_d_section .item_info .price .regular_price::after {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: #bbb;
}

.sub2_1_d_section .item_info .size {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
    color: rgba(34, 34, 34, 1);
    padding: 10px 0;
    border-top: 1px solid #CCCCCC;
}

.sub2_1_d_section .item_info .size .size_select {
    width: 100%;
    border: 1px solid #CCCCCC;
    padding: 10px 0;
    position: relative;
}

.sub2_1_d_section .item_info .size .size_select .arrow {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

.sub2_1_d_section .item_info .quantity {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
    color: rgba(34, 34, 34, 1);
    padding: 20px 0;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

.sub2_1_d_section .item_info .size .name,
.sub2_1_d_section .item_info .quantity .name {
    text-align: left;
    width: 55%;
    display: flex;
    align-items: center;

}


.sub2_1_d_section .item_info .quantity .name {}

.sub2_1_d_section .item_info .quantity .qty {
    display: inline-flex;
    align-items: center;
    width: 55%;
    justify-content: flex-end;
}

.sub2_1_d_section .item_info .quantity .qty span {
    padding: 0 0 0 15px;
}

.sub2_1_d_section .item_info .quantity .qty button {
    border: 1px solid rgba(204, 204, 204, 1);
    padding: 5px 10px;
    background-color: #FFFFFF;
}

.sub2_1_d_section .item_info .quantity .qty input {
    width: 40px;
    height: 27px;
    text-align: center;
    border: 1px solid rgba(204, 204, 204, 1);
}

.sub2_1_d_section .item_info .total_price {
    color: rgba(34, 34, 34, 1);
    padding: 40px 0;
}

.sub2_1_d_section .item_info .btn {
    margin: 40px 0 0;
    color: rgba(82, 82, 82, 1);
    display: flex;
    gap: 15px;
    cursor: pointer;
}

.sub2_1_d_section .item_info .btn .cart_btn,
.sub2_1_d_section .item_info .btn .buy_btn {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--sub_green);
    border-radius: 10px;
    color: var(--sub_green);
}

.sub2_1_d_section .item_info .btn .buy_btn {
    background-color: var(--sub_green);
    color: #FFFFFF;
}

.sub2_1_d_section .section2 .detail {
    margin: 100px 0 0;
}

.sub2_1_d_section .section2 .detail_writing,
.sub2_1_d_section .section2 .detail {
    width: 100%;
    text-align: center;
    padding: 50px 0;
}

.sub2_1_d_section .section2 .detail_writing img {
    max-width: 100%;
    object-fit: cover;
}

.sub2_1_d_section .section2 .detail_writing p {
    white-space: normal;
    word-break: break-word;
}

.sub2_1_d_section .section2 .detail {
    border: 1px solid rgba(82, 82, 82, 1);
    border-bottom: none;
    padding: 15px 0;
    /*width: 100%;*/
}

.sub2_1_d_section .section2 .info_graph_wrap {
    width: 45%;
    margin: 0 auto;
}

.sub2_1_d_section .section2 .info_graph {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.sub2_1_d_section .section2 .info_graph ul {
    width: 100%;
}

.sub2_1_d_section .section2 .info_graph ul li {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}

/* 맨 위 li */
.sub2_1_d_section .section2 .info_graph ul li:first-child {
    border-top: 2px solid #222222;
}

.sub2_1_d_section .section2 .info_graph ul li .info {
    color: #444444;
}

.sub2_1_d_section .section2 .info_graph_wrap .description {
    margin-top: 30px;
    color: #666666;
    line-height: 28px;
}

/* sub3_1 */
.sub3_section b {
    color: #B61F24;
    margin-left: 2.5px;
}

.sub3_section .input_wrap {
    text-align: left;
    width: 100%;
    margin-top: 70px;
    border-top: 2px solid var(--sub_green);
}


.sub3_section .input_wrap p {
    margin: 40px 0 15px;
}

.sub3_section .input_wrap p span {
    color: #B61F24;
}

.sub3_section .input_wrap textarea {
    min-height: 200px;
}

.sub3_section .input_wrap textarea {
    width: 100%;
    padding: 20px 30px 20px;
    border: 1px solid #CCCCCC;
    font-size: 17px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 300;
    color: rgba(140, 140, 140, 1);
}

.sub3_section .input_wrap input {
    width: 100%;
    padding: 18px 30px;
    border: 1px solid #CCCCCC;
    font-size: 17px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 300;
}


.sub3_section .input_wrap .check_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.sub3_section .input_wrap input[type='checkbox'] {
    margin: 0;
    min-width: 0;
    width: 2.5%;
    height: 2vh;
}

.sub3_section .input_wrap .privacy_title {
    text-align: center;
    margin: 20px 0 30px;
}

.sub3_section .input_wrap .info_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


.sub3_section .btn_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.sub3_section .btn_list .btn.back_btn {
    background-color: #fff;
    border: 1px solid var(--sub_green);
    color: var(--sub_green);

}

.sub3_section .btn_list .btn {
    margin-top: 50px;
    display: inline;
    padding: 12px 50px;
    color: #fff;
    background-color: var(--sub_green);
    border-radius: 10px;
    border: 1px solid var(--sub_green);
}

.sub3_section .file_input {
    display: flex;
}

.sub3_section .file_input .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    border-radius: 10px;
    padding: 5px 10px;
    width: 10%;
    background-color: var(--sub_green);
    color: #fff;
}

.sub3_section .input_wrap input[type='file'] {}

.sub3_section .input_wrap .secret_wrap {
    display: flex;
    justify-content: flex-end;
    margin: 30px 0 20px;
}

.sub3_section .input_wrap .secret_wrap .secret {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    gap: 5px;
    background-color: #F6F6F6;
    border: 1px solid #d8d8d8;
    padding: 4px 10px;

}

.sub3_section .page_btn .page_num {
    background-color: var(--sub_green);
    padding: 2.5px 10.5px;
    border-radius: 50px;
    color: #fff;
}

/* sub3_2 */
.sub3_section .board_wrap {
    padding: 35px 0 0;
}

.sub3_section .board_table {
    width: 100%;
    border-collapse: collapse;
}

.sub3_section .board_table tr{
    border-bottom: 1px solid #CCCCCC;
}
.sub3_section .board_table th,
.sub3_section .board_table td {
    padding: 20px 15px;
    text-align: center;
    color: #222222;
}

.sub3_section .board_table td:nth-last-child(2),
.sub3_section .board_table td:nth-last-child(1) {
    color: #505050;
}

.sub3_section .board_table thead th {
    border-top: 1px solid #222;
    border-bottom: 1px solid #CCCCCC;
    color: #222222;
}

.sub3_section .board_table tbody td.title {
    display: flex;
    text-align: left;
    align-items: center;
    gap: 5px;
}

.sub3_section .search_boxs {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.sub3_section .search_boxs .total span {
    color: var(--sub_green);
}


.sub3_section .search_boxs .search {
    display: flex;
    gap: 15px;
    color: #808080;
}

.sub3_section .search_boxs .search .search_box input::placeholder {
    color: #808080;
    font-size: 15px;
}


.sub3_section .search_boxs .search .search_box input {
    width: 250px;
    height: 42px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    border: 1px solid #CCCCCC;
    color: #222;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    font-size: 15px;
}

.sub3_section .search_boxs .search .search_box {
    display: flex;

}

.sub3_section .search_boxs .search .search_box .search_bluebox.writing_bluebox {
    margin-left: 15px;
    padding: 10px 30px;
    color: white;
    border-radius: 5px;
}

.sub3_section .search_boxs .search .search_box .search_bluebox {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--sub_green);
    padding: 5px 10px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
}

/* sub3_2_1 */
.sub3_section .board_detail {
    padding: 40px 0 0;
}

/* 제목 */
.sub3_section .detail_head {
    padding: 40px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 30px;
}

.sub3_section .detail_title {
    display: flex;
    justify-content: space-between;
    color: #222;
    margin-bottom: 15px;
    text-align: left;
}

.sub3_section .detail_title .detail_setup {
    position: relative;
}

.sub3_section .detail_title .detail_setup i {
    color: var(--sub_green);
}

.sub3_section .detail_title .detail_setup ul {
    position: absolute;
    right: 0;
    border: 1px solid #CCCCCC;
    background-color: #fff;
    display: none;
}

.sub3_section .detail_title .detail_setup ul li {
    min-width: 150px;
    padding: 5px 10px;
    box-sizing: border-box;
}

.sub3_section .detail_title .detail_setup ul.on {
    display: block;
}

.sub3_section .detail_info .date {
    color: #747474;
}

.sub3_section .detail_info .bar {
    color: #CCCCCC;

}

.sub3_section .detail_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #222;
}

.sub3_section .detail_info .right_info {
    color: #505050;
}

.sub3_section .detail_info .left_info {
    display: flex;
    align-items: center;
    gap: 10px;
}


.sub3_section .detail_content {
    padding: 20px;
    min-height: 300px;
    color: #222222;
    line-height: 1.8;
    border-bottom: 1px solid #CCCCCC;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

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

.sub3_section .detail_content p {
    white-space: normal;
    word-break: break-word;
}

/* 첨부파일 */
.sub3_section .detail_attach {
    color: #CCCCCC;
    padding: 20px 35px;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;

}

.sub3_section .detail_attach a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: 'Pretendard-SemiBold', sans-serif;
    font-size: 20px;
    color: #222222;


}

.sub3_section .detail_attach .detail_attach_edit {
    display: flex;
    gap: 10px;
}


.sub3_section .detail_attach i {}

.sub3_section .detail_attach span {
    color: #222;
}


/* sub4_2 */
#sub_content.sub4_2_content {
    padding-bottom: 0;
}

.sub4_2_section {
    background-image: url("../images/sub4_2bg.png");
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 100px;
}

.sub4_2_section .partnership_wrap {
    margin: 75px 0 0;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(219, 219, 219, 1);
    box-shadow: 1px 6px 12px 1 rgba(204, 204, 204, 0.4);
    padding: 30px 0;
    border-radius: 30px;

}

.sub4_2_section .partnership_wrap p {
    margin: 25px 0;
}

.sub4_2_section .partnership_wrap .number {
    color: var(--sub_green);
}


/* cart관련 */
/* btn */
.sub2_1_d_section .item_info.item_info1 {
    width: 100%;
    border: none;
}

.sub5_section .process_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub5_section .process_wrap .process {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: #666666;
}

.sub5_section .process_wrap .process.process_green {
    color: var(--sub_green);
}

.sub5_section .process_wrap>img {
    margin-bottom: 23px;
    /* 아이콘 높이의 절반 정도로 조절 */
    flex-shrink: 0;
}

/* 아이콘이랑 텍스트 분리 */
.sub5_section .process_wrap .process img {
    height: 60px;
    /* 아이콘 높이 통일 */
    object-fit: contain;
}

.sub5_section .cart_list_wrap {
    width: 100%;
    margin: 100px 0 0;
}

/* 헤더 */
.sub5_section .cart_list_wrap .cart_header {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-top: 2px solid #333;
    border-bottom: 1px solid #ddd;
}

/* 아이템 */
.sub5_section .cart_list_wrap .cart_item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

/* 컬럼 너비 */
.sub5_section .cart_list_wrap .col_check {
    width: 8%;
    text-align: center;
}

.sub5_section .cart_list_wrap .col_info.col_info1 {
    justify-content: center;
}

.sub5_section .cart_list_wrap .col_info {
    width: 72%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    box-sizing: border-box;
}

.sub5_section .cart_list_wrap .col_info .info_txt {
    text-align: left;
}

.sub5_section .cart_list_wrap .col_qty {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 상품 이미지 */
.sub5_section .cart_list_wrap .col_info img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* 옵션 버튼 */
.sub5_section .cart_list_wrap .option_btn {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    color: #8C8C8C;
    border: 1px solid #CCCCCC;

}

.sub5_section .cart_list_wrap .option_btn.off {
    opacity: 50%;
    cursor: default;
}

/* 사이즈 텍스트 */
.sub5_section .cart_list_wrap .size {
    color: #888;
    margin-top: 10px;
}

/* 수량 버튼 */
.sub5_section .cart_list_wrap .col_qty button {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

.sub5_section .cart_list_wrap .col_qty input {
    width: 70px;
    height: 30px;
    text-align: center;
    border: 1px solid #ddd;

}

.sub5_section .cart_list_wrap .col_check input[type="checkbox"] {
    cursor: pointer;
}

/* secret modal*/
.secret_modal_wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.secret_modal_bg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.secret_modal_box {
    background: #fff;
    width: 350px;
    padding: 55px;
    border-radius: 10px;
    text-align: center;
}

.secret_modal_title {
    margin-bottom: 20px;
}

.secret_modal_input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.secret_modal_btn_wrap {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.secret_modal_btn {
    padding: 10px 30px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.secret_modal_btn.confirm {
    background: #2DAA66;
    color: #fff;
}

.secret_modal_btn.cancel {
    background: #ddd;
    color: #000;
}
/* mobile */
@media screen and (max-width: 767px) {

    /* sub intro */
    #sub_intro {
        height: 400px;
        padding-top: 60px;
    }

    #sub_intro img {
        /* width: 100%; */
        /* height: 50vh */
    }


    #sub_content {
        word-break: keep-all;
    }

    #sub_content {
        word-break: keep-all;
    }

    #sub_menu {
        backface-visibility: hidden;
        height: 75px;
        margin-top: 0.1px;
    }

    .sub_intro_text {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #sub_menu .sub_menu_center {
        width: 90%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    #sub_content {
        padding: 150px 0 50px;
    }

    #sub_menu ul {
        justify-content: space-around;
        border-left: 1px solid #DDd;
        background-color: #fff;
    }

    #sub_menu ul li {
        padding: 20px 0;
    }

    #sub_menu .home {
        display: none;
    }

    #sub_menu .menu_on {
        min-width: 0;
        padding: 15px 5px;
        align-items: center;
        justify-content: center;
    }

    .sub_section .common_title {
        margin: 0 0 3px;
    }
    #sub_menu .center{
        flex-direction: column;
    }
    /* sub1_1 */
    .sub1_1_section .section1 .img_box img{
        min-height: 250px;
    }
    .sub1_1_section .section1 .value .box_list{
        flex-direction: column;
    }
    .sub1_1_section .section1 .value .box_list .box{
        padding: 25px;
    }

/*    sub2_*/
    .sub2_1_section .item_list,
    .sub2_1_section .product_list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        box-sizing: border-box;
    }
    .sub2_1_section .item_list{
        margin-top: 50px;
    }
/*    sub2_1_d*/
    .sub2_1_d_section .section1{
        flex-direction: column;
        margin-top: 75px;
    }
    .sub2_1_d_section .picture {
    width: 100%;
    }
    .sub2_1_d_section .picture .main_img img{
        height: 350px;
        width: 100%;
    }
    .sub2_1_d_section .picture .thumb_list{
        flex-direction: row;
        width: 100%;
        bottom: -80px;
        top: auto;
        z-index: 999;
    }
    .sub2_1_d_section .picture .thumb_list li img{
        max-height: 80px;
        width: 100%;
        object-fit: cover;
        margin-top: 80px;
    }

    .sub2_1_d_section .item_info{
        width: 100%;
        margin-top: 100px;
    }
    .sub2_1_d_section .section2 .info_graph_wrap{
        width: 100%;
    }
        /*    sub3*/
    .sub3_section .search_boxs{
        flex-direction: column;
        gap: 10px;
    }
    .sub3_section .search_boxs .search .search_box input{
        width: 100%;
    }
    .sub3_section .file_input .btn{
        width: 25%;
        padding: 5px;
    }

/*    cart*/
    .sub5_section .process_wrap{
        display: grid;
        grid-template-columns: repeat(3, 2fr 1fr);
    }
    .sub2_1_d_section .item_info .btn .cart_btn, .sub2_1_d_section .item_info .btn .buy_btn{
        padding: 15px 5px;
    }
    .sub3_section .input_wrap input[type='checkbox']{
        margin-right: 5px;
    }
}

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

    .sub4_1_section .section1 .value .box_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}