@charset "UTF-8"; 

/*intro*/
.login-wrapper{height:270px; padding-top:100px; background: url('../img/main/index-bg.jpg') center top no-repeat; background-size: 100% 100%; text-align: center; box-sizing: border-box}
.login-wrapper h2{position:relative; font-size:17px; text-align:center; letter-spacing: -0.08em; color:#181818}

.login-wrapper h2:before{content:''; position:absolute; display:block; top:-25px; left:50%; transform: translateX(-50%); width:125px; height:25px; background:url('../img/common/login_logo.png') no-repeat; background-size: 100% auto }
.login-wrapper h2 em{position:relative; display:block; font-size: 28px; font-weight:bold; padding-top: 10px; margin:0 auto; letter-spacing: -2px}
.login-wrapper h2 span{display:inline-block; padding:20px 20px 0; background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_hello_73.png) no-repeat right 0; background-size: 24px auto}
.login-wrapper p { display: inline-block; width:240px; height:34px; padding:10px 16px 0; margin: 25px auto 0; background-color:#fff; font-size:13px; border-radius: 18px; text-align:center; letter-spacing:-0.08em; font-weight:normal; color:#606060; border:1px solid #fff; box-sizing: border-box}
.login-wrapper p:hover{border:1px solid #e74d4c}
.login-wrapper p a { color: #6a9935; text-decoration: underline; font-weight: 700}
.member-wrapper{ position:relative; margin: 14px 11px; padding-right:80px; border:1px solid #6ca437; background: #6ca437}
.member-wrapper input{width:100%; border:0 none; height:43px; letter-spacing: -1px; font-weight:500; box-sizing: border-box}
.member-wrapper .btn-login{position:absolute; top:0; right:0; display:block; width:80px; height: 43px; ; line-height:25px; padding-top: 10px; text-indent:0; text-align: center; color: #fff !important; font-size: 15px; font-weight: 700; letter-spacing: -0.08em; box-sizing: border-box}
.member-wrapper:hover{border:1px solid #e74d4c}
.member-wrapper:hover .btn-login{background:#e74d4c}
.info-wrapper{margin: 14px 11px}
.info-wrapper ul {border:1px solid #b3b3b3; border-bottom:none}
.info-wrapper ul:before,.info-wrapper ul:after {content: ""; display: block; clear: both}
.info-wrapper ul li {float:left; position:relative; width:33%; padding:15px 0; text-align:center}
.info-wrapper ul li:nth-child(2){width:34%}
.info-wrapper ul li dl{border-right:1px solid #e8e8e8}
.info-wrapper ul li:last-child dl{border-right:none}
.info-wrapper ul li dt {position:relative; font-size:12px; font-weight:700; letter-spacing:-0.08em; padding-top: 33px; padding-bottom:9px}
.info-wrapper ul li dt:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); display:block; width:32px; height:31px; background-position:center 6px; background-repeat: no-repeat; background-size:auto 19px}
.info-wrapper ul li:nth-of-type(1) dt:before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_login_step_1.png)}
.info-wrapper ul li:nth-of-type(2) dt:before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_login_step_2.png)}
.info-wrapper ul li:nth-of-type(3) dt:before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_login_step_3.png); background-size:auto 23px; transform:translateX(-45%)}
.info-wrapper ul li dt:after {content:''; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:10px; height:1px; background:#c9c9c9; }
.info-wrapper ul li dd {padding-top: 7px; font-size:10px; color:#8a8a8a; letter-spacing:-0.08em; line-height:1.4}
.info-warning {color:#fff; background:#4c4c4c; font-size:10px; padding:10px; letter-spacing: -0.5px; line-height:1.4; font-weight:normal}
.info-warning span {display:block; padding-bottom: 3px}

/*login*/
#frm-login{margin: 0 30px; padding-top:0px; margin-bottom: 12px; }
/* #frm-login::before{content:""; position:absolute; top:60px; left:50%; display:block; width:162px; height:34px; margin-left:-81px; background:url('../img/common/login_logo.png') 50% 0 no-repeat; background-size: 100% auto; } */
#frm-login input[type="text"], #frm-login input[type="password"] {display: block; width: 100%; margin-bottom:9px; height: 40px; border: 1px solid #ddd; font-size: 14px; border-radius: 0; box-sizing: border-box}
#frm-login input[type="text"]:focus, 
#frm-login input[type="password"]:focus { border: 1px solid #a2c283; }
.loginChk {margin:0 20px 15px 0}
.loginChk label {font-size:14px; color:#333333; letter-spacing: -1px}
#frm-login .btn-login {display: block; margin-top:9px; background: #76a944; box-sizing: border-box; height: 49px; width:100%; text-indent:0; text-align: center; color: #fff !important; font-size: 16px; line-height: 1; padding: 16px 0; font-weight: 700; letter-spacing: -0.08em }
#frm-login .btn-login.joinBtn{background:#a2a2a2}
.login-sub-link { position:relative; text-align: center}
.login-sub-link ul {display:inline-block}
.login-sub-link ul:before, .login-sub-link ul:after { content: ""; display: block; clear: both; }
.login-sub-link li { float:left; display:inline-block }
.login-sub-link li a { position:relative; font-size: 12px; line-height: 1; box-sizing: border-box; display: block; padding: 6px 7px; color:#7e7e7e; letter-spacing: -1px}
.login-sub-link li:not(:first-child) a:before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); display: block; width: 1px; height: 11px; background: #ebebeb; }

#frm-login .chk label:before{top:1px}

.joinWrap{position:relative}
#frm-login h2 { padding:50px 0px 20px 0px; text-align:center; }
#frm-login h2 a { display:inline-block; width:60%; padding:10px; margin:0px auto; text-align:center; }
#frm-login h2 a img { margin:0px auto; }
/* .joinLogo{position:absolute; top:40px; left:50%; display:inline-block; width:200px; height:50px; margin-left:-100px; font-size:0} */

.login_msg{display:block; width:100%; min-height:23px; line-height: 15px; margin-bottom:-2px; padding:0 0 18px; font-size:11px; letter-spacing:0; color:#be271d; background:#fff; box-sizing: border-box; z-index:10}


.sns_list { padding:20px 0px 30px 0px; }
.sns_list ul { padding-bottom:6px; }
.sns_list li {border:1px solid #000; margin:0px 30px 6px 30px; height:40px; }
.sns_list li a { display:block; padding:0px 0px 0px 7px; line-height:38px; text-align:center; }
.sns_list li img { display:inline-block; padding:0px; margin:0px; width:30px; height:auto; vertical-align:middle; margin-right:10px; font-size:0px; line-height:0px;  }
.sns_list li span { display:inline-block; width:105px; vertical-align:middle; text-align:left; }
.sns_list li span b { display:inline-block; }


.sns_join_list {padding-top: 20px;}
.sns_join_list ul{padding-bottom: 6px;}
.sns_join_list li {border:  solid 1px #dddddd;padding: 6px 30px;height:44px; position:relative; text-align:center;}
.sns_join_list li img{position:absolute;width: 26px;left:calc(50% - 70px);top: 10px;}
.sns_join_list li span{margin-left:40px; line-height:32px; font-weight:bold; letter-spacing:-1px; width:105px; display:inline-block; text-align:left;}



/* 회원가입, 비밀번호 찾기 */
.frmMem { margin: 0 30px; padding: 20px 0 }
.frmMemSignup { background-size: 161px 32px; }
.frmMem fieldset { margin: 18px 0}
.frmMem fieldset.mt0{margin-top:0}
.frmMem fieldset.bg {background:#f4f4f4; padding-bottom:15px; margin-bottom:0}
/* el-msg 입력값에 대한 메시지가 있는 input */
.frmMem .el-msg {position:relative; margin-top:-1px}
.frmMem input[type=text], .frmMem input[type=password], .frmMem input[type=tel], .frmMem input[type=email] {height: 51px}
.frmMem input.small {height: 40px; font-size:13px}
.frmMem input.small + button.full{height:40px}
.idpwCon input.small {height: 50px}

.frmMem input:focus {border:1px solid #7ea54c}
.frmMem .el-msg input.valid { background: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico-ico_check_77.png) 95% center no-repeat; background-size: 20px auto}
.frmMem .el-msg input.invalid {border:1px solid #7ea54c}
.frmMem .el-msg span.msg{display:none; position:relative; top:-2px; width:100%; min-height:23px; line-height: 15px; margin-bottom:-3px; padding:0 13px 10px; font-size:11px; letter-spacing:0; color:#be271d; border:1px solid #7ea54c; border-top:none; background:#fff; box-sizing: border-box; z-index:10}
.frmMem .el-msg input.invalid + span.msg{ display:block}
/* el-btn 버튼을 포함하는 UI 를 가진 input */
.frmMem .el-btn {position:relative; margin-top:-1px}
.frmMem .el-btn button{ display: block; position:absolute; top:5px; bottom:5px; right:5px; width:80px; height:41px; box-sizing: border-box; background:#f4f4f4; font-size:14px; font-weight:normal; border:1px solid #dfdfdf}
.frmMem .el-btn button.full{top:0; bottom:0; right:0}
.frmMem .db-line {height:80px}

.frmMem .bg p {padding:15px 14px; border-bottom:1px solid #e7e7e7; font-size:11px; letter-spacing: -0.08em; line-height:1.4; color:#7a7a7a}
.frmMem .rad-group,
.frmMem .rad-group2 { display:inline-block; padding: 10px 0 5px 12px}
.frmMem .rad-group .rad {display:inline-block; min-width:85px}
.frmMem .rad-group .chk {display:inline-block; margin-right: 9px}
.frmMem .rad-group2 .rad {display:inline-block; min-width:85px}
.frmMem .rad-group1 .rad label:before,
.frmMem .rad-group2 .rad label:before{top:-2px}

.memNon p {padding-bottom:0 !important; border-bottom:none !important}

p.agree-txt { padding:10px 0; font-size:11px; letter-spacing:-0.03em; color:#8e8e8e; line-height:1.4; word-break:keep-all; font-weight:600}
p.agree-txt a { color: #6a9935; text-decoration: underline}
.frmMem .agreeChk label { font-size:13px; font-weight: 800}
.frmMem .btn-submit { display: block; margin-top:30px; background: #76a944; box-sizing: border-box; height: 49px; width:100%; text-indent:0; text-align: center; color: #fff !important; font-size: 16px; line-height: 1; padding: 16px 0; font-weight: 700; letter-spacing: -0.08em }
.frmMem .btn-submit:active,
.frmMem .btn-submit:focus, 
.frmMem .btn-submit:hover { background:#bf2523}
.frmMem .el-btn.mtb, .frmMem .el-label.mtb, .frmMem input.mtb  {margin: 8px 0}


/* 회원가입완료 */
.btnLoginWrap{position:fixed;left:0;width:100%;bottom:50px;padding:0 16px}
.btnLoginWrap a{display: block; height:50px;background: #6BA43A; text-align: center; color: #fff; font-size: 15px;align-content: center;border-radius:3px}
.welcome-wrap{ margin:110px 13px 0;text-align:center; font-weight: normal; line-height: 1.4;padding-top:76px;background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_complete_circle_112.png) no-repeat 50% 0 / 56px 56px}
.welcome-txt{font-size:22px;color:#181818; font-weight:bold;margin-bottom:24px}
.welcome-txt em{ display: block; color:#619c2c}
.welcome-wrap > p {font-size:17px}
.welcome-wrap > p em {font-size:13px;display:inline-block;background:#f4f4f4;border-radius:50px;height:40px;align-content:center;margin-top:16px;min-width:280px;padding:0 20px}
.join-info{font-size:13px; color: #181818; padding-bottom: 5px; font-weight:bold}

/*회원가입 상단 로고*/
.joinLogo { display:block; height:120px; line-height:120px; text-align:center; }
.joinLogo img { display:inline-block; height:36px; width:auto; vertical-align:middle; }
.joinLogo2 { display:block; height:43px; line-height:43px; text-align:center; }
.joinLogo2 img { display:inline-block; height:36px; width:auto; vertical-align:middle; }
.joinLogo3 { display:block; height:120px; line-height:120px; text-align:center; }
.joinLogo3 img { display:inline-block; height:24px; width:auto; vertical-align:middle; }
 /*회원가입 : 입력 : 추천인아이디정보*/
 fieldset.join_recommendId {  }
 fieldset.join_recommendId legend { visibility:visible; width:auto; height:30px; text-indent:0px; line-height:20px; font-size:14px; color:#55a52f; text-align:center; letter-spacing:-0.5px; }
 
/* 회원정보 관리 */
.frmMemEdit {width:100%; margin:0; padding:0}
.frmMemList li{position:relative; padding-left:90px; padding-bottom:7px}
.frmMemList li:first-child{margin-top:10px}
.frmMemList li:last-child{padding-bottom:0}
.frmMemList li strong {position:absolute; top:0; left:0; display:block; width:110px; height:40px; line-height:40px; font-size:12px}
.frmMemList li input,
.frmMemList li p{width:100%}
.frmMemList li p{padding:10px 0; line-height:20px}
.frmMemList li button{position:absolutep; right:0; top:0; height:40px}
.frmMemList li.addressLi{padding-right:125px}
.frmMemList li.addressLi button{width:120px}

.frmMemList li.pnNon p{padding-bottom:0}
.frmMemList li .rad{margin-right:10px}
.frmMemList li .rad input + label:before{top:-3px}
.frmMem .el-btn2 button{padding:0 10px; margin-top:8px; background:#f4f4f4; font-size:14px; font-weight:normal; border:1px solid #dfdfdf}
.frmMemList li .radCheck{padding-top:10px}
.frmMemList li .radCheck > div {display:inline-block}

/* 회원정보 변경 */
.memEditWrap{padding: 20px 11px; box-sizing:border-box}
.memEditWrap .subTit2{font-size:14px}
.memEditWrap > ul{ padding-bottom: 20px; border-bottom: 1px solid #ddd}
input.forread { border:0 none; padding-left: 2px }
.memEditWrap .cartBtn {margin-top: 20px; padding-left:0; padding-right:0}
.memEditWrap .cartBtn:before, .memEditWrap .cartBtn:after {content: ""; display: block; clear: both}

/* 멤버십 */
.user-membership { font-size: 11px !important; letter-spacing: -0.08em }
.user-membership em { display:block; font-size: 13px; font-weight: bold; padding-bottom: 2px}

/* 로그인 팝업 */
.loginPop{top:50%; min-height:384px; margin-top: -192px}
.loginPop .popLpCon{padding-left:18px; padding-right:18px}
.loginPop .popLpCon strong{display:block; padding:27px 0 45px; line-height:23px; font-size:18px; font-weight:bold; color:#333333; text-align: center; letter-spacing: -1px}
.loginPop .popLpCon strong em{color:#76aa44}
.loginPop .popLpCon p{padding:18px 0 35px; border-top:1px solid #ddd; color:#666666; font-size:11px; line-height: 16px}
.loginPop .popLpCon p span{display:block; padding-left:15px; background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_mark_36.png) no-repeat 0 2px; background-size:11px auto}

@media screen and (min-width:360px) {
  .member-wrapper,
  .info-wrapper{margin-top:20px; margin-bottom:20px}
  .info-wrapper ul li{padding-top:20px; padding-bottom:20px}
  .info-warning{padding:15px 12px}
  .loginWrap .login-wrapper{height:300px; padding-top:115px}
  .loginWrap .login-wrapper h2:before{width:140px; height:31px; }
  .loginWrap .login-wrapper h2 em{font-size: 31px; font-weight:bold; padding-top: 10px; margin:0 auto}
 /* .loginWrap .info-wrapper ul li dt {font-size:12px}
  .loginWrap .info-wrapper ul li dd {font-size:11px}*/
  /*.info-warning{font-size:11px}*/
}

@media screen and (min-width: 400px) {
  .loginWrap .login-wrapper{height:310px; padding-top:120px }
  .loginWrap .login-wrapper h2:before{width:140px; height:31px}
  .loginWrap .login-wrapper h2 em{font-size: 31px; font-weight:bold; padding-top: 10px; margin:0 auto}
  .member-wrapper input{height:54px}
  .member-wrapper .btn-login{height:54px; padding-top: 14px}
  /*.loginWrap .info-wrapper ul li dt {font-size:14px}
  .loginWrap .info-wrapper ul li dd {font-size:13px}*/
  /*.info-warning{font-size:12px}*/
  
  .loginWrap .info-wrapper ul li:nth-of-type(1) dt:before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_login_step_1.png)}
  .loginWrap .info-wrapper ul li:nth-of-type(2) dt:before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_login_step_2.png)}
  .loginWrap .info-wrapper ul li:nth-of-type(3) dt:before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_login_step_3.png)}
}

/*2018-06-13*/
.oasisJoinWrap .newJoinTitle{position:relative;text-align:center;color:#164734;font-size:22px;font-weight:600;width:100%;border-bottom:2px solid #bac6c2;padding:25px 0 12px;}
.oasisJoinWrap .newJoinSubTitle{position:relative;width:100%;text-align:center;color:#629b2c;font-size:14px;line-height:18px;padding-top:15px;padding-bottom:15px;}

/*s::20201023 일반 회원 전환 신규 페이지 추가*/
.generalConversionWrap .blind {display: block; position: absolute!important; overflow: hidden; clip: rect(0 0 0 0); width: 1px; height: 1px;}
.generalConversionWrap .frmMem {padding-top:30px;}
.frmMem .readonlyArea input.small,
.frmMem .readonlyArea input.textArea {background-color: #ededed;}
.frmMem .readonlyArea input:last-child {margin:20px 0 15px 0;}

.generalInput input.textArea {border-top:0;}
.generalInput input.textArea:focus {border-top:1px solid #7ea54c;}
.generalInput input:nth-child(2).textArea {border-top:1px solid #ddd;}
.generalInput input:nth-child(2).textArea:focus {border-top:1px solid #7ea54c;}

.frmMem .readonlyArea input:focus {border: 1px solid #ddd;}

.generalConversionWrap .messageBox {padding: 10px 0 15px 13px; margin: 0 auto 0 auto; color: #ed4b18; text-align: left; font-size: 13px; border-bottom:1px solid #ddd; line-height:1.4; word-break: keep-all;}
.generalConversionWrap .messageBox.pwConInfo {border-bottom:0; padding-bottom:0;}
.generalConversionWrap .messageBox.valid {color: #666;}
.generalConversionWrap .messageBox span {border:0;}
/*e::20201023 일반 회원 전환 신규 페이지 추가*/

/* s::20220104 회원가입 */
/* 회원가입 */
.oJoin {padding: 50px 28px; font-size: 14px; text-align: center;}
.oJoin [class*="btnStyle-"] {font-size: 14px;}
.oJoin h2 {font-weight: 700; font-size: 19px; line-height: 23px;}
.oJoin h2 img {width:auto;height:24px}
.oJoin .joinSubTit {position:relative;border:1px solid #eee;border-radius:50px;height:66px;align-content:center;margin-top:44px;line-height:1.4;display:inline-block;padding:0 26px;font-size:13px}
.oJoin .joinSubTit::after {content:'';position:absolute;background:#fff;width:12px;height:12px;border:solid #eee;border-width:0 1px 1px 0;transform:rotate(45deg) translateX(-50%);z-index:0;top:calc(100% - 1px);left:50%}
.oJoin .joinSubTit b {color:#408B1F}
.oJoin .btnSignUp {width: 100%; height: 48px; margin: 30px 0 0;line-height: 48px;border-radius:50px}
.oJoin .btnJoin {width: calc(100% - 32px); height: 48px; margin: 30px 16px 0; font-weight: 700; line-height: 48px;}
.oJoin .joinSocial a {position: relative;display:flex;align-items: center;justify-content: center;gap:0 4px;width: 100%; height: 48px; line-height: 48px;border-radius:50px;margin:10px 0 0}
.oJoin .joinSocial a::before {content: ''; display:inline-block;height: 48px; background: center center no-repeat}
/* .oJoin .joinSocial a::after {content: ''; display: block; position: absolute; top: 17px; left: 50px; width: 1px; height: 16px; background: #e0e0e0;} */
.oJoin .joinSocial a.kakao::before {background-image: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_kakao_42.png); background-size: 21px auto;width:21px}
.oJoin .joinSocial a.eland::before {background-image: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_eland_1279.png); background-size: 37px auto;width:37px}
.oJoin .joinSocial a.naver::before {background-image: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_naver_29.png); background-size: 15px auto;width:15px}
.oJoin .joinSocial a.google::before {background-image: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_google_33.png); background-size: 17px auto;width:17px}
.oJoin .joinSocial a.apple::before {background-image: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_apple_30.png); background-size: 15px auto;width:15px}
.oJoin .btnBottom {display: block; width: 100%; margin-top:30px; color: #828282;}
.oJoin .btnBottom b {color: #333;text-decoration: underline;}
/* //회원가입 */
/* 회원가입 작성 */
.oJoin.fill {padding: 0 0 50px 0; text-align: left;}
.oJoin.fill .btnJoin {font-size: 15px;}

.oJoin.fill fieldset {padding: 0 16px;}
.oJoin.fill .agreeTermArea {border-top:8px solid #efefef; margin-top:30px; padding-top:25px}
.oJoin.fill .agreeTermArea .checkAllArea {padding-bottom:16px; border-bottom:1px solid #EEEEEE}
.oJoin.fill .agreeTermArea .checkAllArea label {font-size:14px; font-weight:bold; color:#333333}
.oJoin.fill .agreeTermArea .checkTermArea {padding-top:20px;}
.oJoin.fill .agreeTermArea .checkTermUnit {margin-top:15px;}
.oJoin.fill .agreeTermArea .checkTermUnit a {float:right; color:#828282; text-decoration:underline; font-size:11px; line-height:26px;} 
.oJoin.fill .agreeTermArea .checkSms {margin-top:15px;}
.oJoin.fill .agreeTermArea .btmTermsBox {margin-top:14px;border:1px solid #e0e0e0;padding:15px 18px;font-size:12px;color:#6b6b6b}
.oJoin.fill .agreeTermArea .btmTermsBox dt {padding-bottom:3px}
.oJoin.fill .agreeTermArea .btmTermsBox dd {padding-left:10px;margin-top:5px}
.oJoin.fill .agreeTermArea .btmTermsBox dd strong {display:inline-block;width:46px;font-weight:normal;margin-right:10px}
.oJoin.fill .agreeTermArea .btmTermsBox dd b {font-weight: 500;}
.oJoin.fill .join_lastTxt {color:#f40505;font-size:12px;text-align:center;padding-top:20px;line-height:1.2}

.oJoin .el-msg {position: relative;}
.oJoin label {display: block; padding: 30px 0 0 0; font-weight: 700; line-height: 16px;}
.oJoin select,
.oJoin input {width: 100%; height: 50px; margin-top: 8px; padding: 0 40px 0 16px; border: 1px solid #e0e0e0; border-radius: 5px; line-height: 50px;}
.oJoin select::placeholder,
.oJoin input::placeholder {color: #828282;}
.oJoin input ~ .msg {display: none; font-size: 12px; line-height: 14px; padding-top: 8px; color: #f40505;}
.oJoin input.invalid {border-color: #f40505;}
.oJoin input.invalid ~ .msg {display: block;}
.oJoin .el-btn input {display: inline-block; width: calc(100% - 87px); vertical-align: top;}
.oJoin .el-btn a {display: inline-block; width: 75px; height: 50px; margin-top: 8px; margin-left: 6px; border: 1px solid #e0e0e0; border-radius: 5px; background: #fff; line-height: 50px; color: #6b6b6b; text-align: center; vertical-align: top;background-color: #eee;font-size:15px}

.oJoin .del-btn {display:none;position: absolute;top:54px;right:0;width:40px;height:50px;border:0;background:0}
.oJoin .del-btn::before {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%); width:18px; height:18px;background-color:#e0e0e0; border-radius:50%}
.oJoin .del-btn::after {content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;background: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_cross_14.png) no-repeat center / 100% 100%;transform:translate(-50%, -50%)}

.oJoin .el-btn button {right: 86px;}
.oJoin .el-btn.on a {border-color:#333;background-color:#333;  line-height: 50px; color: #fff;}
.oJoin .el-msg p {padding-top: 8px; font-size: 12px; line-height: 18px; color: #6ba539;}
.oJoin h3 {display: block; padding: 30px 0 15px 0; font-weight: 700; line-height: 16px;}
.oJoin h3 span {font-weight: 400; font-size: 12px; color: #828282;}
.oJoin .check {display: inline-block; vertical-align: top;}
.oJoin .check + .check {margin-left: 100px;}
/* .oJoin .check input.ip_checkboxG:checked + label::before {background-color: #333;} */
.oJoin .check label {font-weight: 400;}
.oJoin .agreeTxt {padding-top: 15px; font-size: 13px; line-height: 22px; letter-spacing: -.52px; color: #333; text-align: center;}
.oJoin .agreeTxt a {color: #6ba539; text-decoration: underline;}
/* //회원가입 작성 */
/* e::20220104 회원가입 */

/* 로그인 */
.omWrap.loginArea {  }
.omWrap.loginArea *:focus { outline:none; }
.omWrap.loginArea input:-webkit-autofill, .omWrap.loginArea input:-webkit-autofill:hover, .omWrap.loginArea input:-webkit-autofill:focus, .omWrap.loginArea input:-webkit-autofill:active { transition:background-color 5000s ease-in-out 0s; -webkit-transition:background-color 9999s ease-out; -webkit-box-shadow:0 0 0 30px #fff inset !important; /*-webkit-text-fill-color:#fff !important;*/ }
.omWrap.loginArea button { background-color:transparent; border:0px solid transparent; }
.omWrap.loginArea button:focus { border:1px solid #3b601b; }
.omWrap.loginArea .head { height:50px; }
.omWrap.loginArea .head h1 { position:absolute; top:-99999px; width:0; height:0; padding:0; margin:0; }
.omWrap.loginArea .head .btn_pgClose { display:block; position:relative; width:50px; height:50px; padding-top:50px; margin-left:auto; line-height:50px; text-align:center; overflow:hidden; }
.omWrap.loginArea .head .btn_pgClose::before { content:"\2715"; display:block; position:absolute; left:0; top:0; width:50px; height:50px; font-size:20px; color: #333; }
.omWrap.loginArea h1 a { display:block; position:relative; width:34%; height:26px; margin:0 auto; }
.omWrap.loginArea .loginCont_home { display:block; position:relative; height:26px; padding:40px 0 50px 100%; line-height:26px; text-align:center; overflow:hidden; }
.omWrap.loginArea .loginCont_home::before { content:""; display:block; position:absolute; left:0; top:40px; width:100%; height:26px; background:url("../img/common/login_logo.png") no-repeat center center / auto 100%; }
.omWrap.loginArea .loginCont_input { position:relative; /*padding-top:116px;*/ margin:0 27.5px }
.omWrap.loginArea .loginCont_input .input { display:block; position:relative; margin-top:14px; }
.omWrap.loginArea .loginCont_input .input:first-child { margin-top:14px; }
.omWrap.loginArea .loginCont_input .input label { position:absolute; top:-99999px; width:0; height:0; padding:0; margin:0; }
.omWrap.loginArea .loginCont_input .input input { width:100%; height:50px; border:1px solid #eee; border-radius:5px; padding:0 16px; background-color:#fff; }
.omWrap.loginArea .loginCont_input .input input:focus { border:2px solid #212121; }
.omWrap.loginArea .loginCont_input .input input::placeholder { font-size:13px; color:#828282; }
.omWrap.loginArea .loginCont_input .input input:focus { border:2px solid #333; }
.omWrap.loginArea .loginCont_input .input input:valid[val="*"] + button { display:none; }
.omWrap.loginArea .loginCont_input .input button { width:47px; height:50px; position:absolute; right:0; top:0; color:transparent; overflow:hidden; }
.omWrap.loginArea .loginCont_input .input button::before { content:"\2715"; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:15px; height:15px; background-color:#e0e0e0; border-radius:50%; text-align:center; line-height:16px; font-size:10px; color:#fff; }
.omWrap.loginArea .loginCont_input .input button:focus::before { background-color:#3b601b; }
.omWrap.loginArea .loginCont_support { display:flex; padding:15px 0; }
.omWrap.loginArea .loginCont_support .idSave {  }
.omWrap.loginArea .loginCont_support .idSave input { position:absolute; width:0; height:0; padding:0; margin:0; background:transparent; border:0; }
.omWrap.loginArea .loginCont_support .idSave input:focus + label::before { border:1px solid #3b601b; }
.omWrap.loginArea .loginCont_support .idSave input + label { display:inline-block; position:relative; padding-left:28px; font-size:14px; line-height:24px; vertical-align:baseline; }
.omWrap.loginArea .loginCont_support .idSave input + label::before { content:""; display:block; position:absolute; left:0; top:0; width:24px; height:24px; background-color:#e0e0e0; border-radius:50%; }
.omWrap.loginArea .loginCont_support .idSave input + label::after { content:""; display:block; position:absolute; left:8px; top:8px; width:9px; height:6px; border:2px solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg); }
.omWrap.loginArea .loginCont_support .idSave input:checked + label::before { background-color:#333; }
.omWrap.loginArea .loginCont_support .findBtn { display:inline-block; margin-left:auto; line-height:24px; text-align:right; }
.omWrap.loginArea .loginCont_support .findBtn a { display:inline-block; position:relative; padding:0 8px; color:#828282; }
.omWrap.loginArea .loginCont_support .findBtn a:focus { border:1px solid #212121; border-radius:5px; }
.omWrap.loginArea .loginCont_support .findBtn a:last-child { padding-right:0; }
.omWrap.loginArea .loginCont_support .findBtn a::before { content:""; display:inline-block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:13px; border-left:1px solid #e0e0e0; }
.omWrap.loginArea .loginCont_support .findBtn a:first-child::before { display:none; }
.omWrap.loginArea .loginCont_login { display:block; margin:20px 0 0 0; height:50px; background-color:#6ba539; border-radius:5px; line-height:50px; font-size:17px; color:#fff; text-align:center; }
.omWrap.loginArea .loginCont_login:focus { border:3px solid #3b601b; }
.omWrap.loginArea .loginCont_sns { margin:24px 40px; }
.omWrap.loginArea .loginCont_sns ul { display:flex; flex-flow:row wrap; justify-content:space-evenly; }
.omWrap.loginArea .loginCont_sns ul li { flex:1; text-align:center; }
.omWrap.loginArea .loginCont_sns ul li a { display:block; line-height:34px; }
.omWrap.loginArea .loginCont_sns ul li a:focus { border:1px solid #3b601b; }
.omWrap.loginArea .loginCont_sns ul li a::before { content:""; display:block; width:40px; height:40px; margin:0 auto; background-color:#f7f7f7; border-radius:50%; }
.omWrap.loginArea .loginCont_sns ul li.kakao a::before { background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_kakao_42.png) no-repeat center center / 21px auto #f7f7f7; }
.omWrap.loginArea .loginCont_sns ul li.naver a::before { background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_naver_29.png) no-repeat center center / 14.29px auto #f7f7f7; }
.omWrap.loginArea .loginCont_sns ul li.google a::before { background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_google_33.png) no-repeat center center / 16.34px auto #f7f7f7; }
.omWrap.loginArea .loginCont_sns ul li.apple a::before { background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_sns_apple_30.png) no-repeat center center / 13.19px auto #f7f7f7; }
.omWrap.loginArea .loginCont_join:focus { border:1px solid #3b601b; border-radius:5px; }
.omWrap.loginArea .loginCont_join { display:block; margin:30px 27.5px; text-align:center; line-height:37px; font-size:14px; letter-spacing:-1; color:#828282; }
.omWrap.loginArea .loginCont_join b { font-weight:700; color:#333; }
.omWrap.loginArea .loginCont_join::after { content:""; display:inline-block; width:6px; height:6px; margin:0 0 2px 4px; border:1px solid #333; border-width:1px 1px 0 0; transform:rotate(45deg); vertical-align:baseline; }

/* 90일 비밀번호 변경 */

.omWrap.changePw button { background-color:transparent; border:0px solid transparent; }
.omWrap.changePw .subTitTop {border-bottom: 1px solid #e0e0e0;}
.omWrap.changePw .changePw_txtArea {line-height: 20px; padding: 40px 27.5px 30px; text-align: center; font-size: 14px;}
.omWrap.changePw .changePw_txtArea .subTxt {letter-spacing: -0.42px;}
.omWrap.changePw .changePw_txtArea::before {content: ''; display: inline-block; width: 60px; height: 60px; margin-bottom: 13px; background: url(https://oasisprodcom.edge.naverncp.com/pc/ico/ico_lock.svg) top center / 100% 100%;}
.omWrap.changePw .head { height:50px; }
.omWrap.changePw .head .btn_pgClose { display:block; position:relative; width:50px; height:50px; padding-top:50px; margin-left:auto; line-height:50px; text-align:center; overflow:hidden; }
.omWrap.changePw .head .btn_pgClose::before { content:"\2715"; display:block; position:absolute; left:0; top:0; width:50px; height:50px; font-size:20px; color: #333; }
.omWrap.changePw .changePw_form {padding:0 27.5px 0; margin-bottom: 30px;}
.omWrap.changePw .changePw_form .ins_password {margin-top:20px; position: relative; }
.omWrap.changePw .changePw_form .ins_password:nth-of-type(1),.omWrap.changePw .changePw_form .ins_password:nth-of-type(3) { margin-top:0px; }
.omWrap.changePw .changePw_form .ins_password input {position: relative; width:100%; height:50px; border:1px solid #eee; border-radius:5px; padding:0 16px; background-color:#fff;}
.omWrap.changePw .changePw_form .ins_password:nth-of-type(3) {margin-top: -1px;}
.omWrap.changePw .changePw_form .ins_password .change-2 {border-radius: 5px 5px 0 0;}
.omWrap.changePw .changePw_form .ins_password .change-3 {border-radius: 0 0 5px 5px;}
.omWrap.changePw .changePw_form .ins_password input::placeholder { font-size:13px; color:#828282; }
.omWrap.changePw .changePw_form .ins_password input:focus {z-index: 1;}
.omWrap.changePw .changePw_form .ins_password button {display: none; position:absolute; width:50px; height:50px; right:0; top:0; color:transparent; overflow:hidden;}
.omWrap.changePw .changePw_form .ins_password button::before { content:"\2715"; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:15px; height:15px; background-color:#e0e0e0; border-radius:50%; text-align:center; line-height:16px; font-size:10px; color:#fff; z-index: 2; }
.omWrap.changePw .changePw_form .expo {display: none; padding: 8px 0 8px 0; font-size: 12px; color: #F40505;}
.omWrap.changePw .btnArea {padding: 0 27.5px 0; }
.omWrap.changePw .changePw_btn { display:block; width: 100%; height:50px; margin-top: 12px; background-color:#cccccc; border-radius:5px; line-height:50px; font-size:14px; color:#fff; text-align:center; }
.omWrap.changePw .changePw_btn:nth-of-type(1) {margin-top: 0; cursor: default; pointer-events: none;}
.omWrap.changePw .btnArea .changePw_btn.on {background: #6BA43A; cursor: pointer; pointer-events: all;}
.omWrap.changePw .changePw_btn.later {background-color:#fff; border: 1px solid #e0e0e0; color:#333; }

@media screen and (max-width: 343px) {
	.omWrap.changePw .changePw_txtArea .subTxt br {display: none;}
}

/* 220523 아이디 비밀번호찾기 */
.findWrap {overflow: scroll;}
.findWrap .oMenu_fixedBtn {display: none;}
.findWrap .oMenu_toolbar {display: none;}

/* 220608 패밀리회원가입 */

/* 본인인증창 */
.familyJoin  {position: relative; letter-spacing: -0.5px;}
.familyJoin .topArea {text-align: center; padding: 15.5px 0;}
.familyJoin .topArea h2 {font-size: 18px;}
.familyJoin .topArea .subTopPrev {position:absolute; right: 18px; top: 18px; width: 13px; height: 13px; background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_cross_58.png) no-repeat 0 0;background-size: 13px;}
.familyJoin .oJoin {padding: 24px 16px;}
.familyJoin .oJoin .guideArea {margin-bottom: 28px; line-height: 22px; text-align: left;}
.familyJoin .oJoin .guideArea p {font-size: 14px;}
.familyJoin .oJoin .formArea {padding-bottom: 10px;}
.familyJoin .oJoin .formArea .insertArea {position: relative; text-align: left; margin-bottom: 23px;}
.familyJoin .oJoin .formArea .insertArea label {display: block; margin-bottom: 14px; padding: 0; font-size: 14px; font-weight: 800;}
.familyJoin .oJoin .formArea .insertArea input {display: inline-block; height: 45px; margin: 0; outline: none; line-height: 45px; font-family: "Spoqa Han Sans Neo", "Noto Sans Kr", sans-serif;}
.familyJoin .oJoin .formArea .insertArea input:focus {border-color: #000;}
.familyJoin .oJoin .formArea .insertArea input::placeholder {font-size: 13px; color: #828282;}
.familyJoin .oJoin .formArea .insertArea .requestBtn {display: inline-block; position: static; width: 24%; height: 45px; margin-left: 2.5%; border: 1px solid #e0e0e0; border-radius: 5px; background: #F7F7F7; color: #828282;}
.familyJoin .oJoin .formArea .insertArea .requestBtn.on {background: #6BA43A; color: #fff; border: 0;}
.familyJoin .oJoin .formArea .insertArea .requestBtn::before {display: none;}
.familyJoin .oJoin .formArea .insertArea .deleteBtn {display: none; top: 30px; height: 45px; color: transparent;}
.familyJoin .oJoin .formArea .insertArea .deleteBtn::before {top: 14px; line-height: 14px;}
.familyJoin .oJoin .formArea .insertArea:nth-of-type(1) input {width: 72.5%;}
.familyJoin .oJoin .formArea .insertArea:nth-of-type(1) .deleteBtn {right: 27.5%;}
.familyJoin .oJoin .submitBtn {display: block; width: 100%; height: 50px; border-radius: 5px; background: #F7F7F7; font-size: 14px; font-weight: 400; line-height: 50px; color: #828282; text-align:center}
.familyJoin .oJoin .submitBtn.on {background: #6BA43A; color: #fff; border: 0;}

/* 가입창 */
.familyJoin .familySignUp .oJoin .guideArea {text-align: center;}
.familyJoin .familySignUp .oJoin .guideArea h3 {padding: 0; margin-bottom: 13px; font-size: 18px; font-weight: 400;}
.familyJoin .familySignUp .oJoin .guideArea h3::before {content: ''; display: block; width: 49px; height: 49px; margin: 0 auto 23px; background: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/co_person_98.png) no-repeat center/ 100% 100%;}
.familyJoin .familySignUp .oJoin .guideArea p strong {color: #6BA43A; font-weight: 400;}
.familyJoin .familySignUp .oJoin .formArea  {padding-bottom: 19px;}
.familyJoin .familySignUp .oJoin .formArea .insertArea {margin-bottom: 16px;}
.familyJoin .familySignUp .oJoin .formArea .insertArea .deleteBtn {display: block;}
.familyJoin .familySignUp .oJoin .formArea .insertArea:nth-of-type(1) .deleteBtn {top: 2px;}
.familyJoin .familySignUp .oJoin .formArea .insertArea:nth-of-type(2) input:nth-of-type(1) {margin-bottom: 16px;}
.familyJoin .familySignUp .oJoin .formArea .insertArea:nth-of-type(2) .deleteBtn:nth-of-type(1) {top: 0px;}
.familyJoin .familySignUp .oJoin .formArea .insertArea:nth-of-type(2) .deleteBtn:nth-of-type(2) {top: 62px;}

/* 아이디선택창 */
.familyJoin .familyChange .oJoin .guideArea {margin-bottom: 0; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid #E0E0E0;}
.familyJoin .familyChange .oJoin .formArea {padding-bottom: 13px;}
.familyJoin .familyChange .oJoin .formArea .insertArea {margin: 0 0 24px 0;}
.familyJoin .familyChange .oJoin .formArea .insertArea input[type="radio"] {display: block;}
.familyJoin .familyChange .oJoin .formArea .insertArea input[type="radio"]:checked + label::before {content: ''; border: 2px solid #6BA43A;;}
.familyJoin .familyChange .oJoin .formArea .insertArea input[type="radio"]:checked + label::after {content: ''; background: #6BA43A;}
.familyJoin .familyChange .oJoin .formArea .insertArea label {position: relative; padding: 0; margin-bottom: 3px; font-size: 14px;}
.familyJoin .familyChange .oJoin .formArea .insertArea label::before {content: ''; display: inline-block; margin-right: 5px; width: 22px; height: 22px; border: 2px solid #e0e0e0; border-radius: 50%; background: transparent;; vertical-align: top; margin-top: -4px;}
.familyJoin .familyChange .oJoin .formArea .insertArea label::after {content: ''; position: absolute; left: 5px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #e0e0e0;}
.familyJoin .familyChange .oJoin .formArea .insertArea span {margin: 0 0 0 26px; font-size: 12px; color: #828282; font-weight: 400;}

/* 가입불가 */
.familyJoin .familyFail .guideArea {text-align: center; padding-top: 36px;}  
.familyJoin .familyFail .guideArea h3 {padding: 0; margin-bottom: 14px; font-size: 18px; font-weight: 400; text-align: center;}  
.familyJoin .familyFail .guideArea h3::before {content: ''; display: block; width: 49px; height: 49px; margin: 0 auto 23px; background: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_mark_circle_98.png) no-repeat center / 100% 100%;}  
.familyJoin .familyFail .guideArea span {font-size: 12px; color: #828282;}

/* 가입완료 */
.familyJoin .familyComplete .guideArea {padding-bottom: 3px;}
.familyJoin .familyComplete .guideArea h3::before {content: ''; display: block; width: 49px; height: 49px; margin: 0 auto 23px; background: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_check_104.png) no-repeat center / 100% 100%;}

/* //220608 패밀리회원가입 */

/* 220610 휴면게정 */
.inactiveArea {padding: 0 16px;}
.inactiveArea .inactiveUser .subTitTop {border: 0;}
.inactiveArea .inactiveUser .changePw_txtArea {padding: 25px 0; text-align: left;}
.inactiveArea .inactiveUser .changePw_txtArea .subTxt b {color: #6BA539;}
.inactiveArea .inactiveUser .changePw_txtArea::before {display: none;}
.inactiveArea .inactiveUser .lastAccess {background: #f4f4f4; padding: 18px 0 18px 23px; margin-bottom: 50px; border-radius: 5px; box-sizing: border-box;}
.inactiveArea .inactiveUser .lastAccess p {position: relative; margin-bottom: 12px; color: #828282;}
.inactiveArea .inactiveUser .lastAccess p time {color: #333333;}
.inactiveArea .inactiveUser .lastAccess p::before {content: ''; position: absolute; left: -8px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #6b6b6b; transform: translateY(-50%);}
.inactiveArea .inactiveUser .lastAccess p:nth-of-type(2) {margin-bottom: 0;}
.inactiveArea .inactiveUser .btnArea {padding: 0;}
.inactiveArea .activeNow {display: none;}
.inactiveArea .activeNow .changePw_txtArea {padding: 56px 0 67px;}
.inactiveArea .activeNow .changePw_txtArea::before {content: ''; width: 60px; height: 74px; margin: 0 auto; background: url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_lock_120.png) no-repeat center / 100% 100%;}
.inactiveArea .activeNow .changePw_txtArea .subTxt {margin-top: 12px;}
.inactiveArea .activeNow .btnArea {padding: 0;}
.inactiveArea .activeNow .subTitTop {border: 0;}
/* //220610 휴면게정 */

/* 정보수신동의 페이지 */
.receiveInfoWrap .circle {border-bottom:8px solid #f4f4f4;display:flex; border-top:1px solid #f4f4f4}
.receiveInfoWrap .circle li {flex:1;width:25%;text-align:center;position:relative}
.receiveInfoWrap .circle li a {display:block;padding:20px 0 16px;font-size:12px;}
.receiveInfoWrap .circle li a::before {content:'';display:block;height:24px;margin-bottom:6px;background:no-repeat 50% 50% / 24px 24px}
.receiveInfoWrap .circle li.home a::before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_home_48.png)}
.receiveInfoWrap .circle li.mypage a::before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_mypage_48.png)}
.receiveInfoWrap .circle li.order a::before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_delivery_48.png)}
.receiveInfoWrap .circle li.customer a::before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_customer_48.png)}
.receiveInfoWrap .circle li+li a::after {content:'';width:1px;height:20px;position:absolute;top:25px;left:0;background-color:#ebebeb;}

/* 기가지니 회원 전환 */
.contentsForm {padding:0 16px 100px 16px}
.contentsForm .subTit3 {padding:30px 0;font-size:20px;line-height:24px}
.formGroup {position:relative}
.formGroup + .formGroup {margin-top:25px}
.formGroup label {display:block;padding-bottom:10px;font-size:14px}
.formGroup .formIp {width: 100%;height:50px;padding:0 42px 0 16px;border:1px solid #e0e0e0;border-radius:5px;line-height:50px}
.formGroup .formIp:focus {border-color:#333;outline:none}
.formGroup .errorText {display:none}
.formGroup .btnDel {display:none;position:absolute;top:40px;right:16px;width:20px;height:20px;border-radius:50%;border:0;background:#E0E0E0;text-align:center}
.formGroup .btnDel::after {content:'';display:block;width:10px;height:10px;margin:0 auto;background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_cross_13.png) no-repeat 0/100% auto}
.formGroup.active .btnDel {display:block}/* 입력됨 */
.formGroup.active .formIp {border-color:#333}
.formGroup.invalid .formIp {border-color:#F40505}/* 오류 */
.formGroup.invalid .errorText {display:block;padding-top:8px;font-size:12px;color:#F40505}
.inputForm .btnSubmit {display:flex;margin-top:40px}
.inputForm .btnSubmit a {flex-grow:1;width:100%;height:50px;border-radius:5px;background:#CCC;font-size:14px;line-height:50px;color:#fff;text-align:center;pointer-events:none;}
.inputForm .btnSubmit a.on {background:#6BA43A;pointer-events:auto}

/* 정보 수신동의 */
.receiveInfo_top {padding:18px 9px}
.receiveInfo_top strong {font-size:13px;font-weight:bold;}
.receiveInfo_top p {margin-top:15px;font-size:12px;line-height:1.2;}
.receiveInfo_btn {text-align:center;padding-bottom:40px}
.receiveInfo_btn .redBtn_b {width:70%;height:42px;}
.switchToggle_list {margin:0 -11px 60px}
.switchToggle_list li {display:flex;justify-content:space-between;padding:0 20px;height:57px;align-items: center;border-top:1px solid #d5d5d5}
.switchToggle_list li:last-child {border-bottom:1px solid #d5d5d5}

/* 스위치 토글 */
.switch-button {position: relative;display: inline-block;width: 40px;height: 20px;}
.switch-button input {opacity: 0;width: 0;height: 0;}
.onoff-switch {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;border-radius:20px;background-color: #acacac;-webkit-transition: .4s;transition: .4s;}
.onoff-switch:before {position: absolute;content: "";height: 16px;width: 16px;left: 2px;bottom: 2px;background-color: #fff;-webkit-transition: .5s;transition: .4s;border-radius:20px;}
.switch-button input:checked + .onoff-switch {background-color: #669a35;box-shadow: inset 1px 5px 1px #669a35;}
.switch-button input:checked + .onoff-switch:before {-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}