@charset "utf-8";

/* 공통 */
#sub .inner_bx {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}


.w160 {max-width: 160px!important;}
.w310 {max-width: 310px!important;}
.w457 {max-width: 457px!important;}
.w600 {max-width: 600px!important;}
.w640 {max-width: 640px!important;}
.w800 {max-width: 800px!important;}


.ttl01 {font-size: 16px; color: #000000; font-weight: 700; letter-spacing: -0.03em; word-break: keep-all; margin-bottom: 20px;}
.ttl01.brb {border-bottom: 1px solid #111111; padding-bottom: 19px; margin-bottom: 27px;}


.btn01 {display: inline-block; box-sizing: border-box; max-width: 120px; width: 100%; text-align: center; line-height: 38px; background-color: #333333; border: 1px solid #333333; border-radius: 5px; font-size: 14px; color: #ffffff; letter-spacing: -0.03em; box-sizing: border-box;}
.btn01.col2 {background-color: #1d6d43; border-color: #1d6d43;}
.btn01.col3 {background-color: #fff; border-color: #aaaaaa; color: #666666;}
.btn01.col4 {background-color: #aaaaaa; border-color: #aaaaaa;}
.btn01.col5 {background-color: #3470f7; border-color: #3470f7;}

.btn02 {display: inline-block; box-sizing: border-box; padding: 0 14px; text-align: center; line-height: 28px; background-color: #333333; border: 1px solid #333333; border-radius: 5px; font-size: 12px; color: #ffffff; letter-spacing: -0.03em; box-sizing: border-box;}
.btn02.col2 {background-color: #1d6d43; border-color: #1d6d43;}
.btn02.col3 {background-color: #fff; border-color: #aaaaaa; color: #666666;}
.btn02.col4 {background-color: #aaaaaa; border-color: #aaaaaa;}
.btn02.col5 {background-color: #3470f7; border-color: #3470f7;}
.btn02.col6 {background-color: #fff; border-color: #3470f7; color: #3470f7;}

.btm_btn {text-align: center; font-size: 0; margin-top: 40px; position: relative; z-index: 1; min-height: 30px;}
.btm_btn.left {text-align: left;}
.btm_btn.right {text-align: right;}
.btm_btn a {max-width: 160px; display: inline-block; line-height: 48px; background-color: #3470f7; border: 1px solid #3470f7; text-align: center; border-radius: 5px; font-size: 14px; color: #ffffff; font-weight: 700; letter-spacing: -0.03em; width: 100%; margin-right: 5px;}
.btm_btn a.type2 {max-width: 90px; line-height: 28px; font-size: 12px;}
.btm_btn a:last-child {margin-right: 0;}
.btm_btn a.f_l {float: left;}
.btm_btn a.f_r {float: right;}
.btm_btn a.col2 {background-color: #1d6d43; border-color: #1d6d43;}
.btm_btn a.col3 {background-color: #fff; border-color: #aaaaaa; color: #666666;}
.btm_btn a.col4 {background-color: #aaaaaa; border-color: #aaaaaa;}
.btm_btn a.col5 {background-color: #111111; border-color: #111111;}
.btm_btn a.reset1 {max-width: auto; width: auto; padding-right: 41px; padding-left: 17px; background-color: transparent; border-color: transparent; color: #aaaaaa; background: url(../images/icon/reset1.png) no-repeat right 17px center;}
.btm_btn .page_bx1 {position: absolute; width: 100%; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%); padding-top: 0; z-index: -1;}
.btm_btn .page_bx1 a {max-width: none; width: auto; background-color: transparent; border: none;}


.tab_bx1 {margin-bottom: 20px;}
.tab_bx1 ul {font-size: 0; margin-bottom: -6px;}
.tab_bx1 ul li {display: inline-block; margin-right: 6px; margin-bottom: 6px;}
.tab_bx1 ul li a {width: 160px; display:flex; justify-content:center; align-items:center; table-layout:fixed; padding: 5px; height: 50px; border-radius: 10px; background-color: #eeeeee; text-align: center; font-size: 16px; color: #444444; line-height: 20px; letter-spacing: -0.05em; font-weight: 700; box-sizing: border-box; cursor: pointer;}
.tab_bx1 ul li a.on {background-color: #3470f7; color: #fff;}



.popup_bx {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10000; background-color: rgba(0,0,0,0.2);; overflow: auto; box-sizing: border-box; padding: 50px 0; display: none;}
.popup_bx .pop_w {display: table; width: 100%; height: 100%; table-layout: fixed; min-width: 1024px}
.popup_bx .pop_inner {display: table-cell; height: 100%; vertical-align: middle;}
.popup_bx .pop_con {background-color: #fff; border-radius: 10px; margin: 0 auto; max-width: 1260px; width: calc(100% - 40px); margin: 0 auto; padding: 30px 30px 20px; box-sizing: border-box; position: relative;}
.popup_bx .pop_con .close1 {position: absolute; right: 27px; top: 35px; width: 30px; height: 30px; cursor: pointer; font-size: 0; background: url(../images/icon/close1.png) no-repeat center; z-index: 1;}



.loading01 {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10100; background-color: rgba(0,0,0,0.2);; overflow: auto; box-sizing: border-box; padding: 50px 0;}
.loading01 .loading_w {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
.loading01 .loading_w .icon_bx {text-align: center;}
.loading01 .loading_w .icon_bx .icon {width: 80px; height: 80px; margin: 0 auto; position: relative;}
.loading01 .loading_w .icon_bx .txt {font-size: 16px; color: #ffffff; line-height: 26px; letter-spacing: -0.03em; word-break: keep-all; font-weight: 700; margin-top: 15px;}

.loading01 .loading_w .icon_bx .icon > div {position: absolute; width: 8px; height: 22px; border-radius: 4px; background-color: #fff; animation: mulShdSpin 1s infinite ease;}
.loading01 .loading_w .icon_bx .icon > .bar1 {opacity: 1; top: 0; left: 50%; margin-left: -4px;}
.loading01 .loading_w .icon_bx .icon > .bar2 {opacity: 0.875; transform: rotate(45deg); left: 57px; top: 9px; animation-delay: 0.125s;}
.loading01 .loading_w .icon_bx .icon > .bar3 {opacity: 0.75; transform: rotate(90deg); right: 7px; top: 29px; animation-delay: 0.25s;}
.loading01 .loading_w .icon_bx .icon > .bar4 {opacity: 0.625; transform: rotate(135deg); left: 57px; top: 50px; animation-delay: 0.375s;}
.loading01 .loading_w .icon_bx .icon > .bar5 {opacity: 0.5; bottom: 0; left: 50%; margin-left: -4px; animation-delay: 0.5s;}
.loading01 .loading_w .icon_bx .icon > .bar6 {opacity: 0.375; transform: rotate(45deg); left: 15px; top: 50px; animation-delay: 0.625s;}
.loading01 .loading_w .icon_bx .icon > .bar7 {opacity: 0.25; transform: rotate(90deg); left: 7px; top: 29px; animation-delay: 0.75s;}
.loading01 .loading_w .icon_bx .icon > .bar8 {opacity: 0.125; transform: rotate(135deg); left: 15px; top: 9px; animation-delay: 0.875s;}

@keyframes mulShdSpin {
  0%, 100% {opacity: 1;}
  12.5% {opacity: 0.875;}
  25% {opacity: 0.75;}
  37.5% {opacity: 0.625;}
  50% {opacity: 0.5;}
  62.5% {opacity: 0.375;}
  75% {opacity: 0.25;}
  87.5% {opacity: 0.125;}
}



/* login */
#login {background-color: #f1f4f6; padding: 190px 0; box-sizing: border-box; min-height: 980px; display:flex; justify-content:center; align-items:center; table-layout:fixed; font-family: 'Pretendard', sans-serif!important;}
#login .box1 {max-width: 620px; padding: 100px 30px 104px; box-shadow: 0 20px 60px rgba(63,128,234,0.06);}
/*#login .inner_bx {max-width: 620px!important; box-shadow: 0 20px 60px rgba(63,128,234,0.06); background-color: #fff; border-radius: 20px; padding: 100px 30px 104px;}*/
#login .logo {display: block; margin: 0 auto 60px;}
#login .f_bx input[type=text], #login .f_bx input[type=password], #login .f_bx input[type=email], #login .f_bx input[type=tel] {width: 100%; border: 1px solid #dddddd; height: 60px; box-sizing: border-box; border-radius: 10px; padding: 0 20px; font-size: 18px; color: #444444; letter-spacing: -0.03em; word-break: keep-all; margin-top: 10px; outline: none; font-family: 'Pretendard', sans-serif!important;}
#login .f_bx input[type=text]::placeholder, #login .f_bx input[type=password]::placeholder, #login .f_bx input[type=email]::placeholder, #login .f_bx input[type=tel]::placeholder {color: #aaaaaa;}
#login .f_bx .chk01 {font-size: 0; margin-top: 20px; padding-bottom: 10px;}
#login .f_bx .chk01:last-child {padding-bottom: 0;}
#login .f_bx .chk01 li {display: inline-block; position: relative; margin-right: 30px;}
#login .f_bx .chk01 li:last-child {margin-right: 0;}
#login .f_bx .chk01 li input {position: absolute; left: 0; top: 0; background: url(../images/icon/chk1.png) no-repeat center; border-radius: 50%; box-sizing: border-box; border: 1px solid #dedede; width: 20px; height: 20px; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;}
#login .f_bx .chk01 li input:checked {background: url(../images/icon/chk2.png) no-repeat center #3470f7; border-color: #3470f7;}
#login .f_bx .chk01 li label {padding-left: 26px; display: inline-block; font-size: 16px; color: #444444; letter-spacing: -0.03em; line-height: 20px; cursor: pointer;}
#login .btn {display: block; margin-top: 30px; width: 100%; background-color: #3f80ea; border-radius: 10px; line-height: 70px; text-align: center; font-size: 20px; color: #ffffff; font-weight: 700; letter-spacing: -0.03em;}