@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	" board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods "
	" layout/popup.html "

	위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다.

	** header, footer, main 관련은 /css/skin.css 에 있습니다.

───────────────────────────────────────────────────────────*/








/*───────────────────────────────────────────────────────────
	
	common.css 커스텀 css 아래에 작성

───────────────────────────────────────────────────────────*/

/*───────────────────────────────────────────────────────────
	
	** navigation, button 관련 css 영역

───────────────────────────────────────────────────────────*/


/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
    .btn, .btn_lg, .btn_sm, .btn_md {position: relative;display: inline-flex;align-items: center;justify-content: center;border:1px solid;font-weight: 600;box-sizing: border-box;font-family: var(--font-type02);color: var(--black-color00); line-height: 1.2; border-radius: 4px; overflow: hidden;}

    .btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;}
    .btn {min-width: 180px;height: 60px;padding: 0 20px;font-size: 110%;}
    .btn_lg {width:92px;height:72px;line-height:70px;font-size:14px;}
    .btn_md {width:60px;line-height:28px;height:30px;font-size:13px;}
    .btn_sm {height:30px;line-height:28px;width:auto;padding:0 8px;font-size:inherit;border-color:#aaa;background-color:#aaa;color:#fff;}

    #wrap .btn_point{border-color: var(--point-color01);background-color: var(--point-color01);}
    #wrap .btn_wh{border-color: var(--point-white);background-color: var(--point-white);color: var(--black-color00);}
    #wrap .btn_basic{border-color:#777;background-color:#777;color:#fff;}
    #wrap .btn_default{border-color:#aaa;background-color:#aaa;color:#fff;}
    #wrap .btn_info{border-color:#d3d3d3;background-color:#fff;color:#555;}
    #wrap .btn_reset{border-color:#d3d3d3;background:#fff url('../images/common/icon_btn_reset.gif') no-repeat 9px 50%;padding:0 10px 0 30px;color:#555;}

    .btn_wrap {margin:0 auto;padding:60px 0 0;vertical-align:top;display:inline-flex; justify-content: center; flex-wrap: wrap; gap: 15px;font-size: var(--title-20);}
    .btn_wrap button > a, .btn_wrap a > a{margin-left:0;}
    .view_btn .btn_wrap.ta_right {position:absolute;right:0;top:0;}

	@media screen and (max-width:1023px) {
        .btn_wrap{padding-top: clamp(30px, 6vw, 60px);}
		.view_btn .btn_wrap.ta_left {position:absolute;left:0;top:0;}
        .btn {min-width: 170px;height: 55px;}
	}
    @media screen and (max-width:860px) {
        .btn {min-width: 160px;height: 50px;}
	}
    @media screen and (max-width:640px) {
        .btn {min-width: 150px;}
	}
    @media screen and (max-width:479px) {
        .btn_wrap{gap: 10px;}
        .btn {min-width: 130px;height: 45px; font-size: 100%;}
	}


/*───────────────────────────────────────────────────────────
	
	** sub_visual

───────────────────────────────────────────────────────────*/

.sub_visual { position: relative; height: 640px; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 45px; box-sizing: border-box; }
.sub_visual .main_title { display: flex; align-items: center; height: 100%; font-size: var(--title-20); padding-bottom: 5px; }
.sub_visual .main_title h2 { margin-bottom: 40px; font-family: var(--font-type02); font-style: normal; font-size: 400%; font-weight: 700; letter-spacing: -0.01em; color: var(--point-white); }


.sub_nav .desc{display: flex; align-items: center; font-size: var(--title-20);}
.sub_nav .desc :where(dt, dd){position: relative; height: 100%;}
.sub_nav .desc dt a{display: flex; align-items: center;justify-content: center;font-size: 0;box-sizing: border-box;}

.sub_nav .desc dd { display: flex; align-items: center; }
.sub_nav .desc dd::before { content: ''; position: relative; top: 1px; display: inline-block; width: 4px; aspect-ratio: 1/1; margin: 0 13px; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.5);  }

