@charset "UTF-8";

/* 공통 버튼 */
.cont_btn_list_area {margin: 40px 0 0;}
.cont_btn_list_area.ma0 {margin: 0;}
.cont_btn_list_area.mab { margin: 0 0 20px;}
.cont_btn_list_area .list {font-size: 0;}
.cont_btn_list_area .list.tr {text-align: right;}
.cont_btn_list_area .list.tc {text-align: center;}
.cont_btn_list_area .list.tl {text-align: left;}
.cont_btn_list_area .list li {display: inline-block; margin: 0 10px 0 0; vertical-align: top;}
.cont_btn_list_area .list li.tl { float: left;}
.cont_btn_list_area .list li:last-child {margin: 0;}

.cont_btn_list_area .list li .btn,
.cont_btn_list_area .list li .cancell_btn {display: block; width: 100%; min-width: 108px; border: 1px solid var(--com-main-color); padding: 0 23px; text-align: center; transition: all 0.3s; border-radius: 8px; position: relative; overflow: hidden;  z-index: 1;}
.cont_btn_list_area .list li .btn .text,
.cont_btn_list_area .list li .cancell_btn .text {display: inline-block; font-weight: 500; font-size: 16px; line-height: 46px; z-index: 1;}

.cont_btn_list_area .list li .btn:before,
.cont_btn_list_area .list li .cancell_btn:before {content: ''; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; z-index: -1; transition: left 0.2s linear;}

.cont_btn_list_area .list li .btn:hover:before,
.cont_btn_list_area .list li .btn:focus:before,
.cont_btn_list_area .list li .cancell_btn:hover:before,
.cont_btn_list_area .list li .cancell_btn:focus:before {left: 100%;}

