@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300&display=swap');

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset */
@media all {
    .clear:after { 
        content:"";
        display:block; 
        clear:both;
    }
    * {margin:0; padding:0; outline:none; box-sizing:border-box;}
    html {font-size: 10px;}
    body {
    line-height:1; font-weight:400; color:#000; font-family: 'Noto Sans KR', sans-serif !important; word-wrap: break-word; word-break: keep-all;
    }
    h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif !important; line-height:1; font-size: 1em; }
    ul, ol { list-style:none; margin:0; padding: 0; }
    a { outline:0; text-decoration:none; color: #000; font-family: 'Noto Sans KR', sans-serif !important; }
    a:focus { outline:none; }
    a:focus, a:hover {text-decoration: none;}
    figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0;}
    img { border:none; outline:none; max-width: 100%; }
    p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
    button, input, submit { border: none; background: none; }
    dt { font-weight: normal; }
    ::placeholder { font-family: 'Noto Sans KR', sans-serif !important; }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        box-shadow: none !important;
        -webkit-text-fill-color: none !important;
    }
}   

/* 탭 초기화 */
.tabBox1 .nav { border: none; }
.tabBox1 .nav > li { margin: 0; float: none; }
.tabBox1 .nav > li > a { padding: 0; margin: 0; border-radius:0; border: 0; }
.tabBox1 .nav > li:hover > a { background: none; }
.tabBox1 .nav > li.active > a { border: none; background: none; }


/* html 폰트 사이즈 */
/* @media (max-width:1200px) {
	html { font-size: 9px; }
} */
@media (max-width:991px) {
	html { font-size: 9px; }
}
@media (max-width:768px) {
	html { font-size: 8.5px; }
}
@media (max-width:580px) {
	html { font-size: 7.5px; }
}

@media (max-width:480px) {
	html { font-size: 6px; }
}

@media (min-width:1200px) and (max-height:800px) {/* 너비 1200이상 높이 800이하 */
    html { font-size: 8px; }
}
@media (min-width:1200px) and (max-height:650px) {/* 너비 1200이상 높이 650이하 */
    html { font-size: 7.5px; }
}
@media (min-width:1200px) and (max-height:500px) {/* 너비 1200이상 높이 500이하 */
    html { font-size: 6.5px; }
}

:root {
	/* 컨텐츠 너비 */
	--containerV1-width : 1300;

	--main-color : #072f5f; /* mainColor */
    
    --h-height : max(70px, 10rem); /* header height */
}

/* container */
.containerV1 {width: 100%; margin: 0 auto; max-width: calc(var(--containerV1-width) * 1px); }

@media (max-width:1330px) {
	.containerV1 {padding: 0 15px;}
}


/* page_animation */
.fade_up {transition: 1s 0.3s;}
.fade_up[data-scroll="out"] {transform: translateY(10%); opacity: 0;}
.item-tr-row:first-child {transition-delay: 0.2s !important;}
.item-tr-row:not(:first-child) {
    transition-delay: calc((var(--index) + 1) * 0.2s);
}

.hidden {display: none !important;}

/* ------------------------ header -------------------------------------------------- */
#header { 
    --menu-font-color : #0d0d0d;
    position: sticky; left: 0; top: 0; width: 100%; height: var(--h-height); z-index: 1000; transition:0.4s;
    background: #fff;
}
#header > .containerV1 {height: 100%;}

/*모바일 검은 배경*/
#header .menuBox_bg {position: fixed; right: 0; top: 0; z-index: 8000; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); display: none;}

#header .itemBox {
    width: 100%; height: 100%; display:flex; justify-content:space-between; align-items:center;
    position: relative; z-index: 2; margin: 0 auto;
}

#logo a {display: flex; align-items: center; font-size: 3rem;}

/*main_menu---------------------------------------------------------------------------*/
#nav { display:flex; align-items:center;}
#nav .outer {display: flex; position: relative; gap: 6rem;}
#nav .outer > li {position: relative; height: var(--h-height);}
#nav .outer > li:first-child {margin-left: 0;}
#nav .outer > li > a {
    display: flex; color: var(--menu-font-color);  font-size: 18px; height: 100%; line-height: 1.3; align-items: center;
    position: relative; transition: all 0.3s; font-weight: bold;
}
#nav .outer > li > a > span {position: relative;}
#nav .outer > li > a > i {color: var(--main-color); display: none;}
#nav .outer > li > a > span:after {
    content: ''; position: absolute;  bottom: -10px; width: 0; height: 3px; background: var(--main-color); transition:0.4s; right: 0;
}



