@charset "utf-8";

html{background:#fafafa}

/**/
#nav{position:fixed;display:flex;flex-direction:column;top:0;left:0;width: 50%;padding: 50px;alignment-baseline: middle;height: 100%;overflow-y: auto;width: 500px;}
#nav a{display: inline-flex;align-items: center;line-height: 30px;font-size: 17px;}

/**/
#app{position:relative;margin: 0 auto;width:500px;max-width:100%;height: 100%;min-height: calc(var(--vh, 1vh) * 100);background:#ffffff;transition: all 0.5s;}
#app .btn_01{background:#793AFF;border-color:#793AFF;color:#FFFFFF}
#app .btn_02{}
#app .btn_03{background:#FFFFFF;border-color:#FFFFFF;color:#C0C0C0}

/**/
#header{position:sticky;z-index: 99;top:0;width:100%;height:50px;padding:0 50px;flex-shrink: 0;display: flex;align-items: center;}
#header.fixed{background:#ffffff;box-shadow: 0 0 8px rgb(0 0 0 / 2.5%);}
#header .prev{position:absolute;top:0;left:0;}
#header .prev button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;background: transparent;}
#header .prev button i{display:block;width:20px;height:20px;background:url("../img/icon_history_back.png") no-repeat 50% 50% / contain; }
#header .title{padding:0 3px;line-height:30px;font-size:20px;font-weight:700;text-align:left;flex: 1;}

/**/
#bottom{position:fixed;z-index: 99;bottom:0;left: 50%;width:500px;max-width:100%;transform: translateX(-50%);}
#bottom ul{display:flex;align-items:center;padding:0 34px;width:100%;height:74px;background: #ffffff;border-radius: 12px 12px 0 0;box-shadow: 0 -4px 18px rgba(0,0,0,0.07);}
#bottom li{}
#bottom li a{display:flex;width:28px;height:28px;}
#bottom li a i{display:block;width:100%;height:100%;}
#bottom li + li{margin-left:auto;}
#bottom li.home i{background:url("../img/bottom_home.png") no-repeat 50% 50% / contain}
#bottom li.usage i{background:url("../img/bottom_usage.png") no-repeat 50% 50% / contain}
#bottom li.mypage i{background:url("../img/bottom_mypage.png") no-repeat 50% 50% / contain}
#bottom li.home.on i{background:url("../img/bottom_home_on.png") no-repeat 50% 50% / contain}
#bottom li.usage.on i{background:url("../img/bottom_usage_on.png") no-repeat 50% 50% / contain}
#bottom li.mypage.on i{background:url("../img/bottom_mypage_on.png") no-repeat 50% 50% / contain}

/**/
#splash{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height: calc(var(--vh, 1vh) * 100);padding-bottom: 8%;}
#splash .image{width:110px;height:auto;margin: auto 0;transform:scale(0);transition:all 0.5s}
#splash .image img{display:block;width:auto;max-width:100%;height:auto;}
#splash .cite{font-size:26px;font-weight:bold;color:#793AFF;transform:translateY(50px);opacity:0;transition:all 0.5s;}
#splash.animate{}
#splash.animate .image{transform:scale(1)}
#splash.animate .cite{transform:translateY(0);opacity:1;transition-delay:0.5s}

/**/
#start{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;height: calc(var(--vh, 1vh) * 100);}
#start .slider{position: relative;width: 100%;overflow: hidden;flex: 1;display: flex;flex-direction: column;justify-content: flex-end;padding: 30px 0;height: calc((var(--vh, 1vh) * 100) - 187px);}
#start .slider .swiper-slide{display:flex;flex-direction:column;justify-content:flex-end}
#start .slider .tit{padding:0 20px;line-height: 32px;font-size:24px;font-weight: 700;}
#start .slider .img{height: 75%;display: flex;align-items: center;justify-content: center;}
#start .slider .img img{display:block;width: auto;height: auto;max-width: 100%;max-height: 100%;margin: 0 auto;}
#start .dots{display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
#start .dots span{margin: 0 1.5px;width: 5px;height: 5px;border-radius: 5px;background: #c4c4c4;text-indent: -9999em;overflow: hidden;opacity: 1;}
#start .dots span.swiper-pagination-bullet-active{width:29px;background:#793AFF;}
#start .button{padding: 30px 20px;flex-shrink: 0;}
#start .button .btn{display:flex;width:100%;height:56px;border-radius:56px;border:1px solid transparent;font-size:16px;font-weight: 500;align-items: center;justify-content: center;}
#start .button .btn + .btn{margin-top:10px;}

/*
#login{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;height: calc(var(--vh, 1vh) * 100);}
#login .head{display:flex;flex-direction:column;justify-content: flex-end;background: #f6f1ff url(../img/login_bg.png) no-repeat bottom center / 100% auto;padding: 0 20px;height: calc((var(--vh, 1vh) * 100) - 302px - 172px);}
#login .head .tit{line-height: 36px;font-size: 30px;font-weight: 500;text-align: center;padding: 30px 0;max-height: 40%;display: flex;flex-direction: column;justify-content: flex-end;flex-shrink: 0;}
#login .head .tit strong{font-weight:700;}
#login .head .img{padding: 0 20px 30px;max-height: 60%;}
#login .head .img img{display:block;width: auto;height:auto;max-width: 100%;max-height: 100%;margin: 0 auto;}
#login .form{padding:20px;}
#login .form .con{margin-bottom:30px;}
#login .form .con dl{display:flex;}
#login .form .con dl + dl{margin-top:10px;}
#login .form .con dt{}
#login .form .con dd{width:100%;}
#login .form .con dd input[type="text"],
#login .form .con dd input[type="password"]{display:block;width:100%;height:50px;padding: 0 15px;font-size: 16px;font-weight: 500;color:#252836;border: 1px solid #f1f1f1;}
#login .form .act{margin-top:10px}
#login .form .act button{display: flex;width: 100%;height: 56px;border-radius: 56px;border: 1px solid transparent;font-size: 16px;font-weight: 500;align-items: center;justify-content: center;}
#login .form .act button + button{margin-top:10px}
#login .form .act button.btn_submit{background: #793AFF;border-color: #793AFF;color: #FFFFFF;}
#login .form .link{margin-top:10px}
#login .form .link a{display: flex;width: 100%;height: 56px;border-radius: 56px;border: 1px solid transparent;font-size: 16px;font-weight: 500;align-items: center;justify-content: center;}
#login .form .link a + a{margin-top:10px}
#login .form .link a.btn_register{background: #FFFFFF;border-color: #793AFF;color: #793AFF;}
#login .button{padding: 20px 20px 30px;flex-shrink:0;}
#login .button .btn{display:flex;width:100%;height:56px;border-radius:56px;border:1px solid transparent;font-size:16px;font-weight: 500;align-items: center;justify-content: center;}
#login .button .btn i{width:18px;height:18px;margin-right:12px;}
#login .button .btn + .btn{margin-top:10px;}
#login .button .kakao{background: #FFEB00;border-color: #FFEB00;color: #252836;}
#login .button .kakao i{background:url("../img/icon_kakao.png") no-repeat 50% 50% / contain}
#login .button .apple{background: #FFFFFF;border-color: #C0C0C0;color: #252836;}
#login .button .apple i{background:url("../img/icon_apple.png") no-repeat 50% 50% / contain}
*/

/**/
#app .headers{position: fixed;display: flex !important;align-items: center;padding: 0 20px;top: 0;left: 50%;width: 500px;max-width: 100%;height: 60px;z-index: 11;transform: translateX(-50%);background: #ffffff;}
#app .headers .util{position:absolute;top:50%;left:10px;transform:translateY(-50%);z-index: 2;}
#app .headers .util .btn{min-width: 30px;height:30px;position:relative;z-index:5;display: flex;align-items: center;background: transparent;}
#app .headers .util .btn i{display:block;width:30px;height:30px;background: url("../img/icon_history_back.png") no-repeat 50% 50% / auto 16px;}
#app .headers .util .btn p{font-size:14px;color:#000000}
#app .headers .tool{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index: 2;}
#app .headers .tool .btn{width:30px;height:30px;position:relative;z-index:5}
#app .headers .tool .btn i{display:block;width:30px;height:30px}
#app .headers .title{flex:1;display:flex;align-items:center;text-align:center;justify-content:center;line-height: 18px;font-size: 16px;font-weight:500;color: #272727;}
#app .headers .title img{display:block;width:auto;height: 26px;}
#app .tab-btn{margin:0 0 25px 0;}
#app .tab-btn ul{display:flex;}
#app .tab-btn li{position:relative;flex:1;border:1px solid #DBDBDB}
#app .tab-btn li + li{margin-left:-1px;}
#app .tab-btn li a{display:flex;align-items:center;justify-content:center;height:44px;font-size: 14px;color: #000000;}
#app .tab-btn li.active{z-index:2;border:1px solid #793AFF;}
#app .tab-btn li.active a{color:#793AFF;}
#app .tab-box{display:none}
#app .tab-box.active{display:block;}


/**/
#login{padding:60px 0 0 0;display: flex;flex-direction: column;min-height: 100vh;}
#login .login{padding: 12px 25px 50px;}
#login .login .count{font-size:12px;color:#767676}
#login .login .count span{color:#793AFF;font-size:16px;}
#login .login .title{display:flex;position: relative;margin: 0 0 25px 0;}
#login .login .title .tit{line-height: 42px;font-size: 28px;font-weight:bold;color: #000000;}
#login .login .title .txt{text-align:center;position: absolute;bottom: 5px;right: 0;width: 50%;font-size:12px;color:#767676;white-space: nowrap;letter-spacing: -0.5px;}
#login .login .title .txt i{font-size:50px;display: block;line-height: 1;margin: 0 0 10px 0;}
#login .login .title .txt span{color:#793AFF;font-size:16px;}
#login .login .form{margin: 25px 0;}
#login .login .form ul{}
#login .login .form li{}
#login .login .form li + li{margin-top:10px}
#login .login .form li .inp{position:relative;}
#login .login .form li input[type="text"],
#login .login .form li input[type="password"]{width:100%;height:52px;padding: 12px 42px 12px 12px;font-size:14px;color:#000000;background: #F1F1F5;}
#login .login .form li input[type="text"]::placeholder,
#login .login .form li input[type="password"]::placeholder{color:#999999}
#login .login .form li .btn_reset{position:absolute;top:50%;right:12px;;transform:translateY(-50%);width:20px;height:20px;display:none;}
#login .login .form li .btn_reset img{display:block;width:auto;max-width:100%;height:auto;}
#login .login .form li .btn_reset.on{display:block;}
#login .login .form li .error_msg{border-top: 1px solid #FF3120;line-height: 20px;font-size: 14px;color: #FF3120;}
#login .login .failed{margin: 25px 0;}
#login .login .failed .tit{line-height:20px;font-size:14px;color:#FF3120;}
#login .login .failed .txt{line-height:20px;font-size:14px;color:#DEDEDE;}
#login .login .failed .img{display:flex;margin-top:5px;padding-top:5px;border-top:1px solid #DEDEDE}
#login .login .failed .img > i{border: 1px solid #DEDEDE;flex:1;height: 68px;}
#login .login .failed .img > i img{display:block;width:100%;height: 100%;object-fit: cover;}
#login .login .failed .img > div{width:32px;margin-left: 4px;display:flex;flex-direction:column;}
#login .login .failed .img > div a{border:1px solid #DBDBDB;padding:5px;flex: 1;display: flex;align-items: center;justify-content: center;}
#login .login .failed .img > div a + a{margin-top: 4px;}
#login .login .failed .img > div a img{display:block;width:100%;height:auto;max-width: 16px;}
#login .login .failed .inp{margin-top:10px;}
#login .login .failed .inp input{width:100%;height:52px;padding: 12px 42px 12px 12px;font-size:14px;color:#000000;background: #F1F1F5;}
#login .login .failed .inp input::placeholder{color:#999999}
#login .login .tool{display:flex;align-items:center;margin:0 0 30px 0;}
#login .login .tool .checkbox{width:50%;display:flex;align-items:center}
#login .login .tool .checkbox input{display: none;}
#login .login .tool .checkbox input ~ i{margin: 0 3px 0 0;width: 20px;height: 20px;background: url("../img/icon_check_agree.png") no-repeat 50% 50% / contain;}
#login .login .tool .checkbox input ~ p{line-height: 20px;font-size: 14px;color: #000000;}
#login .login .tool .checkbox input:checked ~ i{background:url("../img/icon_check_agree_on.png") no-repeat 50% 50% / contain}
#login .login .button{}
#login .login .button button,
#login .login .button a,
#login .login .button .btn{display:flex;width:100%;height:52px;border-radius:8px;background:#ffffff;border:1px solid #793AFF;align-items:center;justify-content:center;font-size:16px;font-weight:bold;color:#793AFF}
#login .login .social{margin:25px 0}
#login .login .social ul{display:flex;flex-wrap:wrap;margin:0 -3.5px -7px;}
#login .login .social li{width:50%;padding:0 3.5px 7px;}
#login .login .social li a{border:1px solid #707070;display:flex;align-items: center;justify-content: flex-start;height:36px;padding: 0 20%;}
#login .login .social li p{font-size: 14px;font-weight: bold;color: #000000;}
#login .login .social li i{width: 28px;height: 28px;margin:0 3px 0 0;}
#login .login .social li.naver i{background:url("../img/icon_sns_naver.png") no-repeat 50% 50% / contain}
#login .login .social li.facebook i{background:url("../img/icon_sns_facebook.png") no-repeat 50% 50% / contain}
#login .login .social li.kakao i{background:url("../img/icon_sns_kakao.png") no-repeat 50% 50% / contain}
#login .login .social li.apple i{background:url("../img/icon_sns_apple.png") no-repeat 50% 50% / contain}
#login .login .social li.google i{background:url("../img/icon_sns_google.png") no-repeat 50% 50% / contain}
#login .login .find{margin:10px 0 0 0;font-size:14px;color:#000000;text-align:center}
#login .login .find a{color:#793AFF;}
#login .login .sign{margin:10px 0 0 0;font-size:14px;color:#767676;text-align:center}
#login .login .sign a{color:#000000;display: inline-flex;align-items: center;}
#login .login .sign a i{width:12px;height:12px;background:url("../img/icon_link_arrow.png") no-repeat 50% 50% / contain}

/**/
#login .find{padding: 12px 25px 20px;}
#login .find .text{margin: 0 0 35px 0;text-align: center;line-height: 22px;font-size: 14px;color: #000000;}
#login .find .form{}
#login .find .form ul{}
#login .find .form li + li{margin:15px 0 0 0;}
#login .find .form li .tit{margin:0 0 15px 0;line-height:20px;font-size:16px;color:#000000;}
#login .find .form li .tit em{color:#FF3120}
#login .find .form li .inp{position:relative;display: flex;}
#login .find .form li input[type="text"],
#login .find .form li input[type="password"]{width: 100%;height:52px;padding: 12px 42px 12px 12px;font-size:14px;color:#000000;background: #F1F1F5;}
#login .find .form li select{}
#login .find .form li .btn_cert{display:flex;width: 100px;height:52px;background:#ffffff;border:1px solid #793AFF;align-items:center;justify-content:center;font-size:16px;color:#793AFF;flex-shrink: 0;margin: 0 0 0 15px}
#login .find .form li .btn_reset{}
#login .find .form li .error_msg{border-top: 1px solid #FF3120;line-height: 20px;font-size: 14px;color: #FF3120;}
#login .find .form li .guide_msg{line-height: 20px;font-size: 14px;color: #191919;}
#login .find .form li .check_msg{display: flex;width: 100%;height: 52px;background: #ffffff;border: 1px solid #793AFF;align-items: center;justify-content: center;font-size: 16px;color: #793AFF;flex-shrink: 0}
#login .find .form li .border_msg{display: flex;margin: 10px 0;padding: 10px 0;width: 100%;background: #ffffff;border-top: 1px solid #DEDEDE;font-size: 12px;color: #191919;flex-shrink: 0}
#login .find .form li .btn_reset{position:absolute;top:50%;right:12px;;transform:translateY(-50%);width:20px;height:20px;display:none;}
#login .find .form li .btn_reset img{display:block;width:auto;max-width:100%;height:auto;}
#login .find .form li .btn_reset.on{display:block;}
#login .find .button{margin: 35px 0;}
#login .find .button button,
#login .find .button a,
#login .find .button .btn{display:flex;width:100%;height:52px;border-radius:8px;background:#ffffff;border:1px solid #793AFF;align-items:center;justify-content:center;font-size:16px;font-weight:bold;color:#793AFF}

/**/
#sign{padding:60px 0 0 0}
#sign .sign{padding: 12px 25px 50px;}
#sign .sign .count{margin: 0 0 12px 0;font-size:12px;color:#767676;text-align: center;}
#sign .sign .count span{color:#793AFF;font-size:16px;}
#sign .sign .title{display:flex;position: relative;margin: 30px 0;}
#sign .sign .title .tit{line-height: 42px;font-size: 28px;font-weight:bold;color: #000000;width: 100%;text-align: center;}
#sign .sign .title .txt{text-align:center;position: absolute;bottom: 5px;right: 0;width: 30%;font-size:12px;color:#767676;white-space: nowrap;letter-spacing: -0.5px;display: none !important;}
#sign .sign .title .txt i{font-size:50px;display: block;line-height: 1;margin: 0 0 10px 0;}
#sign .sign .title .txt span{color:#793AFF;font-size:16px;}
#sign .sign .agree{}
#sign .sign .agree ul{}
#sign .sign .agree li{position: relative;margin: 0 0 20px 0;}
#sign .sign .agree li .checkbox{display: flex;align-items: center;justify-content: flex-start;cursor: pointer;}
#sign .sign .agree li .checkbox input{display: none;}
#sign .sign .agree li .checkbox input ~ i{margin: 0 15px 0 0;width: 20px;height: 20px;flex-shrink: 0;background: url("../img/icon_checked.png") no-repeat 50% 50% / contain;}
#sign .sign .agree li .checkbox input ~ p{line-height: 20px;font-size: 16px;color: #000000;}
#sign .sign .agree li .checkbox input ~ p strong{display: block;line-height: 20px;font-size: 20px;}
#sign .sign .agree li .checkbox input:checked ~ i{background: url("../img/icon_checked_on.png") no-repeat 50% 50% / contain;}
#sign .sign .agree li .checkbox input:checked ~ p{}
#sign .sign .agree li .checkbox input:checked ~ p strong{}
#sign .sign .agree li .error_msg{margin:2px 0 0 0}
#sign .sign .agree li a{position: absolute;top: 0;right: 0;line-height: 20px;font-size: 16px;color: #000;}
#sign .sign .greet{text-align: center;margin: 0 0 50px 0;}
#sign .sign .greet .tit{line-height: 28px;font-size: 20px;font-weight: bold;color: #000000;}
#sign .sign .greet .txt{line-height: 21px;font-size: 16px;color: #000000;}
#sign .sign .form{}
#sign .sign .form ul{}
#sign .sign .form ul + ul{border-top:1px solid #eee;margin-top:25px;padding-top:25px;}
#sign .sign .form li{margin:0 0 15px 0}
#sign .sign .form li:last-child{margin-bottom:0;}
#sign .sign .form li .tit{margin:0 0 15px 0;line-height:20px;font-size:16px;color:#000000;}
#sign .sign .form li .tit em{color:#FF3120}
#sign .sign .form li .inp{position:relative;display:flex;}
#sign .sign .form li .sel{position:relative;display:flex;}
#sign .sign .form li input[type="text"],
#sign .sign .form li input[type="password"]{width: 100%;height:52px;padding: 12px 42px 12px 12px;font-size:14px;color:#000000;background: #F1F1F5;}
#sign .sign .form li .error_msg{border-top: 1px solid #FF3120;line-height: 20px;font-size: 14px;color: #FF3120;}
#sign .sign .form li .guide_msg{line-height: 20px;font-size: 14px;color: #191919;}
#sign .sign .form li .check_msg{display: flex;width: 100%;height: 52px;background: #ffffff;border: 1px solid #08A8CD;align-items: center;justify-content: center;font-size: 16px;color: #08A8CD;flex-shrink: 0}
#sign .sign .form li .border_msg{display: flex;margin: 10px 0;padding: 10px 0;width: 100%;background: #ffffff;border-top: 1px solid #DEDEDE;font-size: 12px;color: #191919;flex-shrink: 0}
#sign .sign .form li .btn_reset{position:absolute;top:50%;right:12px;;transform:translateY(-50%);width:20px;height:20px;display:none;}
#sign .sign .form li .btn_reset img{display:block;width:auto;max-width:100%;height:auto;}
#sign .sign .form li .btn_reset.on{display:block;}
#sign .sign .form li select{}
#sign .sign .form li select + select{margin-left:10px;}
#sign .sign .form li .profile{position:relative;margin: 0 0 15px 0;}
#sign .sign .form li .profile_img{margin: 0 auto 10px;width:100px;height:100px;border-radius:100px;background:#DBDBDB}
#sign .sign .form li .profile_img img{display:block;width:100%;height:100%;object-fit:cover;}
#sign .sign .form li .profile_txt{text-align:center;font-size:16px;color: #000000;}
#sign .sign .form li .file{display:flex;}
#sign .sign .form li .file input{display:none;}
#sign .sign .form li .file .file_name{flex: 1;display: flex;justify-content: center;align-items: center;width: 100px;height: 52px;background: #F1F1F5;padding: 0 16px;font-size: 16px;color: #000000;}
#sign .sign .form li .file .file_button{}
#sign .sign .form li .file .file_button p{display:flex;width: 100px;height:52px;background:#ffffff;border:1px solid #793AFF;align-items:center;justify-content:center;font-size:16px;color:#793AFF;flex-shrink: 0;margin: 0 0 0 15px;}
#sign .sign .form li .btn_cert{display:flex;width: 100px;height:52px;background:#ffffff;border:1px solid #793AFF;align-items:center;justify-content:center;font-size:16px;color:#793AFF;flex-shrink: 0;margin: 0 0 0 15px}
#sign .sign .form li .btn_reset{}
#sign .sign .button{margin: 65px 0 0 0;}
#sign .sign .button button,
#sign .sign .button a,
#sign .sign .button .btn{display:flex;width:100%;height:52px;border-radius:8px;background:#ffffff;border:1px solid #793AFF;align-items:center;justify-content:center;font-size:16px;font-weight:bold;color:#793AFF}
#sign .bglogo{margin-top:100px;padding:0 25px;}
#sign .bglogo img{display:block;margin:0 auto;width:auto;max-width:160px}


/**/
#password{position:relative;z-index:1;display:flex;flex-direction:column;justify-content: flex-start;height: calc((var(--vh, 1vh) * 100) - 50px);text-align:center;padding-bottom: 50px;}
#password .head{padding:50px 0;}
#password .title{line-height:32px;font-size:24px;font-weight:700;color:#323232;margin-bottom:16px;}
#password .text{line-height:19px;font-size:16px;color:#c0c0c0;margin-bottom:54px;}
#password .dots{display: flex;align-items: center;justify-content: center;}
#password .dots .dot{margin:0 7.5px;width:13px;height:13px;border-radius:13px;background:#c0c0c0;text-indent: -9999em;overflow: hidden;}
#password .dots .dot.on{background:#793AFF}
#password .button{display:flex;flex-wrap:wrap;flex: 1;}
#password .button .keyup{width:33.33%;font-size: 30px;color: #313131;background: transparent;}
#password .button .keydel{background: url("../img/icon_keydel.png") no-repeat 50% 50% / auto 22px;text-indent: -9999em;overflow: hidden;}
#password .button .keyspace{opacity:0;visibility:hidden;pointer-events: none;}

/**/
#home{position: relative;padding-bottom: 75px;}
#home .header{position: relative;background:#6533D1;padding:30px 20px 30px;display: flex;align-items: center;}
#home .header .logo{position:relative;flex-shrink:0;}
#home .header .logo a{display: flex;width: 28px;height: 28px;align-items: center;justify-content: center;}
#home .header .logo a img{display:block;width:auto;height:22px;}
#home .header .tool{margin-left:auto;flex-shrink:0;}
#home .header .tool a{display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;}
#home .header .tool a + a{margin-left:10px;}
#home .header .tool a i{display: flex;width:28px;height:28px;}
#home .header .tool a.alarm i{background:url("../img/icon_alarm_w.png") no-repeat 50% 50% / contain}
#home .visual{position:relative;padding: 0 20px;overflow: hidden;}
#home .visual:after{content:'';position:absolute;top:0;left:0;width:100%;height: 80%;background:#6533D1;}
#home .visual .swiper-slide{position: relative;transform:scaleY(90%);transition:all 0.5s}
#home .visual .swiper-slide .img{position:relative;z-index: 1;border-radius: 10px;overflow: hidden;padding: 56.25% 0 0 0}
#home .visual .swiper-slide .img img{display:block;width:100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;}
#home .visual .swiper-slide .img:after{content:'';position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(0.31deg, rgba(11, 11, 11, 0.8) 11.55%, rgba(2, 2, 2, 0) 67.44%);}
#home .visual .swiper-slide .con{position:absolute;z-index: 2;bottom:0;left:0;padding:15px 14px;width:100%;}
#home .visual .swiper-slide .con .text{line-height: 26px;font-size:18px;font-weight:700;color:#FAFBFF;}
#home .visual .swiper-slide .con .name{position:absolute;bottom:12px;right:14px;font-size:10px;font-weight:600;color:#eeeeee;}
#home .visual .swiper-slide-active{margin: 0;transform:scaleY(100%)}
#home .quick{padding:20px;}
#home .quick ul{display:flex;flex-wrap:wrap;margin:0 -5px -10px;}
#home .quick li{padding:0 5px 10px;}
#home .quick li.col{width:100%}
#home .quick li.col a{flex-direction:row;align-items:center;}
#home .quick li.row{width:50%;}
#home .quick li.row a{flex-direction:column;}
#home .quick li a{display:flex;padding: 18px 16px;border-radius:8px;border:1px solid #e0e0e0;}
#home .quick li .con{}
#home .quick li .tit{line-height:29px;font-size:24px;font-weight:700;}
#home .quick li .txt{margin-top:2px;line-height: 16px;font-size:12px;color:#999999}
#home .quick li .img{margin-left:auto;height: 60px;}
#home .quick li .img img{display: block;width: auto;height: 100%;pointer-events: none;}
#home .banner{padding-bottom: 20px;overflow:hidden}
#home .banner img{display:block;width:100%;height:auto;}
#home .banner .dots{margin-top:12px;display: flex;align-items: center;justify-content: center;}
#home .banner .dots span{margin: 0 1.5px;width: 4px;height: 4px;border-radius: 4px;background: #c4c4c4;text-indent: -9999em;overflow: hidden;opacity: 1;}
#home .banner .dots span.swiper-pagination-bullet-active{background:#464A59;}
#home .escape{padding: 20px;overflow: hidden;}
#home .escape .head{display:flex;align-items: center;margin-bottom: 15px;}
#home .escape .head .title{line-height: 30px;font-size: 20px;font-weight: 700;}
#home .escape .head .more{margin-left:auto}
#home .escape .head .more a{font-size: 14px;color: #999;}
#home .escape .list{padding-right:10px;}
#home .escape .list .swiper-slide{}
#home .escape .list .swiper-slide img{display:block;width:100%;height:auto;}

/**/
#region{display: flex;flex-direction: column;min-height: calc((var(--vh, 1vh) * 100) - 50px);padding-bottom: 116px;}
#region .step{position: sticky;z-index: 9;width:100%;height:4px;background:#F8F8F8;top: 50px;}
#region .step i{display:block;height:100%;background:#793AFF;transition: all 0.5s;}
#region .content{position: relative;z-index: 1;flex: 1;overflow: hidden;}
#region .content [class^="content"]{padding:37px 20px;}
#region .content [class^="content"] .title{margin-bottom: 48px;line-height: 29px;font-size: 24px;font-weight: bold;}
#region .content [class^="content"] .title span{color:#793AFF}
#region .content [class^="content"] .text{line-height:17px;font-size:14px;}
#region .content [class^="content"] .title + .text{margin-top: -33px;margin-bottom: 16px;}
#region .content [class^="content"] .area{}
#region .content [class^="content"] .area ul{}
#region .content [class^="content"] .area li{position: relative;z-index:1;}
#region .content [class^="content"] .area li.active{z-index:2}
#region .content [class^="content"] .area li + li{margin-top:10px;}
#region .content [class^="content"] .area li .btnArea{display: flex;position: relative;z-index: 2;width: 100%;height: 62px;align-items: center;justify-content: flex-start;padding: 20px;border-radius: 9px;line-height: 19px;font-size: 16px;font-weight: 500;background: #F9F9F9 url("../img/icon_select_dropdown.png") no-repeat right 20px center / auto 14px;border: 1px solid #f9f9f9;}
#region .content [class^="content"] .area li .btnArea.active{background: #F9F9F9 url("../img/icon_select_dropdown.png") no-repeat right 20px center / auto 14px;border:1px solid #e5e5e5;}
#region .content [class^="content"] .area li .btnArea.on{background: #793aff url(../img/icon_select_dropdown.png) no-repeat right 20px center / auto 14px;color: #ffffff;border-color: #793aff;}
#region .content [class^="content"] .area li .listArea{position: relative;top: -10px;display:none;background: #ffffff;padding: 25px 20px 20px;width: 100%;height: auto;border-radius: 0 0 9px 9px;max-height: 25vh;overflow-y: auto;box-shadow: 0 0 12px rgba(0,0,0,0.016);border: 1px solid #e5e5e5;}
#region .content [class^="content"] .area li .listArea.active{}
#region .content [class^="content"] .area li .listArea .selArea{display: flex;width: 100%;height: 32px;background: transparent;font-size: 15px;align-items: center;}
#region .content [class^="content"] .input{}
#region .content [class^="content"] .input ul{}
#region .content [class^="content"] .input li{}
#region .content [class^="content"] .input li + li{margin-top:65px}
#region .content [class^="content"] .input li .checkbox{display: flex;align-items: center;cursor: pointer;margin-bottom: 14px;}
#region .content [class^="content"] .input li .checkbox input{display: none;}
#region .content [class^="content"] .input li .checkbox input ~ i{width:24px;height:24px;display:flex;align-items:center;justify-content:center;position:relative;}
#region .content [class^="content"] .input li .checkbox input ~ i:before{content:'';width:20px;height:20px;border-radius:20px;border: 2px solid #C0C0C0;box-sizing: border-box;}
#region .content [class^="content"] .input li .checkbox input ~ i:after{content: '';position: absolute;top: 50%;left: 50%;width: 10px;height: 10px;border-radius: 10px;background: #793AFF;box-sizing: border-box;transform: translate(-50%,-50%);display: none;}
#region .content [class^="content"] .input li .checkbox input ~ i + p{margin-left:10px;}
#region .content [class^="content"] .input li .checkbox input ~ p{line-height: 24px;font-size: 18px;font-weight: 500;}
#region .content [class^="content"] .input li .checkbox input:checked ~ i{}
#region .content [class^="content"] .input li .checkbox input:checked ~ i:before{border-color: #793AFF;}
#region .content [class^="content"] .input li .checkbox input:checked ~ i:after{display:block;}
#region .content [class^="content"] .input li .con{}
#region .content [class^="content"] .input li .con .inp{}
#region .content [class^="content"] .input li .con .inp input[type="text"]{display: flex;width: 100%;height: 62px;padding: 20px;line-height: 19px;font-size: 16px;border-radius: 9px;background: #F9F9F9;}
#region .content [class^="content"] .input li .con .sel{padding: 12px 0 12px 0;margin: 0 -12px 0 0;display: flex;flex-wrap: wrap;}
#region .content [class^="content"] .input li .con .sel span{margin: 0 12px 6px 0;}
#region .content [class^="content"] .input li .con .sel span button{display: flex;align-items: center;justify-content: center;border-radius: 9px;background: #ffffff;border: 1px solid #c0c0c0;padding: 0 20px;min-width: 70px;height: 38px;font-size: 16px;background: transparent;}
#region .content [class^="content"] .input li .con .sel span button.active{background: #793AFF;border-color: #793AFF;color: #ffffff;}
#region .content [class^="content"] .select{}
#region .content [class^="content"] .select ul{}
#region .content [class^="content"] .select li{}
#region .content [class^="content"] .select li + li{margin-top: 10px;}
#region .content [class^="content"] .select li .checkbox{display: flex;align-items: center;cursor: pointer;width: 100%;height: 62px;padding: 20px;background: #F9F9F9;border-radius: 9px;}
#region .content [class^="content"] .select li .checkbox input{display: none;}
#region .content [class^="content"] .select li .checkbox input ~ i{width:24px;height:24px;display:flex;align-items:center;justify-content:center;position:relative;}
#region .content [class^="content"] .select li .checkbox input ~ i:before{content:'';width:20px;height:20px;border-radius:20px;border: 2px solid #C0C0C0;box-sizing: border-box;}
#region .content [class^="content"] .select li .checkbox input ~ i:after{content: '';position: absolute;top: 50%;left: 50%;width: 10px;height: 10px;border-radius: 10px;background: #793AFF;box-sizing: border-box;transform: translate(-50%,-50%);display: none;}
#region .content [class^="content"] .select li .checkbox input ~ i + p{margin-left:10px;}
#region .content [class^="content"] .select li .checkbox input ~ p{line-height: 19px;font-size: 16px;font-weight: 500;}
#region .content [class^="content"] .select li .checkbox input:checked ~ i{}
#region .content [class^="content"] .select li .checkbox input:checked ~ i:before{border-color: #793AFF;}
#region .content [class^="content"] .select li .checkbox input:checked ~ i:after{display:block;}
#region .button{z-index: 2;padding: 30px 20px;flex-shrink: 0;position: fixed;bottom: 0;left: 50%;width:500px;max-width: 100%;transform: translateX(-50%);background: #ffffff;}
#region .button .btn{display:flex;width:100%;height:56px;border-radius:56px;border:1px solid transparent;font-size:16px;font-weight: 500;align-items: center;justify-content: center;}

/**/
#matching{display: flex;flex-direction: column;flex: 1;align-items: flex-start;justify-content: center;padding: 30% 24px 40%;height: calc(var(--vh, 1vh) * 100);width: 375px;max-width: 100%;margin: 0 auto;}
#matching .title{line-height: 31px;font-size: 26px;font-weight: bold;}
#matching .text{margin-top: 5px;margin-bottom: 50px;line-height: 17px;font-size: 14px;color: #c0c0c0;}
#matching .image{margin-top: auto;display: flex;align-items: center;justify-content: center;width: 100%;}
#matching .image div{position: relative;width:220px;height:220px}
#matching .image i:nth-child(1){content:'';position:absolute;z-index: 3;top:50%;left: 50%;transform: translate(-50%,-50%);width: 75px;height: 75px;border-radius: 75px;background: #793AFF;}
#matching .image i:nth-child(2){content:'';position:absolute;z-index: 2;top:50%;left: 50%;transform: translate(-50%,-50%);width: 155px;height: 155px;border-radius: 155px;background: #d6c2ff;animation: opacity 1s alternate infinite ease-in 0.5s;}
#matching .image i:nth-child(3){content:'';position:absolute;z-index: 1;top:50%;left: 50%;transform: translate(-50%,-50%);width: 220px;height: 220px;border-radius: 220px;background: #F6F2FF;animation: opacity 1s alternate infinite ease-in 1s;}

/**/
#estimate{padding:50px 20px}
#estimate .head{display: flex;align-items: center;margin-bottom: 12px;}
#estimate .head .total{font-size: 18px;font-weight: 500;}
#estimate .head .total strong{margin-left: 5px;font-size: 18px;font-weight: bold;color: #793aff;}
#estimate .head .expire{margin-left: auto;font-size: 16px;color: #f03a00;}
#estimate .list{}
#estimate .list ul{}
#estimate .list li{margin-bottom: 12px;}
#estimate .list li a{display: flex;padding: 15px 20px;border-radius: 8px;border: 1px solid #e0e0e0;background: #ffffff;}
#estimate .list li .thm{width: 80px;flex-shrink: 0;}
#estimate .list li .thm .img{margin: 0 auto 8px;width: 65px;height: 65px;border-radius: 65px;overflow: hidden;}
#estimate .list li .thm .img img{display: block;width: 100%;height: 100%;object-fit: cover;}
#estimate .list li .thm .tag{display: flex;flex-direction: column;align-items: center;justify-content: center;}
#estimate .list li .thm .tag span{display: flex;align-items: center;justify-content: center;font-size: 12px;height: 19px;background: #f0f0f0;border-radius: 19px;padding: 0 5px;color: #793AFF;}
#estimate .list li .thm .tag span + span{margin-top: 3px;}
#estimate .list li .con{flex: 1;display: flex;flex-direction: column;padding-left: 20px;}
#estimate .list li .con .name{line-height: 24px;font-size: 20px;font-weight: bold;}
#estimate .list li .con .star{display: flex;align-items: center;font-size: 12px;font-weight: 500;}
#estimate .list li .con .star img{width: auto;height: 15px;margin-right: 3px;}
#estimate .list li .con .info{margin-top: 14px;}
#estimate .list li .con .info dl{display: flex;align-items: center;line-height: 14px;font-size: 12px;font-weight: 500;}
#estimate .list li .con .info dl + dl{margin-top:5px;}
#estimate .list li .con .info dt{margin-right: 5px;}
#estimate .list li .con .info dd{}

/**/
#company{position: relative;padding-bottom: 116px;}
#company .head{display: flex;padding: 50px 20px 30px;}
#company .head .img{width: 88px;height: 88px;border-radius: 88px;margin-right: 26px;flex-shrink: 0;overflow: hidden;}
#company .head .img img{display: block;width: 100%;height: 100%;object-fit: cover;}
#company .head .con{}
#company .head .con .title{margin-bottom: 8px;line-height: 32px;font-size: 26px;font-weight: 500;}
#company .head .con .title strong{}
#company .head .con .star{display: flex;align-items: center;margin-bottom: 15px;}
#company .head .con .star img{height: 16px;width: auto;margin-right: 5px;}
#company .head .con .star span{font-size: 12px;font-weight: 500;color: #999;}
#company .head .con .text{line-height: 16px;font-size: 14px;color: #999;}
#company .head .con .stat{margin-top: 12px;padding-top: 12px;border-top: 1px solid #c4c4c4;display: flex;flex-wrap: wrap;}
#company .head .con .stat dl{display: flex;align-items: center;font-size: 14px;line-height: 30px;margin-right: 10px;padding-right: 10px;position: relative;}
#company .head .con .stat dt{margin-right: 5px;}
#company .head .con .stat dl:after{content:'';position:absolute;top:50%;right:0;transform: translate(50%,-50%);width: 2px;height: 2px;border-radius:4px;background:#464a59;}
#company .head .con .stat dd{}
#company .head .con .stat dd strong{font-size: 16px;font-weight:bold;margin: 0 5px 0 0;color: #793AFF;}
#company .info{background: #F9F9F9;padding: 20px 20%;}
#company .info dl{display: flex;align-items: center;justify-content: center;line-height: 17px;font-size: 14px;color: #999;}
#company .info dl + dl{margin-top:2px;}
#company .info dt{width: 30%;}
#company .info dd{flex: 1;}
#company .advantage{margin: 24px 20px;display: flex;align-items: center;justify-content: center;background: #f6f6f6;border-radius: 9px;height: 53px;line-height: 19px;font-size: 16px;font-weight: bold;}
#company .caution{margin: 0 42px 36px;display: flex;align-items: center;justify-content: center;}
#company .caution span{display: flex;align-items: center;justify-content: center;padding: 0 12px;height: 27px;border-radius: 19px;background: #f6f2ff;font-size: 14px;}
#company .caution span img{width: auto;height: 18px;margin-right: 2px;}
#company .review{padding: 0 20px;margin-bottom: 36px;}
#company .review .upper{display: flex;align-items: center;margin-bottom: 8px;}
#company .review .upper .tit{line-height: 22px;font-size: 18px;font-weight: 500;}
#company .review .upper .tit img{height:15px;margin-left:3px}
#company .review .upper .act{margin-left: auto;}
#company .review .upper .act a{display: flex;align-items: center;justify-content: center;font-size: 14px;color: #999;}
#company .review .list{}
#company .review .list ul{}
#company .review .list li{margin-bottom: 10px;}
#company .review .list li .inner{display: block;padding: 14px;border-radius: 8px;background: #ffffff;border: 1px solid #e0e0e0;}
#company .review .list li .star{margin-bottom: 11px;display: flex;align-items: center;font-size: 14px;color: #999;}
#company .review .list li .star img{height: 23px;width: auto;margin-right: 7px;}
#company .review .list li .text{line-height: 19px;font-size: 14px;}
#company .location{padding:0 20px;}
#company .location .upper{display: flex;margin-bottom: 11px;flex-direction: column;}
#company .location .upper .tit{line-height: 22px;font-size: 18px;font-weight: 500;}
#company .location .upper .txt{margin-top:5px;line-height:14px;font-size:12px;color:#999}
#company .location .cont{margin: 0 -20px;height:292px;}
#company .location .cont .root_daum_roughmap {width: 100% !important;height: 100% !important;object-fit:cover;}
#company .button{z-index: 22;padding: 30px 20px;flex-shrink: 0;position: fixed;bottom: 0;left: 50%;width:500px;max-width: 100%;transform: translateX(-50%);background: #ffffff;}
#company .button .btn{display:flex;width:100%;height:56px;border-radius:56px;border:1px solid transparent;font-size:16px;font-weight: 500;align-items: center;justify-content: center;}

/**/
#usage{padding-bottom: 75px;}
#usage .tabs{margin-top: 30px;padding: 13px 0 13px 20px;border-bottom:4px solid #f8f8f8;}
#usage .tabs ul{display:flex;overflow-x: auto;white-space: nowrap;padding-right: 20px;}
#usage .tabs ul{-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */}
#usage .tabs ul::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
#usage .tabs li{margin-right:5px;}
#usage .tabs li a{display:flex;height:28px;padding:0 12px;border-radius:28px;border:1px solid #c0c0c0;color:#c0c0c0;font-size:16px;align-items:center;justify-content:center;white-space: nowrap;}
#usage .tabs li.active a{border-color:#793AFF;background:#793AFF;color:#ffffff}
#usage .tab-box{display:none;}
#usage .tab-box.active{display:block;}
#usage .booking{}
#usage .booking ul{padding:20px;}
#usage .booking li{margin-bottom: 10px;}
#usage .booking li .inner{display: flex;flex-direction: column;border-radius: 8px;border: 1px solid #e0e0e0;overflow: hidden;padding: 15px 15px;}
#usage .booking li .desc{display:flex;align-items: center;}
#usage .booking li .img{flex-shrink:0;width:60px;height:auto;display:flex;align-items:center;justify-content:center;}
#usage .booking li .img img{display: block;width: 100%;height: auto;}
#usage .booking li .con{flex:1;padding: 0 32px;}
#usage .booking li .con .name{line-height: 22px;font-size: 18px;font-weight: bold;}
#usage .booking li .con .date{margin-top: 1px;line-height: 17px;font-size: 14px;font-weight: 500;}
#usage .booking li .act{flex-shrink:0;}
#usage .booking li .act .btn{display:flex;align-items:center;justify-content:center;padding:0 10px;height:22px;border-radius:22px;font-size:12px;}
#usage .booking li .current{margin-top:20px;display:flex;align-items:center;justify-content: center;width: 100%;}
#usage .booking li .current span{background: #F6F2FF;padding: 0 5px;display: flex;align-items: center;justify-content: center;font-size: 14px;font-weight: 500;color: #793aff;height: 22px;border-radius: 22px;}
#usage .payment{}
#usage .payment ul{}
#usage .payment li{border-bottom:8px solid #f8f8f8;}
#usage .payment li .inner{padding:30px 20px;}
#usage .payment li .upper{display:flex;align-items:center;margin-bottom:30px;}
#usage .payment li .upper .stat{display:flex;}
#usage .payment li .upper .stat span{display: flex;align-items: center;justify-content: center;margin: 0 4px 0 0;padding: 0 4px;height: 25px;border-radius: 6px;border: 1px solid #793aff;font-size: 16px;font-weight: 500;color: #793aff;font-weight: 500;}
#usage .payment li .upper .more{margin-left:auto;}
#usage .payment li .upper .more a{display:block;font-size:16px;color:#c0c0c0;}
#usage .payment li .info{}
#usage .payment li .info dl{display:flex;line-height:23px;font-size:16px;}
#usage .payment li .info dl + dl{margin-top:8px;}
#usage .payment li .info dt{width:112px;}
#usage .payment li .info dd{flex:1;}
#usage .list{}
#usage .list ul{}
#usage .list li{border-bottom:8px solid #f8f8f8;}
#usage .list li .inner{padding:30px 20px;}
#usage .list li .upper{display:flex;align-items:center;margin-bottom:30px;}
#usage .list li .upper .stat{display:flex;}
#usage .list li .upper .stat span{display: flex;align-items: center;justify-content: center;margin: 0 4px 0 0;padding: 0 4px;min-width: 60px;height: 25px;border-radius: 6px;border: 1px solid #793aff;font-size: 16px;font-weight: 500;color: #793aff;font-weight: 500;}
#usage .list li .info{}
#usage .list li .info dl{display:flex;line-height:23px;font-size:16px;}
#usage .list li .info dl + dl{margin-top:8px;}
#usage .list li .info dt{width:112px;}
#usage .list li .info dd{flex:1;}
#usage .list li .more{margin: 45px 20px 0;display: flex;align-items: center;justify-content: center;}
#usage .list li .more a{display:block;font-size:16px;color: #999;}
#usage .list li .button{display: flex;border-top: 1px solid #F8F8F8;}
#usage .list li .button .btn{display: flex;flex: 1;align-items: center;justify-content: center;height: 55px;font-size: 16px;font-weight: 500;background: #fff;}
#usage .list li .button .btn + .btn{border-left:1px solid #f8f8f8;}
#usage .list li .button .btn_confirm{color:#464A59;}
#usage .list li .button .btn_cancel{color:#999999}
#usage .list{}
#usage .list ul{}
#usage .list li{}
#usage .empty{display: flex;flex-direction: column;border-radius: 8px;border: 1px solid #e0e0e0;overflow: hidden;padding: 15px 15px;align-items: center;justify-content: center;height: 78px;margin: 20px;}
#usage .empty span{line-height: 17px;font-size: 14px;font-weight: bold;}
#usage .detail{border-top: 4px solid #F8F8F8;margin: 15px 0 0 0;}
#usage .detail .upper{display:flex;align-items:center;padding: 30px 20px 0;}
#usage .detail .upper .stat{display:flex;}
#usage .detail .upper .stat span{display: flex;align-items: center;justify-content: center;margin: 0 4px 0 0;padding: 0 4px;min-width: 60px;height: 25px;border-radius: 6px;border: 1px solid #793aff;font-size: 16px;font-weight: 500;color: #793aff;font-weight: 500;}
#usage .detail .desc{padding: 30px 20px;border-bottom:8px solid #F8F8F8}
#usage .detail .desc dl{display:flex;line-height:23px;font-size:16px;}
#usage .detail .desc dl + dl{margin-top:8px;}
#usage .detail .desc dt{width:112px;}
#usage .detail .desc dd{flex:1;}
#usage .detail .receipt{padding: 30px;}
#usage .detail .receipt dl{display: flex;align-items: center;line-height:17px;font-size:14px;color:#999}
#usage .detail .receipt dl + dl{margin-top: 10px;}
#usage .detail .receipt dt{}
#usage .detail .receipt dd{margin-left: auto;}
#usage .detail .receipt dl.cost{margin-bottom: 20px;padding-bottom: 10px;border-bottom:1px solid #999;color:#464a59;font-weight:bold;}
#usage .detail .receipt dl.cost dt{}
#usage .detail .receipt dl.cost dd{}

/**/
#payment{position: relative;min-height: calc((var(--vh, 1vh) * 100) - 50px);display: flex;flex-direction: column;}
#payment .payment{padding: 50px 0 125px;flex: 1;}
#payment .total{padding:20px;border-bottom:6px solid #F8F8F8;}
#payment .total dl{}
#payment .total dt{margin-bottom:24px;line-height:19px;font-size:16px;font-weight:600}
#payment .total dd{display:flex;align-items: flex-end;justify-content:flex-end;}
#payment .total dd strong{font-size:26px;font-weight:bold;}
#payment .total dd em{line-height: 30px;font-size:14px;font-weight:bold;margin-left:5px}
#payment .method{padding:32px 20px;border-bottom:6px solid #F8F8F8;}
#payment .method .tit{margin-bottom:15px;line-height:19px;font-size:16px;font-weight:600;}
#payment .method .inp{}
#payment .method .inp ul{}
#payment .method .inp li{}
#payment .method .inp li + li{margin-top:10px;}
#payment .method .inp li select{display: flex;padding: 0 20px;width: 100%;height: 62px;border-radius: 9px;background-color: #f9f9f9;border-color: #f9f9f9;}
#payment .method .inp li select option[value=""][disabled]{display:none;}
#payment .price{padding:20px;}
#payment .price dl{}
#payment .price dt{margin-bottom:24px;line-height:19px;font-size:!6px;font-weight:600}
#payment .price dd{display:flex;align-items: flex-end;justify-content:flex-end;}
#payment .price dd strong{font-size:26px;font-weight:bold;}
#payment .price dd em{line-height: 30px;font-size:14px;font-weight:bold;margin-left:5px}
#payment .agree{z-index: 2;flex-shrink: 0;position: fixed;bottom: 100px;left: 50%;width:500px;max-width: 100%;transform: translateX(-50%);background: #ffffff;padding: 0 20px;}
#payment .agree .checkbox{display: flex;align-items: center;cursor: pointer;height: 25px;}
#payment .agree .checkbox input{display: none;}
#payment .agree .checkbox input ~ i{width: 18px;height: 18px;margin-right: 4px;flex-shrink: 0;background: url("../img/icon_check_agree.png") no-repeat 50% 50% / contain;}
#payment .agree .checkbox input ~ p{font-size: 16px;font-weight: 600;}
#payment .agree .checkbox input:checked ~ i{background: url("../img/icon_check_agree_on.png") no-repeat 50% 50% / contain;}
#payment .button{z-index: 2;padding: 14px 20px 30px 20px;flex-shrink: 0;position: fixed;bottom: 0;left: 50%;width:500px;max-width: 100%;transform: translateX(-50%);background: #ffffff;}
#payment .button .btn{display:flex;width:100%;height:56px;border-radius:56px;border:1px solid transparent;font-size:16px;font-weight: 500;align-items: center;justify-content: center;}
#payment .complete{padding: 30px 30px 130px 30px;display: flex;flex-direction: column;justify-content: center;flex: 1;}
#payment .complete .title{margin-bottom: 4px;line-height: 26px;font-size: 22px;font-weight: bold;}
#payment .complete .text{display:flex;align-items: flex-end;justify-content: flex-start;margin-bottom: 30px;}
#payment .complete .text strong{font-size: 40px;font-weight:bold;}
#payment .complete .text em{line-height: 48px;font-size: 22px;font-weight:bold;margin-left:5px}
#payment .complete .receipt{}
#payment .complete .receipt dl{display: flex;align-items: center;line-height:17px;font-size:14px;color:#999}
#payment .complete .receipt dl + dl{margin-top: 10px;}
#payment .complete .receipt dt{}
#payment .complete .receipt dd{margin-left: auto;}
#payment .complete .receipt dl.cost{margin-bottom: 20px;padding-bottom: 10px;border-bottom:1px solid #999;color:#464a59;font-weight:bold;}
#payment .complete .receipt dl.cost dt{}
#payment .complete .receipt dl.cost dd{}

/**/
#mypage{position: relative;padding-bottom: 75px;}
#mypage .header{position: relative;background: #ffffff;padding:30px 20px 30px;display: flex;align-items: center;}
#mypage .header .logo{position:relative;flex-shrink:0;}
#mypage .header .logo a{display: flex;width: 28px;height: 28px;align-items: center;justify-content: center;}
#mypage .header .logo a img{display:block;width:auto;height:22px;}
#mypage .header .tool{margin-left:auto;flex-shrink:0;}
#mypage .header .tool a{display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;}
#mypage .header .tool a + a{margin-left:10px;}
#mypage .header .tool a i{display: flex;width:28px;height:28px;}
#mypage .header .tool a.alarm i{background:url("../img/icon_alarm.png") no-repeat 50% 50% / contain}
#mypage .mypage{}
#mypage .mypage .myinfo{text-align: center;padding: 0 26px 30px;border-bottom: 9px solid #f0f0f0;}
#mypage .mypage .myinfo .image{margin: 0 auto 13px;width: 89px;height: 89px;border-radius: 89px;background: #c4c4c4;display: flex;align-items: center;justify-content: center;overflow: hidden;}
#mypage .mypage .myinfo .image img{display: block;width: auto;max-width: 100%;max-height: 100%;object-fit: cover;}
#mypage .mypage .myinfo .name{line-height: 24px;font-size: 20px;font-weight: 700;}
#mypage .mypage .myinfo .func{margin-top: 40px;display: flex;align-items: center;justify-content: center;}
#mypage .mypage .myinfo .func a{}
#mypage .mypage .myinfo .func a + a{margin-left: 80px;}
#mypage .mypage .myinfo .func a strong{line-height: 19px;font-size: 16px;font-weight: 700;}
#mypage .mypage .myinfo .func a p{margin-top: 1px;line-height: 17px;font-size: 14px;color: #989898;}
#mypage .mypage .myinfo .func a.inq{}
#mypage .mypage .myinfo .func a.inq strong,
#mypage .mypage .myinfo .func a.inq p{color:#793AFF}
#mypage .mypage .mylink{}
#mypage .mypage .mylink ul{padding: 26px;}
#mypage .mypage .mylink ul + ul{border-top: 9px solid #f0f0f0;}
#mypage .mypage .mylink ul li{}
#mypage .mypage .mylink ul li a{display: flex;align-items: center;justify-content: flex-start;height: 38px;font-size: 18px;font-weight: 700;color: #4b4b4b;}
#mypage .mypage .mylink ul li a i{margin-left: auto;width: 14px;height: 14px;background: url("../img/icon_link.png") no-repeat 50% 50% / contain;}

/**/
#myinfo{padding-top:20px;padding-bottom: 100px;}
#myinfo .info{padding: 30px 22px;display: flex;align-items: center;}
#myinfo .info .img{width: 79px;height: 79px;flex-shrink: 0;border-radius: 79px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
#myinfo .info .img img{display: block;width: auto;max-width: 100%;max-height: 100%;object-fit: cover;}
#myinfo .info .con{flex: 1;padding: 0 18px;}
#myinfo .info .name{line-height: 24px;font-size: 20px;font-weight: 700;}
#myinfo .user{}
#myinfo .user .tit{padding: 12px 20px;border-bottom: 2px solid #f0f0f0;line-height: 22px;font-size: 18px;font-weight: 700;}
#myinfo .user .con{padding: 20px;border-bottom: 2px solid #f0f0f0;}
#myinfo .user .con dl{display: flex;align-items: center;line-height: 19px;font-size: 16px;}
#myinfo .user .con dl + dl{margin-top:9px;}
#myinfo .user .con dt{flex-shrink: 0;width: 90px;}
#myinfo .user .con dd{display: flex;align-items: center;flex: 1;}
#myinfo .user .con dd p{}
#myinfo .user .con dd a{color:#793AFF;margin-left: auto;font-size: 14px;}
#myinfo .edit{}
#myinfo .edit ul{}
#myinfo .edit li{min-height: 145px;}
#myinfo .edit .tit{padding: 12px 20px;border-bottom: 2px solid #f0f0f0;line-height: 22px;font-size: 18px;font-weight: 700;}
#myinfo .edit .con{padding: 20px;}
#myinfo .edit .con dl{display: flex;line-height: 24px;font-size: 16px;}
#myinfo .edit .con dl + dl{margin-top:9px;}
#myinfo .edit .con dl.on .cert{display:block;}
#myinfo .edit .con dt{flex-shrink: 0;width: 90px;font-weight: 700;}
#myinfo .edit .con dd{display: flex;flex-direction:column;flex: 1;}
#myinfo .edit .con dd button{color:#793AFF;margin-left: auto;font-size: 14px;background: transparent;}
#myinfo .edit .con dd a{color:#999999;margin-top: auto;font-size: 14px;}
#myinfo .edit .con dd .text{display:flex;}
#myinfo .edit .con dd .text p{font-size:14px;}
#myinfo .edit .con dd .cert{margin-top:6px;display: none;max-width: 200px;}
#myinfo .edit .con dd .cert p{margin-top:6px;line-height: 17px;font-size: 14px;color: #c0c0c0;}
#myinfo .edit .con dd .cert a{margin:6px 0 0 0;padding: 0 8px;display: flex;align-items: center;justify-content: center;width: 100%;height: 33px;border-radius: 8px;background: #793aff;color: #fff;}
#myinfo .edit .con dd .cert input{margin:16px 0 0 0;padding: 0 8px;display:flex;align-items:center;justify-content:center;width: 100%;height: 33px;border-radius: 8px;background: #F8F8F8;}
#myinfo .edit .con dd .cert .dp1{display:block;}
#myinfo .edit .con dd .cert .dp2{display:none;}
#myinfo .edit .con dd .link{display:flex;align-items:center;justify-content:flex-end;}

.layer-popup-inner{}
.layer-popup-inner .tit-s{padding: 12px 20px;border-bottom: 2px solid #f0f0f0;line-height: 22px;font-size: 18px;font-weight: 700;}
.layer-popup-inner .payment-info {margin-top: 32px;padding: 0 20px;}
.layer-popup-inner .payment-info .inpt-tit {line-height: 24px;font-size: 16px;margin-bottom: 8px;font-weight: 700;}
.layer-popup-inner .payment-info .input-txt{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;position: relative;display: inline-block;width: 100%;height: 40px;font-size: 14px;}
.layer-popup-inner .payment-info .input-txt input {width: 100%;height: 100%;padding: 0 16px;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: 3px;border: 1px solid #4d4d4d;border-color: #888;font-size: 14px;}
.layer-popup-inner .payment-info .input-txt + .input-txt { margin-left: 4px; }
.layer-popup-inner .payment-info .form-input {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.layer-popup-inner .payment-info li{min-height: auto !important;}
.layer-popup-inner .payment-info li.w-half { width: 50%; }
.layer-popup-inner .payment-info li + li { margin-top: 24px; }
.layer-popup-inner .payment-info .txt-ref {font-size: 12px;color: #888;margin: 8px 0 0;width: 100%;}
.layer-popup-inner [class^='btn-wrap'] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 24px; }
.layer-popup-inner .btn-wrap,
.layer-popup-inner .btn-wrap-r {padding:0 20px; margin-top: 24px; }
.layer-popup-inner .btn-wrap-r { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.layer-popup-inner .btn-wrap button + button,
.layer-popup-inner .btn-wrap-r button + button { margin-left: 10px; }
.layer-popup-inner .btn-pop-y { position: relative; display: inline-block; vertical-align: middle; text-align: center; border-radius: 3px; background: transparent linear-gradient(147deg, #e3b678 0%, #ae8450 45%, #e3b678 70%, #a17647 100%); color: #efefef; width: 76px; height: 32px; font-size: 12px; }
.layer-popup-inner .btn-pop-x { position: relative; display: inline-block; vertical-align: middle; text-align: center; border-radius: 3px; background: transparent linear-gradient(147deg, #e3b678 0%, #ae8450 45%, #e3b678 70%, #a17647 100%); color: #efefef; width: 76px; height: 32px; font-size: 12px; }
.layer-popup-inner .btn-pop-n { position: relative; display: inline-block; vertical-align: middle; text-align: center; border-radius: 3px; color: #efefef; width: 76px; height: 32px; font-size: 12px; background-color: #4d4d4d; }

#myinfo .inquiry{padding: 20px;}
#myinfo .inquiry .img{width: 95px;max-width: 100%;height: auto;}
#myinfo .inquiry .img img{display: block;width: auto;max-width: 100%;height: auto;}
#myinfo .inquiry .tit{line-height: 25px;font-size: 20px;font-weight: 700;}
#myinfo .inquiry .txt{margin-top: 12px;line-height: 18px;font-size: 13px;color: #c0c0c0;}
#myinfo .inquiry .act{margin-top: 32px;display: flex;flex-direction: column;}
#myinfo .inquiry .act a{display: flex;align-items: center;justify-content: center;width: 100%;height: 52px;border-radius: 11px;border: 1px solid #c0c0c0;background: #ffffff;font-size: 16px;font-weight: 500;color: #793aff;}
#myinfo .inquiry .act a + a{margin-top: 10px;}

/**/
#alarm{margin-top: -50px;padding-top:50px;background: #F8F8F8;min-height: calc(var(--vh, 1vh) * 100);display: flex;flex-direction: column;}
#alarm .list{margin-top: 65px;border-radius: 12px 12px 0 0;background: #ffffff;flex: 1;display:flex;flex-direction:column;}
#alarm .list ul{display: flex;flex-direction: column;flex: 1;}
#alarm .list li{text-align: center;display: flex;padding: 0 20px;height: 70px;align-items: center;justify-content: center;border-bottom:1px solid #c0c0c0;}
#alarm .list li a{line-height:17px;font-size:14px;}
#alarm .list li.empty{flex:1;}
#alarm .list li.empty p{font-size:16px;color:#c0c0c0;}

/**/
#withdraw{padding: 65px 20px 20px;min-height: calc((var(--vh, 1vh) * 100) - 50px);display: flex;flex-direction: column;}
#withdraw .tit{margin-bottom: 21px;line-height: 19px;font-size: 16px;font-weight: 700;}
#withdraw .txt{padding: 16px 16px;border-radius: 12px;background: #efefef;}
#withdraw .txt + .txt{margin-top: 10px;}
#withdraw .txt p{display:flex;line-height:17px;font-size:14px;color:#777}
#withdraw .txt p + p{margin-top:17px;}
#withdraw .txt p:before{content:'';width: 3px;height: 3px;border-radius: 3px;background:#777;margin: 6px 6px 0 0;flex-shrink:0;}
#withdraw .bot{margin-top: auto;margin-bottom: -20px;padding-top: 20px;padding-bottom: 20px;position: sticky;bottom: 0;background: #ffffff;}
#withdraw .agree{margin-bottom: 22px;}
#withdraw .agree .checkbox{display: flex;align-items: center;cursor: pointer;margin-bottom: 14px;}
#withdraw .agree .checkbox input{display: none;}
#withdraw .agree .checkbox input ~ i{width:24px;height:24px;display:flex;align-items:center;justify-content:center;position:relative;background: url("../img/icon_check_agree.png") no-repeat 50% 50% / contain;}
#withdraw .agree .checkbox input ~ i + p{margin-left: 12px;}
#withdraw .agree .checkbox input ~ p{line-height: 24px;font-size: 16px;font-weight: 500;}
#withdraw .agree .checkbox input:checked ~ i{background: url("../img/icon_check_agree_on.png") no-repeat 50% 50% / contain;}
#withdraw .button{}
#withdraw .button .btn{display: flex;align-items: center;justify-content: center;text-align: center;height: 56px;width: 100%;border-radius: 56px;font-size: 16px;font-weight: 600;}

/**/
#notice{}
#notice .title{display:flex;align-items:center;padding: 20px 30px 30px;background:#793AFF;height: 70px;margin-bottom: -10px;position: sticky;z-index: 1;top: 50px;}
#notice .title img{width:25px;height: auto;flex-shrink: 0;}
#notice .title strong{flex: 1;padding-left: 20px;margin-left: 30px;border-left: 0.5px solid #fff;line-height: 19px;font-size: 16px;font-weight: 600;color: #fff;}
#notice .notice{position:relative;z-index:2;border-radius:10px 10px 0 0;background:#fff}
#notice .notice ul{}
#notice .notice li{border-bottom:1px solid #ebebeb;}
#notice .notice li a{display:flex;flex-direction: column;justify-content: center;padding: 15px 30px;width: 100%;height:107px;}
#notice .notice li .subj{display:flex;line-height: 19px;font-size: 16px;font-weight: 700;align-items: center;}
#notice .notice li .subj p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
#notice .notice li .subj img{margin-left:4px;height: 15px;width: auto;flex-shrink: 0;}
#notice .notice li .date{margin-top: 6px;display:flex;line-height: 17px;font-size: 14px;color: #c0c0c0;}
#notice .notice li.checked{opacity:0.35;}
#notice .detail{position:relative;z-index:2;border-radius:10px 10px 0 0;background:#fff}
#notice .detail .head{padding:32px 30px;}
#notice .detail .head .date{margin-bottom: 6px;display:flex;line-height: 17px;font-size: 14px;color: #c0c0c0;}
#notice .detail .head .subj{display:flex;line-height: 24px;font-size: 20px;font-weight: 700;align-items: center;}
#notice .detail .cont{padding: 30px;}
#notice .detail .cont p{display:flex;min-height:19px;line-height:19px;font-size:16px;font-weight:500;}

/**/
#faq{}
#faq .title{display:flex;align-items:center;padding: 20px 30px 30px;background:#793AFF;height: 70px;margin-bottom: -10px;position: sticky;z-index: 1;top: 50px;}
#faq .title img{width:25px;height: auto;flex-shrink: 0;}
#faq .title strong{flex: 1;padding-left: 20px;margin-left: 30px;border-left: 0.5px solid #fff;line-height: 19px;font-size: 16px;font-weight: 600;color: #fff;}
#faq .faq{position:relative;z-index:2;border-radius:10px 10px 0 0;background:#fff;overflow: hidden;}
#faq .faq .head{display:flex;align-items:center;height:81px;padding:0 30px;line-height: 17px;font-size: 14px;font-weight: 700;}
#faq .faq .head img{height:18px;width:auto;margin-right:7px;flex-shrink:0;}
#faq .faq .guide{display:flex;align-items:center;justify-content:center;padding: 8px 30px;}
#faq .faq .guide img{height:20px;margin-right:9px;}
#faq .faq .guide p{line-height:17px;font-size:14px;}
#faq .faq .guide button{margin-left:36px;display:block;width: 18px;height: 18px;background: transparent;display: flex;align-items: center;justify-content: center;}
#faq .faq .guide button img{height: 20px;width:auto;margin: 0;}
#faq .faq .sort{padding: 20px 20px 60px;margin:0 -3.5px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
#faq .faq .sort button{margin:3.5px;padding: 8px 22px;display: flex;align-items: center;justify-content: center;border-radius: 36px;border: 1px solid #c0c0c0;line-height: 20px;font-size: 16px;color: #c0c0c0;background: transparent;height: 36px;}
#faq .faq .sort button.on{border-color:#793AFF;font-weight:500;color:#793AFF;}
#faq .faq .list{}
#faq .faq .list ul{border-top: 1px solid #EBEBEB;}
#faq .faq .list li{border-bottom: 1px solid #EBEBEB;}
#faq .faq .list li .qna_q{padding:10px 25px;display:flex;align-items:center;height: 60px;}
#faq .faq .list li .qna_q strong{font-size: 18px;font-weight: 700;color: #793aff;}
#faq .faq .list li .qna_q p{text-align: center;padding: 0 10px;flex: 1;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 17px;font-size: 14px;}
#faq .faq .list li .qna_q i{width: 14px;height: 7px;background: url("../img/icon_faq_arrow.png") no-repeat 50% 50% / contain;flex-shrink: 0;margin-left: 20px;}
#faq .faq .list li .qna_a{display:none;border-top: 1px solid #EBEBEB;padding: 30px;line-height: 17px;font-size: 14px;}
#faq .faq .list li.on .qna_q i{background: url("../img/icon_faq_arrow_on.png") no-repeat 50% 50% / contain;}
#faq .faq .list li.on .qna_a{display:block;}

/**/
#review{margin-top: -50px;padding-top: 50px;background: #F8F8F8;min-height: calc(var(--vh, 1vh) * 100);display: flex;flex-direction: column;}
#review .review{padding: 30px 25px;}
#review .review .tab-btn{margin-bottom: 44px;}
#review .review .tab-btn ul{display: flex;align-items: center;justify-content: center;height: 50px;border-radius: 50px;padding: 5px;background: #ffffff;}
#review .review .tab-btn li{flex: 1;}
#review .review .tab-btn li a{display: flex;align-items: center;justify-content: center;height: 40px;width: 100%;border-radius: 40px;font-size: 16px;font-weight: 500;color: #C0C0C0;}
#review .review .tab-btn li.active a{font-weight: 700;color: #ffffff;background: #793AFF;}
#review .review .tab-box{display:none}
#review .review .tab-box.active{display:block;}
#review .review .tab-box ul{}
#review .review .tab-box li{}
#review .review .tab-box li + li{margin-top:15px;}
#review .review .tab-box li .inner{position: relative;padding: 15px 25px 15px 15px;border-radius: 12px;background: #ffffff;box-shadow: 0 4px 17px -3px rgba(0,0,0,0.1);}
#review .review .tab-box li .sort{display: flex;align-items: center;justify-content: flex-start;margin-bottom: 12px;}
#review .review .tab-box li .sort span{display: flex;height: 33px;min-width: 106px;align-items: center;justify-content: center;text-align: center;border: 1px solid #c0c0c0;border-radius: 8px;font-size: 16px;font-weight: 700;color: #793aff;}
#review .review .tab-box li .head{display: flex;align-items: center;}
#review .review .tab-box li .head .name{line-height: 17px;font-size: 14px;}
#review .review .tab-box li .head .star{display: flex;align-items: center;justify-content: flex-end;margin-left: auto;}
#review .review .tab-box li .head .star img{height: 15px;width: auto;margin-right: 8px;}
#review .review .tab-box li .head .star p{font-size: 12px;font-weight: 500;color: #777;}
#review .review .tab-box li .text{margin-top: 20px;margin-bottom: 15px;line-height: 19px;font-size: 14px;}
#review .review .tab-box li .label{}
#review .review .tab-box li .label{display:flex;flex-direction: row-reverse;align-items:center;justify-content: flex-start;padding: 5px 0;}
#review .review .tab-box li .label img{height:28px;width:auto;}
#review .review .tab-box li .label input[type="radio"] {display:none;}
#review .review .tab-box li .label input[type="radio"] + .btn_star {font-size:24px;color:#ccc;cursor:pointer;padding: 0;}
#review .review .tab-box li .label input[type="radio"] + .btn_star .ic{display: block;width: 28px;height: 28px;background: url("../img/icon_star_empty.png") no-repeat 50% 50% / contain;flex-shrink: 0;}
#review .review .tab-box li .label input[type="radio"]:checked ~ .btn_star .ic{background: url("../img/icon_star.png") no-repeat 50% 50% / contain;}
#review .review .tab-box li .edit{position:absolute;top: 14px;right: 25px;display: flex;align-items: center;height: 33px;}
#review .review .tab-box li .edit a{font-size: 12px;color: #777;}
#review .review .tab-box li .button{margin-top:38px;display:flex;align-items:center;justify-content:center}
#review .review .tab-box li .button a{line-height:17px;font-size:14px;color:#999;}
#review .review .tab-box li.empty{background: #ffffff;border-radius: 12px;height: 153px;display: flex;align-items: center;justify-content: center;text-align: center;line-height: 19px;font-size: 16px;font-weight: 700;box-shadow: 0 4px 17px -3px rgb(0 0 0 / 10%);}
#review .write{margin: 30px 0 0 0;padding: 15px 22px;background: #ffffff;border-radius: 12px 12px 0 0;flex: 1;display: flex;flex-direction: column;}
#review .write .sort{display: flex;align-items: center;justify-content: flex-start;margin-bottom: 12px;}
#review .write .sort span{display: flex;height: 33px;min-width: 106px;align-items: center;justify-content: center;text-align: center;border: 1px solid #c0c0c0;border-radius: 8px;font-size: 16px;font-weight: 700;color: #793aff;background:#fff;}
#review .write .name{line-height: 17px;font-size: 14px;color: #999;margin-bottom: 9px;}
#review .write .star{display: flex;align-items: center;justify-content: flex-start;margin-bottom:16px;}
#review .write .star img{height: 22px;width: auto;margin-right: 8px;}
#review .write .star p{font-size: 14px;color: #999;}
#review .write .text{display:flex;align-items:center;justify-content:center;}
#review .write .text span{display:flex;margin: 16px auto 32px;padding: 6px 12px;align-items:center;line-height: 15px;font-size: 12px;background: #F6F2FF;border-radius: 28px;min-height: 28px;}
#review .write .text i{width: 18px;height: 18px;background: url("../img/icon_error.png") no-repeat 50% 50% / contain;margin-right: 9px;flex-shrink: 0;}
#review .write .text p{}
#review .write .input{}
#review .write .input textarea{padding:20px 18px;width:100%;height:250px;border-radius:10px;background:#f8f8f8;display: block;}
#review .write .button{margin-top: auto;margin-bottom: -15px;padding-top: 15px;padding-bottom: 15px;position: sticky;bottom: 0;background: #fff;}
#review .write .button .btn{display: flex;align-items: center;justify-content: center;text-align: center;height: 56px;width: 100%;border-radius: 56px;font-size: 16px;font-weight: 600;}

/**/
#reviewlist{margin-top: -50px;padding-top: 50px;background: #ffffff;min-height: calc(var(--vh, 1vh) * 100);display: flex;flex-direction: column;}
#reviewlist .list{padding: 50px 20px 20px;}
#reviewlist .list ul{}
#reviewlist .list li{margin-bottom: 10px;}
#reviewlist .list li .inner{position: relative;display: block;padding: 14px;border-radius: 8px;background: #ffffff;border: 1px solid #e0e0e0;}
#reviewlist .list li .star{margin-bottom: 11px;display: flex;align-items: center;font-size: 14px;color: #999;}
#reviewlist .list li .star img{height: 23px;width: auto;margin-right: 7px;}
#reviewlist .list li .text{line-height: 19px;font-size: 14px;}
#reviewlist .list li .date{position:absolute;top:14px;right:14px;line-height: 23px;font-size:14px;color:#999999;}

/**/
#app .modal-container{display: none;position: fixed;width: 500px;max-width: 100%;height: 100%;top: 0;left: 50%;z-index: 9999;background: rgba(0, 0, 0, 0.45);overflow: auto;transform: translateX(-50%);}
#app .modal-container.show{display: flex; align-items: center; justify-content: center;}
#app .modal-container.show.modal-column{align-items: flex-end;}
#app .modal-container .modal-wrapper{width: 500px;max-width: 100%;max-height: 90vh;box-shadow: 0 3px 6px rgba(0,0,0,0.1);background: #fff;position: relative;display: flex;flex-direction: column;}

#app #home-banner{}
#app #home-banner .modal-wrapper{border-radius: 16px 16px 0 0;overflow: hidden;}
#app #home-banner .inner{padding: 40px 50px 20px;background: #333333;text-align: center;}
#app #home-banner .tit{line-height: 24px;font-size: 22px;font-weight: 700;color: #ffffff;}
#app #home-banner .txt{margin-top: 12px;line-height: 16px;font-size: 15px;color: rgb(255 255 255 / 50%);}
#app #home-banner .coupon{margin-top: 20px;}
#app #home-banner .coupon .box{position:relative;width:100%;padding: 34px 30px 22px;border-radius:16px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);background: #ffffff;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#app #home-banner .coupon .box:before{content:'';position: absolute;top: 50%;left: 0;transform: translate(-50%,-50%);width: 20px;height: 20px;border-radius: 20px;background: #333333;}
#app #home-banner .coupon .box:after{content:'';position: absolute;top: 50%;right: 0;transform: translate(50%,-50%);width: 20px;height: 20px;border-radius: 20px;background: #333333;}
#app #home-banner .coupon .box .cost{}
#app #home-banner .coupon .box .cost strong{line-height: 59px;font-size: 49px;font-weight: 800;color: #793aff;letter-spacing: -1px;}
#app #home-banner .coupon .box .cost em{line-height: 24px;font-size: 20px;font-weight: 800;color: #793AFF;}
#app #home-banner .coupon .box .used{font-size: 14px;color: #BBBBBB;}
#app #home-banner .button{display: flex;align-items: center;height: 60px;padding: 10px 24px;font-size: 16px;font-weight: 500;}
#app #home-banner .button .nodis{color: #A3A3A3;}
#app #home-banner .button .close{margin-left: auto;color: #464A59;}

#app #company-matching{}
#app #company-matching .modal-wrapper{border-radius: 16px 16px 0 0;overflow: hidden;}
#app #company-matching .inner{padding: 40px 20px 10px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#app #company-matching .tit{line-height: 28px;font-size: 22px;font-weight: 500;text-align: center;margin-bottom: 36px;}
#app #company-matching .tel{position: relative;width:220px;height:220px}
#app #company-matching .tel i:nth-child(1){content:'';position:absolute;z-index: 3;top:50%;left: 50%;transform: translate(-50%,-50%);width: 75px;height: 75px;border-radius: 75px;background: #793AFF url("../img/icon_tele.png") no-repeat 50% 50% / 24px auto;}
#app #company-matching .tel i:nth-child(2){content:'';position:absolute;z-index: 2;top:50%;left: 50%;transform: translate(-50%,-50%);width: 155px;height: 155px;border-radius: 155px;background: #d6c2ff;animation: opacity 1s alternate infinite ease-in 0.5s;}
#app #company-matching .tel i:nth-child(3){content:'';position:absolute;z-index: 1;top:50%;left: 50%;transform: translate(-50%,-50%);width: 220px;height: 220px;border-radius: 220px;background: #F6F2FF;animation: opacity 1s alternate infinite ease-in 1s;}
#app #company-matching .txt{margin-top:28px;line-height:19px;font-size:16px;color:#999;text-align:center;}
#app #company-matching .button{display: flex;align-items: center;padding: 20px;font-size: 16px;font-weight: 500;}
#app #company-matching .button .btn{display: flex;align-items: center;justify-content: center;width: 100%;height: 56px;border-radius: 56px;}

#app #mypage-alert{}
#app #mypage-alert .modal-wrapper{width: 278px;border-radius: 16px;overflow: hidden;}
#app #mypage-alert .inner{padding: 36px 20px 24px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#app #mypage-alert .inner .tit{line-height: 19px;font-size: 16px;font-weight: 700;}
#app #mypage-alert .button{display: flex;flex-direction: column;border-top: 0.5px solid #e9e9e9;}
#app #mypage-alert .button .btn{display: flex;align-items: center;justify-content: center;width: 100%;height: 43px;border-radius: 43px;color: #793AFF;font-size: 14px;font-weight: 700;}

#app #mypage-withdraw{}
#app #mypage-withdraw .modal-wrapper{margin: 0 16px;width: 278px;border-radius: 16px;overflow: hidden;}
#app #mypage-withdraw .inner{padding: 36px 20px 24px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#app #mypage-withdraw .inner .tit{line-height: 19px;font-size: 16px;font-weight: 600;margin-bottom: 17px;}
#app #mypage-withdraw .inner .txt{display:flex;padding: 6px 12px;align-items:center;line-height: 15px;font-size: 12px;background: #F6F2FF;border-radius: 28px;min--height: 28px;}
#app #mypage-withdraw .inner .txt i{width: 18px;height: 18px;background: url("../img/icon_error.png") no-repeat 50% 50% / contain;margin-right: 9px;flex-shrink: 0;}
#app #mypage-withdraw .inner .txt p{}
#app #mypage-withdraw .button{display: flex;align-items: center;font-size: 16px;font-weight: 500;border-top: 0.5px solid #e9e9e9;}
#app #mypage-withdraw .button .btn{display: flex;align-items: center;justify-content: center;width: 100%;height: 50px;font-size: 14px;font-weight: 700;color: #783aff;}
#app #mypage-withdraw .button .btn + .btn{border-left:0.5px solid #e9e9e9;}

#app #mypage-withdraw-end{}
#app #mypage-withdraw-end .modal-wrapper{margin: 0 16px;width: 278px;border-radius: 16px;overflow: hidden;}
#app #mypage-withdraw-end .inner{padding: 24px 20px 15px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#app #mypage-withdraw-end .inner .tit{line-height: 19px;font-size: 16px;font-weight: 600;text-align: center;}
#app #mypage-withdraw-end .button{display: flex;align-items: center;font-size: 16px;font-weight: 500;padding-bottom: 10px;}
#app #mypage-withdraw-end .button .btn{display: flex;align-items: center;justify-content: center;width: 100%;height: 30px;font-size: 14px;font-weight: 600;color: #783aff;}

@keyframes opacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}