.sub_nav .desc dd span{position: relative;display: flex;align-items: center;height: 100%; box-sizing: border-box;font-weight: 500;color: var(--point-white); width: fit-content; line-height: 1.4;cursor: pointer; letter-spacing: 0.01em;}
.sub_nav .desc dd:has(+dd) span { font-weight: 300; }
.sub_nav .desc dd span:after{position: relative;content:'';width: 7px;height: 7px; margin-left: 20px; border:solid var(--point-white);border-width: 0 0 2px 2px;top: 2px;right: 1px;transform: translateY(-50%) rotate(-45deg);border-radius: 1px; transition: all 0.4s;}
.sub_nav .desc dd.on span:after{transform: translateY(-50%) rotate(-45deg) scale(-1,-1);top: 7px;}
.sub_nav .desc dd ul{position: absolute;top: calc(100% - 1px);left:16px;width: 140%; max-width: 170px; padding: 20px 0;background: var(--point-white);border:1px solid var(--point-color01);border-radius: 0 0 10px 10px;box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s;}
.sub_nav .desc dd.on ul{opacity: 1; pointer-events: all;}
.sub_nav .desc dd ul li a{display: block;font-weight: 400;color: var(--black-color02);padding: 11px 24px;box-sizing: border-box;line-height: 1.4;}
.sub_nav .desc dd ul li.on a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;font-weight: 500;}

.nav_wrap { padding-top: 120px; padding-bottom: 80px; text-align: center; font-family: var(--font-type02); font-style: normal; font-size: var(--title-20); }
.nav_wrap .page_title { position: relative; width: fit-content; padding: 0 12px; color: var(--black-color00); font-size: 350%; font-weight: 700; line-height: 1; letter-spacing: -0.01em; margin-inline: auto; box-sizing: border-box; }
.nav_wrap .page_title::after { content:''; position: absolute; left: 0; bottom: 0; width: 0; height: 20px; background: linear-gradient(180deg, rgba(242, 205, 0, 1) calc(100% - 4px), rgba(0, 170, 73, 1) 4px); z-index: -1; transition: all 1.2s; }
.nav_wrap .page_title.aos-animate::after{width: 100%;}
.nav_wrap .page_title+p { color: var(--black-color00); text-align: center; font-size: 110%; font-weight: 500; line-height: 1.3; margin-top: 46px; letter-spacing: 0.02em; }


.sub_content { padding-bottom: 160px; }

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

    .sub_visual { height: clamp(320px, 64vw, 640px); }
    .sub_visual .main_title h2 { font-size: 370%; }

    .nav_wrap { padding: clamp(70px, 12vw, 120px) 0 clamp(40px, 8vw, 80px); }
    .nav_wrap .page_title+p { margin-top: 30px; }

    .nav_wrap .page_title { font-size: 320%; padding: 0 clamp(8px, 1.2vw, 12px); }
    .nav_wrap .page_title::after { height: clamp(12px, 2vw, 20px); background: linear-gradient(180deg, rgba(242, 205, 0, 1) calc(100% - 3px), rgba(0, 170, 73, 1) 3px); }

    .sub_content { padding-bottom: clamp(70px, 16vw, 160px); }
    
}

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

    .sub_visual .main_title h2 { font-size: 340%; margin-bottom: 30px; }
    

    .nav_wrap .page_title { font-size: 290%; }


    .sub_nav .desc dd ul { padding: 5px 0;}
    .sub_nav .desc dd ul li a { padding: 7px 15px; }

}

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

    .sub_visual { padding-top: 20px; }
    .sub_visual .main_title h2 { font-size: 310%; margin-bottom: 10px; }

    .nav_wrap .page_title { font-size: 260%; }

    .sub_nav .desc dd ul { padding: 5px 0;}
    .sub_nav .desc dd ul li a { padding: 5px 12px; font-size: var(--title-16); }
    .nav_wrap .page_title+p { margin-top: 20px; }

}

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

    .sub_visual .main_title h2 { font-size: 280%; margin-bottom: 15px; }

    .nav_wrap .page_title { font-size: 230%; }

    
}

