@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
/* 100:thin, 300:light, 400:regular, 500:medium, 700:bold, 900:black */

* {font-family: 'Noto Sans KR', 'sans-serif';}

html {font-size: 62.5%;} /*브라우저 기본 사이즈 16px 의 62.5% : 10px*/

* {box-sizing: border-box;}

body {-ms-overflow-style: none; scrollbar-width: none;} 
::-webkit-scrollbar {display: none;} 

ul, li, a, a:active, a:hover, a:link, a:visited {margin: 0; padding: 0; list-style: none; text-decoration: none; color: #000;}
p, a, h1, h2, h3, h4, h5 {padding: 0; margin: 0;}

a {-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}

input:focus, textarea:focus {outline: none;}

img {width: 100%;}

input::placeholder, textarea::placeholder {font-size: 1.4rem; font-weight: 400; color: #9c9c9c;}


/* 
media query 
~ 479 : phone portrait
479 ~ 767 : phone landscape & tablet portrait
768 ~ 1023 : tablet landscape 
1024 ~ 1279 : laptop
1280 ~ : desktop  
*/

:root {
    --base-color: /*#5567ad*/#36bcee;
    --point-color: /*#1face6*/#0378c7;
    --gray1-color: #f2f2f2;
    --gray2-color: #9e9f9f;
    --gray3-color: #3e3a39;

    --tablet-width: 768px;
    --laptop-width: 1024px;
    --desktop-width: 1400px;

    --swiper-theme-color:  #0378c7 !important;
}

.dp_none {display: none !important;}

.pc_only {display: block;}
.mobile_only {display: none;}

h1 {font-size: 3rem; font-weight: 900;}
h2 {font-size: 2.5rem; font-weight: 700;}
h3 {font-size: 2rem; font-weight: 500;}

.title_text {font-size: 2rem; font-weight: 500;}
.table_text {font-size: 1.8rem; font-weight: 400;}

body {background: #ffffff;}



/* head */
header {position: sticky; top: 0; width: 100vw; z-index: 9; background-color: #fff;}

.top_nav {
    display: grid; grid-auto-flow: column; justify-content: space-between; align-items: center;
    position: relative;
    max-width: var(--laptop-width); margin: 0 auto;
}

.nav_logo img {height: 30px;}

.nav_menu {
    display: grid; grid-auto-flow: column; justify-content: space-between; align-items: center; column-gap: 0; 
    height: 70px; padding: 0; margin: 0;
}
.nav_menu .nav_item {
    padding: 0 30px;
}
.nav_menu .nav_item:last-child {border-right: none;}
.nav_menu .nav_item a {
    position: relative; 
    letter-spacing: 1px; font-size: 1.6rem; font-weight: 700; color: #333;
    transition: color .5s;
}
.nav_menu .nav_item a::after {
    content: ""; 
    position: absolute; left: 0; bottom: -10px; 
    width: 100%; height: 3px; 
    background-color: #E4007F; 
    transform: scale(0); transition: .5s;
}
.nav_menu .nav_item:hover a {color: #E4007F;}
.nav_menu .nav_item:hover a::after {transform: scale(1);}
.nav_menu .nav_item_on a {color: #E4007F;}



/* tail */
footer {
    width: 100vw;
    background-color: #313d46;
}

.footer_wrap {
    display: grid; grid-template-columns: 1fr 2fr .5fr; justify-content: center;
    max-width: var(--laptop-width); margin: 0 auto; padding: 20px 0;
}

.footer_logo {
    display: grid; justify-content: start; align-items: center;
}
.footer_logo p {
    justify-self: end;
    position: relative; bottom: -10px;
    padding-right: 10px;
    font-size: 2rem; font-weight: 500; color: #fff;
    opacity: .7;
}
.footer_logo img {
    height: 50px; object-fit: contain; 
    opacity: .7;
} /* 로고공백 감안 했을 때 1.6:1 */

.footer_info .contact {display: grid; grid-auto-flow: column; column-gap: 20px;}
.footer_info p {font-size: 1.4rem; font-weight: 500; color: #f8fafb;}
.footer_info .address {margin-top: 10px;}

.footer_link {
    display: grid; justify-content: end; align-items: center;
}
.footer_link a.gw_link {
    padding: 10px 20px;
    font-size: 1.4rem; font-weight: 500; color: #000; 
    background-color: #f8fafb;
    border-radius: 20px;
}
.footer_link a.gw_link:hover {color: #f8fafb; background-color: #8ec31f;}

.copyright { /* 좌우 margin을 auto로 하면, width가 자동으로 글자넒이만큼 변경됨 */
    grid-column: span 3;
    margin: 30px 0 0; padding-top: 5px;
    text-align: center; font-size: 1.2rem; font-weight: 400; color: #f8fafb70;
    border-top: .5px solid;
}


/* index */
.main_wrap {width: 100%; background-color: #e8eff5;}

.main_visual {width: 100%; padding: 450px 0 100px;  background: url(../img/main_visual.png) no-repeat center center / cover;}
.main_visual .slogan_wrap {display: grid; grid-template-columns: repeat(3, 120px); column-gap: 50px; width: 460px; margin: 0 auto; padding:0;}
/*
.slogan_wrap .slogan {display: grid; justify-items: center; row-gap: 20px; width: 100%; margin: 0; padding: 0;}
.slogan_wrap .slogan img {width: 120px; height: 120px; background-color: #fff;  border-radius: 50%; overflow: hidden; box-sizing: border-box;}
*/
.slogan_wrap .slogan {width: 100%; margin: 0; padding: 130px 0 0;}
.slogan_wrap .slogan p {text-align: center; font-size: 1.4rem; font-weight: 700; color: #fff;} 

.slogan_wrap .sg01 {background: url(../img/icon_slogan_01.png) no-repeat top center / contain;}
.slogan_wrap .sg02 {background: url(../img/icon_slogan_02.png) no-repeat top center / contain;}
.slogan_wrap .sg03 {background: url(../img/icon_slogan_03.png) no-repeat top center / contain;}
.slogan_wrap .sg01:hover {background: url(../img/icon_slogan_01_invert.png) no-repeat top center / contain;}
.slogan_wrap .sg02:hover {background: url(../img/icon_slogan_02_invert.png) no-repeat top center / contain;}
.slogan_wrap .sg03:hover {background: url(../img/icon_slogan_03_invert.png) no-repeat top center / contain;}
.slogan_wrap .slogan:hover p {color: #8ec31f;}



/* contents/공통 */
.sub_wrap {display: grid; grid-template-columns: 200px 1fr; max-width: var(--laptop-width);  margin: 0 auto;}

.sub_title_bg {
    grid-column: span 2;
    display: grid; justify-content: start; align-items: end;
    width: 100%; height: 100px; padding: 10px 100px;
    background: url(../img/top_bg.png) no-repeat center / 100% 100%;
}
.sub_title_bg p {
    font-size: 1.4rem; font-weight: 700; color: #fff;
}

.sub_left {
    display: grid; align-content: start; row-gap: 20px;
    position: sticky; top: 70px;
    height: 500px; padding-top: 30px;
}

.sub_menu {
    display: grid; align-items: center; 
    width: 100%;
}
.sub_menu .sub_item {position: relative; padding: 10px 0; text-align: center; border-bottom: 1px solid #efefef; transition: all .5s ease-in-out;}
.sub_menu .sub_item:first-child {border-top: 1px solid #efefef;}
.sub_menu .sub_item:hover {background-color: #E4007F;}
.sub_menu .sub_item:hover a {color: #fff;}
.sub_menu .sub_item::after {content: ""; position: absolute; top: 19px; right: 0; width: 10px; height: 2px; background-color: #efefef;}
.sub_menu .sub_item a {font-size: 1.5rem; font-weight: 500; color: #333;}
.sub_menu .sub_item_on {position: relative; background-color: #E4007F;}
.sub_menu .sub_item_on::after {content: ""; position: absolute; top: 19px; right: 0; width: 10px; height: 2px; background-color: #fff;}
.sub_menu .sub_item_on a {color: #fff;}

.sub_right {width: 100%; min-height: 700px; padding: 50px 0 50px 30px; overflow-x: hidden;}


/* contents/greetings */
.greetings_wrap p {line-height: 2.1; font-size: 1.6rem; font-weight: 400;}
.greetings_wrap p:first-child {line-height: 2.7;}
.greetings_wrap p:nth-child(2),
.greetings_wrap p:nth-child(7) {line-height: 5;}
.greetings_wrap p:last-child {text-align: center; font-weight: 500;}


/* contents/history */
.history_wrap {padding-left: 50px;}
.history_line {
    display: grid; grid-template-columns: 100px 1fr; align-items: start; row-gap: 40px;
    position: relative;
    padding: 0 0 100px 40px;
}
.history_line:last-child {padding-bottom: 0;}
.history_line::before {content: ""; position: absolute; top: 10px; left: 0; width: 12px; height: 12px; background-color: #0e6eb8; border-radius: 50%;}
.history_line::after {content: ""; position: absolute; top: 25px; left: 4px; bottom: -7px; width: 4px; background-color: #0e6eb81f; border-radius: 4px;}

.history_line .history_year {
    grid-column: 1; justify-self: center;
    font-size: 2rem; font-weight: 700; color: #333;
}

.history_line .history_inner {
    grid-column: 2;
    display: grid; grid-template-columns: 60px 1fr; align-items: start;
    line-height: 2;
}
.history_line .history_inner .history_month {
    grid-column: 1; justify-self: center;
    font-size: 1.6rem; font-weight: 900; color: #9e9f9f;
}

.history_line .history_inner .history_text {
    grid-column: 2;
    padding-left: 40px;
}
.history_line .history_inner .history_text .history_rec {
    margin-bottom: 20px;
    font-size: 1.6rem; font-weight: 400; color: #000;
}


/* contents/copartner */
.copartner_wrap {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 40px;}
.copartner_wrap .copartner_item {display: grid; grid-auto-flow: column; justify-content: start; align-items: center; column-gap: 5px;}
.copartner_wrap .copartner_item img {width: 186px; height: 87px;}
.copartner_wrap .copartner_item .copartner_info {display: grid; align-content: space-evenly; height: 90%;}
.copartner_wrap .copartner_item .copartner_info p {font-size: 1.5rem; font-weight: 500;}


/* contents/location */
.location_wrap {position: relative;}
.location_wrap .root_daum_roughmap {margin: 0 auto 50px; border-radius: 20px; box-shadow: 0 0 10px 0 #63636360;}
.location_wrap .root_daum_roughmap .wrap_controllers {display: none;}

.location_info {
    display: grid; grid-template-columns: 200px 1fr; align-items: start; column-gap: 50px; row-gap: 30px;
    width: 640px; margin: 0 auto 50px; padding: 0;
}
.location_info .info_type {text-align: right; font-size: 1.8rem; font-weight: 500;}
.location_info .info_value {font-size: 1.6rem; font-weight: 500; color: #636363;}
.location_info .info_value p {margin-bottom: 10px;} 



/* 사업소개 */
.ca_tab_wrap {
    display: grid; grid-auto-flow: column; justify-content: start; align-items: center; column-gap: 40px;
    width: 100%; padding: 0 30px; overflow-x: scroll; 
}
.ca_tab_wrap li {
    display: grid; justify-content: center; justify-items: center; align-items: start; row-gap: 5px; 
    width: 85px;
    white-space: nowrap;
}
.ca_tab_wrap li img {width: 85px; height: 85px;}
.ca_tab_wrap li p {font-size: 1.2rem; font-weight: 500; color: #333;}

.ca_content_list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 10px; row-gap: 30px;
    width: 100%; margin: 0; padding: 50px 5px;
}
.ca_content_item {
    display: grid; justify-content: center; justify-items: center; align-items: end; row-gap: 5px;
}
.ca_content_item img {
    width: 100%; height: auto;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #63636360;
}
.ca_content_item p {
    padding-bottom: 10px;
    font-size: 1.7rem; font-weight: 500; color: #333;
}


/* board list */
.board_cate_list {
    display: grid; grid-auto-flow: column; justify-content: start; align-items: center;
    height: 50px; margin-bottom: 20px; 
}
.board_cate_item {
    padding: 0 15px;
}
.board_cate_item a { height: 70px;
    font-size: 1.7rem; font-weight: 500; color: #333;
}

.board_top_wrap,
.board_top_wrap ul,
.board_top_wrap ul li {
    display: grid; grid-auto-flow: column; justify-content: space-between; align-items: center;
    font-size: 1.6rem; font-weight: 500;
}
.board_top_wrap ul li a,
.board_top_wrap ul li button {
    margin: 0 10px; padding: 5px 10px; 
    font-size: 1.2rem; font-weight: 400; color: #fff;
    background-color: #636363;
    border: 1px solid #63636322; border-radius: 20px;
}

.board_table {
    display: grid;
    width: 100%; margin-top: 30px;
}
.board_table .board_table_row {
    display: grid; grid-auto-flow: column ; justify-content: space-between; justify-items: center; align-items: center;
    height: 60px;
    border-bottom: 1px solid #63636322;
}
.board_table .board_table_row a,
.board_table .board_table_row p {
    text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow-x: scroll; font-size: 1.2rem; font-weight: 400; color: #333;
}
.board_table .board_table_row .board_table_row_title {
    padding-left: 20px;
    text-align: left; font-size: 1.4rem; font-weight: 500; color: #0e6eb8;
}
.board_table .table_header {
    background-color: #636363;
}
.board_table .table_header a,
.board_table .table_header p {
    font-weight: 400; color: #fff;
}

.board_table_row_xs {width: 20px;}
.board_table_row_sm {width: 40px;}
.board_table_row_md {width: 80px;}
.board_table_row_lg {width: 120px;}
.board_table_row_xl {width: 400px;}


.pg {
    display: grid; grid-auto-flow: column; justify-content: center; align-items: center; column-gap: 20px;
    height: 50px; margin-top: 20px;
}
.pg .pg_current {
    font-size: 2rem; font-weight: 700; color: #E4007F;
}
.pg .pg_page {
    font-size: 1.6rem; font-weight: 500; color: #636363;
}



/* board view */
.view_title {
    display: grid; justify-content: start; align-items: start;
    width: 100%; height: 62px; padding-left: 20px; overflow: hidden;
}

.view_info {
    display: grid; grid-auto-flow: column; justify-content: start; align-items: center; column-gap: 20px;
    width: 100%; height: 50px; padding-left: 30px;
    background-color: #63636315;
    border-top: 2px solid #000;
}
.view_info p {
    font-size: 1.4rem; font-weight: 400;
}

.view_content {
    min-height: 300px; padding: 50px 0 50px 30px;
    line-height: 2; font-size: 1.5rem; font-weight: 400;
}

.bo_v_nb {
    display: grid; grid-auto-flow: column; justify-content: center; align-items: center; column-gap: 30px;
    height: 60px;
}
.bo_v_nb li a {
    padding: 10px 20px;
    font-size: 1.8rem; font-weight: 500;
    border: 1px solid #333; border-radius: 20px;
}
.bo_v_nb li:hover a {
    color: #fff;
    background-color: #333;
}
.bo_v_nb .btn_list a {
    padding: 10px 40px;
    border-radius: 8px;
}





/* pc first : 점점 작아짐 : max-width : 해당 분기점 - 1px */
/* mobile first : 점점 커짐 : min-width : 해당 분기점  */
@media screen and (max-width: 767px) { /* pc first */
    .pc_only {display: none;}
    .mobile_only {display: block;}


}