@charset "utf-8";

/* 폰트 */
/* G마켓 산스 */
@font-face{
    font-family: 'GmarketSans';
    src: url("/intro/font/GmarketSansMedium.otf") format('woff');
    font-weight: 500;
}
@font-face{
    font-family: 'GmarketSans';
    src: url("/intro/font/GmarketSansBold.otf") format('woff');
    font-weight: 700;
}

/* 잘난체 */
@font-face{
    font-family: 'jalnan';
    src: url("/intro/font/Jalnan.ttf") format('woff');
    font-weight: 400;
}

/* 공통 */
*{margin: 0 auto; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; vertical-align: middle;}
ul, li{list-style: none; margin: 0;}

/* wrap */
.wrap{width: 100%; height: 100%; background-color: #ebf1f4; position: relative;}
.container{padding: 75px 0; text-align: center;}

/* 타이틀 */
.container .intro_txt h2{width: fit-content; font-size: 45px; color: #171717; text-align: left; font-family: 'GmarketSans'; letter-spacing: -2.7px;}
.container .intro_txt h2 span{color: #5d6974; font-size: 45px; font-weight: 500;}

/* contents */
.linkList{margin-top: 30px;}
.linkList li .box{padding-top: 30px; border-radius: 15px; width: 45%;  background-color: #fff; box-shadow: 2px 3px 7px rgba(0, 5, 70, 0.1); text-align: center;}
.linkList li .box .period{font-family: 'GmarketSans'; color: #333; letter-spacing: -0.5px;}
.linkList li .box .period_02{display: none;}
.linkList li .box .alert{color: #1660eb; line-height: 135%; letter-spacing: -1.5px; font-weight: 500; margin-top: 10px; font-size: 15px; word-break: keep-all;}
.linkList li .box_01{ margin-bottom: 20px;height: 220px;}
.linkList li .box_02{height: 300px;}

.linkList li .box .titleTxt{font-size: 30px; font-family: 'GmarketSans'; color: #373737; font-weight: 700;margin-bottom: 15px;}
/* .linkList li .box_01 .titleTxt{margin-bottom: 15px;}
.linkList li .box_02 .titleTxt{margin-bottom: 35px;} */
.linkList li .box_link{display: flex; align-items: center; width:320px; height: 70px; padding: 0 40px; border-radius: 15px; font-size: 22px; color: #fff; font-family: 'GmarketSans';margin-bottom: 20px;}
.linkList li .link_01{background-color: #6d93db; }
.linkList li .link_02{background-color: #5474cd; }
.linkList li .box .arrow{width: 40px; height: 40px; line-height: 42px; margin: 0; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5);; text-align: center; color: #557cc4; transition: all .3s;}
.linkList li .box .arrow img{width: 20px;}
.page{width: 45%; height: 85px;line-height: 90px; background-color: #1d4bae; border-radius: 15px; margin-top: 20px; box-shadow: 2px 3px 7px rgba(0, 5, 70, 0.1); transition: all .3s; text-align: center;}
.page p{font-size: 22px; color: #fff; font-family: 'GmarketSans';}

.bt_logo{width: 200px; margin: 55px auto 0;}

/* hover 시 효과 */
.linkList li .box_link:hover .arrow img{transform: translateX(4px); transition: all .3s;}
.page:hover{opacity: .8;}


/* 반응형 */
@media (max-width:1200px){
    .linkList li .box{width: 50%;}
    .page{width: 50%;}
    .container .intro_txt h2{font-size: 45px;}
    .container .intro_txt h2 span{font-size: 42px;}
}

@media (max-width:1024px) {

    /* 타이틀 */
    .container .intro_txt h2{font-size: 45px;}
    .container .intro_txt h2 span{font-size: 42px;}
   
    /* .linkList */
    .linkList li .box .titleTxt{font-size:26px;}
    .linkList li .box { width: 65%; }
    .linkList li .box_01{height: 210px;}
    .linkList li .box_02{padding-top: 40px;}
    .linkList li .box_link{width: 270px; height: 70px; font-size: 22px; padding: 0 25px;}
    .linkList li .box .period{font-size: 14px;}

    .page{width: 65%;}
    .bt_logo {width: 180px;}

}


@media (max-width:680px) {

    .container{padding: 80px 0;}
    /* 타이틀 */
    .container .intro_txt h2 span{display: block; font-size: 34px;}

    /* .linkList */
    .linkList{display: block;}
    .linkList li .box{width: 80%; height: auto; padding: 30px 0 20px; margin: 0 auto 20px;}
    .linkList li .box .titleTxt{margin-bottom: 20px;}
    .linkList li .box_link{padding: 0 20px; margin-bottom: 20px;height: 60px; font-size: 20px;}
    .linkList li .box .period_01{display: none;}
    .linkList li .box .period_02{display: block;}
    .linkList li .box .alert{font-size: 14px;}

    .page{width: 80%;    height: 60px;
    line-height: 65px;}
    .page p{font-size: 18px;}
    .bt_logo{margin: 70px auto 0;}

}

@media (max-width:480px){
    /* .wrap{width: 100vw; height: 100%;}
.container{padding: 100px 0;} */

    /* 타이틀 */
    .container .intro_txt h2, .container .intro_txt h2 span{font-size: 35px;}

    /* linkList */
    .linkList li .box, .page{width: 90%;}
    .linkList li .box .titleTxt{font-size: 20px;}
    .arrow {width: 32px; height: 32px; line-height: 33px;}

    .page p{font-size: 15px;}

}