/*───────────────────────────────────────────────────────────
	
	** company/about

───────────────────────────────────────────────────────────*/

.sub_about .about_cont01 { display: flex; gap: 102px; align-items: center; font-family: var(--font-type01); font-style: normal; font-size: var(--title-20); padding-bottom: 140px; }
.sub_about .about_cont01 .img_wrap { display: flex; flex-direction: column; gap: 10px;  }
.sub_about .about_cont01 .img_wrap img { border-radius: 10px; }

.sub_about .about_cont01 .info_wrap { font-size: 110%; line-height: 1.90; letter-spacing: -0.03em; }
.sub_about .about_cont01 .info_wrap img { display: block; margin-bottom: 61px; }
.sub_about .about_cont01 .info_wrap p { color: var(--black-color05); font-weight: 400; }
.sub_about .about_cont01 .info_wrap p:nth-of-type(1) { margin-bottom: 29px; }

.sub_about .about_cont01 .info_wrap p:last-child { line-height: 1.92; }

.sub_about .about_cont01 .info_wrap p strong { color: var(--black-color00); font-weight: 600; }

.sub_about .about_cont02 { position: relative; padding-top: 140px; font-size: var(--title-20); font-style: normal; }
.sub_about .about_cont02::before { content: ''; display: block; position: absolute; top: 0; width: 100vw; height: 706px; background-color: var(--gray-bg02); z-index: -1; }
.sub_about .about_cont02 h3 { margin-bottom: 51px; text-align: center; color: var(--black-color00); font-family: var(--font-type02); font-size: 320%; font-weight: 700; letter-spacing: -0.01em; }
.sub_about .about_cont02 p { margin-bottom: 80px; color: var(--black-color05); text-align: center; font-family: var(--font-type02); font-size: 110%; font-weight: 400; line-height: 1.9; letter-spacing: -0.04em; }

