@charset "UTF-8";

/********** useful **********/
.hide {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0); font-size: 1px;}
caption {position: static; overflow: hidden; width: 1px; height: 1px; margin: -1px 0 0 0; padding: 0; font-size: 1px; text-indent: -9999px;}
.clearfix::after {content: ""; display: block; width: 0; height: 0; font-size: 0; clear: both;}
.none {display: none !important;}
.on_iblock {display: inline-block !important;}
.on_block {display: block !important;}
.pc-view {display: block !important;}
.m-view {display: none !important;}
.fc_fff {color: #fff;}
.fc_333 {color: #333;}
.fc_666 {color: #666;}
.fc_red {color: #f00 !important;}
.fc_orange {color: #ff6600;}
.fc_blue {color: #0e438d;}
.fc_skyblue {color: #00B1FF;}
.fw_500 {font-weight: 500;} /* 주 사용 폰트의 font-face 에 맞춰 사용 */
.fw_700 {font-weight: 700;}
.ta_l {text-align: left !important;}
.ta_c {text-align: center !important;}
.ta_r {text-align: right !important;}
.dotdot {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mid_helper {display: inline-block; height: 100%; vertical-align: middle;}
.link_txt {color: #3557ad;}
.link_txt.break, .wdb_break {word-break: break-all;}
.link_txt.ico {padding-right: 15px; background: url('/publish2021/portal/images/board/nwin_ico.png') right 0 center/12px no-repeat;}
.link_txt:hover {text-decoration: underline;}
.focuson_red:focus {outline-color: red;}

.on_991 {display: none !important;}
.on_767 {display: none !important;}
.on_480 {display: none !important;}
.ib_991 {display: none !important;}
.ib_767 {display: none !important;}
.ib_480 {display: none !important;}
.i_991 {display: none !important;}
.i_767 {display: none !important;}
.i_480 {display: none !important;}

.mt_3 {margin-top: 3px;}
.mt_5 {margin-top: 5px;}
.mt_10 {margin-top: 10px;}
.mt_15 {margin-top: 15px;}
.mt_20 {margin-top: 20px;}
.mt_25 {margin-top: 25px;}
.mt_30 {margin-top: 30px;}
.mt_40 {margin-top: 40px;}
.mt_50 {margin-top: 50px;}

.mb_5 {margin-bottom: 5px;}
.mb_10 {margin-bottom: 10px;}
.mb_15 {margin-bottom: 15px;}
.mb_20 {margin-bottom: 20px;}
.mb_25 {margin-bottom: 25px;}
.mb_30 {margin-bottom: 30px;}
.mb_40 {margin-bottom: 40px;}
.mb_50 {margin-bottom: 50px;}

.mr_5 {margin-right: 5px;}
.mr_10 {margin-right: 10px;}
.mr_20 {margin-right: 20px;}
.ml_10 {margin-left: 10px;}
.ml_20 {margin-left: 20px;}
.ml_30 {margin-left: 30px;}

.fl_l {float: left;}
.fl_r {float: right;}
/********** // useful **********/

/********* common_layout *********/
html, body {height: 100%;}
/* 폰트 Noto Sans KR 에서 Pretendard로 변경 240221 */
body {line-height: 1.3; color: #111; font-family: 'Pretendard', 'sans-serif'; font-size: 16px; -webkit-text-size-adjust: none; /*text-size-adjust: none;*/}
.container {position: relative; z-index: 1; width: 1280px; margin: 0 auto;}

/* skip navi */
.skip_navi {position: absolute; z-index: 999999; width:100%; left: 0; top: 0; text-align: center;}
.skip_navi a {display: block; position: absolute; left: 0; top: -9999px; z-index: 1; width: 100%; height: 40px; line-height: 40px; background-color: #333; color: #fff; font-size: 20px; font-weight: 700;}
.skip_navi a:hover, .skip_navi a:focus {top: 0;}

/********** header **********/
body > .wrapper {position: relative; min-height: 100%; padding: 0; border-top: 0 none;}
.header {position: relative; z-index: 9998; min-width: 1280px; height:154px; padding-top: 53px; background-color: #fff; border-bottom: 1px solid #cbcccb; /* box-shadow: 0 4px 5px rgba(0,0,0,0.17); */} /* 2022-10-12 */
/* .logo_header {border-bottom: 1px solid #cbcccb;} 
.logo_header .container {height: 110px;} 2022-10-12 */
.head_logo {position: absolute; left: 0; top: 20px;}
.head_tit {position: absolute; left: 23%; top: 20%;}
.head_tit p {font-size: 18px; font-weight: 500; line-height: 1.5;}
.head_tit .bl {font-size: 21px; color: #373a5b;}
.head_tit .pl {font-size: 21px; color: #652c87; padding-left: 30px;}

.head_sch_area {position: relative; margin-top: 60px;  text-align: center;} /* 2022-11-09 */
.head_sch_area .input_box {position: relative; margin: 0 auto; width: 840px; height: 80px;} /* 2022-10-12 */
.head_sch_area .input_box input {width: 100%; height: 80px; padding: 0 100px 0 40px; border: 3px solid #945cb3; border-radius: 40px; font-size: 20px;} /* 2022-10-12 */
.head_sch_area .input_box button {position: absolute; right: 0; top: 0; width: 80px; height: 80px; background: #945cb3; /* border-right: 2px solid #7346a9; background: linear-gradient(90deg, rgba(115,70,169,1) 0%, rgba(148,77,172,1) 100%);*/ border-radius: 50%;} /* 2022-10-12 */
.head_sch_area .input_box button::after {content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin-left: -16px; margin-top: -16px; background: url('/portal/images/common/head_sch_ico.png') center no-repeat; transition: all 0.3s;} /* 2022-10-12 */
.head_sch_area .input_box input:focus {outline: none;}
.head_sch_area .input_box input:focus + button::after, .head_sch_area .input_box button:focus::after {animation: icoZoomOutInAni 0.3s;}
@keyframes icoZoomOutInAni {
    50% {transform: scale(0.85);}
    100% {transform: scale(1);}
}
.head_sch_area .popular_list {/* display: inline-block; */ display: none; overflow: hidden; min-width: 380px; margin: 8px auto 0; font-size: 14px;}
.head_sch_area .popular_list dt {float: left; margin-right: 12px;}
.head_sch_area .popular_list dd {float: left; margin-right: 8px;}
.head_sch_area .popular_list dd:last-child {margin-right: 0;}
.head_sch_area .popular_list dd a {color: #7c7c7c;}
.head_sch_area .popular_list dd a:hover, .head_sch_area .popular_list dd a:focus {text-decoration: underline;}
.head_patent {position: absolute; right: 0; top: 50%; height: 44px; padding-left: 38px; background: url('/portal/images/common/head_patent_mark.png') 0 center no-repeat; font-size: 17px; transform: translateY(-50%);}
.head_patent b {display: block; font-weight: 500;}

.gnb_header .container {z-index: 2;}
.gnb {display: flex; position: absolute; right: 0; top: 20px; width: 1022px; text-align: center;} /* 2022-10-12 */
.gnb > li {position: relative; flex: 1;} /* 2022-10-12 */
.gnb > li.pul > a {color: #FFF; background-color: #7346a9;}
.gnb > li.pul:hover > a {color: #7346a9; background-color: #FFF;}
/* .gnb > li:first-child {border-left: 1px solid #e0e1e0;} 2022-10-12 */
.gnb > li > a {display: block; position: relative; height: 80px; line-height: 60px; font-size: 24px; font-weight: 600; letter-spacing: -0.05em; color: #000;} /* 2022-10-12 */
.gnb > li > a::after {content: ''; display: block; position: absolute; left: 50%; bottom: 3px; margin-left: -10px; border-top: 9px solid #7346a9; border-left: 8px solid transparent; border-right: 8px solid transparent; opacity: 0; transition: all 0.3s;}
.gnb > li:hover > a {color: #7346a9;}
.gnb > li:hover > a::after {bottom: 0; opacity: 1;}
.gnb > li:first-child .gnb_depth2 {border-left: 1px solid #cbcccb;} /* 2022-10-12 */
.gnb > li:first-child .gnb_depth2 li {margin-left: 0;} /* 2022-10-12 */
.gnb_depth2 {display: none; position: absolute; left: 0; top: 80px; overflow: hidden; width: calc(100% + 1px); border-top: 1px solid #cbcccb; border-right: 1px solid #cbcccb;} /* 2022-10-12 */
.gnb_depth2 > li {margin-left: 1px;} /* 2022-10-12 */
.gnb_depth2 > li:first-child {padding-top: 15px;}
.gnb_depth2 > li:last-child {padding-bottom: 15px;}
.gnb_depth2 > li > a {display: block; padding: 12px 0px; font-weight: 500; word-break: keep-all;}
.gnb_depth2 > li:hover > a, .gnb_depth2 > li > a:focus {background-color: #f7f7f7;}
.gnb > li.fanfan > a {color: #652c87; font-weight: 700;}
.gnb > li.close {flex: none; width: 100px;} /* 2022-10-12 */
.gnb > li.close .gnb_depth2 {border-right-width: 0;}
.gnb > li.close .gnb_depth2 > li:first-child {padding-top: 0;}
.gnb_close_btn {width: 60px; padding-top: 45px; background: url('/portal/images/common/head_gnb_close_ico.png') center 12px/26px no-repeat; font-size: 14px; text-align: center;}
.gnb_depth3 {padding: 18px; background-color: #f7f7f7;}
.gnb_depth3 li {margin-bottom: 18px;}
.gnb_depth3 li:last-child {margin-bottom: 0;}
.gnb_depth3 li a {display: inline-block; position: relative; padding-left: 7px; color: #535353; font-size: 14px;}
.gnb_depth3 li a::before {content: ''; display: block; position: absolute; left: 0; top: 10px; width: 5px; height: 1px; background-color: #535353;}
.gnb_depth3 li a:hover, .gnb_depth3 li a:focus {text-decoration: underline;}
.gnb_open_btn {position: absolute; right: -7px; top: 20px; width: 60px; height: 60px;} /* 2022-10-12 */
.gnb_open_btn .bar {display: block; position: absolute; left: 50%; top: 50%; width: 32px; height: 3px; margin-left: -16px; background-color: #000;} /* 2022-10-12 */ 
.gnb_open_btn .bar.top {margin-top: -14px;}
.gnb_open_btn .bar.mid {margin-top: -2px;}
.gnb_open_btn .bar.btm {margin-top: 10px;}
.gnb_bg {display: none; position: absolute; left: 0; top: 154px; z-index: 1; width: 100%; min-width: 1280px; height: 500px; background-color: #e5e5e5;} /* 2022-10-12 */ 
.gnb_bg::after {content: ''; display: block; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 4px; background-color: #00a69c;}
.gnb_bg .container {display: block; height: 100%; background-color: #fff; border-left: 1px solid #cbcccb; border-right: 1px solid #cbcccb;}
.gnb_dim {display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9997; background-color: rgba(0,0,0,0.8);}

.util_header {position: absolute; left: 0; top: 0; width: 100%; background-color: #eee; border-top: 7px solid #7346a9; border-bottom: 1px solid #bfbfbf;}
.util_header .container {padding-right: 5px;}
.head_fam_list {float: left;}
.head_fam_list li {position: relative; float: left; z-index: 1; border-right: 1px solid #bfbfbf;}
.head_fam_list li:first-child {border-left: 1px solid #bfbfbf;}
.head_fam_list li a {display: block; width: 127px; height: 45px; line-height: 45px; text-align: center; transition: all 0.3s;}
.head_fam_list li a .ico {display: inline-block; padding-left: 22px; background: url('/portal/images/common/head_hub_ico.png') 0 center no-repeat;}
.head_fam_list li.hub {border-right-width: 0;}
.head_fam_list li.hub a {position: relative; overflow: hidden; background-color: #7346a9; color: #fff; font-weight: 400;}
.head_fam_list li.hub a::after {content: ''; display: block; position: absolute; left: -20px; top: 0; width: 2px; height: 100%; background-color: rgba(255,255,255,0.15); box-shadow: 0 0 10px #fff; transform: skewX(-10deg);}
.head_fam_list li.active a {background-color: #fff;}
.head_fam_list li.active a:after {content: ''; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background-color: #fff;}
.head_fam_list li:not(.hub) a:hover {background-color: #fff;}
.head_fam_list li.hub a:hover::after {animation: ltrAni 0.4s;}
.head_util_menu {float: right; margin-top: 13px;}
.head_util_menu li {position: relative; float: left; margin-right: 34px;}
/* .head_util_menu li::after {content: ''; display: block; position: absolute; right: -18px; top: 50%; width: 2px; height: 18px; margin-top: -9px; background-color: #979797;} 2022-10-12 */
.head_util_menu li:last-child {margin-right: 0;}
.head_util_menu li:last-child::after {display: none;}
.head_util_menu li a:hover, .head_util_menu li a:focus {text-decoration: underline;}

@keyframes ltrAni {
    100% {left: 100%;}
}

.wrapper > .contents {width: auto; margin: 0; padding-bottom: 100px; background-color: transparent; overflow: visible;}

/********** footer **********/
.footer {position: absolute; left: 0; bottom: 0; width: 100%; min-width: 1280px; background-color: #404040;}
.footer .container {height: 210px; padding: 35px 0;}
.footer .logo_box {float: left; width: 200px; padding-left: 15px; text-align: right;}
.footer .logo_box img:nth-child(2) {margin-top: 17px;}
.footer .con_box {position: relative; float: right; width: calc(100% - 235px); padding-left: 30px; border-left: 1px solid rgba(255,255,255,0.17);}
.foot_util_menu {overflow: hidden; margin-bottom: 20px;}
.foot_util_menu li {position: relative; float: left; margin-right: 22px;}
.foot_util_menu li::after {content: ''; display: block; position: absolute; right: -12px; top: 50%; width: 2px; height: 13px; margin-top: -6px; background-color: #fff;}
.foot_util_menu li:last-child {margin-right: 0;}
.foot_util_menu li:last-child::after {display: none;}
.foot_util_menu li a {color: #fff; font-weight: 300;}
.foot_util_menu li a:hover, .foot_util_menu li a:focus {text-decoration: underline;}
.foot_util_menu li.em a {color: #0bbbef;}
.footer .info_list {overflow: hidden; margin-bottom: 15px;}
.footer .info_list dt {float: left; margin-right: 10px; color: #fff;}
.footer .info_list dd {float: left; margin-right: 15px; color: #b5b5b5;}
.footer .info_list .em {margin-top: 10px; color: #fff; font-size: 18px;}
.footer .info_list dt.em { clear: both;}
.footer .copyright {color: #b5b5b5; font-size: 14px; font-weight: 300;}
.foot_fam_list_box {position: absolute; right: 0; top: -8px;}
.foot_fam_list_btn {position: relative; z-index: 1; width: 205px; height: 38px; padding-left: 15px; background-color: #626262; border: 1px solid #959595; color: #fff; font-size: 15px; font-weight: 300; text-align: left;}
.foot_fam_list_btn::after {content: ''; display: block; position: absolute; right: 13px; top: 50%; width: 24px; height: 9px; margin-top: -4px; background: url('/portal/images/common/foot_fam_arr_ico.png') center no-repeat;}
.foot_fam_list_btn.active::after {transform: rotate(180deg);}
.foot_fam_list {display: none; position: absolute; left: 0; bottom: 38px; overflow: auto; width: 100%; max-height: 250px; padding: 6px 0; background-color: #626262; box-shadow: 0px 0px 5px #000;}
.foot_fam_list li a {display: block; padding: 8px 15px; color: #fff; font-size: 14px; font-weight: 300;}
.foot_fam_list li a:hover, .foot_fam_list li a:focus {background-color: #555;}
.foot_sns_list {position: absolute; right: 0; top: 95px; font-size: 0;}
.foot_sns_list li {display: inline-block; margin-right: 10px; vertical-align: middle;}
.foot_sns_list li:last-child {margin-right: 0;}
/* .foot_award_list {position: absolute; right: 0; bottom: 0;}
.foot_award_list li {float: left; margin-right: 7px;}
.foot_award_list li:last-child {margin-right: 0;} */

.common_layer_dim {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; overflow: auto; min-width: 1280px; padding: 40px 0; background-color: rgba(0,0,0,0.6); font-size: 0; text-align: center;}
.common_layer_dim::after {content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.common_layer {display: inline-block; position: relative; overflow: hidden; width: 1280px; background-color: #fff; border-radius: 30px; font-size: 16px; text-align: left; vertical-align: middle;}
.common_layer_tit {height: 70px; line-height: 70px; padding: 0 20px; background-color: #eee; border-bottom: 1px solid #bfbfbf; font-size: 25px; font-weight: 500;}
.common_layer_tit b {color: #7346a9; font-weight: 700;}
.common_layer .inner {padding: 20px 20px 40px;}
.common_layer .inner > .tit {margin-bottom: 13px; color: #7346a9; font-size: 22px; font-weight: 700;}
.common_layer_close {position: absolute; right: 20px; top: 20px; width: 30px; height: 30px; background: url('/portal/images/common/layer_close_ico.png') center no-repeat; font-size: 0;}
.common_layer_close:hover {animation: icoZoomOutInAni 0.3s;}

.common_layer.small {width: 750px;}

.loading_layer {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(255,255,255,0.3) url('/portal/images/Loading_n.gif') center no-repeat;}

.blinking{ 
-webkit-animation:blink 0.75s ease-in-out infinite alternate; 
-moz-animation:blink 0.75s ease-in-out infinite alternate; 
animation:blink 0.75s ease-in-out infinite alternate; 
} 

@-webkit-keyframes blink{ 
0% {opacity:0.3;} 
100% {opacity:1;} 
} 

@-moz-keyframes blink{ 
0% {opacity:0.3;} 
100% {opacity:1;} 
} 

@keyframes blink{ 
0% {opacity:0.3;} 
100% {opacity:1;} 
}
.chatwrap { width: 400px; height: 500px; transform: translateX(-45%); z-index: 9999; }
.chatwrap iframe { height: 50vh !important; }
.quick { z-index: 9999; }
.quick { position: fixed; left: 50%; margin-left:660px; bottom: 20px; z-index: 20; transition: bottom 0.7s ease-out;}
.quick.ft { bottom: 220px; }
.quick li { width: 48px; height: 48px; position: relative; }
.quick li a { width: 100%; height: 100%; display: block; z-index: 25; }
.quick li+li { margin-top: 5px; }
.quick .linktext { display: flex; justify-content: center; flex-direction: column; white-space:nowrap; font-size: 13px; font-weight: bold; }
.quick .q_csc a {background: url('/portal/images/common/quick-csc.png') center no-repeat;background-size: 100%;}
.quick .q_kakao a.link {background: url('/portal/images/common/quick-kakao.png') center no-repeat;background-size: 100%;}
.quick .q_chatbot a.link {background: url('/portal/images/common/quick-chatbot.png') center no-repeat;background-size: 100%;}
/*ccm-민원신청 추가*/
.quick .q_claim a.link {background: url('/portal/images/common/claim_icon.png') center center no-repeat #b8b8ff; background-size: 50% 50%; border-radius: 48px;}
.quick .q_top { display: flex; align-items: center; justify-content: center; border-radius: 48px; background: #f9f9f9; border: 1px solid #ddd; font-size: 14px; letter-spacing: 0.1px; font-weight: 500; cursor: pointer; }
.quick .toggle a { position: relative; }
.quick .toggle p { width:180px; height: 48px; padding-left: 55px; border: 1px solid #ddd; border-radius: 48px; z-index: 21; position: absolute; top: 0;left: 0; display: flex; justify-content: center; flex-direction: column; /*overflow: hidden;*/ /*transition: all .5s ease-out;*/ background: #fff;  }
/*.quick .toggle.on p { width: 180px; }*/
.quick .toggle p span { line-height: 1; white-space:nowrap ; }
.quick .toggle p .text1 { font-size: 13px; font-weight: bold; margin-bottom: 2px; }
.quick .toggle p .text2 { font-size: 12px; }