@charset "UTF-8";

/* 공통 버튼 */
.cont_btn_list_area {margin: 40px 0 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;}
.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: 168px; border: 1px solid var(--com-main-color); padding: 0 25px; text-align: center; transition: all 0.3s; border-radius: 15px;}
.cont_btn_list_area .list li .btn .text,
.cont_btn_list_area .list li .cancell_btn .text {display: inline-block; font-weight: 700; font-size: 16px; line-height: 46px;}

/* 버튼 아이콘 추가 시 */
.cont_btn_list_area .list li .btn .text.icon { position: relative; line-height: 63px; transition: all 0.3s;}
.cont_btn_list_area .list li .btn .text.icon::before { display: none; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-position: center; background-size: 100%; background-repeat: no-repeat;}
.cont_btn_list_area .list li .btn .text.icon.arrow::before { width: 16px; height: 14px; background-image: url('/images/home/kor/user/sub/btn_arrow_icon.png');}
.cont_btn_list_area .list li .btn:hover .text.icon,
.cont_btn_list_area .list li .btn:focus .text.icon { padding: 0 30px 0 0;}
.cont_btn_list_area .list li .btn:hover .text.icon::before,
.cont_btn_list_area .list li .btn:focus .text.icon::before { display: block; left: inherit; right: 0;}
/* 버튼 아이콘 추가 시 */

.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.before {border: 1px solid var(--com-sub-color); background-color: var(--com-sub-color);}
.cont_btn_list_area .list li .btn.list {border: 1px solid #343642; background-color: #343642;}
.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 {border: 1px solid #0068c0; background-color: #0068c0;}
.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 #00327f; background-color: #00327f;}
.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 { min-width: inherit; border-radius: 10px;}
.cont_btn_list_area .list li .cancell_btn.etc .text { font-weight: 500; font-size: 15px; line-height: 33px;}
.cont_btn_list_area .list li .cancell_btn:hover, .cont_btn_list_area .list li .cancell_btn:focus { background-color: #e5f1fc;}
/*========================================================================================================*/

/* 공통 기본 탭 */
.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 {border-right: 1px solid #e0e0e0;}
.com_tab_area .list li.line_none: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);}

/* 아이콘 버튼 */
.icon_btn { display: inline-block; padding: 0 10px; text-align: center; border-radius: 5px; transition: all 0.3s;}
.icon_btn .txt { display: inline-block; padding: 0 0 0 10px; background-position: left center; background-size: 7px auto; background-repeat: no-repeat; font-weight: 500; font-size: 14px; line-height: 28px; color: #ffffff;}
.icon_btn.add { border: 1px solid var(--com-main-color); background-color: var(--com-main-color);}
.icon_btn.add .txt { background-image: url('/images/home/kor/user/sub/add_icon.png');}
.icon_btn.remove { border: 1px solid #f44d4d; background-color: #f44d4d;}
.icon_btn.remove .txt { background-image: url('/images/home/kor/user/sub/remove_icon.png');}

.icon_btn:hover,
.icon_btn:focus { background-color: #ffffff;}
.icon_btn.add:hover .txt,
.icon_btn.add:focus .txt { background-image: url('/images/home/kor/user/sub/add_icon_on.png'); color: var(--com-main-color);}
.icon_btn.remove:hover .txt,
.icon_btn.remove:focus .txt { background-image: url('/images/home/kor/user/sub/remove_icon_on.png'); color: #f44d4d;}

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

.icon_btn.sty2 { border: 1px solid #e1e1e1;}
.icon_btn.sty2:hover,
.icon_btn.sty2:focus { border: 1px solid var(--com-main-color);}
.icon_btn.sty2 .txt { padding: 0 0 0 20px; background-size: 16px auto; color: #212121;}