@charset "UTF-8";

/** 기존 inc/common.css 에 있던 내용 - 우선 수정하지 않음. */

/*
	Ver.1.0.1.
	20170614 CSS통일작업

	Ver.1.0.2.
	20170623 이전글다음글 css수정, 테이블에 b_wrap요소 추가

	Ver.1.0.3.
	20170630 폰트 SIZE,LINE-HEIGHT변경

	Ver.1.0.4.
	20170713 게시판댓글css변경

	Ver.1.0.5.
	20170714 h4_title 색상변경

	Ver.2.0.0.
	20170719 타이틀, 추가
	연한파랑 색상추가

	Ver.2.0.1.
	검색CSS추가

	Ver.2.0.2.
	20170817 list CSS변경

	Ver.2.0.3.
	20171030 italic 추가
	20171031 tablet 추가

	Ver.2.0.4.
	20171110 검색css 변경

	Ver.3.0.0
	20171122 폼뷰CSS삭제위해통합

	Ver.3.0.2
	20171226 게시판뷰 파일첨부 수정

	20180131 게시판스타일 추가
	20180822 init 리셋 추가

    2024.08 common 정리작업 - 사이트 header의 common 이동
*/

* { scroll-behavior: smooth; box-sizing: border-box; }
.tablet {display:block;}
a.a_link {color:#0a72ca;}
a.a_link:hover {text-decoration:underline; cursor:pointer;}

/* color */

/* ! 5) 컬러 CSS */

/** 폰트용 색상 */
.cm {color:#3698d7 !important;}		/* 메인컬러 */
.cm_l {color:#53b1eb !important;}		/* 메인컬러 */
.cm_d {color:#1076b6 !important;}		/* 메인컬러 */
.cr {color:#d10d0d !important;}		/* 빨강, red*/
.cr_l {color:#ff3535 !important;}		/* 빨강_라이트, red*/
.cr_d {color:#9e0d0d !important;}		/* 빨강_다크, red*/
.cy {color:#f3bb04 !important;} 		/* 노랑, yello */
.cy_l {color:#fffc4e !important;} 		/* 노랑_라이트, yello */
.cy_d {color:#f19d00 !important;} 		/* 노랑_다크, yello */
.co {color:#ff9100 !important;} 		/* 오렌지, orange */
.co_l {color:#ff9f50 !important;} 		/* 오렌지_라이트, orange */
.co_d {color:#f06e04 !important;} 		/* 오렌지_다크, orange */
.cg {color:#006b4d !important;} 		/* 초록, green */
.cg_l {color:#007d43 !important;} 		/* 초록_라이트, green */
.cg_d {color:#034f39 !important;} 		/* 초록_다크, green */
.ce {color:#009e96 !important;} 		/* 청녹, emerald */
.ce_l {color:#00d6c4 !important;} 		/* 청녹_라이트, emerald */
.ce_d {color:#00666d !important;} 		/* 청녹_다크, emerald */
.cs {color:#0088d7 !important;} 		/* 하늘, sky */
.cs_l {color:#0e9ff3 !important;} 		/* 하늘_라이트, sky */
.cs_d {color:#0071d1 !important;} 		/* 하늘_다크, sky */
.cb {color:#00479d !important;} 		/* 파랑, blue */
.cb_l {color:#034cd1 !important;} 		/* 파랑_라이트, blue */
.cb_d {color:#00216d !important;} 		/* 파랑_다크, blue */
.cn {color:#000e73 !important;} 		/* 남색, navy */
.cn_l {color:#000dbe !important;} 		/* 남색_라이트, navy */
.cn_d {color:#011852 !important;} 		/* 남색_다크, navy */
.cv {color:#4d50a2 !important;} 		/* 보라, violet */
.cv_l {color:#5b67df !important;} 		/* 보라_라이트, violet */
.cv_d {color:#1d2088 !important;} 		/* 보라_다크, violet */
.cc {color:#737d94 !important;} 		/* 탁색, charcoal */
.cc_l {color:#bec3cf !important;} 		/* 탁색_라이트, charcoal */
.cc_d {color:#5b5f69 !important;} 		/* 탁색_다크, charcoal */
.cd {color:#161821 !important;} 		/* 검정, dark */
.cd_l {color:#2c2e33 !important;} 		/* 검정_라이트, dark */
.cd_d {color:#111 !important;} 		/* 검정_다크, dark */
.cw {color:#fff !important;} 			/* 화이트 */
.cw_d {color:#fafafa !important;} 		/* 화이트_다크1 */
.cw_dd {color:#f5f5f5 !important;} 	/* 화이트_다크2 */
.cw_ddd {color:#eaecee !important;} 	/* 화이트_다크2 */
.cw_dddd {color:#eaecee !important;} 	/* 화이트_다크2 */

.clc {color: #f5fafd;}                  /*라이트컬러 (미색 연하늘)*/

/** 배경용 색상 */
.bgcm {background-color:#3698d7 !important; border: 1px solid #3698d7 !important;} 			/* 메인컬러 */
.bgcm_l {background-color:#53b1eb !important; border: 1px solid #53b1eb !important;} 			/* 메인컬러 */
.bgcm_d {background-color:#1076b6 !important; border: 1px solid #1076b6 !important;} 			/* 메인컬러 */
.bgcm:hover {background-color:#1076b6 !important; border: 1px solid #1076b6 !important;} 		/* 메인컬러 */

.bgcr {background-color:#d10d0d !important; border: 1px solid #d10d0d !important;}			/* 빨강 */
.bgcr_l {background-color:#ff3535 !important; border: 1px solid #ff3535 !important;}			/* 빨강_라이트 */
.bgcr_d {background-color:#9e0d0d !important; border: 1px solid #9e0d0d !important;}			/* 빨강_다크 */
.bgcr:hover {background-color:#9e0d0d !important; border: 1px solid #9e0d0d !important;}		/* 빨강_호버 */

.bgcy {background-color:#f3bb04 !important; border: 1px solid #f3bb04 !important;} 			/* 노랑 */
.bgcy_l {background-color:#fffc4e !important; border: 1px solid #fffc4e !important;} 			/* 노랑_라이트 */
.bgcy_d {background-color:#f19d00 !important; border: 1px solid #f19d00 !important;} 			/* 노랑_다크 */
.bgcy:hover {background-color:#f19d00 !important; border: 1px solid #f19d00 !important;} 		/* 노랑_호버 */

.bgco {background-color:#ff9100 !important; border: 1px solid #ff9100 !important;} 			/* 오렌지 */
.bgco_l {background-color:#ff9f50 !important; border: 1px solid #ff9f50 !important;} 			/* 오렌지_라이트 */
.bgco_d {background-color:#f06e04 !important; border: 1px solid #f06e04 !important;} 			/* 오렌지_다크 */
.bgco:hover {background-color:#f06e04 !important; border: 1px solid #f06e04 !important;} 		/* 오렌지_호버 */

.bgcg {background-color:#006b4d !important; border: 1px solid #006b4d !important;} 			/* 초록 */
.bgcg_l {background-color:#007d43 !important; border: 1px solid #007d43 !important;} 			/* 초록_라이트 */
.bgcg_d {background-color:#034f39 !important; border: 1px solid #034f39 !important;} 			/* 초록_다크 */
.bgcg:hover {background-color:#034f39 !important; border: 1px solid #034f39 !important;} 		/* 초록_호버 */

.bgce {background-color:#009797 !important; border: 1px solid #009797 !important;} 			/* 청녹 */
.bgce_l {background-color:#00beaf !important; border: 1px solid #00d6c4 !important;} 			/* 청녹_라이트 */
.bgce_d {background-color:#00666d !important; border: 1px solid #00666d !important;} 			/* 청녹_다크 */
.bgce:hover {background-color:#00666d !important; border: 1px solid #00666d !important;} 		/* 청녹_호버 */

.bgcs {background-color:#007ed7 !important; border: 1px solid #007ed7 !important;} 			/* 하늘 */
.bgcs_l {background-color:#0e9ff3 !important; border: 1px solid #0e9ff3 !important;} 			/* 하늘_라이트 */
.bgcs_d {background-color:#0067bf !important; border: 1px solid #0067bf !important;} 			/* 하늘_다크 */
.bgcs:hover {background-color:#0e9ff3 !important; border: 1px solid #0e9ff3 !important;} 		/* 하늘_호버 */

.bgcb {background-color:#00479d !important; border: 1px solid #00479d !important;} 			/* 파랑 */
.bgcb_l {background-color:#034cd1 !important; border: 1px solid #034cd1 !important;} 			/* 파랑_라이트 */
.bgcb_d {background-color:#00216d !important; border: 1px solid #00216d !important;} 			/* 파랑_다크 */
.bgcb:hover {background-color:#00216d !important; border: 1px solid #00216d !important;} 		/* 파랑_호버 */

.bgcn {background-color:#002983 !important; border: 1px solid #002983 !important;} 			/* 남색 */
.bgcn_l {background-color:#0116ab !important; border: 1px solid #0116ab !important;} 			/* 남색_라이트 */
.bgcn_d {background-color:#021f5f !important; border: 1px solid #021f5f !important;} 			/* 남색_다크 */
.bgcn:hover {background-color:#1d2088 !important; border: 1px solid #1d2088 !important;} 		/* 남색_호버 */
.bgcn_d:hover {background-color:#01069d !important; border: 1px solid #01069d !important;}

.bgcv {background-color:#4d50a2 !important; border: 1px solid #4d50a2 !important;} 			/* 보라 */
.bgcv_l {background-color:#5b67df !important; border: 1px solid #5b67df !important;} 			/* 보라_라이트 */
.bgcv_d {background-color:#1d2088 !important; border: 1px solid #1d2088 !important;} 			/* 보라_다크 */
.bgcv:hover {background-color:#1d2088 !important; border: 1px solid #1d2088 !important;} 		/* 보라_호버 */

.bgcc {background-color:#737d94 !important; border: 1px solid #737d94 !important;} 			/* 탁색 */
.bgcc_l {background-color:#bec3cf !important; border: 1px solid #bec3cf !important;} 			/* 탁색_라이트 */
.bgcc_d {background-color:#616879 !important; border: 1px solid #616879 !important;} 			/* 탁색_다크 */
.bgcc:hover {background-color:#616879 !important; border: 1px solid #616879 !important;}	 	/* 탁색_호버 */
.bgcc_l:hover {background-color:#ff3535 !important; border: 1px solid #ff3535 !important;}	

.bgcd {background-color:#161821 !important; border: 1px solid #161821 !important;} 			/* 검정 */
.bgcd_l {background-color:#2c2e33 !important; border: 1px solid #2c2e33 !important;} 			/* 검정_라이트 */
.bgcd_d {background-color:#111 !important; border: 1px solid #111 !important;} 				/* 검정_다크 */
.bgcd:hover {background-color:#111 !important; border: 1px solid #111 !important;} 			/* 검정_호버 */

.bgw {background-color:#fff;} 				/* 하얀배경 */
.bgcw {background-color:#fff !important; border: 1px solid #fff !important;} 			        /* 하얀배경 */
.bgcw_d {background-color:#fafafa !important; border: 1px solid #fafafa !important;} 	        /* 하얀배경_다크1 */
.bgcw_dd {background-color:#f5f5f5 !important; border: 1px solid #f5f5f5 !important;} 			/* 하얀배경_다크2 */
.bgcw_ddd {background-color:#eaecee !important; border: 1px solid #eaecee !important;} 			/* 하얀배경_다크3 */ 

.bglc {background-color: #f5fafd;} /*라이트컬러 (미색 연하늘)*/
.bgclc {background-color: #f5fafd;} /*라이트컬러 (미색 연하늘)*/



/* btn_hov3 전용 배경색 클래스 */
.btn3_cm, .btn3_cm:hover { background-color: #3698d7 !important; } /* 메인컬러 */
.btn3_cm_l, .btn3_cm_l:hover { background-color:#53b1eb !important; } /* 메인컬러 */
.btn3_cm_d, .btn3_cm_d:hover { background-color:#1076b6 !important; } /* 메인컬러 */
.btn3_cr, .btn3_cr:hover { background-color:#d10d0d !important; } /* 빨강, red*/
.btn3_cr_l, .btn3_cr_l:hover { background-color:#ff3535 !important; } /* 빨강, red*/
.btn3_cr_d, .btn3_cr_d:hover { background-color:#9e0d0d !important; } /* 빨강, red*/
.btn3_cy, .btn3_cy:hover { background-color:#f3bb04 !important; } /* 노랑, yello */
.btn3_cy_l, .btn3_cy_l:hover { background-color:#fffc4e !important; } /* 노랑, yello */
.btn3_cy_d, .btn3_cy_d:hover { background-color:#f19d00 !important; } /* 노랑, yello */
.btn3_co, .btn3_co:hover { background-color:#ff9100 !important; } /* 오렌지, orange */
.btn3_co_l, .btn3_co_l:hover { background-color:#ff9f50 !important; } /* 오렌지, orange */
.btn3_co_d, .btn3_co_d:hover { background-color:#f06e04 !important; } /* 오렌지, orange */
.btn3_cg, .btn3_cg:hover { background-color:#006b4d !important; } /* 초록, green */
.btn3_cg_l, .btn3_cg_l:hover { background-color:#007d43 !important; } /* 초록, green */
.btn3_cg_d, .btn3_cg_d:hover { background-color:#034f39 !important; } /* 초록, green */
.btn3_ce, .btn3_ce:hover { background-color:#009e96 !important; } /* 청녹, emerald */
.btn3_ce_l, .btn3_ce_l:hover { background-color:#00d6c4 !important; } /* 청녹, emerald */
.btn3_ce_d, .btn3_ce_d:hover { background-color:#00666d !important; } /* 청녹, emerald */
.btn3_cs, .btn3_cs:hover { background-color:#009cf7 !important; } /* 하늘, sky */
.btn3_cs_l, .btn3_cs_l:hover { background-color:#3fb8ff !important; } /* 하늘, sky */
.btn3_cs_d, .btn3_cs_d:hover { background-color: #0088d7 !important; } /* 하늘, sky */
.btn3_cb, .btn3_cb:hover { background-color:#00479d !important; } /* 파랑, blue */
.btn3_cb_l, .btn3_cb_l:hover { background-color:#034cd1 !important; } /* 파랑, blue */
.btn3_cb_d, .btn3_cb_d:hover { background-color:#00216d !important; } /* 파랑, blue */
.btn3_cn, .btn3_cn:hover { background-color:#000e73 !important; } /* 남색, navy */
.btn3_cn_l, .btn3_cn_l:hover { background-color:#01069d !important; } /* 남색, navy */
.btn3_cn_d, .btn3_cn_d:hover { background-color:#011852 !important; } /* 남색, navy */
.btn3_cv, .btn3_cv:hover { background-color:#4d50a2 !important; } /* 보라, navy */
.btn3_cv_l, .btn3_cv_l:hover { background-color:#5b67df !important; } /* 보라, navy */
.btn3_cv_d, .btn3_cv_d:hover { background-color:#1d2088 !important; } /* 보라, navy */
.btn3_cc, .btn3_cc:hover { background-color:#737d94 !important; } /* 탁색, charcoal */
.btn3_cc_l, .btn3_cc_l:hover { background-color: #bec3cf !important; } /* 탁색, charcoal */
.btn3_cc_d, .btn3_cc_d:hover { background-color:#616879 !important; } /* 탁색, charcoal */
.btn3_cd, .btn3_cd:hover { background-color:#161821 !important; } /* 검정, dark */
.btn3_cd_l, .btn3_cd_l:hover { background-color:#2c2e33 !important;} /* 검정, dark */
.btn3_cd_d, .btn3_cd_d:hover { background-color:#111 !important; } /* 검정, dark */
.btn3_cw, .btn3_cw:hover { background-color:#fff !important; } /* 화이트 */
.btn3_cw_d, .btn3_cw_d:hover { background-color:#fafafa !important; } /* 화이트 */
.btn3_cw_dd, .btn3_cw_dd:hover { background-color:#f5f5f5 !important; } /* 화이트 */



.justify {text-align:justify;}

/* font */
.italic {font-style:italic;}
.h2_title {font-weight:400; margin-bottom:30px; padding-bottom:25px; font-size:30px; line-height:32px; color:#0a72ca;}
.h2_title span {display:inline-block; vertical-align:middle; position:relative;}
.h2_title span:before {content:""; position:absolute; left:0; bottom:-20px; width:30px; height:2px; background-color:#0a72ca;}
.h3_title {font-weight:400; margin-bottom:20px; font-size:26px; line-height:30px; color:#222;}
.h4_title {font-weight:400; position:relative; width:auto; margin-bottom:15px; padding-left:10px; font-size:20px; line-height:20px; color:#00569f;}
.h4_title:before {content:""; position:absolute; left:0px; top:50%; width:4px; height:4px; margin-top:-2px; background-color:#00569f;}
.txt_big {font-size:20px; line-height:20px;}
.txt_middle {font-size:15px; line-height:24px;}
.txt_middle2 {font-size:16px;}
.txt_small {font-size:13px; line-height:20px;}

.bold {font-weight: 700 !important;}
/* paging */
.paging {display:inline-block; vertical-align:middle; width:100%; margin-top:30px; text-align:center;}
.paging a {display:inline-block; vertical-align:middle; width:38px; height:38px; margin-right:5px; border:1px solid #ddd; line-height:38px; color:#666; font-weight:400; transition:0.2s;}
.paging a:hover, .paging a.on {background-color:#414141; color:#fff;}
.paging a.p_prev, .paging a.p_next {position:relative;}
.paging a.p_prev:before {content:''; position:absolute; right:15px; top:16px; width:5px; height:5px; border-bottom:solid 1px currentcolor; border-left:solid 1px currentcolor; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.paging a.p_next:before {content:''; position:absolute; left:15px; top:16px; width:5px; height:5px; border-top:solid 1px currentcolor; border-right:solid 1px currentcolor; -webkit-transform:rotate(45deg); transform:rotate(45deg);}

/* paging */
.paging.type01 {display:inline-block; vertical-align:middle; width:100%; margin-top:30px; text-align:center;}
.paging.type01 .p_area {display:inline-block; vertical-align:middle; border-left:1px solid #ddd; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.paging.type01 a {display:inline-block; vertical-align:middle; float:left; width:38px; height:38px; margin:0; border-left:0px; border-top:0px; border-bottom:0px; border-right:1px solid #ddd; line-height:38px; color:#666; font-weight:400; transition:0.2s;}
.paging.type01 a:hover, .paging.type01 a.on {background-color:#414141; color:#fff;}
.paging.type01 a.p_prev, .paging a.p_next {position:relative;}
.paging.type01 a.p_prev:before {content:''; position:absolute; right:15px; top:16px; width:5px; height:5px; border-bottom:solid 1px currentcolor; border-left:solid 1px currentcolor; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.paging.type01 a.p_next:before {content:''; position:absolute; left:15px; top:16px; width:5px; height:5px; border-top:solid 1px currentcolor; border-right:solid 1px currentcolor; -webkit-transform:rotate(45deg); transform:rotate(45deg);}

/* 20170623추가 */
table tbody td.link {max-width:300px; padding:12px 10px; text-align:left !important;}
table tbody td.link a {display:inline-block; float:left; width:auto; max-width:90%; text-overflow:ellipsis;overflow: hidden; white-space:nowrap; word-break:break-all;}/* 20170711수정 */
table tbody td .ba_comment {display:inline-block; float:left; width:20px; margin-left:5px; padding:0 3px; border-radius:30px; background-color:#111; text-align:center; color:#fff; line-height:20px;}/* 20170711수정 */
table tbody td .i_notice {display:inline-block; width:14px; height:19px; background-image:url("./../images/i_notice.png"); background-repeat:no-repeat; background-size:14px auto; background-position:center center;}
table tbody td .i_rock {display:inline-block; width:14px; height:19px; background-image:url("./../images/i_rock.png"); background-repeat:no-repeat; background-size:14px auto; background-position:center center;}
table tbody td .ba_icon {display:inline-block; vertical-align:middle; position:relative; width:16px; height:16px; margin-right:3px;}
table tbody td .ba_icon:before {position:absolute; left:0; top:0; width:16px; height:16px; border-radius:3px; text-align:center; font-size:12px; line-height:15px; color:#fff;}
table tbody td .ba_icon.i_question:before {content:'Q'; background-color:#5e738b;}
table tbody td .ba_icon.i_answer:before {content:'A'; background-color:#f4940b;}
/* 20170627추가 */
table tbody td .i_reply {display:inline-block; vertical-align:middle; position:relative; width:20px; height:20px;}
table tbody td .i_reply:before {content:""; position:absolute; left:0px; top:0; width:10px; height:10px; border-bottom:1px solid #0a72ca; border-left:1px solid #0a72ca;}
table tbody td .i_reply:after {content:""; position:absolute; left:8px; top:5px; border-top:5px solid transparent; border-left:6px solid #0a72ca; border-bottom:5px solid transparent;}


/* list */
.list
{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
.list > li
{
    display: block;
    vertical-align: middle;
    position: relative;
    width: auto;
    margin-bottom: 10px;
    padding-left: 15px;
    font-size: 14px;
    line-height: 20px;
}
.list > li::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 1px;
    background-color: currentcolor;
}
.list > li:last-child { margin-bottom: 0; }
.list.circle > li::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    background-color: currentcolor;
    border-radius: 10px;
}
.list.square > li::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    background-color: currentcolor;
}

/* .btn_choice {display: flex; justify-content: center; gap: 25px; border: 1px dashed #e7e9eb; border-radius: 10px; padding: 20px 10px; box-sizing: border-box;}
.btn_choice a.btn {background-color: #eaecee !important; color: #5b5f69 !important; border-radius: 5px; border: none;}
.btn_choice a.on , a.btn:hover{background-color: #2c2e33 !important;color: #fff !important;} */

/* form */
.f_wrap {display:inline-block; position:relative; width:100%; border-top:2px solid #0a72ca;}
.f_wrap::before {content:""; position:absolute; left:0; top:0; bottom:0; width:199px; background-color:#f5f5f5; border-right:1px solid #ddd;}
.f_wrap::after {content:""; position:absolute; left:50%; top:0; bottom:0; z-index:-1; width:199px; background-color:#f5f5f5; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.f_wrap .f_area {display:inline-block; vertical-align:middle; position:relative; width:100%; border-bottom:1px solid #ddd;}
.f_wrap .f_area .f_label {display:inline-block; position:absolute; left:0; top:0; bottom:0; width:200px;}
.f_wrap .f_area .f_label .fl_txt {display:block; padding:0 15px; font-size:14px; font-weight:400; line-height:60px; text-align:right;}
.f_wrap .f_area .f_input {display:block; vertical-align:middle; width:auto; margin-left:210px; margin-right:10px; padding-top:10px; padding-bottom:10px; min-height:50px; background-color:#fff; box-sizing:border-box;}
.f_wrap .f_area .f_input .fi_txt {line-height:40px !important;}


input[type=text], input[type=password], input[type=date], input[type=email], input[type=file], input[type=tel] {display:inline-block; vertical-align:middle; height:40px; padding:0px; border:1px solid #ddd; border-radius:0px; color:#414141; line-height:40px; text-indent:10px; box-sizing:border-box; -webkit-appearance: none; font-size: 16px;}
input.warning {border-color:#c29d0b; color:#c29d0b; outline:0;}
input.error {border-color:#e50011; color:#e50011; outline:0;}
input.success {border-color:#27a4b0; color:#27a4b0; outline:0;}
select {display:inline-block; vertical-align:middle; height:40px; padding:0px; border:1px solid #ddd; color:#414141; text-indent:10px; /* -webkit-appearance: none; */}
#schCategory {text-indent: 10px;}
textarea {display:inline-block; vertical-align:middle; width:100%; padding:10px; border:1px solid #ddd; border-radius:0px; color:#414141; line-height:18px; box-sizing:border-box; -webkit-appearance: none;}
input:input-placeholder {color:#ddd;}
input:-ms-input-placeholder {color:#ddd;}
input::-webkit-input-placeholder {color:#ddd;}
input::-moz-placeholder {color:#ddd;}
input::-moz-placeholder {color:#ddd;}

.i_btn {display:inline-block; vertical-align:middle; width:40px; height:40px; border:1px solid #ddd; background-repeat:no-repeat; background-position:center center; background-size:40px auto; transition:0.2s;}
.i_calender {background-image:url("./../images/i_calendar.png"); border-left:0px; float:left;}
.i_calender:hover {background-color:#eee;}

/* search */
.search_area {background-color:#ddd; display:inline-block; vertical-align:middle; width:100%; padding:20px; box-sizing:border-box;}
.search_area * {box-sizing:border-box;}
.search_area .btn {min-width:auto;}
.search_area .btn.small {margin-bottom:4px;}

/* box */
.scroll_y {display:inline-block; vertical-align:middle; overflow-x:hidden; overflow-y:scroll;}
.box {display:inline-block; width:100%; padding:20px; border:1px solid #eee; background-color:#fafafa; box-sizing:border-box;}
.box_round {display:inline-block; width:100%; border:1px solid #eee; background-color:#fafafa; box-sizing:border-box; border-radius: 12px;}
.box.t1 {border-color:#0a72ca; background-color:#f7fbff;} /* 파란색 */
.box.t2 {border-color:#ffa800; background-color:#fffbf4;} /* 주황색 */

/* board */
.b_wrap {display:inline-block; width:100%; border-top:2px solid #0a72ca;}
.b_wrap .b_title {display:inline-block; vertical-align:middle; width:100%;}
.b_wrap .b_title > span {display:inline-block; vertical-align:middle; float:left; height:50px; background-color:#f5f5f5; border-bottom:1px solid #ddd; line-height:50px; text-align:center; font-weight:400;}
.b_wrap .b_area > span {display:inline-block; vertical-align:middle; float:left; height:50px; line-height:50px; text-align:center; border-bottom:1px solid #ddd;}
.b_wrap .b_area > span.link {text-align:left;}
.b_wrap .b_area > span.link a {display:inline-block; float:left; max-width:95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
.b_wrap .b_area > span.link .ba_comment {display:inline-block; float:left; width:20px; margin-left:5px; margin-top:16px; padding:0 3px; border-radius:30px; background-color:#111; text-align:center; color:#fff; line-height:20px;}
.b_wrap .b_area > span .i_notice {display:inline-block; width:14px; height:50px; background-image:url("./../images/i_notice.png"); background-repeat:no-repeat; background-size:14px auto; background-position:center center;}
.b_wrap .b_area > span .ba_icon {display:inline-block; vertical-align:middle; position:relative; width:16px; height:16px; margin-right:3px;}
.b_wrap .b_area > span .ba_icon:before {position:absolute; left:0; top:0; width:16px; height:16px; border-radius:3px; text-align:center; font-size:12px; line-height:15px; color:#fff;}
.b_wrap .b_area > span .ba_icon.i_question:before {content:'Q'; background-color:#5e738b;}
.b_wrap .b_area > span .ba_icon.i_answer:before {content:'A'; background-color:#f4940b;}


/* view */
.v_wrap {display:inline-block; width:100%; border-top:2px solid #1d2089;}
.v_wrap .v_title {display:block; width:auto; padding:20px; border-bottom:1px solid #ddd;}
.v_wrap .v_title .vt_title {position:relative; margin-bottom:5px; padding-left:10px; font-size:18px; line-height:28px; color:#ffa800;}
.v_wrap .v_title .vt_title:before {content:""; position:absolute; left:0; top:9px; width:2px; height:10px; background-color:#ffa800;}
.v_wrap .v_title ul {display:inline-block; vertical-align:middle; width:100%;}
.v_wrap .v_title ul li {display:inline-block; vertical-align:middle; position:relative; float:left; margin-right:40px; font-size:14px; line-height:20px;}
.v_wrap .v_title ul li:last-child {margin-right:0px;}
.v_wrap .v_title ul li:before {content:""; position:absolute; right:-20px; top:50%; width:1px; height:10px; margin-top:-5px; background-color:#cde3f6;}
.v_wrap .v_title ul li:last-child:before {display:none;}
.v_wrap .v_title ul li p {display:inline-block; margin-right:10px; font-weight:400;}
.v_wrap .v_title ul li span {color:#565656;}
.v_wrap .v_txt {display:block; width:auto; margin-bottom:30px; padding:20px; border-bottom:1px solid #ddd;font-size:14px; line-height:22px; word-break:break-all;}
.v_wrap .v_txt b, .v_wrap .v_txt strong {font-weight:600 !important;}
.v_wrap .v_txt u {text-decoration:underline !important;}
.v_wrap .v_txt i {font-style:italic !important;}
.v_wrap .v_txt i.im {font-style:inherit !important;}
.v_wrap .v_txt img {max-width:100%;}
.v_wrap .v_txt p {margin:1em 0;}
.v_wrap .v_txt .vt_download {display:block; vertical-align:middle; position:relative; width:auto; margin-top:10px; padding:10px 25px; border:1px solid #5e738b; opacity:0.5; transition:0.2s;}
.v_wrap .v_txt .vt_download:hover {opacity:1;}
.v_wrap .v_txt .vt_download:before {content:""; position:absolute; left:10px; top:50%; width:12px; height:12px; margin-top:-6px; background-image:url("./../images/i_file.png"); background-repeat:no-repeat; background-position:center center; background-size:12px auto;}
.v_wrap .v_txt .vt_download:after {content:""; position:absolute; right:10px; top:50%; width:16px; height:16px; margin-top:-8px; background-image:url("./../images/i_download.png"); background-repeat:no-repeat; background-position:center center; background-size:16px auto;}
.v_wrap .v_txt .vt_download p {width:98%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
.v_wrap .v_txt .vt_download a {display:inline-block; position:absolute; left:0; right:0; top:0; bottom:0;}
.v_wrap .v_list {display:block; margin-bottom:30px; border-top:1px solid #ddd;}
.v_wrap .v_list .vl_box {display:block; vertical-align:middle; position:relative; width:auto; padding:20px 20px 20px 55px; border-bottom:1px solid #ddd; font-size:16px; line-height:20px; transition:0.2s;}
.v_wrap .v_list .vl_box i {display:inline-block; position:absolute; left:15px; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:30px; background-color:#5e738b;}
.v_wrap .v_list .vl_box.vl_next i:after {content: ''; position: absolute; left:10px; bottom:8px; width: 9px; height: 9px; border-bottom: solid 1px #fff; border-left: solid 1px #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.v_wrap .v_list .vl_box.vl_prev i:after {content: ''; position: absolute; left:10px; top:8px; width: 9px; height: 9px; border-top: solid 1px #fff; border-right: solid 1px #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.v_wrap .v_list .vl_box:hover {background-color:#fafafa;}
.v_wrap .v_list .vl_box span {position:absolute; left:56px; top:50%; margin-top:-10px; color:#5e738b;}
.v_wrap .v_list .vl_box a, .v_wrap .v_list .vl_box > p {display:inline-block; padding-left:60px; color:#111;}
.v_wrap .v_list .vl_box a:hover, .v_wrap .v_list .vl_box > p:hover {text-decoration:underline;}
.v_wrap .v_comment {display:block; width:auto; padding:20px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background-color:#fafafa;}
.v_wrap .v_comment .vc_list {display:inline-block; position:relative; width:100%;}
.v_wrap .v_comment .vc_list li {display:block; position:relative; padding:20px 10px; border-top:1px solid #ddd;}
.v_wrap .v_comment .vc_list .vcl_id {font-size:13px; color:#111; line-height:20px;}
.v_wrap .v_comment .vc_list .vcl_date {font-size:12px; color:#bbb; line-height:16px;}
.v_wrap .v_comment .vc_list .vcl_edit {display:inline-block; vertical-align:middle; position:absolute; right:10px; top:25px;}
.v_wrap .v_comment .vc_list .vcl_txt {margin-top:10px; font-size:14px; line-height:22px;}
.v_wrap .v_comment .vc_list .vc_list {margin-top:20px; padding-left:30px; box-sizing:border-box;}
.v_wrap .v_comment .vc_list .vc_list li {position:relative; border-top:0px; border-bottom:1px solid #eee; padding:10px 0;}
.v_wrap .v_comment .vc_list .vc_list li:last-child {border-bottom:0px;}
.v_wrap .v_comment .vc_list .vc_list li:before {content:""; position:absolute; left:-30px; top:9px; width:10px; height:10px; border-bottom:1px solid #999; border-left:1px solid #999;}
.v_wrap .v_comment .vc_list .vc_list li:after {content:""; position:absolute; left:-20px; top:14px; border-top:5px solid transparent; border-left:6px solid #999; border-bottom:5px solid transparent;}
.v_wrap .v_comment .vc_list .vc_list li .vcl_edit {right:0px; top:16px;}
.v_wrap .v_comment .vc_list .vc_list li textarea {margin-top:10px;}
/* 20170713추가 */
.v_wrap .v_comment .vc_list li:first-child {border-top:2px solid #ddd;}
.v_wrap .v_comment .vc_list li.reply {position:relative; border-top:0px; border-bottom:1px solid #eee; padding:10px 0 10px 45px;}
.v_wrap .v_comment .vc_list li.reply:before {content:""; position:absolute; left:10px; top:9px; width:10px; height:10px; border-bottom:1px solid #999; border-left:1px solid #999;}
.v_wrap .v_comment .vc_list li.reply:after {content:""; position:absolute; left:17px; top:14px; border-top:5px solid transparent; border-left:6px solid #999; border-bottom:5px solid transparent;}
.v_wrap .v_comment .vc_list li.reply .vcl_edit {right:0px; top:16px;}
.v_wrap .v_comment .vc_list li.reply textarea {margin-top:10px;}
/* 20171226추가 */
.v_wrap .v_txt .vt_list {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; border-top:1px solid #eee;}
.v_wrap .v_txt .vt_list li {display:block; position:relative; width:100%; padding:10px 0; border-bottom:1px solid #eee;}
.v_wrap .v_txt .vt_list li .vtl_img {display:inline-block; position:absolute; left:10px; top:5px; width:30px;}
.v_wrap .v_txt .vt_list li .vtl_txt {padding:0 50px;}
.v_wrap .v_txt .vt_list li .vtl_txt a {display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
.v_wrap .v_txt .vt_list li .vtl_view {display:inline-block; position:absolute; right:10px; top:10px; line-height:20px;}
/* 20180131추가 */
.v_wrap .v_txt .vt_list li .vtl_txt b {font-weight:500;}

/* 타이틀 디자인 모음 */
h3.title
{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
h3.title::before
{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 4px;
    background-color: #e3e6e8;
}
h3.title::after
{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10px;
    height: 4px;
    background-color: #2f59ce;
}
.title
{
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: 20px;
    line-height: 40px;
    word-wrap: normal;
    word-break: keep-all;
}
.title.light, .title .light { font-weight: 300; }
.title.bold, .title .bold { font-weight: 500; }
.title.t1 { font-size: 25px; line-height: 30px; }
.title.t2 { font-size: 40px; line-height: 50px; }
.title span
{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
.h3_bg
{
    width: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 20px 20px 20px 30px;
    font-size: 22px;
    line-height: 24px;
    color: #222;
    margin-bottom: 20px;
    font-weight: 800;
    background-color: #eef4fb;
}
.h4_bg
{
    width: 100%;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px 20px 20px 30px;
    font-size: 20px;
    line-height: 24px;
    color: #111c4e;
    margin-bottom: 20px;
    font-weight: 800;
    background-color: #fff;
    box-shadow: 3px 3px 17px 0px rgba(0, 0, 0, 0.05);
}
.h4_line
{
    width: 100%;
    color: #111c4e;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-weight: 800;
    border-bottom: 1px dashed #dbdee5;
    font-size: 20px;
}
h5 {
    line-height: 26px;
    display: inline-block;
    font-size: 17px;
    color: #222;
    display: block;
    margin-bottom: 10px;
    font-weight: 800;
}




/* Search */
/* .search {display:inline-block; width:100%; padding:15px 20px; border:1px solid #2f59ce; background-color:#f4f5f9; box-sizing:border-box;} */
.search {display:inline-block; width:100%; padding:15px 0px; box-sizing:border-box;  display: flex; justify-content: end;}
.search > div {display:inline-block; vertical-align:middle; float:left; min-height:80px; padding:5px 0;}
.search .s_txt {margin-bottom:10px; font-size:14px; line-height:20px; font-weight:500; color:#222;}
.search .s_contents {display:inline-block; vertical-align:middle; width:100%; height:40px;}
.search .s_contents label {line-height:40px;}
.search .area {min-height:inherit;}


/* 폼뷰통합 */
.step {display:inline-block; vertical-align:middle; width:100%; border-top:1px solid #ddd; border-left:1px solid #ddd; box-sizing:border-box;}
.step li {display:inline-block; vertical-align:middle; float:left;}
.step li .s_area {display:block; width:auto; height:200px; padding:20px; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.step li .s_area .s_title {height:36px; margin-bottom:30px; font-size:20px; line-height:20px; color:#0a72ca; font-weight:500;}
.step li .s_area .s_txt {font-size:14px; line-height:20px;}
.step.type03 {border:0;}
.step.type03 li {box-sizing:border-box; padding:2px;}
.step.type03 li .s_area {height:230px; padding:0; border:1px solid #0a72ca;}
.step.type03 li .s_area .s_title {margin-bottom:0; padding:10px 0; background-color:#0a72ca; color:#fff; text-align:center;}
.step.type03 li .s_area .s_txt {box-sizing:border-box; padding:10px;}

.steps {display:inline-block; vertical-align:middle; width:100%;}
.steps li {display:inline-block; vertical-align:middle; float:left;}
.steps li > div {width:auto; margin:5px; padding:10px; background-color:#fafafa; border:1px solid #ddd; text-align:center;}
.steps li .txt_big {font-size:40px; line-height:44px; margin-bottom:10px; font-weight:500; color:#2f59ce;}
.steps li .txt_small {color:#2f59ce;}

/* 파일첨부 */
.file_input {display:inline-block; vertical-align:middle; position:relative; width:100%; margin:2px 0;}
.file_input label {position:absolute;right:0; top:0px; cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden; width:100px; height:40px; background:#5e738b; color:#fff; text-align:center; line-height:40px;}
.file_input label input {position:absolute; width:0; height:0; overflow:hidden; border:0;}
.file_input input[type=text] {display:block; width:100%; height:40px; line-height:40px; font-size:12px; padding:0; border:0; border:1px solid #ddd;}

/* boardContent css reset */
.boardContent {display:inline-block; vertical-align:middle; width:100%; padding-bottom:30px; margin-bottom:30px; border-bottom:1px dashed #ddd;}
.boardContent table {width:inherit; border-top:inherit; background-color:inherit;}
.boardContent table thead th, .boardContent table tbody th, .boardContent table tbody td {padding:inherit; margin:inherit; border:inherit; line-height:inherit; text-align:inherit !important;}


/* 20180822 추가 */
i.im, h1, h2, h3, h4, h5, h6 {font-style:normal;}
.css_init {}
.css_init b, .css_init strong {font-weight:bold !important;}
.css_init i, .css_init cite, .css_init em, .css_init var, .css_init address, .css_init dfn {font-style:italic  !important;}
.css_init u, .css_init ins {text-decoration:underline  !important;}

.hide{display:none;}
/*20190917 박동식 추가*/
.mW100 {width:100%;}
.[class*="boardContent"] *
{
 all:unset !important;
}

/*20200218 추가 마이페이지 결제내역 카드전표 버튼*/
#listTbody .btn.small {padding:0 5px;}


/* 스폰서 배너 슬라이더 */
#footer .fsb_title {display:inline-block; vertical-align:middle; float:left; width:150px; font-size:16px; font-weight:700; color:#006c3e; line-height:100px; text-align:left;}
#footer .fsb_slide {display:inline-block; vertical-align:middle; float:left; position:relative; width:900px;}
#footer .fsb_slide img {display:inline-block; vertical-align:middle; width:140px; height:auto; margin:20px 0; border-radius:5px; box-shadow:0 2px 4px rgba(0, 0, 0, 0.06);}
#footer .fsb_slide .owl-nav {display:inline-block; vertical-align:middle; position:absolute; right:-150px; top:30px; width:130px;}
#footer .fsb_slide .owl-nav div {display:inline-block; vertical-align:middle; position:absolute; top:0; z-index:2; width:38px; height:38px; border:#dedee3 solid 1px; background-color:#fff; font-size:0; line-height:0; text-indent:-9999px; transition:0.2s; -webkit-transition:0.2s;}
#footer .fsb_slide .owl-nav div:hover {border-color:#878790;}
#footer .fsb_slide .owl-nav div:before {content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin-top:-5px; color:#878790; border-top:solid 2px currentColor; border-right:solid 2px currentColor; transition:0.2s; -webkit-transition:0.2s;}
#footer .fsb_slide .owl-nav div:hover:before {color:#202024;}
#footer .fsb_slide .owl-nav .owl-prev {left:0;}
#footer .fsb_slide .owl-nav .owl-prev:before {margin-left:-4px; transform:rotate(-135deg); -ms-transform:rotate(-135deg);}
#footer .fsb_slide .owl-nav .owl-next {right:0;}
#footer .fsb_slide .owl-nav .owl-next:before {margin-left:-7px; transform:rotate(45deg); -ms-transform:rotate(45deg);}
#footer .fsb_slide .owl-dots {display:none;}
#footer .fsb_control {display:inline-block; vertical-align:middle; position:absolute; right:45px; top:30px; z-index:1;}
#footer .fsb_control .fsb_btn {display:inline-block; vertical-align:middle; position:relative; width:40px; height:40px; border:#dedee3 solid 1px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;}
#footer .fsb_control .fsb_btn:hover {border-color:#878790;}
#footer .fsb_control .fsb_btn:before {content:""; position:absolute; left:50%; top:50%; transition:0.2s; -webkit-transition:0.2s;}
#footer .fsb_control .fsb_btn.play:before {margin-left:-4px; margin-top:-5px; border-top:transparent solid 5px; border-left:#878790 solid 9px; border-bottom:transparent solid 5px;}
#footer .fsb_control .fsb_btn.play:hover:before {border-left-color:#202024;}
#footer .fsb_control .fsb_btn.stop:before {width:2px; height:10px; margin-top:-5px; margin-left:-4px; border-left:#878790 solid 3px; border-right:#878790 solid 3px;}
#footer .fsb_control .fsb_btn.stop:hover:before {border-color:#202024;}
#footer .fsb_control .fsb_btn.on {display:inline-block;}
#footer .fsb_control .fsb_btn.off {display:none;}

/* 학술행사 모바일형 컨텐츠 (pc에서는 숨김) */
.mobile_card { display: none }


/* 팝업창에서 팝업 하단 버튼에 margin-bottom 적용하기 위함 */
p[name*="Pop"] { margin-bottom: 10px; }

/** DEMO header에서 이동. 전체 적용 위함. - 240903 정규호 */

/*- p컨텐츠 제어 */
/* #contents .contents .cs_body p {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7em;
    color:#333 ;
    word-break: keep-all;
} */

/*? 1. common subpage - 서브페이지 표준 CSS 이동 */

/* ! 1) 인사말 */

/* 작은 사진형 */

/* 작은 사진형 전체 */
.small_greeting_wrap { width: 100%; }

/* 작은 사진형 타이틀 (텍스트 및 이미지) */
.small_greeting_wrap .small_greeting_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 55px;
}
.small_greeting_wrap .small_greeting_title img {
    /* 가급적 이미지도 해당 사이즈로 맞춰주세요 */
    width: 204px;
    height: 250px;
}
.small_greeting_wrap .small_greeting_title .small_greeting_title_txt { width: calc(100% - 204px); padding-left: 40px; }
.small_greeting_wrap .small_greeting_title .small_greeting_title_txt h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
}
.small_greeting_wrap .small_greeting_title .small_greeting_title_txt p { font-size: 18px; }

/* 작은 사진형 컨텐츠 */
.small_greeting_wrap .small_greeting_content { width: 100%; }
.small_greeting_wrap .small_greeting_content p {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 50px;
}
.small_greeting_wrap .small_greeting_content .final {
    text-align: right;
    font-size: 19px;
    margin-bottom: 70px;
}
.small_greeting_wrap .small_greeting_content .final span { font-weight: bold; }

/* 큰 사진형 */

/* 큰 사진형 전체 */
.big_greeting_wrap { width: 100%; margin-bottom: 100px }
.big_greeting_wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, #cce8ee, #1791dd);
    border-bottom-left-radius: 5px;
}

/* 큰 사진형 타이틀 (텍스트 및 이미지) */

/* 텍스트 */
.big_greeting_wrap .big_greeting_title {
    display: flex;
    position: relative;
    align-items: flex-end;
    margin-top: 35px;
}
.big_greeting_wrap .big_greeting_title .big_greeting_title_txt { width: 75%; }
.big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div {
    background: linear-gradient(90deg, #e7f1f3, #fff);
    margin-top: 40px;
    padding-top: 110px;
    padding-left: 70px;
    height: 310px;
    border-radius: 10px;
}
.big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div h3 {
    font-size: 29px;
    margin-bottom: 40px;
    font-weight: 900;
}
.big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div p { font-size: 22px; margin-bottom: 27px; }

/* 이미지 */
.big_greeting_wrap .big_greeting_title .big_greeting_title_img { width: 38%; }

/* 작은 사진형 컨텐츠 */
.big_greeting_wrap .big_greeting_content { width: 100%; margin-top: 60px; }
.big_greeting_wrap .big_greeting_content p {
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    color: #333;
    margin-bottom: 30px;
}
.big_greeting_wrap .big_greeting_content .final { text-align: right; font-size: 19px; }
.big_greeting_wrap .big_greeting_content .final span { font-weight: bold; }


/* ! 2) 연혁 */

/* 작은 레이아웃 */
.small_history_wrap { width: 100%; }
.small_history_wrap .small_each_history { display: flex; margin-bottom: 50px; }
.small_history_wrap .small_each_history strong {
    margin-top: 12px;
    margin-right: 2.5%;
    width: 15%;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 27px;
    color: #333;
    line-height: 1.7em;
}
.small_history_wrap .small_each_history ol {
    position: relative;
    width: 85%;
    padding-left: 5%;
    margin-top: 25px;
}
.small_history_wrap .small_each_history ol::before {
    content: '';
    position: absolute;
    display: block;
    width: 3px;
    left: 0;
    height: 100%;
    background-color: #999;
}
.small_history_wrap .small_each_history ol li { position: relative; }
.small_history_wrap .small_each_history ol li + li { margin-top: 2%; }
.small_history_wrap .small_each_history ol li:first-child::before, .small_history_wrap .small_each_history ol li:last-child::before {
    content: '';
    position: absolute;
    left: -7%;
    display: block;
    width: 13px;
    height: 13px;
    background-color: #3698d7;
    border-radius: 30px;
}
.small_history_wrap .small_each_history ol li:first-child::before { top: 0; }
.small_history_wrap .small_each_history ol li:last-child::before { bottom: 0; }
.small_history_wrap .small_each_history ol li p {
    width: 11%;
    letter-spacing: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4em;
    float: left;
}
.small_history_wrap .small_each_history ol li em {
    margin-left: 5%;
    float: left;
    width: 84%;
    font-size: 16px;
    line-height: 1.7em;
}
.small_history_wrap .small_each_history ol li::after {
    content: '';
    display: block;
    clear: both;
}

/* 큰 레이아웃 */
.big_each_history { width: 100%; }
.big_each_history .each_date {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    margin-top: 40px;
    margin-bottom: 10px;
}
.big_each_history .each_date h2 {
    position: relative;
    background-image: url(../images/history_icon01.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 48px 48px;
    display: inline-block;
    /* vertical-align: top; */
    vertical-align: middle;
    width: 165px;
    padding: 12px 20px 12px 30px;
    font-size: 25px;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
    color: #222;
}
.big_each_history .each_date ul {
    width: 730px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-left: 50px;
}
.big_each_history .each_date ul li {
    position: relative;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
}
.big_each_history .each_date ul li .big_date_title {
    background-color: #3698d7;
    width: 125px;
    height: 40px;
    line-height: 40px;
    border-radius: 30px;
    font-size: 18px;
    text-align: center;
    word-break: keep-all;
    font-weight: 500;
    color: #000;
}
.big_each_history .each_date ul li .big_date_title p {
    display: inline-block;
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
    color: #fff;
}
.big_each_history .each_date ul li .big_date_content {
    width: calc(100% - 120px);
    padding-top: 20px;
    line-height: 1.6;
    position: relative;
    top: -55px;
    left: 137px;
    padding-left: 90px;
    display: flex;
    flex-direction: column;
}
.big_each_history .each_date ul li .big_date_content p {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
    word-break: keep-all;
    display: flex;
}
.big_each_history .each_date ul li .big_date_content span {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    color: #666;
    word-break: keep-all;
    font-weight: 400;
}


/* ! 3) 관련사이트 */

/* 1. 탭형 */
.tab_relative_site {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
}
.tab_relative_site li {
    width: 32%;
    height: 170px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.tab_relative_site li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px; 
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 25px 0;
}
.tab_relative_site li a img {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.15s linear;
}
.tab_relative_site li a span {
    display: block;
    font-size: 15.5px;
    color: #222;
    transition: all 0.15s linear;
}
.tab_relative_site li:hover a span,
.tab_relative_site li:hover a img { transform: scale(1.05); }

/* 2. 오픈형 */
.open_relative_site {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.open_relative_site .open_relative_site_box {
    width: 30%;
    height: 220px;
    background-color: #f4f4f4;
    padding: 15px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.open_relative_site .open_relative_site_box .figure,
.open_relative_site .open_relative_site_box .figcaption { width: 100%; text-align: center; }
.open_relative_site .open_relative_site_box .figcaption h6 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #222;
    margin-bottom: 20px;
}
.open_relative_site .open_relative_site_box .figcaption a {
    display: inline-block;
    width: 100%;
    height: 40px;
    background-color: #26304c;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 13px 10px;
    border-radius: 5px;
    transition: all 0.5s linear;
}

/* ! 4) 정관2 */
.rule_2 {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
.rule_2 .r_head {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	margin-bottom: 30px;
}
.rule_2 .r_history {
	margin-top: 20px;
	padding: 15px 30px;
	border:#eaeaea solid 1px;
	background-color: #f7f7f7;
}
.rule_2 .r_history ul {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
.rule_2 .r_history li {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	float: left;
	width: 25%;
	height: 30px;
	font-size: 14px;
	color: #60656a;
	line-height: 30px;
	text-indent: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
}
.rule_2 .r_history li::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background-color: #0075d8;
}

.rule_2 .r_body {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
.rule_2 .r_body section {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	margin: 30px 0;
}
.rule_2 .r_body h4 {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	position: relative;
	font-size: 18px;
	font-weight: 700;
	color: #1d1f21;
	line-height: 30px;
	text-indent: 15px;
}
.rule_2 .r_body h4::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -5px;
	border-radius: 50%;
	border: #0075d8 solid 3px;
}
.rule_2 .r_body strong {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	position: relative;
	margin-top: 15px;
	font-size: 16px;
	font-weight: 500;
	color: #1d1f21;
	line-height: 25px;
	text-indent: 15px;
}
.rule_2 .r_body strong::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background-color: #8c8f92;
}
.rule_2 .r_body p {
	margin: 5px 0;
	padding-left: 15px;
	font-size: 14px;
	color: #1d1f21;
	line-height: 25px;
}
.rule_2 .r_body > section > ul,
.rule_2 .r_body > section > ol {
	display: block;
	width: auto;
	margin-top: 5px;
	padding-left: 15px;
}
.rule_2 .r_body li {
	margin-bottom: 10px;
	font-size: 13px;
	color: #60656a;
	line-height: 18px;
}
.rule_2 .r_body li ul,
.rule_2 .r_body li ol {
	margin-top: 5px;
	padding-left: 15px;
}
.rule_2 .r_body li li { font-size: 12px; }


/* ! 5) 이용약관 & 개인정보처리방침 */

.aoi_tab {
	margin-bottom: 60px;
	padding: 20px;
	background-color: #eee;
	text-align: left;
}
.aoi_tab ul { display: flex; flex-wrap: wrap; }
.aoi_tab li {
	display: inline-block;
	vertical-align: middle;
	width: 49%;
	margin-right: 2%;
	padding: 5px 10px;
	text-align: center;
	font-weight: 500;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	transition: 0.2s;
	cursor: pointer;
}
.aoi_tab li:nth-child(2) { margin-right: 0; }
.aoi_tab li.on, .aoi_tab li:hover {
	background-color: #3698d7;
	color:#fff;
}
.aoi_tab li a {
	display: block;
	color: #222;
	transition: 0.2s;
	font-size: 16px;
}
.aoi_tab li:hover a { color:#fff; }
.aoi_area {
    position: relative;
    margin-bottom: 50px;
    margin-top: -235px;
    padding-bottom: 50px;
    padding-top: 235px;
    z-index: 1;
}
.aoi_area div { margin-bottom: 20px; }
.aoi_area div:last-child { margin-bottom: 0px; }
.aoi_area h2 {
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 32px;
    color: #3698d7;
}
.aoi_area div h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}
.aoi_area ol { padding-left: 20px; margin-top: 10px; }
.aoi_area ol li {
    list-style-type: decimal;
    font-size: 16px;
    line-height: 30px;
    word-break: break-all;
}
.aoi_area .list_ul { margin-left: 10px; }
.aoi_area .list_ul > li {
	font-size: 16px;
	line-height: 30px;
	position: relative;
	font-weight: 500;
	color: #464646;
	padding-left: 15px;
}
.aoi_area .list_ul > li::before {
	position: absolute;
	left: 0;
	top: 16px;
	border-radius: 50%;
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	background-color: #222;
}
.aoi_area .list_ul > li:last-child { margin-bottom: 10px; }
.aoi_area .list_ul_num > li { padding-left: 0; }
.aoi_area .list_ul_num > li::before { display: none; }
.aoi_area .list_ul .table_li { margin-top:10px; }
.aoi_area > div { margin-bottom: 50px; }
.pagenum
{
    font-weight: 700;
    color: #3698d7;
    font-size: 22px;
    margin-bottom: 30px;
}

.aoi_top
{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 235px;
    padding-left: 26px;
    padding-right: 10px;
    border: 1px solid #ddd;
    font-size: 12px;
    line-height: 30px;
    color:#222;
    font-weight: 700;
    transition: 0.2s;
}
.aoi_top::before
{
    content: '';
    position: absolute;
    left: 12px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-top: solid 1px currentColor;
    border-right: solid 1px currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.aoi_top:hover
{
    border-color: #1d4c69;
    color: #3698d7;
}

.sub_tab {
    position: relative;
    margin-bottom: 50px;
    z-index: 5;
}
.sub_tab ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.sub_tab li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    padding: 5px;
    width: 240px;
    text-align: center;
    font-weight: 500;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.sub_tab li.on, .aoi_tab li:hover {background-color:#3698d7; color:#fff;}
.sub_tab li a {display:block; color:#222; transition:0.2s; font-size: 14px;}
.sub_tab li:hover {border:1px solid #3698d7;}
.sub_tab li:hover a {color:#3698d7;}
.aoi_area p {
    font-weight: 500;
    font-size: 16px;
    letter-spacing:0;
    line-height: 1.7em;
    color:#464646 ;
    text-align: justify;
    word-break: break-all;
}
.privacy_subRules { margin-bottom: 35px !important; }


/* ! 6) 가입동의 */
.agree {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
.agree.li1 li {width:100%;}
.agree.li2 li {width:50%;}
.agree.li3 li {width:33.3%;}
.agree.li4 li {width:25%;}
.agree li {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	float: left;
}
.agree li > div {
	display: inline-block;
	vertical-align: middle;
	width: 95%;
	padding: 30px 0;
	border-radius: 2px;
	text-align: center;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
}
.agree li > div > i {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 30px;
	height: 30px;
	background-color: #bec3cf;
	border-radius: 30px;
}
.agree li > div > i::before {
	content: '';
	position: absolute;
	left: 9px;
	top: 11px;
	width: 12px;
	height: 5px;
	border-bottom: solid 1px #fff;
	border-left: solid 1px #fff;
	transform: rotate(-45deg);
}
.agree li > div > p {
	margin-top: 10px;
	font-size: 14px;
	line-height: 16px;
	color: #9fa4b1 !important;
	text-align: center !important;font-size: 14px !important;
}
.agree li.on > div {
	background-color: #f9fcff !important;    border: 1px solid #9aaedb !important;
}
.agree li.on > div > i { background-color: #083190; }
.agree li.on > div > i::before { border-color: #fff; }
.agree li.on > div > p { color: #222 !important; }
.agree_box p{font-size: 14px;font-size: 15px !important;}
/* 어그리 동의버튼 */
.btn_area_flex a
{
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    float: unset;
    width: unset !important;
    margin: auto 10px;
    padding: 1px 50px;
}
.btn_area_flex button
{
    font-size: 16px;
    height: 50px; 
    line-height: 45px;
    float: unset;
    width: unset !important;
    margin: auto 10px;
    padding: 1px 50px;
}
.scroll_y::-webkit-scrollbar { width: 5px; } 
.scroll_y::-webkit-scrollbar-thumb { background-color: #787e8b; border-radius: 10px; } 
.scroll_y::-webkit-scrollbar-track { background-color: rgb(212, 212, 212); border-radius: 10px; } 
.box.scroll_y
{
    height: 300px;
    padding: 45px 40px;
}
.box.scroll_y h2
{
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	margin-bottom: 5px;
}
.box.scroll_y h3
{
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	margin-bottom: 5px;
}
.box.scroll_y p
{
	font-size: 14px;
	line-height: 20px;
	margin-top: 5px;
}
.box.scroll_y div { margin-bottom: 20px; }
.box.scroll_y ul
{
	list-style: circle;
	padding-left: 10px;
}
.box.scroll_y ul li
{
	list-style-type: none;
	font-size: 14px; 
	line-height: 18px;
	position: relative;
}
.box.scroll_y ul li::before
{
	position: absolute;
	left: -10px;
	top: 7px;
	content: '';
	display: 'inline-block';
	width: 6px;
	height: 1px;
	background-color: #000;
}


/* ! 7) 정관 (기본 정관) */
/* 제정 (추가 자율) */
.enactment {
    text-align: right;
    width: 100%;
    color: #777;
    line-height: 24px;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* 회칙 컨텐츠 부분 */
.rules-wrap {
    width: 100%;
    position: relative;
    margin-bottom: 50px;
    padding-bottom: 50px;
}
.rules-wrap h3 {
    color: #3698d7;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 30px;
    margin-top: -260px;
    padding-top: 260px;
}
.rules-wrap .rules-content { width: 100%; margin-bottom: 50px; }
.rules-wrap .rules-content .rule-subTitle {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}
.rules-wrap .rules-content p {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.7em;
    color: #333;
    text-align: justify;
    word-break: break-all;
}


/*? 2. 기본 스타일 CSS */

/* ! 1) 버튼 */

/* ========== 1. 버튼 사이즈 ========== */
.btn-v-big a {
    display: block; 
    margin-top: 20px;
    width: 300px; 
    height: 70px; 
    line-height: 70px;
    background: #fff; 
    color: #000; 
    font-size: 20px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}
.btn-big a {
    display: block; 
    margin-top: 20px;
    width: 200px; 
    height: 50px; 
    line-height: 50px;
    background: #fff; 
    color: #000; 
    font-size: 16px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}
.btn-basic a {
    display: block; 
    margin-top: 20px;
    width: 150px; 
    height: 45px; 
    line-height: 45px;
    background: #fff; 
    color: #000; 
    font-size: 16px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}
.btn-small a {
    display: block; 
    margin-top: 20px;
    width: 100px; 
    height: 40px; 
    line-height: 40px;
    background: #fff; 
    color: #000; 
    font-size: 14px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}
.btn-v-small a {
    display: block; 
    margin-top: 20px;
    width: 70px; 
    height: 35px; 
    line-height: 35px;
    background: #fff; 
    color: #000; 
    font-size: 14px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}

/* ========== 2. 버튼 효과 ========== */

.btn-hover
{
    display: flex;
    justify-content: space-between;
    margin: 60px auto;
    max-width: 1280px;
}
.btn-hover div
{
    width: 20%;
    height: 100%;
    color: #000;
}

/* btn1 */
.btn-hov1 a:hover { color: #fff; border: none; }

/* btn2 */
.btn-hov2 a:hover {
    color: #fff;
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
    border-bottom-left-radius: 45px;
    border: none;
}

/* btn3 */
.btn-hov3 a {
    position: relative;
    /*background: #000;*/
    color: #fff;
    z-index: 1;
 }
 .btn-hov3 a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background: #fff;
    transition: all 0.3s ease;
    border: none;
 }
 .btn-hov3 a:hover {
    color: #000;
 }
 .btn-hov3 a:hover:after {
    left: 0;
    width: 100%;
 }

 /* btn4 */
.btn-hov4 a {
    position: relative;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}
.btn-hov4 a:hover {
    background: transparent;
    color: #222;
    box-shadow:
        -7px -7px 20px 0px #fff9,
        -4px -4px 5px 0px #fff9,
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001;
}
.btn-hov4 a:before,.btn-hov4 a::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    height:2px;
    width:0;
    background: #000;
    transition: 400ms ease all;
}
.btn-hov4 a::after {
    right:inherit;
    top:inherit;
    left:0;
    bottom:0;
}
.btn-hov4 a:hover:before,.btn-hov4 a:hover:after{
    width:100%;
    transition: 800ms ease all;
}




/* ! 2) 박스 */

.box1 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:1px solid #eee;
    background-color:#fafafa;
    box-sizing:border-box;
}
.box2 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:1px solid #eee;
    background-color:#fafafa;
    box-sizing:border-box;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.box3 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:1px solid #eee;
    background-color:#fafafa;
    box-sizing:border-box;
    border-radius: 10px;
}
.box4 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:1px solid #eee;
    background-color:#fafafa;
    box-sizing:border-box;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.box5 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:3px dashed #eee;
    background-color:#fafafa;
    box-sizing:border-box;
}
.box6 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:3px dashed #eee;
    background-color:#fafafa;
    box-sizing:border-box;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}


/* ! 3) 테이블 */

/** 기존 테이블 레이아웃 모음 */

/* div형 반응형 테이블 1 */
.div_table {
    display: table;
    width: 100%;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}
.div_table .tr {
    display: table;
    vertical-align: middle;
    width: 100%;
}
.div_table .tr .th {
    background-color: #fafafa;
    /* vertical-align: top; */
    vertical-align: middle;
    font-weight: 500;
    font-size: 16px;
}
.div_table .tr .th,
.div_table .tr .td {
    display: table-cell;
    padding: 12px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd; 
    text-align: left;
    line-height: 20px;
}
.div_table .div_table {
    margin-top: 10px;
    border-color: #eee;
}
.div_table .div_table .tr .th { background-color: #fafafa; }
.div_table .div_table .tr .th,
.div_table .div_table .tr .td { border-color: #eee; }


/* div형 반응형 테이블 2 */
.f_table {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 100%;
    border-top: 2px solid #222;
    border-left: 1px solid #ddd;
    font-size: 14px;
}
.f_table.bt1 { border-top:1px solid #ddd; }
.f_table .ft_area {
    display: table;
    width: 100%;
    border-bottom: 1px solid #ddd;
}
.f_table .ft_area .fta_label {
    display: table-cell;
    /* vertical-align: top; */
    vertical-align: middle;
    border-right: 1px solid #ddd;
    text-align: right;
    line-height: 40px;
    background-color: #fafafa;
    font-weight: 500;
    font-size: 16px;
    word-break: keep-all;
    padding: 0 12px;
}
.f_table .ft_area .fta_input {
    display: table-cell;
    /* vertical-align: top; */
    vertical-align: middle;
    border-right: 1px solid #ddd;
}
.f_table .ft_area .fta_input .fta_txt { line-height: 20px; padding: 10px 0; }
.f_table .ft_area .f_table { border-top: 0; border-left: 0; }
.f_table .ft_area .f_table .ft_area { border-color: #eee; }
.f_table .ft_area .f_table .ft_area:last-child { border-bottom: 0 }
.f_table .ft_area .fta_label > .area, .f_table .ft_area .fta_input > .area {
    padding: 5px;
    box-sizing: border-box;
}
.f_table .ft_area .f_table .ft_area .fta_input:last-child { border-right: 0 }
.f_table .ft_area .fta_title {
    display: table-cell;
    vertical-align: middle;
    padding: 20px 0;
    background-color: #fafafa;
    font-weight: 400;
    text-align: center;
    line-height: 20px;
}
.f_table .ft_area .fta_txt {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}


/** 기존 전체 테이블 레이아웃 제어용 CSS */
table {
	width: 100%;
	border-top: 2px solid #222;
	background-color: #fff;
}
table thead th {
	background-color: #fafafa;
	color: #414141;
}
table thead th, table tbody th { font-weight: 700; background: #f5f5f5; }
table thead th,
table tbody th,
table tbody td {
	padding: 20px;
	border-bottom: 1px solid #eee;
	line-height: 28px;
	text-align: center;font-size: 17px;
    text-align: left;
}
div[name~="content"] table thead th,
div[name~="content"] table tbody th,
div[name~="content"] table tbody td,
div[class~="boardContent"] table thead th,
div[class~="boardContent"] table tbody th,
div[class~="boardContent"] table tbody td { text-align: left !important; }

/**??? 사용용도 알수없음 */
table.__se_tbl_ext{border:0;text-align:left;}
table.__se_tbl_ext tbody td{padding:0;border:0;line-height:normal;word-break: normal;}
table.__se_tbl_ext table.__se_tbl_ext{background-color:transparent}
table.__se_tbl_ext tbody td[bgcolor=#0B3387]{background-color:#0B3387}

/* type01 클래스를 지정했을 때 디자인 */
table.type01 { border-left: 1px solid #eee; }
table.tal tbody th, table.tal tbody td {text-align:left ; font-size: 16px;}
table.type01 tbody th {/*vertical-align:top;*/background-color:#fafafa;}
table.type01 thead th, table.type01 tbody th, table.type01 tbody td {padding:12px 15px; border-right:1px solid #eee; font-weight: 500;font-size: 16px;}
table.type01 thead th.bgcg, table.type01 tbody td.bgcg {background-color:#eaf0ef !important;}

/* table head (th) 에 align 이라는 클래스를 주었을 시 적용 - 사용부분 확인필요 */
table thead th.align {position:relative; padding:12px 30px 12px 15px; text-align:left;}
table thead th.align button {display:inline-block; position:absolute; right:10px; top:12px; width:20px; height:20px;}
table thead th.align button:before {content:""; position:absolute; left:5px; top:3px; border-bottom: 6px solid #111; border-left: 5px solid transparent; border-right: 5px solid transparent;}
table thead th.align button:hover:before {border-bottom-color:#0a72ca;}
table thead th.align button:after {content:""; position:absolute; left:5px; bottom:3px; border-top: 6px solid #111; border-left: 5px solid transparent; border-right: 5px solid transparent;}
table thead th.align button:hover:after {border-top-color:#0a72ca;}
table thead th.align.ascending button:after {display:none;}
table thead th.align.descending button:before {display:none;}

/** table 서브페이지 디자인 첨부 CSS */

/* 각 사이트 테마별로 테이블 상단 border 색상 지정용 css */
.tbl_cm { border-top: 2px solid #222 !important; } /* 회의후 모든사이트 보더탑 색깔 무채색 검정으로 통일하기로 함*/


/* ! 4) 탭 */


/** 탭 스타일 */

/* 탭 스타일 1 */
.tab01 { margin-bottom: 20px; padding: 10px;border: 1px dashed #eee;scroll-behavior: smooth; text-align: left;}
.tab01 ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; gap: 5px;
}
.tab01 li.on, .tab01 li:hover {
    background-color: #083190;
    color: #fff;
}
.tab01 li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    width: auto;
    padding: 10px 15px;
    font-size: 16px;
    text-align: center;
    border-radius: 8px;
    transition: all 0.2s linear;background-color: #eaecee;  color: #666;
    cursor: pointer;
}
.tab01_contents_wrap {
    width: 100%;
    height: auto;
}
.tab01_contents_wrap > div:not(.tab01_content_1) { display: none; }

/* 탭 스타일 2 */
.tab02 {
    padding: 20px;
    text-align: left;
}
.tab02 ul {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tab02 ul li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    width: auto;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
}
.tab02_contents_wrap {
    width: 100%;
    height: auto;
}
.tab02_contents_wrap > div:not(.tab02_content_1) { display: none; }

/* 탭 스타일 3 */
.tab03 {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #eee;
    text-align: left;
}
.tab03 ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.tab03 li.on, .tab03 li:hover {
    /* 테마색상은 사이트 스타일에 맞게 변경 */
    background-color: #3698d7;
    color: #fff;
}
.tab03 li {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab03_contents_wrap {
    width: 100%;
    height: auto;
}
.tab03_contents_wrap > div:not(.tab03_content_1) { display: none; }

/* 탭 스타일 4 */
.tab04 {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #eee;
    text-align: left;
}
.tab04 ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.tab04 li.on, .tab04 li:hover {
    /* 테마색상은 사이트 스타일에 맞게 변경 */
    background-color: #3698d7;
    color: #fff;
}
.tab04 li {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab04_contents_wrap {
    width: 100%;
    height: auto;
}
.tab04_contents_wrap > div:not(.tab04_content_1) { display: none; }
/* 탭 스타일 5 */
.tab05 {
    margin-bottom: 20px;
    padding: 10px;
    /* border: 1px dashed #eee; */
    border-radius: 8px;
    scroll-behavior: smooth;
    position: relative;
    z-index: 0;
}
.tab05 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tab05 ul li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    width: auto;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab05 ul li:hover {border-color: #083190;}
.tab05 ul li:hover a { color: #083190; }
.tab05 ul li a {
    display: block;
    color: #222;
    transition: all 0.2s linear;
    font-size: 14px;width: 100%; padding: 10px;    box-sizing: border-box; font-weight: 500;
}

/* 탭 스타일 4 */
.tab06 {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    scroll-behavior: smooth;
}
.tab06 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tab06 ul li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    width: auto;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab06 ul li:hover { border-color: #007db8; }
.tab06 ul li:hover a { color: #007db8; }
.tab06 ul li a {
    display: block;
    color: #222;
    transition: all 0.2s linear;
    font-size: 14px;
}

/* 기존 적용 공통 탭 */
/* tab */
.tab
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    border: 1px dashed #e7e9eb;
    border-radius: 10px;
    padding: 20px 10px;
}
.tab li
{
    background-color: #eaecee !important;
    color: #5b5f69 !important;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    min-width: 100px;
    height: 40px;
    line-height: 40px;
    text-indent: 0;
    transition: all 0.2s linear;
    text-align: center;
    box-sizing: border-box;
    font-size: 16px;
    padding: 0 10px;
}
.tab li a
{
    padding: 0 20px;
    border-radius: 5px;
    width: 100%;
    height: 98%;
    display: inline-block;
    color: #333;
    transition: all 0.2s linear;
}
.tab li.on a, .tab li:hover a { color: #fff; }
.tab li.on, .tab li:hover
{
    background-color: #2c2e33 !important;
    color: #fff !important;
}

.btn_choice
{
    display: flex;
    justify-content: center;
    gap: 25px;
    border: 1px dashed #e7e9eb;
    border-radius: 10px;
    padding: 20px 10px;
}
.btn_choice a.btn {
    background-color: #eaecee !important;
    color: #5b5f69 !important;
    border-radius: 5px;
    border: none;
}
.btn_choice a.on , a.btn:hover
{
    background-color: #2c2e33 !important;
    color: #fff !important;
}
.btn_choice li
{
    background-color: #eaecee !important;
    color: #5b5f69 !important;
    border-radius: 5px;
    border: none;
    width: auto !important;
    height: 40px;
}
.btn_choice li a
{
    display: block;
    vertical-align: middle;
    padding: 0 20px;
    border-radius: 5px;
    width: 100%;
    line-height: 40px;
    transition: all 0.2s linear;
}
.btn_choice li.on
{
    background-color: #2c2e33 !important;
    color: #fff !important;
}

/* .tab
{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}
.tab li
{
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    border: none;
    height: 48px;
    text-align: center;
    line-height: 48px;
    transition: 0.2s;
    box-sizing: border-box;
    cursor: pointer;
    color: #5b5f69 !important;
    background-color: #eaecee !important;
    font-size: 16px;
}
.tab li a
{
    display: block;
    vertical-align: middle;
    width: auto;
    color: #111;
    line-height: 48px;
    transition: 0.2s;
}
.tab li:hover a { background-color:#f1f1f1; }
.tab li.on, .tab li.on a
{
    background-color: #2c2e33;
    color: #fff;
    border-radius: 5px;
    border: none;
}
.tab_wrap {display:inline-block; vertical-align:middle;}
.tab_wrap .tab.small li {height:24px;}
.tab_wrap .tab.small li a {height:24px; line-height:24px;} */

/* 탭 컨텐츠 갯수에 따른 너비 조절 */
.li1 > li {     width: 100%;        }
.li2 > li {     width: 50%;         }
.li3 > li {     width: 33.3%;       }
.li4 > li {     width: 25%;         }
.li5 > li {     width: 20%;         }
.li6 > li {     width: 16.66%;      }
.li7 > li {     width: 14.28%;      }
.li8 > li {     width: 12.5%;       }

.tab.type03 { border: none; }
.tab.type03 li {
    height: 30px;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0 10px;
    border: none;
    background-color: #fafafa;
    border: 1px solid #eee;
    color: #222;
    line-height: 28px;
}
.tab.type03 li:hover,
.tab.type03 li.on {
    background-color: #3d6689;
    color: #fff;
    cursor: pointer;
}
.tab.type04 {
    border: none !important;
}
.tab.type04 li {
    margin-right: 7px; height: unset !important;
    margin-bottom: 10px;
    border: none !important;
    background-color: #eaecee;
    border: none !important;
    color: #222;
    border-radius: 5px;    
}
.tab.type04 li a {
    line-height: 28px !important;
    font-size: 14px;
    padding: 0 10px;
}
.tab.type04 li:hover {
    background-color: #999;
    cursor: pointer;
}
.tab.type04 li.on, .tab.type04 li.on a {
    background-color: #000;
    color: #fff;
}


/** 탭 테마색 */

/*
    2024-01-09 정규호 추가
    ===========================================
    1. 탭 버튼 클릭 시 선택된 탭의 강조 색상 (addClass시의 on 클래스에 적용됨)
    2. 탭 버튼에 마우스 올렸을 시의 hover 효과 색상 클래스
*/

/* 1. 색상: #3698d7 */
/* tab01, tab03, tab04 - 배경색 변경 디자인 */
.tab01 li.tab_cm.on, .tab01 li.tab_cm:hover,
.tab03 li.tab_cm.on, .tab03 li.tab_cm:hover,
.tab04 li.tab_cm.on, .tab04 li.tab_cm:hover { background-color: #3698d7 !important; color: #fff; }
/* tab02 - 하단 보더 변경 디자인 */
.tab02 li.tab_cm.on, .tab02 li.tab_cm:hover { border-bottom: 3px solid #3698d7 !important; }
/* tab05, tab06 - 보더 및 폰트 색상 변경 디자인 */
.tab05 li:hover, .tab06 li:hover { border-color: #3698d7 !important; }
.tab05 li:hover a, .tab06 li:hover a { color: #3698d7 !important; }

/* 2. 색상: #53b1eb */
/* tab01, tab03, tab04 - 배경색 변경 디자인 */
.tab01 li.tab_cm_l.on, .tab01 li.tab_cm_l:hover,
.tab03 li.tab_cm_l.on, .tab03 li.tab_cm_l:hover,
.tab04 li.tab_cm_l.on, .tab04 li.tab_cm_l:hover { background-color: #53b1eb !important; color: #fff; }
/* tab02 - 하단 보더 변경 디자인 */
.tab02 li.tab_cm.on, .tab02 li.tab_cm:hover { border-bottom: 3px solid #53b1eb !important; }
/* tab05, tab06 - 보더 및 폰트 색상 변경 디자인 */
.tab05 li:hover, .tab06 li:hover { border-color: #083190 !important; }
.tab05 li:hover a, .tab06 li:hover a { color: #083190 !important; }


.tab01 li.tab_cm_l.on, .tab01 li.tab_cm_l:hover,
.tab02 li.tab_cm_l.on, .tab02 li.tab_cm_l:hover,
.tab03 li.tab_cm_l.on, .tab03 li.tab_cm_l:hover,
.tab04 li.tab_cm_l.on, .tab04 li.tab_cm_l:hover,
.tab05 li.tab_cm_l:hover, .tab06 li.tab_cm_l:hover { background-color: #53b1eb !important; color: #fff; }
.tab01 li.tab_cm_d.on, .tab01 li.tab_cm_d:hover,
.tab02 li.tab_cm_d.on, .tab02 li.tab_cm_d:hover,
.tab03 li.tab_cm_d.on, .tab03 li.tab_cm_d:hover,
.tab04 li.tab_cm_d.on, .tab04 li.tab_cm_d:hover,
.tab05 li.tab_cm_d:hover, .tab06 li.tab_cm_d:hover { background-color: #1076b6 !important; color: #fff; }
.tab01 li.tab_cr.on, .tab01 li.tab_cr:hover,
.tab02 li.tab_cr.on, .tab02 li.tab_cr:hover,
.tab03 li.tab_cr.on, .tab03 li.tab_cr:hover,
.tab04 li.tab_cr.on, .tab04 li.tab_cr:hover,
.tab05 li.tab_cr:hover, .tab06 li.tab_cr:hover { background-color: #b82626 !important; color: #fff; }
.tab01 li.tab_cr_l.on, .tab01 li.tab_cr_l:hover,
.tab02 li.tab_cr_l.on, .tab02 li.tab_cr_l:hover,
.tab03 li.tab_cr_l.on, .tab03 li.tab_cr_l:hover,
.tab04 li.tab_cr_l.on, .tab04 li.tab_cr_l:hover,
.tab05 li.tab_cr_l:hover, .tab06 li.tab_cr_l:hover { background-color: #ca4e4e !important; color: #fff; }
.tab01 li.tab_cr_d.on, .tab01 li.tab_cr_d:hover,
.tab02 li.tab_cr_d.on, .tab02 li.tab_cr_d:hover,
.tab03 li.tab_cr_d.on, .tab03 li.tab_cr_d:hover,
.tab04 li.tab_cr_d.on, .tab04 li.tab_cr_d:hover,
.tab05 li.tab_cr_d:hover, .tab06 li.tab_cr_d:hover { background-color: #8b1212 !important; color: #fff; }
.tab01 li.tab_cy.on, .tab01 li.tab_cy:hover,
.tab02 li.tab_cy.on, .tab02 li.tab_cy:hover,
.tab03 li.tab_cy.on, .tab03 li.tab_cy:hover,
.tab04 li.tab_cy.on, .tab04 li.tab_cy:hover,
.tab05 li.tab_cy:hover, .tab06 li.tab_cy:hover { background-color: #e2ba18 !important; color: #fff; }
.tab01 li.tab_cy_l.on, .tab01 li.tab_cy_l:hover,
.tab02 li.tab_cy_l.on, .tab02 li.tab_cy_l:hover,
.tab03 li.tab_cy_l.on, .tab03 li.tab_cy_l:hover,
.tab04 li.tab_cy_l.on, .tab04 li.tab_cy_l:hover,
.tab05 li.tab_cy_l:hover, .tab06 li.tab_cy_l:hover { background-color: #f1d35b !important; color: #fff; }
.tab01 li.tab_cy_d.on, .tab01 li.tab_cy_d:hover,
.tab02 li.tab_cy_d.on, .tab02 li.tab_cy_d:hover,
.tab03 li.tab_cy_d.on, .tab03 li.tab_cy_d:hover,
.tab04 li.tab_cy_d.on, .tab04 li.tab_cy_d:hover,
.tab05 li.tab_cy_d:hover, .tab06 li.tab_cy_d:hover { background-color: #da9604 !important; color: #fff; }
.tab01 li.tab_co.on, .tab01 li.tab_co:hover,
.tab02 li.tab_co.on, .tab02 li.tab_co:hover,
.tab03 li.tab_co.on, .tab03 li.tab_co:hover,
.tab04 li.tab_co.on, .tab04 li.tab_co:hover,
.tab05 li.tab_co:hover, .tab06 li.tab_co:hover { background-color: #f7941d !important; color: #fff; }
.tab01 li.tab_co_l.on, .tab01 li.tab_co_l:hover,
.tab02 li.tab_co_l.on, .tab02 li.tab_co_l:hover,
.tab03 li.tab_co_l.on, .tab03 li.tab_co_l:hover,
.tab04 li.tab_co_l.on, .tab04 li.tab_co_l:hover,
.tab05 li.tab_co_l:hover, .tab06 li.tab_co_l:hover { background-color: #ffaf4e !important; color: #fff; }
.tab01 li.tab_co_d.on, .tab01 li.tab_co_d:hover,
.tab02 li.tab_co_d.on, .tab02 li.tab_co_d:hover,
.tab03 li.tab_co_d.on, .tab03 li.tab_co_d:hover,
.tab04 li.tab_co_d.on, .tab04 li.tab_co_d:hover,
.tab05 li.tab_co_d:hover, .tab06 li.tab_co_d:hover { background-color: #d36205 !important; color: #fff; }
.tab01 li.tab_ce.on, .tab01 li.tab_ce:hover,
.tab02 li.tab_ce.on, .tab02 li.tab_ce:hover,
.tab03 li.tab_ce.on, .tab03 li.tab_ce:hover,
.tab04 li.tab_ce.on, .tab04 li.tab_ce:hover,
.tab05 li.tab_ce:hover, .tab06 li.tab_ce:hover { background-color: #27b0a5 !important; color: #fff; }
.tab01 li.tab_ce_l.on, .tab01 li.tab_ce_l:hover,
.tab02 li.tab_ce_l.on, .tab02 li.tab_ce_l:hover,
.tab03 li.tab_ce_l.on, .tab03 li.tab_ce_l:hover,
.tab04 li.tab_ce_l.on, .tab04 li.tab_ce_l:hover,
.tab05 li.tab_ce_l:hover, .tab06 li.tab_ce_l:hover { background-color: #5bc9c0 !important; color: #fff; }
.tab01 li.tab_ce_d.on, .tab01 li.tab_ce_d:hover,
.tab02 li.tab_ce_d.on, .tab02 li.tab_ce_d:hover,
.tab03 li.tab_ce_d.on, .tab03 li.tab_ce_d:hover,
.tab04 li.tab_ce_d.on, .tab04 li.tab_ce_d:hover,
.tab05 li.tab_ce_d:hover, .tab06 li.tab_ce_d:hover { background-color: #07978b !important; color: #fff; }
.tab01 li.tab_cs.on, .tab01 li.tab_cs:hover,
.tab02 li.tab_cs.on, .tab02 li.tab_cs:hover,
.tab03 li.tab_cs.on, .tab03 li.tab_cs:hover,
.tab04 li.tab_cs.on, .tab04 li.tab_cs:hover,
.tab05 li.tab_cs:hover, .tab06 li.tab_cs:hover { background-color: #3589d1 !important; color: #fff; }
.tab01 li.tab_cs_l.on, .tab01 li.tab_cs_l:hover,
.tab02 li.tab_cs_l.on, .tab02 li.tab_cs_l:hover,
.tab03 li.tab_cs_l.on, .tab03 li.tab_cs_l:hover,
.tab04 li.tab_cs_l.on, .tab04 li.tab_cs_l:hover,
.tab05 li.tab_cs_l:hover, .tab06 li.tab_cs_l:hover { background-color: #75aee0 !important; color: #fff; }
.tab01 li.tab_cs_d.on, .tab01 li.tab_cs_d:hover,
.tab02 li.tab_cs_d.on, .tab02 li.tab_cs_d:hover,
.tab03 li.tab_cs_d.on, .tab03 li.tab_cs_d:hover,
.tab04 li.tab_cs_d.on, .tab04 li.tab_cs_d:hover,
.tab05 li.tab_cs_d:hover, .tab06 li.tab_cs_d:hover { background-color: #0a579b !important; color: #fff; }
.tab01 li.tab_cb.on, .tab01 li.tab_cb:hover,
.tab02 li.tab_cb.on, .tab02 li.tab_cb:hover,
.tab03 li.tab_cb.on, .tab03 li.tab_cb:hover,
.tab04 li.tab_cb.on, .tab04 li.tab_cb:hover,
.tab05 li.tab_cb:hover, .tab06 li.tab_cb:hover { background-color: #2b62b5 !important; color: #fff; }
.tab01 li.tab_cb_l.on, .tab01 li.tab_cb_l:hover,
.tab02 li.tab_cb_l.on, .tab02 li.tab_cb_l:hover,
.tab03 li.tab_cb_l.on, .tab03 li.tab_cb_l:hover,
.tab04 li.tab_cb_l.on, .tab04 li.tab_cb_l:hover,
.tab05 li.tab_cb_l:hover, .tab06 li.tab_cb_l:hover { background-color: #597db3 !important; color: #fff; }
.tab01 li.tab_cb_d.on, .tab01 li.tab_cb_d:hover,
.tab02 li.tab_cb_d.on, .tab02 li.tab_cb_d:hover,
.tab03 li.tab_cb_d.on, .tab03 li.tab_cb_d:hover,
.tab04 li.tab_cb_d.on, .tab04 li.tab_cb_d:hover,
.tab05 li.tab_cb_d:hover, .tab06 li.tab_cb_d:hover { background-color: #104594 !important; color: #fff; }
.tab01 li.tab_cn.on, .tab01 li.tab_cn:hover,
.tab02 li.tab_cn.on, .tab02 li.tab_cn:hover,
.tab03 li.tab_cn.on, .tab03 li.tab_cn:hover,
.tab04 li.tab_cn.on, .tab04 li.tab_cn:hover,
.tab05 li.tab_cn:hover, .tab06 li.tab_cn:hover { background-color: #2e3192 !important; color: #fff; }
.tab01 li.tab_cn_l.on, .tab01 li.tab_cn_l:hover,
.tab02 li.tab_cn_l.on, .tab02 li.tab_cn_l:hover,
.tab03 li.tab_cn_l.on, .tab03 li.tab_cn_l:hover,
.tab04 li.tab_cn_l.on, .tab04 li.tab_cn_l:hover,
.tab05 li.tab_cn_l:hover, .tab06 li.tab_cn_l:hover { background-color: #5e60a8 !important; color: #fff; }
.tab01 li.tab_cn_d.on, .tab01 li.tab_cn_d:hover,
.tab02 li.tab_cn_d.on, .tab02 li.tab_cn_d:hover,
.tab03 li.tab_cn_d.on, .tab03 li.tab_cn_d:hover,
.tab04 li.tab_cn_d.on, .tab04 li.tab_cn_d:hover,
.tab05 li.tab_cn_d:hover, .tab06 li.tab_cn_d:hover { background-color: #0d0f55 !important; color: #fff; }
.tab01 li.tab_cc.on, .tab01 li.tab_cc:hover,
.tab02 li.tab_cc.on, .tab02 li.tab_cc:hover,
.tab03 li.tab_cc.on, .tab03 li.tab_cc:hover,
.tab04 li.tab_cc.on, .tab04 li.tab_cc:hover,
.tab05 li.tab_cc:hover, .tab06 li.tab_cc:hover { background-color: #737d94 !important; color: #fff; }
.tab01 li.tab_cc_l.on, .tab01 li.tab_cc_l:hover,
.tab02 li.tab_cc_l.on, .tab02 li.tab_cc_l:hover,
.tab03 li.tab_cc_l.on, .tab03 li.tab_cc_l:hover,
.tab04 li.tab_cc_l.on, .tab04 li.tab_cc_l:hover,
.tab05 li.tab_cc_l:hover, .tab06 li.tab_cc_l:hover { background-color: #a4a8b1 !important; color: #fff; }
.tab01 li.tab_cc_d.on, .tab01 li.tab_cc_d:hover,
.tab02 li.tab_cc_d.on, .tab02 li.tab_cc_d:hover,
.tab03 li.tab_cc_d.on, .tab03 li.tab_cc_d:hover,
.tab04 li.tab_cc_d.on, .tab04 li.tab_cc_d:hover,
.tab05 li.tab_cc_d:hover, .tab06 li.tab_cc_d:hover { background-color: #4a5266 !important; color: #fff; }
.tab01 li.tab_cd.on, .tab01 li.tab_cd:hover,
.tab02 li.tab_cd.on, .tab02 li.tab_cd:hover,
.tab03 li.tab_cd.on, .tab03 li.tab_cd:hover,
.tab04 li.tab_cd.on, .tab04 li.tab_cd:hover,
.tab05 li.tab_cd:hover, .tab06 li.tab_cd:hover { background-color: #222 !important; color: #fff; }
.tab01 li.tab_cd_l.on, .tab01 li.tab_cd_l:hover,
.tab02 li.tab_cd_l.on, .tab02 li.tab_cd_l:hover,
.tab03 li.tab_cd_l.on, .tab03 li.tab_cd_l:hover,
.tab04 li.tab_cd_l.on, .tab04 li.tab_cd_l:hover,
.tab05 li.tab_cd_l:hover, .tab06 li.tab_cd_l:hover { background-color: #555 !important; color: #fff; }
.tab01 li.tab_cd_d.on, .tab01 li.tab_cd_d:hover,
.tab02 li.tab_cd_d.on, .tab02 li.tab_cd_d:hover,
.tab03 li.tab_cd_d.on, .tab03 li.tab_cd_d:hover,
.tab04 li.tab_cd_d.on, .tab04 li.tab_cd_d:hover,
.tab05 li.tab_cd_d:hover, .tab06 li.tab_cd_d:hover { background-color: #000 !important; color: #fff; }
.tab01 li.tab_cw.on, .tab01 li.tab_cw:hover,
.tab02 li.tab_cw.on, .tab02 li.tab_cw:hover,
.tab03 li.tab_cw.on, .tab03 li.tab_cw:hover,
.tab04 li.tab_cw.on, .tab04 li.tab_cw:hover,
.tab05 li.tab_cw:hover, .tab06 li.tab_cw:hover { background-color: #fff !important; color: #fff; }





/**
	* ! 6) 폰트 (Font 서브페이지 폰트안내 수정 필요함)
	- 폰트는 기존에 header의 common.css 에서 @font-face 또는 @import로 가져온 후 해당 파일에서 body에 바로 적용하였으나
	  inc에 있는 header는 여러 사이트 전체를 제어하므로 inc/common.css에서는 폰트 소스 경로만 첨부하고 전체 적용은 header 에서 적용하는 것으로 설정.
	- 현재 별도로 header에서 font를 지정하지 않는다면 (header에 common.css가 없는 demo 같은 사이트의 경우) inc/init.css에서 Noto Sans로 적용되게 reset 함.
*/

/** Font 1. - Pretendard (sans-serif 계열, 영문용으로) */
@font-face {
	font-family: 'Pretendard';
    font-weight: 900;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-Black.ttf');
}
@font-face {
	font-family: 'Pretendard';
    font-weight: 700;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-Bold.ttf');
}
@font-face {
	font-family: 'Pretendard';
    font-weight: 800;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-ExtraBold.ttf');
}
@font-face {
	font-family: 'Pretendard';
    font-weight: 200;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-ExtraLight.ttf');
}
@font-face {
	font-family: 'Pretendard';
    font-weight: 300;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-Light.ttf');
}
@font-face {
	font-family: 'Pretendard';
    font-weight: 500;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-Medium.ttf');
}
@font-face {
	font-family: 'Pretendard';
    font-weight: 400;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-Regular.ttf');
}
@font-face {
	font-family: 'Pretendard';
    font-weight: 600;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-SemiBold.ttf');
}
@font-face {
	font-family: 'Pretendard';
    font-weight: 100;
	src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-Thin.ttf');
}

/** Font 2. - Noto Sans KR */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');


/** Font 3. - NanumSquareNeo */
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 300;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 400;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 700;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 800;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 900;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.ttf') format("truetype");
    font-display: swap;
}


/** Font 4. - Rubik & Roboto */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/**
    *? 3. 로그인 페이지 레이아웃 3종류
    - common.css에 첨부된 내용은 demo의 레이아웃 확인용으로 사용되며, 실제 로그인 스킨 선택시 적용되는 css는 모듈 css입니다.
    - (modules/member/memberList/user/core/view/inc/css/login.css)
    - (modules/member/memberList/user/core/view/inc/css/login.reaction.css)  
*/

/* ! 1) 로그인디자인 1 (loginnew1) */
.loginnew1_wrap
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.loginnew1_wrap .l_form
{
    /* 아이디/비밀번호 영역 */
    width: 50%;
    padding: 10px 60px 10px 15px;
    position: relative;
}
.loginnew1_wrap .l_form::after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 2px;
    height: 300px;
    background-color: #f3f5fb;
    top: 0;
    right: 20px;
}
.loginnew1_wrap .l_form .l_form_main { width: 100%; }
.loginnew1_wrap .l_form .l_form_main .l_form_title
{
    width: 100%;
    margin-bottom: 25px;
}
.loginnew1_wrap .l_form .l_form_main .l_form_title h4
{
    font-weight: 800;
    font-size: 24px;
    color: #000;
    float: left;
}
.loginnew1_wrap .l_form .l_form_main .l_form_title span
{
    color: #999;
    display: inline-block;
    font-size: 14px;
    padding-left: 11px;
    margin-top: 3px;
}
.loginnew1_wrap .l_form .l_form_main input
{
    color: #000;
    height: 50px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid #bfbfbf;
    margin-bottom: 20px;
    padding: 20px 10px;
}
.loginnew1_wrap .l_form .l_form_main button
{
    background-color: #2c2e33 !important;
    border: 2px solid #2c2e33 !important;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    height: 40px;
    line-height: 40px !important;
    padding: 0 !important;
}
.loginnew1_wrap .l_form .l_form_main button:hover
{
    background-color: #000 !important;
    border: 2px solid #0c266f !important;
}
.loginnew1_wrap .l_form .l_form_sub
{
    width: 100%;
}
.loginnew1_wrap .l_form .l_form_sub::before
{
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
    margin: 20px 0;
}
.loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap h5
{
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center;
}
.loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap h5::after
{
    content: '';
    width: 1px;
    height: 25px;
    display: inline-block;
    background-color: #e9e9e9;
    margin-left: 10px;
    margin-right: 5px;
}
.loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap p
{
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #888 !important;
    line-height: 14px !important;
    word-break: auto-phrase !important;
}
.loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap i
{
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    font-size: 18px;
}
.loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap i::before
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap img
{
    width: 22px;
    height: 22px;
    display: inline-block;
}
/* .loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap a.kakao_login i
{
    color: #ffe93a;
} */
.loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap a.naver_login i
{
    color: #30c856;
}


.loginnew1_wrap .l_link
{
    /* 바로가기 버튼 영역 */
    width: 50%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}
.loginnew1_wrap .l_link a.l_link_dir
{
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: all 0.2s linear;
}
.loginnew1_wrap .l_link a.l_link_dir.join
{
    /* 회원가입하기 박스 */
    background-color: #f4faff;
}
.loginnew1_wrap .l_link a.l_link_dir.join:hover
{
    background-color: #c5e3fb;
}
.loginnew1_wrap .l_link a.l_link_dir.forgotAccount
{
    /* 아이디 비밀번호 찾기 박스 */
    background-color: #f4f7ff;
}
.loginnew1_wrap .l_link a.l_link_dir.forgotAccount:hover
{
    background-color: #dde4f7;
}
.loginnew1_wrap .l_link a.l_link_dir .imgBox
{
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    margin-left: 40px;
    width: 90px;
    height: 90px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.06);
}
.loginnew1_wrap .l_link a.l_link_dir .imgBox img
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loginnew1_wrap .l_link a.l_link_dir .l_link_join_text
{ 
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.loginnew1_wrap .l_link a.l_link_dir .l_link_join_text h6
{
    color: #000;
    font-size: 20px;
    font-weight: 800;
}
.loginnew1_wrap .l_link a.l_link_dir .l_link_join_text p
{
    color: #898989 !important;
    font-size: 14px !important;
}

/* ! 2) 로그인디자인 2 (loginnew2) */
.loginnew2_wrap
{
    width: 100%;
    display: flex;
    align-items: center;
}
.loginnew2_wrap .l_form
{
    /* 아이디 비밀번호 입력 부분 */
    width: 50%;
    padding: 40px 36px 0 36px;
}
.loginnew2_wrap .l_form input
{
    width: 100%;
    height: 50px;
    padding: 12px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #bfbfbf !important;
}
.loginnew2_wrap .l_form .l_form_btns
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.loginnew2_wrap .l_form .l_form_btns button,
.loginnew2_wrap .l_form .l_form_btns a
{
    width: 48%;
    height: 40px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: normal !important;
    transition: all 0.2s linear;
}
.loginnew2_wrap .l_form .l_form_btns button
{
    background-color: #2c2e33;
}
.loginnew2_wrap .l_form .l_form_btns a
{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1942ba;
}
.loginnew2_wrap .l_form .l_form_btns button:hover
{
    background-color: #000;
}
.loginnew2_wrap .l_form .l_form_btns a:hover
{
    background-color: #0f2566;
}
.loginnew2_wrap .l_form .forgotAccount
{
    width: 100%;
    margin-top: 40px;
    margin-bottom: 50px;
    text-align: center;
}
.loginnew2_wrap .l_form .forgotAccount span
{
    color: #898989;
    font-size: 13px;
}
.loginnew2_wrap .l_form .forgotAccount a
{
    color: #262626;
    font-weight: 800;
    font-size: 13px;
}


.loginnew2_wrap .l_link
{
    /* 간편 로그인 부분 */
    width: 50%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.09);
    padding: 50px 60px;
}
.loginnew2_wrap .l_link h4
{
    color: #000;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
}
.loginnew2_wrap .l_link p.l_link_info
{
    color: #898989 !important;
    font-size: 13px !important;
    text-align: center;
    margin-top: 15px;
    word-break: auto-phrase !important;
    line-height: normal !important;
}
.loginnew2_wrap .l_link p.l_link_info b { color: #2f59ce; }
.loginnew2_wrap .l_link .l_link_btns
{
    /* 간편로그인 버튼들 */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.loginnew2_wrap .l_link .l_link_btns a
{
    width: 48%;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    padding: 25px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}
.loginnew2_wrap .l_link .l_link_btns a span
{
    color: #262626;
    font-weight: 800;
    font-size: 13px;
}
.loginnew2_wrap .l_link .l_link_btns a.kakao_login:hover
{
    outline: 4px solid #ffe812;
    border: 1px solid transparent;
}
.loginnew2_wrap .l_link .l_link_btns a.naver_login:hover
{
    outline: 4px solid #1ec800;
    border: 1px solid transparent;
}

/* ! 3) 로그인디자인 3 (loginnew3) */
.loginnew3_wrap
{
    width: 100%;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    gap: 140px;
    align-items: center;
    padding: 60px 0;
    box-sizing: border-box;
}
.loginnew3_wrap h4
{
    color: #000;
    font-size: 36px;
    font-weight: 900;
}
.loginnew3_wrap .l_form { width: 480px; }
.loginnew3_wrap .l_form .l_form_login
{
    /* 아이디/비밀번호 입력창 및 로그인 버튼 */
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    height: 115px;
    align-items: center;
}
.loginnew3_wrap .l_form .l_form_login .l_form_login_input
{
    width: calc(100% - 150px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.loginnew3_wrap .l_form .l_form_login .l_form_login_input input
{
    height: 50px;
    border: 1px solid #bfbfbf;
    width: 100%;
    padding-left: 40px;
}
.loginnew3_wrap .l_form .l_form_login .l_form_login_input .input_wrapper
{
    position: relative;
}
.loginnew3_wrap .l_form .l_form_login .l_form_login_input .input_wrapper i
{
    position: absolute;
    top: 14px;
    left: 18px;
    font-size: 22px;
    color: #3f4867;
}
.loginnew3_wrap .l_form .l_form_login button
{
    width: 130px;
    height: 100%;
    background-color: #2c2e33;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border-radius: 10px;
    transition: all 0.2s linear;
}
.loginnew3_wrap .l_form .l_form_login button:hover
{
    background-color: #000;
}
.loginnew3_wrap .l_form .l_form_sub
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.loginnew3_wrap .l_form .l_form_sub h5
{
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center;
}
.loginnew3_wrap .l_form .l_form_sub h5::after
{
    content: '';
    width: 1px;
    height: 20px;
    display: inline-block;
    background-color: #e9e9e9;
    margin-left: 10px;
    margin-right: 5px;
}
.loginnew3_wrap .l_form .l_form_sub p
{
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #888 !important;
    line-height: 14px !important;
    word-break: auto-phrase !important;
}
.loginnew3_wrap .l_form .l_form_sub i
{
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    font-size: 18px;
}
.loginnew3_wrap .l_form .l_form_sub i::before
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loginnew3_wrap .l_form .l_form_sub img
{
    width: 22px;
    height: 22px;
    display: inline-block;
}
/* .loginnew3_wrap .l_form .l_form_sub a.kakao_login i
{
    color: #ffe93a;
} */
.loginnew3_wrap .l_form .l_form_sub a.naver_login i
{
    color: #30c856;
}

.loginnew3_wrap .l_form .l_form_subJoin
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.loginnew3_wrap .l_form .l_form_subJoin .forgotAccount span,
.loginnew3_wrap .l_form .l_form_subJoin .joinSite span
{
    color: #898989;
    font-size: 13px;
}
.loginnew3_wrap .l_form .l_form_subJoin .forgotAccount a,
.loginnew3_wrap .l_form .l_form_subJoin .joinSite a
{
    color: #262626;
    font-weight: 800;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 30px;
    margin-left: 8px;
    transition: all 0.2s linear;
}
.loginnew3_wrap .l_form .l_form_subJoin .forgotAccount a
{
    background-color: #e9f4ff;
}
.loginnew3_wrap .l_form .l_form_subJoin .forgotAccount a:hover
{
    background-color: #8bb4dd;
}
.loginnew3_wrap .l_form .l_form_subJoin .joinSite a
{
    background-color: #e7e8f6;
}
.loginnew3_wrap .l_form .l_form_subJoin .joinSite a:hover
{
    background-color: #acafdd;
}


/**
    *? 4. 버튼 공통 디자인 
*/

/* button */
.btn {
    display: inline-block;
    vertical-align: middle;
    min-width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    padding: 0 20px;
    background-color: #2c2e33;
    color: #fff;
    text-indent: 0;
    cursor: pointer;
    transition: all 0.2s linear;
    text-align: center;
    box-sizing: border-box;
    font-size: 16px;
}
.btn:hover { background-color: #56697f; }
.btn_square {
    min-width: unset;
    width: 40px;
    height: 40px;
    padding: 0px 15px;
    border-radius: 5px;
}
.btn_area {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
.btn_area.btn1 .btn { float: left;  width: 100%;     }
.btn_area.btn2 .btn { float: left;  width: 50%;      }
.btn_area.btn3 .btn { float: left;  width: 33.3%;    }
.btn_area.btn4 .btn { float: left;  width: 25%;      }
.btn_area.btn5 .btn { float: left;  width: 20%;      }
.btn_area.btn6 .btn { float: left;  width: 16.66%;   }
.btn_area.btn7 .btn { float: left;  width: 14.28%;   }
.btn_area.btn8 .btn { float: left;  width: 12.5%;    }
.btn_area_flex {
    display: flex;
    justify-content: center;
}
.btn.small {
    min-width: auto;
    height: 24px;
    padding: 0 10px; 
    line-height: 24px;
}
.btn.small span {
    display: inline-block;
    background-color: #2a5693;
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 14px;
}

.divPopup {box-sizing: content-box;}