/*sub_menu---------------------------------------------------------------------------*/
#nav .inner {
display: block; position: absolute; right: 0; top: 80%; width: 190px; height: 0; overflow: hidden;
opacity: 0; transition: all 0.2s; visibility: hidden; z-index: 1;  background: #fff; text-align: right; box-shadow: 3px 2px 10px rgba(0,0,0,0.2);
}
#nav .inner::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--main-color);} 
#nav .inner > li {position: relative; color: #000; line-height: 1.3; transition: all 0.3s;}
#nav .inner > li:first-child {margin-top: 10px;}
#nav .inner > li:last-child {margin-bottom: 10px;}

#nav .inner > li > a { display: block; font-size: 16px; color: inherit; transition: all 0.3s; position: relative; left: 0; padding: 10px 15px;}
#nav .outer > li:nth-child(1) .inner { z-index: 10;}



/* hover */
@media (min-width: 991px) {
    #nav .outer > li:hover > .inner {opacity: 1; visibility: visible; z-index: 2; top: 90%; height: auto;}
    #nav .outer > li:hover > a > span:after {width: 100%; right: auto; left: 0;}
    #nav .outer > li > .inner > li:hover > a {background: var(--main-color); color: #fff;}

    /* 해당페이지 일때 */
    #nav .outer > li > a.on > span::after {width: 100%;}
}

/* 해드 스크롤 했을때 */
#header.scroll {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background: #fff;
}
#header.scroll #logo a .logo_2 {display: block;}
#header.scroll #logo a .logo_1 {display: none;}
#header.scroll #nav .outer > li > a {color: #000;}



/*모바일에서 피씨 로고 클래스 지움.*/
#logo.logo_hide {opacity: 1; visibility: visible;}


/*반응형-------------------------------------------------------------*/


@media (min-width: 992px) {
    #header .open_btn {display: none;} 
    #header .close_btn {display: none;}
}

@media (max-width: 1230px) {
    #nav .outer {gap: 4rem;}
    #nav .outer > li > a {font-size: 15px;}

}



/*모바일*/
@media all and (max-width: 991px) {

#header {--menu-font-color: #222; background: #fff;}

/* 모바일 열기 버튼 */
.open_btn { font-size: 40px; color: #000; cursor:pointer;}

#nav {
    --mob-bg : #f7f7f7;
    --nav-size: 270;
    background-color: var(--mob-bg); width: calc(var(--nav-size) * 1px); height: 100%;  display: block;
    position: fixed; right:0; top: 0; z-index:9999; margin-right: calc(var(--nav-size) * -1px);  transition:margin-right 0.3s;
    overflow-x: hidden; overflow-y:auto; flex-direction:column; justify-content:flex-start; align-items:stretch;
}

/* 모바일닫기버튼 */
.close_btn { width:50px; height:50px; margin-right:0; margin-left:auto; cursor:pointer;}
.close_btn > i { display:block; color:var(--menu-font-color); text-align:center; line-height:50px; font-size:40px; z-index: 3;}


#header .menuBox_bg {display: block;}/*	menubox_bg가 메뉴를 연 상태로 바로 pc화면으로 바꿀 경우 그대로 남아서 pc에서 none 처리해둔 걸 모바일에서 푸는 용도*/

#nav .outer { display: block; padding: 0 20px; order: 3;}
#nav .outer > li { margin-left: 0; width: 100%; overflow: hidden; cursor: pointer; margin-bottom: 10px; height: auto;}
#nav .outer > li > a {
    font-weight: 500; padding:15px 20px 20px 10px; color: var(--menu-font-color); position: relative;
    height: auto; line-height: 1; font-size: 18px; border-bottom: 1px solid #555;
}
#nav .outer > li > a > span {transition: 0.5s;}
#nav .outer > li > a > span:after {
    background: url('img/nav_icon_logo.png') no-repeat center center / cover;
    width: 20px; height: 20px; left: -25px; top: 50%; transform: translateY(-50%);
    opacity: 0; transition: 0.5s;
}


#nav .outer > li > a > i {color: var(--menu-font-color); display: inline-block; position: absolute; right: 15px; top: 15px; transform: rotate(0deg); transition: all 0.3s;}