.sub_about .about_cont02 ul { display: flex; padding: 140px 60px; font-family: var(--font-type01); font-style: normal; font-size: var(--title-20); background-image: url('../images/sub/img_about_banner.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 10px; text-align: center; }
.sub_about .about_cont02 ul li { width: calc(100% / 3); position: relative; padding: 0 15px; }
.sub_about .about_cont02 ul li:not(:last-child)::after { content: ''; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 210px; background-color: rgba(255, 255, 255, 0.2); }

.sub_about .about_cont02 ul li .ico_wrap { min-height: 81px; }
.sub_about .about_cont02 ul dt { margin-top: 28px; color: var(--point-white); font-weight: 700; font-size: inherit; line-height: 1.7; letter-spacing: -0.03em; }
.sub_about .about_cont02 ul dd { margin-top: 12px; color: var(--point-white); opacity: 0.8; font-weight: 200; font-size: 90%; line-height: 1.77; letter-spacing: -0.03em; }

@media screen and (max-width: 1240px){
    .sub_about .about_cont02 ul dd br { display: none; }
}

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

    .sub_about .about_cont01 { gap: 60px; justify-content: space-between; padding-bottom: clamp(50px, 14vw, 140px); }

    .sub_about .about_cont01 .img_wrap { width: 47.5%; }
    .sub_about .about_cont01 .info_wrap img { margin-bottom: 40px; width: 70%; }

    .sub_about .about_cont01 .info_wrap { width: 47.5%; }
    .sub_about .about_cont01 .info_wrap p:nth-of-type(1) { margin-bottom: 20px; }

    .sub_about .about_cont02 { padding-top: clamp(50px, 14vw, 140px); }
    .sub_about .about_cont02 h3 { font-size: 290%; }

    .sub_about .about_cont02 ul { padding: clamp(40px, 10vw, 120px) clamp(20px, 4vw, 60px); }
}

@media screen and (max-width: 860px){
    .sub_about .about_cont01 { flex-direction: column; }
    .sub_about .about_cont01 .img_wrap { width: 100%; }
    .sub_about .about_cont01 .info_wrap img { width: 50%; }

    .sub_about .about_cont01 .info_wrap { width: 100%; }

    .sub_about .about_cont02 h3 { font-size: 260%; margin-bottom: 30px; }
    .sub_about .about_cont02 p { margin-bottom: 40px; }

    .sub_about .about_cont02 ul dt { margin-top: 15px; }
    .sub_about .about_cont02 ul dd { margin-top: 8px; }

    .sub_about .about_cont02 ul { flex-wrap: wrap; row-gap: 40px; justify-content: center; }
    .sub_about .about_cont02 ul li { width: calc(100% / 2 - 30px); }
    .sub_about .about_cont02 ul li:not(:last-child)::after { display: none; }

    .sub_about .about_cont02 ul li:nth-of-type(1) img { width: 77px; }
    .sub_about .about_cont02 ul li:nth-of-type(2) img { width: 60px; }
    .sub_about .about_cont02 ul li:nth-of-type(3) img { width: 63px; }

    .sub_about .about_cont02 ul li .ico_wrap { min-height: 64px; }

}

@media screen and (max-width: 640px){
    .sub_about .about_cont01 { gap: 40px; }
    .sub_about .about_cont01 .info_wrap img { margin-bottom: 20px; }
    .sub_about .about_cont01 .info_wrap p:nth-of-type(1) { margin-bottom: 10px; }

    .sub_about .about_cont02 h3 { font-size: 230%; margin-bottom: 20px; }
    .sub_about .about_cont02 p { margin-bottom: 20px; }
    .sub_about .about_cont02 ul { flex-direction: column; justify-content: center; align-items: center; row-gap: 30px; }
    .sub_about .about_cont02 ul li { width: 100%; padding: 0; }
}

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

    .sub_about .about_cont02 ul { row-gap: 20px; }
    .sub_about .about_cont02 ul li:nth-of-type(1) img { width: 61px; }
    .sub_about .about_cont02 ul li:nth-of-type(2) img { width: 48px; }
    .sub_about .about_cont02 ul li:nth-of-type(3) img { width: 50px; }

    .sub_about .about_cont02 ul li .ico_wrap { min-height: 51px; }

    .sub_about .about_cont02 ul dt { margin-top: 10px; }
    .sub_about .about_cont02 ul dd { margin-top: 5px; }
}


/*───────────────────────────────────────────────────────────
	
	** gallery board common

───────────────────────────────────────────────────────────*/

.sub_board_gall { font-family: var(--font-type01); font-size: var(--title-20); font-style: normal; }
.sub_board_gall h3 { color: var(--black-color00); font-size: 110%; letter-spacing: -0.03em; }

.sub_board_gall .gall_list_top { display: flex; flex-wrap: wrap; }




/*───────────────────────────────────────────────────────────
	
	** certificate

───────────────────────────────────────────────────────────*/

.sub_cert .board_search_wrap { display: none; }
.sub_cert .gall_list_top { column-gap: 40px; row-gap: 60px;}
.sub_cert .gall_list { width: calc(25% - 30px); text-align: center; }

.sub_cert .gall_list .thumb { position: relative; padding: 210px 0; box-sizing: border-box; background-color: var(--gray-bg02); }
.sub_cert .gall_list .thumb img { box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; max-width: 70% }


.sub_cert .gall_list .txt_info { margin-top: 31px; }
.sub_cert .gall_list strong { font-weight: 500; line-height: 1.54; }
.sub_cert .gall_list .board_date { display: none; }


