:root {
  --primary: #1f397d;
  --s_primary: #cba585;
  --black:#000;
  --white: #fff;
  --red: #970000;
  --darkgray : #999; 
  --sub: #545b6d;
}
.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {line-height: inherit;}
/* slick common */
.slick-slider { -webkit-transition:all ease-in-out .3s; transition:all ease-in-out .3s; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.slick-slide { display:none; height:100%; min-height:1px; vertical-align:middle; }
.slick-list { overflow:hidden; height: fit-content;}
.slick-list.dragging { cursor:pointer; }
.slick-initialized .slick-slide { display:inline-block; overflow:hidden; }
.slick-arrow.slick-hidden { opacity:.5; cursor:auto; pointer-events: none; }
.slick-current { opacity:1; display:block; }
.slick-track { position:relative; left:0; top:0; display:block; }

/* form 스타일 공통 */
select, input { padding:0 0.75rem; margin: 0.1rem 0; border: 1px solid #ddd; background: #fff; color: #333; font-size: 0.8rem; height: 2.5rem; line-height: 2.4rem; max-width: 100%;}
select{background: #fff url('../../images/com/layout/ic_down.svg') no-repeat right 0.75rem center / 0.6rem; padding-right: 1.5rem; min-width: 4rem;}
textarea{width: 100%; height: 9rem; resize: none; border: 1px solid #dfdfdf; padding: 1rem;}
/* checkbox */
input[type="checkbox"]{vertical-align: middle; padding: 0; appearance: none; border: 1px solid var(--primary); border-radius: 0.2rem; width: 1rem; height: 1rem; background: #fff;}
input[type="checkbox"] + span{display: inline-block; margin-left: 0.25rem;} 
input[type="checkbox"]:checked{background: var(--primary) url('../../images/com/layout/ic_check.png') no-repeat center;}
input[type="checkbox"]:checked + span {color: var(--primary); font-weight: 700;}
input[type="checkbox"]:focus-visible {outline-offset: 1px; outline: 1px dotted var(--primary);}
input[type="checkbox"]:hover {cursor: pointer;}
input[type="checkbox"]:hover + span { cursor: pointer;}
input[type="checkbox"]:disabled {background-color: #999; box-shadow: none; opacity: 0.7; cursor: not-allowed;}
input[type="checkbox"]:disabled + span {opacity: 0.7; cursor: not-allowed;}
/* radiobtn */
input[type="radio"]{vertical-align: middle; padding: 0; appearance: none; border: 1px solid #ddd; border-radius: 50%; width: 1rem; height: 1rem; background: #fff;}
input[type="radio"] + span{display: inline-block; margin-left: 0.25rem;} 
input[type="radio"]:checked {border: 0.3rem solid var(--primary);}
input[type="radio"]:focus-visible {outline-offset: 1px; outline: 1px dotted var(--primary);}
input[type="radio"]:hover {cursor: pointer;}
input[type="radio"]:hover + span { cursor: pointer;}
input[type="radio"]:checked + span{color: var(--primary); font-weight: 700;}
input[type="radio"]:disabled {background-color: #999; box-shadow: none; opacity: 0.7; cursor: not-allowed;}
input[type="radio"]:disabled + span {opacity: 0.7; cursor: not-allowed;}
input.cal{background:#fff url('../../images/com/layout/ic_calendar.svg') no-repeat right 0.75rem center;}
label{display: inline-block;}
label + label{margin-left: 1.25rem;}

/* inner */
.inner{position: relative; width: 72rem; max-width: 100%; margin: 0 auto;} 

/* text_hid */
.hidden,
.ir_text,
.sr_only{ width: 1px; height: 1px; overflow: hidden; color: transparent; position: absolute; text-indent: -999px;}

/* margin padding */
.m0a{margin:0 auto;}
.mr0 { margin-right: 0!important;}
.mr5 { margin-right: 0.25rem;}
.mr10{ margin-right: 0.5rem;}
.mr15{ margin-right: 0.75rem;}
.mr20{ margin-right: 1rem;}
.mr25{ margin-right: 1.25rem;}
.mr30{ margin-right: 1.5rem;}
.mr40{ margin-right: 2rem;}
.mr50{ margin-right: 2.5rem;}
.ml0 { margin-left: 0!important;}
.ml5 { margin-left: 0.25rem;}
.ml10{ margin-left: 0.5rem;}
.ml15{ margin-left: 0.75rem;}
.ml20{ margin-left: 1rem;}
.ml25{ margin-left: 1.25rem;}
.ml30{ margin-left: 1.5rem;}
.ml40{ margin-left: 2rem;}
.ml50{ margin-left: 2.5rem;}
.mb0 { margin-bottom: 0!important;}
.mb5 { margin-bottom: 0.25rem;}
.mb10{ margin-bottom: 0.5rem;}
.mb15{ margin-bottom: 0.75rem;}
.mb20{ margin-bottom: 1rem;}
.mb25{ margin-bottom: 1.25rem;}
.mb30{ margin-bottom: 1.5rem;}
.mb40{ margin-bottom: 2rem;}
.mb50{ margin-bottom: 2.5rem;}
.mt0 { margin-top: 0!important;}
.mt5 { margin-top: 0.25rem;}
.mt10{ margin-top: 0.5rem;}
.mt15{ margin-top: 0.75rem;}
.mt20{ margin-top: 1rem;}
.mt25{ margin-top: 1.25rem;}
.mt30{ margin-top: 1.5rem;}
.mt40{ margin-top: 2rem !important;}
.mt50{ margin-top: 2.5rem;}
.mt60{ margin-top: 3rem;}
.mt80{ margin-top: 4rem;}
.mt100{ margin-top: 5rem;}

/* width */
.w_80{width: 4rem;}
.w_100{width: 5rem;}
.w_120{width: 6rem;}
.w_140{width: 7rem;}
.w_160{width: 8rem;}
.w_180{width: 9rem;}
.w_200{width: 10rem;}
.w_220{width: 11rem;}
.w_240{width: 12rem;}
.w_260{width: 13rem;}
.w_280{width: 14rem;}
.w_300{width: 15rem;}
.w_320{width: 16rem;}
.w_340{width: 17rem;}
.w_360{width: 18rem;}
.w_380{width: 19rem;}
.w_400{width: 20rem;}
.w_10p{width: 10%;}
.w_20p{width: 20%;}
.w_30p{width: 30%;}
.w_40p{width: 40%;}
.w_50p{width: 50%;}
.w_100p{width: 100%;}

/* color */
.c_blue{color: var(--primary) !important;}
.c_brown{color: var(--s_primary) !important;}
.c_black{color: var(--black) !important;}
.c_red{color: var(--red) !important;}
.c_white{color: var(--white) !important;}
.c_green{color: #2E5B1E !important;}
.c_gray{color: #999 !important;}

/* font-size */
.fs16{font-size: 0.8rem;}
.fs18{font-size: 0.9rem;}
.fs20{font-size: 1rem;}
.fs22{font-size: 1.1rem;}
.fs24{font-size: 1.2rem;}
.fs26{font-size: 1.3rem;}
.fs28{font-size: 1.4rem;}
.fs30{font-size: 1.5rem;}
.fs32{font-size: 1.6rem;}

/* font-weight */
.fw_r{font-weight: 300;}
.fw_m{font-weight: 400;}
.fw_b{font-weight: 600;}
.fw_eb{font-weight: 700;}

/* text-align */
.al{text-align: left;}
.ac{text-align: center;}
.ar{text-align: right;}

/* line */
.txt_line{text-decoration: underline;}

/* float */
.fl{float: left;}
.fr{float: right;}

/* background */
.b_blue{background: var(--primary) !important;}
.b_brown{background: var(--s_primary) !important;}
.b_black{background: var(--black) !important;}
.b_red{background: var(--red) !important;}
.b_gray{background: #ddd !important;}
.b_white{background: #fff !important;}

/* link */
a.link{background: #e3ebff; border-radius: 0.35rem; display: inline-block; padding: 0.1rem 0.75rem;} 

/* button */
.btn{display: inline-block; vertical-align: middle; padding: 0 1rem; line-height: 2.25rem; font-weight: 600; font-size: 0.7rem; text-align: center;}
.btn.large{line-height: 2.5rem;}
.btn.small{line-height: 2rem;}
.btn.xlarge{line-height: 3rem; font-size: 0.8rem;}
.btn.wh{border: 1px solid var(--black);}
.btn.blue{border: 1px solid var(--primary); color: var(--primary) !important;}
.btn.brown{border: 1px solid var(--s_primary); color: var(--primary);}
.btn.red{border: 1px solid var(--red); color: var(--primary);}
.btn[class*="b_"]{color: #fff;}
.btn.b_gray{color: #000;}
.btn i{vertical-align: baseline; margin-right: 0.5rem;}
.btm_btn{text-align: center; margin-top: 4rem;}
.btm_btn a{line-height: 3.5rem; width: 12rem; font-size: 1rem;}
.btm_btn a + a{margin-left: 2rem;}

/* title */
.tit1{position: relative; padding-left: 7.5rem; font-size: 1.4rem; font-weight: 700; margin: 2rem 0 2rem;}
.tit1::before{width: 6rem; height: 0.2rem; position: absolute; top: 1.05rem; left: 0; background: var(--primary); content: '';}
.tit2{position: relative; font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 1rem;}
.active_tit{position: relative; height: 23rem; width: 100vw; transform: translateX(calc(-1 * (100% - 72rem) / 2)); margin-bottom: 8rem;}
.active_tit .bg {position: absolute; width: 100%; height: 100%;}
.active_tit .bg img{width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); object-fit: cover;}
.active_tit .active{position: relative; color: #fff; text-align: center; font-size: 3rem; font-weight: 700; height: 100%; padding-top: 8rem; overflow: hidden;}
.active_tit .active .circle{position: absolute; width: 46.5rem; height: 46.5rem; border-radius: 50%; top: 0; left: calc(50% - 23.25rem); background: rgba(0,0,0,0.4);}
.active_tit .line{position: relative; width: 2px; height: 9rem; background: var(--primary); position: absolute; left: calc(50% - 1px); top: 18rem; z-index: 1; overflow: hidden;}
.active_tit .line em{position: absolute; display: block; width: 100%; background: #fff; height: 5rem;}
.active_tit .active em{ font-size: 1.4rem; display: block; width: 100%; font-weight: 600;}

/* tab */
.tab{margin-bottom: 2.5rem;}
.tab ul{display: flex;}
.tab ul li{flex-grow: 1;}
.tab.ty1 ul li a{display: flex; align-items: center; justify-content: center; color: var(--sub); border-bottom: 1px solid var(--sub); text-align: center; height: 4rem; font-size: 1.2rem; font-weight: 400; padding: 0 0.5rem; word-break: keep-all;}
.tab.ty1 ul li.on a{color: var(--primary); border-bottom: 2px solid var(--primary); font-weight: 600;}

.tab.ty2 ul{border-bottom: 2px solid var(--primary);}
.tab.ty2 ul li > a{display: flex; height: 4rem; justify-content: center; align-items: center; font-size: 1rem; }
.tab.ty2 ul li.on > a{background: var(--primary); border-radius: 0.75rem; color: #fff; font-weight: 600;}

.tab > a{display: none;}
.tab_change_con{display: none;}
.tab_change_con.active{display: block;}

.vertical_list{width: 12rem;}
.vertical_list ul{display: block;}
.vertical_list li:first-child a{border-top: 1px solid #dfdfdf;}
.vertical_list li a{display: block; line-height: 4rem; font-size: 1rem; color: #666; border-bottom: 1px solid #dfdfdf; text-align: center; transition: 0.3s; -webkit-transition: 0.3s;}
.vertical_list li a:hover{color: var(--primary); font-weight: 600;}
.vertical_list li.on a{border-bottom: 3px solid var(--primary); font-weight: 600; color: var(--primary);}

/* box */
.box{position: relative; margin-top: 1rem; background: #f8f8f8; font-size: 0.9rem; padding: 1.5rem 2rem;}
.box .box_list li{position: relative; padding-left: 0.5rem;}
.box .box_list li::before{width: 3px; height: 3px; border-radius: 50%; background: #333; position: absolute; top: 0.85rem; left: 0; content: '';}
.box.ty1{border: 1px dashed #dfdfdf; background: #f8f8f8;}
.box.ty2{border: 1px solid #dfdfdf; background: #f8f8f8;}

/* img_box */
.box.img_box{padding-left: 10rem; min-height: 9rem;}
.box.img_box p.box_img{position: absolute; top: 2.5rem; left: 2rem;}

/* list */
.list li{padding: 0.25rem 0;}
.list.ty1 > li{position: relative; padding: 0.5rem 0 0.5rem 0.75rem;}
.list.ty1 > li::before{width: 5px; height: 5px; border-radius: 50%; background: #333; position: absolute; top: 1.05rem; left: 0; content: '';}

.list.ty2{padding-left: 1rem;}

/* table */
.tbl {position:relative; width:100%; font-size:0.9rem; background:transparent; overflow:hidden; margin: 0.5rem 0;}
.tbl table {position:relative; width:100%; margin:0 0 0 -1px; border-top:2px solid #333; border-bottom: 1px solid #999; -webkit-overflow-scrolling:touch; word-break:keep-all;}
.tbl table thead th {padding:1rem; vertical-align:middle; color:#222; font-size:0.85rem; font-weight:400; font-weight:normal; border-bottom:1px solid #b9b9b9; border-left:1px solid #d2d2d2; background:#e9e9e9; text-align: center;}
.tbl table tbody th {padding:1rem; vertical-align:middle; color:#222; font-weight:400; font-weight:normal; border-bottom:1px solid #d2d2d2; border-left:1px solid #d2d2d2; background:#f8f8f8; text-align: center;}
.tbl table td {padding:1rem; border-bottom:1px solid #d2d2d2; border-left:1px solid #d2d2d2; word-break: break-all; vertical-align:middle; color:#333; line-height:1.5; }
.arc_bbs_data table tbody {text-align: center;}
.arc_bbs_data table tbody tr td:nth-child(1) {font-weight: bold;}
.arc_bbs_data table tbody tr {background-color: #f8f8f8;}

/* table - info */
.form_table{border-top: 2px solid #000; border-bottom: 1px solid #999;}
.form_table input[type="text"],.form_table input[type="password"], .form_table select{height: 2.25rem; line-height: 2.25rem;}
.form_table tr th,
.form_table tr td{border-top: 1px solid #dfdfdf; padding: 0.75rem 0.5rem;}
.form_table tr th{text-align: left; padding: 1.25rem 0.5rem 1.25rem 2rem; word-break: keep-all; vertical-align: top;}
.form_table tr th.require::before{content: '*'; color: var(--red); display: inline-block; margin-right: 0.5rem;}
.form_table .agree_box{padding: 1rem; font-size: 0.8rem; background: #f8f8f8; border: 1px solid #dfdfdf; max-height: 9rem; overflow-y: scroll;}
.form_table .agree_radio{margin: 2rem 0 1rem; text-align: right;}

/* table - board */
.board_tbl table {table-layout: fixed; line-height: 1.6rem; color: #666; text-align: center; border-top: 2px solid #000;}
.board_tbl table thead th {padding: 0.6rem 0.5rem;color: #222; font-weight: 600;border-bottom: 1px solid #707070; background: #f8f8f8; vertical-align: middle;}
.board_tbl table tbody td {padding: 0.6rem 0.5rem;border-bottom: 1px solid #666; vertical-align: middle;}
.board_tbl table tbody tr:hover {background: #f8faff; color: var(--primary); font-weight: 700;}
.board_tbl table tbody tr.noti td span{display: inline-block; line-height: 1.6rem; border-radius: 1rem; border: 1px solid var(--primary); color: var(--primary); width: 100%;}
.board_tbl table tbody tr.noti td span::before{content:"\f028"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 0.25rem;}
.board_tbl table tbody td.noti_tit {text-align: left;}
.board_tbl table tbody td.noti_tit a {display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.board_tbl table tbody td.noti_tit a:hover,
.board_tbl table tbody td.noti_tit a:focus,
.board_tbl table tbody td notiover {color: var(--primary); text-decoration: none;}
.board_tbl table tbody td.noti_tit a:active {color: var(--primary);}
.board_tbl table tbody td.noti_tit a:hover span.ico_answer,
.board_tbl table tbody td.noti_tit a:focus span.comment {text-decoration: none;}

.board_tbl .notice { font-weight: bold;}

/* calendar */
.calendar_box{border: 1px solid #ddd; padding: 2rem 2.5rem 0;}
.calendar_box .calendar_opt{margin-top: 2rem; border-top: 1px solid #dfdfdf; padding: 1rem 0;}
.calendar_box .calendar_opt li{position: relative; display: inline-block; padding-left: 2rem; line-height: 1.5rem; font-size: 0.8rem;}
.calendar_box .calendar_opt li + li{margin-left: 2rem;}
.calendar_box .calendar_opt li.selected::before{width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; border: 3px solid var(--primary); position: absolute; left: 0; content: '';}
.calendar_box .calendar_opt li.disable::before{width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; background: #eee; position: absolute; left: 0; content: '';}
.calendar_box .calendar_opt li.event::before{width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; background: #e3ebff; position: absolute; left: 0; content: '';}
.calendar_box .calendar_opt li.today::before{width: 1.5rem; height: 2px; background: #000; position: absolute; left: 0; bottom: 0; content: '';}
#datepicker{position: relative;}
#datepicker .ui-datepicker-prev,
#datepicker .ui-datepicker-next{width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; color: #fff; background: var(--primary); display: inline-block; position: absolute; top: 0; left: 0; cursor: pointer;}
#datepicker .ui-datepicker-prev::before,
#datepicker .ui-datepicker-next::before{content:"\f060"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #fff; font-size: 1rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
#datepicker .ui-datepicker-next::before{content:"\f061";}
#datepicker .ui-datepicker-prev span,
#datepicker .ui-datepicker-next span{font-size: 0; position: absolute; width: 1px; height: 1px; color: transparent;}
#datepicker .ui-datepicker-next{left: auto; right: 0;}
#datepicker .ui-datepicker-title{font-size: 1.4rem; text-align: center; margin-bottom: 1rem;}
#datepicker .ui-datepicker-calendar thead tr th{text-align: center;}
#datepicker .ui-datepicker-calendar tbody tr td{text-align: center;}
#datepicker .ui-datepicker-calendar tbody tr td a{display: inline-block; margin: 0.2rem; width: 100%; max-width: 3rem; height: 3rem; line-height: 3rem; text-align: center; border-radius: 0.4rem;}
#datepicker .ui-datepicker-calendar tbody tr td a.evt{ background: #F2F6FF;}
#datepicker .ui-datepicker-calendar tbody tr td a.disable-day{ background: #cccccc;}
#datepicker .ui-datepicker-calendar tbody tr td span{display: inline-block; margin: 0.2rem; width: 100%; max-width: 3rem; height: 3rem; line-height: 3rem; text-align: center; border-radius: 0.4rem;}
#datepicker .ui-datepicker-calendar tbody tr td.evt a{ background: #F2F6FF;}
#datepicker .ui-datepicker-calendar tbody tr td.disable-day span{ background: #cccccc;}
#datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today a{text-decoration: underline; text-decoration-thickness: 2px;}
#datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today span{text-decoration: underline; text-decoration-thickness: 2px;}
#datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-current-day a{background: #fff; border: 2px solid var(--primary);}
#datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-week-end a{color: var(--red);}
#datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-week-end span{color: var(--red);}


/* board */
.board_search{display: flex; justify-content: space-between; margin-bottom: 2rem; align-items: center;}
.board_search .b_count em{color: var(--primary); font-weight: 600; padding-left: 0.25rem;}
.board_search input[type="text"],
.board_search input[type="password"],
.board_search select{background-color: #f8f8f8;}

.board_detail_box{position: relative; background: #f8f8f8; padding: 2rem; border: 1px solid #dfdfdf; border-top: 1px solid #707070;}
.board_detail_box.ty2{background: none; padding: 0; border: 0; border-bottom: 2px solid #333;}
.board_detail_box .cate{display: inline-block; padding: 0 1rem; background: var(--primary); color: #fff; text-align: center; font-size: 0.8rem; line-height: 1.75rem;} 
.board_detail_box .tit{font-size: 1.6rem; margin: 1.5rem 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis;}
.board_detail_box .tit.no_ellipsis{white-space: normal;}
.board_detail_box.ty2 .tit{max-width: calc(100% - 15rem);}
.board_detail_box .date{color: #666; font-size: 1rem;}
.board_detail_box .date + .date{padding-left: 1rem; margin-left: 1rem; border-left: 1px solid #dfdfdf;}
.board_detail_box .share_util{position: absolute; right: 1rem; bottom: 2rem; z-index: 1;}
.board_detail_box.ty2 .share_util{right: 0;}
.board_detail_box .share_util > ul{display: flex;}
.board_detail_box .share_util > ul > li {position: relative; margin-left: 1rem;}
.board_detail_box .share_util > ul > li > a{display: block; background: #dfdfdf; border-radius: 0.25rem; line-height: 2.25rem; padding: 0 1rem; color: #666; transition:0.3s; -webkit-transition: 0.3s;}
.board_detail_box .share_util > ul > li > a i{margin-right: 0.5rem;}
.board_detail_box .share_util > ul > li > a:hover{background: #666; color: #fff;}
.board_detail_box .share_util > ul > li.share_list ul{position: absolute; width: 100%; left: 0; top: 2.25rem; display: none; align-items: center; background: #dfdfdf; border-radius: 0.25rem; font-size: 0.7rem;}
.board_detail_box .share_util > ul > li.share_list.on ul{display: block;}
.board_detail_box .share_util > ul > li.share_list ul li a{display: block; padding: 0 1rem; line-height: 2.25rem; border-radius: 0.25rem; color: #666; transition: 0.3s; -webkit-transition: 0.3s;}
.board_detail_box .share_util > ul > li.share_list ul li a i{margin-right: 0.5rem;}
.board_detail_box .share_util > ul > li.share_list ul li a:hover{background: #666; color: #fff;}
.board_detail_txt{padding: 4rem 1rem; font-size: 1rem; border: 1px solid #dfdfdf; border-top: 0;}
.board_detail_slide{position: relative; padding: 4rem 8rem; border: 1px solid #dfdfdf; border-top: 0;}
.board_detail_slide .slick-arrow{position: absolute; top:calc(50% - 1rem); transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0;}
.board_detail_slide .slick-arrow::before{content:"\f053"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 2.5rem;}
.board_detail_slide .slick-arrow span{color: transparent; width: 1px; height: 1px; position: absolute;}
.board_detail_slide .slick-next{left: auto;right: 0;}
.board_detail_slide .slick-next::before{content:"\f054";}
.board_detail_slide .item{text-align: center;}
.board_detail_slide .slick-dots{text-align: center; margin-top: 1rem;}
.board_detail_slide .slick-dots li{display: inline-block;}
.board_detail_slide .slick-dots li button{ width: 4rem; height: 2px; background: #999; margin: 0 0.4rem; color: transparent;}
.board_detail_slide .slick-dots li.slick-active button{background: #000;}
.board_detail_file dl{display: flex; line-height: 3rem; background: #f2f6ff; color: var(--primary);}
.board_detail_file dl dt{position: relative; width: 7rem; text-align: center;}
.board_detail_file dl dt::before{content:"\f142"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 0rem; right: 1rem; font-size: 0.7rem;}
.board_detail_file dl dd{width: calc(100% - 7rem);}
.board_detail_file dl dd a{border-bottom: 1px solid var(--primary);}
.board_detail_file dl dd a::before{content:"\f56d"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 0.5rem;}
.board_detail_nav{border-bottom: 1px solid #000; line-height: 3rem;}
.board_detail_nav dl{border-top: 1px solid #666; display: flex; line-height: 4rem;} 
.board_detail_nav dl dt{position: relative; width: 7rem; text-align: center;}
.board_detail_nav dl dt::before{content:"\f077"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 0rem; right: 1rem; font-size: 0.7rem;}
.board_detail_nav dl.next dt::before{content:"\f078";}
.board_detail_nav dl dd{width: calc(100% - 7rem);}

.board_detail_video{padding-top: 2.5rem; text-align: center; text-align: center; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf;}
.board_detail_video video{max-width: 47rem;}

/* evt_board */
.board_detail_event > div{display: flex; justify-content: space-between; padding: 4rem 0; border-bottom: 1px solid #dfdfdf;}
.board_detail_event > div .img_wrap{width: 30rem;}
.board_detail_event > div .form_table{width: calc(100% - 34rem); border-top: 0; border-bottom: 0;}

/* img_board */
.board_img ul{display: grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem;}
.board_img ul.li_3{ grid-template-columns:repeat(3, 1fr); }
.board_img ul li a{display: block; border: 1px solid #dfdfdf;}
.board_img ul li a:hover{border: 1px solid var(--primary); color: #fff;}
.board_img ul li .img{width: 100%; height: 12rem;}
.board_img ul li .txt{background: #f8f8f8; padding: 1.5rem 1rem;}
.board_img ul li a:hover .txt{background: var(--primary);}
.board_img ul li .txt span{margin-bottom: 0.5rem; display: block; height: 3rem; overflow: hidden;}
.board_img ul li .txt em{font-size: 0.7rem;}

/* paging */
/* 
.paging{line-height: 2.1rem; font-size: 0.8rem;}
.paging a{display: inline-block; vertical-align: middle; margin: 0 0.5rem;}
.paging p{display: inline-block; vertical-align: middle; color: #999; font-weight: 600; }
.paging p input{border: 1px solid #ddd; height: 2.1rem; line-height: 2.1rem; border-radius: 2.1rem; width: 4rem; text-align: center; background: #fff; margin-right: 0.5rem;}
.paging p a{width: 4rem; background: #000; color: #fff; text-align: center; border-radius: 2.1rem; margin-right: 0;} */ 
.paging_wrap{width: 100%; text-align: center; margin-top: 2rem;}
.paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.paging a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 35px;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    text-decoration: none;
    transition: all 0.2s;
}
/* 현재 페이지 강조 */
.paging a.on {
    background-color: #000; /* 이미지의 '이동' 버튼 색상과 통일 */
    color: #fff;
    font-weight: 555;
}
.paging a:hover:not(.on) {
    background-color: #f4f4f4;
}
.paging .num_list {
    display: flex;
    gap: 2px;
}


/* content */
.con_w100{width: calc(100vw - 1rem); transform:translateX(calc(-1 * (100% - 72rem) / 2)); -webkit-transform: translateX(calc(-1 * (100% - 72rem) / 2));}
.btn_sns_login{width: 14rem; border-radius: 0.5rem; line-height: 3.5rem; font-size: 1rem; display: inline-block; margin: 0 0.3rem; background: #fee500; }
.btn_sns_login img{width: 1.1rem; margin-right: 0.5rem;}
.btn_sns_login.naver{background: #03c75a; color: #fff;}
.btn_sns_login.self{background: var(--primary); color: #fff;}
.ap_complete{text-align: center; margin-bottom: 3rem; word-break: keep-all;}
.ap_complete > i{font-size: 3.5rem; color: var(--primary);}
.ap_complete p{font-size: 1.6rem; color: var(--primary); font-weight: 700; margin: 3rem 0 1rem;}
.ap_complete span{font-size: 1.2rem;}
.ap_complete em{font-size: 1.2rem; display: block;}

/* popup */
.layer_pop_wrap{display: none; position: fixed; background: rgba(0,0,0,0.5); width: 100%; height: 100%; top: 0; left: 0; z-index: 9999;}
.layer_pop_wrap.open{display: block;}
.layer_pop_wrap .layer_pop{width: 72rem; height: auto; max-width: 90%; max-height: 90%; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.layer_pop_wrap .layer_pop .layer_cont{max-height: calc(90vh - 3.5rem); overflow-y: auto; padding: 1.5rem;}
.layer_pop_wrap .layer_pop .layer_tit{line-height: 3.5rem; color: #fff; background: #000; padding: 0 2rem; font-size: 1.2rem;}
.layer_pop_wrap .layer_pop .btn_layer_close{position: absolute; top: 0; right: 1rem; line-height: 3.5rem; color: #fff; font-size: 1.5rem; z-index: 10;}
.layer_pop_wrap .layer_pop.ty2 .layer_cont{max-height: 90vh; padding: 0;}
.layer_pop_wrap .layer_pop.ty3{width: auto; height: auto;}
.layer_pop_wrap .layer_pop.ty3 .layer_tit{line-height: 2.5rem; font-size: 1rem; padding: 0 1.5rem;}
.layer_pop_wrap .layer_pop.ty3 .btn_layer_close{line-height: 2.5rem;}

/* common */
.ellipsis{display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ellipsis.line02{ height: 3em; line-height: 1.5em; -webkit-line-clamp:2; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.ellipsis.line03{ height: 4.5em; line-height: 1.5em; -webkit-line-clamp:3; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.ellipsis.line04{ height: 6em; line-height: 1.5em; -webkit-line-clamp:4; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.ellipsis.line05{ height: 7.5em; line-height: 1.5em; -webkit-line-clamp:5; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.ellipsis.line06{ height: 9em; line-height: 1.5em; -webkit-line-clamp:6; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.ellipsis.line07{ height: 10.5em; line-height: 1.5em; -webkit-line-clamp:7; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.ellipsis.line08{ height: 12em; line-height: 1.5em; -webkit-line-clamp:8; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.ellipsis.line09{ height: 13.5em; line-height: 1.5em; -webkit-line-clamp:9; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.ellipsis.line10{ height: 15em; line-height: 1.5em; -webkit-line-clamp:10; white-space: initial; -webkit-box-orient:vertical; display: -webkit-box; overflow: hidden}
.img{position: relative; overflow: hidden;}
.img img{width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); object-fit: cover;}
.arc_img img{width: auto !important;}
.transition{transition: all 0.3s; -webkit-transition: all 0.3s;}
.web_none{display: none;}
.relative { position : relative } 
.multiline { text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } 
.overflow { overflow : hidden }
.absr { position : absolute; top : 0; right : 0; } 
.flex { display : flex; justify-content: space-between; } 
.flex.align { align-items: center; } 
.flex2 { display : flex } 
.d_f{ display: flex}
.d_f_ac{ display: flex; align-items: center; align-content: center}
.d_f_ae{ display: flex; align-items: flex-end; align-content: flex-end}
.d_f_as{ display: flex; align-items: flex-start; align-content: flex-start}
.d_f_jc{ display: flex; justify-content: center; justify-items: center}
.d_f_je{ display: flex; justify-content: flex-end; justify-items: flex-end}
.d_f_js{ display: flex; justify-content: flex-start; justify-items: flex-start}
.d_f_jsb{ display: flex; justify-content: space-between}
.no_data{ min-height: 17rem; display: flex; flex-flow: column; justify-content: center; align-items: center; text-align: center; background: #F8F8F8; width: 72rem !important;}
.no_data.no_bg{background: transparent;}
.no_data .img_wrap i,
.no_data .img_wrap img{ width: 3.5rem; font-size: 3.5rem; margin-bottom: 1.5rem; color: #dfdfdf}
.no_data .txt_wrap{ font-size: 0.9rem; width: 100%; color: #999}
.tit1 .tit1_info{ font-size: 1rem; color: #333; font-weight: 600; margin-left: 1rem}


@media(max-width:1440px){
.inner{width: 100%; padding: 0 1rem;}
.active_tit{transform: none; margin-left: -1rem; height: 18rem; margin-bottom: 6rem;}
.active_tit .line{top: 13rem;}
.active_tit .active em{font-size: 1.2rem;}
.active_tit .active{font-size: 2rem; padding-top: 6.5rem;}
.active_tit .active .circle{width: 32rem; height: 32rem; left: calc(50% - 16rem);}

/* content */
.con_w100{width: calc(100% + 2rem); transform: translateX(-1rem);-webkit-transform: translateX(-1rem);}

/* popup */
.layer_pop_wrap .layer_pop{width: calc(100% - 2rem); max-width: calc(100% - 2rem); height: auto; left: 1rem; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.layer_pop_wrap .layer_pop .layer_cont{max-height: calc(90vh - 3.5rem);}
.layer_pop_wrap .layer_pop.ty2 .layer_cont{max-height: 90vh;}
.layer_pop_wrap .layer_pop.ty3{width: 100%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}

.board_detail_event > div{flex-wrap: wrap; padding: 2rem 0;}
.board_detail_event > div .img_wrap{width: 100%; text-align: center;}
.board_detail_event > div .form_table{width: 100%;}

.no_data{width: calc(100vw - 2rem) !important;}
}

@media(max-width:1024px){
/* tit */
.active_tit{margin-bottom: 3rem;}
.active_tit .line{display: none;}

/* tab */
.tab.ty2 > a{position: relative; display: block; width: 100%; background: var(--primary); border-radius: 0.4rem; padding: 0.7rem 3rem 0.7rem 1.3rem; color: #fff; font-size: 0.8rem;}
.tab.ty2 > a::before{content:"\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 0.9rem; right: 1rem; font-size: 0.6rem;}
.tab.ty2 > a.active::before{content: "\f077";}
.tab.ty2 ul{display: none; background: #fff; border: 1px solid var(--primary); border-radius: 0.4rem; margin-top: 0.25rem; overflow: hidden;}
.tab.ty2 ul.active{display: block;}
.tab.ty2 ul li + li{border-top: 1px solid #dfdfdf;}
.tab.ty2 ul li > a{ height: auto; padding: 0.5rem; color: #000; font-size: 0.8rem;}
.tab.ty2 ul li.on > a{border-radius: 0;}
.tab.ty2 ul li > a i{display: none;}

.vertical_list{width: 100%; overflow-x: scroll; margin-bottom: 1.5rem; border-bottom: 1px solid #dfdfdf;}
.vertical_list::-webkit-scrollbar {height: 0;}
.vertical_list ul{display: flex; white-space: nowrap;  }
.vertical_list li a{padding: 0 1rem; line-height: 3rem; border-bottom: 0;}
.vertical_list li:first-child a{border-top: 0;}

/* board */
.board_detail_slide{padding: 2rem 2.5rem;}
.board_detail_slide .slick-arrow{font-size: 2rem;}

.board_img ul{grid-template-columns:repeat(3, 1fr);}

/* content */
.con_tab_w100{width: calc(100% + 2rem); margin-left: -1rem;}
.tab_none{display: none;}
.web_none{display: block;}
}

@media(max-width:800px){
/* mobile width */
.mob_w_80{width: 4rem;}
.mob_w_100{width: 5rem;}
.mob_w_120{width: 6rem;}
.mob_w_140{width: 7rem;}
.mob_w_160{width: 8rem;}
.mob_w_180{width: 9rem;}
.mob_w_200{width: 10rem;}
.mob_w_220{width: 11rem;}
.mob_w_240{width: 12rem;}
.mob_w_260{width: 13rem;}
.mob_w_280{width: 14rem;}
.mob_w_300{width: 15rem;}
.mob_w_320{width: 16rem;}
.mob_w_340{width: 17rem;}
.mob_w_360{width: 18rem;}
.mob_w_380{width: 19rem;}
.mob_w_400{width: 20rem;}
.mob_w_10p{width: 10%;}
.mob_w_20p{width: 20%;}
.mob_w_30p{width: 30%;}
.mob_w_40p{width: 40%;}
.mob_w_50p{width: 50%;}
.mob_w_100p{width: 100%;}
.mob_w_auto{width: auto !important;}

/* btn */
.btm_btn{margin-top: 3rem; display: flex; justify-content: center;}
.btm_btn a{line-height: 3rem; flex:1; font-size: 0.9rem;}
.btm_btn a + a{margin-left: 1rem;}

/* tit */
.tit1{padding-left: 4rem; font-size: 1.2rem; margin: 3rem 0 1.5rem;}
.tit1::before{width: 3rem; top: 0.9rem;}
.tit2{font-size: 1.1rem;}

/* paging */
.paging_wrap{margin-top: 2rem;}
.paging p input{width: 3rem;}
.paging p a{width: 3rem; margin: 0 0.3rem;}

/* search */
.board_search{width: calc(100% + 2rem); margin-left: -1rem; margin-top: -2rem; background: #f8f8f8; padding: 1.5rem 1rem; flex-wrap: wrap;}
.board_search .b_count{width: 100%; margin-bottom: 1rem;}
.board_search form,
.board_search > div{width: 100%;}
.board_search form select,
.board_search > div select{width: 5rem; background-color: #fff;}
.board_search form a,
.board_search > div a{width: 100%; margin-top: 0.5rem;}
.board_search form input,
.board_search > div input{width: 100%; background-color: #fff !important;}
.board_search form select ~ input,
.board_search > div select ~ input{width: calc(100% - 5.3rem);}


/* detail_box */
.board_detail_box{padding: 1.5rem; text-align: center;}
.board_detail_box .tit{margin: 1.25rem 0 0.5rem; font-size: 1.4rem;}
.board_detail_box.ty2 .tit{max-width: 100%;}
.board_detail_box .share_util{position: relative; right: auto; bottom: auto; margin-top: 1rem;}
.board_detail_box.ty2 .share_util{padding-bottom: 1.5rem;}
.board_detail_box .share_util > ul{justify-content: center;}
.board_detail_box .share_util > ul > li:last-child{display: none;}
.board_detail_box .share_util > ul > li span{display: none;}
.board_detail_box .share_util > ul > li > a{width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; padding: 0;}
.board_detail_box .share_util > ul > li > a i{margin-right: 0;}
.board_detail_box .share_util > ul > li.share_list ul{top: 2.5rem;}
.board_detail_box .share_util > ul > li.share_list ul li a{padding: 0; text-align: center;}
.board_detail_box .share_util > ul > li.share_list ul li a i{margin-right: 0;}
.board_detail_box .date + .date{padding-left: 0.5rem; margin-left: 0.5rem;}
.board_detail_txt{padding: 2rem 1rem;}
.board_detail_file dl dt{width: 6rem; text-align: left; padding-left: 1rem;}
.board_detail_file dl dd{width: calc(100% - 6rem); margin-right: 1rem;}
.board_detail_nav dl{line-height: 3.5rem;} 
.board_detail_nav dl dt{width: 6rem; text-align: left; padding-left: 1rem;}
.board_detail_nav dl dd{width: calc(100% - 6rem);}
.board_detail_slide .slick-dots li button{width: 2.5rem;}
.board_detail_slide .slick-arrow::before{font-size: 1.5rem;}

/* img */
.board_img ul{grid-template-columns:repeat(2, 1fr) !important;}

/* table */
.tbl table thead th,
.tbl table tbody th{padding: 0.75rem 0.5rem;}
.tbl table td{padding: 0.75rem 0.5rem;}
.board_tbl table colgroup {display: none;}
.board_tbl table thead {display: none;}
.board_tbl table tbody tr:after {content: "";display: block;clear: both;overflow: hidden;}
.board_tbl table {text-align: left;}
.board_tbl table tbody tr {position: relative;display: block;padding: 1rem 0;border-bottom: 1px solid #dfdfdf;}
.board_tbl table tbody td {display: block; float: left; width: 100%; border: none; padding: 0; font-size: 0.8rem;}
.board_tbl table tbody td.noti_tit{float: none; width: 100%; color: #000; font-weight: 700; margin-bottom: 0.5rem; font-size: 0.9rem;}
.board_tbl table tbody td.mob_none{display: none;}
.board_tbl table tbody td.file{display: none;}
.board_tbl table tbody td.writer{float: right;}
.board_tbl table tbody tr.noti{padding-top: 3.5rem;}
.board_tbl table tbody tr.noti td:first-child{position: absolute; top: 1rem; left:0; width: 4rem; text-align: center; padding: 0;}
table a {text-decoration: none !important;}
table a:hover, table a:active {color: var(--primary) !important; text-decoration: none !important;}
.footer a {text-decoration: none !important;}
.footer a:hover, .footer a:active {color: #fff !important; text-decoration: none !important;}
.header_top a {text-decoration: none !important;}
.header_top a:hover, .header_top a:active {color: #fff !important; text-decoration: none !important;}

/* mob_table */
.tbl.mob_tbl table,
.tbl.mob_tbl thead,
.tbl.mob_tbl thead tr,
.tbl.mob_tbl thead th,
.tbl.mob_tbl tbody,
.tbl.mob_tbl tbody tr,
.tbl.mob_tbl tbody td,
.tbl.mob_tbl tbody th{display: block; width: 100%;}

/* scroll_table */
.tbl.scroll{width:100%; overflow-x:auto; background-repeat:no-repeat; z-index:1}
.tbl.scroll table{width:800px;}

/* row_table */
.tbl.m_row table{ display: flex}
.tbl.m_row table colgroup{ display: none}
.tbl.m_row thead,
.tbl.m_row tbody,
.tbl.m_row tr,
.tbl.m_row th,
.tbl.m_row td{ display: block}
.tbl.m_row thead{ min-width: 4.5rem; width: 30%}
.tbl.m_row tbody{width: 70%;}
.tbl.m_row table tr{ margin: 0; border-bottom: solid 1px #DFDFDF}
.tbl.m_row table tr:last-child{ border-bottom: none}
.tbl.m_row table tr th{ background: #F8F8F8; width: 100%}
.tbl.m_row table tr td{ text-align: left}
.tbl.m_row table tr th,
.tbl.m_row table tr td{padding: 0.5rem 1rem; height: 3.5rem; display: flex; align-items: center;}

/* form_table */
.form_table{padding: 1.25rem 0;}
.form_table table,
.form_table tbody,
.form_table tr,
.form_table tr td,
.form_table tr th{display: block; width: 100%;}
.form_table tr + tr{margin-top: 1.25rem;}
.form_table tr td,
.form_table tr th{padding: 0.3rem 0; border-top: 0;}
.form_table .email input{width: calc(50% - 0.7rem);}
.form_table .email select{width: 100%; margin-left: 0; margin-top: 0.5rem;}
.form_table .phone input{width: calc(33.3% - 0.6rem);}
.form_table .address input:first-child{width: calc(100% - 7.2rem);}
.form_table .birth select{width: calc(33.3% - 1.6rem);}

/* row */
.form_table.m_row{ padding: 0}
.form_table.m_row table tr{ display: flex; margin: 0; border-bottom: solid 1px #DFDFDF}
.form_table.m_row table tr:last-child{ border-bottom: none}
.form_table.m_row table tr th{ background: #F8F8F8; padding: 1rem; min-width: 5rem; width: 30%; display: flex; flex-flow: column; align-items: center; align-content: center; justify-content: center; text-align: left}
.form_table.m_row table tr td{ padding: 1rem}

/* calendar */
.calendar_box{padding: 1rem 1rem 0; border: 0; border-radius: 0.4rem; box-shadow: 3px 3px 0.5rem rgba(0,0,0,0.15);}
.calendar_box .calendar_opt{border-top: 1px dashed #dfdfdf;}
.calendar_box .calendar_opt li{margin:0.1rem 0;}
.calendar_box .calendar_opt li + li{margin-left: 1rem;}

#datepicker .ui-datepicker-calendar tbody tr td a{width: 2.5rem; height: 2.5rem; line-height: 2.5rem;}

/* box */
.box{padding: 1.5rem 1rem;}
.box.img_box{padding-left: 1rem;}
.box.img_box p.box_img{position: relative; top: auto; left: auto; text-align: center; margin-bottom: 1rem;}
.box.img_box p.box_img img{width: 3.5rem;}

/* tab */
.tab.ty1 ul li a{height: 3rem; font-size: 1rem;}

/* content */
.con_mob_w100{width: calc(100% + 2rem); margin-left: -1rem;}
.btn_sns_login{line-height: 3rem; width: 100%; margin: 0 0 0.5rem 0;}
.ap_complete > i{font-size: 4rem;}
.ap_complete p{font-size: 1.6rem; color: var(--primary); font-weight: 700; margin: 1rem 0;}
.ap_complete span{font-size: 1rem;}
.ap_complete em{font-size: 0.8rem; margin-top: 1rem;}
}

@media(max-width:480px){
 /* img */
 .board_img ul{grid-template-columns:repeat(1, 1fr) !important; gap: 1rem;}
 .board_img ul li .img{height: 10rem;}

 /* calendar */
  #datepicker .ui-datepicker-calendar tbody tr td a{width: 2rem; height: 2rem; line-height: 2rem;}
}

@media(max-width:380px){
 /* calendar */
 #datepicker .ui-datepicker-calendar tbody tr td a{width: 1.8rem;}
}