@charset "utf-8";
/* CSS Document */
/* com2zoa design kjh, publishing kjh 2026.01.30 */
/* ※아래 적용된 스타일은 기본레이아웃 구성이므로 각 학교에 맞게 전반적 수정해야함 */

/* Common */
.clear_fix::after{content: ''; display: block; clear: both}
.qmu_wrap .qmu_popup {display: none}

/* Layout */
#sub_left {display: none}
#subpage {min-height:350px; line-height:150%; margin:0 10px 50px 20px}

/* Subtop */
#subtop {position:relative}
#subtop h3 {position:relative}
#subtop h3 span {position:relative; display:block; color:#333; font-size:19px; font-weight:600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background:#fff}

/* Guide */
#sub_guide .btn_home {display: none}
#sub_guide .submn {display: none}
#sub_guide .guide_wrap {position: relative}

/* subvisual */
.subvisual .visual_wrap {position: relative; width: 100%; margin: 0 auto}
.subvisual .visual_item {width:auto; height:189px}
.subvisual .visual_item > a {height:185px}
.subvisual .item1 {background:url(../images/sub/subv_m01.jpg) no-repeat 50% 0}
.subvisual .item2 {background:url(../images/sub/subv_m02.jpg) no-repeat 50% 0}

/* 서브 퀵 */
#quickmenu {display: block; position: absolute; top:194px; right:10px; z-index:1}
#quickmenu.header_fixed {top:600px}
#quickmenu .quick_wrap {min-height:267px; padding:0 10px; background:#fff; border-radius:15px; box-shadow:0 2px 10px rgba(0,0,0,0.1)}
#quickmenu .sub_qtit {padding:10px 0 2px; text-align: center; color:#fff}
#quickmenu .sub_qtit span {color:#a8deff}
#quickmenu .quick_box, #quickmenu .quick_box .qbox_area {display:none}
#quickmenu .quick_box .qbtit {padding:7px 0 11px; text-align: center}
#quickmenu .quick_box.qb01 .qbtit {background:#aa9cf8}
.line_color02 #quickmenu .quick_box.qb01 .qbtit {background:#7bc9ff}
#quickmenu .quick_box.qb02 .qbtit {background:#5974a0}
#quickmenu .quick_box.qb01 .qbox_area {border-color:#aa9cf8}
.line_color02 #quickmenu .quick_box.qb01 .qbox_area {border-color:#7bc9ff}
#quickmenu .quick_box.qb02 .qbox_area {border-color:#5974a0}
#quickmenu .quick_list {display: flex; flex-wrap:wrap; padding:10px}
#quickmenu .quick_list li {width:100%}
#quickmenu .quick_list li a {display:flex; justify-content: space-between; padding:4px; background:#e6e6e6; border-radius:10px; border:1px solid #e6e6e6; box-sizing:border-box; transition:.3s}
#quickmenu .quick_btns .qkbtn span {font-size:0}