@media screen and (max-width: 1280px){
    
    .sub_cert .gall_list .thumb { padding: 180px 0; }

}

@media screen and (max-width: 1023px){
    .sub_cert .gall_list { width: calc(33.3333% - 26.66px); text-align: center; }
    .sub_cert .gall_list .txt_info { margin-top: 20px; }
}

@media screen and (max-width: 860px){
    .sub_cert .gall_list_top { column-gap: 20px; row-gap: 40px; }
    .sub_cert .gall_list { width: calc(33.3333% - 13.33px); }
    .sub_cert .gall_list .thumb { padding: 160px 0; }
}

@media screen and (max-width: 640px){
    .sub_cert .gall_list { width: calc(50% - 10px); }
}

@media screen and (max-width: 479px){
    .sub_cert .gall_list_top { column-gap: 10px; row-gap: 20px; }
    .sub_cert .gall_list .thumb { padding: 120px 0; }
    .sub_cert .gall_list .txt_info { margin-top: 15px; }
}

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

.sub_cert .gall_list .txt_info { margin-top: 8px; }
    .sub_board_gall h3 { font-size: 90%; }
}

@media screen and (max-width: 360px){
    .sub_cert .gall_list { width: 100%; }
    .sub_cert .gall_list .thumb { padding: 180px 0; }
}


/*───────────────────────────────────────────────────────────
	
	** customer

───────────────────────────────────────────────────────────*/

.sub_custo .board_search_wrap { display: none; }
.sub_custo .gall_list_top { column-gap: 25px; row-gap: 40px;}
.sub_custo .gall_list { width: calc(20% - 20px); text-align: center; flex-wrap: wrap; }

.sub_custo .gall_list .thumb { position: relative; padding: 50px 0; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: 4px; height: 0; overflow: hidden; }
.sub_custo .gall_list .thumb img { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; max-width: 70%; max-height: 80%; }


.sub_custo .gall_list .txt_info { margin-top: 25px; }
.sub_custo .gall_list strong { font-weight: 500; line-height: 1.5; }
.sub_custo .gall_list .board_date { display: none; }

@media screen and (max-width: 1280px){
    .sub_custo .gall_list .thumb { padding: 40px 0; }
}

@media screen and (max-width: 1023px){
    .sub_custo .gall_list { width: calc(25% - 18.75px); text-align: center; }
}

@media screen and (max-width: 860px){
    .sub_custo .gall_list_top { column-gap: 20px; row-gap: 30px; }

    .sub_custo .gall_list { width: calc(25% - 15px); text-align: center; }
    .sub_custo .gall_list .thumb { padding: 35px 0; }
    .sub_custo .gall_list .txt_info { margin-top: 16px; }
}

@media screen and (max-width: 640px){
    .sub_custo .gall_list { width: calc(50% - 13.33px); text-align: center; }
    .sub_custo .gall_list .thumb { padding: 40px 0; }
}

@media screen and (max-width: 479px){
    .sub_custo .gall_list_top { column-gap: 10px; row-gap: 20px; }
    .sub_custo .gall_list { width: calc(50% - 5px); text-align: center; }
    .sub_custo .gall_list .thumb { padding: 30px 0; }

    .sub_custo .gall_list .txt_info { margin-top: 13px; }
}

/*───────────────────────────────────────────────────────────
	
	** solution

───────────────────────────────────────────────────────────*/

.sub_sol { margin-top: -5px; }

.sub_sol h3 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.sub_sol .gall_list_top { gap: 42px; }
.sub_sol .gall_list { position: relative; width: calc((100% / 3) - 28px); border-radius: 4px; font-family: var(--font-type01); font-size: var(--title-20); font-style: normal; border-radius: 4px; box-sizing: border-box; }
.sub_sol .gall_list a::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid transparent; z-index: 2; transition: 0.6s; transition-property: border; border-radius: 4px; }
.sub_sol .gall_list a::after { content: ''; display: block; position: absolute; left: 0; top: 0; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid var(--border-color01); z-index: -1; transition: 0.6s; transition-property: border; border-radius: 4px; }




