@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* 요소(element) 여백 초기화  */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite,
form, fieldset, input, textarea, select,
table, th, td {
  margin:0;
  padding:0;
  font-family: "Noto Sans KR", "Noto Sans", "Malgun Gothic", "Dotum", arial, Tahoma, sans-serif;
}

/* 화면 회전시 폰트사이즈 고정 */
body {-webkit-text-size-adjust:none; line-height:1.6}
img {vertical-align: top; max-width: 100%; height: auto;}
h1, h2, h3, h4, h5, h6 {
  font-size:100%;
  font-weight:normal;
}

fieldset, img, abbr,acronym { border:0 none; }

a {
  text-decoration:none;
  outline:none;
  color:#000;
}

/* 테이블 - 마크업에 'cellspacing="0"' 지정 함께 필요 */
table {
  border-collapse: collapse;
  border-spacing:0;
  border:0 none;
}
caption {
  text-align:left;
  font-weight: normal;
}
th, td {
  font-weight: normal;
}

address, caption, em, cite {
  font-weight:normal;
  font-style:normal;
}

blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote,q { quotes:"" ""; }

/* 수평선*/
hr { display:none; }

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 0;
}


.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}


/* =================  레이아웃 =============== */
#adPageMobile {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  font-size: 16px;
}

#adPagePc {
  width: 100%;
  margin: 0 auto;
  font-size: 16px;
}
#adPagePc .image:not(.layer-popup) {
  text-align: center;
}
#adPagePc .image img {
  max-width: 100%;
}

#previewPage {
  width: 100%;
  margin: 0 auto;
  font-size: 16px;
}
/* ================= [END -  레이아웃] =============== */


/* ================= 레이어 팝업 =============== */
[id^=adPage] .layer-popup {
  position: absolute;
  top: -10000px;
  z-index: 1001;
  max-width: 100%;
}


/* [id^=adPage] .layer-popup.show.image,
[id^=adPage] .layer-popup.show.text,
[id^=adPage] .layer-popup.show.input-form,
[id^=adPage] .layer-popup.show.comment,
[id^=adPage] .layer-popup.show.rolling-list,
[id^=adPage] .layer-popup.show.rolling-banner {
  display: flex;
  flex-direction: column;
} */


[id^=adPage] .layer-popup.show {
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  bottom: 0;
  background: rgba(0,0,0,0.4);
}

[id^=adPage] .layer-popup.show.input-form > div,
[id^=adPage] .layer-popup.show.import > div,
[id^=adPage] .layer-popup.show.text > div,
[id^=adPage] .layer-popup.show.image > div {
  position: relative !important;
  top: auto !important;
  margin: 50px auto;
  display: inline-flex;
  flex-direction: column;
}

/* #adPagePc .layer-popup.input-form > div,
#adPagePc .layer-popup.import > div,
#adPagePc .layer-popup.text > div,
#adPagePc .layer-popup.image > div {
  max-width: calc(100% - 100px);
} */


/* [id^=adPage] .layer-popup.show.image > div,
[id^=adPage] .layer-popup.show.text > div,
[id^=adPage] .layer-popup.show.input-form > div,
[id^=adPage] .layer-popup.show.comment > div,
[id^=adPage] .layer-popup.show.rolling-list > div,
[id^=adPage] .layer-popup.show.rolling-banner > div {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 50px auto;
} */
[id^=adPage] .layer-popup .close-button { position: absolute; }
[id^=adPage] .layer-popup .close-button .close-layer-popup {
  overflow: hidden;
  display: block;
  background: rgba(0,0,0,0.7);
  font-size: 0;
}

/* #adPageMobile .layer-popup.image > div,
#adPageMobile .layer-popup.text > div,
#adPageMobile .layer-popup.input-form > div,
#adPageMobile .layer-popup.comment > div,
#adPageMobile .layer-popup.rolling-list > div,
#adPageMobile .layer-popup.rolling-banner > div {
  width: 94%;
  max-width: 600px;
} */

/* #adPagePc .layer-popup > div {
  margin: 40px auto;
  max-width: 90%;
  min-width: 580px;
} */
/* #adPagePc .image.layer-popup.show > div {
  left: auto !important;
} */


[id^=adPage] .layer-popup.show .close-button {
  display: block;
  background-color: rgba(0,0,0,0.7);
}