#nav .inner {
    position: relative; padding: 0; display: block; border:0; opacity: 0; padding-left: 10px;
    visibility: hidden; width: 100%; height: 0;  background: var(--mob-bg); box-shadow: none;
}
#nav .inner::before {display: none;}
#nav .inner > li { margin-bottom:0; position: relative; padding: 0;}


#nav .inner > li > a {
    color: var(--menu-font-color); padding: 12px 25px 12px 13px; position: relative; transition: all 0.3s;
    text-align: left; left: 0;
}
#nav .inner > li > a {border-bottom: 1px solid #3f5ca03b;}

/*	pc 메뉴 효과 지움*/

#header:hover #nav .inner {opacity: 1; top: 100%;}



/* 해드 스크롤 했을때 */
#header.scroll #nav .outer > li > a {color: var(--menu-font-color); line-height: 1;}
#header.scroll .open_btn {color: #000;}


/* hover */
#nav .outer > li > .inner > li:hover > a {background: transparent; color: var(--menu-font-color);}
#nav .outer > li:hover > .inner { display:block; opacity: 1; top: 100%;}
#nav .outer > li > .inner > li:hover {background: #333;}
#nav .outer > li > .inner > li:hover > a {color: var(--menu-font-color);}
#nav .inner > li:hover > a span {left: 0;}


/* 해당페이지 일때 */
#nav .outer > li > a.on > span {margin-left: 20px;}
#nav .outer > li > a.on > span::after {opacity: 1;}

#nav .outer > li.on_sub > a > span {margin-left: 20px;}
#nav .outer > li.on_sub > a > span::after {opacity: 1;}

/* outer 클릭시 inner보이는 효과 */
#nav .outer > li.on_sub > .inner { display: block;}
#nav .outer > li.on_sub > .inner {
    opacity: 1;
    visibility: visible;
    height: auto;
}
#logo.logo_hide {opacity: 0; visibility: hidden;}
#nav .outer > li.on_sub > .inner > li {background: #f7f7f7;}
#nav .outer > li.on_sub > a > i {transform: rotate(90deg); }


/* 모바일메뉴박스 보이게 하는 클래스 */
#nav.inactive { margin-right: -1px; }

}

/* ------------------------ header -------------------------------------------------- */

/* ------------------------ index -------------------------------------------------- */
#index .sec_frame {font-size: min(calc(10 / 500 * 100vw), 10px);}
#index .sec_frame .titleBox {
    text-align: center; margin-bottom: 5.5em;
}
#index .sec_frame .titleBox .title {
    color: #1b1b1b; font-weight: bold;
    font-size: 4em; line-height: 1.2; margin-bottom: 0.4em;
}
#index .sec_frame .titleBox .sub-text {
    color: #1b1b1b; font-size: max(14px, 1.8em);
    line-height: 1.4;
}


/* sec1 */
#index .sec1 {padding: 6.8em 0 7.7em;}

#index .sec1 .itemBox {
    --grid-count: 2;
    display: grid; grid-template-columns: repeat(var(--grid-count), 1fr);
    gap: 20px;
}

#index .sec1 .itemBox .item {
    border-radius: 20px; box-shadow: 0 7px 21px -3px #dcdcdc;
    padding: 2.2em 2em 15px;
}

#index .sec1 .itemBox .item .content {margin: 0 auto; width: fit-content; margin-top: 2em; position: relative; overflow: hidden;}
#index .sec1 .itemBox .item .content .neddle {position: absolute; bottom: 10px; left: 48.5%; transform: translate3d(-50%, 0, 0);}

#index .sec1 .itemBox .item .text_box {
    display: flex; align-items: center;
    gap: 15px 3em; flex-wrap: wrap;
}
#index .sec1 .itemBox .item .text_box > h3 {
    font-size: max(15px, 2em); color: #001c58; font-weight: bold; line-height: 1.2;
}
#index .sec1 .itemBox .meter .text_box > .data_box {
    display: flex; align-items: center; gap: 10px 2.2em;
}
#index .sec1 .itemBox .meter .text_box > .data_box > div {
    border-radius: 50px; background: #fe7200; padding: 0.7em 1.3em;
    font-size: max(13px, 1.6em); color: #fff; text-align: center;
} 

@media (max-width: 1430px) {
    #index .sec1 .itemBox {--grid-count: 1;}
    #index .sec1 .itemBox .item {width: 100%; max-width: 1000px; margin: 0 auto;}
    #index .sec1 .itemBox .item .text_box {flex-direction: column; align-items: start;}
}

