@charset "utf-8";
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
body {font-family: 'Noto', sans-serif;}
.loginWrap{overflow:hidden; display:flex; width:100%; height:100vh; } 

    .loginWrapLeft, .loginWrapRight{flex:1;}

    .loginWrapLeft{overflow:hidden; position: relative;}
        
        .swiper_login{height:100%;}
        .swiper_login .swiper-slide{background-size:cover !important; position: relative; height:100vh;}
        .swiper_login .swiper-slide:before{position: absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.3; content:'';}
        .swiper_login .swiper-slide.swiperLoginImg01{background:url('../../_images/login/back_login01.png');}
        .swiper_login .swiper-slide.swiperLoginImg02{background:url('../../_images/login/back_login02.png');}
        .swiper_login .swiper-slide.swiperLoginImg03{background:url('../../_images/login/back_login03.png');}
        .swiper_login .swiper-pagination{bottom:13%; left:5%; text-align: left;}
        .swiper_login .swiper-pagination-bullet{margin:0 !important; margin-right:10px !important; width:14px; height:14px;}

        .swiper_login .txtWrap{color:#fff; text-align: left; position: absolute; left: 5%; top: 56%; line-height: 1;}
        .swiper_login .txtWrap .tit{margin-bottom:40px; font-size:60px; font-weight:500; }
        .swiper_login .txtWrap .des{font-size:28px; font-weight:100; opacity:.5; line-height: 1.4;}


    .loginWrapRight{position:relative; background:url('../../_images/common/back_pattrn.jpg') no-repeat var(--navy); background-size: cover;}

        .loginWrapRight__header{padding:40px 50px; color:#fff; display: flex; justify-content: space-between; align-items: end;}
        .loginWrapRight__header:after{content: initial;}
		.loginWrapRight__header img{width:210px;}
        .loginWrapRight__header a i{color:#fff; margin-left:10px; opacity: .3; font-size: 30px; }
        .loginWrapRight__header a i:hover{color:var(--orange); opacity:1;}

        .loginBox{overflow: auto; padding:60px 40px; background:#fff; border-radius: 20px; width:50%; max-height: calc(100vh - 225px); position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
            .loginBox .loginBox__header{margin-bottom:20px;}
			.loginBox .loginBox__header img{width:150px;}

			.loginBox .footer{ display:flex; justify-content: center; align-items:center; height:70px; background:var(--navy); border-radius:100px; color:#fff; font-size: 20px; font-weight:600; box-shadow: var(--boxShadow); cursor:pointer;}
            .loginBox .footer span{color: var(--orange);}
            .loginBox .footer i{/*margin-top:-2px;*/ margin-left:5px; transition:.5s; opacity: .5; font-size:29px;}
            .loginBox .footer:hover{background:#000;}
            .loginBox .footer:hover i{transform:translate(10px, 0);}
            .loginBox .footer p{display:flex; }
            .loginBox .footer p span{margin-left:5px;}

            .loginBox .tab{margin-bottom: 30px; overflow: hidden; display:flex; border-radius: 4px;}
            .loginBox .tab li{opacity:.5; flex:1; padding: 15px 0; text-align: center; background:#959595; color:#fff;  font-size:18px; font-weight:300;}
            .loginBox .tab li.onTab{background:var(--navy); opacity: 1; font-weight:500;}
            
            .loginBox .tabContWrap .tabCont li{padding:10px 0; display: flex; border-bottom:1px solid var(--lineColor);}
            .loginBox .tabCont i{font-size:40px;}
            .loginBox .tabCont input{padding:7px 0 0 10px; width:100%; /*height: 40px; line-height: 40px;*/ }
            .loginBox .tabCont input::placeholder{font-weight:100;}

            .loginBox .recovPass{/*display:flex; justify-content: flex-end;*/ margin:20px 0 40px; text-align: right; font-size: 14px; color:#666666; }
           .loginBox .recovPass a{display:flex; align-items: center; justify-content: flex-end;}
            .loginBox .recovPass i{margin-top:2px; margin-right:5px; color:var(--orange); font-size:20px;}
            .loginBox .recovPass p{display:inline-block; /*margin-left: 5px;*/}
            .loginBox .recovPass p:hover{color:var(--orange);}



@media screen and (max-width:1679px){
    .swiper_login .txtWrap .tit{margin-bottom:30px; font-size:50px;}
    .swiper_login .txtWrap .des{font-size:24px;}

    .loginBox{padding:40px;}
    .loginBox .tab{margin-bottom:20px;}
    .loginBox .header img{width:140px;}

    .loginBox .recovPass{margin:20px 0;}
}

@media screen and (max-width:1439px){
    .loginBox{width:60%;}
	.loginWrapRight__header{padding:40px 30px;}
}

@media screen and (max-width:1279px){
    .swiper_login .txtWrap .tit{font-size:40px;}
    .swiper_login .txtWrap .des{font-size:20px;}
    
    .loginBox{width:60%;}
	.loginBox .tabCont i{font-size:30px;}
    
}

@media screen and (max-width:1023px){
    .loginWrapLeft{display:none;}
    .loginWrapRight{width:100%;}
}

@media screen and (max-height: 770px){
	.loginBox{top:55%;}
}

@media screen and (max-width: 767px){
    .loginWrapRight__header{padding:40px 30px;}
    .loginBox {width: calc(100% - 60px);}
}

@media screen and (max-width: 479px){
    .loginWrapRight__header {padding: 40px 20px;}
    .loginWrapRight__header img{width:160px;}
    .loginWrapRight__header a i{margin-left:0; font-size:24px;}

    .loginBox {padding:30px;}
    .loginBox .tab li{padding:10px 0;}
    .loginBox .tabCont input{padding:2px 0 0 10px;}
}

@media screen and (max-width: 340px){
    .loginBox {padding:30px 20px; width: calc(100% - 30px);}
	.loginBox .footer button{font-size:16px; }
    .loginWrapRight__header {padding: 40px 15px;}
    }


/* 20230324 */
.loginWrap{overflow:initial; }

	.swiper_login .swiper-slide{height:100%;}

	.loginWrapRight{padding-bottom:30px;}
	.loginBox{overflow:initial; max-height:initial;}
	

@media all and (max-height:600px){
	.loginWrap{height:auto; /*min-height:100vh;*/}
	.loginBox{position: initial; transform: initial; margin: 0 auto;}
}


/* start : modal */
.modal{position:fixed;width:100%;height:100%;top:0;left:0;bottom:0;background-color:rgba(0,0,0,.8);z-index: -1;opacity:0;transition:all 0.2s;}
.modal.on{opacity:1;z-index:999;}
div.dim_content { padding:30px 40px 0; min-height:250px; text-align:center; font-size:18px; line-height:150%; color:#666; margin-bottom:100px;  }
div.dim_guide_text { margin:50px; text-align:left;  }
div.dim_guide_text p {width:100%; font-size:14px; color:#666; line-height:140%; text-indent: -1em; margin:3px 0; }
div.modal_container {position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); width:80%; max-width:760px; max-height:80%; background:#fff; z-index:999; border-radius:10px;  }
div.dimbtn_close_alone { width:100%; text-align:right; padding:20px; }
div.dimbtn_close_alone button {width:auto !important;}
div.dimbtn_close_alone i {  font-size:40px; background:#fff; color:#333;  }
div.dim_content { padding:0 40px 0; min-height:250px; text-align:center; font-size:18px; line-height:150%; color:#666; margin-bottom:100px;  }
div.dim_guide_text { margin:50px; text-align:left;  }
div.dim_guide_text p {width:100%; font-size:14px; color:#666; line-height:140%; text-indent: -1em; margin:3px 0; }
div.dim_content p.ico { color:#151531; font-size:140px; height:120px;}
p.linebar { width:60px; height:8px; background:#b6b6b6; margin:40px auto; }
dl.dim_add { margin:0 0 60px;}
dl.dim_add dt { font-size:22px; color:#000; font-weight:500; margin-bottom:5px;  }
dl.dim_add dd { font-size:16px; color:#555;  }
dl.dim_add dd.point { font-size:28px; color:var(--navy);  font-weight:500; }
/* end : modal */

/* start : 아이디/비밀번호찾기 */
.findUser {font-family: 'Pretendard-Regular';}
.findUser div.modal_container {overflow-y:scroll;}
.findUser div.modal_container::-webkit-scrollbar {
    width:5px;  /* 스크롤바의 너비 */
    background-color:transparent;
}
.findUser div.modal_container::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background-color:transparent;
}
.findUser div.modal_container::-webkit-scrollbar-track {
    background-color:transparent;
}
.findUser .tabBtn {display:flex; flex-direction:row; justify-content:space-between; width:calc(100% - 2px);}
.findUser .tabBtn li {font-size:16px; width:calc(50% - 2px); height:80px; line-height:80px; text-align:center; cursor:pointer; position:relative; border-bottom:2px solid #838387; box-sizing:border-box;}
.findUser .tabBtn li.active {border-bottom:2px solid #111111;}
.findUser .tabBtn li.active p {color:#111111; font-weight:bold;}
.findUser .tabBtn li:nth-child(2) {margin-left:4px;}
.findUser .tabBtn li p {font-family: 'Pretendard-Regular'; font-size:32px; font-weight:400; color:#838387;}
.findUser .tabBtn::after {content:initial; }
.findUser .tabCon.active {display:block;}
.findUser .tabCon {display:none;}
.findUser .info {text-align:left; padding:20px 0 10px 0;}
.findUser .info i {font-size:26px; margin-right:5px; color:var(--orange);}
.findUser .info span {font-size:16px;}
.findUser .tabBox {}
.findUser .tabBox .box {padding:30px 0 14px 0; }
.findUser .info_box {position:relative; text-align:left; margin-bottom:31px; width:100%; display:flex; flex-direction:row;}
.findUser .info_box::after {content:initial;}
.findUser .info_box label {width:33%; position:relative; font-size:16px; font-weight:400; color:#333; line-height:1.5;}
.findUser .info_box label p::after {content:''; width:5px; height:5px; background-color:#FF6600; position:absolute; top:0px;right:-8px;}
.findUser .info_box label p {position:relative; display:inline; font-size:18px; font-weight:500; color:#111111;}

.findUser .info_box label span {display:block; font-size:14px; font-weight:500; color:#999999;}
.findUser .info_box input {width:100%; height:50px; border:1px solid #DDDDDD; box-sizing:border-box; padding-left:16px; border-radius:4px; font-family: 'Pretendard-Regular'; font-size:18px; font-weight:500; color:#111111;}
.findUser .btnBox {display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
.findUser .btnBox button {font-family: 'Pretendard-Regular'; width:calc(50% - 3px); height:56px; line-height:56px; font-size:18px; font-weight:500; color:#EEEEEE; border-radius:4px; text-align:center;}
.findUser .btnBox button.confirm {background-color:#151531; }
.findUser .btnBox button.cancel {background-color:#838387;}
.findUser .btnBox button:hover {background-color:#000; color:#f6f6f6; transition:all 0.3s;}
.findUser input:focus {border:1px solid #FF6600; box-sizing:border-box; box-shadow:3px 3px 8px rgba(0,0,0,0.1);}

/* end : 아이디/비밀번호찾기 */

/* start : 개인정보수집 */
#privacy {overflow:hidden; font-family: 'Pretendard-Regular';}
#privacy div.modal_container {height:80%; overflow-y:scroll;}
#privacy div.modal_container::-webkit-scrollbar {
    width:10px;
}
#privacy div.modal_container::-webkit-scrollbar-track {
    background-color:transparent;
}
#privacy div.modal_container::-webkit-scrollbar-thumb {
    background-color:transparent;
}
#privacy div.dim_content {text-align:left !important;}
#privacy h1 {
    font-size:32px;
    font-weight:700;
    padding-bottom:10px;
    color:#111111;
    line-height:1;
}
#privacy .privacyInfo {
    border-bottom:2px solid #111111;
    box-sizing:border-box;
    padding-bottom:23px;
    margin-bottom:20px;
}
#privacy .privacyInfo p{
    font-size:16px;
    font-weight:400;
    color:#999999;
    line-height:1.2;
}
#privacy .privacyInfo p span {
    display:inline-block;
    color:#ee6331;
}
#privacy .privacyInfo p:nth-child(2) {
    padding:20px 0;
}
#privacy .dim-inner {
    width:100%;
    height:160px;
    box-sizing:border-box;
    border:1px solid #DDDDDD;
}
#privacy .confirmBox {
    width:100%;
    padding:20px;
    height:100%;
    overflow-y:scroll;
}
#privacy .confirmBox::-webkit-scrollbar {
    width:5px;
}
#privacy .confirmBox::-webkit-scrollbar-thumb {
    background-color:#DDDDDD;
    border-radius:3px;
}
#privacy .confirmBox::-webkit-scrollbar-track {
    background-color:transparent;
}
#privacy .confirmBox strong {
    display:block;
    font-size:18px;
    font-weight:500;
    color:#000000;
    padding-bottom:15px;
}
#privacy .confirmBox dl {
    line-height:1.2;
}
#privacy .confirmBox dl dt,
#privacy .confirmBox dl dd,
#privacy .confirmBox dl p,
#privacy .confirmBox dl span {
    font-size:14px;
    font-weight:400;
    color:#838387;
}
#privacy .confirmBox dl dt {
    padding-bottom:5px;
}
#privacy .confirmBox dl dd {
    padding-bottom:18px;
}
#privacy .confirmBox dl p {
    padding:5px 0;
}
#privacy .confirmBox dl span {
    display:block;
    padding-top:5px;
}
#privacy .confirmBox dl span b {
    font-size:0.7em;
}
#privacy .cofirmCheck  {
    display:flex; 
    flex-direction:row;
    align-items:center;
    justify-content:end;
    padding:18px 0 40px 0;
}
#privacy .confirmBox label {

}
#privacy .cofirmCheck label {
    font-size:16px;
    font-weight:400;
    color:#555555;
    margin-left:6px;
}
#privacy .cofirmCheck input:focus {
    box-shadow:none !important;
}
#privacy .cofirmCheck input[type=checkbox] {
    position: relative;
    border:2px solid #DDDDDD;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    opacity: .5;
    border-radius:4px;
    overflow:hidden;
}
#privacy .cofirmCheck input[type=checkbox]:hover {
    opacity: 1;
}
#privacy .cofirmCheck input[type=checkbox]:checked {
    background-color:transparent;
    opacity: 1;
}
#privacy .cofirmCheck input[type=checkbox]:checked::before {
    border:solid #555;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
}
#privacy .cofirmCheck input[type=checkbox]:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 4px;
    height: 10px;
    z-index: 2;
}
#privacy .submitBox {
    margin-top:20px;
    display:flex; 
    flex-direction:row;
    align-items:center;
    justify-content:end;
}
#privacy .infoBox {
    margin-bottom:46px;
}
#privacy .infoBox ul li:nth-child(2) {
    padding:30px 0;
}
#privacy .info_box {position:relative; text-align:left; width:100%; display:flex; flex-direction:row;}
#privacy .info_box::after {content:initial;}
#privacy .info_box label {width:38%; position:relative; font-size:16px; font-weight:400; color:#333; line-height:1.5;}
#privacy .info_box label p::after {content:''; width:5px; height:5px; background-color:#FF6600; position:absolute; top:0px;right:-8px;}
#privacy .info_box label p {position:relative; display:inline; font-size:18px; font-weight:500; color:#111111;}