.sub_sol .gall_list .thumb { position: relative; border-radius: 4px 4px 0 0; height: 0; padding-bottom: 68.7%; overflow: hidden;}
.sub_sol .gall_list .thumb::before { content: ''; display: block; position: absolute; left: 50%; top: 60%; width: 70px; aspect-ratio: 1/1; background: url('../images/sub/ico_plus.svg') no-repeat center/cover; transform: translate(-50%, -50%); opacity: 0; transition: all 0.6s; z-index: 5; }
.sub_sol .gall_list .thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; }

.sub_sol .gall_list .txt_info { padding: 30px 30px 32px 30px; border-radius: 0 0 4px 4px; }

.sub_sol .gall_list .board_cate { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px;  }
.sub_sol .gall_list .board_cate p { padding: 6px 7px; color: var(--black-color00); font-size: 70%; font-weight: 600; line-height: 1; letter-spacing: -0.03em; background-color: var(--point-color01); border-radius: 2px; box-sizing: border-box; }

.sub_sol .gall_list strong { font-weight: 700; }
.sub_sol .gall_list .board_date { margin-top: 25px; color: var(--black-color08); font-size: 80%; font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; }


@media (hover: hover) and (pointer: fine) { 
    .sub_sol .gall_list:hover a::before { border: 1px solid var(--black-color00); }
    .sub_sol .gall_list:hover .thumb::before { top: 50%; opacity: 1; }
}

@media screen and (max-width: 1023px){
    .sub_sol .gall_list_top { gap: 30px; }
    .sub_sol .gall_list { width: calc((100% / 3) - 20px); }
    .sub_sol .gall_list .txt_info { padding: 20px; }
    .sub_sol .gall_list .board_cate { margin-bottom: 15px; }
    .sub_sol .gall_list .board_date { margin-top: 20px; }
}

@media screen and (max-width: 860px){
    .sub_sol .gall_list_top { gap: 25px; }
    .sub_sol .gall_list { width: calc((100% / 2) - 12.5px); }
    
}

@media screen and (max-width: 640px){
    .sub_sol .gall_list_top { column-gap: 20px; row-gap: 20px; }
    .sub_sol .gall_list { width: calc((100% / 2) - 10px); }
    .sub_sol .gall_list .txt_info { padding: 10px; }
    .sub_sol .gall_list .board_cate { margin-bottom: 10px; }
    .sub_sol .gall_list .board_date { margin-top: 15px; }
}

@media screen and (max-width: 479px){
    .sub_sol .gall_list_top { column-gap: 15px; row-gap: 15px; }
    .sub_sol .gall_list { width: calc((100% / 2) - 7.5px); }
    
    .sub_sol .gall_list .board_cate p { padding: 4px 6px; font-size: 60%; }
}

@media screen and (max-width: 360px){
    .sub_sol .gall_list { width: 100%; }
}


/*───────────────────────────────────────────────────────────
	
	** board_view

───────────────────────────────────────────────────────────*/

#wrap .board_view .view_tit { padding: 40px 20px; margin-top: -5px; text-align: center; font-family: var(--font-type01); font-size: var(--title-20); font-style: normal; letter-spacing: -0.03em; background-color: var(--point-white); border-top: 1px solid var(--black-color00); border-bottom: 1px solid var(--border-color01); }

#wrap .board_view .view_tit .view_cate { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 23px; }
#wrap .board_view .view_tit .view_cate p { padding: 4px 10px; color: var(--black-color00); font-size: 80%; font-weight: 600; letter-spacing: -0.03em; background-color: var(--point-color01); border-radius: 2px; box-sizing: border-box; }
#wrap .board_view .view_tit > h3 { width: 100%; text-align: center; color: var(--black-color00); font-size: 200%; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
#wrap .board_view .view_tit .view_info { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
#wrap .board_view .view_tit .view_info p { color: var(--black-color08); font-size: var(--title-18); font-weight: 500; line-height: 1.11; letter-spacing: -0.03em; }