@media (max-width: 768px) {
    #index .sec1 .itemBox .meter .text_box > .data_box {flex-wrap: wrap;}
}



/* sec2 */
#index .sec2 {
    background: #f9f9f9;
    padding: 8.3em 0;
}
#index .sec2 .itemBox {display: flex; gap: 4em;}
#index .sec2 .itemBox .textBox > div > h4 {
    font-size: max(18px, 2.5em); font-weight: bold; line-height: 1.2;
    color: #1b1b1b; margin-bottom: 6px;
}
#index .sec2 .itemBox .textBox > div > p.text1 {
    font-size: max(14px, 1.8em); font-weight: bold; line-height: 1.3;
    color: #1b1b1b; margin-bottom: 10px
}
#index .sec2 .itemBox .textBox > div > h3 {
    font-size: max(20px, 3.5em); font-weight: bold;
    color: #8fc31f;
}
#index .sec2 .itemBox .textBox .img {position: relative; left: -20px;}

#index .sec2 .itemBox .cnt_list {
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(31em, auto); gap: 2.3em;
    height: fit-content;
}
#index .sec2 .itemBox .cnt_list > li {
    border-radius: 20px; box-shadow: 0 7px 21px -3px #dcdcdc;
    padding: 3.3em 15px 3.5em; background: #fff;
}
#index .sec2 .itemBox .cnt_list > li > div {
    display: flex; justify-content: space-between;
    align-items: center; gap: 15px; flex-wrap: wrap-reverse;
    margin-bottom: 1.5em;
}
#index .sec2 .itemBox .cnt_list > li > div > h3 {
    font-size: max(18px, 2.5em); color: #1b1b1b; line-height: 1.2;
}
#index .sec2 .itemBox .cnt_list > li > ul > li {
    font-size: max(13px, 1.6em); color: #1b1b1b;
    line-height: 1.3; padding-left: 0.7em;
}
#index .sec2 .itemBox .cnt_list > li > ul > li:not(:last-child) {margin-bottom: 5px;}
#index .sec2 .itemBox .cnt_list > li > ul > li span {position: relative;}
#index .sec2 .itemBox .cnt_list > li > ul > li span::before {
    content: ''; position: absolute; top: 50%; left: -0.7em;
    background: #e60012; border-radius: 50%; width: 5px; height: 5px;
}

#index .sec2 .itemBox .textBox .img[data-scroll="out"] {transform: translateX(-10%);}

@media (min-width: 992px) {
    #index .sec2 .itemBox .textBox {min-width: 284px;}
}

@media (min-width: 1401px) {
    #index .sec2 {padding: 0;}
    #index .sec2 .containerV1 {padding-top: 8.3em; height: 100%;}
}

@media (max-width: 1400px) {
    #index .sec2 .itemBox {flex-direction: column;}
    #index .sec2 .itemBox .textBox {display: flex; gap:  3em; align-items: center;}
    #index .sec2 .itemBox .textBox > div {order: 2;}
    #index .sec2 .itemBox .textBox .img {left: 0;}
}

@media (max-width: 991px) {
    #index .sec2 .itemBox .cnt_list {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: minmax(20em, auto);
    }
}

@media (max-width: 768px) {
    #index .sec2 .itemBox .textBox {flex-direction: column; align-items: start;}
    #index .sec2 .itemBox .textBox .img {margin: 0 auto; width: 30em;}
}

/* sec3 */
#index .sec3 {
    padding: 8.2em 0 6.2em;
}
#index .sec3 .itemBox {display: flex;}
#index .sec3 .itemBox .data_map {position: relative; min-width: 48em;}
#index .sec3 .itemBox .data_map .img {position: relative;}
#index .sec3 .itemBox .data_map > span {font-size: 16px; color: #898989;}

#index .sec3 .itemBox .nav-tabs {
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-59.5%, -50%); width: 100%; height: 100%;
    border-bottom: unset;
}

#index .sec3 .itemBox .nav-tabs>li {position: absolute; font-size: 2.7em; transform: translate(-50%, -50%);}
#index .sec3 .itemBox .nav-tabs>li.marker1 {top: 7.46em; left: 5.2em;}
#index .sec3 .itemBox .nav-tabs>li.marker2 {top: 5.8em; left: 6.83em;}
#index .sec3 .itemBox .nav-tabs>li.marker3 {top: 2.76em; left: 9.85em;}
#index .sec3 .itemBox .nav-tabs>li.marker4 {top: 8.36em; left: 11.4em;}

