@charset "euc-kr"; .important{display:block; margin:0.5rem 0; color:var(--color-main01); font-family:'NanumNeo_EB',sans-serif;} .important2{display:block; margin:0.5rem 0; color:var(--color-main02); font-family:'NanumNeo_EB',sans-serif;} .esse{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--color-main01); vertical-align:middle; margin:0 0.5rem;} /* term */ div.term-wrap{margin-top:2rem;} div.term-wrap h3.term-tit{font-family:'NanumNeo_B', sans-serif; margin-bottom:0.5rem;} div.term-wrap div.term-con{border:1px solid #ddd; height:15rem; overflow-y:auto; padding:1.25rem; font-size:0.85em;} div.term-wrap div.term-con div.term{} div.term-wrap div.term-con div.term h3.tit{text-align:center; font-family:'NanumNeo_EB', sans-serif; letter-spacing:10px; margin-right:-10px; margin-bottom:1em;} div.term-wrap div.term-con div.term h4.tit{font-family:'NanumNeo_EB', sans-serif; margin-bottom:0.5em; margin-top:2em;} div.term-wrap div.term-con div.term ul.list{margin-bottom:1em; line-height:1.6; color:#555;} div.term-wrap div.term-con div.term ul.list li{margin-bottom:0.5em;} div.term-wrap div.term-con div.term ul.list li.NanumNeo_B{margin-bottom:0 !important; color:#222;} div.term-wrap div.term-chk{text-align:right;} /* form */ div.form-wrap{} div.form-wrap div.form{border-bottom:1px solid #ddd; padding:2rem 0;} div.form-wrap div.form div.tit{width:fit-content; font-family:'NanumNeo_EB',sans-serif; display:flex; justify-content:space-between; align-items:center; margin-bottom:0.35rem;} div.form-wrap div.form div.tit span.info{font-family:'NanumNeo_B', sans-serif; font-size:0.825em; color:var(--color-main02); letter-spacing:-0.5px; margin-left:1rem;} div.form-wrap div.form div.con{} /* member */ div.mem-wrap{min-height:60vh; border-top:1px solid #ddd; padding:8rem 0;} div.mem-wrap div[class*="-container"]{width:640px; margin:0 auto;} div.mem-wrap h2.title{font-size:1.75rem; padding-bottom:1rem; border-bottom:2px solid #222; position:relative;} div.mem-wrap h2.title div.step{position:absolute; top:0.25rem; right:0; color:var(--color-main03); font-size:0.75em;} div.mem-wrap h2.title div.step span.active{color:#222; font-family:'NanumNeo_EB',sans-serif;} div.mem-wrap div.box{padding:1.5rem; font-size:1.125rem; line-height:1.8; margin-top:0.5rem; border:1px solid #ccc; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,0.2);} /* login */ div.mem-wrap.login div.login-container div.content div.input-area div.input-box{width:100%; height:5.5rem; position:relative; font-size:1.25rem;} div.mem-wrap.login div.login-container div.content div.input-area div.input-box input{width:100%; height:100%; border:none; border-bottom:1px solid #aaa; background:transparent; padding-left:0.6rem; padding-top:1.5rem; font-size:1em; border-radius:0 !important;} div.mem-wrap.login div.login-container div.content div.input-area div.input-box span.label{position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:-1; color:#5f5f5f; transition:0.3s; -webkit-transition:0.3s;} div.mem-wrap.login div.login-container div.content div.input-area div.input-box input:focus, div.mem-wrap.login div.login-container div.content div.input-area div.input-box input:valid{border-bottom:2px solid var(--color-main02);} div.mem-wrap.login div.login-container div.content div.input-area div.input-box input:focus + span.label, div.mem-wrap.login div.login-container div.content div.input-area div.input-box input:valid + span.label{color:var(--color-main02); font-family:'NanumNeo_EB', sans-serif; transform:scale(.8) translate(0); top:1rem; left:0;} div.mem-wrap.login div.login-container div.content div.input-area div.input-box.type-pw input{padding-right:3.5rem;} div.mem-wrap.login div.login-container div.content div.btn-area{margin-top:3rem;} div.mem-wrap.login div.login-container div.content div.btn-area > a.btn-login{display:block; width:100%; height:5rem; line-height:5rem; text-align:center; border:1px solid #222; font-size:1.375rem; font-family:'NanumNeo_B',sans-serif; position:relative; overflow:hidden; transition:0.4s; -webkit-transition:0.4s;} div.mem-wrap.login div.login-container div.content div.btn-area > a.btn-login:before{content:''; display:block; width:100%; height:100%; background:#222; position:absolute; top:0; left:-100%; z-index:-1; transition:0.4s; -webkit-transition:0.4s;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list{margin:4rem 0;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul{display:flex; align-items:center; justify-content:center; flex-wrap:wrap;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li{padding:0 2rem; font-size:1.125rem; position:relative; margin-bottom:0.5rem;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li:after{content:''; display:block; width:1px; height:80%; background:#ddd; position:absolute; top:10%; right:0;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li:last-child:after{display:none;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li a > span{position:relative;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li a > span:before{content:''; display:block; width:0; height:1px; background:#222; position:absolute; left:0; bottom:-5px; transition:0.3s; -webkit-transition:0.3s;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li.join{font-family:'NanumNeo_EB', sans-serif;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li.join a > span:before{height:2px;} @media(hover:hover){ div.mem-wrap.login div.login-container div.content div.btn-area > a.btn-login:hover{color:#fff; box-shadow:0 12px 30px rgba(0,0,0,0.2);} div.mem-wrap.login div.login-container div.content div.btn-area > a.btn-login:hover:before{left:0;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li:hover a > span:before{width:100%;} } /* join */ div.mem-wrap.join div.join-container.step3 div.table-wrap table.table01 td input{background:#fff; color:#333; border:none; padding:0; margin:0; height:auto; line-height:auto;} div.mem-wrap.join div.join-container.step3 div.form-wrap div.form.name div.con{display:flex; align-items:center; justify-content:space-between;} div.mem-wrap.join div.join-container.step3 div.form-wrap div.form.name div.con input[type="text"]{width:58%;} div.mem-wrap.join div.join-container.step3 div.form-wrap div.form.name div.con div.term-btn-wrap{width:40%; display:flex; align-items:center; gap:0.5rem;} div.mem-wrap.join div.join-container.step3 div.form-wrap div.form.name div.con div.term-btn-wrap a.kc-btn{width:48%; font-size:0.9rem; text-align:center; height:3rem; line-height:3rem; text-wrap:nowrap; padding:0 0.5rem;} /* modify */ div.mem-wrap.modify div.modify-intro{margin:0 auto; display:flex; align-items:center; justify-content:space-between;} div.mem-wrap.modify div.modify-intro a.modify{display:block; width:30%; height:15rem; background:url("/fro_end/img/modify_img01.jpg")center/cover no-repeat; position:relative; transition:0.3s; -webkit-transition:0.3s;} div.mem-wrap.modify div.modify-intro a.modify{width: 48%;} div.mem-wrap.modify div.modify-intro a.modify:before{content:''; display:block; width:100%; height:100%; background:#000; position:absolute; top:0; left:0; opacity:.7;} div.mem-wrap.modify div.modify-intro a.modify span.type{position:absolute; color:#fff; font-family:'NanumNeo_EB', sans-serif; font-size:1.8rem; top:0; right:0; width:100%; text-align:right; padding:3rem 2rem; padding-left:8rem; text-shadow:3px 3px 3px rgba(0,0,0,0.5);} div.mem-wrap.modify div.modify-intro a.modify span.type:before{content:''; display:block; width:3.5rem; height:3.5rem; background:url("/fro_end/img/modify_icon01.svg")center/100% auto no-repeat; position:absolute; top:2rem; left:2rem;} div.mem-wrap.modify div.modify-intro a.modify span.btn{display:inline-block; width:100%; background:var(--color-main03); color:#fff; font-family:'NanumNeo_B', sans-serif; font-size:1.3rem; padding:1.5rem 2rem; position:absolute; bottom:0; left:0; overflow:hidden; z-index:2;} div.mem-wrap.modify div.modify-intro a.modify span.btn:before{content:''; display:block; width:1.5rem; height:1.5rem; background:url("/fro_end/img/ic_arrow_wh.svg")center/100% auto no-repeat; position:absolute; top:50%; right:1rem; transform:translateY(-50%); opacity:.5; z-index:2;} div.mem-wrap.modify div.modify-intro a.modify span.btn:after{content:''; display:block; width:100%; height:100%; background:var(--color-main01); position:absolute; top:0; left:-100%; transition:0.5s; -webkit-transition:0.5s; z-index:-1;} div.mem-wrap.modify div.modify-intro a.modify2{background-image:url("/fro_end/img/modify_img02.jpg");} div.mem-wrap.modify div.modify-intro a.modify2 span.type:before{ background:url("/fro_end/img/modify_icon02.svg")center/100% auto no-repeat;} div.mem-wrap.modify div.modify-intro a.modify3{background-image:url("/fro_end/img/modify_img03.jpg");} div.mem-wrap.modify div.modify-intro a.modify3 span.type:before{ background:url("/fro_end/img/modify_icon03.svg")center/85% auto no-repeat;} @media(hover:hover){ div.mem-wrap.modify div.modify-intro a.modify:hover:before{opacity:.5;} div.mem-wrap.modify div.modify-intro a.modify:hover span:before{opacity:1;} div.mem-wrap.modify div.modify-intro a.modify:hover span:after{left:0;} } /* 비밀번호 조건 */ div.condition-pw{} div.condition-pw ul{} div.condition-pw ul li{font-size:0.8rem; font-family:'NanumNeo_B', sans-serif; color:#888; margin-top:0.5rem; position:relative; padding-left:1.5em; opacity:.5;} div.condition-pw ul li:before{content:''; display:block; width:1em; height:1em; background:url("/fro_end/img/ic_check_gray.svg")center/100% auto no-repeat; position:absolute; top:1px; left:0; } div.condition-pw ul li.check{color:var(--color-main02); opacity:1;} div.condition-pw ul li.check:before{background-image:url("/fro_end/img/ic_check_green.svg");} /* policy */ div.mem-wrap.policy div.policy{margin:3rem 0;} div.mem-wrap.policy div.policy h3.tit{font-size:1.125rem; font-family:'NanumNeo_B', sans-serif; margin-bottom:0.3rem;} div.mem-wrap.policy div.policy h3.tit span.num{color:var(--color-main01); font-family:'NanumNeo_EB', sans-serif;} div.mem-wrap.policy div.policy div.con{font-size:0.925rem; line-height:1.6; background:#f7f7f7; padding:1rem; border:1px solid #ddd;} div.mem-wrap.policy div.policy div.con ul.n-list{} div.mem-wrap.policy div.policy div.con ul.n-list > li{margin-bottom:1.5rem;} div.mem-wrap.policy div.policy div.con ul.n-list > li:last-child{margin-bottom:0 !important;} div.mem-wrap.policy div.policy div.con ul.n-list > li:before{content:''; display:inline; font-size:1em; margin-right:0.25rem;} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(1):before{content:'1.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(2):before{content:'2.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(3):before{content:'3.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(4):before{content:'4.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(5):before{content:'5.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(6):before{content:'6.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(7):before{content:'7.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(8):before{content:'8.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(9):before{content:'9.';} div.mem-wrap.policy div.policy div.con ul.n-list > li:nth-of-type(10):before{content:'10.';} div.mem-wrap.policy div.policy div.con ul.i-list{padding-left:1rem;} div.mem-wrap.policy div.policy div.con ul.i-list > li{font-size:0.925em; position:relative; padding-left:0.7rem; color:#333;} div.mem-wrap.policy div.policy div.con ul.i-list > li:before{content:''; display:block; width:4px; height:4px; background:#555; border-radius:50%; position:absolute; top:7px; left:0;} /* remail */ div.mem-wrap.remail div.remail-con{background:#f7f7f7; line-height:1.8; padding:1rem; border:1px solid #ddd; margin-top:1rem; box-shadow:0 10px 30px rgba(0,0,0,0.08);} /* 동의한 약관보기 */ div.agree-view{padding:1rem;} div.agree-view div.top{} div.agree-view div.top h3.tit{font-family:'NanumNeo_EB',sans-serif; margin-bottom:1rem;} div.agree-view div.bot div.term-wrap div.term-chk label.c-input{cursor:default; pointer-events:none; color:#999;} div.agree-view div.bot div.term-wrap div.term-chk label.c-input div.ci-show{background:#eee; border-color:#ddd;} div.agree-view div.bot div.term-wrap div.term-chk label.c-input div.ci-show:after{border-color:#999;} @media screen and (max-width:1200px){ /* modify */ div.mem-wrap.modify div.modify-intro a.modify{width:31%; height:14rem;} div.mem-wrap.modify div.modify-intro a.modify span.type{font-size:1.5rem; padding-left:6rem;} div.mem-wrap.modify div.modify-intro a.modify span.type:before{width:3rem; height:3rem;} div.mem-wrap.modify div.modify-intro a.modify span.btn{padding:1.2rem 1rem; font-size:1.2rem;} } @media screen and (max-width:960px){ /* modify */ div.mem-wrap.modify div.modify-intro a.modify{height:12rem;} div.mem-wrap.modify div.modify-intro a.modify span.type{font-size:1.35rem; text-align:left; padding:0; padding-top:5rem; padding-left:1.5rem;} div.mem-wrap.modify div.modify-intro a.modify span.type:before{width:2.5rem; height:2.5rem; top:1.5rem; left:1.5rem;} div.mem-wrap.modify div.modify-intro a.modify span.btn{font-size:1rem; background:var(--color-main02);} div.mem-wrap.modify div.modify-intro a.modify span.btn:before{width:1rem; height:1rem;} } @media screen and (max-width:720px){ /* member */ div.mem-wrap div[class*="-container"]{width:80%;} div.mem-wrap h2.title{font-size:1.55rem;} /* login */ div.mem-wrap.login div.login-container div.content div.input-area div.input-box{height:4.5rem; font-size:1.05rem;} div.mem-wrap.login div.login-container div.content div.input-area div.input-box input:focus + span.label, div.mem-wrap.login div.login-container div.content div.input-area div.input-box input:valid + span.label{top:0.8rem;} div.mem-wrap.login div.login-container div.content div.btn-area{margin-top:2rem;} div.mem-wrap.login div.login-container div.content div.btn-area > a.btn-login{height:4.5rem; line-height:4.5rem; font-size:1.2rem;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list{margin:3rem 0;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li{font-size:1.05rem;} /* modify */ div.mem-wrap.modify div.modify-intro a.modify{height:11rem;} div.mem-wrap.modify div.modify-intro a.modify span.type{font-size:1.2rem; padding-top:4.5rem;} div.mem-wrap.modify div.modify-intro a.modify span.type:before{width:2.25rem; height:2.25rem;} div.mem-wrap.modify div.modify-intro a.modify span.btn{padding:1rem; font-size:0.9rem;} /* join */ div.mem-wrap.join div.join-container.step3 div.form-wrap div.form.name div.con{display:block;} div.mem-wrap.join div.join-container.step3 div.form-wrap div.form.name div.con input[type="text"]{width:100%; margin-bottom:0.5rem;} div.mem-wrap.join div.join-container.step3 div.form-wrap div.form.name div.con div.term-btn-wrap{width:100%;} div.mem-wrap.join div.join-container.step3 div.form-wrap div.form.name div.con div.term-btn-wrap a.kc-btn{width:auto;} } @media screen and (max-width:640px){ /* form */ div.form-wrap div.form.id div.con div.lay-flex input.wid20{width:50%;} div.form-wrap div.form.id div.con div.lay-flex span.lay-bar{display:none;} div.form-wrap div.form.id div.con div.lay-flex a.kc-btn.form{padding:0 1rem; height:2.8rem; line-height:2.8rem;} div.form-wrap div.form.email div.con div.lay-flex{flex-wrap:wrap;} div.form-wrap div.form.email div.con div.lay-flex input.email-input1{width:90%; margin-bottom:0.5rem;} div.form-wrap div.form.email div.con div.lay-flex input.email-input2{width:40%;} div.form-wrap div.form.tel div.con div.lay-flex input.wid10{width:30%;} div.form-wrap div.form.addrnum div.con div.lay-flex input.wid20{width:50%;} div.form-wrap div.form.addrnum div.con div.lay-flex span.lay-bar{display:none;} div.form-wrap div.form.addrnum div.con div.lay-flex a.kc-btn.form{padding:0 1rem; height:2.8rem; line-height:2.8rem;} div.form-wrap div.form.addr div.con div.lay-flex{flex-wrap:wrap;} div.form-wrap div.form.addr div.con div.lay-flex span.lay-bar{height:0.5rem;} div.form-wrap div.form.addr div.con div.lay-flex input.wid20{width:100%;} div.form-wrap div.form.account div.con div.lay-flex{flex-wrap:wrap;} div.form-wrap div.form.account div.con div.lay-flex span.lay-bar{height:0.5rem;} div.form-wrap div.form.account div.con div.lay-flex label.lab-input{width:100%;} } @media screen and (max-width:480px){ .important{font-size:0.9rem;} .esse{width:4px; height:4px; margin:0 3px;} /* member */ div.mem-wrap{padding:5rem 0;} div.mem-wrap h2.title{font-family:'NanumNeo_B', sans-serif; word-break:keep-all; padding-bottom:0.6rem;} /* form */ div.form-wrap div.form.id div.con div.lay-flex input.wid20{width:60%;} div.form-wrap div.form.id div.con div.lay-flex a.kc-btn.form{font-size:0.8rem;} div.form-wrap div.form.addrnum div.con div.lay-flex input.wid20{width:60%;} div.form-wrap div.form.addrnum div.con div.lay-flex a.kc-btn.form{font-size:0.8rem;} /* login */ div.mem-wrap.login div.login-container div.content div.btn-area > a.btn-login{height:3.5rem; line-height:3.5rem; font-size:1.1rem;} div.mem-wrap.login div.login-container div.content div.btn-area div.btn-list ul li{padding:0 0.6rem; font-size:0.95rem;} /* term */ div.term-wrap h3.term-tit{font-size:1rem; margin-bottom:0.3rem;} div.term-wrap div.term-con{height:12rem;} /* modify */ div.mem-wrap.modify div.modify-intro{display:block;} div.mem-wrap.modify div.modify-intro a.modify{width:100%; margin-bottom:1.5rem;} }