@CHARSET "UTF-8";

/* HTML(Common) Elements
---------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline:0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	background:transparent;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
input,
select,
button,
textarea {
    color: #4d4c4c; font-size:13px;
}

textarea {
    width: 100%;
    vertical-align: middle;
}

button {
    border: none;
    cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
table th, table td {box-sizing: border-box; }
a {
    margin:0;
    padding:0;
    font-size:100%;
	color:inherit;
	text-decoration:none;
    vertical-align:baseline;
    background:transparent;
	outline:none
}
input, select, label {
    vertical-align:middle;
}
*:focus { outline: none; }
legend, caption { height:0 !important; width:0 !important; overflow:hidden !important; position:absolute !important; }
em, i { font-style: normal; }
label {margin: 0;}

::-webkit-file-upload-button {cursor: pointer;}
::placeholder { color: #b1b1b1;}
/* container --------------------------------------------------------*/
.wrapper{width: 100%; height: 100%;}
.header-btn {display: flex; justify-content: space-between; align-content: center; padding:30px; }
.back-btn {display: flex; justify-content: flex-start; align-content: center; box-sizing: border-box;}
.close-btn {display: flex; justify-content: flex-end; align-content: center; box-sizing: border-box;}

.asservice { margin:50px auto 100px; max-width:800px; display: flex; flex-direction: column; align-items: center; background: #ffffff;}
.asservice .asservice-img {}
.asservice .asservice-img img {display: block; object-fit: cover; width: 100%; height: auto; pointer-events: auto; }
.asservice .asservice-btn {width:100%; display: flex !important; justify-content:space-between!important; box-sizing: border-box; --bs-gutter-x: 1.5rem;}
.asservice .asservice-btn a {display: inline-block; padding: 30px 40px; text-align: center; text-decoration: none; background: #132e43; border:1px solid #6c8194; box-sizing: border-box;}
.asservice .asservice-btn a span {color: #fff; font-size: 1.25rem;}

.asservicefaq {width:50%; max-width:800px; margin:0 auto 100px; display: flex; flex-direction: column; background: #ffffff; font-size: 1rem; }
.asservicefaq h1 {font-size: 2.5rem; font-weight: bold; padding-bottom: 15px;}
.asservicefaq h2 {font-size: 1.5rem; font-weight: bold; padding-bottom: 15px;}
.asservicefaq h3 {font-size: 1rem; font-weight: bold; padding-bottom: 10px;}
.asservicefaq .list li {padding:6px 2px; font-size: 0.875rem; color:#787774;}
.asservicefaq .list li a {display: inline-block; text-decoration: underline; font-size: 0.875rem; color:#787774;}
.asservicefaq .list li:hover {background: #f1f1f1;}
.asservicefaq .txt {display: flex; justify-content: flex-start; box-sizing: border-box;}
.asservicefaq .txt span:first-child {}
.asservicefaq h2.txt span:first-child {padding-right: 10px;}
.asservicefaq .img { display: inline-block; margin-left:30px; box-sizing: border-box;}
.asservicefaq .img img {width: 100%;}
.asservicefaq .decimal {list-style-type: decimal;}
.asservicefaq .list-style {margin-left:30px; font-size: 1rem; line-height:2;}
.asservicefaq .list-style li {display: flex;}
.asservicefaq .list-style li span {}
.asservicefaq .list-style > li > span:first-child { margin-right:8px;margin-top:2px;}
.asservicefaq .list-style > li > span:first-child img {width:16px; height:16px;}
.asservicefaq .list-style .text-plus {color: #666666;}
.asservicefaq .space {padding-top: 40px;}

/* asservicelist --------------------------------------------------------*/
.asservicelist { width:50%; max-width:800px; margin:50px auto 100px; display: flex; flex-direction: column; background: #ffffff;}
.asservicelist h1 {font-size: 2.5rem; font-weight: bold; padding-bottom: 15px;}
.asservicelist .list-tit { padding:7px 0 7px 10px; background: #f0efed; border-radius: 5px; box-sizing: border-box;}
.asservicelist .list-tit img {width: 16px; padding-right: 5px; }
.asservicelist .list {padding:15px 0; }
.asservicelist .list li {padding:6px 2px; font-size: 0.875rem; color:#787774;}
.asservicelist .list li a {width:100%; display: inline-block; text-decoration: none; font-size: 0.875rem; color:#787774;}
.asservicelist .list li:hover {background: #f1f1f1; border-radius: 5px;}
.asservicelist .list-txt {font-size: 1rem; color: #387dc9;}
.asservicelist section { padding-top: 40px;}
.asservicelist .tit-area h2 {width:100%; padding:10px; color: #ffffff; background:#233850; border-radius: 10px 10px 0 0; box-sizing: border-box; }
.asservicelist .tit-area .img { padding-top:1px;}
.asservicelist .tit-area .img img {width:100%;}
.asservicelist .con-area { padding: 20px 12px;   /* 상단 콘텐츠와 좌우 정렬 */ box-sizing: border-box;}
.asservicelist .card-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
.asservicelist .card { height: auto;}
.asservicelist .box-no {padding:2px 6px; font-size: 0.8125rem;  color: #ffffff; background:#3B88C3; border-radius: 3px; box-sizing: border-box;}
.asservicelist .card-txt div {padding-top:7px; }
.asservicelist .card-txt .box-tit {font-weight: bold; }
.asservicelist .card-txt .box-em {color: #666666; }
.asservicelist .card-img { padding-top: 25px;
    max-height: 320px;      /* 보여줄 최대 영역 */
    overflow: auto;         /* 내부 스크롤 허용 */
    display: flex;
    justify-content: center;}
.asservicelist .card-img img {
    max-width: 100%;
    height: auto;
}


@media (max-width: 768px) {
.asservice {width:90%; margin:20px auto 50px;}
.asservicefaq {width:90%; margin:20px auto 50px; letter-spacing: -1px;}
.asservicelist {width:90%; margin:20px auto 50px; letter-spacing: -1px;}
.asservice .asservice-btn {width:100% !important; padding:0; }
.asservice .asservice-btn a { padding: 15px 25px; }
.asservice .asservice-btn a span { font-size:0.875rem;}
.asservicefaq h1 {font-size: 1.5rem; }
.asservicefaq h2 {font-size: 1rem;}
.asservicefaq h3 {font-size: 0.875rem;}
.asservicefaq .list li { font-size: 0.875rem;}
.asservicefaq .list-style {font-size:0.875rem;line-height:1.5;}
.asservicefaq h2.txt span:first-child {padding-right:10px;}
.header-btn {padding:10px;}
.asservicelist .card-list {grid-template-columns: 1fr; gap: 40px;   /* ✅ 기존 24px → 40px */}
}
@media  (max-width: 412px) {
.asservice .asservice-btn a { padding: 10px 15px; }
.asservice .asservice-btn a span { font-size:0.8125em;}
}


/* 모바일 */
@media (max-width: 768px) {
}