@charset "utf-8";

/* noto */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,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;}
body{width:100%; font-family:'remote sans', 'Noto Sans KR', sans-serif; color:var(--color-primary); 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;-webkit-appearance: none; -moz-appearance: none; appearance: 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:var(--color-secondary);}
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: 1180px) {
    html{font-size:56.25%;}
}

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

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


:root{
    /* Color */
    --color-primary:#00183e;
    --color-secondary:#317fff;
    --color-white:#ffffff;
    --color-black:#000000;
    
    --color-gray100:#f2f7fc;
    --color-gray200:#f3f3f3;
    --color-gray300:#e4e8ec;
    --color-transparent:transparent;


    /* Font size */
    --h1-size:4.6rem;
    --h2-size:2.4rem;
    --h3-size:2.2rem;
    --h4-size:2rem;

    --body-size-18:1.8rem;
    --body-size-16:1.6rem;
    --body-size-14:1.4rem;
    

    /* space */
    --space-120:120px;
    --space-60:60px;
}

@media only screen and (max-width: 1280px) {
    :root{
        /* Font size */
        --body-size-18:2rem;
        --body-size-16:1.8rem;
        --body-size-14:1.6rem;

        /* space */
        --space-120:100px;
        --space-60:50px;
    }
}

@media only screen and (max-width: 960px) {
    :root{
        /* Font size */
        /* space */
        --space-120:80px;
        --space-60:40px;
    }
}

@media only screen and (max-width: 750px) {
    :root{
        /* Font size */
        --body-size-18:2rem;
        --body-size-16:2rem;
        --body-size-14:1.8rem;
    }
}

/* btn */
.btn-wrapper{display:flex; justify-content:center;}
.btn-wrapper > a, .btn-wrapper > button{display:flex; text-align:center;}

.btn-large-secondary{font-family:'remote sans', 'Noto Sans KR', sans-serif; padding:1.5rem 2rem 1.3rem; font-size:var(--body-size-18); font-weight:700; line-height:1; color:#fff; border-radius:100px; background-color:var(--color-secondary);}
.btn-large-secondary-line a{font-family:'remote sans', 'Noto Sans KR', sans-serif; display:inline-block; padding:0.8rem 2rem 0.6rem; font-size:var(--body-size-18); font-weight:700; line-height:1; color:var(--color-secondary); border:2px solid var(--color-secondary); border-radius:100px; box-sizing:border-box;}


.btn-large-secondary-icon{position:relative; width:46px; height:100%; border-radius:40px; background-color:var(--color-secondary); box-sizing:border-box;}
.btn-large-secondary-icon span{position:absolute; top:50%; left:50%; display:inline-block; transform: translate(-50%, -50%);}
.btn-icon-arrow span{width:24px; height:24px; background:url('../images/arrow.svg') center/cover no-repeat;}
.btn-icon-time span{width:24px; height:24px; background:url('../images/clock.svg') center/cover no-repeat;}


.btn-large-secondary-line span{display:inline-block;}
.btn-line-icon{display:flex !important; align-items:center;}
.btn-line-icon strong{display:inline-block; line-height:1;}
.btn-line-icon span{margin-left:0.6rem;}

@media only screen and (max-width: 960px) {
    .btn-large-secondary-arrow{width:42px;}
}

@media only screen and (max-width: 750px) {
    .btn-large-secondary-arrow{width:39px;}
    .btn-large-secondary-line{display:flex; justify-content:center;}
}


/* Sentence */
.sentence-line1{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
.sentence-line2{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.sentence-line3{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.sentence-line4{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}


/* Flex */
.flexDirection-column{flex-direction:column;}

h1{font-size:var(--h1-size);}
h2{font-size:var(--h2-size);}
h3{font-size:var(--h3-size);}
h4{font-size:var(--h4-size);}