@charset "utf-8";


/* select custom */
 .selectric-wrapper {position: relative;cursor: pointer;float: left;font-family: 'G-sans', "sans-serif";}
 .selectric-wrapper.w200 {width: 200px!important;}
 .selectric-responsive {width: 100%;}
 .selectric-items li.highlighted {background: #f4f4f4;}

/* search - select type 01 */
 .select_01{display: inline-block;width: auto;}
 .select_01 select{padding:0 10px; border-radius:8px; border:1px solid #e8e8e8; background:#fff;}
 .list_top .select_01{float: left;margin-left: 10px;}
 .select_01 .selectric {width:140px!important;border: 1px solid #e8e8e8;background: #FFFFFF;position: relative;padding: 0 10px;border-radius: 8px;}
 .select_01 .selectric .label {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding: 0 10px;font-size:0.938rem;color: #666;height: 43px;line-height: 45px;text-align: left;}
 .select_01 .selectric .button { background: url(../image/sub/path_arr.png);background-position: 50% 50%;background-repeat: no-repeat;display: block;position: absolute;right: 3px;top: 0;bottom: 0;margin: auto;width: 26px;height: 26px;font-size: 0;transform: rotate(90deg);}
 .select_01 .selectric-open {z-index: 9999;}
 .select_01 .selectric-open .selectric-items {display: block;}
 .select_01 .selectric-hide-select {position: relative;overflow: hidden;width: 0;height: 0;}
 .select_01 .selectric-hide-select select {position: absolute;left: -100%;}
 .select_01 .selectric-hide-select.selectric-is-native {position: absolute;width: 100%;height: 100%;z-index: 10;}
 .select_01 .selectric-hide-select.selectric-is-native select {position: absolute;top: 0;left: 0;right: 0;height: 100%;width: 100%;border: none;z-index: 1;box-sizing: border-box;opacity: 0;}
 .select_01 .selectric-input {position: absolute !important;top: 0 !important;left: 0 !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;margin: 0 !important;padding: 0 !important;width: 1px !important;height: 1px !important;outline: none !important;border: none !important;/**font: 0/0 a !important;*/background: none !important;}
 .select_01 .selectric-temp-show {position: absolute !important;visibility: hidden !important;display: block !important;}
/* search - select Items box */
 .select_01 .selectric-items {display: none;position: absolute;top: 100%;left: 0;background: #fff;border: 1px solid #e8e8e8;z-index: -1;border-radius: 8px;}
 .select_01 .selectric-items .selectric-scroll {height: 100%;overflow: hidden;}
 .select_01 .selectric-above .selectric-items {top: auto;bottom: 100%;}
 .select_01 .selectric-items ul,  .select_01 .selectric-items li {list-style: none; padding: 0;margin: 0;height: auto;}
 .select_01 .selectric-items li {display: block;padding: 4px;padding-left: 20px;line-height: 28px;color: #777;cursor: pointer;font-size:0.875rem;text-align: left;}
/* list top select custom */
 .list_top .select_01 .selectric {width:76px!important;border: 1px solid #e8e8e8;background: #FFFFFF;position: relative;padding: 0 10px;border-radius: 8px;}
 .list_top .select_01 .selectric .label {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding: 0;font-size:0.813rem;color: #333333;height: 33px;line-height: 35px;text-align: left;}
 .list_top .select_01 .selectric-items li {display: block;padding: 2px;padding-left: 10px;line-height: 30px;color: #777;cursor: pointer;font-size:0.813rem;text-align: left;}

/* sub - regist */
/* select type 02 fullsize */
.select_02 .selectric-wrapper{width: 100%;font-family: 'N-sans', "sans-serif";}
.select_02.dip_inb{display: inline-block;vertical-align: top;}
.select_02{display: block;}
.select_02 .selectric {width:100%!important;border: 1px solid #e8e8e8;background: #FFFFFF;position: relative;padding: 0 10px;}
.select_02 .selectric .label {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding: 0 10px;font-size:0.938rem;color: #333333;height: 40px;line-height: 40px;text-align: left;}
.select_02 .selectric .button { background: url(../image/sub/select_arr.png);background-position: 50% 50%;background-repeat: no-repeat;display: block;position: absolute;right: 10px;top: 0;bottom: 0;margin: auto;width: 26px;height: 26px;font-size: 0;}
.select_02 .selectric-open {z-index: 9999;}
.select_02 .selectric-open .selectric-items {display: block;}
.select_02 .selectric-hide-select {position: relative;overflow: hidden;width: 0;height: 0;}
.select_02 .selectric-hide-select select {position: absolute;left: -100%;}
.select_02 .selectric-hide-select.selectric-is-native {position: absolute;width: 100%;height: 100%;z-index: 10;}
.select_02 .selectric-hide-select.selectric-is-native select {position: absolute;top: 0;left: 0;right: 0;height: 100%;width: 100%;border: none;z-index: 1;box-sizing: border-box;opacity: 0;}
.select_02 .selectric-input {position: absolute !important;top: 0 !important;left: 0 !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;margin: 0 !important;padding: 0 !important;width: 1px !important;height: 1px !important;outline: none !important;border: none !important;/**font: 0/0 a !important;*/background: none !important;}
.select_02 .selectric-temp-show {position: absolute !important;visibility: hidden !important;display: block !important;}
/* search - select type 02 box */
.select_02 .selectric-items {display: none;position: absolute;top: 100%;left: 0;background: #fff;border: 1px solid #e8e8e8;z-index: -1;}
.select_02 .selectric-items .selectric-scroll {height: 100%;overflow: scroll; overflow-x:hidden}
.select_02 .selectric-above .selectric-items {top: auto;bottom: 100%;}
.select_02 .selectric-items ul,  .select_02 .selectric-items li {list-style: none; padding: 0;margin: 0;height: auto;}
.select_02 .selectric-items li {display: block;padding: 4px;padding-left: 20px;line-height: 28px;color: #777;cursor: pointer;font-size:0.875rem;text-align: left;}

/* select type 03 fullsize */
.select_02 .selectric-wrapper{width: 100%;font-family: 'N-sans', "sans-serif";}
.select_02{display: inline-block;width: 100%;}
.select_02{display: block;}
.select_02 .selectric {width:100%!important;border: 1px solid #e8e8e8;background: #FFFFFF;position: relative;padding: 0 10px;}
.select_02 .selectric .label {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding: 0 10px;font-size:1rem;color: #333333;height: 40px;line-height: 40px;text-align: left;}
.select_02 .selectric .button { background: url(../image/sub/select_arr.png);background-position: 50% 50%;background-repeat: no-repeat;display: block;position: absolute;right: 10px;top: 0;bottom: 0;margin: auto;width: 26px;height: 26px;font-size: 0;}
.select_02 .selectric-open {z-index: 9999;}
.select_02 .selectric-open .selectric-items {display: block;}
.select_02 .selectric-hide-select {position: relative;overflow: hidden;width: 0;height: 0;}
.select_02 .selectric-hide-select select {position: absolute;left: -100%;}
.select_02 .selectric-hide-select.selectric-is-native {position: absolute;width: 100%;height: 100%;z-index: 10;}
.select_02 .selectric-hide-select.selectric-is-native select {position: absolute;top: 0;left: 0;right: 0;height: 100%;width: 100%;border: none;z-index: 1;box-sizing: border-box;opacity: 0;}
.select_02 .selectric-input {position: absolute !important;top: 0 !important;left: 0 !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;margin: 0 !important;padding: 0 !important;width: 1px !important;height: 1px !important;outline: none !important;border: none !important;/**font: 0/0 a !important;*/background: none !important;}
.select_02 .selectric-temp-show {position: absolute !important;visibility: hidden !important;display: block !important;}
/* search - select type 02 box */
.select_02 .selectric-items {display: none;position: absolute;top: 100%;left: 0;background: #fff;border: 1px solid #e8e8e8;z-index: -1;}
.select_02 .selectric-items .selectric-scroll {height: 100%;overflow: scroll; overflow-x:hidden}
.select_02 .selectric-above .selectric-items {top: auto;bottom: 100%;}
.select_02 .selectric-items ul,  .select_02 .selectric-items li {list-style: none; padding: 0;margin: 0;height: auto;}
.select_02 .selectric-items li {display: block;padding: 4px;padding-left: 20px;line-height: 28px;color: #333;cursor: pointer;font-size:0.875rem;text-align: left;}





/* main - select type 04 */
.select_04{display: inline-block;width: auto;}
.list_top .select_04{float: left;margin-left: 10px;}
.select_04 .selectric {width:110px!important;border: 1px solid #e8e8e8;background: #FFFFFF;position: relative;padding: 0 10px;border-radius: 8px;}
.select_04 .selectric .label {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:0.813rem;color: #666;height: 33px;line-height: 37px;text-align: left;}
.select_04 .selectric .button { background: url(../image/sub/path_arr.png);background-position: 50% 50%;background-repeat: no-repeat;display: block;position: absolute;right: 3px;top: 0;bottom: 0;margin: auto;width: 26px;height: 26px;font-size: 0;transform: rotate(90deg);}
.select_04 .selectric-open {z-index: 9999;}
.select_04 .selectric-open .selectric-items {display: block;}
.select_04 .selectric-hide-select {position: relative;overflow: hidden;width: 0;height: 0;}
.select_04 .selectric-hide-select select {position: absolute;left: -100%;}
.select_04 .selectric-hide-select.selectric-is-native {position: absolute;width: 100%;height: 100%;z-index: 10;}
.select_04 .selectric-hide-select.selectric-is-native select {position: absolute;top: 0;left: 0;right: 0;height: 100%;width: 100%;border: none;z-index: 1;box-sizing: border-box;opacity: 0;}
.select_04 .selectric-input {position: absolute !important;top: 0 !important;left: 0 !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;margin: 0 !important;padding: 0 !important;width: 1px !important;height: 1px !important;outline: none !important;border: none !important;/**font: 0/0 a !important;*/background: none !important;}
.select_04 .selectric-temp-show {position: absolute !important;visibility: hidden !important;display: block !important;}
/* search - select Items box */
.select_04 .selectric-items {display: none;position: absolute;top: 100%;left: 0;background: #fff;border: 1px solid #e8e8e8;z-index: -1;border-radius: 8px;}
.select_04 .selectric-items .selectric-scroll {height: 100%;overflow: hidden;}
.select_04 .selectric-above .selectric-items {top: auto;bottom: 100%;}
.select_04 .selectric-items ul,  .select_04 .selectric-items li {list-style: none; padding: 0;margin: 0;height: auto;}
.select_04 .selectric-items li {display: block;padding: 4px;padding-left: 20px;line-height: 28px;color: #777;cursor: pointer;font-size:0.813rem;text-align: left;}



/* main - select type 05 */
.select_05{display: inline-block;width: auto; font-family: 'G-sans', "sans-serif"}
.list_top  .select_05{float: left;}
.select_05 .selectric {width:310px!important;border: 1px solid #e8e8e8;background: #FFFFFF;position: relative;padding: 0 0px;border-radius: 8px;
    background-position: 20px 55%;
    background-repeat: no-repeat;}

.select_05 .selectric .label {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 0.938rem; color: #666;height: 43px;line-height: 45px;text-align: left; box-sizing: border-box; background-image: url(../image/login/icon_bank.png);   background-position: 20px 50%;  background-repeat: no-repeat; padding-left: 55px;}
.select_05 .selectric .button { background: url(../image/sub/path_arr.png);background-position: 50% 50%;background-repeat: no-repeat;display: block;position: absolute;right: 3px;top: 0;bottom: 0;margin: auto;width: 26px;height: 26px;font-size: 0;transform: rotate(90deg);}
.select_05 .selectric-open {z-index: 9999;}
.select_05 .selectric-open .selectric-items {display: block;}
.select_05 .selectric-hide-select {position: relative;overflow: hidden;width: 0;height: 0;}
.select_05 .selectric-hide-select select {position: absolute;left: -100%;}
.select_05 .selectric-hide-select.selectric-is-native {position: absolute;width: 100%;height: 100%;z-index: 10;}
.select_05 .selectric-hide-select.selectric-is-native select {position: absolute;top: 0;left: 0;right: 0;height: 100%;width: 100%;border: none;z-index: 1;box-sizing: border-box;opacity: 0;}
.select_05 .selectric-input {position: absolute !important;top: 0 !important;left: 0 !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;margin: 0 !important;padding: 0 !important;width: 1px !important;height: 1px !important;outline: none !important;border: none !important;/**font: 0/0 a !important;*/background: none !important;}
.select_05 .selectric-temp-show {position: absolute !important;visibility: hidden !important;display: block !important;}
/* search - select Items box */
.select_05 .selectric-items {display: none;position: absolute;top: 100%;left: 0;background: #fff;border: 1px solid #e8e8e8;z-index: -1;border-radius: 8px;}
.select_05 .selectric-items .selectric-scroll {height: 100%;overflow: hidden; overflow-y:auto;}
.select_05 .selectric-above .selectric-items {top: auto;bottom: 100%;}
.select_05 .selectric-items ul,  .select_05 .selectric-items li {list-style: none; padding: 0;margin: 0;height: auto;}
.select_05 .selectric-items li {display: block;padding: 4px;padding-left: 20px;line-height: 28px;color: #777;cursor: pointer;font-size:0.813rem;text-align: left;}



/* search - select type 02 mobile size - radio */
@media screen and (min-width: 1280px) {
    section.sub .select_02.radio{font-family: 'N-sans', "sans-serif";}
    section.sub .select_02.radio .selectric{display: none;}
    section.sub .select_02.radio .selectric-items{display: block;position: static;border:0;}
    /* section.sub .select_02.radio .selectric-items li{display: inline-block;width: 19%;background: url(../image/sub/icon_radio_off.png) 0 6px no-repeat;padding-left:35px;font-size: 1rem;} */
     section.sub .select_02.radio .selectric-items li{position: relative;display: inline-block;width: 19%;font-size: 1rem;padding-left: 32px;}
     section.sub .select_02.radio .selectric-items li.highlighted{background-color: transparent;}
     section.sub .select_02.radio .selectric-items li::before{content:'';display: inline-block;}
    section.sub .select_02.radio .selectric-items li.mob_hidden{display: none}
    section.sub .select_02.radio .selectric-items li label{position:absolute;left:0;top:2px;display: inline-block;}
    }

/* select mobile size */
@media screen and (max-width: 800px) {

  .select_01 .selectric .label {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding: 0 10px;font-size:0.875rem;color: #666;height: 36px;line-height: 37px;text-align: left;}
    section.sub .select_02 .selectric{border-radius: 6px;}
    section.sub .select_02 .selectric .label{ color: #848484; font-size:0.875rem ;}
    section.sub .select_02 .selectric-items .custom_radio{display: none;}

  /* select type 03 fullsize */
  .select_02 .selectric-wrapper{width: 100%;font-family: 'N-sans', "sans-serif";}
  .select_02{display: inline-block;width: 100%;}
  .select_02{display: block;}
  .select_02 .selectric {width:100%!important;border: 1px solid #e8e8e8;background: #FFFFFF;position: relative;padding: 0 10px; border-radius: 6px; margin-bottom: 1px;}
  .select_02 .selectric .label {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding: 0 10px;font-size:0.875rem;color: #333333;height: 38px;line-height: 40px;text-align: left;}
  .select_02 .selectric .button { background: url(../image/sub/path_arr_2.png);background-position: 50% 50%;background-repeat: no-repeat; background-size: contain;display: block;position: absolute;right: 10px;top: 2px;bottom: 0;margin: auto;width: 14px;height: 9px;font-size: 0;}



}

/* 2022.09.01 ssj - select radio 스크롤 제거 */
section.sub .select_02.radio .selectric-items .selectric-scroll{overflow:inherit;}
section.sub .select_02.radio .selectric-items li label{top:6px;}

/* templete_flat 적용 */
.templete_flat .select_04 .selectric,
.templete_flat .select_01 .selectric,
.templete_flat .list_top .select_01 .selectric,
.templete_flat section.sub .content_wrap .sub_con .search_box_wrap.type_01 .search_box .text,
.templete_flat section.sub .content_wrap .sub_con .search_box_wrap.type_01 .search_box .btn_search{border-radius:0;}

/* 230531 박가희수정*/
.selectric:focus-visible{outline:none; position:relative;}
.selectric:focus-visible::after{content:''; position:absolute; width:calc(100% - 4px); height:calc(100% - 4px); top:50%; left:50%; border:2px solid #000; z-index:1; transform:translate(-50%,-50%);}