/* [id^=adPage] .layer-popup.show.image .close-button,
[id^=adPage] .layer-popup.show.text .close-button,
[id^=adPage] .layer-popup.show.input-form .close-button,
[id^=adPage] .layer-popup.show.comment .close-button,
[id^=adPage] .layer-popup.show.rolling-list .close-button,
[id^=adPage] .layer-popup.show.rolling-banner .close-button {
  display: block;
} */

#adPageMobile .layer-popup .close-button {
  top: -40px;
  right: 0px;
}
#adPageMobile .layer-popup .close-button .close-layer-popup {
  width: 30px;
  height: 30px;
}

#adPagePc .layer-popup .close-button {
  top: 0px;
  right: -50px;
}
/* #adPagePc .layer-popup > div {
  display: inline-flex;
  flex-direction: column;
} */
#adPagePc .layer-popup .close-button .close-layer-popup {
  width: 40px;
  height: 40px;
}

[id^=adPage] .layer-popup .close-button .close-layer-popup::after,
[id^=adPage] .layer-popup .close-button .close-layer-popup::before {
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 9px);

  display: block;
  width: 18px;
  height: 2px;
  background-color: #fff;
  content: '';
}
[id^=adPage] .layer-popup .close-button .close-layer-popup::after {
  transform: rotate(-45deg);
}
[id^=adPage] .layer-popup .close-button .close-layer-popup::before {
  transform: rotate(45deg);
}

/* DB창 레이어팝업 */
[id^=adPage] .input-form.layer-popup {z-index: 1100; }
[id^=adPage] .input-form.layer-popup form {padding-bottom: 20px;}

/* =============== [END - 레이어 팝업] ============ */



/* 고정배너 ============================================
 * 위치는 javascript로 처리됨
 * 초기에 이미지 display: none으로 되어있으면
 * 이미지 사이즈 계산 불가하여 top: -10000px; 처리
* ----------------------------------------------------- */
.fixed-banner { position: fixed; z-index: 1000; }

