@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* Reset */
html{height: 100%;}
body {margin:0;padding:0;font-size:0.75em;height:100%;font-family: 'Roboto', 'Noto Sans KR', sans-serif;font-weight:400;word-break: keep-all;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img, dl, dt, dd, p {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
header ul, nav ul, footer ul {margin:0;padding:0;list-style:none}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button,input[type=button],input[type=submit]{cursor:pointer;}
input[type=text], input[type=password], input[type=submit], input[type=image], button {border-radius:0;-webkit-appearance:none}
textarea, select {font-size:1em;}
textarea {border-radius:0;-webkit-appearance:none}
p {margin:0;padding:0;word-break:break-all}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:inherit;text-decoration:none}
ul,ol,li{list-style:none;padding:0;margin:0;}
input, button, textarea, select {font-family: 'Roboto', 'Noto Sans KR', sans-serif;outline: none}
hr {content: '';display:block;padding:0;border:0;margin: 0;}


/*사파리 버튼 초기화*/
input[type="text"], input[type="password"], input[type="button"], input[type="submit"], textarea { -webkit-appearance: none; -webkit-border-radius: 0; }


/*placeholder*/
input::-ms-input-placeholder { font-weight: 500; color: #9d9d9d; }
input::-webkit-input-placeholder { font-weight: 500; color: #9d9d9d; }
input::-moz-placeholder { font-weight: 500; color: #9d9d9d; }

textarea::-ms-input-placeholder { font-weight: 500; color: #9d9d9d; }
textarea::-webkit-input-placeholder { font-weight: 500; color: #9d9d9d; }
textarea::-moz-placeholder { font-weight: 500; color: #9d9d9d; }


/*셀렉트 스타일*/
select {
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none; /* 화살표 없애기 공통*/
    background-image: url('../img/ico_arrow_select1.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) center;
    background-size: 24px;
    background-color: #fff;
    cursor: pointer;
}
select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }


/*드래그*/
::selection { background: #3677f6; color: #fff; }
::-moz-selection { background: #3677f6; color: #fff; }


/*--------------------------------------------------------------------------------------------------------------------------*/


/*공통 CSS*/
section { max-width: 420px; min-height: 100%; margin: 0 auto; padding-top: 48px; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); box-sizing: border-box; }


/*button style*/
.btn-custom { width: 100%; height: 44px; border: none; border-radius: 6px !important; box-sizing: border-box; background: #3677f6; font-size: 14px; font-weight: 500; color: #fff; letter-spacing: -0.28px; }

.btn-upload { display: block; position: relative; width: 100%; height: 90px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; background: #f9f9f9; }
.btn-upload label { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; }
.btn-upload input[type="file"] { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.upload-info { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.upload-info img { margin-bottom: 5px; }
.upload-info span { font-size: 14px; font-weight: 500; color: #9d9d9d; letter-spacing: -0.24px; }


/*checkbox & radio button style*/
.ck-custom { display: none; }
.ck-custom + label { display: block; width: 59px; height: 24px; background: url('../img/ico_check1_off.png') center center no-repeat; background-size: contain; cursor: pointer; }
.ck-custom:checked + label { background-image: url('../img/ico_check1_on.png'); }


/*thumbnail style*/
.thumb { width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }


/*header style*/
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; max-width: 420px; height: 48px; margin: 0 auto; border-bottom: 1px solid #f0f0f0; box-sizing: border-box; background: #fff; }
.hd { height: 100%; }
.hd .hd-back { position: absolute; left: 0; width: 48px; height: 100%; border: none; background: url('../img/ico_arrow_back1.svg') center center no-repeat; }
.hd .hd-tit { display: flex; justify-content: center; align-items: center; height: 100%; font-size: 16px; font-weight: 700; color: #000; text-align: center; }
.hd .hd-logo { position: absolute; top: calc(50% - 12px); left: 0; right: 0; width: 170px; margin: 0 auto; }


/*입장*/
.enter { padding-top: 123px; box-sizing: border-box; }
.enter .wrap { padding: 16px; box-sizing: border-box; }
.btn-group-enter { display: flex; justify-content: space-between; align-items: center; }
.btn-group-enter a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 48.5%; height: 27.778vw; max-height: 117px; border-radius: 12px; box-sizing: border-box; }
.btn-group-enter a:nth-child(1) { background: #f1faff; }
.btn-group-enter a:nth-child(2) { background: #fff4f0; }
.btn-group-enter img { height: 15.833vw; max-height: 67px; }
.btn-group-enter .tit { font-size: 13px; font-weight: 700; color: #000; letter-spacing: -0.26px; }


/*카센터 가맹점*/
.franchise .box { padding: 27px 16px 32px; border-bottom: 10px solid #f3f3f3; box-sizing: border-box; }
.franchise .box:last-child { border-bottom: none; }
.franchise .box .top-box { margin-bottom: 20px; font-size: 16px; font-weight: 700; color: #000; letter-spacing: -0.32px; }

.list-frm-franchise > li { margin-bottom: 20px; }
.list-frm-franchise > li:last-child { margin-bottom: 0; }
.list-frm-franchise .top-frm { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; }
.list-frm-franchise .top-frm .tit-frm { margin-bottom: 0; }
.list-frm-franchise .tit-frm { margin-bottom: 5px; font-size: 12px; font-weight: 500; color: #000; letter-spacing: -0.24px; }
.list-frm-franchise .tit-frm-v1 { font-size: 14px; }
.list-frm-franchise .count { font-size: 18px; font-weight: 400; color: #000; }
.list-frm-franchise .count span { font-weight: 700; color: #ff6231; }
.list-frm-franchise .inp-frm { width: 100%; height: 40px; padding: 0 15px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #000; letter-spacing: -0.28px; }
.list-frm-franchise .inp-frm-v1 { height: 50px; border-color: #ff6231; font-size: 24px; color: #ff6231; }
.list-frm-franchise .inp-frm-v1 { padding-bottom: 0; }
.list-frm-franchise .inp-frm-v1::-ms-input-placeholder { font-size: 14px; }
.list-frm-franchise .inp-frm-v1::-webkit-input-placeholder { font-size: 14px; }
.list-frm-franchise .inp-frm-v1::-moz-placeholder { font-size: 14px; }

.list-frm-franchise textarea.inp-frm { display: block; height: 150px; padding: 16px; box-sizing: border-box; resize: none; }
.list-frm-franchise .select-frm { width: 100%; height: 40px; padding: 0 15px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #000; letter-spacing: -0.28px; cursor: pointer; }
.list-frm-franchise .frm-group-condition { display: flex; align-items: center; }
.list-frm-franchise .frm-group-condition .select-frm:nth-child(1) { width: calc(100% - 148px); margin-right: 8px; }
.list-frm-franchise .frm-group-condition .select-frm:nth-child(2) { width: 140px; }
.list-frm-franchise .frm-group-unit { display: flex; align-items: center; }
.list-frm-franchise .frm-group-unit .inp-frm { width: calc(100% - 30px); }
.list-frm-franchise .frm-group-unit .unit { width: 30px; font-size: 14px; font-weight: 500; color: #000; text-align: right; letter-spacing: -0.28px; }

.franchise .btn-custom { margin-top: 15px; }

.btn-group-send { display: flex; justify-content: space-between; align-items: center; }
.btn-group-send .btn { display: flex; justify-content: center; align-items: center; width: calc(33.33% - 8px); height: 40px; border: 1px solid; border-radius: 6px; box-sizing: border-box; background: #fff; font-size: 14px; font-weight: 500; letter-spacing: -0.28px; }

.btn-group-send { margin-top: 15px; }
.btn-group-send .btn-new { border-color: #3677f6; color: #3677f6; }
.btn-group-send .btn-save { border-color: #000; color: #000; }
.btn-group-send .btn-delete { border-color: #ccc; color: #ccc; }

.list-customer { height: 170px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; overflow-y: auto; }
.list-customer li { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 10px 14px; border-bottom: 1px solid #f0f0f0; box-sizing: border-box; }
.list-customer li:last-child { border-bottom: none; }
.list-customer .tit { font-size: 13px; font-weight: 500; color: #000; }
.list-customer .btn-delete { width: 20px; height: 20px; border: none; background: url('../img/ico_x1.svg') center center no-repeat; }


/*메인*/
.main .wrap { padding: 24px 16px 0; box-sizing: border-box; }
.wifi-area { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.btn-group-main { margin-bottom: 32px; }
.btn-group-main a { display: flex; align-items: center; height: 100px; margin-bottom: 16px; padding: 0 20px; border-radius: 12px; box-sizing: border-box; }
.btn-group-main a:last-child { margin-bottom: 0; }
.btn-group-main a:nth-child(1) { background: #fff4f0; }
.btn-group-main a:nth-child(2) { background: #f1faff; }
.btn-group-main img { width: 89px; margin-right: 20px; }
.btn-group-main .tit { font-size: 20px; font-weight: 700; color: #222; letter-spacing: -0.4px; }

.list-menu-main { margin-bottom: 32px; }
.list-menu-main li { margin-bottom: 9px; }
.list-menu-main li:last-child { margin-bottom: 0; }
.list-menu-main a { display: flex; align-items: center; height: 48px; padding: 0 16px; border-radius: 8px; box-sizing: border-box; background: url('../img/ico_arrow_right1.svg') calc(100% - 12px) center no-repeat #f9f9f9; }
.list-menu-main img { margin-right: 4px; }
.list-menu-main .tit { font-size: 14px; font-weight: 700; color: #222; letter-spacing: -0.28px; }

.bnr-main { display: flex; align-items: center; width: 100%; height: 100px; padding: 0 20px; border-radius: 12px; box-sizing: border-box; background: #e6fdee; }
.bnr-main img { width: 89px; margin-right: 24px; }
.bnr-main .tit { font-size: 20px; font-weight: 700; color: #222; letter-spacing: -0.4px; }

.main .line { margin-top: 55px; height: 1px; background: #ddd; border: none; }

.company-info { position: relative; padding: 24px 8px; box-sizing: border-box; }
.company-info .contact-info .group { margin-bottom: 10px; }
.company-info .contact-info .group .tit { margin-bottom: 4px; font-size: 12px; font-weight: 700; color: #000; }
.company-info .contact-info .group .txt { font-size: 20px; font-weight: 700; color: #222; }
.company-info .contact-info .group2 .tit { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #000; }
.company-info .contact-info .group2 .txt { font-size: 14px; font-weight: 400; color: #222; }
.company-info img { position: absolute; top: calc(50% - 25px); right: 8px; width: 109px; }


@media only screen and (max-width: 1200px) {
	.header, section, .footer { max-width: 100%; }
}