/* color */
:root {
    --main-color: #0FB4C8;
    --sub-color: #00808E;
    --red-color: #E72510;
    --white-color: #FFFFFF;
    --black-color: #000000;
}
.mainColorBg{background-color: var(--main-color);}
.mainColorText{color: var(--main-color);}
.redColorText{color: var(--red-color);}

.mobileShow{display: none !important;}
.mobileShowInline{display: none !important;}
.mobileShowInlineflex{display: none !important;}
.tabletShow {display: none !important;}
.tabletShowInline {display: none !important;}

/* btn */
.btnGroup .btnBasic + .btnBasic{margin-left: 5px;}
.btnBasic {display: inline-flex;align-items: center;justify-content: center;height: 42px;padding: 0 15px;border: 1px solid var(--black-color);box-sizing: border-box;font-size: 13px;font-weight: 500;line-height: normal;letter-spacing: -0.4px;text-align: center;cursor: pointer;vertical-align: middle;transition: .3s;-webkit-transition: .3s;}
.btnFontsizeLg{font-size: 15px;}
.btnRadius3{border-radius: 3px;}
.btnRadius5{border-radius: 5px;}
.btnRadius30{border-radius: 30px;}
.btnBgMainColor{background: var(--main-color);border: 1px solid #00808E;color: var(--white-color);}
.btnBgMainColor:hover{color: #fff; opacity: 0.8;}
.btnBgSubColor{background: var(--sub-color);border: 1px solid var(--sub-color);color: var(--white-color);}
.btnBgWhite{background: var(--white-color);border: 1px solid #E4E4E4;color: #333;}
.btnBgWhite:hover{opacity: 0.8;}
.btnBgBlack{background: #31353F;border: 1px solid #31353F;color: #FFF;}
.btnBgLightGray{background: #F3F3F3;border: 1px solid #F3F3F3;color: #8B8B8B;}
.btnBgLightGray:hover{color: #C0C0C0;}
.btnBasic[disabled]{background: #F9F9F9;border: 1px solid #E4E4E4;color: #8B8B8B;}
.wFull{width: 100% !important;}
.w240{width: 240px !important;}
.w81{width: 81px !important;}
.w51{width: 51px !important;}
.h48{height: 48px !important;}
.h33{height: 33px !important;}

/* alert */
.alertWrap{max-width: 350px;width: 100%;padding: 32px 25px 20px;}
.alertIcon{margin: 0 auto 10px;}
.alertText{margin: 0 0 28px;font-size: 16px;color: #333;font-weight: 500;line-height: 150%;letter-spacing: -0.6px;text-align: center;}
.alertBtnGroup{width: 100%;margin: 0;}
.alertBtnGroup button{width: 100%;height: 50px;margin: 0;border-radius: 5px !important;font-size: 14px !important;font-weight: 700;letter-spacing: -0.6px;}
.alertBtnGroup button + button{margin-top: 5px;}
.alertBtnConfirm{background: #fff !important;border: 1px solid #CECECE !important;color: #000 !important;}
.alertBtnCancel{background: #6695C8 !important;border: 1px solid #6695C8 !important;color: #fff !important;}
.alertBtnConfirm:focus, .alertBtnCancel:focus{box-shadow: none !important;}

.dim{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(34, 34, 34, 0.7);opacity: 0;overflow: hidden;visibility: hidden;z-index: 1;}
.dim.show{opacity: 1;visibility: visible;}
.dim.front{z-index: 100;}
.dim.show + header{position: relative;z-index: 1;}
.dim.front + header{z-index: inherit;}

.searchGroup{margin-left: 10%;}
.searchGroup .searchBox{display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: space-between;width: 408px;height: 42px;border: 1px solid #CBCBCB;border-radius: 3px;box-sizing: border-box;}
.searchGroup .searchBox .inputSearch{width: calc(100% - 40px);height: 100%;padding: 0 15px;    border: 0;box-sizing: border-box;font-size: 14px;color: #222;font-weight: 500;line-height: 22px;}
.searchGroup .searchBox .inputSearch::placeholder{font-size: 14px;color: #222;font-weight: 500;line-height: 22px;}
.searchGroup .searchBox .btnSearch{display: block;width: 40px;height: 40px;background-image: url(../images/layout/icon_search_black.svg);background-position: center;background-repeat: no-repeat;overflow: hidden;text-indent: -9999px;white-space: nowrap;}
.userInfoGroup{display: flex;}
.userInfoGroup .user{display: flex;align-items: center;flex-direction: row;margin-right: 20px;}
.userInfoGroup .user:before{content: "";display: block;width: 26px;height: 26px;margin-right: 8px;background-image: url(../images/layout/img_user.svg);background-position: center;background-repeat: no-repeat;}
.userInfoGroup .user .belong{font-size: 16px;color: #222;font-weight: 500;letter-spacing: -0.8px;}
.userInfoGroup .user .name{display: flex;align-items: center;font-size: 16px;color: #666;font-weight: 400;letter-spacing: -0.8px;}
.userInfoGroup .user .name:before{content: "";display: block;width: 1px;height: 8px;margin: 0 10px;background: #E1E1E1;}
.userInfoGroup .userLinkGroup{display: flex;}
.userInfoGroup .userLinkGroup li{margin-right: 5px;}
.userInfoGroup .userLinkGroup li:last-child{margin-right: 0;}
.userInfoGroup .userLinkGroup li a{display: block;padding: 8px 15px;background: #FFF;border: 1px solid #DDD;border-radius: 3px;box-sizing: border-box;font-size: 13px;color: #222;font-weight: 700;line-height: normal;word-break: keep-all;text-align: center;-webkit-transition: .3s;transition: .3s;}
.userInfoGroup .userLinkGroup li a:hover{background: #383C46;border: 1px solid #383C46;color: #fff;text-decoration: underline;}

/* 20240109 START */
.gnbTopGroup{position: fixed;left: 0;top: 70px;width: 100%;-webkit-transform: translateY(-70px);transform: translateY(-70px);-webkit-transition: .5s;transition: .5s;z-index: 98;}
.gnbTopGroup > ul {display: flex;align-items: center;height: 58px;background: #383C46;}
.gnbTopGroup > ul > li {display: flex;align-items: center;height: 100%;}
.gnbTopGroup > ul > li > h2 {display: flex;align-items: center;justify-content: center;width: 150px;height: 100%;background: #383C46;box-sizing: border-box;font-size: 15px;color: #FFF;font-weight: 700;letter-spacing: -0.6px;}
.gnbTopGroup > ul > li > h2 > img{margin-right: 7px;}
.gnbTopGroup > ul > li > ul {display: flex;height: 100%;}
.gnbTopGroup > ul > li > ul > li{background: #55585F;}
.gnbTopGroup > ul > li > ul > li + li{border-left: 1px solid #383C46;}
.gnbTopGroup > ul > li > ul > li > button{position: relative;display: flex;align-items: center;justify-content: flex-start;width: 125px;height: 100%;padding-left: 16px;box-sizing: border-box;font-size: 15px;color: #FFF;font-weight: 400;line-height: 50px;letter-spacing: -0.6px;}
.gnbTopGroup > ul > li > ul > li > button:before{content: "·";margin-right: 3px;font-size: 15px;color: #FFF;font-weight: 400;line-height: 50px;letter-spacing: -0.6px;}
.gnbTopGroup > ul > li > ul > li.ulHas > button{width: 160px;}
.gnbTopGroup > ul > li > ul > li.ulHas > button:after{content: "";position: absolute;top: 50%;right: 11px;display: block;width: 20px;height: 20px;margin-top: -10px;background-image: url(../images/layout/icon_arrow_down.svg);background-position: center;background-repeat: no-repeat;opacity: 0.5;-webkit-transition: .5s;transition: .5s;}
.gnbTopGroup > ul > li > ul > li > ul{display: none;background: #6C6F77;}
.gnbTopGroup > ul > li > ul > li > ul > li + li{border-top: 1px solid rgba(255, 255, 255, 0.15);}
.gnbTopGroup > ul > li > ul > li > ul > li > button{display: flex;align-items: center;justify-content: flex-start;width: 100%;height: 50px;padding-left: 20px;box-sizing: border-box;font-size: 14px;color: #DBE1F0;font-weight: 400;line-height: 50px;letter-spacing: -0.6px;}
.gnbTopGroup > ul > li > ul > li > ul > li > button:before{content: "ㄴ";font-size: 14px;color: #DBE1F0;font-weight: 400;line-height: 50px;letter-spacing: -0.6px;}
.gnbTopGroup > ul > li > ul > li:hover{background: #484D57;}
.gnbTopGroup > ul > li > ul > li:hover > button{font-weight: 700;}
.gnbTopGroup > ul > li > ul > li:hover > button:after{transform: rotate(180deg);}
.gnbTopGroup > ul > li > ul > li:hover > ul{display: block;}
.gnbTopGroup > ul > li > ul > li > ul > li > button:hover{color: #fff;font-weight: 700;text-decoration: underline;}
.gnbTopGroup > ul > li > ul > li > ul > li > button:hover:before {color: #fff;}