#wrap .board_view .view_cont { padding: 59px 40px 120px; border-bottom: 1px solid var(--border-color01); }
#wrap .board_view .view_cont div:has(img) { margin-bottom: 40px; }

#wrap .board_view .view_cont { font-family: var(--font-type01); font-size: var(--title-20); font-style: normal; letter-spacing: -0.03em; }

#wrap .board_view .view_file_wrap { display: flex; margin-top: 40px; padding: 30px 56px; background-color: var(--gray-bg02); font-family: var(--font-type01); font-style: normal; font-size: var(--title-20);  }
#wrap .board_view .view_file_wrap h4 { position: relative; min-width: 173px; color: var(--black-color02); font-size: inherit; font-weight: 600; line-height: 1.3; letter-spacing: -0.03em; }
#wrap .board_view .view_file_wrap h4::after { content: ''; display: inline-block; position: relative; width: 1px; height: 14px; background-color: var(--border-color01); margin-left: 54px; margin-right: 50px; }
#wrap .board_view .view_file_wrap div { max-width: calc(100% - 105px); }
#wrap .board_view .view_file_wrap span { display: block; width: 100%; }
#wrap .board_view .view_file_wrap a { display: block; width: 100%; color: var(--black-color03); font-size: inherit; font-weight: 400; line-height: 1.3; letter-spacing: -0.03em; word-wrap: break-word; }
#wrap .board_view .btn_wrap { position: relative; padding-top: 80px; }


@media screen and (max-width: 1023px){
    #wrap .board_view .view_tit { padding: 20px 10px; }
    #wrap .board_view .view_tit .view_cate { margin-bottom: 20px; }
    #wrap .board_view .view_tit .view_info { margin-top: 30px; }

    #wrap .board_view .view_cont { padding: 40px 20px 80px; }

    #wrap .board_view .view_file_wrap { padding: 20px 25px; }
    #wrap .board_view .view_file_wrap h4 { min-width: 130px; }
    #wrap .board_view .view_file_wrap h4::after { margin-left: 34px; margin-right: 30px; }
    #wrap .board_view .view_file_wrap div { width: 85%; }

    #wrap .board_view .btn_wrap { padding-top: 60px; }
    
}

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

    #wrap .board_view .view_tit .view_cate { margin-bottom: 10px; }
    #wrap .board_view .view_tit .view_info { margin-top: 20px; }
    #wrap .board_view .view_tit > h3 { font-size: 170%; }

    #wrap .board_view .view_cont { padding: 30px 15px 60px; }
    #wrap .board_view .view_cont div:has(img) { margin-bottom: 30px; }
    #wrap .board_view .view_file_wrap h4 { min-width: 106px; }
    #wrap .board_view .view_file_wrap h4::after { margin-left: 24px; margin-right: 20px; }

    
}

@media screen and (max-width: 640px){
    #wrap .board_view .view_file_wrap { padding: 15px 20px; margin-top: 20px; }
    #wrap .board_view .view_file_wrap h4 { min-width: revert; }
    #wrap .board_view .view_file_wrap h4::after { margin-left: 14px; margin-right: 10px; }

    #wrap .board_view .view_tit .view_info { margin-top: 15px; }

    #wrap .board_view .view_cont { padding: 20px 10px 40px; }

    #wrap .board_view .btn_wrap { padding-top: 40px; }
    #wrap .board_view .view_file_wrap div { width: 100%; }

    
}

@media screen and (max-width: 479px){
    #wrap .board_view .view_cont div:has(img) { margin-bottom: 20px; }
    #wrap .board_view .view_file_wrap { padding: 10px 15px; }
}