@charset "utf-8";
@import url(../fonts/Roboto/style.css);
@import url(../fonts/scoredream/style.css);
@import url('../gh/orioncactus/pretendard/dist/web/static/pretendard.css');

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;font-size: 100%;font: inherit;}
/* 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;}
table {border-collapse: collapse;border-spacing: 0;}
 i.fa{font-style:normal !important;}

mark {background-color:var(--bg-primary); font-style:italic;font-weight:bold;}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
hr {display:block;height:0; border:0;border-top:0; margin:0;padding:0;}
input, select {vertical-align:middle;resize:none}
caption, th, td {font-weight:normal}
table caption {visibility:hidden;width:0;height:0;overflow:hidden}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal}
img {border:0;vertical-align:middle; max-width:100%}
legend {display:none}

.gratxt{ background-image:-webkit-linear-gradient(0deg,var(--primary),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.full_width_bg{position:absolute; top:0; bottom: 0; z-index:-1; left:50%}


/* 4. html 루트 크기는 10px 고정 */
html {
  font-size: 10px;
}
/* 1. CSS 사용자 지정 속성(변수) 선언 */
body{
  /* 기본값(1280px 이상) */
  --font-size: 2.8rem; /* 20px */
}

/* 2. 750px ~ 1279px : 1280:20 비율 */
@media (min-width: 751px) and (max-width: 999px) {
  body {
		--font-size: calc(28 * 100vw / 1000 );
  }
}

/* 3. 749px 이하 : 375:13 비율 */
@media (max-width: 750px) {
  body { 
		--font-size: calc(13 * 100vw / 375 ); /* 13 ÷ 375 */
  }
}


body, select,input,textarea,button {font-size:var(--font-size);  line-height:1.5; font-family: "Pretendard","맑은 고딕","Nanum Gothic","Microsoft Yahei","Gulim", "dotum",Helvetica, sans-serif; color:var(--text-primary); letter-spacing:-.06em; }
 input, button, select, textarea, input::placeholder, .iconfont{font-size:inherit; outline: none;}
