@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: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: 178px; border: 1px solid #316aa5; padding: 0 15px; text-align: center; border-radius: 5px; transition: all 0.3s;}
.cont_btn_list_area .list li .btn.min_w,
.cont_btn_list_area .list li .cancell_btn.min_w { min-width: 118px;}
.cont_btn_list_area .list li .btn .text,
.cont_btn_list_area .list li .cancell_btn .text {display: inline-block; font-weight: 400; font-size: 16px; line-height: 45px; transition: all 0.3s;}
.cont_btn_list_area .list li .btn .text.icon,
.cont_btn_list_area .list li .cancell_btn .text.icon {background-position: left center; background-repeat: no-repeat;}

.cont_btn_list_area .list li .btn { background-color: #316aa5;}
.cont_btn_list_area .list li .btn .text {color: #ffffff;}
/* .cont_btn_list_area .list li .btn.before {border: 1px solid #848690; background-color: #848690;} */
.cont_btn_list_area .list li .btn.list {border: 1px solid #5b5b5b; background-color: #5b5b5b;}
/* .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: #ffffff;}
.cont_btn_list_area .list li .btn:hover .text, .cont_btn_list_area .list li .btn:focus .text {color: #316aa5;}
.cont_btn_list_area .list li .btn.list:hover .text, .cont_btn_list_area .list li .btn.list:focus .text {color: #5b5b5b;}

.cont_btn_list_area .list li .cancell_btn { background-color: #ffffff;}
.cont_btn_list_area .list li .cancell_btn .text {color: #316aa5;}
.cont_btn_list_area .list li .cancell_btn:hover,
.cont_btn_list_area .list li .cancell_btn:focus { background-color: #316aa5;}
.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 {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 .text, .cont_btn_list_area .list li .cancell_btn:focus .text,
.cont_btn_list_area .list li .cancell_btn.etc:hover .text, .cont_btn_list_area .list li .cancell_btn.etc:hover .text {color: #ffffff;}
.cont_btn_list_area .list li .cancell_btn.etc:hover, .cont_btn_list_area .list li .cancell_btn.etc:hover {border: 1px solid #767676; background-color: #767676;} */

/* 아이콘 버튼 */
.cont_btn_list_area.sty2 { margin: 0;}
.cont_btn_list_area.sty2 .list li .btn { border: 1px solid #00bfff;}
.cont_btn_list_area.sty2 .list li .btn:hover,
.cont_btn_list_area.sty2 .list li .btn:focus { background-color: #316aa5;}
.cont_btn_list_area.sty2 .list li .cancell_btn:hover,
.cont_btn_list_area.sty2 .list li .cancell_btn:focus { background-color: #ffffff;}
.cont_btn_list_area.sty2 .list li .btn:hover,
.cont_btn_list_area.sty2 .list li .btn:focus,
.cont_btn_list_area.sty2 .list li .cancell_btn:hover,
.cont_btn_list_area.sty2 .list li .cancell_btn:focus { box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);}
.cont_btn_list_area.sty2 .list li .btn .text,
.cont_btn_list_area.sty2 .list li .cancell_btn .text { position: relative; padding: 0 0 0 28px; line-height: 53px;}
.cont_btn_list_area.sty2 .list li .btn .text::before,
.cont_btn_list_area.sty2 .list li .cancell_btn .text::before { content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 16px; height: 20px; background-image: url('../../../../images/home/kor/user/sub/ci_down_ico.png'); background-position: center; background-size: 100%; background-repeat: no-repeat; transition: all 0.3s;}
.cont_btn_list_area.sty2 .list li .cancell_btn .text::before { background-image: url('../../../../images/home/kor/user/sub/ebook_ico.png');}
.cont_btn_list_area.sty2 .list li .btn:hover .text,
.cont_btn_list_area.sty2 .list li .btn:focus .text { color: #316aa5;}
.cont_btn_list_area.sty2 .list li .cancell_btn:hover .text,
.cont_btn_list_area.sty2 .list li .cancell_btn:focus .text { color: #ffffff;}
.cont_btn_list_area.sty2 .list li .btn:hover .text::before,
.cont_btn_list_area.sty2 .list li .cancell_btn:hover .text::before,
.cont_btn_list_area.sty2 .list li .btn:focus .text::before,
.cont_btn_list_area.sty2 .list li .cancell_btn:focus .text::before { left: 50%; transform: translate(-50%, -50%);}

/* 홍보자료 pdf 다운로드 버튼 */
.cont_btn_list_area.sty3 { margin: 0;}
.cont_btn_list_area.sty3 .list li { display: block;}
.cont_btn_list_area.sty3 .list li .btn,
.cont_btn_list_area.sty3 .list li .cancell_btn { min-width: inherit; border: 1px solid #0b4489; border-radius: inherit;}
.cont_btn_list_area.sty3 .list li .cancell_btn:hover,
.cont_btn_list_area.sty3 .list li .cancell_btn:focus { background-color: #0b4489;}
.cont_btn_list_area.sty3 .list li .btn .text,
.cont_btn_list_area.sty3 .list li .cancell_btn .text { font-size: 15px; line-height: 38px;}
.cont_btn_list_area.sty3 .list li .btn .text.icon,
.cont_btn_list_area.sty3 .list li .cancell_btn .text.icon { padding: 0 0 0 23px; background-image: url('../../../../images/home/kor/user/sub/pdf_down_ico.png'); background-position: left center; background-repeat: no-repeat;}
.cont_btn_list_area.sty3 .list li .btn:hover .text.icon,
.cont_btn_list_area.sty3 .list li .cancell_btn:hover .text.icon,
.cont_btn_list_area.sty3 .list li .btn:focus .text.icon,
.cont_btn_list_area.sty3 .list li .cancell_btn:focus .text.icon { background-image: url('../../../../images/home/kor/user/sub/pdf_down_ico_on.png');}
/*========================================================================================================*/

/* basic_tab */
.basic_tab {display:flex;flex-wrap:wrap;margin-bottom:45px}
.basic_tab > li {flex:1;border-top:1px solid var(--colorGray20);border-bottom:1px solid var(--colorGray20)}
.basic_tab > li a {display:flex;align-items:center;justify-content:center;height:56px;padding:0 5px;line-height:1.5;font-weight:400;color:var(--colorGray90);text-align:center;background-color:var(--colorBgGray);border-right:1px solid var(--colorGray20);transition:0.3s;position:relative}
.basic_tab > li:last-child a {border-right:0}
.basic_tab > li:not(.on):hover a, 
.basic_tab > li:not(.on):focus a {color:var(--colorMain);background-color:#fff}
.basic_tab > li.on {border-bottom-color:transparent}
.basic_tab > li.on a {color:var(--colorMain);font-weight:700;background-color:#fff;border-color:transparent}
.basic_tab > li.on a::before {width:100%;height:3px;content:'';background-color:var(--colorMain);position:absolute;left:0;top:-1px}
.basic_tab > li.on a::after {width:1px;height:calc(100% - 3px);content:'';background-color:#fff;position:absolute;left:-1px;bottom:0}


