@charset "utf-8";

/* 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: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, 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 {width: 100%; 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;}



/* 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: 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:#3644ac;
    --color-secondary:#1e1e1e;
    --color-white:#ffffff;
    --color-black:#0a0a0a;
    --color-line:#262626;
    --color-gray:#535353;
    --color-gray100:#e4e4e4;
    --color-transparent:transparent;


    /* Font size */
    --main-h1-size:8.2rem;    

    --h1-size:6rem;
    --h2-size:;
    --h3-size:;
    --h4-size:;
    --h5-size:;
    --h6-size:;

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

    /* space */
    --space-140:140px;
    --space-100:100px;
}

@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-140:120px;
        --space-100:80px;
    }
}

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

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

        /* space */
        --space-140:80px;
        --space-100:40px;
    }
}

/* btn */
.btn-color-blue a{color:var(--color-white); border:2px solid var(--color-secondary); background:url('../images/btn-arrow-small-white.png') center right 20px/6px var(--color-secondary) no-repeat;}
.btn-color-blue a:hover{color:var(--color-secondary); background:url('../images/btn-arrow-small-blue.png') center right 20px/6px var(--color-white) no-repeat;}
.btn-color-transparent a{color:#818181; border:2px solid #818181; background:url('../images/btn-arrow-small-gray.png') center right 20px/6px transparent no-repeat;}
.btn-color-transparent a:hover{color:var(--color-white); border:2px solid var(--color-secondary); background:url('../images/btn-arrow-small-white.png') center right 20px/6px var(--color-secondary) no-repeat;}

.btn-text-basic a{display:inline-block; padding-right:20px; font-size:var(--body-size-18);}

.btn-font-color-primary a{color:var(--color-primary); background:url('../images/btn-arrow-small-red.png') center right/9px no-repeat;}
.demo-btn a{display:inline-block; width:240px; padding:10px 0; font-size:var(--body-size-18); text-align:center; box-sizing:border-box; transition:all .2s ease;}


/* 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;}