#index .sec3 .itemBox .nav-tabs>li>a {border: none; padding: 0; margin-right: 0; line-height: 1; border-radius: none; color: #7d7d7d;}
#index .sec3 .itemBox .nav-tabs>li>a:hover {border-color: unset; color: #8bc53f;}
.nav>li>a:focus, .nav>li>a:hover {background-color: transparent;}
#index .sec3 .itemBox .nav-tabs>li.active>a, 
#index .sec3 .itemBox .nav-tabs>li.active>a:focus, 
#index .sec3 .itemBox .nav-tabs>li.active>a:hover {
    color: #8bc53f; cursor: default; background-color: transparent;
    border: none; border-bottom-color: transparent;
}

#index .sec3 .itemBox .graph_box {
    border-radius: 20px; box-shadow: 0 7px 21px -3px #dcdcdc;
    padding: 2.5em; height: fit-content;
}
#index .sec3 .itemBox .graph_box .data_list {
    display: flex; gap: 10px 5em; align-items: center;
    margin-bottom: 4em; flex-wrap: wrap;
}
#index .sec3 .itemBox .graph_box .data_list > li {
    font-size: max(14px, 1.8em); color: #1b1b1b; line-height: 1.3;
}
#index .sec3 .itemBox .graph_box .data_list > li .icon i {color: #d8271c;}

#index .sec3 .itemBox .graph_box .graph_data {width: 100%; max-width: 770px; min-height: 28em;}

@media (min-width: 1231px) {
    #index .sec3 .itemBox .data_map .img img {
        transform: translateX(-45px);
    }
}

@media (max-width: 1230px) {
    #index .sec3 .itemBox {gap: 5em; flex-direction: column; align-items: center;}
    #index .sec3 .itemBox .graph_box {width: 100%; max-width: 1000px;}

    #index .sec3 .itemBox .nav-tabs {transform: translate(-50%, -50%);}
}


/* sec4 */
#index .sec4 {background: #f6f6f6; padding: 4em 0;}
#index .sec4 .itemBox {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(131px, auto); gap: 2.5em;
}
#index .sec4 .itemBox .item {
    border-radius: 25px; box-shadow: 0 7px 21px -3px #dcdcdc;
    /* padding-right: 10px; */
}
#index .sec4 .itemBox .item a {
    position: relative; display: flex; align-items: center;
    gap: 15px; width: 100%; height: 100%; background: #fff;
    transition: 0.3s; border-radius: inherit;
}
#index .sec4 .itemBox .item a .text_box > * {transition: 0.3s;}
#index .sec4 .itemBox .item a .text_box h4 {
    color: #1b1b1b; font-size: max(15px, 2em);
    margin-bottom: 0.5em; line-height: 1.2;
}
#index .sec4 .itemBox .item a .text_box span {
    color: #7d7d7d; font-size: max(13px, 1.6em);   
}

#index .sec4 .itemBox :is(.item1, .item2) a .img {align-self: end;}
#index .sec4 .itemBox .item2 a .img {padding-left: 1.5em;}
#index .sec4 .itemBox :is(.item3, .item4) a .img {padding-left: 2.5em;}

@media (min-width: 992px) {
    #index .sec4 .itemBox > .item:hover a {background: #fe7200;}
    #index .sec4 .itemBox > .item:hover a .text_box > * {color: #fff;}
}

@media (max-width: 1230px) {
    #index .sec4 .itemBox {
        grid-template-columns: repeat(2, 1fr);
        width: 100%; max-width: 1000px; margin: 0 auto;
    }
}

@media (max-width: 650px) {
    #index .sec4 .itemBox {
        grid-template-columns: repeat(1, 1fr);
    }
    #index .sec3 .itemBox .data_map > span {padding-left: 15px;}
}

/* ------------------------ index -------------------------------------------------- */

/* ------------------------ footer -------------------------------------------------- */
footer {
    --footer-font-color: #fff;
    font-size: min(calc(10 / 500 * 100vw ), 10px);
    background: #434343; padding: 3.2em 0 3.5em;
}


footer .contents {width: 100%;}