#privacy .info_box label span {display:block; font-size:14px; font-weight:500; color:#999999;}
#privacy .info_box input {width:62%; height:50px; border:1px solid #DDDDDD; box-sizing:border-box; padding-left:16px; border-radius:4px;  font-family: 'Pretendard-Regular'; font-size:18px; font-weight:500; color:#111111;}
#privacy .btnBox {display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
#privacy .btnBox button {width:calc(50% - 3px); height:56px; line-height:56px; font-family: 'Pretendard-Regular'; font-size:18px; font-weight:500; color:#EEEEEE; border-radius:4px; text-align:center; }
#privacy .btnBox button.confirm {background-color:#151531; }
#privacy .btnBox button.cancel {background-color:#838387;}
#privacy .btnBox button:hover {background-color:#000; color:#f6f6f6; transition:all 0.3s;}
#privacy input:focus {border:1px solid #FF6600; box-sizing:border-box; box-shadow:3px 3px 8px rgba(0,0,0,0.1);}
#privacy .descBox {font-size:14px; font-weight:500; color:#999999; padding-top:15px; text-align:right; line-height:1;}

/* end : 개인정보수집 */


@media screen and (max-width:1600px) {
    #loginPage .info {padding-left:0;}
    #loginPage .info .textBox h1 {font-size:2em; padding-bottom:25px;}
    #loginPage .info .textBox p {font-size:1.1em;}
}
@media screen and (max-width:1023px) {
    #loginPage .inner {display:block;}
    #loginPage .inner >div {width:100%;}
    #loginPage .info {height:30%;}
    #loginPage .login {height:70%;}
    #loginPage .info .textBox {text-align:center;}
    #loginPage .info .textBox h1 {font-size:1.5em;}
    #loginPage .info .textBox p {font-size:1em;}
    #loginPage .log_basic_btn_wrap {top:30px; right:20px;}
}
@media screen and (max-width:968px) {
    #privacy .info_box label {width:45%; }
    #privacy .info_box input { width:55%; }
    .findUser .tabBtn li {height:50px; line-height:50px;}
    .findUser .tabBtn li p {font-size:21px;}
}
@media screen and (max-width:767px) {
    .findUser .tabBtn li {font-size:16px;}
    .findUser .info_box label {width:30%;}
    .findUser .info_box input {width:70%;}
    div.dim_content p.ico {font-size:120px;}
    #privacy .dim-inner {height:200px;}
    #privacy .confirmBox dl  {padding-bottom:10px;}
    #privacy .confirmBox dl dt::before {display:none;}
    #privacy .confirmBox dl dt {font-size:18px;}
    #privacy .confirmBox dl dd {font-size:16px; padding-left:0; }
    #privacy .confirmBox dl dd p span {padding-left:0;}
    #privacy h1 {font-size:26px;}
    #privacy .info_box {display:block; }
    #privacy .info_box label { width:100%; }
    #privacy .info_box input { width:100%; }
    #privacy .privacyInfo p {line-height:1.3;}
    #privacy .privacyInfo p br {display:none;}
    #privacy .cofirmCheck label {line-height:1.2;}
    #privacy .btnBox button {font-size:16px; height:50px; line-height:50px;}
    .findUser .btnBox button {font-size:16px; height:50px; line-height:50px;}
}
@media screen and (max-width:479px) {
    #loginPage .info {height:25%;}
    #loginPage .login {height:75%;}
    #loginPage .info .textBox h1 {font-size:1.1em; padding-bottom:0;}
    #loginPage .info .textBox p {display:none;}
    #loginPage .login .textBox {width:300px;}
    #loginPage .login button p {font-size:18px;}
    #loginPage .login .topBox a {font-size:16px;}
    #loginPage .log_basic_btn_wrap {top:20px;}
    .findUser .tabBox .box {padding-top:30px;}
    .findUser .info_box {display:block;}
    .findUser .info_box label {width:100%;}
    .findUser .info_box input {width:100%;}
    .findUser .btnBox {width:100%; display:flex; flex-direction:row;}
    .findUser .btnBox::after {content:initial;}
    div.dim_content {padding:0 20px;}
    .findUser .tabBtn li {font-size:14px;}
    div.modal_container {width:90%;}
    div.dimbtn_close_alone button {height:auto !important; line-height:initial !important;}
    div.dimbtn_close_alone i {font-size:30px;}
    div.dim_content {min-height:initial !important; margin-bottom:50px;}
    div.dim_content p.ico {font-size:80px; height:auto;}
    div.dim_content br {display:none;}
    p.linebar {margin:20px auto;}
    dl.dim_add {margin:0;}
    .findUser .tabBtn li p {font-size:18px;}
    .findUser .info_box label {display:block; margin-bottom:8px; line-height:1;}
    .findUser .info_box label span {display:inline-block; padding-left:10px; font-size:12px;}
}
@media screen and (max-width:300px) {
    #loginPage .login .textBox {width:90%;}
}