.sub_visual{height: 550px; background-position: center; background-size: cover;
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;}
.sub_visual.bg01{background-image: url(../img/sub/bg01.png)}
.sub_visual.bg02{background-image: url(../img/sub/bg02.png)}
.sub_visual.bg03{background-image: url(../img/sub/bg03.png)}
.sub_visual.bg04{background-image: url(../img/sub/bg04.png)}
.sub_visual.bg05{background-image: url(../img/sub/bg05.png)}
.sub_visual.bg06{background-image: url(../img/sub/bg06.png)}


.sub_visual .txt{text-align: center; padding-top: 100px}
.sub_visual .txt p{color: #fff; margin-bottom: 15px; font-size: 20px; font-weight: bold}
.sub_visual .txt h2{color: #fff; font-size: 40px;}

.sub_nav_are{padding:50px 0 }
.sub_nav_are .inner{display: flex; gap:20px; justify-content: center;
    align-items: center;}
.sub_nav_are .inner a{height: 50px; text-align: center; border: 1px solid #182E88; border-radius: 50px; font-size: 18px; 
display: flex; justify-content: center;
    align-items: center; padding: 0 40px; min-width: 140px; color: #182E88; font-weight: 500; transition-duration: .5s}

.sub_nav_are .inner a.on,
.sub_nav_are .inner a:hover{color: #fff; background: #182E88}



.sub_section{padding: 100px 0}
.sub_section.hidden{overflow: hidden}
.sub_section.v_bottom{background: url(../img/sub/value.png); background-position: bottom; background-size: 100%; 
    background-repeat: no-repeat; padding-bottom: 350px}
.sub_section.nobootm{padding-bottom: 0}    
.about_title{text-align: center; margin-bottom: 50px;}
.about_title h3{color: #222; font-size: 22px; line-height: 38px; word-break: keep-all; font-weight: 500}
.about_title h3 b{color: #182E88; font-size: 30px; }

.sub_title{margin-bottom: 50px;}
.sub_title h3{font-size: 30px; color: #222;}
.sub_title p{font-size: 20px; line-height: 30px; word-break: keep-all; color: #222; margin-top: 15px;}

.img_only{overflow: hidden; max-width: 1200px; margin: 0 auto 50px; transition-duration: 1s; height: 450px;}
.img_only img{width: 100%; height: 100%; object-fit: cover;}

.img_only.show{max-width: 100%}


.tlb{}
.tlb table{width: 100%; border-top: 1px solid #ddd; border-spacing: 0}
.tlb th, .tlb td{font-size: 16px; text-align: left; word-break: keep-all; padding: 15px 20px; color: #231815;
border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; line-height: 1.5}
.tlb th:first-child, .tlb td:first-child{border-left: 0}
.tlb th{background: #FBFBFB}

.tlb td.center{text-align: center}
.tlb th.leftb, .tlb td.leftb{border-left: 1px solid #ddd;}

.tlb td b{color: #182E88}

.tlb td p{font-size: 16px; color: #231815; line-height: 1.5; word-break: keep-all; }
.tlb td p + p{margin-top: 10px;}

.flex_tlb{display: flex; gap:40px}
.flex_tlb .tlb{flex:1}



.flex_history{display: flex; gap:80px; justify-content: flex-start;
    align-items: flex-start;}
.flex_history .thum{width: 490px; position: sticky;
    top: 120px;
    left: 0;}
.flex_history .thum img{max-width: 100%}

.flex_history .history_are{flex:1; }
.flex_history .history_are .box{display: flex; padding: 50px 0; border-bottom: 1px solid #ddd; gap:50px}
.flex_history .history_are .box:first-child{padding-top: 0}
.flex_history .history_are .box:last-child{border-bottom: 0}
.flex_history .history_are .box h2{transition-duration: .5s; 
color: #231815; font-size: 30px; font-weight: bold; width: 80px;}
.flex_history .history_are .box.show h2{color: #182E88}

.flex_history .history_are .box li{position: relative; font-size: 18px; word-break: keep-all; padding-left: 45px; line-height: 1.5}
.flex_history .history_are .box li b{font-weight: bold; position: absolute; left: 0; top: 0}

.flex_history .history_are .box li + li{margin-top: 20px}


.about03{position: relative; margin-top: 150px}
.about03 .bg{    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 227px;
}

.about03_are{max-width: 800px; margin: 0 auto; position: relative}
.about03_are .b_round{border: 2px dashed #182E88; width: 800px; height: 800px; position: relative; border-radius: 800px;display: flex;
    justify-content: center;
    align-items: center;}
.about03_are .b_round .m_round{background: #D5D6E6; width: 400px; height: 400px; border-radius: 400px;display: flex;
    justify-content: center;
    align-items: center;}
.about03_are .b_round .m_round .s_round{background: #2B3483; width: 240px; height: 240px; border-radius: 400px;display: flex;
    justify-content: center;
    align-items: center;}

.about03_are .b_round .m_round .s_round h2{color: #fff; font-size: 40px; text-align: center; opacity: 0; transition-duration: 1s}
.about03_are.show .b_round .m_round .s_round h2{opacity: 1}

.t_round{position: absolute;  border: 2px solid #182e88;
border-radius: 200px; width: 200px; height: 200px; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.10);
display: flex;
    justify-content: center;
    align-items: center; background: #fff; 
    font-size: 22px; text-align: center; word-break: keep-all; font-weight: 500; transition-duration: 1s; opacity: 0}


.t_round.txt01{top: -100px; left: 50%; transform: translateX(-50%); transition-delay: 0s}

.t_round.txt02{top: 200px; right: 0; transform: translateX(80px); transition-delay: .5s}
.t_round.txt03{top: 200px; left: 0; transform: translateX(-80px); transition-delay: 2s}

.t_round.txt04{bottom: -30px; right: 80px; transform: translateX(0px); transition-delay: 1s}
.t_round.txt05{bottom: -30px; left: 80px; transform: translateX(-0px); transition-delay: 1.5s}


.show .t_round{opacity: 1}


.about03 .bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 이미지가 영역에 맞게 확장 */
    height: auto; /* 비율 유지 */
    animation: scrollAnimation 10s linear infinite; /* 애니메이션 적용 */
}

@keyframes scrollAnimation {
    0% {
        transform: translateX(-20%); /* 시작 위치 */
    }
    50% {
        transform: translateX(20%); /* 끝 위치 (왼쪽으로 이동) */
    }
    100% {
        transform: translateX(-20%); /* 끝 위치 (왼쪽으로 이동) */
    }
}



.value{display: flex; align-items: flex-start;
    justify-content: space-between; 
    }
    
.value .sub_title{width: 40%}
.value .value_are{flex:1}   
    
.value .box{position: relative; }
.value .box h1{z-index: -1; font-size: 150px; word-break: keep-all; opacity: 0.03;
 position: absolute; right: 100px; bottom: 0}

.value .box .in_box{width: 500px; height: 300px; border: 1px solid #182E88; padding: 50px; position: relative;
display: flex;
    justify-content: flex-start;
    align-items: flex-end; background: rgba(255,255,255,.9); transition-duration: .5s}
.value .box .in_box i{position: absolute; right: 50px; top: 50px}
.value .box .in_box path{fill:#231815;  transition-duration: .5s}
.value .box .in_box .txt h3{font-size: 22px; transition-duration: .5s}
.value .box .in_box .txt p{font-size: 18px; margin-top: 10px; word-break: keep-all;  transition-duration: .5s}


.value .box:nth-child(2) .in_box{margin-left: 400px}
.value .box + .box{margin-top: 80px}




.value .box .in_box.show{background:#182E88 }

.value .box .in_box.show .txt h3,
.value .box .in_box.show .txt p{color: #fff}
.value .box .in_box.show path{fill:#fff}



.location_are{}
.location_are h3{font-size: 20px; color: #182E88}
.location_are .map{margin: 20px 0 30px; overflow: hidden; height: 450px;}
.location_are .map iframe{width: 100%; height: 100%}


.location_are .txt{position: relative}
.location_are .kakao_btn{position: absolute; right: 0; top: 0; 
gap:15px; display: flex; height: 60px; background:#231815; border-radius: 60px; padding: 0 35px; 
justify-content: center;
    align-items: center;}
.location_are .kakao_btn a{color: #fff; font-size: 18px; }
.location_are .kakao_btn span{width: 1px; height: 10px; background: rgba(255,255,255,.5)}


.location_are .txt h2{margin-bottom: 35px; font-size: 30px; font-weight: bold; word-break: keep-all}
.location_are .txt ul{display: flex;gap:25px 70px;flex-wrap: wrap; }

.location_are .txt ul li{display: flex; gap:15px; font-size: 18px; color: #231815; word-break: keep-alll
    justify-content: flex-start;
    align-items: center;}

.location_are .txt ul li.w100{width: 100%}



.location_are + .location_are{margin-top: 80px;}


.ink ul{display: flex; gap:40px;     flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;}
.ink li{width: calc(25% - 30px); text-align: center}

.ink li img{max-width: 100%}

.ink li .thum{border: 1px solid #ddd; position: relative; cursor: pointer}
.ink li .thum .over{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex;
background: rgba(0,0,0,0.5);justify-content: center;
    align-items: center; opacity: 0; transition-duration: .5s}

.ink li .thum:hover .over{opacity: 1}

.ink li .thum .over span{background:#182E88 url(../img/sub/plus.png); width: 55px; height: 55px; position: absolute; 
border-radius: 55px; left: 50%; top: 50%; background-position: center; background-repeat: no-repeat;transform: translate(-50%, -50%);}

.ink li p{margin-top: 15px; font-size: 18px; word-break: keep-all}


#popup-layer {
    display: none; /* 초기에는 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 0px;
    text-align: center;
    max-width: 500px;
}

.popup-content img {
    max-width: 100%;
    height: auto;
}

.close-popup {
    position: absolute;
    right: -40px;
    top: 20px;
    border: 0;
    background: transparent;
}


.product .tab {
  display: flex;
  align-items: center;
}
.product .tab__item {
  flex:1;
  font-size: 22px; color: #ddd;
  border-bottom: 1px solid #ddd;
  text-align: center
}

.product .tab__item a{color: #ddd; font-weight: bold; transition-duration: .5s; display: block; padding: 15px}

.product .tab__item.active {
  border-color: #182E88
}

.product .tab__item.active a{color: #182E88}

.product .tab__content-wrapper {
  margin-top: 80px;
}
.product .tab__content {
  display: none;
}
.product .tab__content.active {
  display: block;
}





.sub_title_s{margin-bottom: 40px;}
.sub_title_s h3{font-size: 22px; color: #231815; }
.sub_title_s h3 b{color: #182E88}

.sub_title_s p{font-size: 18px; line-height: 27px; word-break: keep-all;}
.sub_title_s p b{color: #182E88; font-weight: 500}
.sub_title_s h3 + p{margin-top: 15px;}

.sub_title_s p + p{margin-top: 10px}

.sub_title_s p span{font-weight: 500}
.sub_title_s p.gray{color: #333}

.product_only{}
.product_only .thum{background: #F1F2F4; padding: 20px}
.product_only .thum img{max-width: 100%; display: block; margin: 0 auto; mix-blend-mode: multiply;}

.product_only p{word-break: keep-all; font-size: 16px; margin-top: 15px; color: #BCBCBC}

.step_flex{display: flex; gap:40px}
.step_flex .box{flex:1; padding: 30px; height: 250px; border: 1px solid #ddd; 
display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; transition-duration: .5s}
.step_flex .box h4{font-weight: bold; font-size: 22px;; color: #222 }
.step_flex .box p{word-break: keep-all; font-size: 18px; word-break: keep-all; line-height: 1.5; color: #222}



.step_flex .box*{transition-duration: .5s}
.step_flex .box:hover{background: #182E88; border-color: #182E88}

.step_flex .box:hover h4,
.step_flex .box:hover p{color: #fff}


.flex_img_box{border: 1px solid #ddd; padding: 30px; display: flex; gap: 50px; justify-content: flex-start;
    align-items: center;}
.flex_img_box p{word-break: keep-all; font-size: 18px; word-break: keep-all; line-height: 1.5; color: #222; flex:1}
.flex_img_box img{width: 50%}

ul.dist{flex:1}
ul.dist li{padding-left: 15px; position: relative; word-break: keep-all; font-size: 18px; word-break: keep-all; line-height: 1.5; color: #222}
ul.dist li:after{content: '·'; position: absolute; left: 0; top: 0}

.block_img_box{border: 1px solid #ddd; padding: 30px; display: block; text-align: center}
.block_img_box p{word-break: keep-all; font-size: 18px; word-break: keep-all; line-height: 1.5; color: #222; margin-top: 50px;}

.icon_flex{border: 1px solid #ddd; }
.icon_flex .in_box{display: flex; border: 3px solid #fff}

.icon_flex .in_box i{width: 125px; height: 125px;
display: flex;
    justify-content: center;
    align-items: center;}
.icon_flex .in_box i path{fill:#222}

.icon_flex .in_box .txt{background: #F3F4F9; padding:25px; flex:1 ;
display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;}
.icon_flex .in_box .txt h3{font-size: 20px; color: #231815}
.icon_flex .in_box .txt p{font-size: 18px; word-break: keep-all; line-height: 1.5; color: #222; margin-top: 10px}

.icon_flex + .icon_flex {margin-top: 20px}
.icon_flex, .icon_flex *{transition-duration: .5s}


.icon_flex:hover{border-color: #182E88}

.icon_flex:hover .in_box{border-color: #182E88}
.icon_flex:hover .in_box .txt{background: #fff}
.icon_flex:hover .in_box i{background: #182E88}
.icon_flex:hover .in_box i path{fill:#fff}


.only_txt{margin-top: 30px}
.only_txt p{word-break: keep-all; font-size: 18px; word-break: keep-all; line-height: 1.5; color: #222;}



.bu_are{}
.bu_are .box{ border-bottom: 1px solid #ddd; padding: 50px; position: relative; cursor: pointer}
.bu_are .box h3{font-size: 22px; word-break: keep-all; color: #231815}
.bu_are .box ul.dist{margin-top: 0px; visibility: hidden; height: 0; max-height: 0; transition-duration: 0s}
.bu_are .box ul.dist li{}


.bu_are .box .hv_img{max-width: 500px; position: absolute; right: 0; top: 0; z-index: 2; visibility: hidden; opacity: 0; transition-duration: .5s}
.bu_are .box .hv_img img{width: 100%}


.bu_are .box.atvbox h3{color: #182E88}

.bu_are .box.atvbox .hv_img{opacity: 1; visibility: visible}

.bu_are .box.atvbox ul.dist{margin-top: 15px; height: auto; max-height: 500px; visibility: visible; transition-duration: .5s}

.bu_last{background: url(../img/sub/bu_last.png); background-size: cover; 
background-position: center; height: 400px; padding: 0 25px; text-align: center;
display: flex;
    justify-content: center;
    align-items: center; flex-direction: column;}
.bu_last.bg02{background-image:  url(../img/sub/bu_last02.png);}    
 .bu_last.bg03{background-image:  url(../img/sub/bu_last03.png);}       
.bu_last p{color: #fff; font-weight: bold; font-size: 30px; word-break: keep-all; line-height: 1.5; display: block}
.bu_last p.small{font-size: 20px; font-weight: 400;margin-top: 5px}


.tab__content .tlb th{text-align: center}
.tab__content .tlb th.left{text-align: left}

.flex_bu_top{display: flex; align-items: flex-start;
    justify-content: space-between; margin-bottom: 60px}
.flex_bu_top .flex_top_icon{display: flex; gap:40px; }
.flex_bu_top .flex_top_icon .box{flex:1; text-align: center}
.flex_bu_top .flex_top_icon .box i{width: 150px; height: 150px; border: 1px solid #ddd; border-radius: 150px;     display: flex;
    justify-content: center;
    align-items: center;}
.flex_bu_top .flex_top_icon .box p{margin-top: 10px; font-size: 18px; word-break: keep-all; color: #222; font-weight: 500}



.flex_bu_top .sub_title{margin: 0;}


.bu_box_step{display: flex; gap:20px;     justify-content: flex-start;
    align-items: center;}
.bu_box_step .box{border: 1px solid #ddd; height: 200px; flex:1; text-align: center;display: flex;
    justify-content: center;
    align-items: center;}
.bu_box_step .box p{font-size: 18px; line-height: 1.5; word-break: keep-all}

.bu_box_step + .bu_box_step{margin-top: 60px;}


.bu_box_step .box.last{border: 3px solid #182E88; }
.bu_box_step .box.last p{font-weight: bold}



.flex_hover{display: flex; gap:40px; }
.flex_hover .box{height: 300px; padding: 40px;background: #000 ;flex: 1 1 0%; transition-duration: 1s ;
display: flex;
    justify-content: flex-start;
    align-items: flex-end; background-position: center; background-size: cover}
.flex_hover .box p{color: #fff; font-size: 18px; word-break: keep-all; opacity: 0; transition-duration: 1s; visibility: hidden}
.flex_hover .box:last-child{margin-left: auto}
.flex_hover .box:hover,
.flex_hover .box.boxh{flex: 3 1 0%}

.flex_hover .box:hover p,
.flex_hover .box.boxh p{opacity: 1; visibility: visible}

.flex_hover .box:nth-child(1){background-image: url(../img/sub/flex_hover01.png);}
.flex_hover .box:nth-child(2){background-image: url(../img/sub/flex_hover02.png)}
.flex_hover .box:nth-child(3){background-image: url(../img/sub/flex_hover03.png)}


.flex_box_border{display: flex; gap: 40px}
.flex_box_border .box{flex:1; text-align: center; border: 1px solid #ddd}
.flex_box_border .box img{width: 100%}
.flex_box_border .box p{padding: 20px ; font-size: 18px; line-height: 1.5; word-break: keep-all; color: #222}




.sub_board_slide{margin: 0px -20px 0}
.sub_board_slide .slick-slide{padding: 0 20px}
.sub_board_slide .slick-slide img{width: 100%; aspect-ratio: 1;}




.sub_title_s.if_slide{position: relative}
.sub_title_s.if_slide .sub_slide_btn{position: absolute; right: 0; bottom: 0; display: flex; gap:15px}

.sub_title_s.if_slide .sub_slide_btn span{cursor: pointer}

.point_box{padding: 40px; border: 1px solid #ddd; background: #fbfbfb}
.point_box h3{font-size: 18px; padding-left: 30px; position: relative; margin-bottom: 10px}
.point_box h3 img{position: absolute; left: 0; top: 0}

.point_box h4{font-size: 18px; position: relative; margin-bottom: 10px}

.point_box p{font-size: 18px; position: relative; }

.point_box ol li{font-size: 18px; line-height: 1.5; word-break: keep-all}
.point_box ol li + li{margin-top: 10px}


.flex_bu2{display: flex; gap:40px;}
.flex_bu2 .box{flex:1}

.flex_bu2 .box h3{font-size: 22px; line-height: 1.5; word-break: keep-all}
.flex_bu2 .box p{margin: 10px 0 20px; font-size: 18px; line-height: 1.5; word-break: keep-all}
.flex_bu2 .box img{max-width: 100%}

.efft{}
.efft .box{padding: 20px 40px; border: 1px solid #ddd; background: #FBFBFB}
.efft .box p{position: relative; padding-left: 30px; font-size: 18px; line-height: 1.5; word-break: keep-all}
.efft .box p img{position: absolute; left: 0; top: 3px}

.efft .box + .box{margin-top: 10px}

.flex_scl{display: flex; gap:20px;    justify-content: flex-start;
    align-items: center;}
.flex_scl .box{flex:1; text-align: center; border: 1px solid #ddd}
.flex_scl .box h3{color: #fff; font-size: 18px; word-break: keep-all; background: #182E88; padding: 20px; }
.flex_scl .box .in_box{padding: 40px 20px; }
.flex_scl .box .in_box p{font-size: 18px; line-height: 1.5; word-break: keep-all}



.point_center{border:1px solid #ddd; background: #FBFBFB; padding: 20px; text-align: center}
.point_center p{font-size: 20px; color: #182E88; font-weight: 600; word-break: keep-all; line-height: 1.5}

.point_center.flex_p{display: flex; justify-content: center;
    align-items: center;
    gap: 10px;}
.point_center.flex_p p span{display: block; padding: 10px; }
.point_center.flex_p p span + span{border-top: 1px solid #182E88}

.flex_33{display: flex; gap:15px}
.flex_33 .box{ width: calc(33.33% - 16px - 14.44px)}
.flex_33 .box .top{text-align: center; border: 1px solid #ddd; background: #FBFBFB; padding: 20px;}
.flex_33 .box .top h3{font-size: 18px; word-break: keep-all}

.flex_33 .box .txt{margin-top: 10px; border: 1px solid #ddd; padding: 30px 20px; min-height: 160px}

.flex_33 .box .txt ul.dist li{font-size: 16px;}
.flex_33 .left{padding: 20px 0; width: 16px;}


.flex_33 + .flex_33{margin-top: 30px;}

p.option_txt{font-size: 16px; word-break: keep-all; line-height: 1.5; color:#BCBCBC; margin-top: 20px }
p.option_txt.right{margin-bottom: 20px; margin-top: 0; text-align: right}


.txt_p{margin-top:30px; }
.txt_p p{font-size: 18px; word-break: keep-all; line-height: 1.5; color: #222}

.flex_bu_last{display: flex; gap:30px;}
.flex_bu_last .box{border: 1px solid #ddd; padding: 50px; text-align: center; flex:1}
.flex_bu_last .left{display: flex;
    justify-content: center;
    align-items: center;}


.flex_bu_last .box .txt h2{width: 290px; color: #fff; 
font-size: 18px; word-break: keep-all; line-height: 1.5; padding: 20px; background: #182E88; margin: 0 auto;}
.flex_bu_last .box .txt p{margin-top: 15px; font-size: 18px; line-height: 1.5; word-break: keep-all; color: #222}

.flex_bu_last .box .txt + .txt{margin-top: 40px;}


.flex_bu_last .box:last-child .txt h2{background: #0E833E}


.flex_bu_last .box .txt ul{margin-top: 15px; display: flex; gap: 30px;align-items: center;
    justify-content: center; }
.flex_bu_last .box .txt ul li{}
.flex_bu_last .box .txt ul li p{margin-top: 10px;}





.gall_list_style {display: flex; gap:30px;     flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}


.gall_list_style li{width: calc(25% - 22.5px)}
.gall_list_style li .thum_board{width: 100%; height: 100%; object-fit: cover;}


.gall_list_style li .gall_img a{position: relative; display: block}
.gall_list_style li .gall_img a .over{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex;
background: rgba(0,0,0,0.5);justify-content: center;
    align-items: center; opacity: 0; transition-duration: .5s}

.gall_list_style li .gall_img a:hover .over{opacity: 1}

.gall_list_style li .gall_img a .over span{background:#182E88 url(../img/sub/plus.png); width: 55px; height: 55px; position: absolute; 
border-radius: 55px; left: 50%; top: 50%; background-position: center; background-repeat: no-repeat;transform: translate(-50%, -50%);}


.board_common_btn_list{margin-top: 80px}
.board_common_btn_list ul{display: flex; gap:10px; justify-content: center;}
.board_common_btn_list ul a, .board_common_btn_list ul button{padding: 20px 30px; font-size: 18px; color: #fff; background: #333; border-radius: 100px;
 display: inline-flex; gap:10px;align-items: center; border: 0}


.board_detail_title{text-align: center}
.board_detail_title h2{font-size: 40px; }
.board_detail_title p{font-size: 16px; color: #CBCBCB; margin-top: 20px;}

.board_detail_content{margin-top: 60px; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 60px 20px}
.board_detail_content img{max-width: 100%; margin: 0 auto; display: block}
.board_detail_content p{font-size: 18px; word-break: keep-all; line-height: 1.5}



.common_btn{display: flex; gap:10px; justify-content: center; }
.common_btn a{padding: 20px 30px; font-size: 18px; color: #fff; background: #182E88; border-radius: 100px;
 display: inline-flex; gap:10px;align-items: center; border: 0}


.common_btn + .admin_only{margin-top: 60px}


.board_list_custom{border-top: 1px solid #ddd}
.board_list_custom .box{background: #fff;border-bottom: 1px solid #ddd ; position: relative}
.board_list_custom .box p{font-size: 16px; color: #BCBCBC; margin-bottom: 10px;}

.board_list_custom .box h2{word-break: keep-all; font-size: 18px; line-height: 1.5; color: #231815; transition-duration: .5s}

.board_list_custom .box a{display: block; padding: 45px 25px; transition-duration: .5s}

.board_list_custom .box a:hover{background: #FBFBFB}
.board_list_custom .box a:hover h2{color: #182E88}

.board_list_custom .box .td_chk{position: absolute; left: 10px; top: 10px}

.total_custom{margin-bottom: 20px}
.total_custom p{font-size: 18px; line-height: 1.5; color: #231815}
.total_custom p b{color: #182E88}


.search_board_are{margin-bottom: 60px;}
.search_board_are .sch_bar{display: flex; border-bottom: 2px solid #222; max-width: 520px; margin: 0 auto}
.search_board_are .sch_bar input{font-size: 18px; border: 0; padding: 15px; flex:1}
.search_board_are .sch_bar button{padding: 15px;border: 0;
    background: transparent;}




.form_in ul{display: flex; gap:40px 20px;flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.form_in ul li{width: calc(50% - 10px)}
.form_in ul li.w100{width: 100%}

.form_in input, .form_in select{background: #fff; height: 60px; line-height: 60px;
 border-radius: 0px; padding: 0 20px; font-size: 16px; color: #1D1D1B; border: 0; width: 100%; border: 1px solid #ddd}

.form_in ul li label{color: #1D1D1B; font-size: 18px; margin-bottom: 10px; display: block; font-weight: bold}
.form_in ul li label span{color: #182E88}



.form_in textarea{background: #fff; height: 200px; line-height: 22px;
 border-radius: 0px; padding: 15px 20px; font-size: 16px; border: 0; width: 100%; border: 1px solid #ddd}


.form_in .common_btn{justify-content: center; background: #182E88; color: #fff; font-size: 18px; border: 0; 
border-radius: 60px; height: 60px; padding: 0 70px;     display: flex;
    align-items: center; font-weight: 500}





.ck_agree{display: flex; margin-top: 40px; gap:10px; justify-content: flex-start;
    align-items: center;}
.ck_agree input{display: none}
.ck_agree input + label{width: 22px; height: 22px; background: url(../img/ckoff.png); display: block; cursor: pointer; background-repeat: no-repeat; background-position: center; 
background-size: 100% auto}

.ck_agree p{color: #1D1D1B; font-size: 16px;}

.ck_agree input:checked + label{background-image:  url(../img/ckon.png);}

.ck_agree p a{color: #182E88; text-decoration: underline; font-weight: 500}


.form_in .common_btn{margin: 80px auto 0}



.agree_pop{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.5)}
.agree_pop.atv_pop{display: block}

.agree_pop_content{position: absolute; left: 50%;
  top: 50%; background: #fff; padding: 60px; border-radius: 20px;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}



.agree_pop_content .agree_title{position: relative; }

.agree_pop_content .agree_title h2{font-size: 25px;}
.agree_pop_content .agree_title .close_pop{position: absolute; right: 0; top: 0; cursor: pointer}

.agree_pop_info{max-height: 400px; overflow-y: auto; margin-top: 15px; padding: 15px 0; border-top: 1px solid #ddd}
.agree_pop_info h3{font-size: 18px; font-weight: bold; word-break: keep-all; margin-bottom: 10px}
.agree_pop_info p{font-size: 16px; font-weight: 400; word-break: keep-all}
.agree_pop_info p + h3{margin-top: 30px}











/*241210*/
.flex_new{display: flex; gap:40px;}
.flex_new .thum{width: 400px; border: 1px solid #ddd}
.flex_new .thum img{max-width: 100%}

.flex_new .txt{flex:1}
.flex_new .txt h3{font-size: 22px; color: #231815; margin-bottom: 20px}


.flex_new_color{display: flex; gap:40px;}
.flex_new_color .thum{width: 40%; border: 1px solid #ddd;
display: flex;
    justify-content: center;
    align-items: center;}
.flex_new_color .thum img{max-width: 100%}

.flex_new_color .txt{flex:1; display: flex; gap:20px; flex-wrap: wrap;}
.flex_new_color .txt span{width: calc(25% - 15px); height: 150px;}

.flex_new_color .txt span:nth-child(1){background: #9F9EA3}
.flex_new_color .txt span:nth-child(2){background: #C3AD98}
.flex_new_color .txt span:nth-child(3){background: #88A3B3}
.flex_new_color .txt span:nth-child(4){background: #DFDBD1}
.flex_new_color .txt span:nth-child(5){background: #A0BABE}
.flex_new_color .txt span:nth-child(6){background: #C2AFD1}
.flex_new_color .txt span:nth-child(7){background: #A6CEDE}
.flex_new_color .txt span:nth-child(8){background: #EAA4C9}


.bipv_icon_flex{display: flex; gap:40px}
.bipv_icon_flex .box{flex:1; padding: 40px; border: 1px solid #ddd; padding-top: 120px; position: relative}
.bipv_icon_flex .box img{position: absolute; right: 40px; top: 40px}
.bipv_icon_flex .box h3{font-size: 22px; color: #231815; margin-bottom: 20px}
.bipv_icon_flex .box p{font-size: 16px; color:#182E88; word-break: keep-all; margin-top: 10px ; padding: 0 15px}


.bipv_img_flex{display: flex; gap:20px;    justify-content: flex-start;
    align-items: center;}
.bipv_img_flex .box{flex:1; text-align: center; border: 1px solid #ddd; text-align: left}


.color_p_flex{display: flex; gap:20px;flex-wrap: wrap;}
.color_p_flex .box{width: calc(20% - 16px); text-align: center; border: 1px solid #ddd; padding: 10px}
.color_p_flex .box p{font-size: 16px; margin-top: 10px;}
.color_p_flex .box .color_box{height: 20vh; width: 100%; display: block; background: #333}



@media (max-width: 1660px) {

.tlb{overflow-x: auto}

}


@media (max-width: 1580px) {

.flex_bu2 .box p{font-size: 16px;}
.bu_are .box .hv_img{max-width: 400px}

.bipv_img_flex .box img{max-width: 100%}


}


@media (max-width: 1280px) {

  .sub_visual{height: 400px}
  .about03_are{max-width: 600px}
  .about03_are .b_round{width: 600px; height: 600px}
  .t_round.txt04{bottom: -60px; right: 60px;}
  .t_round.txt05{bottom: -60px; left: 60px}
  
  .location_are .txt h2{font-size: 24px}
  
  .ink ul{gap:20px}
  .ink ul li{width: calc(25% - 15px)}
  
  .product .tab__item,
  .bu_are .box h3{font-size: 18px; line-height: 1.5}
  
  .sub_title_s p{line-height: 1.5; font-size: 16px}
  .step_flex .box p, .flex_img_box p, .block_img_box p,
  ul.dist li,
  .icon_flex .in_box .txt p,
  .only_txt p,
  .bu_last p.small,
  .point_box ol li,
  .efft .box p,
  .point_box p{font-size: 16px; line-height: 1.5}
  
  
  
  
  .point_box,
  .efft .box{padding: 25px}
  
  .flex_scl .box h3, .flex_scl .box .in_box p,
  .board_detail_content p{font-size: 16px; line-height: 1.5}
  
  .flex_img_box p br,
  .flex_bu2 .box p br{display: none}
  
  
  .icon_flex .in_box .txt h3{font-size: 18px}
  .flex_bu2{gap:20px}
  
  .bu_last{height: 300px}
  .bu_last p{font-size: 24px}
  
  
  .sub_title p{font-size: 18px; line-height: 1.5}

	.flex_bu_top .flex_top_icon .box i{width: 140px; height: 140px}
	.flex_bu_top .flex_top_icon .box p{font-size: 16px}
	
	
	.flex_box_border{gap:20px}	
	
	.sub_board_slide {
    margin: 0px -10px 0;}
	.sub_board_slide .slick-slide{padding: 0 10px}
	
	.sub_title_s.if_slide .sub_slide_btn{gap:10px}
	.sub_title_s.if_slide .sub_slide_btn span{max-width: 40px}
	.sub_title_s.if_slide .sub_slide_btn span img{max-width: 100%}
	
	
	.gall_list_style{gap:20px}
	
	.gall_list_style li {
    width: calc(25% - 15px);}
    
    
    .board_detail_title h2{font-size: 24px}

	.flex_tlb,
	.flex_hover{gap:20px}

}




@media (max-width: 1024px) {

.sub_nav_are .inner{gap:10px}


.flex_history {
    display: flex;
    gap: 60px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.flex_history .thum {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
}

.flex_history .history_are {
    flex: none;
    width: 100%;
}

.value {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    gap: 60px;
}

.value .value_are {
    flex: none;
    width: 100%;
}

.value .box:nth-child(2) .in_box {
    margin: 0 0 0 auto;
}

.ink ul li {
        width: calc(33.33% - 13.33px);
    }


.step_flex {
    gap: 20px;
    flex-wrap: wrap;
}

.step_flex .box{flex:none; width: calc(50% - 10px)}
.flex_img_box {
    border: 1px solid #ddd;
    padding: 25px;
    gap: 30px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.flex_img_box img {
    width: 100%;
}

.block_img_box{text-align: left}

.block_img_box p br{display: none}

ul.dist, .flex_img_box p{width: 100%; flex:none}

.bu_are .box .hv_img{position: relative; max-height: 0; overflow: hidden; height: 0; display: block}

.bu_are .box.atvbox .hv_img{height: auto; max-height: 400px; margin-top: 30px}


.flex_bu_top {
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 60px;
    flex-direction: column;
    gap: 50px;
}

.sub_title p br{display: none}

.flex_scl {
    flex-wrap: wrap;
}

.flex_scl .box {
    flex: none;
    text-align: center;
    border: 1px solid #ddd;
    width: calc(33.33% - 13.33px);
}

.flex_scl .left{display: none}


.flex_bu_last {
    gap: 30px;
    flex-direction: column;
}


.flex_bu_last .left img{}

    .flex_bu_last .left img {
        rotate: 90deg;
    }
    
    
.color_p_flex .box .color_box{height: 10vh}    

}




@media (max-width: 860px) {

.sub_nav_are {display: none}
 
 
.sub_visual .txt p{font-size: 14px}
.sub_visual .txt h2{font-size: 30px}

.about_title h3 b{display: block}
.about_title h3{font-size: 18px; line-height: 1.5}


.flex_tlb {
    gap: 20px;
    flex-direction: column;
}

.flex_tlb .tlb {
    flex: none;
    width: 100%;
}

.flex_tlb .tlb th{width: 25%}
.about_title h3 b{font-size: 24px; margin-bottom: 10px}

.flex_history .thum img{width: 100%}


.t_round,
.about03_are .b_round .m_round .s_round h2{opacity: 1}

    .about03_are {
        max-width: 100%;
    }
    
    
.about03_are .b_round {
        width: 100%;
        height: auto;
        border: 0;
        border-radius: 0;
    }

.about03_are .b_round .m_round {
    background: #fff;
    width: 100%;
    height: auto;
    border-radius: 0;
    justify-content: center;
    align-items: center;
}


.about03_are .b_round .m_round .s_round{border-radius: 0; width: 100%; height: auto; padding: 25px;}
.about03_are .b_round .m_round .s_round h2{font-size: 24px}


.about03{margin-top: 50px}

.t_round{position: relative; width: 100%; border-radius: 0; height: auto; padding: 25px; margin-top: 10px; font-size: 16px}

.t_round.txt01,
.t_round.txt02,
.t_round.txt03,
.t_round.txt04,
.t_round.txt05{left: 0; top: 0; right: 0; bottom: 0; transform: translateX(-0%);}


.location_are .txt ul{gap:15px 25px}

.location_are .kakao_btn a{font-size: 14px}

.block_img_box img{max-width: 100%}

.img_only{height: 300px}

.bu_are .box{padding: 25px}


.sub_title h3{font-size: 24px}

    .flex_box_border {
        gap: 20px;
        flex-wrap: wrap;
    }

.flex_box_border .box {
    flex: none;
    text-align: center;
    border: 1px solid #ddd;
    width: calc(50% - 10px);
}


.flex_box_border .box p{font-size: 16px}

.flex_bu_top .flex_top_icon {

    gap: 30px;
    width: 100%;
    justify-content: center;
}

.flex_bu_top .flex_top_icon .box {
    flex: none;
    text-align: center;
}

.flex_hover .box:hover, .flex_hover .box.boxh {
    flex: none;
    width: 100%;
}

.flex_hover .box{
	flex: none;
    width: 100%;
}

.flex_tlb, .flex_hover {
        gap: 20px;
        flex-direction: column;
    }

.flex_hover .box p{opacity: 1;
    visibility: visible;}

.flex_bu2 {
    gap: 20px;
    flex-direction: column;
}

.flex_bu2 .box {
    flex: none;
    width: 100%;
}

.flex_33 {
    gap: 15px;
    flex-direction: column;
}

.flex_33 .box {
    width: 100%;
}

.flex_33 .left{display: none}


.flex_33 + .flex_33 {
    margin-top: 15px;
}


.point_center p{font-size: 16px}


.gall_list_style li {
        width: calc(33.33% - 13.33px);
    }


.form_in ul li {
    width: 100%;
}


.agree_pop_content{max-width: 94%; padding: 25px; border-radius: 0}

.agree_pop_content .agree_title h2{font-size: 18px}
.agree_pop_info p{font-size: 14px; line-height: 1.5}


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

.flex_new .thum{width: 100%; height: auto;
        display: flex;
        justify-content: center;
        align-items: center;}



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

.flex_new_color .thum{width: 100%}

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





}




@media (max-width: 600px) {

    .sub_visual {
        height: 300px;
    }
    
    .sub_visual .txt p{font-size: 14px;}
    .sub_visual .txt h2{font-size: 24px}
    
    .sub_title h3{font-size: 20px}
    
    .about_title h3 b{font-size: 20px}
    .about_title h3 {font-size: 14px;}
    .about_title h3 br{display: none}
    
    .tlb th, .tlb td, .tlb td p{font-size: 14px; padding: 15px 10px}
    
    .flex_history .history_are .box h2{font-size: 18px; width: 40px}
    .flex_history .history_are .box li{font-size: 14px; padding-left: 30px}
    
    .about03_are .b_round .m_round .s_round h2{font-size: 16px}
    .value .sub_title{width: 100%; margin: 0}
    
    .value .box .in_box{width: 100%; height: 25vh; padding: 30px}
    
    .value .box + .box{margin-top: 40px}
    
    .value .box .in_box .txt h3{font-size: 16px}
    .value .box .in_box .txt p{font-size: 14px}
    
    .value .box .in_box i{top: 25px; right: 25px}
    
    .sub_section.v_bottom{padding-bottom: 100px}
    
    .location_are .map{height: 30vh}
    
    .location_are .kakao_btn{height: 40px; position: relative; margin-top: 40px; border-radius: 5px}
    
    .location_are .txt h2{font-size: 18px; margin-bottom: 20px}
    .location_are .txt ul{gap:10px}
    .location_are .txt ul li{font-size: 14px; width: 100% }
    .location_are .txt ul li img{display: none}
    
    .location_are h3{font-size: 16px}
    
    .ink ul li {
        width: calc(50% - 10px);
    }
    
    .ink li p{font-size: 14px; text-align: center; line-height: 1.5}
    .popup-content{max-width: 60%; width: 100%}
    
    .product .tab__item a{padding: 10px; font-size: 14px}
    
    
    .sub_title_s h3{font-size: 18px}
    .sub_title_s p,
    .product_only p{font-size: 14px}
    .sub_title_s p br{display: none}
    
        .step_flex .box {
        flex: none;
        width: 100%;
        height: auto; gap:40px
    }
    
    .step_flex .box h4{font-size: 16px}
    .step_flex .box p, .flex_img_box p, .block_img_box p, ul.dist li, .icon_flex .in_box .txt p, .only_txt p, .bu_last p.small, .point_box ol li, .efft .box p, .point_box p{font-size: 14px}
    
    .icon_flex .in_box {
    border: 3px solid #fff;
    flex-direction: column;
}

.icon_flex .in_box i {
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 15px;
}


.bu_are .box{padding: 25px 0}
.bu_are .box h3{font-size: 16px;}

.bu_last p{font-size: 16px}    

.bu_last {
        height: auto;
        padding: 50px 20px;
    }

    .flex_bu_top .flex_top_icon .box i {
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
    }


.flex_bu_top .flex_top_icon{gap:20px;}
.flex_bu_top .flex_top_icon .box{flex:1}
.flex_bu_top .flex_top_icon .box p{font-size: 12px}

.bu_box_step {
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.bu_box_step .box{flex:none; width: 100%; padding: 20px; height: auto}
.bu_box_step .left{display: none}

.bu_box_step + .bu_box_step{margin-top: 20px}

.bu_box_step .box p{font-size: 16px}

.flex_hover .box{height: 30vh; padding: 25px}

.flex_hover .box p{font-size: 14px; line-height: 1.5}

.flex_box_border .box{width: 100%}

.sub_title p,
.flex_bu2 .box p{font-size: 14px}

.product .tab__item{flex:none}
.flex_scl .box{width: 100%}

.flex_33 .box .top h3,
.flex_33 .box .txt ul.dist li,
.txt_p p,
p.option_txt,
.flex_box_border .box p{font-size: 14px}

.point_center.flex_p {
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-direction: column;
}
    .point_center p {
        font-size: 14px;
    }


.flex_bu_last .box{padding: 20px}

.flex_bu_last .box .txt h2{width: 100%; font-size: 16px}
.flex_bu_last .box .txt p{font-size: 14px}

.flex_bu_last .box .txt ul {
    margin-top: 15px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.flex_bu_last .box .txt ul li img{max-width: 30px}

    .gall_list_style li {
        width: calc(50% - 10px);
    }

.board_detail_title h2{font-size: 18px}
.board_detail_title p{font-size: 12px}


.common_btn a {
    padding: 15px 30px;
    font-size: 14px;
    color: #fff;
    background: #182E88;
    border-radius: 5px;
    gap: 10px;
    align-items: center;
    border: 0;
}


.form_in .common_btn{font-size: 14px; border-radius: 5px; height: 40px}

.search_board_are .sch_bar input {
    font-size: 14px;
    border: 0;
    padding: 15px;
    flex: none;
    width: calc(100% - 40px);
}

.search_board_are .sch_bar button {
    padding: 0;
    border: 0;
    background: transparent;
    width: 40px;
}

.total_custom p{font-size: 14px}

.board_list_custom .box a {
    display: block;
    padding: 30px 15px;
    transition-duration: .5s;
}


.board_list_custom .box p{font-size: 12px}
.board_list_custom .box h2{font-size: 16px}

.form_in ul li label{font-size: 14px}

.form_in input, .form_in select{height: 50px; line-height: 50px; padding: 15px; font-size: 14px}
.form_in textarea{font-size: 14px; padding: 15px}

.ck_agree p,
.bipv_icon_flex .box p{font-size: 14px}



.color_p_flex .box {
    width: calc(50% - 11px);}

.color_p_flex .box p{font-size: 14px}

.bipv_img_flex {
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}


.bipv_img_flex .left img{}
.bipv_img_flex .left img {
        transform: rotate(90deg);
    }

.bipv_icon_flex .box h3{font-size: 16px; word-break: keep-all}

}



@media (max-width: 410px) {



  
}