/*TOP버튼*/
#quickmenu .btn_top a {display: block; font-size:0; background:url(../images/sub/btn_top_pc.png) no-repeat 50% 0}
/*사용자 버튼*/
#quickmenu .qkbtn {display: block; justify-content: space-between; border-radius:10px; }  
#quickmenu .quick_btns .qkbtn01{background:#aa9cf8 url(../images/sub/btn_subquick_tit01.png) no-repeat 50% 80%}
.line_color02 #quickmenu .quick_btns .qkbtn01 {background:#7bc9ff  url(../images/sub/btn_subquick_tit01.png) no-repeat 50% 80%}
#quickmenu .quick_btns .qkbtn02{background:#5974a0  url(../images/sub/btn_subquick_tit02.png) no-repeat 50% 80%} 
.quick_box ul {display:flex; justify-content: space-between; padding:10px; gap:8px}
.quick_box ul li a .qico {display:block; width:42px; height:42px; margin:5px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; background-size:28px auto;border-radius:50%; transition:.3s}
.quick_box ul li a .qtit {display:block; width:calc(100% - 88px); text-align:right; margin:10px 0; line-height:120%}
.quick_box ul li a .qbarogo {display: block; width:20px; padding:6px; background:#fff url(../images/main/btn_userquick_arr.png) no-repeat 50% 50%; border-radius:5px; text-align: left; transition:.3s; font-size:0; box-sizing: border-box}

.quick_box ul li.user0101 .qico {background-image: url(../images/main/img_uquick0101.png)}
.quick_box ul li.user0102 .qico {background-image: url(../images/main/img_uquick0102.png)}
.quick_box ul li.user0103 .qico {background-image: url(../images/main/img_uquick0103.png)}
.quick_box ul li.user0101:hover .qico {background-image: url(../images/main/img_uquick0101_on.png)}
.quick_box ul li.user0102:hover .qico {background-image: url(../images/main/img_uquick0102_on.png)}
.quick_box ul li.user0103:hover .qico {background-image: url(../images/main/img_uquick0103_on.png)}
.quick_box ul li.user0201 .qico {background-image: url(../images/main/img_uquick0201.png)}
.quick_box ul li.user0202 .qico {background-image: url(../images/main/img_uquick0202.png)}
.quick_box ul li.user0203 .qico {background-image: url(../images/main/img_uquick0203.png)}
.quick_box ul li.user0201:hover .qico {background-image: url(../images/main/img_uquick0201_on.png)}
.quick_box ul li.user0202:hover .qico {background-image: url(../images/main/img_uquick0202_on.png)}
.quick_box ul li.user0203:hover .qico {background-image: url(../images/main/img_uquick0203_on.png)}

#quickmenu .quick_list li:hover a {background-color:#fff}
#quickmenu .qb01 .quick_list li:hover a {border:1px solid #aa9cf8}
#quickmenu .qb02 .quick_list li:hover a {border:1px solid #5974a0}

.line_color02 #quickmenu .qb01 .quick_list li:hover a {border:1px solid #7bc9ff}

/* hover */
.quick_box ul li:hover a .qbarogo {background:#5974a0 url(../images/main/btn_userquick_onarr.png) no-repeat 50% 50%; color:#fff}
.quick_box ul li:hover a .qico {background:#5974a0; background-size:28px auto; background-repeat:no-repeat; background-position:50% 50%}
.qb01 ul li:hover a .qico {background-color:#9080e6}
.line_color02 .qb01 ul li:hover a .qico {background-color:#69b9f1}
.quick_box ul li:hover a {background:#fff; border-color:#5974a0; box-shadow:1px 2px 8px rgba(0,0,0,0.2)}
.qb01 ul li:hover a {background:#fff; border-color:#9080e6}
.line_color02 .qb01 ul li:hover a {background:#fff; border-color:#69b9f1}
.qb01 ul li:hover a .qbarogo {background-color:#9080e6}
.line_color02 .qb01 ul li:hover a .qbarogo {background-color:#69b9f1}

.btn_top {margin-top:10px; border-top:2px solid #e8e8e8; padding:10px}
.btn_top a {position:relative; display:block; width:100%; min-height:16px; margin:0 auto; text-align:center; box-sizing: border-box; border-right: 0}
.btn_top a span {display:block}


/********************************************* SUB content **********************************************/
/* content Common */
h4.sub_tit4 {line-height:140%; padding:1px 0 1px 28px; margin:6px 0 10px; background:url(../images/sub/subtit4.png) no-repeat left top 2px; font-size:1.2em; font-weight:600; color:#000}
h5.sub_tit5 {line-height:140%; padding:0 0 0 28px; margin:10px 0; background:url(../images/sub/subtit5.png) no-repeat left 5px top 4px; font-size:1.133em; font-weight:600; color:#6a6a6a}

/* -------------------공통스타일 -------------------*/

/*공통타이틀(색상등의 세부설정은 해당항목 하위에 설정)*/

/* -------------------// 공통스타일 -------------------*/

/* -----------------컨텐츠 스타일 시작 -----------------*/





    
/********* MOBILE LAYOUT *********/
@media only screen and (max-width:1024px) {
.foot_wrap {padding-bottom:40px}
    
/* Layout */
#subright{position: relative}
#subright.nomargin {margin-top:0 !important}
#subtop h3 {margin:0 10px; text-align: center; border-bottom:1px solid #cfcfcf}
#subtop h3 span {display:block; height:52px; padding:18px 0 14px; font-size:1.308em; font-weight:600; box-sizing:border-box}
#subtop h3 span:after {content:""; display: block; position: absolute; top:0; left:50%; margin-left:-16px; width:32px; height:1px; background:#fff}
#subpage {margin:15px 10px 50px}

/* Visual*/
.subv_slogan {display:none}
.subvisual .visual_wrap .ctrl_dots {display: none}
.subvisual .visual_wrap .btn_visual {display: none}
    
.visual_quick {display:none}

/* 서브 컨텐츠 영역 */
.subconbox {position:relative; margin:0; background:#fff}
    
/* MB guide */
#sub_guide {background:#dfdffb; padding:8px 8px 0; transition:2s}
.line_color02 #sub_guide {background:#c6ebed}    
#sub_guide .navi_area {padding:7px 7px 0 36px; background:#fff; border-radius:10px 10px 0 0; box-shadow:0 -2px 2px 0 rgba(0,0,0,0.05)}
#sub_guide .navi_area > ul  {background:#e8e8e8; border-radius:5px}
#sub_guide .navi_area > ul > li.nav_home {display:none}
#sub_guide .navi_area .btn_home {display: block}
#sub_guide .navi_area .btn_home a {display: block; width:35px; height:33px; position:absolute; top:5px; left:0; text-indent:-99999px; background:url(../images/sub/btn_home_m.png) no-repeat 50% 50%; border:none; border-radius:10px}
#sub_guide .navi_area .btn_home span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
#sub_guide .navi_area .btn_home img {display: none}
#sub_guide .navi_area > ul > li {position: relative; float: left; width:33.3%; box-sizing: border-box}
#sub_guide .navi_area > ul > li > a {display: block; height:33px; line-height:33px; padding:0 26px 0 8px; font-weight:400;  background:url(../images/sub/bg_submn_arr.png) no-repeat right 5px center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing: border-box; border-right:2px solid #fff}
#sub_guide .navi_area > ul > li:last-child a {border-right:none}
    
#sub_guide .submn {overflow: hidden; position: absolute; right: 0; top: 100%; width:calc(100%); padding:2px; margin: 0 auto; background:#5974a0; z-index:99; box-sizing: border-box; box-shadow:0 2px 5px rgba(0,0,0,0.1); border-radius:7px}
#sub_guide .submn ul {padding:3px 4px; background:#fff; border-radius:5px} 
#sub_guide .submn li {border-bottom: 1px solid #dadbdd; text-align: center}
#sub_guide .submn li:last-child {border:none}
#sub_guide .submn li a {margin:3px 0; padding:5px 5px 3px; display:block; line-height: 130%; color: #404040; font-weight: 500; border-radius:3px; word-break:keep-all}
#sub_guide .submn li a:hover {background:#e9e9e9}
    
/* 퀵메뉴 */
#quickmenu {position: fixed; left:10px; top:inherit !important; bottom: 0; height:40px; width:calc(100% - 20px); min-width:300px; z-index:1; box-sizing: border-box; border-radius:10px 10px 0 0; background:#fff; box-shadow:1px 6px 8px rgba(0,0,0,0.2)}
#quickmenu .sub_qtit {padding:12px 0 2px}
#quickmenu .qmubox {width:calc(100% - 98px); padding:0 40px 0 0}
#quickmenu .quick_btns {display: flex; justify-content: space-between}
#quickmenu .quick_btns li {width:100%} 
#quickmenu .btn_top {position: absolute; top:6px; right:12px; border:0; margin:0; padding:0}
#quickmenu .btn_top a {width:30px; height:30px; background: url(../images/sub/btn_top_m.png) no-repeat 50% 50%}
    
#quickmenu .quick_wrap {min-height:inherit; display:flex; justify-content: space-between; box-shadow:1px -3px 5px rgba(0,0,0,0.1)}
#quickmenu .quick_box {overflow: hidden; width:100%; position: absolute; top:-280px; left:0}
.qbox_area {overflow: hidden; margin-right:15px; width:100%; height:270px; border-radius:15px; background: #fff; border:2px solid #ccc;box-sizing:border-box}
/*#quickmenu .quick_btns .btn:hover .quick_box{display: block}*/
#quickmenu .quick_btns {display: flex}
#quickmenu .quick_btns li {width:100%; text-align: center}
#quickmenu .quick_btns li .qkbtn {position: relative; height:30px; line-height: 30px; padding: 0 4px; margin:5px 3px; border-radius:10px 10px 0 0; font-size:14px; box-sizing: border-box; box-shadow:0 -2px 2px rgba(0, 0, 0, 0.1); border-radius:7px; background-size:auto 22px !important}
#quickmenu .quick_list li span.qico img{width: 40px}
#quickmenu  .quick_btns li.on .quick_box, #quickmenu  .quick_btns li.on .quick_box .qbox_area {display: block}
    
#quickmenu .quick_btns .qkbtn01 {background:#aa9cf8 url(../images/sub/img_userquick_tit01.png) no-repeat 50% 50%}
.line_color02 #quickmenu .quick_btns .qkbtn01 {background:#7bc9ff url(../images/sub/img_userquick_tit01.png) no-repeat 50% 50%}
#quickmenu .quick_btns .qkbtn02 {background:#5974a0 url(../images/sub/img_userquick_tit02.png) no-repeat 50% 50%}
#quickmenu .quick_btns li.on .qkbtn:after {content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 10px solid #5974a0}
#quickmenu .quick_btns li.on .qkbtn01:after {border-bottom-color:#aa9cf8}
.line_color02 #quickmenu .quick_btns li.on .qkbtn01:after {border-bottom-color:#7bc9ff}
    

/********************************************* SUB content **********************************************/
/*MB에서 필요 없을때 선언*/
.mb_none{display: none}
    
/* 타이틀 */
h4.sub_tit4 {font-size:1.214em; background-size:20px auto; padding:0 0 0 28px; margin:4px 0 7px; font-weight:600}
h5.sub_tit5 {font-size:1.143em; padding:0 0 0 27px; margin:7px 0; font-weight:400; background-size:16px auto}
    
/* -------------------공통스타일 -------------------*/

/* 공통 표 스타일 조정 */
.cz_table th, .cz_table td {word-break: normal}
    
/* ----------------컨텐츠 스타일 시작 ----------------*/


}


/* PC LAYOUT */
@media only screen and (min-width:1025px) {
#wrap {overflow: hidden}
    
/* Layout */
#subcontainer{position: relative}
.subconwrap{position: relative}
/*.subconbox {position: relative; max-width:1460px; margin:-55px auto 0; background:#fff; border-radius:20px; box-sizing: border-box;  z-index:1}*/
.sub_conwrap {display:flex; max-width:1400px; margin:0 auto; box-sizing: border-box}
#sub_left {position: relative; display: block; width:268px; margin-bottom:10px; margin-top:-82px}
#subright {position: relative; width:calc(100% - 298px); margin-left:30px; box-sizing: border-box; background:#fff; box-sizing: border-box}
#subpage {margin:0 0 50px; min-height:400px}
    
/* subvisual */
.subvisual .visual_item {height:226px}
.subvisual .visual_item > a {height:226px}
.subvisual .item1 {background:url(../images/sub/subv_pc01.jpg) no-repeat 50% 0}
.subvisual .item2 {background:url(../images/sub/subv_pc02.jpg) no-repeat 50% 0}
    
/* Subleft */
.left_tit {position: relative; max-width:268px; padding:0}
.left_tit h2 {max-width:268px; height:82px; padding:36px 0 0; font-size:22px; font-weight:600; background:#5974a0; color:#fff; text-align: center; box-sizing: border-box; border-radius:15px 15px 0 0}
.left_tit h2 span {padding-top:20px; background:url(../images/sub/bg_subleft_top.png) no-repeat 50% 0}
.left_tit .engtit {padding:10px; background:#506890; color:rgba(255,255,255,0.25); text-align: center; font-weight:600}
.leftmn {overflow:hidden; position: relative; max-width:268px; border:2px solid #5974a0; box-sizing: border-box; border-radius:0 0 15px 15px; background:#fff; border-top:0}
.leftmn > ul > li {margin:8px}
.leftmn > ul > li:first-child {border-top:0}
.leftmn > ul > li > a {overflow:hidden; position:relative; display:block; min-height:32px; font-size:1.231em; font-weight:500; padding:16px 30px 18px 13px; margin:0; width:auto;  color:#000; box-sizing: border-box; background:#e8e8e8; border-radius:10px; word-break:keep-all; transition:.3s}
.leftmn >  ul > li > a:hover, .leftmn .leftmenuover > a {color:#fff; font-weight:600; text-decoration:none; background:#aa9cf8}
.line_color02 .leftmn >  ul > li > a:hover, .line_color02 .leftmn .leftmenuover > a {background:#7bc9ff}
.leftmn > ul > li > a:after {content:""; display:block; position: absolute; top:0; right:0; width:30px; height:100%; background:rgba(0,0,0,0.1) url(../images/sub/blt_submn_arr.png) no-repeat 50% 50%}

/*MN third*/
.leftmn .third {position: relative; box-sizing: border-box; padding:8px 0 0}
.leftmn .third li {border-top:1px solid #d0d0d0}
.leftmn .third li:first-child {border-top:none}
.leftmn .third li a {display:block; position:relative;  margin-top:4px; padding:10px 0 10px 20px; font-weight:500; color:#787878; font-size:1.077em ; word-break:keep-all}
.leftmn .third li a:before {content:""; display: block; position: absolute; top:13px; left:0; width:7px; height:7px; background:#bababa; border-radius:50%}
.leftmn .third li a:after {content:""; display: block; position: absolute; top:13px; left:5px; width:7px; height:7px; background:#8d8d8d; border-radius:50%}
.leftmn .third li:first-child a {margin-top:0}
.leftmn .third li.third_on a , .leftmn .third li:hover a {color:#191919; font-weight:600}
.leftmn .third li.third_on a:before, .leftmn .third li:hover a:before {background:#aa9cf8}
.line_color02 .leftmn .third li.third_on a:before, .line_color02 .leftmn .third li:hover a:before {background:#7bc9ff}
.leftmn .third li.third_on a:after, .leftmn .third li:hover a:after {background:#5974a0}

/*Subtop TIT */
#subtop {margin-bottom:15px}
#subtop h3 {padding:24px 300px 24px 5px; border-bottom:1px solid #d5d5d5}
.subtit span {display:inline-block}

/* PC guide*/
#sub_guide {position:absolute; top:22px; right:0; z-index:1}
#sub_guide .navi_area {height:22px; line-height:22px}
#sub_guide .navi_area ul {text-align:left}
#sub_guide .navi_area li {display: inline-block; width:auto !important}
#sub_guide .navi_area li a { display: block;padding:0 5px 0 12px; line-height:20px; background: url(../images/sub/navi_arr_pc.gif) 0 50% no-repeat; font-size:1em}
#sub_guide .navi_area .nav_home img {vertical-align: middle}
#sub_guide .navi_area li:first-child a {background: none; padding: 0 5px 0 0}
#sub_guide .navi_area li:first-child a img {margin-top:-1px}
#sub_guide .navi_area li .cthird {color:#000; font-weight:500}

/* subtop_btn */
.subtop_btn {display:flex; justify-content: space-between; align-items:center; overflow:hidden; position:relative; width:100%; padding:14px 0; box-sizing: border-box; border-bottom:2px solid #d0d0d0}
.subtop_btn dl.font_wrap {position:relative; display:flex; justify-content:flex-start; align-items:center; width:100%; gap:4px}
.subtop_btn dl.font_wrap > dt {width:88px; font-weight:700; font-size:14px; color:#adadad}
.subtop_btn dl.font_wrap > dt span {display:inline-block; padding:2px 0 2px 25px; background:url(../images/sub/blt_fontsize_tit.png) no-repeat 0 50%; color:#767676}
.subtop_btn dl.font_wrap > dd {width:44px}
.subtop_btn dl.font_wrap > dd a {display: block; width:44px; height:26px; line-height:22px; text-align: center; box-sizing: border-box; transition: all .3s; text-align: center; border-radius:50px; border:1px solid #d0d0d0}
.subtop_btn dl.font_wrap > dd a img {vertical-align: middle}
.subtop_btn dl.font_wrap > dd a:hover{transition:.3s}
.subtop_btn .btn_print {position: relative}
.subtop_btn .btn_print a {display:block}
.subtop_btn .btn_print a img {vertical-align: middle}
    
/* quickmenu */
#quickmenu {z-index: 100}
/*메뉴버튼*/
#quickmenu .qmubox{position: relative} 
#quickmenu .quick_btns .qkbtn {overflow: hidden; position: relative; width:75px; height:88px; text-align: center; box-sizing: border-box; margin-top:8px} 
/*
#quickmenu .quick_btns .qkbtn01{background-image:url(../images/sub/btn_qmu01.png); border-radius:30px 0 0 10px; margin-bottom: 8px}
#quickmenu .quick_btns .qkbtn02{background-image:url(../images/sub/btn_qmu02.png); border-radius:10px 0 0 30px}
*/
/*메뉴목록*/
#quickmenu .quick_box {position: absolute; right: calc(100% + 1px); top:-35px; padding-right:15px}
.qbox_area {overflow: hidden; width: 230px; height:270px; border-radius:15px; background: #fff; border:2px solid #ccc;box-sizing:border-box}
#quickmenu .quick_btns .btn:hover .quick_box, #quickmenu .quick_btns .btn:hover .quick_box .qbox_area{display: block}

/*TOP버튼
#quickmenu .btn_top a{width: 97px; height: 38px; padding:6px 10px; margin-top: 9px; border-radius:50px 0 0 50px; font-size: 15px; color:#fff; background: #4d5d68; box-sizing: border-box}
#quickmenu .btn_top a span{display: block; padding: 5px 0; background:url(../images/sub/btn_qmutop.png) no-repeat center right}*/



/******************************서브컨텐츠 영역**************************************/
/* 컨텐츠 공통 */

/* -----------------컨텐츠 스타일 시작 -----------------*/
    

}

/**** LOWSET FIX ****/
/* 프린트관련 */
.printBG #subright{margin-top:0}
.printBG #subright .tabnavi01, .printBG #subright .tabnavi02{display:none}
.printBG .subconbox {margin:0}
.printBG #subtop h3 {padding:10px 0 0}
.printBG #subtop h3 span {color:#000}

@media print {
.printBG #subright{-webkit-print-color-adjust:exact}
.printBG .subtop_btn {display:none}
}

/*======================================= 탭 :공통 ========================================= */
div[class^="tabnavi0"] { position:relative; z-index:0; margin-bottom:15px}
div[class^="tabnavi0"] > .select {display:none}
div[class^="tabnavi0"] a { position:relative; display:block; line-height:1.4; word-break: keep-all}
div[class^="tabnavi0"] a, div[class^="tabnavi0"] ::before {transition:all 0.3s ease}
div[class^="tabnavi0"] a.select:before{content:""; position:absolute; right:5px; top:50%; width:24px; height:24px; margin-top:-12px}

/* 탭 :1차 탭 */
.tabnavi01 li {position:relative}
.tabnavi01 li a { padding:0 10px ; font-size:1em; z-index:2}
.tabnavi01 li a:before,
.tabnavi01 li:not(.on):focus,
.tabnavi01 li:not(.on):hover {transition:.3s ease-in-out}
.tabnavi01 li:not(.on):focus a ,
.tabnavi01 li:not(.on):hover a {color:#fff}
/* 탭 :1차 : background none */
.tabnavi01 li:nth-child(4n + 1):before{display:none}

/* 탭 : 반응형 */
.react_tab {display:block}
.tabnavi01 ul {display: table; width: 100%; table-layout: fixed}
.tabnavi01 ul li { display:inline-block; background:#fff; color: #767676; vertical-align: middle; box-sizing: border-box;  margin-left:7px; border:2px solid #dfdfdf; border-radius:5px 22px 22px 5px}
.tabnavi01 ul a { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; font-size:1.154em; padding:11px 54px 11px 12px; box-sizing: border-box; font-weight:500}
.tabnavi01 ul li:first-child  {margin-left:0}
.tabnavi01 ul li a:after {content:""; display:block; position: absolute; top:50%; right:6px; width:22px; height:22px; line-height:22px; margin-top:-11px; background:#dfdfdf url(../images/sub/btn_tabnavi01.png) no-repeat 50% 50%; border-radius:50%; transition: .3s}
.tabnavi01 ul li.on, .tabnavi01 ul li:hover {background:#ff6946; border-color:#ff6947; color:#fff}
.tabnavi01 ul li.on a, .tabnavi01 ul li:hover a {color:#fff}
.tabnavi01 ul li.on a:after, .tabnavi01 ul li:hover a:after {background-color:#fff}

/* 탭 여러개 있을 경우 */
.tabnavi02 ul {padding:12px 25px; border: 1px solid #cecece; background:#fff; border-radius:5px}
.tabnavi02 ul:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
.tabnavi02 ul li { float: left; width: 20%; padding:5px 0; font-size:14px}
.tabnavi02 ul li a {display: block; height: 22px; padding-left:20px; background: url(../images/sub/blt_tabnavi02_off.png) left 2px no-repeat ; font-weight:400; color: #4a4a4a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabnavi02 ul li.on a, .tabnavi02 ul li:hover a {background: url(../images/sub/blt_tabnavi02_on.png) left 2px no-repeat ; color:#1d1d1d; font-weight:600}

@media screen and (max-width:1024px){     
/* 탭 :공통 */
div[class^="tabnavi0"] {margin:10px}
.react_tab[class^="tabnavi0"] > .select{display:block}
.react_tab[class^="tabnavi0"] ul { display:none; text-align:left; margin-bottom:0; border:1px solid #ddd; border-top:0; box-sizing: border-box; border-radius:5px}
.react_tab[class^="tabnavi0"] li { display:block; width:100% !important; border:0}
.react_tab[class^="tabnavi0"] li a {border-top:1px solid #ddd; font-size:13px}
.react_tab[class^="tabnavi0"] li a:before{display:none}
.react_tab[class^="tabnavi0"] ul li:first-child a {border-top:0}

/* 탭 :1차 탭 */
.tabnavi01 > a.select {position:relative; font-size:1em; color:#000; padding:6px 30px 6px 10px; background:#fff; border:2px solid #ff6946; font-weight:500; border-radius:5px}
.tabnavi01 ul{ overflow:hidden; margin-top:0; padding:0; background:#eee; border:0; border-radius:0}
.tabnavi01 ul li + li:before{ display:none}
.tabnavi01 ul li {margin:0; border-radius:0}
.tabnavi01 ul li a { padding:5px 10px; font-size:1em; border:none}
.tabnavi01 ul li a:before, .tabnavi01 > a.select:before {width:10px; background:#ff6946 url(../images/sub/btn_tabnavi_m.png) no-repeat 50% 50%; border-radius:50% 50%}
.tabnavi01 ul li.on {background:#ff6946; transition:.3s ease-in-out}
.tabnavi01 ul li.on a {color:#fff}
.tabnavi01 ul li a:after {display:none}

/* 탭 :2차 탭 */
.tabnavi02 > a.select {position:relative; font-size:1em; color:#000; padding:5px 30px 5px 10px; background:#fff; border:2px solid #dfdfdf; font-weight:500; border-radius:5px}
.tabnavi02 ul{ overflow:hidden; margin-top:0; padding:0; background:#f7f7f7; border:0; border-radius:0}
.tabnavi02 li + li:before{ display:none}
.react_tab.tabnavi02 li {padding:0}
.tabnavi02 ul li a {padding:3px 5px; font-size:1em; background:none}
.tabnavi02 ul li a:before, .tabnavi02 > a.select:before {background:#c5c5c5 url(../images/sub/btn_tabnavi_m.png) no-repeat 50% 50%; border-radius:50% 50%}
.tabnavi02 ul li.on a, .tabnavi02 ul li:hover a {background:none}

}

@media screen and (min-width:1025px){  
div[class^="tabnavi0"] a.select:before{display:none}
}

/*======================================= //탭 :공통 ========================================= */



@media only screen and (max-width:500px) {

}