iframe#hiddenframe {display:none;width:0;height:0}
button{cursor:pointer; border:0}
strong{font-weight:700}
b{font-weight:800}
a{color:var(--text-primary); text-decoration:none}
a:hover, a:focus{color:var(--primary);text-decoration:none}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus { 
border: 1px solid var(--border-secondary) !important;
}
.placeholdersjs { color: #aaa !important; }

@media (min-width:751px){
.nop{display:none; position:absolute; width:0; height:0; overflow:hidden;}
}
.clear{display:block; float:none; clear:both; border:0; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}
.wrap{width:1280px; margin:0 auto; position:relative; zoom:1;}
.wrap:after {display:block;visibility:hidden;clear:both;content:""}

@media (max-width:1280px){
.wrap{width:auto; margin:0 2vw; }
}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;left:0; right:0; height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:fixed; background:#fff; border-radius:1rem; overflow:hidden; box-shadow:.1em .1em .5em rgba(0,0,0,.3)}
.hd_pops.mobile {display:none;}
.hd_pops_con {}
.hd_pops_footer {padding:.5em;background:#000;background:var(--primary);color:#fff;display:flex; justify-content:space-between}
.hd_pops_footer button {margin-right:0;padding:0 1em;border:0;background:none;color:#fff; font-size:.9em;}


.visual{position:relative; margin:.7em; background-color: var(--primary); height:calc(100vh - 2em); border-radius: 1.5em; display: flex; justify-content: center; flex-direction: column; color: var(--text-anti-primary); align-items: center; overflow: hidden; padding-bottom:5em;}
.visual h3{font-size: 2.3em; font-weight: 800; line-height: 1.2; text-align: center;}
.visual h3 span{color: var(--success);}
.visual p{font-size: 1.2em; margin-top: 1em;}
.visual a{background-color: var(--success); color: var(--primary-dark); padding:0 2.2em; line-height: 2em; border-radius:.5em; font-size:1.5em; font-weight:700; margin-top: 1em;}
.visual .rolling-banner {position: absolute; left: 0; right:0; bottom: 1em;  font-size:1.4em; font-weight:700;}
.visual .rolling-banner ul { }
.visual .rolling-banner ul li{position:relative; background-color: var(--bg-primary);color: var(--text-primary); border-radius:.5em; width: 8em; text-align: center; line-height: 3; transition: all .5s ease; z-index: 1;  margin:0 0; transform: scale(.8);    transform-origin: bottom center;}
.visual .rolling-banner ul li span{color: var(--primary);}
.visual .rolling-banner ul li em{position:absolute;right:-1em; top:-1em; font-size: .8em; width: 2em; height:2em; border-radius: 50%; border:.07em solid var(--danger); line-height: 2em; color:var(--danger); transform: rotate(-30deg); z-index: 3;}
.visual .rolling-banner ul li em:before{position:absolute; inset: -.3em; border:.1em solid var(--danger); border-radius: 50%; content:"";}


.visual .rolling-banner ul li.swiper-slide-active{  z-index: 2; transform: translateX(0) scale(1.1);} 

.visual .rolling-banner ul li.swiper-slide-duplicate-prev, .visual .rolling-banner ul li.swiper-slide-prev{transform:translateX(-5%) scale(0.8)}
.visual .rolling-banner ul li.swiper-slide-duplicate-next, .visual .rolling-banner ul li.swiper-slide-next{transform:translateX(5%) scale(0.8)}



/* 롤링 애니메이션 정의
@keyframes roll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
*/

.visual .rolling-banner ul li em {opacity: 0;}
.visual .rolling-banner ul li.swiper-slide-active em {animation-name: stampani; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease;  opacity: 1;}
@-webkit-keyframes stampani {
  0%{transform:rotate(0deg) scale(5); opacity: 0;}
  30%{transform:rotate(0deg) scale(5); opacity: 0;}
  80%{transform: rotate(0deg) scale(3); opacity: 1;}
  100%{transform:rotate(-30deg) scale(1); opacity: 1;}
} 

.newsec{padding:4.2em 0; text-align: center;}
.newsec .car-area{display: grid; grid-template-columns: repeat(2,16em); gap: 1.25em; justify-content: center;}
.newsec .car-area dd{background-color: var(--primary); border-radius:50%; aspect-ratio: 1; color: var(--text-anti-primary); display: flex; justify-content: center; flex-direction: column; text-align: center; position: relative;}
.newsec .car-area dd figure{}
.newsec .car-area dd article{}
.newsec .car-area dd article h6{font-size: 1.4em; font-weight: 700;}
.newsec .car-area dd article a{display: inline-block; border:1px solid var(--success); color: var(--success); font-weight:700; line-height: 2em; border-radius: .3em; margin-top: .5em; padding:0 .7em; font-size: .9em; margin-bottom: 1em;}
.newsec .car-area dd article a:after{content:">"; margin-left:.5em;}

.reason{padding:4.2em 1em; text-align: center; background-color: var(--bg-secondary);}
.reason h3{font-size: 2.3em;}
.reason dl{margin-top: 1em; width: 32em; margin:1em auto 0; text-align: left;}
.reason dl dd{margin-top: 1em; background-color: var(--bg-primary); border-radius: 1em; position:relative; display: flex; justify-content: center; flex-direction: column; height:12em; padding-left:3em; overflow: hidden;}
.reason dl dd p{ font-size:1.2em}
.reason dl dd p strong{color: var(--primary);}
.reason dl dd figure{position:absolute; right:0; bottom:0; }

.review{position:relative; background-color: var(--primary); padding:4.2em 0; text-align: center; overflow: hidden;}
.review h3{ font-size:2.3em; line-height: 1.2; color: var(--text-anti-primary); margin-bottom: 1em;}
.review h3 strong{color: var(--success);}
.review dl { }
.review dl dd{width: 20em; height: 12em; background-color: var(--bg-primary); border-radius: 1em; position:relative; display: flex; justify-content: center; flex-direction: column; text-align: center;}
.review dl dd i{position:absolute; left: 0; top: 0; width: 2em; height:2em; color: var(--info); font-size:1.5em;}
.review dl dd span{position:absolute; left: 1em; top: 3em; font-size: .75em; opacity: .5;}
.review dl dd p{font-size: 1.1em; }
.review dl dd p strong{color: var(--primary);}

.review-area {display: flex; align-items: center; gap: 40px; width: 100%; height: auto; overflow: hidden; margin-top: 1em;}
.review-area dl {display: flex; align-items: center; gap: 40px;}
.review-area.scroll1 dl {animation: roll3 80s linear infinite;}
@keyframes roll3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.review-area.scroll2 dl {animation: roll4 80s linear infinite;}
@keyframes roll4 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.connect{position:relative; padding:4.2em 0; text-align:center; width: 33em; margin:0 auto;}
.connect h3{font-size: 2.3em; line-height: 1.3;}
.connect h3 strong{color: var(--primary);}
.connect form{text-align: left; display: block; margin-top: 2em;}
.connect form dl{ }
.connect form dl dd{ margin-top: 1em;}
.connect form dl dd label{font-size: 1.1786em; font-weight: 700; display: block;}
.connect form dl dd input{width: 100%; border:0; border-bottom: 1px solid var(--primary); }
.connect form .agree{margin-top: 1em;}
.connect form .agree p{margin-top: 1em; color: #898989;}
.connect form .agree .selec_chk + label span{border:2px solid #171D42}
.connect form .agree .selec_chk + label span:after{opacity: 0;  transition: all .3s ease; transform:rotate(5deg) scale(.5);}
.connect form .agree .selec_chk:checked + label span:after{opacity: 1; transform:rotate(45deg) scale(1);}
.connect form .agree a{text-decoration: underline; color: #898989;}
.connect button{font-size: 1.8em; font-weight: 700; width: 100%; background-color: var(--primary); color: var(--text-anti-primary); line-height: 2.5em; border:0; margin-top: 2em;}

.agree_content{position:fixed; width: 33em; height:90vh; left:50%; top: 50%; transform: translate(-50%,-50%); background-color: #fff; box-shadow:.1em .1em .4em rgba(0,0,0,.3); text-align: left; display: none; }
.agree_content header{position:relative; top: 0; line-height: 8rem; padding:0 1em; font-size:1.2em; display: flex; justify-content: space-between; background-color: var(--primary); color: var(--text-anti-primary); z-index:2;}
.agree_content header a{color: var(--text-anti-primary);}
.agree_content article{position: relative; height: calc(100% - 8rem); padding:2em; overflow:auto; font-size: .75em;}
.agree_content article h6{font-size: 1.1em; font-weight: 600; margin:1em 0 .5em 0;}
.agree_content article table{width: 100%; margin-top: 1em;}
.agree_content article table tbody th{border:1px solid var(--border-secondary); padding:.4em; width: 8em;}
.agree_content article table tbody td{border:1px solid var(--border-secondary); padding:.4em}

.com_info{background-color: var(--bg-primary); padding: 1em 2em; border-radius: 1em ; border:1px solid var(--border-secondary);   text-align: left; margin-top: 2em;}