.layer-popup.TOP,
.fixed-banner.TOP { top: -10000px; }
.fixed-banner.BOTTOM { bottom: -10000px; }
.fixed-banner.LEFT { top: -10000px; }
.fixed-banner.RIGHT { top: -10000px; }
.fixed-banner.LEFT_TOP { top: 0; left: 0; }
.fixed-banner.RIGHT_TOP { top: 0; right: 0; }
.fixed-banner.LEFT_BOTTOM { bottom: 0; left: 0; }
.fixed-banner.RIGHT_BOTTOM { bottom: 0; right: 0; }
.fixed-banner .close-button {width: 100%; background-color: rgba(0,0,0,0.7); }
.fixed-banner .close-button .close-layer-popup {display: block; padding: 5px; color: #fff; font-size: 13px; text-align: right;}
.fixed-banner .close-button {display: none;} /* 닫기 버튼 생략 */


.fixed-banner.TOP {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: flex;
  justify-content: center;
}

.fixed-banner.BOTTOM {
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: flex;
  justify-content: center;
}

.fixed-banner.LEFT {
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
}
.fixed-banner.RIGHT {
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
}


.fixed-banner.LEFT_TOP {
  top: 0 !important;
  left: 0 !important;
}

.fixed-banner.RIGHT_TOP {
  top: 0 !important;
  right: 0 !important;
}

.fixed-banner.LEFT_BOTTOM {
  bottom: 0 !important;
  left: 0 !important;
}
.fixed-banner.RIGHT_BOTTOM {
  bottom: 0 !important;
  right: 0 !important;
}

/* =============== [END - 고정배너] ============ */





/* ===================================================
 * 컴포넌트
 * -------------------------------------------------- */

/* -------------------  입력폼 ------------------- */
form[method="post"] {
  padding: 10px 20px;
  max-width: 640px;
  margin: 0 auto;
}
form[method="post"] dl {
  display: flex;
  align-items: flex-start;
  margin: 8px 0px;
  font-size: 16px;
}
form[method="post"] dl dt {
  min-width: 70px;
  width: auto;
  margin-right: 10px;
  font-weight: bold;
  line-height: 35px;
}
form[method="post"] dl dd + dt {
  margin-left: 10px;
  min-width: auto;
}
form[method="post"] dl dd {
  flex: 1 0 0;
	margin: 0;
	padding: 0;
}

form[method="post"] dl dd input[type="text"],
form[method="post"] dl dd input[type="tel"] {
  width: 100%;
  height: 35px;
  padding: 5px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 2px;
}
form[method="post"] dl dd select {
	width: 100%;
	height: 35px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background-color: #fff;
}
form[method="post"] dl dd textarea {
  width: 100%;
  padding: 5px;
  border-radius: 2px;
  border: 1px solid #ddd;
}
form[method="post"] dl dd .checkbox-group,
form[method="post"] dl dd .radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
form[method="post"] dl dd .checkbox-group label,
form[method="post"] dl dd .radio-group label {
  display: flex;
  align-items: center;
	margin-bottom: 7px;
  margin-right: 10px;
  font-size: 14px;
}
form[method="post"] dl dd .checkbox-group label input[type="checkbox"],
form[method="post"] dl dd .radio-group label input[type="radio"] {
	margin:0 5px 0 0;
}

form[method="post"] dl dd .phone,
form[method="post"] dl dd .cert {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
form[method="post"] dl dd .phone input,
form[method="post"] dl dd .cert input {
  width: calc(100% - 95px);
}

form[method="post"] dl dd .phone .btn-cert,
form[method="post"] dl dd .cert .btn-cert {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: teal;
  color: #fff;
  text-align: center;
  width: 90px;
  height: 35px;
  font-size: 13px;
  border-radius: 2px;
}

form[method="post"] dl dd .cert {
  margin-bottom: 0;
}
form[method="post"] dl dd .cert .remain-time {
  display: none;
  position: absolute;
  bottom: 0;
  right: 120px;
  color: red;
  width: 50px;
  font-size: 12px;
  line-height: 35px;
  text-align: center;
}

form[method="post"] .cert-form input[type=tel]:read-only,
form[method="post"] .cert-form input[type=text]:read-only {
  outline: 0;
  background-color: #f2f2f2;
}

form[method="post"] .agree {
  margin: 10px 0;

}
form[method="post"] .agree label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}
form[method="post"] .agree label input[type="checkbox"] {
  margin: 0 5px 0 0;
}
form[method="post"] .agree a {
  font-size: 13px;
  text-decoration: none;
  color:#888;
}

form[method="post"] .send-data {
  display: block;
  width: 90%;
  margin: 0 auto;
}
form[method="post"] .send-data img {
  width: 100%;
  vertical-align: top;
}
/* ------------------- [END - 입력폼] ------------------- */



/* ------------------- 텍스트 ------------------- */
[id^=adPage] [class^=section].text { padding: 15px 5px; font-size: 16px; line-height: 1.6; color: #000; }
[id^=adPage] [class^=section].text > div { font-size: 1em; line-height: unset; }
[id^=adPage] [class^=section].text p:empty:after { content: "\00A0"; }
[id^=adPage] [class^=section].text p { margin: 0.35em 0 0.15em; padding: 0; font-size: 1em; font-style: initial; font-weight: initial; text-align: initial; text-decoration: initial; line-height: unset; }
/* 폰트 굵기 설정 */ 
[id^="adPage"] [class^="section"].text strong { font-weight: bold !important; }
/* 폰트 기울기 설정 */ 
[id^="adPage"] [class^="section"].text em { font-style: italic !important; font-weight: unset; }
/* 텍스트 밑줄 설정 */ 
[id^="adPage"] [class^="section"].text u { text-decoration: underline !important; }
/* 텍스트 취소줄 설정 */ 
[id^="adPage"] [class^="section"].text s { text-decoration: line-through !important; }
/* ---------------- [END - 텍스트] -------------- */




/* ------------------- 리스트 롤링 ------------------- */
.rolling-list:not(.layer-popup) {
  max-width: 640px;
  margin: 0 auto;
  padding: 5px 0;
}
.rolling-list .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  box-sizing: border-box;
}
.rolling-list .list-item .list-text {
  width: calc(100% - 110px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
}
.rolling-list .list-item .list-status {
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 12px;
  line-height: 1;
  width: 100px;
}

/* ---------------- [END - 리스트 롤링] -------------- */


 /* ------------------- 댓글 공통 ------------------- */
 [id^=reply-] {
  max-width: 640px;
  margin: 0 auto;
}
 [id^=reply-] .hide {display: none !important;}
 [id^=reply-] .more-view {display: block !important;}

 [id^=reply-] * {box-sizing: border-box;}
 [id^=reply-] .red {color: red}
 [id^=reply-] .blue {color: blue}
 [id^=reply-] h3 {padding: 0 10px 5px; font-size: 16px; font-weight: bold;}
 [id^=reply-] .login_wrap {display: flex; justify-content: space-between; align-items: center; padding:5px 10px;}
 [id^=reply-] .login_wrap .input_area { display: flex; align-items: center;width: calc(100% - 70px); height: 30px; background: #fff; border: 1px solid #ddd; font-size: 12px; padding-left: 5px;}
 [id^=reply-] .login_wrap .submit_btn {display: flex; justify-content: center; align-items: center; width: 65px; height: 30px; background: #999; color:#fff; font-size: 12px; }
 [id^=reply-] .reply_item {padding:17px 10px 10px; border-bottom:1px solid #ddd;}

 [id^=reply-] .name_date strong,
 [id^=reply-] .name {font-size: 15px; font-weight: bold; color: #000}
 [id^=reply-] .name_date span,
 [id^=reply-] .date {font-size: 13px; color: #999}

 [id^=reply-] .reply_item img {display: block; width: 70%; width: 70%; margin: 5px 0;}

 [id^=reply-] .reply_item .con,
 [id^=reply-] .reply_item .text {margin-bottom: 10px;  font-size: 14px; line-height: 1.5;}


 /* ------------------- 댓글 좋아요형 - LIKE ------------------- */
 [id^=reply-].reply .btn {display: flex; justify-content: space-between; align-items: center; padding-top: 7px;}
 [id^=reply-].reply .btn span {display: inline-flex; padding: 4px 5px; border: 1px solid #ddd; background: #fff; font-size: 12px; line-height: 1; color: #999;}

 [id^=reply-].reply .btn .aram {font-size: 13px; color: #aaa; text-decoration: underline;}
 [id^=reply-].reply .more {font-size: 13px; text-align: center; padding: 10px 0; border-bottom: 1px solid #ddd;}

 /* ------------------- 댓글 공감형 - EMPATHY ------------------- */
 [id^=reply-].reply02 .reply_item {background: #f1f1f1;}
 [id^=reply-].reply02 .reply_item .BEST { background: #f75628; color: #fff; padding: 0 5px; font-size: 12px; margin-right: 5px;}
 [id^=reply-].reply02 .bottom_btn {display: flex; justify-content: space-between; align-items: center; padding-top: 7px;}
 [id^=reply-].reply02 .bottom_btn span {display: inline-flex; padding: 4px 5px; border: 1px solid #ddd; background: #fff; font-size: 12px; line-height: 1; }
 [id^=reply-].reply02 .more-view {padding: 10px 0; background: #f1f1f1; font-size: 13px; text-align: center;}
 [id^=reply-].reply02 .login_wrap {background: #f1f1f1; border-top: 1px solid #ddd;}

/* ------------------- 댓글 평점 - RATING ------------------- */
[id^=reply-] .more-click-reply .top {position: relative}
[id^=reply-] .more-click-reply .top .rank {position: absolute; top:0; right: 0; font-size: 14px; color: red; line-height: 1.4;}
[id^=reply-] .more-click-reply .top .rank::before {position:relative; top:2px; color: #999; content: '평점 '; }
[id^=reply-] .more-click-reply .more_btn { width: 95%; padding: 10px; margin: 10px auto; border: 1px solid #ddd; font-size: 17px; font-weight: bold; text-align: center;  line-height: 1;}
/* ------------------- [END - 댓글] ------------------- */



/* ------------------- 임포트 ------------------- */
/* 하단정보 */
#footerSection {
  padding: 20px 10px 30px;
  background: #888;
  color:#eee;
  font-size: 12px;
  line-height: 1.6;
  text-align:center;
}

/* 하단정보(클릭형) */
#footerSectionToggle {
  border-top: 1px solid #ddd;
  text-align: center;
  font-size: 12px;
  color:#888;
  padding: 10px 0;
}
#footerSectionToggle .footerSection {
  padding: 10px 10px 30px;
  line-height: 1.6;
}
#footerSectionToggle .footerSection.hidden {
  display: none;
}
/* ------------------- [END - 임포트] ------------------- */


/* ===================================================
 * 템플릿
 * -------------------------------------------------- */
/* 기사입력 */
#headerNewsDate .newsDate {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 0 10px 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  line-height: 1;
  color: #888;
}
#headerNewsDate .newsDate .btnArea {
  display: flex;
  align-content: center;
}
#headerNewsDate .newsDate span.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border: 1px solid #e9e9e9;
  font-size: 11px;
}
#headerNewsDate .newsDate span.more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
}
#headerNewsDate .newsDate span.more b {
  display: block;
  width: 3px;
  height: 3px;
  margin: 0 2px;
  background: #aaa;
  border-radius: 100%;
}


/* 반짝 혜택 */
#benefitPopup {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.6);
  z-index: 999999;
}
#benefitPopup.hidden {
  display: none;
}
#benefitPopup .benefitPopupInner {
  width: 90%;
  max-width: 580px;
  color: #fff;
}
#benefitPopup .benefitPopupInner .imgBox {
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
#benefitPopup .benefitPopupInner .bottom {
  text-align: right;
}


/* 결과확인 */
#arrowResult {
  margin: 10px;
}
#arrowResult img {
  width: 100%;
}
#arrowResult .textBox {
  padding: 20px 10px;
  border: 1px solid #ddd;
  background: #f6f6f6;
  text-align: center;
  line-height: 1.8;
}
#arrowResult .textBox .input {
  display: inline-block;
  width: 80px;
  border: 1px solid #aaa;
  border-radius: 2px;
  background-color: #fff;
  line-height: 1.2;
}
#arrowResult .textBox .red {
  color: red;
}