footer .item1 .ft_logo {
    color: #fff; font-size: 2em; font-weight: bold; 
    line-height: 1.2; margin-bottom: 1em;
}
footer .item1 {display: flex; flex-direction: column;}
footer .item1 > div {line-height: 1.4; font-size: 1.5em; color: var(--footer-font-color); margin-bottom: 10px; display: flex;}
footer .item1 > div a { color: inherit; }
footer .item1 > .text > span { position: relative; font-weight: inherit; margin-right: 18px;}

footer .item1 > .copy { text-transform: uppercase; color: var(--footer-font-color); font-size: 1.5em;}
footer .item1 > .copy a {color: inherit;}

@media (min-width: 851px) {
    footer .item1 > .text > span:after {
        content: ''; position: absolute; right: -10px; top: 55%;
        transform: translateY(-50%); width: 1px; height: 16px;
        background: #fff;
    }

    footer .item1 > .text > span:last-child:after { display:none;}
}

@media (max-width: 850px) {
    footer .item1 > .text {flex-direction: column; gap: 5px;}
}


/* ------------------------ footer -------------------------------------------------- */

.sub_wrap {min-height: 70vh; padding: 40px 0 50px;}

.sub_title_box {
    --font-size-pc: 10;
    --font-size-mob: 10;
    font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px) );
    margin-bottom: 3em; border-bottom: 1px solid #dfdfdf;
}
.sub_title_box .title {
    font-size: 3em; font-weight: bold; color: #1b1b1b;
    line-height: 1.4; margin-bottom: 0.6em;
}
.sub_title_box .title .bar {
    display: block; width: 1.2em; height: 4px;
    background: var(--main-color); margin-bottom: 0.5em;
}
.sub_title_box .sub_text {
    font-size: 1.8em; color: #666;
}



/* 리스트 스타일 */

#bo_list {width: 100%;}
#bo_list .btn_box {margin: 16px 5px;}
#bo_list .btn_box a {
    margin-left: auto;
    display: flex; align-items: center;
    justify-content: center; width: 100%;
    max-width: 120px; height: 35px;
    border-radius: 5px; background: #b3d465;
    color: #fff; font-size: 16px;
}

@media (min-width: 992px) {
    #bo_list .btn_box a:hover {background: #a1c746;}
}

#bo_list .list_head {border-top: 3px solid #000;}
#bo_list .list_head table {background: #eee; font-weight: 500;}

#bo_list .list_table > li {background: #fff;}
#bo_list .list_table > li:first-child {border-top: 1px solid #bfbfbf;}
#bo_list .list_table > li {border-bottom: 1px solid #bfbfbf;}

#bo_list .table_item {width: 100%;}
#bo_list .table_item td {
    text-align: center; font-size: 16px; color: #000;
    padding: 20px 10px;
}
#bo_list .table_item .num {width: 7.86%; min-width: 110px;}
#bo_list .table_item .title {width: 80%;}
#bo_list .list_table .table_item .title > a {
    display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    overflow: hidden; text-overflow: ellipsis;
}
#bo_list .table_item .name {width: 12.14%; min-width: 170px;}

@media (max-width: 991px) {
    #bo_list .table_item .num {min-width: 70px;}
    #bo_list .table_item .name {min-width: 100px;}
}

@media (max-width: 768px) {
    #bo_list .table_item td {font-size: 14px;}
}

/* ---------------------------------------------------- */

/* 본문 스타일 */
#bo_v header {margin-bottom: 5px;}
#bo_v #bo_v_title {
    font-size: 26px; font-weight: bold;
    line-height: 1.4; letter-spacing: -1px;
}

#bo_v .view_date_box {
    border-top: 1px solid #dee2e6; background: #f8f9fa;
    padding: 5px 10px; display: flex; align-items: center;
    justify-content: space-between; color: #6c757d;
    font-size: 14px;
}

#bo_v .btn_box {padding: 7px 14px 0; margin-bottom: 40px;}
#bo_v .btn_box > ul {
    display: flex; gap: 10px; margin-left: auto;
    width: fit-content;
}
#bo_v .btn_box > ul a {
    padding: 7px 13px;
    border-radius: 5px;
    background: #96b945;
    color: #fff; display: block;
    font-weight: 500;
}

#bo_v .btn_box > ul a:hover {background: #abce59;}
#bo_v .view-content {font-size: 16px;}



/* ---------------------------------------------------- */

