/*공통*/
html {-webkit-text-size-adjust: none;}
html, body {direction: ltr;width: 100%;word-wrap: break-word;word-break: keep-all; }
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p,
table, th, td, form, fieldset, legend, textarea, input, select, textarea, button, figure, figcaption {margin: 0;padding: 0;}

img, form, fieldset, svg {
    border: 0;
    vertical-align: top;
}

input, button, select {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
    outline: none;
}

button:disabled {
    cursor: default;
}

button::-moz-focus-inner {
    padding: 0;
    margin: -1px;
}

ul, ol, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

a, a:hover, a:visited, a:active {
    text-decoration: none;
    color: #333;
}

a:hover{
    /*text-decoration: underline;*/
}

.blind, legend, caption {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
}

body, textarea, input, select, textarea, button {
    font-family: 'Pretendard',"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

table {
    border-collapse: collapse;
}
* {box-sizing: border-box;}

@font-face {
    font-family: 'PuradakGentleGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.1/PuradakGentleGothicR.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YeogiOttaeJalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
body, html{width: 100%; height: 100%;}

.intro{}

.video-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10000;
    overflow: hidden;
}

.video-bg-el {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
}

.content {
    color: white;
    text-align: center;
    padding-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: url("/intro/images/intro_bg_260902.jpg") no-repeat center; background-size: cover;
    /*display: flex; align-items: center; justify-content: center;*/
}
.content .box{
    max-width: 1500px;
    margin: 0 auto;
}

.content .logo{
    text-align: center;
    padding-top: 2.25rem;
    max-width: 11.25rem;
    margin: 0 auto;
}
.content .logo img{width: 100%;}

.content .slogan {
    opacity: .9;
    display: inline-block;
    border-bottom: 1px solid rgba(255,255,255,.7);
    padding: 1rem 0;
    display:none;
}

.content .slogan strong{
    font-size: 3rem;
    font-weight:  400;
}
.content .slogan strong span{font-weight: 900;}


.content .txt{padding:1rem 0 0;
    font-family: 'YeogiOttaeJalnanGothic';}

.content h1 {
    font-size: 3.2rem;
    font-weight:300;
    color:#001e9a;
}
.content h1 span{
    display: block;
    font-size: 2rem;
    line-height: 2.3rem;

}
.content h1 + p {
    color: #0057c8;
    font-size: 1.5rem;
    padding-bottom: 0.625rem;
    font-weight: 700;
    letter-spacing: .05rem;
}
.content .date{
    max-width: 31.25rem;
    margin: 0 auto;
    font-family: 'GMarketSans';

}

.content .date p{
    background: #001e9a;
    padding: 0.5625rem 0.625rem 0.3125rem 0.625rem;
    border-radius: 50px;
    font-size: 1.5rem;
    box-shadow: 0 0 0.625rem rgba(0,0,0,.5)

}
.content .date i {
    font-style: normal;
    font-weight: 700;
    background: #fff;
    color: #001e9a;
    border-radius: 3.125rem;
    display: inline-block;
    font-size: 1.3rem;
    width: 1.75rem;
    height: 1.75rem;
    text-align: center;
    line-height: 1.875rem;
    margin: 0 0.1875rem;
    transform: translateY(-0.125rem);
}
.content .date em{
    font-style: normal;
    font-size: 1.25rem;
}
.content .desc{
    display: flex;
    padding: 1rem 0 ;
    border-radius:3rem;
    max-width:31.25rem;
    margin:0 auto;
    justify-content: space-between;
    align-items: end;
}

.content .desc img{
    max-width: 10rem;
}
.content .desc .desc_txt{
    text-align: right;
    font-size: 1.6rem;
    padding: .25rem 0;
    color: #3e1f85;
    font-family: 'GMarketSans';
}

.content .desc .desc_txt span{
    font-family: 'PuradakGentleGothic';
}
.content .desc .desc_txt b {font-weight: 900;}
.content .desc small{font-size: .9rem; color:#555; }

.btn_area{display: flex;
    max-width: 1200px;
    justify-content: center;
    margin: 0 auto;
    /* gap:100px; */
    padding:30px 0;
}

.link-group{
    display: flex;
    justify-content: center;
    margin:  0 auto;
    /*width: 50%;*/
    width: 100%;
}

.link-group a{
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 1rem 1rem;
    margin: 0 1rem;
    font-size: 1.5rem;
    transition: all .3s;
    width: calc(100% / 2);
    background:#fa6831;
    border-radius:.5rem;
    font-family: 'YeogiOttaeJalnanGothic';
    line-height: 1.5rem;
}
.link-group a.orange{background: #e64219; flex-wrap: wrap;}
.link-group a:first-child{margin-left:0;}
.link-group a:last-child{margin-right:0;}
/* .link-group a:nth-child(2){background: rgba(198,90,18)}
.link-group a:nth-child(3){background: rgba(221,96,12)}
.link-group a:nth-child(4){background: rgba(237,92,18)} */

.link-group a b{
    font-weight: 200;
    position: relative;
}
.link-group a small {font-size: 0.75rem;display: block; width:100%;}
.link-group a img{width: 1.5625rem;transform: translateY(-0.2rem); margin-left: 0.3125rem;}
.link-group a b:after{
    /*content:"";*/
    position:absolute;
    width: 0;
    height: 2px;
    background:#fff;
    left: 0;
    bottom:-2px;
    transition:all .3s ease;
}

.link-group a:hover b:after{width:100%;}

.link-group a span{
    position: relative;
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    /*padding-top: .5rem;*/
}

.link-group a span:after{
    /*content: '';*/
    background: url("/intro/images/link.svg") center no-repeat;
    width: 30px;
    height: 20px;
    display: inline-block;
    padding-left: 10px;
    transform: translateY(3px);
    transition: all .3s;
}

.link-group a:hover{
    transform: translateY(-7px);
    box-shadow: 5px 5px 20px rgba(0,0,0,.2);
}

.link-group a:hover span:after{transform: translate(5px,3px)}
/*
.link-group a:nth-child(1):hover{background: rgba(209,122,30,1)}
.link-group a:nth-child(2):hover{background: rgba(198,90,18,1)}
.link-group a:nth-child(3):hover{background: rgba(221,96,12,1)}
.link-group a:nth-child(4):hover{background: rgba(237,92,18,1)} */

@media screen and (max-width: 1200px){
    body{font-size: 14px;}
    .content .box{padding: 0 15px;}
    /*.content h1{font-size: 3rem;}*/
    /*.content h1 + p{font-size: 1.5rem;}*/
    .link-group a{font-size: 1.3rem;}
    .link-group a span{font-size: 1rem;}
    .btn_area{gap: 10px;}

}

@media screen and (max-width: 1024px){
    /*260907 link-group에 버튼 5개 있음*/
    .btn_area{width: 100%; flex-wrap: wrap; gap: 0;}
    .link-group{flex-wrap: wrap; width: 100%;}
    .link-group a{width: 100%; margin: 5px 0; padding: 1.5rem;flex-wrap: nowrap; justify-content: center;}
    .link-group a b{width: auto;}
    .link-group a span{font-size: 1.3rem; width: auto; padding-left: 8px; font-weight: 600; }
}

@media screen and (max-width: 767px){
    .content .logo{padding: 0.9375rem 0;}
    .content .slogan strong {font-size: 1.5rem;}
    .content .slogan p{font-size: 1.1rem;}
    .content .txt{padding:0;}
    .content h1{font-size: 2.5rem;}
    .content h1 + p{font-size: 1.6rem; padding-top:1rem;}
    .content h1 + p span{display:block;}
    /*.content h1 span{display: block;}*/
    .content .desc{padding: 1rem; border-radius:.3rem;}
    .content .desc p{font-size: 1.1rem;}
    .content .desc p:last-child{border-bottom: 0}
    .content .date span{display: block}
    .content .desc img {max-width: 8.125rem;}
    
    /* .btn_area{width: 100%; flex-wrap: wrap; gap: 0;}
    .link-group{flex-wrap: wrap; width: 100%;}
    .link-group a{width: 100%; margin: 5px 0; padding: 1.5rem;flex-wrap: nowrap; justify-content: center;}
    .link-group a b{width: auto;}
    .link-group a span{font-size: 1.3rem; width: auto; padding-left: 8px; font-weight: 600; } */

}
@media screen and (max-width: 565px){

}