@charset "utf-8";

/* ==========================================================================
    BASIC SETTING
    ========================================================================== */
::selection{background-color: var(--point-color03); color: #fff;}
body{font-size: 16px; color: var(--basic-color); font-weight: 400; font-family: 'NanumSquare', 'Noto Sans KR', 'Malgun Gothic', '맑은고딕' , '돋움','dotum', 'Helvetica', 'AppleSDGothicNeo', sans-serif; letter-spacing: -0.5px; background-color: var(--bg-color);}

#wrap{position: relative; width: 100%;}
#header{position: fixed; top: 0; width: 100%; z-index: 200}
#container{position: relative; padding-top: var(--header-height); transition: .3s ease-in-out;}
#footer{position: relative;}
#content{position: relative; min-height: 400px;}
.main-grid{position: relative; width: 1260px; margin: 0 auto;}
.grid01{position: relative; padding-left: var(--main-gap); padding-right: var(--main-gap);}
.defalut-logo{width: 275px;}
.small-logo{width: 250px;}
.shorthand-logo{width: 81px;}

/* ==========================================================================
   HEADER
   ========================================================================== */
#header .inner-header{display: flex; justify-content: space-between; align-items: center; position: relative; width: 100%; height: var(--header-height); border-bottom: 1px solid #eaeaea; background-color: var(--bg-color); transition: .3s ease-in-out;}
#header .right-set{display: flex; align-items: center;}
#gnb > ul{display: flex;}
#gnb > ul > li{position: relative; font-size: 17px; font-weight: 800; letter-spacing: 0; margin: 0 7px;}
#gnb > ul > li:hover,
#gnb > ul > li.active{color: var(--point-color01);}
#gnb > ul > li > a{padding: 15px 10px;}

#gnb .sub-menu{display: none; position:absolute; top: 33px; width: 160px; left: calc(50% - 80px); text-align: center; background: var(--point-color03); animation: fadeEffect .3s;}
#gnb .sub-menu::after{content: ""; display: block; position: absolute; top: -6px; left: 50%; margin-left: -3px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--point-color03);}
#gnb .sub-menu > ul{padding: 11px 0}
#gnb .sub-menu > ul > li > a{display:block; font-size:13px; font-weight: 400; color:rgba(255,255,255,.7); line-height:30px; transition:.2s ease-in-out}
#gnb .sub-menu > ul > li > a:hover,
#gnb .sub-menu > ul > li > a.active{color:rgba(255,255,255,1)}
#gnb > ul > li:hover .sub-menu{display:block}

#header .btn-right{position: relative; padding-left: 34px; margin-left: 23px;}
#header .btn-right::before{content: ""; position: absolute; left: 0; top: calc(50% - 10px); display: block; width: 1px; height: 18px; background-color: #e5e5e5;}
#btn-sidenav{position: relative; width: 30px; height: 26px; padding: 0;}
#btn-sidenav span{position: absolute; right: 0; display: block; height: 2px; background-color: var(--point-color03); transition: .3s ease-in-out;}
#btn-sidenav span:nth-child(1){top: 3px; width: 25px;}
#btn-sidenav span:nth-child(2){top: 10px; width: 16px;}
#btn-sidenav span:nth-child(3){top: 18px; width: 19px;}
#btn-sidenav.active span:nth-child(1),
#btn-sidenav:hover span:nth-child(1){width: 19px;}
#btn-sidenav.active span:nth-child(2),
#btn-sidenav:hover span:nth-child(2){width: 25px;}
#btn-sidenav.active span:nth-child(3),
#btn-sidenav:hover span:nth-child(3){width: 16px;}
/* ==========================================================================
   FOOTER
    ========================================================================== */
#footer .footer-menu{background-color: var(--point-color02);}
#footer .footer-menu .inner-grid{display: flex; justify-content: space-between; height: 56px;}
#footer .footer-menu .inner-grid > ul{display: flex; align-items: center; height: 100%;}
#footer .footer-menu li{display: flex; align-items: center; margin-right: 35px;}
#footer .footer-menu li:last-child{margin-right: 0;}
#footer .footer-menu li > a{font-size: 14px; font-weight: bold; color: #fff; line-height: 20px; padding: 4px 3px}
#gototop > a{display: block; width: 56px; height: 56px; background: var(--point-color01) url('../images/common/arr0301.png') no-repeat 50%; background-size: 10px auto; transition: .2s ease-in-out;}
#gototop:hover > a{background-position: 50% calc(50% - 2px);}
#footer .inner-footer{display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 32px; padding-bottom: 60px}
#footer .address{display: flex; align-items: center;}
#footer .address .logo-f{margin-right: 22px;}
#footer address{font-size: 13px; font-weight: 500; color: #222; line-height: 22px;}
#footer address .company-name{font-size: 15px; font-weight: bold; color: var(--point-color02); margin-bottom: 12px;}
#footer address > ul{display: flex; flex-wrap: wrap;}
#footer address > ul > li{margin-right: 20px;}
#footer address > ul > li:last-child{margin-right: 0;}
#footer address span{font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: bold; color: var(--point-color0101);}
#footer address .copyright{font-size: 11px; color: #999; letter-spacing: 0.75px; text-transform: capitalize;}

#footer .right-set{display: none; width: 236px;}
#family-site{position: relative; text-align: left; z-index: 100;}
#family-site .select{position: absolute; left: 0; width: 100%; height: 42px; line-height: 42px; padding-left: 13px; border-left: 1px solid transparent; border-right: 1px solid transparent; font-size:14px; font-weight:bold; text-transform: uppercase; border-bottom: 1px solid #222; background-color: #fff; cursor: pointer; user-select: none;}
#family-site .select:after{content: ""; display: block; position: absolute; right: 10px; top: 15px; width: 10px; height: 6px; background: url('../images/common/arr0501.png') no-repeat 0 0; background-size: 100% auto; transition: transform .3s ease-in-out;}
#family-site .list-family{position: absolute; bottom: 0; left: 0; max-height: 0; width: 100%; background-color: #fff; overflow: hidden; transition: max-height ease-in-out.5s;}
#family-site .list-family ul{border: 1px solid #eeeee6;}
#family-site .list-family li a{display: block; line-height: 41px; padding-left: 14px; font-size: 14px; font-weight: 300; color: #222; user-select: none}
#family-site .list-family li a:hover{color: #5a5a55}
#family-site .list-family li a span{font-family: 'Roboto', sans-serif; font-size: 13px; color: #666;}
#family-site .list-family li a span:before{content: ""; display: inline-block; width: 1px; height: 12px; background-color: #d2d2d2; margin: 0 10px 0 5px}
#family-site.open .select{border-left: 1px solid #eeeee6; border-right: 1px solid #eeeee6;}
#family-site.open .list-family{max-height: 110px}
#family-site.open .select:after{transform: rotate(540deg);}

/* ==========================================================================
   SIDE NAVIGAION
    ========================================================================== */   
#right-sidebar{flex-direction: column; padding: 0 20px; transition: transform .4s ease-in-out;}
#right-sidebar .top-sidebar{display: flex; justify-content: space-between; align-items: center; height: var(--header-height);}
#right-sidebar .top-sidebar .btn-close{opacity: 1;}
#right-sidebar .top-sidebar .btn-close img{width: 18px;}
#right-sidebar .bottom-sidebar{position: relative; padding: 15px 0; line-height: 20px; font-size: 11px; color: #9d9d9d; text-align: center;}
#right-sidebar .sidenav{flex: 1; position:relative; flex: 1; overflow-y: auto;}
#right-sidebar .sidenav::-webkit-scrollbar{display: none}
#right-sidebar .sidenav > ul > li > a,
#right-sidebar .sidenav > ul > li > .accordion-button{display: flex; align-items: center; height: 60px; padding: 0 12px; border-top: 1px solid #e7e7e7; font-size: 17px; font-weight: 800; text-transform: uppercase;}
#right-sidebar .sidenav > ul > li:first-child > a,
#right-sidebar .sidenav > ul > li:first-child > button{border-color: #ddd;}
#right-sidebar .sidenav > ul > li:last-child{border-bottom: 1px solid #e7e7e7}
#right-sidebar .sidenav .accordion-button{box-shadow:none; background-color:transparent}
#right-sidebar .sidenav .accordion-button::after{width: 12px; height: 12px; background: url('../images/common/ico_sidebar1_1.png') no-repeat center; background-size: 12px auto; transition: .2s ease-in-out;}
#right-sidebar .sidenav .accordion-button:not(.collapsed)::after{background-image: url('../images/common/ico_sidebar1_2.png'); transition: .2s ease-in-out;}
#right-sidebar .sidenav .item-single{background: url('../images/common/ico_sidebar1_3.png') no-repeat calc(100% - 13px) center; background-size: 8px auto;}
#right-sidebar .sidenav .item-home{background: url('../images/common/ico_sidebar1_4.png') no-repeat calc(100% - 13px) center; background-size: 13px auto;}
#right-sidebar .sidenav > ul > li > a.active,
#right-sidebar .sidenav > ul > li > button.active,
#right-sidebar .sidenav .accordion-button:not(.collapsed),
#right-sidebar .sidenav > ul > li > a:hover,
#right-sidebar .sidenav .accordion-button:hover{color: var(--point-color03);}
#right-sidebar .sidenav .dp2{padding: 15px 20px; border-top: 1px solid #e7e7e7}
#right-sidebar .sidenav .dp2 li a{font-size: 15px; font-weight: 800; color: #999; line-height: 32px; transition: .2s ease-in-out;}
#right-sidebar .sidenav .dp2 li a.active,
#right-sidebar .sidenav .dp2 li a:hover{color: #222;}

/* ==========================================================================
   SUB LAYOUT
    ========================================================================== */
#sub-vis{display: flex; justify-content: center; align-items: center; height: 260px; background-repeat: no-repeat; background-position: center; background-size: cover;}
#sub-vis.vis1{background-image: url('../images/common/sub_vis01.jpg')}
#sub-vis.vis2{background-image: url('../images/common/sub_vis02.jpg')}
#sub-vis.vis3{background-image: url('../images/common/sub_vis03.jpg')}
#sub-vis.vis4{background-image: url('../images/common/sub_vis04.jpg')}
#sub-vis .tit-set{font-weight: bold; text-align: center;}
#sub-vis .tit-set .txt-en1{font-size: 16px; font-weight: bold; color: var(--point-color01); letter-spacing: 1px; margin-bottom: 13px;}
#sub-vis .tit-set .title{font-size: 36px; font-weight: 800; color: #fff; line-height: 1.2;}
#sub-vis .tit-set .txt-en2{font-size: 10px; font-weight: 400; color: rgba(255,255,255,.5); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 18px;}

/*서브 메뉴*/
#sub-nav{position: relative;}
#sub-nav > ul{display: flex; }
#sub-nav > ul > li{flex: 1; text-align: center; background-color: var(--point-color03);}
#sub-nav > ul > li > a{display: flex; justify-content: center; align-items: center; height: 60px; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: bold; color: #fff; line-height: 22px; word-break: keep-all; transition: .3s;}
#sub-nav > ul > li > a.txt-small{letter-spacing: -1px;}
#sub-nav > ul > li > a:hover{color: var(--point-color01);}
#sub-nav > ul > li > a.active{color: var(--point-color03); background-color: var(--bg-color);}

.pg-title{text-align: center; padding-top: 60px; padding-bottom: 41px; border-bottom: 1px solid var(--point-color03);}
.pg-title .txt-en{font-family:'Roboto', sans-serif; font-size: 11px; font-weight: bold; color: var(--point-color01); letter-spacing: 0.25px; text-transform: uppercase; margin-bottom: 7px;}
.pg-title .title{font-family: 'NanumSquare'; font-size: 34px; font-weight: 700; color: var(--point-color03);}
.sec-title{font-size: 34px; font-weight: bold; color: var(--point-color03); text-align: center;}

/* ==========================================================================
   BOARD
    ========================================================================== */
.pg-board .pg-title{padding-bottom:0; border-bottom: 0}
.pg-board .sec-board{padding-top: 45px; padding-bottom: 90px;}
.pg-board .sec-board .bo_top, 
.pg-board .sec-board .bo_basic_list{font-family: 'Noto Sans KR', sans-serif; border-color:#222}
.pg-board .sec-board .bo_top .total{font-family: 'Open Sans', sans-serif; position:relative; top:7px; font-size:14px;}
.pg-board .sec-board .bo_top .search select{height:38px; padding-left:12px; background:url('../images/common/arw_select1.png') no-repeat calc(100% - 8px) center; background-size:11px auto;}
.pg-board .sec-board .bo_top .search input[type="text"]{height:38px;}
.pg-board .sec-board .bo_top .search input[type="submit"]{height:38px; padding:0 17px; font-size:12px; color:#fff; border-color:#f39800; background:#f39800}
.pg-board .sec-board .bo_basic_list  img.attach_file{width: 16px;}
.pg-board .sec-board .bo_basic_list th{border-bottom:1px solid #ddd; font-family: 'Open Sans', sans-serif; font-size:13px; font-weight:500}
.pg-board .sec-board .bo_basic_list th.a{width:90px}
.pg-board .sec-board .bo_basic_list tbody td{font-weight:400}
.pg-board .sec-board .bo_basic_list tbody .tda,
.pg-board .sec-board .bo_basic_list tbody .tdc,
.pg-board .sec-board .bo_basic_list tbody .tdd{font-family: 'Open Sans', sans-serif}
.pg-board .sec-board .bo_basic_list tbody .tdb a{letter-spacing:0;}
.pg-board .sec-board .bo_basic_list tbody .tdb{padding-left:20px}
.pg-board .sec-board .bo_basic_list td{padding:20px 0; vertical-align:middle; }
.pg-board .sec-board .bo_pagenate .paging ol li a.on,
.pg-board .sec-board .bo_pagenate .paging ol li a:hover{border-color:#0057a8; font-family: 'Open Sans', sans-serif; color:#0057a8}
.pg-board .sec-board .bo_basic_view > table{border-top:1px solid #333; }
.pg-board .sec-board .bo_basic_view th span.tit{line-height:1.4}
.pg-board .sec-board .bo_basic_view th span.date{font-weight:normal; color:#777}
.pg-board .sec-board .bo_basic_view td.con{font-weight:400; line-height:1.6}
.pg-board .sec-board .bo_btn a{font-family: 'Noto Sans KR', sans-serif; font-size:13px}
.pg-board .sec-board .bo_btn a.color1{border-color:#f39800; background:#f39800}
.pg-board .sec-board .bo_btn a.color1:hover{color:#fff; background:#f39800}
.pg-board .sec-board .bo_footer{padding-bottom:0}
.pg-board .sec-board .bo_basic_write{font-family: 'Noto Sans KR', sans-serif; border-top:1px solid #222}
.pg-board .sec-board .bo_basic_view th span.tit{font-size:17px; color:#333}
.pg-board .sec-board .bo_basic_view th span.date{font-size:14px; font-weight:300; color:#999}
.pg-board .sec-board .bo_basic_view td.con{font-size:15px; color:#555;}
.pg-board .sec-board .bo_btn .btn_right{right:0; background-color:#f39800}
.pg-board .sec-board .bo_btn .btn_right a{display:block; width:80px; font-size:14px; color:#fff; line-height: 30px; text-align: center; background-color: #f39800}
.pg-board .sec-board .attach_file{font-family:'Roboto', sans-serif; font-size: 13px; font-weight: 400; color: #999; margin-bottom: 7px;}
.pg-board .sec-board .attach_file a{font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 400; color: #222; margin-right: 5px; padding-left: 24px; background:url('../images/common/ico_file2.png') no-repeat 0 center; background-size: 16px auto;}