/* 쓰기 스타일 */
#bo_w .list_table {}
#bo_w .list_table .list_item {
    border-top: 2px solid #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 30px;
}
#bo_w .list_table .input_form {
    width: 100%; display: flex; align-items: center;
}
#bo_w .list_table .input_form label {margin-bottom: 0 !important; line-height: 1.2;}
#bo_w .list_table .input_form > label {
    text-align: center; width: 250px;
    padding: 20px 10px; background: #f6f6f6;
    font-size: 16px; color: #313131;
    margin-bottom: 0 !important;
    height: 100%; display: flex; align-items: center;
    justify-content: center;
}
#bo_w .list_table .input_box {
    flex: 1; padding: 10px 132px 10px 80px;
}
#bo_w .list_table .input-type01 {
    width: 100%; height: 35px; border: 1px solid #e5e5e5;
    border-radius: 5px; padding: 0 10px;
}
#bo_w .list_table .label-t1 {height: 100px !important;}

/* 내용 */
#bo_w .list_table .content_form {
    flex-direction: column; align-items: unset;
}
#bo_w .list_table .content_form > label {width: 100%;}
#bo_w .list_table .content_form .input_box {padding: 10px 20px;}
#bo_w .list_table .content_form textarea {
    width: 100%; min-height: 300px; padding: 10px;
}

/* 링크 */
#bo_w .list_table .link_form .input_box input:first-child {margin-bottom: 10px;}


/* 첨부파일 */
#bo_w .list_table .file_form .input_box .btn_box {
    margin-bottom: 10px; display: flex; align-items: center;
    gap: 10px;
}
#bo_w .list_table .file_form .input_box .btn_box button {
    padding: 5px 10px; border-radius: 5px; border: 1px solid #ccc;
    color: #333;
}

#bo_w .list_table .file_form .input_box .btn_box button:hover {
    background: #e6e6e6;
}


/* 작성완료 */
#bo_w .submit_box {
    margin: 60px auto 45px;
    display: flex; align-items: center;
    justify-content: space-between;
    width: 100%; max-width: 381px;
    gap: 20px;
}
#bo_w .submit_box .submit_btn {
    width: 160px; height: 40px;
    border-radius: 10px; color: #fff;
    font-size: 16px; text-align: center;
    display: flex; align-items: center;
    justify-content: center;
}

#bo_w .submit_box button.submit_btn {background: #b3d465;}
#bo_w .submit_box a.submit_btn {background: #7d7d7d;}

@media (max-width: 1200px) {
    #bo_w .list_table .input_box {padding: 10px 30px;}
}

@media (max-width: 991px) {
    #bo_w .list_table .input_box {padding: 10px 20px;}
    #bo_w .list_table .input_form > label {width: 110px;}
    #bo_w .list_table .content_form > label {width: 100%;}
}

@media (max-width: 768px) {
    #bo_w .list_table .input_form {
        flex-direction: column; align-items: unset;
    }
    #bo_w .list_table .input_form > label {background: #fff; width: fit-content;}
    #bo_w .list_table > .label-t1 {height: auto !important;}
    #bo_w .submit_box {flex-direction: column;}
}

/* ------------------------------------------------------------------------- */

/* 관리자 출력 폼 */

#bo_v .bo_title {
    text-align: center; font-size: 25px; color: #434343;
    font-weight: bold; line-height: 1.2;
    margin-bottom: 56px;
}

#bo_v .itemBox {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 30px; margin-bottom: 50px;
}

#bo_v .itemBox .item_table {
    font-size: min(calc(10 / 600 * 100vw), 10px);
    border-radius: 5px;
    overflow: hidden;
}
#bo_v .itemBox .item_table table {
    width: 100%; border: 1px solid #e5e5e5;
    border-bottom: none;
}
#bo_v .itemBox .item_table table td {
    text-align: center; font-size: max(13px, 1.6em); color: #535353;
    line-height: 1.2; border-bottom: 1px solid #e5e5e5;
    padding: 15px 10px; width: 33.3333%;
}
#bo_v .itemBox .item_table table .td1,
#bo_v .itemBox .item_table table .td2 {
    border-right: 1px solid #e5e5e5;
}
#bo_v .itemBox .item_table table thead td {
    background: #f5f5f5; color: #707070;
    font-weight: 500;
}

#bo_v .itemBox2 .item {
    border-radius: 10px; border: 1px solid #e5e5e5;
    overflow: hidden; display: flex; align-items: center;
    padding: 15px 65px; gap: 20px; justify-content: space-between;
}