/* javascript 적용 내용 */
.progress-bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); z-index: 100000; }
.progress-bg span { color: #fff; font-weight: bold; font-size: 18px; display: block; padding-top: 20px; }
.progress-bg .spinner {
  width: 100px;
  height: 100px;
  border: 6px solid #fff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: progress 1s ease-out infinite;
  -webkit-animation: progress 1s ease-out infinite;
}

@keyframes progress {
  to {
    transform: rotate(360deg);
  }
}



/* ================= 약관 레이아웃 =============== */
#agreePage { padding: 0 10px; font-size: 16px; line-height: 1.6; color: #000; }
#agreePage h1, #agreePage h2, #agreePage h3, #agreePage h4, #agreePage h5, #agreePage p { font-style: initial; text-align: initial; text-decoration: initial; line-height: unset; }
#agreePage h1:empty::after, #agreePage h2:empty::after, #agreePage h3:empty::after, #agreePage h4:empty::after, #agreePage h5:empty::after, #agreePage p:empty::after { content: "\00A0"; }
#agreePage p { margin: 0.35em 0 0.15em; padding: 0; font-size: 1em; font-weight: initial; }
#agreePage h1 { font-size: 2em; font-weight: 700; }
#agreePage h2 { font-size: 1.5em; font-weight: 700; }
#agreePage h3 { font-size: 1.17em; font-weight: 700; }
#agreePage h4 { font-weight: 700; }
#agreePage h5 { font-size: 0.83em; font-weight: 700; }
/*  설정 */
#agreePage a { color: blue; text-decoration: underline; }
/* 폰트 굵기 설정 */
#agreePage strong { font-weight: bold !important; }
/* 폰트 기울기 설정 */ 
#agreePage em { font-style: italic !important; font-weight: unset; }
/* 텍스트 밑줄 설정 */ 
#agreePage u { text-decoration: underline !important; }
/* 텍스트 취소줄 설정 */ 
#agreePage s { text-decoration: line-through !important; }
/* 테이블 설정 */
#agreePage table { width: 100%; border-collapse: collapse; border: 2px solid #333; margin: 0; }
#agreePage table th { min-width: 1em; border: 1px solid #ced4da; padding: 3px 5px; vertical-align: top; box-sizing: border-box; font-weight: bold; text-align: left; background-color: #f1f3f5; }
#agreePage table td { min-width: 1em; border: 1px solid #ced4da; padding: 3px 5px; vertical-align: top; box-sizing: border-box; }
#agreePage blockquote { margin-left: 1em; padding-left: 1rem; border-left: 3px solid rgba(0, 0, 0, 0.1) !important; }
/* 들여쓰기 설정 */
#agreePage ol { padding-left: 15px; margin-left: 15px; font-size: 1em; line-height: unset; list-style: decimal; }
#agreePage ul { padding-left: 15px; margin-left: 15px; font-size: 1em; line-height: unset; list-style: disc; }
/* 이미지 설정 */
#agreePage img { max-width: 100%; }
/* =============== [END - 약관 레이아웃] ============ */