@charset "utf-8";

/* Inter & noto */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap');


/* default */
/* 55% => 1rem === 8.8px */
/* 62.5% => 1rem === 10px */
/* 75% => 1rem === 12px */
html{width:100%; font-size:62.5%; line-height:1.5; scroll-behavior:smooth;}
body{width:100%; font-family:'Noto Sans KR', sans-serif; color:#000; padding:0px; margin:0px; letter-spacing:-0.2px; font-weight:400; background-color:#fff; word-break:keep-all; -ms-overflow-style: none; /* IE and Edge */ }

/* IE font size */
@media screen and (min-width: 0\0) {
  /* IE 9, IE 10, IE 11 */
  :root,
  html {
    font-size: 10px;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE 10, IE 11 */
  :root,
  html {
    font-size: 10px;
  }
}

div, p, ul, li,ol, table, th, td, textarea, input, span, form, h1, h2, h3, h4, h5, h6, dt, dl, dd, em, sup {padding:0px; margin:0px; vertical-align:top;}
ul, ol, dl, dd, dt, li {list-style-type:none;}
form, fieldset{margin:0; padding:0; border:0;}
table, tbody, tfoot, thead, tr, th, td{border-collapse:collapse; border-spacing:0;} 

/*border:none; separate*/
/* 6 */* html table, tbody, tfoot, thead, tr, th, td {border-collapse:collapse;}
/* 7 */* + html table, tbody, tfoot, thead, tr, th, td {border-collapse:collapse;}

legend{display:none; position:absolute; visibility:hidden}
caption{visibility:hidden; width:0px; height:0px; overflow:hidden; font-size:0px; margin:0px; padding:0px; line-height:0px;}
img {border:0; vertical-align:middle; outline:none}
optgroup {font-style:normal; font-size:0px; height:0px; line-height:0px}
select {vertical-align:middle;}
label {cursor:pointer;}
img, fieldset {border:0 none transparent;/*'transparent' for Opera7*/}
i, em {font-style:normal;}
span{letter-spacing:normal}

br{font-family: Sans-Serif, serif;}
i{font-style: normal;}

/* input */
input, textarea{box-shadow: none;}



/* html5 ie9 else */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
padding:0;
margin:0
}
/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none;}
input:focus,textarea:focus {outline:none;}
input[type="radio"]{border:none transparent}

/* a링크 */
a{color:#000;}
a:focus{outline: none;}
a:link, a:visited {text-decoration:none}

button {border:0 none; background-color:transparent; cursor:pointer;}


@media only screen and (max-width: 1280px) {
    html{font-size:56.25%;}
}

@media only screen and (max-width: 960px) {
    html{font-size:55%;}
}

@media only screen and (max-width: 750px) {
    html{font-size:50%;}
}


:root{
    /* Color */
    --color-primary:#fe5000;
    --color-secondary:#fcdc4d;
    --color-white:#ffffff;
    --color-black:#000000;
    --color-black100:#222222;
    --color-line:#dfdfdf;
    --color-gray100:#faf7f1;
    --color-gray200:#f8f8f8;
    --color-gray300:#8e8e8e;
    --color-gray400:#555555;
    --color-gray500:#474747;
    --color-transparent:transparent;

    /* Font size */
    --h1-size:7.6rem;
    --h2-size:4.8rem;
    --h3-size:3.8rem;
    --h4-size:2.6rem;
    --h5-size:2.4rem;
    --h6-size:2rem;

    --font-size-20:clamp(18px, 1.25vw, 2rem);
    --font-size-18:clamp(16px, 1.25vw, 1.8rem);
    --font-size-16:clamp(14px, 1.111vw, 1.6rem);
    --font-size-14:clamp(13px, 0.903vw, 1.4rem);
}


/* btn */
.btn-base a, .btn-base button, .btn-base span{display:inline-block; line-height:1; border-radius:100px; cursor:pointer; box-sizing:border-box; transition:all .2s ease;}
        
.btn-large-primary a, .btn-large-primary button, .btn-large-primary span{width:260px; height:clamp(50px, 3.472vw, 6rem); font-size:var(--font-size-20); font-weight:700; color:var(--color-white); text-align:center; background-color:var(--color-primary);}
.btn-large-primary a:hover, .btn-large-primary button:hover, .btn-large-primary span:hover{color:var(--color-primary); background-color:var(--color-white);}

.btn-small-primary a, .btn-small-primary button, .btn-small-primary span{padding:10px 18px; font-size:var(--font-size-16); font-weight:500; color:var(--color-white); background-color:var(--color-primary);}
.btn-small-primary a:hover, .btn-small-primary button:hover, .btn-small-primary span:hover{color:var(--color-primary); background-color:var(--color-white);}


/* btn icon */
.btn-arrow > a{display:flex; justify-content:center; align-items:center; gap:10px;}
.arrow-small-right{display:inline-block; width:8px;}
.arrow-small-right svg{margin-bottom:1px;}

@media only screen and (max-width: 1280px) {
    .arrow-small-right svg{margin-bottom:0px; margin-top:3px;}
}

/* heading */
h1{font-size:clamp(50px, 5.556vw, var(--h1-size));}
h2{font-size:clamp(38px, 3.333vw, var(--h2-size));}
h3{font-size:clamp(26px, 2.222vw, var(--h3-size));}
h4{font-size:clamp(22px, 1.667vw, var(--h4-size));}
h5{font-size:clamp(20px, 1.528vw, var(--h5-size));}
h6{font-size:clamp(18px, 1.389vw, var(--h6-size));}