#bo_v .itemBox2 .item .text_box {text-align: center;}
#bo_v .itemBox2 .item .text_box h3 {
    font-size: 25px; color: #434343;
    font-weight: bold; line-height: 1.2;
    margin-bottom: 1em;
}

#bo_v .itemBox2 .item .text_box p {
    font-size: 18px; color: #e60012;
    line-height: 1.2;
}

/* 저장 수정 */
.adm_view .btn_box  {
    margin: 60px auto 45px;
    display: flex; align-items: center;
    justify-content: space-between;
    width: 100%; max-width: 381px;
    gap: 20px;
}
.adm_view .btn_box .view_btn {
    width: 160px; height: 40px;
    border-radius: 10px; color: #fff;
    font-size: 16px; text-align: center;
    display: flex; align-items: center;
    justify-content: center;
}

.adm_view .btn_box .save_btn {background: #b3d465;}
.adm_view .btn_box .modify_btn {background: #7d7d7d;}

@media (max-width: 1330px) {
    #bo_v .itemBox {grid-template-columns: repeat(1, 1fr);}
    #bo_v .itemBox .view_graph img {margin: 0 auto; display: block;}

    #bo_v .itemBox2 {
        width: 100%; max-width: 800px; margin: 0 auto 50px;
    }
    #bo_v .itemBox2 .item {justify-content: space-around;}
}

@media (max-width: 768px) {
    #bo_v .itemBox2 .item {flex-direction: column;}
    #bo_v .btn_box {flex-direction: column;}
}




/* 관리자 쓰기 폼 */
#bo_w .list_table .list_item .item_head {
    background: #f6f6f6;
    border-bottom: 1px solid #eee;
    display: flex;
}
#bo_w .list_table .list_item2 .item_head > li {
    padding: 13px 5px; text-align: center;
    font-size: 15px; color:#313131; width: 100%;
    max-width: 550px;
}
#bo_w .list_table .list_item .input_form {
    border-bottom: 1px solid #eee;
}

#bo_w .list_table .list_item2 .item_head > li:first-child {max-width: 250px;}
#bo_w .list_table .input_form .input_box_t2 {
    display: flex; gap: 124px; padding: 10px 88px;
}

#bo_w .list_table .list_item2 .input_box_t2 > div {
    width: 100%; display: flex;
    align-items: center;
    gap: 10px;
}
#bo_w .list_table .list_item2 .input_box_t2 > div span {}

@media (min-width: 992px) {
    #bo_w .list_table .list_item2 .input_box_t2 > div span {display: none;}
}


#bo_w .list_table .input_form .input_box_t3 {
    display: flex; justify-content: space-around;
}

#bo_w .list_table .input_form .input_box_t3 label {
    font-size: 16px; color: #313131;
    display: flex; align-items: center; gap: 5px;
}

@media (max-width: 991px) {
    #bo_w .list_table .list_item .item_head {display: none;}
    #bo_w .list_table .list_item2 .input_form .input_box_t2 {
        gap: 55px; padding: 10px 50px;
    }
}

@media (max-width: 768px) {
    #bo_w .list_table .list_item2 .input_form .input_box_t2 {
        gap: 25px; padding: 10px 15px;
    }
}


/* 모기 종류 테이블 */
#bo_w .list_table .item_table {width: 100%;}
#bo_w .list_table .item_table td {
    text-align: center; padding: 13px 10px;
    color: #313131; font-size: 16px;
    font-weight: 500; line-height: 1.2;
}
#bo_w .list_table .item_table .td1 {background: #f6f6f6;}
#bo_w .list_table .item_table thead td {
    background: #f6f6f6;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    font-weight: 500;
}

.border_b {border-bottom: 1px solid #eee;}

#bo_w .list_table .item_table thead .td1 {min-width: 250px;}
#bo_w .list_table .item_table thead .td2 {width: 400px;}
#bo_w .list_table .item_table thead .td3 {width: 400px;}
#bo_w .list_table .item_table thead .td4 {width: 250px;}

.text_scroll {
    color: #ff0000; font-size: 14px; line-height: 1.3; text-align: center;
    margin: 10px 0; display: none;
}

@media (max-width: 991px) {
    #bo_w .list_table .item_table thead .td1 {min-width: 120px;}
}

@media (max-width: 768px) {
    #bo_w .list_table .table_wrap {
        position: relative; overflow-x: auto;
    }
    #bo_w .list_table .table_wrap .item_table {
        min-width: 760px;
    }
    .text_scroll {display: block;}
}