@charset "utf-8";

/* 초기화 */
html {}
body {margin:0;padding:0;font-family: "Roboto","NotoSansKR", sans-serif;font-weight: 400;background:#fff;color: #141414;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:"Roboto", "NotoSansKR", sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:"Roboto", "NotoSansKR", sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer;border: none; background-color: transparent; }

.pg_current {color: #3EAAD8; border-bottom: 2px solid #3EAAD8;}

textarea, select {font-family:"Roboto", "NotoSansKR", sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none;-webkit-tap-highlight-color : transparent !important;}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
/* input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
} */
input[type="date"] { position: relative; }
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

input, textarea {
/* -webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out; */
outline:none;
}

input:focus, textarea:focus,select:focus {
-webkit-box-shadow:none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
outline: none;
}

.box-check { display: inline-block; } .box-check + .box-check { margin-left: 30px; } 
.box-check label { display: flex; align-items: center; position: relative; } 
.box-check label input[type=checkbox] { position: absolute; top: 0; left: 0; width: 0px; height: 0px; opacity: 0; } 
.box-check label em { display: block; position: relative; width: 20px; height: 20px; border: 1px solid #E0E0E0; border-radius: 2px; } 
.box-check label em:after { content: ""; position: absolute; top: 3px; left: 4px; width: 12px; height: 8px; border-left: 3px solid #E0E0E0; border-bottom: 3px solid #E0E0E0; border-radius: 1px; transform: rotate(-45deg); } 
.box-check label span { display: inline-block; margin-left: 8px; font-size: 14px;line-height: 21px;	color: #5F758C; } 
.box-check label input[type=checkbox]:checked + em { border-color: #0E2B5C; background-color: #0E2B5C } 
.box-check label input[type=checkbox]:checked + em:after { border-color: #fff; } 



select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
	background: url(/img/select.png) no-repeat 85% center; background-size: 12px;
	font-size: 15px;line-height: 22px;color: #0E2B5C;
	outline:  none; cursor: pointer;
}

:root {
	
	--box-shadow : 0px 0px 12px #C6E2FF;
}

.color_ong { color :#FF5C00; }
.color_blue { color : #3EAAD8;}

/*header*/
header { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 33px 0 28px; background-color: #fff; border-bottom: 1px solid #E3E7EB;; }
header {position:fixed; top:0; left:0; width:100%; z-index:999;}
header .logo img {max-width: 194px;}
header > nav {display: flex; align-items: center; justify-content:space-between; width:calc(100% - 280px);}
header > nav .nav a { position: relative; font-size: 15px; line-height: 22px; font-weight:400;}
header > nav .nav a.new::after {content: 'N'; position: absolute; top: -10px; right: -15px; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; line-height: 1px; background-color: #ff5c00; font-size: 11px; font-weight: 500; border-radius: 50%; color: #fff; }
header > nav .nav a + a {margin-left: 42px;}
header > nav .btns {margin-left: 53px; display: flex; align-items: center; justify-content: center; }

header > nav .btns a {/*display: inline-flex; align-items: center; justify-content: center;*/ height: 36px; width: 92px; font-weight: 500;font-size: 13px; border-radius: 5px; /*line-height: 19px;*/ /*border: 1px solid #0E2B5C;*/}
header > nav .btns a.login {color: #0E2B5C;background-color: #fff; }
header > nav .btns a.join {color: #fff; background-color: #0E2B5C; margin-left: 12px;}

header > nav .btns a.logout {width:36px; height:36px; background:url(/img/gnb-ico-logout.svg) center; margin-left: 12px; }
header > nav .btns a.cart {width:36px; height:36px; background:url(/img/gnb-ico-cart.svg) center; margin-left: 12px;}
header > nav .btns a.mypage {width:36px; height:36px; background:url(/img/gnb-ico-mypage.svg) center; margin-left: 12px;}
header > nav .btns a.shop {margin-left: 12px; margin-top:0px; display:flex; align-items:center; justify-content:center;
		border-radius: 5px; border: 1px solid #0E2B5C; color:#0E2B5C; font-size:14px; font-weight:500; line-height:0;
}


header > .mob_gnb {display:flex; align-items:center; jusity-content:flex-end;}
header > .mob_gnb a {height: 36px; width: 92px; font-weight: 500;font-size: 13px; border-radius: 5px; /*line-height: 19px;*/ /*border: 1px solid #0E2B5C;*/}
header > .mob_gnb a.login {color: #0E2B5C;background-color: #fff; }
header > .mob_gnb a.join {color: #fff; background-color: #0E2B5C; margin-left: 8px;}

header > .mob_gnb a.logout {width:36px; height:36px; background:url(/img/gnb-ico-logout.svg) center; margin-left: 0px; }
header > .mob_gnb a.cart {width:36px; height:36px; background:url(/img/gnb-ico-cart.svg) center; margin-left: 0px;}
header > .mob_gnb a.mypage {width:36px; height:36px; background:url(/img/gnb-ico-mypage.svg) center; margin-left: 0px;}
header > .mob_gnb a.shop {width:36px; margin-left: 5px; margin-top:0px; display:flex; align-items:center; justify-content:center;
		border-radius: 5px; border: 1px solid #0E2B5C; color:#0E2B5C; font-size:14px; font-weight:500; line-height:0;
}

header > .mob_gnb {display:none;}


header > .mob_gnb .ham { display: none; position: relative; width: 26px; height: 20px; cursor: pointer; margin-left:10px;}
header > .mob_gnb .ham span:nth-of-type(1) {position: absolute; top: 0; left: 50%; transform: translateX(-50%);  width: 26px; height: 2px; background-color: #0E2B5C;}
header > .mob_gnb .ham span:nth-of-type(2) {position: absolute; top: 50%; left: 50%;; transform: translate(-50%,-50%); width: 26px; height: 2px; background-color: #0E2B5C;}
header > .mob_gnb .ham span:nth-of-type(3) {position: absolute; bottom: 0; left: 50%;transform: translateX(-50%); width: 26px; height: 2px; background-color: #0E2B5C;}
header > .mob_gnb .ham.on {}
header > .mob_gnb .ham.on span:nth-of-type(1) {top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);}
header > .mob_gnb .ham.on span:nth-of-type(2) {display: none;}
header > .mob_gnb .ham.on span:nth-of-type(3) {bottom: 50%; left: 50%;transform:  translate(-50%, 50%) rotate(-45deg);}
header > nav .mo-show {display: none;}

.iq_con {position: fixed; top: 50%; right: 30px; transform: translateY(-50%); z-index: 2;}
.iq_con > a {display: block;}
.iq_con > a img {max-width: 76px;}

/*footer*/
footer {height: 180px; display: flex; justify-content:center; align-items: center;}
footer > .content {padding: 40px 15px ;}
footer > .content > .top {display: flex; align-items: center; justify-content: space-between;}
footer > .content > .top > a { display: inline-block; margin-bottom: 14px; font-weight: 500;font-size: 14px;line-height: 20px;color: #0E2B5C;}
footer > .content p {font-size: 13px;line-height: 160%;	color: #8895A3; word-break: keep-all;}
footer > .content > .top .box {}
footer > .content > .top .box a {display: inline-block; font-size: 14px;line-height: 20px;color: #5F758C;}
footer > .content > .top .box a + a {margin-left: 15px; }
 
#wrap { min-height: calc(100vh - 260px); padding-top: 130px; background-color: #F2F7FC;}
.content {width: 100%; max-width: 1160px; padding: 0px 20px 150px; margin: auto;}
.content02 {width: 100%; max-width: 750px; padding: 0px 20px 150px; margin: auto;}

.title {text-align: center; margin-bottom: 40px;}
.title > strong { display: block; margin-bottom: 11px; font-weight: 500;font-size: 32px;line-height: 46px;color: #0E2B5C;}
.title > p {font-weight: 400;font-size: 15px;line-height: 160%;color: #8895A3;word-break: keep-all;}

.submit a {display:flex; align-items: center; justify-content: center; margin: 40px auto 0; width: 230px;height: 52px;font-weight: 500;font-size: 16px;line-height: 23px;color: #FFFFFF;background: #0E2B5C;border-radius: 5px;}

.title-box {text-align: center;}
.title-box p {margin-bottom: 8px; font-family: 'Rajdhani', sans-serif;font-weight: 600; font-size: 18px; line-height: 23px; color: #8895A3;}
.title-box strong {font-family: 'Rajdhani', sans-serif;font-weight: 700; font-size: 48px; line-height: 71px; color: #0E2B5C; }

#index {}
#index > .visual { position: relative; width: 100%; padding-top: 70px; text-align: center; overflow: hidden; background: url(/img/main-bg.jpg) no-repeat bottom center; background-size: cover;} 
#index > .visual::before {position: absolute; content: ""; top: 0px; left: 0; width: 100%; height: 100%; background: url(/img/main_visual.png) no-repeat bottom center; background-size: cover;}
#index > .visual strong {font-family: 'Rajdhani', sans-serif;font-weight: 700; font-size: 70px; line-height: 160%; color: #FFFFFF;}
#index > .visual .btns {margin: 5px 0 80px;}
#index > .visual .btns a { display: inline-flex;font-size: 15px; line-height: 22px; color: #BAD7E9;}
#index > .visual .btns a + a {margin-left: 30px;}
#index > .visual img {max-width: 952px; width: 90%;} 

#index > .solution { padding: 68px 20px 115px; background-color: #fff;}
#index > .solution .sol-wrap {display: flex; align-items: center; justify-content: center; max-width: 1144px; margin: 60px auto 0;}
#index > .solution .sol-wrap > .imgbox {position: relative; display: flex; align-items: center; justify-content: center; text-align: center; width: 482px; height: 481px; border: 62px solid #207ACE; box-shadow: 20px 9px 1px #F2F2F2, inset 18px 12px 1px #f2f2f2 ; border-radius: 50%;}
#index > .solution .sol-wrap > .imgbox > div { display: none;}
#index > .solution .sol-wrap > .imgbox > div.on {display: block;}
#index > .solution .sol-wrap > .imgbox > div img {}
#index > .solution .sol-wrap > .imgbox > div p {font-family: 'Rajdhani', sans-serif;font-weight: 700; font-size: 42px;line-height: 54px; color: #3E8ED8;}

#index > .solution .sol-wrap .tab-box {margin-left: 72px; width: 100%; max-width: 344px;}
#index > .solution .sol-wrap .tab-box a {display: flex; align-items: center; padding: 26px 0; font-weight: 500; font-size: 18px; color: #C0C7CE; line-height: 27px; border-bottom: 1px solid #E3E7EB;}
#index > .solution .sol-wrap .tab-box a span {display: inline-flex; margin-right: 30px; font-weight: 700; font-size: 40px; line-height: 47px; color: #C0C7CE;}
#index > .solution .sol-wrap .tab-box a + a {}
#index > .solution .sol-wrap .tab-box a.on {color: #0E2B5C; }
#index > .solution .sol-wrap .tab-box a.on span { color: #207ACE;}

#index > .software {padding: 115px 0px 0;}
#index > .software .scroll {padding: 0px 20px 115px; overflow-x: auto;}
#index > .software .soft { display: flex; align-items: center; justify-content: space-between; max-width: 1144px; min-width: 1140px; margin: 60px auto 0;}
#index > .software .soft .left {  width: 555px; }
#index > .software .soft .left > p {padding-top: 17px; font-weight: 500; text-align: center;  font-size: 22px; line-height: 33px; color: #3E8ED8;}
#index > .software .soft .left .soft-wrap {display: flex; align-items: center; justify-content: space-between; height: 382px;border-bottom: 1px solid #3E8ED8;padding: 110px 36px 125px;}
#index > .software .soft .left .soft-wrap > div {position: relative; display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; background: #3E8ED8; text-align: center; border-radius: 50%;}
#index > .software .soft .left .soft-wrap > div::after {content: ""; position: absolute; top: -18px; left: -18px; width: 217px; height: 217px; background-color: #3E8ED840; border-radius: 50%;}
#index > .software .soft .left .soft-wrap > div::before {content: ""; position: absolute; top: -36px; left: -36px; width: 255px; height: 255px; background-color: #3E8ED810; border-radius: 50%;}
#index > .software .soft .left .soft-wrap > div img {}
#index > .software .soft .left .soft-wrap > div p {display: block; width: 100%; margin-top: 14px;font-weight: 500; font-size: 18px; line-height: 27px; color: #FFFFFF;}
#index > .software .soft .left .soft-wrap > div > div {z-index: 3;}
#index > .software .soft .left .soft-wrap > div span.arr {position: absolute; top: 50%; transform: translateY(-50%);  border: 2px dashed #3E8ED8; }
#index > .software .soft .left .soft-wrap > div span.arr::after {content: ""; position: absolute; top: 50%; right: 0px; transform: translateY(-50%) rotate(45deg); width: 70px; height: 70px; border-right: 1px solid #3E8ED8; border-top: 1px solid #3E8ED8; background: linear-gradient(225deg, #3E8ED8 -57.14%, rgba(62, 142, 216, 0) 54.73%); }
#index > .software .soft .left .soft-wrap > div span.arr::before {content: ""; position: absolute; bottom: 50%; transform: translateY(50%); left: -3px; width: 12px;height: 12px; border-radius: 50%; background: #3E8ED8; border: 2px solid #FFFFFF; }

#index > .software .soft .left .soft-wrap > div.box1 span.arr {width: 100px; right: -95px;}
#index > .software .soft .left .soft-wrap > div.box2 span.arr {width: 257px; right: -250px;}

#index > .software .soft .right {width: 367px;}
#index > .software .soft .right > p {padding-top: 17px; font-weight: 500; text-align: center;  font-size: 22px; line-height: 33px; color: #3E8ED8;}
#index > .software .soft .right .soft-wrap {display: flex; align-items: center; justify-content: space-between;border-bottom: 1px solid #3E8ED8;padding: 0 5px 36px;}
#index > .software .soft .right .soft-wrap .conbox {position: relative; width: 100%; height: 355px;}
#index > .software .soft .right .soft-wrap .conbox span {position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 183px; height: 183px; border-radius: 50%; font-weight: 500; font-size: 18px; line-height: 27px;  color: #3E8ED8;background: #FFFFFF60; border: 1px solid #3E8ED8;}
/*#index > .software .soft .right .soft-wrap .conbox span:nth-of-type(1) {top: 0; left: 0;}
#index > .software .soft .right .soft-wrap .conbox span:nth-of-type(2) {top: 0; right: 0;}*/

#index > .software .soft .right .soft-wrap .conbox span:nth-of-type(1) {top: 50%; left: 0; transform:translateY(-45%)}
#index > .software .soft .right .soft-wrap .conbox span:nth-of-type(2) {top: 50%; right: 0; transform:translateY(-45%)}

#index > .software .soft .right .soft-wrap .conbox span:nth-of-type(3) {bottom: 0; left: 0;}
#index > .software .soft .right .soft-wrap .conbox span:nth-of-type(4) {bottom: 0; right: 0;}
#index > .software .soft .right .soft-wrap .conbox span::after {content: ""; position: absolute; top: -6px; left: -6px; width: 193px; height: 193px; border: 5px solid #3E8ED880; border-radius: 50%;}

#index > .hardware {background-color: #fff; padding: 115px 20px 0;}
#index > .hardware .scroll {overflow-x: auto; padding-bottom: 115px;}
#index > .hardware .hard-wrap {position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 1144px; min-width: 1140px; margin: 60px auto 0;}

#index > .hardware .hard-wrap .left {}
#index > .hardware .hard-wrap div  {position: relative; text-align: center; }
#index > .hardware .hard-wrap .left > div:nth-of-type(1) {}
#index > .hardware .hard-wrap .left > div:nth-of-type(2) {margin-top: 66px;}
#index > .hardware .hard-wrap div p { position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); width: 100%; font-size: 18px; line-height: 27px; color: #FFFFFF;}

#index > .hardware .hard-wrap div.posi {position: absolute; z-index: 0;}
#index > .hardware .hard-wrap div.posi p {position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 8px 4px; background: #3E8ED840; border-radius: 35px;}
#index > .hardware .hard-wrap div.posi p span {display: inline-flex; align-items: center; justify-content: center; min-width: 120px; padding: 12px 20px; white-space: nowrap; font-weight: 500; font-size: 16px; line-height: 24px; color: #FFFFFF;background: #3E8ED8; border-radius: 30px;}

#index > .hardware .hard-wrap div.posi::after {content: ""; position: absolute;background: #3E8ED8; border: 1px solid #FFFFFF;width: 10px; height: 10px; border-radius: 50%; }

#index > .hardware .hard-wrap div.posi.po_01::after { top: -6px; left: 0px;}
#index > .hardware .hard-wrap div.posi.po_02::after { bottom: -6px; left: 3px;background: #0E2B5C;}
#index > .hardware .hard-wrap div.posi.po_03::after { top: -6px; left: -2px;}

#index > .hardware .hard-wrap div.posi.po_01 {width: 254px; top: 17%; height: 64px; left: 22.2%; border-top: 2px solid #3E8ED8; border-right: 2px solid #3E8ED8; border-radius: 0  20px 0 0;}
#index > .hardware .hard-wrap div.posi.po_02 { width: 254px; bottom: 17%; height: 67px; left: 22%; border-bottom: 2px solid #0E2B5C; border-right: 2px solid #0E2B5C; border-radius: 0 0 20px;}
#index > .hardware .hard-wrap div.posi.po_03 { width: 185px; top: 49%; right: 22.6%; border-top: 2px solid #3E8ED8;}

#index > .hardware .hard-wrap div.posi.po_01 p {top: -33px; width: 150px;}
#index > .hardware .hard-wrap div.posi.po_02 p {width: 150px;}
#index > .hardware .hard-wrap div.posi.po_03 p {top: -42px; width: 140px;}

#index > .contact {padding: 115px 20px;}
#index > .contact .us-wrap {max-width: 1104px; display: flex; margin: 32px auto 0; background-color: #fff; padding: 20px;}
#index > .contact .us-wrap > div { width: 50%; text-align: center; }
#index > .contact .us-wrap > div + div {border-left: 1px solid #E3E7EB;}
#index > .contact .us-wrap > div p {margin-bottom: 13px; font-weight: 500; font-size: 18px; line-height: 27px; color: #0E2B5C;}
#index > .contact .us-wrap > div a {font-weight: 600; font-size: 32px; line-height: 41px; color: #3E8ED8;font-family: 'Rajdhani', sans-serif;}


@media (max-width:900px) {
    #index > .solution .sol-wrap {flex-wrap: wrap;}
    #index > .solution .sol-wrap .tab-box {margin: 15px 0 0; width: 100%; max-width: 400px;}

    .iq_con {position: fixed; top: auto; bottom: 20%; right: 20px; transform: translateY(0%);}
}
@media (max-width:700px) {
    #index > .contact .us-wrap {flex-wrap: wrap;padding: 0 20px;}
    #index > .contact .us-wrap > div { width: 100%; padding: 20px 0; }
    #index > .contact .us-wrap > div + div {border-left: none; border-top: 1px solid #E3E7EB;}
    #index > .contact .us-wrap > div p {margin-bottom: 0px; font-size: 16px; }
    #index > .contact .us-wrap > div a {font-size: 24px; }
}
@media (max-width: 600px) {
    #index > .visual {height: 650px;}
    #index > .visual strong {font-size: 58px;}
    #index > .visual .btns {}
    #index > .visual .btns a {width: 60%;}
    #index > .visual .btns a + a {margin: 10px 0 0;}

    .title-box p {font-size: 16px;}
    .title-box strong {font-size: 28px;}
    #index > .solution .sol-wrap > .imgbox {width: 300px; height: 300px;border: 46px solid #207ACE;}
    #index > .solution .sol-wrap > .imgbox > div p {font-size: 24px;}
    #index > .solution .sol-wrap > .imgbox > div img {width: 60%;}

    .iq_con > a img {max-width: 60px;}
}




.progress { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .15); z-index: 889;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.progress__ring {
    margin-bottom: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    border-top-color: #4463B3;
    box-sizing: border-box;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  





/*main*/
#main {padding-top: 60px;}
#main > .top { display: flex; align-items: center; justify-content: space-between; padding: 28px 38px; background-color: #fff; border-radius: 10px;}
#main > .top > .info-con {}
#main > .top > .info-con > div {}
#main > .top > .info-con > div strong {display: inline-block; margin-right: 17px;font-weight: 700;font-size: 20px;line-height: 23px;color: #0E2B5C;}
#main > .top > .info-con > div span {display: inline-block; padding: 5px 10px; background: #F2F7FC; border-radius: 5px; font-size: 13px;line-height: 19px;color: #0E2B5C;}
#main > .top > .info-con > div p { display: inline-block; margin-top: 28px; font-size: 15px;line-height: 18px;color: #5F758C;}
#main > .top > .info-con > div p small {display: inline-block; margin-right: 5px;font-weight: 700;}
#main > .top > .info-con > div p + p {margin-left: 30px;}
#main > .top > .btns {display: block; width: 111px;}
#main > .top > .btns a { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; font-weight: 400;font-size: 13px;line-height: 19px;border-radius: 5px; border: 1px solid #3EAAD8;}
#main > .top > .btns a.info-cg {color: #FFFFFF;background: #3EAAD8;}
#main > .top > .btns a.pay {color: #3EAAD8;background-color: #fff;}
#main > .top > .btns a + a {margin-top: 12px;}

#main > .con-wrap {margin-top: 25px; width: 100%;}
#main > .con-wrap > p {font-weight: 400;font-size: 15px;line-height: 22px;}
#main > .con-wrap > p.license_num {font-weight:600; color:#141414; }
#main > .con-wrap > p span {color: #8895A3;}
#main > .con-wrap > .conBox {margin-top: 16px;}
#main > .con-wrap > .conBox.nonService { padding: 48px 15px; text-align: center; background: #FFFFFF;box-shadow:var(--box-shadow);border-radius: 10px;}
#main > .con-wrap > .conBox.nonService > strong {font-weight: 500;font-size: 18px;line-height: 26px;}
#main > .con-wrap > .conBox.nonService > p { display: block; margin: 21px auto 27px; font-size: 15px; word-break: keep-all; line-height: 160%;color: #8895A3;}
#main > .con-wrap > .conBox.nonService > a {padding: 10px 20px;font-weight: 500;font-size: 16px;line-height: 23px;color: #FFFFFF;background: #0E2B5C;border-radius: 5px;}

#main > .con-wrap > .conBox.listService {}
#main > .con-wrap > .conBox.listService .row { display: flex; align-items: center; min-height: 104px; padding: 10px 62px; background: #FFFFFF;box-shadow:var(--box-shadow);border-radius: 10px;}
#main > .con-wrap > .conBox.listService .row + .row {margin-top: 20px;}
#main > .con-wrap > .conBox.listService .row .col {}
#main > .con-wrap > .conBox.listService .row .col.had {display: flex; align-items: center;justify-content: space-between; width: 35%; min-width: 330px; font-weight: 400;font-size: 15px;line-height: 18px;color: #0E2B5C;}
#main > .con-wrap > .conBox.listService .row .col.had span {}
#main > .con-wrap > .conBox.listService .row .col.had > div {}
#main > .con-wrap > .conBox.listService .row .col.had > div > strong {display: block;margin-bottom: 6px; font-family: 'Roboto';font-weight: 500; font-size: 15px; line-height: 18px;color: #0E2B5C;}
#main > .con-wrap > .conBox.listService .row .col.had > div p {font-family: 'Roboto'; font-weight: 400; font-size: 15px; line-height: 18px; color: #5F758C;}
#main > .con-wrap > .conBox.listService .row .col.had > div p + p {margin-top: 6px;}
#main > .con-wrap > .conBox.listService .row .col.had small { display: inline-block; margin-left: 22px; font-size: 13px;line-height: 19px;color: #0E2B5C;background: #F2F7FC;border-radius: 5px;padding: 5px 10px;}
#main > .con-wrap > .conBox.listService .row .col.info { padding-left: 40px; flex-grow: 1;font-weight: 400;font-size: 15px;line-height: 18px;color: #8895A3;}
#main > .con-wrap > .conBox.listService .row .col.info span {}
#main > .con-wrap > .conBox.listService .row .col.info small { display: inline-block; margin-left: 11px; font-size: 13px;line-height: 19px;}
#main > .con-wrap > .conBox.listService .row .col.btn {}
#main > .con-wrap > .conBox.listService .row .col.btn a { display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 36px; font-size: 13px;line-height: 19px;border: 1px solid #0E2B5C;border-radius: 5px;color: #0E2B5C;}
#main > .con-wrap > .conBox.listService .row .col.btn a + a {margin-left: 14px;}
/*라이선스 구매*/
#payment {}
#payment .inner {padding: 25px 70px; background-color: #fff; box-shadow: var(--box-shadow); border-radius: 10px;}
#payment .inner > ul {}
#payment .inner > ul li {display: flex; justify-content: center; align-items: center; padding: 25px 0;}
#payment .inner > ul li + li {border-top: 1px solid #E3E7EB;}
#payment .inner > ul li > p { flex-grow: 1; font-weight: 500;font-size: 15px;line-height: 22px;color: #0E2B5C;}
#payment .inner > ul li > p > span { display: inline-block; margin-left: 13px; font-weight: 300;font-size: 13px;line-height: 19px;letter-spacing: -0.04em;color: #8895A3;}
#payment .inner > ul li > span {font-weight: 500; font-size: 15px;line-height: 22px;color: #8895A3;}

#payment .detail { display:none; margin-top: 20px; padding: 25px 70px 10px 70px; background-color: #fff; box-shadow: var(--box-shadow); border-radius: 10px;}
#payment .detail > ul li {display: flex; justify-content: center; align-items: center; padding: 25px 0;}
#payment .detail > ul li > div {width:100%; justify-content: center; align-items: center; padding: 9px 0;}
#payment .detail > ul li + li { display:block; border-top: 1px solid #E3E7EB;}
#payment .detail > ul li > p { display:flex; flex-grow: 1; font-weight: 500; font-size: 15px;line-height: 22px;color: #0E2B5C;}
#payment .detail > ul li > div > p { display:flex; flex-grow: 1; font-weight: 500; font-size: 15px;line-height: 22px;color: #0E2B5C;}
#payment .detail > ul li > div > p > span { flex-grow:1; display: inline-block; margin-left: 13px; font-weight: 400;font-size: 15px;line-height: 19px;letter-spacing: -0.04em;color: #8895A3;}
#payment .detail > ul li + li > div > p { font-weight:700;}
#payment .detail > ul li > span {font-weight: 500;font-size: 15px;line-height: 22px;color: #8895A3;}

#payment .total { margin-top: 20px; padding: 35px 70px; background: #FFFFFF;border: 2px solid #0E2B5C;box-shadow: 0px 0px 12px #C6E2FF;border-radius: 10px;}
#payment .total > div {display:flex; align-items: center; justify-content: space-between;font-weight: 700;font-size: 15px;line-height: 22px;color: #0E2B5C;}
#payment .total > div.light-txt { margin-bottom: 16px; font-weight: 400;}
#payment .total > p {}
#payment .total > span {}
#payment .total > div em { font-style: normal; }

#payment .inner > ul li.padTop {align-items: baseline;}
#payment .inner > ul li.padTop > p {padding-top: 15px;} 
#payment .inner > ul li > .btn-box {text-align: right;}
#payment .inner > ul li > .btn-box button {display:inline-flex; align-items: center; justify-content: center;width: 200px;height: 48px;font-weight: 500;font-size: 14px;line-height: 20px;color: #8895A3;background: #FFFFFF;border: 1px solid #E3E7EB;border-radius: 5px;}
#payment .inner > ul li > .btn-box button.on {background: #3EAAD8; border-color: #3EAAD8; color: #fff;}
#payment .inner > ul li > .btn-box button + button {margin-left: 10px;}
#payment .inner > ul li > .btn-box p {margin-top: 16px; font-weight: 300;font-size: 13px;line-height: 19px;letter-spacing: -0.04em; word-break: keep-all; color: #8895A3;}
#payment .inner > ul li > .select-box {}
#payment .inner > ul li > .select-box select {width: 105px; height: 40px; padding-left: 22px; border: 1px solid #D7DCE1;border-radius: 5px;}
#payment .inner > ul li > .select-box select[name='select_sw'] {width:158px;}

#payment .inner > ul li.dn { justify-content: space-between; }
#payment .inner > ul li.dn p { flex: none; }

#payment .agr-wrap { margin-top: 20px; padding: 50px 70px; background-color: #fff; box-shadow: var(--box-shadow); border-radius: 10px; }
#payment .agr-wrap .top { border-top: 1px solid  #0E2B5C; padding: 19px 0;}
#payment .agr-wrap .top .box-check span {color: #0E2B5C;font-weight: 500;}
#payment .agr-wrap .inner { padding: 19px 0; border-top: 1px solid #E3E7EB; border-bottom: 1px solid #E3E7EB; border-radius: 0; box-shadow: none;}
#payment .agr-wrap .inner .list {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
#payment .agr-wrap .inner .list a {font-size: 13px;line-height: 19px;color: #8895A3;}
#payment .agr-wrap .inner .list + .list {margin-top: 19px;}

#payment > .payBack {text-align: center;}
#payment > .payBack a { display: block;  padding: 50px 0 24px; margin-bottom: 25px; font-weight: 500;font-size: 14px;line-height: 20px;	border-bottom: 1px solid #E3E7EB;color: #0E2B5C;}
#payment > .payBack p {font-size: 14px;line-height: 20px;color: #5F758C; word-break: keep-all;}

.tab02 {display: none;}

.pay-way .btn-box .box-row { display: flex; }
#payment .box-radio + .box-radio { margin-left: 12px; }
#payment .box-radio label { position: relative; }
#payment .box-radio label input[type=radio] { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; }
#payment .box-radio label input[type=radio] + span { display: flex; align-items: center; justify-content: center; width: 200px; height: 48px; font-weight: 500; font-size: 14px; line-height: 20px; color: #8895A3; background: #FFFFFF; border: 1px solid #E3E7EB; border-radius: 5px; }
#payment .box-radio label input[type=radio]:checked + span { background: #3EAAD8; border-color: #3EAAD8; color: #fff; }



/*개인정보처리*/
#ctt {padding: 0 20px 200px;}
#ctt header {display: flex; align-items: center; justify-content: center; height: auto; padding: 0; background-color: transparent; border-bottom: none;}
#ctt header h1 {margin-bottom: 11px; font-weight: 600;font-size: 32px;line-height: 46px;color: #0E2B5C;}
#ctt #ctt_con { overflow-y: auto; margin: 39px auto 0; width: 100%; max-width: 1160px; padding: 45px; height: 700px; background: #FFFFFF; box-shadow: 0px 0px 12px #C6E2FF; border-radius: 10px;  }
#ctt #ctt_con p {font-family: "Roboto","NotoSansKR", sans-serif !important;font-weight: 400;text-align: left; font-size: 15px; line-height: 160%; color: #5F758C !important;}


/*결제내역*/
#main #history {}
#main #history .top {margin-top: 40px; display: flex; align-items: center; justify-content: space-between;}
#main #history .top strong {font-weight: 700;font-size: 24px;line-height: 36px;color: #0E2B5C;}
#main #history .top .date-box {}
#main #history .top .date-box input[type="date" ] {display: inline-flex;padding:0 14px ; width: 153px;height: 40px;background: #fff url(/img/CalendarBlank.png) no-repeat 95% center; border: 1px solid #D7DCE1;background-size: 24px; border-radius: 5px;font-weight: 400;font-size: 14px;line-height: 16px;color: #5F758C;}
#main #history .top .date-box input[type="date"] + input[type="date"] {position: relative;margin-left: 16px; overflow: inherit; }
#main #history .top .date-box input[type="date"] + input[type="date"]::after {content: ""; position: absolute;top: 50%; transform: translateY(-50%); left: -13px; width: 6px; height: 1px; background: #0E2B5C;}
#main #history .top .date-box input[type='submit'] {display: inline-flex;padding:0 14px ; width: 56px;height: 40px;font-weight: 500;font-size: 13px;background: #FFFFFF;border: 1px solid #3EAAD8;border-radius: 5px;line-height: 19px;color: #3EAAD8;}

#main #history .ul-wrap { margin-top: 40px;}
#main #history .ul-wrap ul {min-width: 900px;}
#main #history .ul-wrap ul li {display: flex; align-items: center; justify-content: space-between; padding: 20px 0;}
#main #history .ul-wrap ul li p {text-align: center;}
#main #history .ul-wrap ul li.list {display: flex; align-items: center; justify-content: space-between; padding: 20px 0;background: #FFFFFF;box-shadow: 0px 0px 12px #C6E2FF;border-radius: 10px;}
#main #history .ul-wrap ul li.list.empty { justify-content: center; }
#main #history .ul-wrap ul li.list p {font-weight: 400;font-size: 15px;line-height: 18px;}
#main #history .ul-wrap ul li.list p.non {color: #FF5C00;}
#main #history .ul-wrap ul li.list + .list {margin-top: 20px;}
#main #history .ul-wrap ul li.had {}
#main #history .ul-wrap ul li.had p {font-weight: 500;font-size: 15px;line-height: 22px;color: #0E2B5C;}


#main #history .ul-wrap ul li .info-1 {width: 15%;color: #0E2B5C;}
#main #history .ul-wrap ul li .info-2 {width: 15%;color: #5F758C;}
#main #history .ul-wrap ul li .info-3 {width: 10%;color: #5F758C;}
#main #history .ul-wrap ul li .info-4 {width: 10%;color: #5F758C;}
#main #history .ul-wrap ul li .info-5 {width: 10%;color: #5F758C;}
#main #history .ul-wrap ul li .info-6 {width: 10%;color: #3EAAD8;}
#main #history .ul-wrap ul li .info-7 {width: 15%;}
#main #history .ul-wrap ul li .info-8 {width: 15%;color: #5F758C;}

#main #history .ul-wrap ul li .info-7 a {display: flex; align-items: center; justify-content: center; margin: auto; width: 100px; height: 36px;font-size: 13px;line-height: 19px; border: 1px solid #0E2B5C;border-radius: 5px;color: #0E2B5C;}


.page-wrap {display: flex; align-items: center; justify-content: center; margin-top: 55px;}
.page-wrap a.num {font-weight: 400;font-size: 16px;line-height: 19px;letter-spacing: 0.03em;margin: 0 17px;color: #8895A3;}
.page-wrap a.num.on {color: #3EAAD8; border-bottom: 2px solid #3EAAD8;}
.page-wrap a.btn {}
.page-wrap a.btn img {height: 38px;}
.page-wrap a.btn + .num {margin-left: 35px;}
.page-wrap a.num + .btn {margin-left: 25px;}


/**/
.popup.on {opacity: 1; pointer-events: auto;}
.popup {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #00000060; z-index: 9999999; opacity: 0; pointer-events: none; }
.popup .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);background: #FFFFFF; width: 95%; max-width: 550px; padding: 30px 15px 40px; border-radius: 10px; text-align: center; }
.popup .inner > p {display: block; margin-bottom: 30px; font-weight: 600; font-size: 24px; line-height: 36px; color: #0E2B5C;} 
.popup .inner > span {font-weight: 400; font-size: 15px; line-height: 160%;  color: #5F758C;word-break: keep-all; } 
.popup .inner > span small {color: #3EAAD8;font-weight: 400; font-size: 15px;} 
.popup .inner > .btns {display: flex;justify-content: center; margin-top: 40px;}
.popup .inner > .btns a {display: flex; align-items: center; justify-content: center; width: 130px;height: 52px;font-weight: 500; font-size: 16px; line-height: 24px;border: 1px solid #0E2B5C; border-radius: 5px; }
.popup .inner > .btns a.close {color: #0E2B5C;background: #FFFFFF;}
.popup .inner > .btns a.done {margin-left: 20px; color: #FFFFFF;background: #0E2B5C;}

.popup .inner .close-btn {position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px;background: #FFFFFF20;border-radius: 10px;}
.popup .inner .close-btn span:nth-of-type(1) {position: absolute; width: 17px; height: 2px; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.popup .inner .close-btn span:nth-of-type(2) {position: absolute; width: 17px; height: 2px; background-color: #fff; bottom: 50%; left: 50%;transform:  translate(-50%, 50%) rotate(-45deg);}

.popup.regi2 .inner {max-width: 550px; padding:30px; height: auto;}
.popup.regi2 .inner > div {height: 100%; text-align: left;}
.popup.regi2 .inner > div .top {display: flex; align-items: center; justify-content: left; padding: 14px 10px; border-top: 1px solid #E3E7EB; border-bottom: 1px solid #E3E7EB;}
.popup.regi2 .inner > div .top span {font-weight: 500; font-size: 15px; line-height: 22px; color: #0E2B5C; }
.popup.regi2 .inner > div .top p { display: inline-block; flex-grow: 1; margin-left: 30px; font-size: 15px; line-height: 160%; color: #5F758C;}
.popup.regi2 .inner > div .top button,
.popup.regi2 .inner > div .top a  { display: inline-flex; justify-content: center; align-items: center; padding: 8.5px 21.5px; font-size: 13px; line-height: 19px; color: #0E2B5C;border: 1px solid #0E2B5C; border-radius: 5px;}
.popup.regi2 .inner > div > p { display: block; margin: 18px 0 23px; font-size: 13px; line-height: 19px; color: #8895A3;}
.popup.regi2 .inner > div > span { display: block; margin: 20px;font-weight: 400;text-align: center;  font-size: 13px; line-height: 19px; color: #5F758C;}
.popup.regi2 .inner > div > .box {display: flex; align-items: center; justify-content: space-between; padding: 0 30px; height: 56px; background: #F2F7FC; border-radius: 10px;}
.popup.regi2 .inner > div > .box p {font-size: 15px; line-height: 18px; color: #0E2B5C;}
.popup.regi2 .inner > div > .box span {font-size: 13px; line-height: 19px;  color: #3EAAD8;}

.popup.regi  .inner {max-width: 550px; padding:  30px; height: 443px;}
.popup.regi  .inner div {height: 85%; padding:20px; border: 1px solid #E3E7EB; border-radius: 5px; overflow-y: auto; text-align: left; font-size: 14px; line-height: 160%;color: #5F758C;}
.popup.regi  .inner div p { display: block; color: #0E2B5C; font-weight: 500;}
.popup.regi  .inner div span {margin-left: 71px;}

.popup.regi  .inner div::-webkit-scrollbar { width: 6px;}
.popup.regi  .inner div::-webkit-scrollbar-thumb { background-color:#8895A3; border-radius: 10px; }
.popup.regi  .inner div::-webkit-scrollbar-track { background-color: transparent;}

.popup.regi3 .inner {padding: 30px 30px 40px;}
.popup.regi3 .inner > ul {padding: 7px 0; border-top: 1px solid #E3E7EB; border-bottom: 1px solid #E3E7EB;}
.popup.regi3 .inner > ul li {padding: 0 16px; display: flex; align-items: center; justify-content: space-between; width: 100%;}
.popup.regi3 .inner > ul li > p { font-weight: 500; font-size: 15px; line-height: 250%; color: #0E2B5C;}
.popup.regi3 .inner > ul li > span {font-size: 15px; line-height: 250%; color: #5F758C;}
.popup.regi3 .inner > div {margin-top: 21px; padding: 0 13px;}
.popup.regi3 .inner > div .txtBox {font-weight: 400; font-size: 13px; line-height: 19px; color: #8895A3;text-align: left; }
.popup.regi3 .inner > div .txtBox span {color: #3EAAD8;}
.popup.regi3 .inner > div .btnBox {margin-top: 40px; text-align: center;}
.popup.regi3 .inner > div .btnBox a {display: inline-flex;align-items: center;justify-content: center; width: 130px; height: 52px;border: 1px solid #0E2B5C; border-radius: 5px;font-weight: 500; font-size: 16px; line-height: 24px;}
.popup.regi3 .inner > div .btnBox a:nth-of-type(1) {background-color: #fff;color: #0E2B5C;}
.popup.regi3 .inner > div .btnBox a:nth-of-type(2) {margin-left: 20px; background-color: #0E2B5C; color: #fff;}

#report_quick {width:100%; margin-top:50px; }
#report_quick h2 a {font-size:24px; font-weight:600; color:#0E2B5C;  }
#report_quick ul.report_quick_list {margin-top:25px;}

#report_quick ul.report_quick_list li { min-height:76px; background:#fff; border-radius:10px; filter: drop-shadow(0px 0px 12px #C6E2FF); margin-bottom:20px; padding:27px 45px;}
#report_quick ul.report_quick_list li a {display:flex; align-items:center;}
#report_quick ul.report_quick_list li .ti {width:55%; font-size:15px; color:#5F758C; font-weight:400;}
#report_quick ul.report_quick_list li .model {width:15%; text-align:center; font-size:15px; color:#5F758C; font-weight:400;}
#report_quick ul.report_quick_list li .vin { width:15%; text-align:center; font-size:15px; color:#0E2B5C; font-weight:500;}
#report_quick ul.report_quick_list li .date {width:15%; min-width: fit-content; text-align:center; font-size:15px; color:#5F758C; font-weight:400;}




@media (max-width:1200px) {
    header {padding: 0 20px;}
    header .logo img {max-width: 160px;}
    header > nav .nav a {font-size: 14px;}
    header > nav .nav a + a {margin-left: 20px;}
    header > nav .btns {margin-left: 20px;}
    header > nav .btns a.join {margin-left: 5px;}
}

@media (max-width:1100px) {
    #main > .con-wrap > .conBox.listService .row .col.btn {max-width: 112px;}
    #main > .con-wrap > .conBox.listService .row .col.btn a + a {margin: 10px 0 0;}
}
@media (max-width:1000px) {

	#main > .con-wrap > .conBox.listService .row {padding: 20px 30px;}
	#main > .con-wrap > .conBox.listService .row .col.info {padding-left: 45px;}
}

@media (max-width:900px) {

	#wrap { min-height: calc(100vh - 235px);}
    header {height: 55px; padding: 0 16px 0 10px;}
    header .logo img {max-width: 162px;}
    header > .ham {display: block;}
    header nav {display: none;}
    header nav.on { display: flex; position: fixed; flex-wrap: inherit; align-items: baseline;flex-direction: column; padding: 27px 20px 30px; top: 55px; left: 0; width: 100%; height: calc(100vh - 55px); overflow-y: auto; background-color: #fff; z-index: 99999;  }
    header nav .btns {order: 1; width: 100%; display: flex; margin-left: 0;}
    header > nav .btns a {width: 50%;height: 44px;}
    header nav .nav {margin-top: 19px; order: 2;width: 100%; flex-grow: 1; min-height: 300px; }
    header nav .nav a { display: flex; align-items: center; justify-content: center; width: 100%; height: 68px; border-bottom: 1px solid #EBEBEB;font-weight: 500; font-size: 18px; line-height: 69px; letter-spacing: -0.05em;  color: #0E2B5C;}
    header nav .nav a + a {margin-left: 0;}
    header > nav .nav a.new::after {display: none;}
    header > nav .mo-show {order: 3; display: block; width: 100%; text-align: center;}
    header > nav .mo-show a {position: relative; display: inline-block;font-weight: 500;font-size: 13px; line-height: 19px;  color: #5F758C;}
    header > nav .mo-show a:nth-of-type(2) {padding-left: 12px; margin-left: 12px;}
    header > nav .mo-show a:nth-of-type(2)::after { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 11px; background-color: #5F758C;}

	#main > .con-wrap > .conBox.listService .row .col.info small {display: block; margin: 8px 0;}
	#main > .con-wrap > .conBox.listService .row .col.had small {display: block; width: 70px; margin: 5px 0 0; }
	#main > .con-wrap > .conBox.listService .row .col.info {padding-left: 25px;}

	#main #history .ul-wrap {overflow-x: auto;}
}

@media (max-width:800px) {
    #main > .con-wrap > .conBox.listService .row { padding: 20px; flex-wrap: wrap;justify-content: end;}
    #main > .con-wrap > .conBox.listService .row .col.had {width: 100%;}
    #main > .con-wrap > .conBox.listService .row .col.info {width: 100%; padding-left: 0;}
    #main > .con-wrap > .conBox.listService .row .col.info small {display: inline-block;}
    #main > .con-wrap > .conBox.listService .row .col.btn {max-width: 100%;}
}
@media (max-width:700px) {
	.content {padding: 40px 15px 100px;}

	#main > .top {flex-wrap: wrap; padding: 25px 20px;}
	#main > .top > .btns { width: 100%; margin-top: 15px;}
	#main > .top > .info-con > div p {margin-top: 18px;}

	#payment .inner {padding: 15px 30px;}
	#payment .inner > ul li {flex-wrap: wrap;}
	#payment .inner > ul li.pay-way p {width: 100%; text-align: left;}
	#payment .inner > ul li.padTop > p {padding-top: 0;}
	#payment .inner > ul li > p > span {display: block; margin:5px 0;}
	#payment .inner > ul li > .btn-box {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 10px;}
	#payment .inner > ul li > .btn-box button {width: 49%;}
	#payment .inner > ul li > .btn-box button + button {margin-left: 1%;}
	
	#payment .total {padding: 25px 30px;}

	#payment .agr-wrap {padding: 25px;}

    #main #history .top {flex-wrap: wrap;}
	#main #history .top .date-box {width: 100%; text-align: right;margin-top: 10px;}
	#main #history .top .date-box input[type="date" ] { width: 100%; max-width: calc(100% / 2 - 42px);}

	.pay-way .btn-box .box-row {width:100%; justify-content:space-between; gap:10px;}
	.pay-way .btn-box .box-row .box-radio {width:100%;}
	#payment .box-radio label input[type=radio] + span {width:100%; }

}




@media (max-width:500px) {

	#main > .top {flex-wrap: wrap; padding: 25px 20px;}
	#main > .top > .btns { width: 100%; margin-top: 15px;}
	#main > .top > .info-con > div p {margin-top: 18px;}


	#main > .con-wrap > .conBox.listService .row {padding: 30px 20px;}
	#main > .con-wrap > .conBox.listService .row .col {width: 100%;}
	#main > .con-wrap > .conBox.listService .row .col + .col {margin-top: 12px;}
	#main > .con-wrap > .conBox.listService .row .col.info {padding-left: 0;}
	#main > .con-wrap > .conBox.listService .row .col.info small {display: inline-block; margin: 5px 0 0;}
    #main > .con-wrap > .conBox.listService .row .col.had {flex-wrap: wrap; min-width: 100%;}
	#main > .con-wrap > .conBox.listService .row .col.had small {display: inline-block;}
	#main > .con-wrap > .conBox.listService .row .col.btn {margin-top: 15px;}
	#main > .con-wrap > .conBox.listService .row .col.btn a {width: 100%;}

	#payment .inner {padding: 15px 20px;}
	#payment .inner > ul li {justify-content: end;}
	#payment .inner > ul li > .btn-box button {width: 100%;}
	#payment .inner > ul li > .btn-box button + button {margin: 10px 0 0;}
	
	#payment .total {padding: 25px 20px;}
	#payment .total > div {flex-wrap: wrap; justify-content: end;}
	#payment .total > div p {flex-grow: 1;}
	
	footer > .content > .top {flex-wrap: wrap; }
	footer > .content > .top .box {width: 100%;}
    footer > .content > .top > a,
    footer > .content > .top .box a {margin-bottom: 8px;}

    #popuup.regi2 .inner { padding:30px 20px;}
    #popuup.regi2 .inner > div .top { padding: 14px 0px; flex-wrap: wrap;}
    #popuup.regi2 .inner > div .top p { margin-left: 20px; }
    #popuup.regi2 .inner > div .top button { margin-top: 10px; padding: 10px; width: 100%;}
    #popuup.regi2 .inner > div > p { margin: 18px 0 23px;}
    #popuup.regi2 .inner > div > span { margin: 15px;}
    #popuup.regi2 .inner > div > .box {padding: 15px 20px; flex-wrap: wrap; height: auto;  }
    #popuup.regi2 .inner > div > .box span { margin-top: 5px; width: 100%; text-align: right;}

    #popuup.regi3 .inner {padding: 30px 20px;}
    #popuup.regi3 .inner > ul li {flex-wrap: wrap; padding: 0;}
    #popuup.regi3 .inner > div {padding: 0;}
    #popuup.regi3 .inner > div .btnBox a {width: 100%;}
    #popuup.regi3 .inner > div .btnBox a:nth-of-type(2) {margin: 15px 0 0px;}
    
    #report_quick ul.report_quick_list li {padding: 20px 25px;}
    #report_quick ul.report_quick_list li a {flex-wrap: wrap; justify-content: flex-end;}
    #report_quick ul.report_quick_list li .ti {width: 100%; margin-bottom: 8px;}
    #report_quick ul.report_quick_list li .model {width: fit-content;}
    #report_quick ul.report_quick_list li .vin {width: fit-content; margin-left: 10px;}
    #report_quick ul.report_quick_list li .date {width: fit-content; margin-left: 10px;}
	
}
@media (max-width:400px) {
	#main > .top > .info-con > div span {margin: 10px 0 0;}
	#main > .top > .info-con > div p {margin-right: 10px;}
	#main > .top > .info-con > div p + p {margin: 10px 0 0;}

	#payment .agr-wrap .inner .list a {width: 100%; text-align: right; margin-top: 8px;}
	#payment .agr-wrap .inner .list + .list {margin-top: 9px;}

	#main > .con-wrap > .conBox.nonService > p br,
	.title > p br {display: none;}

	#main #history .top .date-box input[type="date" ] {width: 100%; max-width: calc(100% / 2 - 10px);}
	#main #history .top .date-box input[type='submit'] { display: flex; width: 100%; margin-top: 5px; justify-content: center;}
}