.cont_btn_list_area .list li .cancell_btn:before {background-color: #ffffff;}


.cont_btn_list_area .list li .btn.small,
.cont_btn_list_area .list li .cancell_btn.small {}
.cont_btn_list_area .list li .btn.small .text,
.cont_btn_list_area .list li .cancell_btn.small .text {line-height: 38px;}

.cont_btn_list_area .list li .btn.big,
.cont_btn_list_area .list li .cancell_btn.big {}
.cont_btn_list_area .list li .btn.big .text,
.cont_btn_list_area .list li .cancell_btn.big .text {font-size: 18px; line-height: 52px;}

/* 버튼 아이콘 추가 시 */
.cont_btn_list_area .list li .btn .text.icon {padding: 0 0 0 23px; background-position: left center; background-repeat: no-repeat;}
.cont_btn_list_area .list li .btn .text.icon.ico1 {background-image: url('/images/home/eng/user/sub/apply_icon.png');}
.cont_btn_list_area .list li .btn .text.icon.ico2 {padding: 0 0 0 18px; background-image: url('/images/home/eng/user/sub/down_icon2.png');}
.cont_btn_list_area .list li .btn .text.icon.ico3 { background-image: url('/images/home/eng/user/board/sch_reset.png');}

.cont_btn_list_area .list li .btn.recommended { border: 1px solid var(--com-sub-color) !important; background-color: var(--com-sub-color) !important;}
.cont_btn_list_area .list li .btn.recommended .text {padding: 0 0 0 23px; background-image: url('/images/home/eng/user/sub/recommend_icon4.png'); background-position: left center; background-repeat: no-repeat; transition: all 0.3s;}
.cont_btn_list_area .list li .btn.recommended.on .text {background-image: url('/images/home/eng/user/sub/recommend_icon4_on.png');}

.cont_btn_list_area .list li .btn.recommended {position: inherit;}
.cont_btn_list_area .list li .btn.recommended::before {display: none;}

.cont_btn_list_area .list li .cancell_btn.bookmark .text {padding: 0 0 0 16px; background-image: url('/images/home/eng/user/sub/scrap_icon3.png'); background-position: left center; background-repeat: no-repeat; transition: all 0.3s;}
.cont_btn_list_area .list li .cancell_btn.bookmark.on .text {background-image: url('/images/home/eng/user/sub/scrap_icon3_on.png');}

.cont_btn_list_area .list li .cancell_btn.bookmark {position: inherit;}
.cont_btn_list_area .list li .cancell_btn.bookmark::before {display: none;}
.cont_btn_list_area .list li .cancell_btn.bookmark:hover,
.cont_btn_list_area .list li .cancell_btn.bookmark:focus {background-color: #ffffff !important;}
.cont_btn_list_area .list li .cancell_btn.bookmark:hover .text,
.cont_btn_list_area .list li .cancell_btn.bookmark:focus .text {color: var(--com-main-color) !important;}

.cont_btn_list_area .list li .cancell_btn .text.icon2 {}
.cont_btn_list_area .list li .cancell_btn .text.icon2 i { display: inline-block; margin: 0 3px 0 0; font-weight: 400; font-size: 15px; line-height: 1; color: var(--com-main-color);}
.cont_btn_list_area .list li .cancell_btn.big .text.icon2 i { font-size: 17px;}
.cont_btn_list_area .list li .cancell_btn:hover .text.icon2 i,
.cont_btn_list_area .list li .cancell_btn:focus .text.icon2 i { color: #ffffff;}
/* 버튼 아이콘 추가 시 */

.cont_btn_list_area .list li .btn { background-color: var(--com-main-color);}
.cont_btn_list_area .list li .btn.max_w { min-width: 220px;}
.cont_btn_list_area .list li .btn .text { color: #ffffff;}
.cont_btn_list_area .list li .btn:hover, .cont_btn_list_area .list li .btn:focus {border: 1px solid #58237c; background-color: #58237c;}
.cont_btn_list_area .list li .btn:hover .text, .cont_btn_list_area .list li .btn:focus .text {}
.cont_btn_list_area .list li .btn.before:hover, .cont_btn_list_area .list li .btn.before:focus {border: 1px solid #000000; background-color: #000000;}
.cont_btn_list_area .list li .btn.list:hover, .cont_btn_list_area .list li .btn.list:focus,
.cont_btn_list_area .list li .btn.input:hover, .cont_btn_list_area .list li .btn.input:focus {border: 1px solid #000000; background-color: #000000;}

.cont_btn_list_area .list li .cancell_btn { background-color: #ffffff;}
.cont_btn_list_area .list li .cancell_btn .text { color: var(--com-main-color);}
.cont_btn_list_area .list li .cancell_btn.etc {border: 1px solid #767676;}
.cont_btn_list_area .list li .cancell_btn.etc .text {color: #767676;}
.cont_btn_list_area .list li .cancell_btn:hover,
.cont_btn_list_area .list li .cancell_btn:focus { background-color: #58237c;}
.cont_btn_list_area .list li .cancell_btn:hover .text,
.cont_btn_list_area .list li .cancell_btn:focus .text { color: #ffffff;}
.cont_btn_list_area .list li .cancell_btn.etc:hover,
.cont_btn_list_area .list li .cancell_btn.etc:focus { background-color: #767676;}
.cont_btn_list_area .list li .cancell_btn.etc:hover .text,
.cont_btn_list_area .list li .cancell_btn.etc:focus .text { color: #ffffff;}


/* 버튼효과 배경색 있을떄 */
.custom_btn {display: inline-block; position: relative; overflow: hidden; z-index: 1;}
.custom_btn .text {z-index: 1;}
.custom_btn:before {content: ''; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; z-index: -1; transition: left 0.2s linear;}
.custom_btn:hover:before,
.custom_btn:focus:before {left: 100%;}


.cont_btn_list_area .list li .btn::before {background-color: var(--com-main-color);}
.cont_btn_list_area .list li .btn.before {border: 1px solid #8a8490; background-color: #8a8490;}
.cont_btn_list_area .list li .btn.before::before {background-color: #8a8490;}
.cont_btn_list_area .list li .btn.list {border: 1px solid #313131; background-color: #313131;}
.cont_btn_list_area .list li .btn.input {border: 1px solid #616161; background-color: #616161;}
.cont_btn_list_area .list li .btn.list::before { background-color: #313131;}
.cont_btn_list_area .list li .btn.input::before { background-color: #616161;}
.cont_btn_list_area .list li .btn.bookmark {border: 1px solid var(--com-sub-color); background-color: var(--com-sub-color);}
.cont_btn_list_area .list li .btn.bookmark::before {display: none;}

/* 버튼효과 배경색 없을떄 */
.custom_btn2 {display: inline-block; position: relative; overflow: hidden;  z-index: 1;}
.custom_btn2 .text {z-index: 1;}
.custom_btn2:before {content: ''; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; background-color: #ffffff; z-index: -1;  transition: left 0.2s linear;}
.custom_btn2:hover:before,
.custom_btn2:focus:before {left: 100%;}
/*========================================================================================================*/

/* 공통 기본 탭 */
.com_tab_area {margin: 0 0 60px;}
.com_tab_area .list {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; border-left: 1px solid #e0e0e0;}
.com_tab_area .list li {display: table; position:relative; width: 100%; background-color: #f5f5f5; table-layout: fixed; text-align: center;}
.com_tab_area .list li:last-child {border-right: 1px solid #e0e0e0;}
.com_tab_area .list li:after {content: ''; position:absolute; top: 50%; right: 0; width: 1px; height: 18px; background-color: #e0e0e0; transform: translateY(-50%);}
.com_tab_area .list li.on { border-right: inherit !important;}
.com_tab_area .list li.on:after {display: none;}
.com_tab_area .list li.on:before {content: ''; position:absolute; top: 0; right: 0; left: 0; width: 100%; height: 3px; background-color: var(--com-main-color);}
.com_tab_area .list li.line_none,
.com_tab_area .list li:not(.on) {border-right: 1px solid #e0e0e0;}
.com_tab_area .list li.line_none:after,
.com_tab_area .list li:not(.on):after {display: none;}
.com_tab_area .list li:last-child:after {display: none;}
.com_tab_area .list li .btn {display: table-cell; width: 100%; height: 64px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 0 5px; vertical-align: middle; text-align: center;}
.com_tab_area .list li.on .btn {background-color: #ffffff; border-top: inherit !important; border-bottom: inherit !important; border-right: 1px solid #e0e0e0 !important;}
.com_tab_area .list li:first-child.on .btn {border-left: none;}
.com_tab_area .list li:last-child.on .btn {border-right: none;}
.com_tab_area .list li .btn .text {display: inline-block; font-weight: 500; font-size: 20px; line-height: 30px; color: #757575;}
.com_tab_area .list li.on .btn .text {font-weight: 700; color: var(--com-main-color);}

/* 공통 기본 탭2 */
.com_tab_area2 { overflow: hidden; border-radius: 5px;}
.com_tab_area2 .list {font-size: 0;}
.com_tab_area2 .list li { display: inline-block; width: 12.5%; position: relative; vertical-align: middle;}
.com_tab_area2 .list li::before { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 14px; background-color: rgba(104, 52, 147, 0.1);}
.com_tab_area2 .list li:nth-child(8n)::before { display: none;}
.com_tab_area2 .list li:last-child::before { display: none;}
.com_tab_area2 .list li .btn { display: block; width: 100%; padding: 10px 5px; background-color: #f5edfc; border-radius: inherit;}
.com_tab_area2 .list li.on .btn { background-color: var(--com-main-color);}
.com_tab_area2 .list li .btn .text { display: inline-block; font-weight: 700; font-size: 16px; line-height: 21px; color: var(--com-main-color);}
.com_tab_area2 .list li.on .btn .text { color: #ffffff;}

/* 아이콘 버튼 */
/* 아이콘 사이즈 15x15로 통일 */
.icon_btn { display: inline-block; border: 1px solid #e1e1e1; padding: 0 13px; background-color: #e1e1e1; text-align: center; border-radius: 5px; transition: all 0.3s; position: relative; overflow: hidden;  z-index: 1;}
.icon_btn .txt { display: inline-block; padding: 0 0 0 20px; background-position: left center; background-repeat: no-repeat; font-weight: 400; font-size: 14px; line-height: 28px; color: #212121; z-index: 1;}

.icon_btn:before {content: ''; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; background-color: #ffffff; z-index: -1;  transition: left 0.2s linear;}
.icon_btn:hover:before,
.icon_btn:focus:before {left: 100%}

.icon_btn:hover,
.icon_btn:focus {border: 1px solid #000000; background-color: #000000;}
.icon_btn:hover .txt,
.icon_btn:focus .txt {color: #ffffff;}

.icon_btn.write .txt,
.icon_btn.write .txt { background-image: url('/images/home/eng/user/sub/write_icon.png');}
.icon_btn.write:hover .txt,
.icon_btn.write:focus .txt { background-image: url('/images/home/eng/user/sub/write_icon_on.png');}

.icon_btn.down .txt,
.icon_btn.down .txt { background-image: url('/images/home/eng/user/sub/down_icon.png');}
.icon_btn.down:hover .txt,
.icon_btn.down:focus .txt { background-image: url('/images/home/eng/user/sub/down_icon_on.png');}

.icon_btn.del .txt,
.icon_btn.del .txt { background-image: url('/images/home/eng/user/sub/delete_icon.png');}
.icon_btn.del:hover .txt,
.icon_btn.del:focus .txt { background-image: url('/images/home/eng/user/sub/delete_icon_on.png');}

.icon_btn.submit .txt,
.icon_btn.submit .txt { background-image: url('/images/home/eng/user/sub/submit_icon.png');}
.icon_btn.submit:hover .txt,
.icon_btn.submit:focus .txt { background-image: url('/images/home/eng/user/sub/submit_icon_on.png');}

.icon_btn.no_icon {border: 1px solid #313131; background-color: #313131;}
.icon_btn.no_icon::before {background-color: #313131;}
.icon_btn.no_icon .txt {background-image: none !important; padding: 0; color: #ffffff;}

.icon_btn.no_icon.del {border: 1px solid #e1e1e1; background-color: #e1e1e1;}
.icon_btn.no_icon.del::before {background-color: #ffffff;}
.icon_btn.no_icon.del .txt {background-image: none !important; padding: 0; color: #212121;}

.icon_btn.no_icon.before {border: 1px solid #8a8490; background-color: #8a8490;}
.icon_btn.no_icon.before::before {background-color: #8a8490;}
.icon_btn.no_icon.before .txt {color: #ffffff;}

.icon_btn.no_icon:hover,
.icon_btn.no_icon:focus {border: 1px solid #000000; background-color: #000000;}
.icon_btn.no_icon:hover .txt,
.icon_btn.no_icon:focus .txt {background-image: none !important;}

.icon_btn.no_icon.before:hover,
.icon_btn.no_icon.before:focus {border: 1px solid #000000; background-color: #000000;}
.icon_btn.no_icon.before:hover .txt,
.icon_btn.no_icon.before:focus .txt {}

.icon_btn.no_icon.del:hover,
.icon_btn.no_icon.del:focus {border: 1px solid #000000; background-color: #000000;}
.icon_btn.no_icon.del:hover .txt,
.icon_btn.no_icon.del:focus .txt {color: #ffffff;}

/* 아이콘 버튼 사이즈 다름 */
.icon_btn.sty2 {}
.icon_btn.sty2 .txt {}
.icon_btn.sty2 .txt {padding: 0 0 0 16px;}
.icon_btn.sty2.add {border: 1px solid #6d3593;}
.icon_btn.sty2.add .txt {background-image: url('/images/home/eng/user/common/add_btn_ico.png'); color: #6d3593;}
.icon_btn.sty2.add:hover,
.icon_btn.sty2.add:focus {border: 1px solid #6d3593; background-color: #6d3593;}
.icon_btn.sty2.add:hover .txt,
.icon_btn.sty2.add:focus .txt {background-image: url('/images/home/eng/user/common/add_btn_ico_on.png'); color: #ffffff;}
.icon_btn.sty2.del {border: 1px solid #c825ac;}
.icon_btn.sty2.del .txt {background-image: url('/images/home/eng/user/sub/delete_icon2.png'); color: #c825ac;}
.icon_btn.sty2.del:hover,
.icon_btn.sty2.del:focus {border: 1px solid #c825ac; background-color: #c825ac;}
.icon_btn.sty2.del:hover .txt,
.icon_btn.sty2.del:focus .txt {background-image: url('/images/home/eng/user/sub/delete_icon2_on.png'); color: #ffffff;}
.icon_btn.sty2.sch {border: 1px solid #6d3593;}
.icon_btn.sty2.sch .txt {background-image: url('/images/home/eng/user/common/sch_btn_ico.png'); color: #6d3593;}
.icon_btn.sty2.sch:hover,
.icon_btn.sty2.sch:focus {border: 1px solid #6d3593; background-color: #6d3593;}
.icon_btn.sty2.sch:hover .txt,
.icon_btn.sty2.sch:focus .txt {background-image: url('/images/home/eng/user/common/sch_btn_ico_on.png'); color: #ffffff;}