@charset "UTF-8";

/* 공통 버튼 */
.cont_btn_list_area {margin: 40px 0 0;}
.cont_btn_list_area.view_800 { max-width:100%; width: 800px; margin: 40px auto 0;}
.cont_btn_list_area.ma0 { margin: 0;}
.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 !important;}
/* .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 25px; text-align: center; transition: all 0.3s; border-radius: 8px;}
.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: 43px;} */
.cont_btn_list_area .list li .btn .text.line_h,
.cont_btn_list_area .list li .cancell_btn .text.line_h { line-height: 48px;}
.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.small,
.cont_btn_list_area .list li .cancell_btn.small { min-width: auto; padding: 0 15px;}
.cont_btn_list_area .list li .btn.small .text,
.cont_btn_list_area .list li .cancell_btn.small .text { font-weight: 400; font-size: 15px; line-height: 22px;}
.cont_btn_list_area .list li .btn.max_w,
.cont_btn_list_area .list li .cancell_btn.max_w { min-width: 200px;}
/* 호버시 */
.cont_btn_list_area .list li .btn:hover .text,
.cont_btn_list_area .list li .btn:focus .text,
.cont_btn_list_area .list li .cancell_btn:hover .text,
.cont_btn_list_area .list li .cancell_btn:focus .text { font-weight: 700;}

/* 공통 버튼 sty2*/
/* .cont_btn_list_area .list li .btn { background-color: var(--com-main-color);}
.cont_btn_list_area .list li .btn .text { color: #ffffff;}
.cont_btn_list_area .list li .btn.list {background-color: #ffffff;}
.cont_btn_list_area .list li .btn.list .text {color: var(--com-main-color);}
.cont_btn_list_area .list li .btn.before {border: 1px solid #767676; background-color: #767676;}
.cont_btn_list_area .list li .btn.input {border: 1px solid #616161; background-color: #616161;} */
/* 호버시 */
/* .cont_btn_list_area .list li .btn:hover,
.cont_btn_list_area .list li .btn:focus { background-color: #000000;}
.cont_btn_list_area .list li .btn.list:hover,
.cont_btn_list_area .list li .btn.list:focus { background-color: var(--com-sub-color);}
.cont_btn_list_area .list li .btn.before:hover,
.cont_btn_list_area .list li .btn.before: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;} */

/* 공통 버튼 sty3*/
/* .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.small {} */
/* 호버시 */
/* .cont_btn_list_area .list li .cancell_btn:hover,
.cont_btn_list_area .list li .cancell_btn:focus { background-color: var(--com-sub-color);}
.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;} */
/* 공통 버튼 */

/* 버튼 아이콘 추가 시 */
.cont_btn_list_area .list li .btn .text i,
.cont_btn_list_area .list li .cancell_btn .text i { margin: 0 4px 0 0;}
.cont_btn_list_area .list li .btn .text i.mar,
.cont_btn_list_area .list li .cancell_btn .text i.mar { margin: 0 0 0 4px;}
.cont_btn_list_area .list li .btn .text i.ft_s,
.cont_btn_list_area .list li .cancell_btn .text i.ft_s { font-size: 15px;}
.cont_btn_list_area .list li .share_btn .text i { margin: 0; font-size: 22px; vertical-align: sub;}
/* 버튼 아이콘 추가 시 */

/* 공통 기본 탭 */
.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%; left: -1px; width: 1px; height: 18px; background-color: #e0e0e0; transform: translateY(-50%);}
.com_tab_area .list li:first-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: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: 27px; color: #757575;}
.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:first-child.on:before { left: -1px; width: calc(100% + 1px);}
.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.on .btn .text {font-weight: 700; color: var(--com-main-color);}

/* 아이콘 버튼 */
.icon_btn { display: inline-block; border: 1px solid #e1e1e1; padding: 0 10px; text-align: center; border-radius: 3px; transition: all 0.3s;}
.icon_btn .txt { display: inline-block; padding: 0 0 0 18px; background-position: left center; background-repeat: no-repeat; font-weight: 400; font-size: 14px; line-height: 28px; color: #212121;}
.icon_btn.write .txt { background-image: url('/images/home/kor/user/sub/write_icon.png');}
.icon_btn.down .txt { background-image: url('/images/home/kor/user/sub/down_icon.png');}
.icon_btn.edit .txt { background-image: url('/images/home/kor/user/sub/edit_icon.png');}
.icon_btn.remove .txt { background-image: url('/images/home/kor/user/sub/remove_icon.png');}
/* 호버시 */
.icon_btn:hover,
.icon_btn:focus { border: 1px solid var(--com-main-color); background-color: var(--com-main-color);}
.icon_btn.write:hover .txt,
.icon_btn.write:focus .txt { background-image: url('/images/home/kor/user/sub/write_icon_on.png');}
.icon_btn.down:hover .txt,
.icon_btn.down:focus .txt { background-image: url('/images/home/kor/user/sub/down_icon_on.png');}
.icon_btn.edit:hover .txt,
.icon_btn.edit:focus .txt { background-image: url('/images/home/kor/user/sub/edit_icon_on.png');}
.icon_btn.remove:hover .txt,
.icon_btn.remove:focus .txt { background-image: url('/images/home/kor/user/sub/remove_icon_on.png');}
.icon_btn:hover .txt,
.icon_btn:focus .txt { color: #ffffff;}

/* 전체 버튼 통일 수정 */
.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); background-color: var(--com-main-color); padding: 0 25px; text-align: center; transition: all 0.3s; border-radius: 8px;}
.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: 43px; color: #ffffff;}

.cont_btn_list_area .list li .btn:hover,
.cont_btn_list_area .list li .btn:focus,
.cont_btn_list_area .list li .cancell_btn:hover,
.cont_btn_list_area .list li .cancell_btn:focus { background-color: #ffffff;}

.cont_btn_list_area .list li .btn:hover .text,
.cont_btn_list_area .list li .btn:focus .text,
.cont_btn_list_area .list li .cancell_btn:hover .text,
.cont_btn_list_area .list li .cancell_btn:focus .text { color: var(--com-main-color);}