@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;}


body{width: 100vw; height: 100vh; background-color: #ebf1f4; position: relative;min-height: 800px;}
.container{width: 80%; display: flex; justify-content: space-between; align-items: center;
     position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); word-break: keep-all; text-align: center;}

/* 타이틀 */
.container .intro_txt h2{width: fit-content; font-size: 70px; color: #171717; text-align: left; font-family: 'GmarketSans'; letter-spacing: -1.7px; margin: 0 auto;}
.container .intro_txt h2 span{display: block; color: #5d6974; font-size: 55px; font-weight: 500;}
.container .intro_txt p{margin-top: 30px;  font-family: 'GmarketSans'; letter-spacing: -0.2px;}

/* contents */
.linkList li .box{display: block; position: relative; width:500px; height: 220px; padding: 0 50px; border-radius: 20px; box-shadow: 2px 3px 7px rgba(0, 5, 70, 0.1); transition: all .3s;}
.linkList li .box .box_cont{height: 100%; display: flex; align-items: center; justify-content: space-between;}
.linkList li .box img{width: 70px;height: auto; margin: 0; transition: all .2s;}
.linkList li .box_01{background: linear-gradient(340deg, #7590bf, #86a3d5); margin-bottom: 40px;}
.linkList li .box_02{background: linear-gradient(340deg, #507bcd, #789fe9);}
.linkList li .box .titleTxt{width: 50%; text-align: left; font-size: 28px; font-family: 'jalnan'; color: #fff; transition: all .3s;}
.linkList li .box .titleTxt p{line-height: 37px;}
.linkList li .box .titleTxt span{font-size: 20px;}
.linkList li .box .arrow{width: 55px; height: 55px; line-height: 50px; font-size: 27PX; 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: 25px;}
/* hover 시 효과 */
.linkList li .box:hover{box-shadow: 3px 5px 10px rgba(110, 113, 143, 0.4);}
.linkList li .box:hover .arrow img{transform: translateX(5px); transition: all .3s;}
.bt_logo{width: 220px; position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);}


/* 반응형 */
@media (max-width:1440px){
    .container{width: 100%;}
}
@media (max-width:980px) {

    /* 타이틀 */
    .container {display: block; top: 43%;}
    .container .intro_txt h2{font-size: 50px;}
    .container .intro_txt h2 span{display: block; font-size: 50px;}
    .container .intro_txt h2 br{display: none;}
    .container .intro_txt p { font-size: 20px; margin: 25px 0 50px;}
   
    /* .linkList */
    .linkList{display: flex; justify-content: center; align-items: center;}
    .linkList li .box{width: 270px; height: 310px; padding: 35px 0;}
    .linkList li .box .box_cont{display: block;}
    .linkList li .box_01{margin-bottom: 0;}
    .linkList li .box img{width: 65px;}
    .linkList li:first-child{margin-right: 60px;}
    .linkList li .box .titleTxt{font-size:22px; width: fit-content;}
    .linkList li .box .titleTxt_02{margin: 40px auto;}
    .linkList li .box .titleTxt_01{margin: 30px auto;}
    .linkList li .box .titleTxt span {font-size: 22px;}
    .linkList li .box .titleTxt p {line-height:30px}
    .linkList li .box .arrow{position: absolute; bottom: 30px; left: 40px;}    
    
    .bt_logo {width: 180px;}

}

@media (max-width:640px) {

    /* 타이틀 */
    .container .intro_txt h2, .container .intro_txt h2 span{font-size: 38px;}
    .container .intro_txt p{font-size: 17px; margin: 25px auto 35px;}    
    
    /* linkList */
    .linkList{display: block;}
    .linkList li:first-child{margin-right: 0; margin-bottom: 30px;}
    .linkList li .box{width: 80%; height: 180px; padding: 0 40px;}
    .linkList li .box .box_cont{display: flex; align-items: center; justify-content: space-between;}
    .linkList li .box .titleTxt{width: 50%; margin: 0; line-height: 30px;}
    .linkList li .box .arrow{position: static;}
    

}

@media (max-width:480px){
    
    .container {width: 100%;}

    /* 타이틀 */
    .container .intro_txt p{width: 85%; font-size: 14px; margin: 20px auto 30px;}
    .container .intro_txt h2, .container .intro_txt h2 span{font-size: 32px;}
    .container .intro_txt h2{width: 85%;}

    /* linkList */
    .linkList li .box {width: 85%; height: 140px; padding: 0 25px;}
    .linkList li .box .titleTxt p{font-size: 20px; line-height:27px;}
    .linkList li .box .titleTxt span {font-size: 20px;}
    .linkList li .box .box_cont>img{display: none;}
}