@charset "UTF-8";

/* 비디오 영역 */
#videoWrap{position: relative; height: 0; padding-top: 35.5%; overflow: hidden;}
#videoWrap video{position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}

@media (max-width: 1199px){

  #videoWrap{padding-top: 55%;}

}

@media (max-width: 767px){

  #videoWrap{padding-top: 70.5%;}

}

@media (max-width: 576px){

  #videoWrap{padding-top: 80.5%;}

}

@media (max-width: 480px){

  #videoWrap{padding-top: 95%;}

}

/* 기업소개 영역 */
#introduceWrap{padding: 130px 0 80px;}
#introduceWrap .titleBox strong{margin-bottom:15px; font-size: 30px; line-height: 1;}
#introduceWrap .titleBox .title{font-size: 32px; line-height: 1; }
#introduceWrap .titleBox{margin-bottom: 100px;}
#introduceWrap .videoBox{position: relative;padding-top: 60%; border-radius: 20px; overflow: hidden;}
#introduceWrap .videoBox iframe{position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;}

@media (max-width: 1024px){

  #introduceWrap{padding: 130px 0 60px;}

}

@media (max-width: 767px){

  #introduceWrap .videoBox{border-radius: 10px;}
  #introduceWrap{padding: 110px 0 30px;}

}

@media (max-width: 480px){

  #introduceWrap{padding: 90px 0 0;}
  #introduceWrap .titleBox{margin-bottom: 65px;}
  #introduceWrap .titleBox strong{font-size: 24px;}
  #introduceWrap .titleBox .title{font-size: 28px;}

}

@media (max-width: 414px){

  #introduceWrap{padding: 70px 0 0;}
  #introduceWrap .titleBox{margin-bottom: 45px;}
  #introduceWrap .titleBox strong{margin-bottom: 12px; font-size: 20px;}
  #introduceWrap .titleBox .title{font-size: 22px;}

}

@media (max-width: 360px) {
  
  #introduceWrap .videoBox{padding-top: 76%;}

}



/* 금융상품 보러가기 영역 */
#productWrap01{padding: 150px 0 85px;}
#productWrap01 .productBox{display: flex; justify-content: center; gap: 0 85px;}
#productWrap01 .imgBox img{display: block; width: 100%;}
#productWrap01 .textBox{ display: flex; flex-direction: column; justify-content: space-between;}
#productWrap01 .textBox .text01{ font-size: 45px; font-weight: 700; color: #000;}
#productWrap01 .textBox .text01 span{margin-top: -5px; display: inline-block; width: 65px; height: 34px; line-height: 34px; border-radius: 50px; background-color: #FFB200; font-size: 20px; font-weight: 600; color: #fff; text-align: center; vertical-align: middle;}
#productWrap01 .textBox .text02{font-size: 35px; font-weight: 700; color: #000;}

@media (max-width: 1199px){

  #productWrap01 .textBox .text01{font-size: 40px;}
  #productWrap01 .textBox .text02{font-size: 30px;}
  #productWrap01 .textBox .view{font-size: 22px;}

}

@media (max-width: 1024px){

  #productWrap01 .productBox{gap: 0 60px;}
  #productWrap01 .textBox .text01 span{width: 55px; height: 28px; line-height: 28px; font-size: 16px;}
  #productWrap01 .textBox .text01{font-size: 34px;}
  #productWrap01 .textBox .text02{font-size: 26px;}
  #productWrap01 .textBox .view{height: 60px; line-height: 60px; font-size: 18px; border-radius: 10px;}

}

@media (max-width: 860px){

  #productWrap01 .textBox .text01{font-size: 30px;}
  #productWrap01 .textBox .text02{font-size: 22px;}
  #productWrap01 .textBox .view{height: 60px; line-height: 60px; font-size: 18px; border-radius: 10px;}

}

@media (max-width: 767px){

  #productWrap01{padding: 100px 0 85px;}
  #productWrap01 .productBox .imgBox{display: none;}
  #productWrap01 .textBox{position: relative; padding: 30px 20px; width: 100%; height: 500px; background: url(../images/main/Illustration01.png)no-repeat center; background-size: cover; border-radius: 20px; overflow: hidden; z-index: 1;}
  #productWrap01 .textBox::after{content: ''; position: absolute; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,.05); z-index: -1;}
  #productWrap01 .textBox .text01{margin-bottom: 24px; font-size: 26px; color: #fff;}
  #productWrap01 .textBox .text02{font-size: 18px; color: #fff;}
  #productWrap01 .textBox .view{margin-top: auto; height: 50px; line-height: 50px; font-size: 16px;}

}

@media (max-width: 480px){

  #productWrap01 .textBox{height: 400px;}
  #productWrap01 .textBox .text01 span{width: 50px; height: 25px; line-height: 25px; font-size: 14px;}
}

@media (max-width: 414px){

  #productWrap01{padding: 80px 0 60px;}
  #productWrap01 .textBox{height: 360px; border-radius: 15px;}
  #productWrap01 .textBox .text01{margin-bottom: 24px; font-size: 22px; color: #fff;}
  #productWrap01 .textBox .text02{font-size: 16px; color: #fff;}
  #productWrap01 .textBox .view{height: 45px; line-height: 45px; border-radius: 7px;}

}

@media (max-width: 320px){

  #productWrap01{padding: 60px 0;}

}

/* 이벤트영역 */
#eventWrap{padding: 0 0 75px;}
#eventWrap .eventList{width: 1200px; margin-bottom: 40px; display: flex; gap: 0 32px;}
#eventWrap .eventListBox{margin-bottom: 45px; overflow-x: auto; overflow-y: hidden;}
#eventWrap .eventListBox::-webkit-scrollbar{height: 3px;}
#eventWrap .eventListBox::-webkit-scrollbar-thumb{background-color: #FFB200; border-radius: 5px;}
#eventWrap .eventListBox::-webkit-scrollbar-track{background-color: #F6F6F6; border-radius: 5px;}
#eventWrap .eventList li{ width: 378px; flex-shrink: 0; min-width: 0;}
#eventWrap .eventList li a{display: block;}
#eventWrap .eventList li a .iconBox{margin-bottom: 26px; display: flex; align-items: center; justify-content: center; height: 215px; border-radius: 20px; background-color: #F6F6F6; border-radius: 15px; overflow: hidden;} 
#eventWrap .eventList li a .iconBox img{display: block; width: 100%; height: 100%; object-fit: cover; transition: all .3s;}
#eventWrap .eventList li a h3{ margin-bottom: 10px; font-size: 20px; color: #000; font-weight: 700; transition: all .3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#eventWrap .eventList li a .date{display: block; font-size: 18px; font-weight: 600; color: #A6A6A6;}
#eventWrap .eventList li a:hover h3{color: #FFB200;}
#eventWrap .eventList li a:hover img{transform: scale(1.1);}

@media (max-width: 1199px){

   #eventWrap .eventList{gap: 0 20px;}

}

@media (max-width: 1024px){

  #eventWrap .eventList{width: 1024px;}
  #eventWrap .eventList li a .iconBox{margin-bottom: 18px; border-radius: 15px;}
  #eventWrap .eventList li a h3{margin-bottom: 5px; font-size: 18px;}
  #eventWrap .eventList li a .date{font-size: 16px;}

}

@media (max-width: 767px){

  #eventWrap .eventList{width: 767px; gap: 0 15px;}
  #eventWrap .eventList li{width: 350px;}
  #eventWrap .eventList li a .iconBox{border-radius: 10px;}

}

@media (max-width: 480px){

  #eventWrap .eventList li{width: 300px;}
  #eventWrap .eventList li a .iconBox{height: 190px;}

}

@media (max-width: 414px){

  #eventWrap{padding: 0 0 60px;}
  #eventWrap .eventList li{width: 260px;}
  #eventWrap .eventList li a .iconBox{height: 160px;}

}

/* 서비스소개, 사업현황 영역 */
#serviceWrap{padding: 0 0 110px;}
#serviceWrap .list{display: flex; gap: 0 32px;}
#serviceWrap .list li{flex: 1;}
#serviceWrap .list li a{position: relative; height: 374px; padding: 35px 20px 20px 48px; display: block; background-color: #FFB200; border-radius: 20px;}
#serviceWrap .list li a::after{content: ''; position: absolute; background-size: contain!important;}
#serviceWrap .list li:nth-child(1) a::after{width: 432px; height: 178px; bottom: 20px; left: 50%; transform: translateX(-50%); background: url(../images/main/icon02.svg)no-repeat center;}
#serviceWrap .list li:nth-child(2) a::after{width: 177px; height: 177px; bottom: 32px; right: 46px; background: url(../images/main/icon01.svg)no-repeat center;}
#serviceWrap .list li a h3{margin-bottom: 5px; color: #fff; font-size: 30px; font-weight: 700;}
#serviceWrap .list li a p{color: #fff; font-size: 22px; font-weight: 700;}

@media (max-width: 1199px){

  #serviceWrap .list li a h3{font-size: 25px;}
  #serviceWrap .list li a p{font-size: 18px;}

}

@media (max-width: 1024px){

  #serviceWrap .list{gap: 0 25px;}
  #serviceWrap .list li a{padding: 30px 20px 20px 40px;}

}

@media (max-width: 767px){

  #serviceWrap .list{flex-direction: column; gap: 20px 0;}
  #serviceWrap .list li a{height: 302px; padding: 25px 20px 20px 35px; border-radius: 15px;}
  #serviceWrap .list li:nth-child(1) a::after{width: 358px; height: 141px;}
  #serviceWrap .list li:nth-child(2) a::after{width: 158px; height: 158px; right: auto; left: 50%; transform: translateX(-50%); bottom: 10px;}

}

@media (max-width: 480px){

  #serviceWrap .list li a{padding: 25px 20px; height: 270px;}
  #serviceWrap .list li a h3{font-size: 22px;}
  #serviceWrap .list li a p{font-size: 16px;}
  #serviceWrap .list li:nth-child(1) a::after{width: 280px; height: 120px; bottom: 15px;}
  #serviceWrap .list li:nth-child(2) a::after{width: 130px; height: 130px;}

}

@media (max-width: 414px){

  #serviceWrap{padding: 0 0 90px;}

}

@media (max-width: 320px){

  #serviceWrap .list li a h3{font-size: 18px;}
  #serviceWrap .list li a p{font-size: 14px;}

}

/* 더골드 사용자 영역 */
#userWrap{padding: 230px 0 128px; background-color: #F6F6F6;}
#userWrap .titleBox{margin-bottom: 110px;}
#userWrap .titleBox br{display: none;}
#userWrap .titleBox strong{position: relative;}
#userWrap .titleBox strong::before{content: ''; width: 94px; height: 94px; position: absolute; top:-98px; left: 50%; transform: translateX(-50%); background: url(../images/main/icon04.svg)no-repeat center; background-size: contain;}
#userWrap .list{display: flex; gap: 0 32px;}
#userWrap .list li{display: flex; align-items: center; flex-direction: column; justify-content: space-between; padding: 58px 20px 48px; flex: 1; height: 300px; background-color: #fff; border-radius: 20px; text-align: center;}
#userWrap .list li .text01{gap: 0 15px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 20px; color: #454C57; font-weight: 700;}
#userWrap .list li .text01::before{content: ''; background-size: contain!important;}
#userWrap .list li:nth-child(1) .text01::before{width: 30px; height: 30px; background: url(../images/main/icon05.svg)no-repeat center;}
#userWrap .list li:nth-child(2) .text01::before{width: 32px; height: 33px; background: url(../images/main/icon06.svg)no-repeat center;}
#userWrap .list li:nth-child(3) .text01::before{width: 33px; height: 31px; background: url(../images/main/icon07.svg)no-repeat center;}
#userWrap .list li strong{display: block; font-size: 45px; font-weight: 700;}
/* #userWrap .list li strong .gradientText{position: relative;}
#userWrap .list li strong .gradientText::before{content: ''; height: 5px; position: absolute; left:0; right:0; bottom: 0; background: linear-gradient(to right, #F8B519, #F89419);} */
#userWrap .list li strong .text02{font-size: 45px; font-weight: 700; color: #000; -webkit-text-fill-color: #000;}
#userWrap .list li .infoBox{display: flex; justify-content: center; align-items: center; gap: 0 30px;}
#userWrap .list li .infoBox span,
#userWrap .list li .infoBox em{font-size: 18px; font-weight: 700; color: #454C57;}#userWrap .list li .infoBox em{display: flex; align-items: center; gap: 0 8px;}
#userWrap .list li .infoBox em::before{content: ''; width: 14px; height: 17px; background: url(../images/main/icon08.svg)no-repeat center;}

@media (max-width: 1199px){

  #userWrap .titleBox strong::before{width: 85px; height: 85px; top: -90px;}
  #userWrap .list li strong .text02,
  #userWrap .list li strong{font-size: 40px;}

}

@media (max-width: 1024px){

  #userWrap{padding: 166px 0 120px;}
  #userWrap .titleBox{margin-bottom: 84px;}
  #userWrap .titleBox strong::before{width: 75px; height: 75px; top: -80px;}

  #userWrap .list li .text01{font-size: 18px;}
  #userWrap .list li strong .text02,
  #userWrap .list li strong{font-size: 35px;}
  #userWrap .list li:nth-child(3) .text01::before,
  #userWrap .list li:nth-child(2) .text01::before,
  #userWrap .list li:nth-child(1) .text01::before{width: 27px; height: 27px;}

}

@media (max-width: 890px){

  #userWrap .list li{width: 100%; gap: 30px 0; border-radius: 15px;}
  #userWrap .list{flex-direction: column; gap: 20px 0;}

}

@media (max-width: 767px){

  #userWrap{padding: 140px 0 120px;}
  #userWrap .titleBox{margin-bottom: 75px;}
  #userWrap .titleBox br{display: block;}
  #userWrap .titleBox strong::before{width: 65px; height: 65px; top: -65px;}

  #userWrap .list li strong .text02,
  #userWrap .list li strong{font-size: 30px;}
  #userWrap .list li strong .gradientText::before{height: 3px;}

}

@media (max-width: 480px){

  #userWrap{padding: 120px 0 80px;}
  #userWrap .titleBox{margin-bottom: 58px;}
  #userWrap .titleBox strong::before{width: 55px; height: 55px; top: -55px;} 
  
  #userWrap .list li{padding: 45px 20px;}
  #userWrap .list li .text01{font-size: 16px;}
  #userWrap .list li strong .text02,
  #userWrap .list li strong{font-size: 30px;}
  #userWrap .list li .infoBox span, #userWrap .list li .infoBox em{font-size: 16px;}

}

@media (max-width: 414px){

  #userWrap{padding: 100px 0;}
  #userWrap .titleBox{margin-bottom: 55px;}
  #userWrap .titleBox strong::before{width: 45px; height: 45px; top: -45px;}  

}

@media (max-width: 360px){

  #userWrap{padding: 100px 0 80px;}
  #userWrap .titleBox strong::before{width: 35px; height: 35px; top: -35px;}  

}

@media (max-width: 320px){

  #userWrap{padding: 70px 0;}
  #userWrap .titleBox{margin-bottom: 40px;}
  #userWrap .titleBox strong::before{width: 25px; height: 25px; top: -30px;}  
  #userWrap .list li .text01{font-size: 14px; gap: 0 10px;}
  #userWrap .list li:nth-child(3) .text01::before,
  #userWrap .list li:nth-child(2) .text01::before,
  #userWrap .list li:nth-child(1) .text01::before{width: 22px; height: 22px;}
  #userWrap .list li .infoBox span, #userWrap .list li .infoBox em{font-size: 14px;}
  #userWrap .list li{padding: 32px 20px;}
  #userWrap .list li strong .text02, #userWrap .list li strong{font-size: 28px;}

}

/* 후기 비디오 영역 */
#reviewVideoWrap{padding: 150px 0 80px}
#reviewVideoWrap .titleBox{margin-bottom: 110px;}
#reviewVideoWrap .reviewVideoList .box{flex: none; width: 379px; margin: 0 15px;}
#reviewVideoWrap .reviewVideoList .box a{display: block;}
#reviewVideoWrap .reviewVideoList .box .imgBox{margin-bottom: 25px; display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 10px rgba(0, 0, 0, .15);}
#reviewVideoWrap .reviewVideoList .box .imgBox img{display: block; width: 100%; height: 100%; object-fit: cover; transition: all 1s;}
#reviewVideoWrap .reviewVideoList .box p{font-size: 20px; color: #000; font-weight: 700;}
#reviewVideoWrap .reviewVideoList .box a:hover img{transform: scale(1.3);}
#reviewVideoWrap .reviewVideoList .box a:hover p{text-decoration: underline;}
#reviewVideoWrap .slick-dots{margin-top: 100px; display: flex!important; flex-wrap: wrap; gap: 0 20px; align-items: center; justify-content: center;}
#reviewVideoWrap .slick-dots li.slick-active button{width: 50px; background: #000;}
#reviewVideoWrap .slick-dots li button{width: 20px; height: 15px; text-indent: -9999px; border-radius: 50px; background-color:#EAEAEA; cursor: pointer;}
#reviewVideoWrap .reviewVideoListBox{position: relative;}
#reviewVideoWrap .control button{position: absolute; top: 85px; width: 20px; height: 38px;}
#reviewVideoWrap .control .prev{left:-65px;  background: url(../images/main/arrow_icon03.svg)no-repeat center; transform: rotate(-180deg);}
#reviewVideoWrap .control .next{right:-65px;  background: url(../images/main/arrow_icon03.svg)no-repeat center;}

@media (max-width: 1199px){

#reviewVideoWrap .control{display: none;}

}

@media (max-width: 1024px){

  #reviewVideoWrap{padding: 100px 0 0;}
  #reviewVideoWrap .titleBox{margin-bottom: 80px;}
  /* #reviewVideoWrap .slick-dots{margin-top: 60px; gap: 0 10px;} */
  #reviewVideoWrap .slick-dots{display: none!important;}
  #reviewVideoWrap .slick-dots li button{width: 18px;}
  #reviewVideoWrap .slick-dots li.slick-active button{width: 40px;}
  #reviewVideoWrap .reviewVideoList .box p{font-size: 18px;}

}

@media (max-width: 767px){

  #reviewVideoWrap .reviewVideoList .box{width: 332px;}
  #reviewVideoWrap .reviewVideoList .box p{font-size: 16px;}
  /* #reviewVideoWrap .slick-dots li button{height: 13px;}
  #reviewVideoWrap .slick-dots li.slick-active button{width: 30px;} */
  
}

@media (max-width: 480px){

  #reviewVideoWrap{padding: 80px 0 0;}
  #reviewVideoWrap .titleBox{margin-bottom: 60px;}
  #reviewVideoWrap .reviewVideoList .box{width: 250px; margin: 0 10px;}
  /* #reviewVideoWrap .slick-dots{margin-top: 30px;} */

}

@media (max-width: 414px){

  #reviewVideoWrap{padding: 60px 0 0;}
  #reviewVideoWrap .titleBox{margin-bottom: 50px;}
  #reviewVideoWrap .reviewVideoList .box p{text-align: center;}
  #reviewVideoWrap .reviewVideoList .box{width: 150px; margin: 0;}
  #reviewVideoWrap .reviewVideoList .box .imgBox{margin-bottom: 25px; border-radius: 5px;}
  /* #reviewVideoWrap .slick-dots li button{width: 15px; height: 8px;} */

}

@media (max-width: 320px){

  #reviewVideoWrap{padding: 50px 0 0;}
  #reviewVideoWrap .titleBox{margin-bottom: 40px;}

}

/* 후기 영역 */
#reviewWrap{padding: 110px 0;}
#reviewWrap .titleBox{margin-bottom: 80px;}
#reviewWrap .reviewList .box{display: flex; gap: 0 36px; align-items: center;}
#reviewWrap .reviewList .box .imgBox{flex-shrink: 0;}
#reviewWrap .reviewList .box .imgBox img{display: block; margin-bottom: 26px;}
#reviewWrap .reviewList .box .imgBox .name{display: block; font-size: 23px; color: #000; font-weight: 700; text-align: center;}
#reviewWrap .reviewList .box .textBox{padding: 23px 26px; width: 265px; height: 265px; background-color: #FBFBFB; border-radius: 20px; }
#reviewWrap .reviewList .box .textBox span{padding: 3px 11px; margin-bottom: 18px; display: inline-block; background-color: #FFB200; color: #fff; border-radius: 10px; font-size: 18px; font-weight: 700;}
#reviewWrap .reviewList .box .textBox p{font-size: 18px; font-weight: 600; color: #848484; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
#reviewWrap .slide{margin-right: 36px;}

@media (max-width: 1199px){

  #reviewWrap .reviewList{padding-left: 20px;}
   
}

@media (max-width: 1024px){

  #reviewWrap .reviewList .box{gap: 0 25px;}
  #reviewWrap .reviewList .box .imgBox img{margin-bottom: 22px;}
  #reviewWrap .reviewList .box .imgBox .name{font-size: 18px;}
  #reviewWrap .reviewList .box .textBox span{font-size: 16px; border-radius: 5px;}

}

@media (max-width: 767px){

  #reviewWrap .titleBox{margin-bottom: 50px;}
  #reviewWrap .reviewList .box{gap: 0 25px;}
  #reviewWrap .reviewList .box .imgBox img{margin-bottom: 22px;}
  #reviewWrap .reviewList .box .imgBox .name{font-size: 18px;}
  #reviewWrap .reviewList .box .textBox span{font-size: 16px; border-radius: 5px;}

}

@media (max-width: 480px){

  #reviewWrap{padding: 80px 0;}
  #reviewWrap .slide{width: 265px; margin-right: 25px;}
  #reviewWrap .reviewList .box .imgBox img{margin-bottom: 15px;}
  #reviewWrap .reviewList .box{flex-direction: column; gap: 16px 0;}
  #reviewWrap .reviewList .box .textBox{height: auto;  padding: 23px 26px 35px; border-radius: 10px;}
  #reviewWrap .reviewList .box .textBox p{font-size: 16px;}
  #reviewWrap .reviewList .box .imgBox .name{font-size: 16px;}

}

@media (max-width: 360px){

  #reviewWrap{padding: 70px 0 60px;}
  #reviewWrap .reviewList .box .textBox p,
  #reviewWrap .reviewList .box .textBox span{font-size: 14px;}
  #reviewWrap .titleBox{margin-bottom: 35px;}
  #reviewWrap .reviewList .box .imgBox .name{font-size: 14px;}

}

@media (max-width: 320px){

  #reviewWrap{padding: 60px 0;}

}

/* 언론보도 영역 */
#pressReleaseWrap{padding: 50px 0 0;}
#pressReleaseWrap h3{margin-bottom: 50px; color: #000; font-size: 45px; font-weight: 700;}
#pressReleaseWrap .pressReleaseList li{border-bottom: 1px solid #EAEAEA;}
#pressReleaseWrap .pressReleaseList li a{display: block; position: relative; padding: 29px 90px 29px 0;}
#pressReleaseWrap .pressReleaseList li a:hover h4{text-decoration: underline;}
#pressReleaseWrap .pressReleaseList li a .textBox h4{margin-bottom: 7px; font-size: 20px; font-weight: 700; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#pressReleaseWrap .pressReleaseList li a .textBox .date{font-size: 18px; color: #A6A6A6; font-weight: 600;}
#pressReleaseWrap .pressReleaseList li a .imgBox{position: absolute; top: 50%; transform: translateY(-50%); right:0;}
#pressReleaseWrap .pressReleaseList li a .imgBox img{display: block;}
#pressReleaseWrap .pressReleaseBox{position: relative;}
#pressReleaseWrap .pressReleaseBox .more{position: absolute; top:77px; right:0; font-size: 18px; font-weight: 600; color: #A6A6A6;}
#pressReleaseWrap .pressReleaseBox .more:hover{color: #000;}

@media (max-width: 1199px){

  #pressReleaseWrap{padding: 20px 0 0;}

}

@media (max-width: 1024px){

  #pressReleaseWrap h3{font-size: 32px; text-align: center;}
  #pressReleaseWrap .pressReleaseBox .more{top: 68px; font-size: 16px;}
  #pressReleaseWrap .pressReleaseList li a .textBox h4{font-size: 18px;}
  #pressReleaseWrap .pressReleaseList li a .textBox .date{font-size: 16px;}

}

@media (max-width: 767px){

  #pressReleaseWrap h3{font-size: 26px;}
  #pressReleaseWrap .pressReleaseList li a .imgBox img{width: 50px;}

}

@media (max-width: 414px){

  #pressReleaseWrap .pressReleaseBox .more{top: 68px; font-size: 14px;}
  #pressReleaseWrap .pressReleaseList li a{padding: 25px 90px 25px 0;}
  #pressReleaseWrap .pressReleaseList li a .textBox h4{font-size: 16px;}
  #pressReleaseWrap .pressReleaseList li a .textBox .date{font-size: 14px;}

}

/* 슬라이드 영역 */
#slideWrap{padding: 150px 0 70px; max-width: 990px; margin: 0 auto; overflow: hidden;}
#slideWrap .slick-list{overflow: visible;}
#slideWrap .slide{width: 330px;}
#slideWrap .slide.slick-current .imgBox{transform: scale(1.6); transition: all 1s;}
#slideWrap .slide.slick-current .textBox{width: 100%; display: block;}
#slideWrap .box {display: block;}
#slideWrap .box .imgBox{margin-bottom: 90px; border-radius: 20px; overflow: hidden;}
#slideWrap .box .imgBox img{display: block; width: 100%; height: 100%; object-fit: cover;}
#slideWrap .box .textBox{display: none;}
#slideWrap .box h3{min-height: 100px; margin-bottom: 15px; text-align: center; color: #000; font-size: 20px; font-weight: 700; word-break: keep-all;}
#slideWrap .box span{display: block; text-align: center; font-size: 18px; font-weight: 600; color: #A6A6A6;}
#slideWrap .slick-dots{margin-top: 40px; display: flex!important; gap: 0 20px; align-items: center; justify-content: center;}
#slideWrap .slick-dots li.slick-active button{width: 50px; background: #000;}
#slideWrap .slick-dots li button{width: 20px; height: 15px; text-indent: -9999px; border-radius: 50px; background-color:#EAEAEA; cursor: pointer;}

@media (max-width: 1024px){


  #slideWrap{padding: 150px 0 100px;}
  #slideWrap .box h3{font-size: 20px;}
  #slideWrap .slick-dots{display: none!important; gap: 0 15px;}
  #slideWrap .slick-dots li button{width: 18px;}
  #slideWrap .slick-dots li.slick-active button{width: 40px;}

}

@media (max-width: 767px){

  #slideWrap{padding: 150px 0 50px;}
  #slideWrap .box h3{font-size: 18px;}
  #slideWrap .slick-dots li button{height: 13px;}
  #slideWrap .slick-dots li.slick-active button{width: 30px;}
  #slideWrap .slide .imgBox{border-radius: 15px;}
  
}

@media (max-width: 576px){

  #slideWrap{padding: 80px 0 50px;}
  #slideWrap .box .imgBox{margin-bottom: 30px;}
  #slideWrap .box .textBox{display: block!important;}
  #slideWrap .slide{margin: 0 20px;}
  #slideWrap .slide.slick-current .imgBox{transform: none;}
  #slideWrap .slide .imgBox{border-radius: 10px;}

}

@media (max-width: 414px){

  #slideWrap .box .imgBox{margin-bottom: 22px;}
  #slideWrap .box h3{margin-bottom: 10px;}
  #slideWrap .box h3,
  #slideWrap .box span{font-size: 16px;}

}

@media (max-width: 320px){

  #slideWrap{padding: 50px 0 30px;}
  #slideWrap .box .imgBox{margin-bottom: 10px;}
  #slideWrap .box h3{margin-bottom: 5px;}
  #slideWrap .slide.slick-current .imgBox{margin-bottom: 25px;}

}

/* 자주묻는질문 영역 */
#questionWrap{padding: 0 0 80px;}
#questionWrap .questionListBox{padding-top: 34px; position: relative;}
#questionWrap h3{margin-bottom: 50px; color: #000; font-size: 45px; font-weight: 700;}
#questionWrap .questionList li{border-bottom: 1px solid #F1F1F1;}
#questionWrap .questionList li a{position: relative; padding: 30px 30px 30px 0; display: flex; align-items: center; gap: 0 40px;}
#questionWrap .questionList li a.active::after{transform: translateY(-50%) rotate(-180deg);}
#questionWrap .questionList li a::after{content: ''; width: 14px; height: 9px; position: absolute; top: 50%; transform: translateY(-50%); right:6px; background: url(../images/main/arrow_icon02.svg)no-repeat center; transition: all .3s;}
#questionWrap .questionList li a span{width: 50px; text-align: center; font-size: 30px; font-weight: 700; color: #DFDFDF;}
#questionWrap .questionList li a p{display: flex; align-items: center; gap: 0 15px; font-size: 25px; font-weight: 700; color: #232323;}
#questionWrap .questionList li a p::before{content: ''; width: 35px; height: 35px; background: url(../images/main/question_icon01.svg)no-repeat center; background-size: contain;}
#questionWrap .contentBox{display: none; padding-left: 90px;}
#questionWrap .contentBox p{display: flex; gap: 0 15px; padding: 0 0 30px;font-size: 18px; color: #565656;}
#questionWrap .contentBox p::before{content: ''; flex-shrink: 0; width: 35px; height: 35px; background: url(../images/main/icon16.svg)no-repeat center; background-size: contain;}
#questionWrap .more{position: absolute; top:0; right:0; font-size: 18px; font-weight: 600; color: #A6A6A6;}
#questionWrap .more:hover{color: #000;}

@media (max-width: 1024px){

  #questionWrap h3{font-size: 32px; text-align: center;}
  #questionWrap .more{font-size: 16px;}
  #questionWrap .questionList li a{gap: 0 20px;}
  #questionWrap .questionList li a span{font-size: 25px;}
  #questionWrap .questionList li a p{font-size: 20px;}
  #questionWrap .contentBox{padding-left: 70px;}

}

@media (max-width: 767px){

  #questionWrap h3{font-size: 26px;}
  #questionWrap .questionList li a{gap: 0 15px;}
  #questionWrap .questionList li a p{font-size: 18px;}
  #questionWrap .contentBox p{font-size: 16px;}

}

@media (max-width: 414px){

  #questionWrap{padding: 0 0 55px;}
  #questionWrap .questionListBox{padding-top: 22px;}
  #questionWrap .questionList li a{padding: 15px 30px 15px 0;}
  #questionWrap .questionList li a span{display: none;}
  #questionWrap .contentBox p,
  #questionWrap .questionList li a p{font-size: 14px;}
  #questionWrap .contentBox{padding: 0;}
  #questionWrap .more{font-size: 14px;}
  #questionWrap .contentBox p::before,
  #questionWrap .questionList li a p::before{width: 30px; height: 30px;}

}

/* 고객센터 영역 */
#infoListWrap{padding: 0 0 120px;}
#infoListWrap .list{display: flex; gap: 0 32px;}
#infoListWrap .list li{flex: 1;}
#infoListWrap .list li a{position: relative; height: 294px; padding: 30px 20px 20px 30px; display: block; border: 1px solid #EAEAEA; border-radius: 20px; transition: all .3s;}
#infoListWrap .list li a:hover{border:1px solid #FFB200;}
#infoListWrap .list li a span{display: block; margin-bottom: 15px; font-size: 18px; font-weight: 600; color: #A6A6A6;}
#infoListWrap .list li a h3{font-size: 24px; font-weight: 600; color: #000;}
#infoListWrap .list li a::after{content: ''; position: absolute; background-size: contain!important;}
#infoListWrap .list li:nth-child(1) a::after{width: 130px; height: 130px; right: 8px; bottom: 30px; background: url(../images/main/info_icon01.svg)no-repeat center;}
#infoListWrap .list li:nth-child(2) a::after{width: 130px; height: 130px; right: 19px; bottom: 36px; background: url(../images/main/info_icon02.svg)no-repeat center;}
#infoListWrap .list li:nth-child(3) a::after{width: 110px; height: 110px; right: 29px; bottom: 42px; background: url(../images/main/info_icon03.svg)no-repeat center;}
#infoListWrap .list li:nth-child(4) a::after{right: 29px; bottom: 42px; width: 110px; height: 110px; background: url(../images/main/info_icon04.svg)no-repeat center;}

@media (max-width: 1024px){

  #infoListWrap{padding: 0 0 80px;}
  #infoListWrap .list li a span{font-size: 16px;}
  #infoListWrap .list li a h3{font-size: 22px;}
  #infoListWrap .list{gap: 20px 2%; flex-wrap: wrap;}
  #infoListWrap .list li{width: 49%; flex: auto;}
  
}

@media (max-width: 767px){

  #infoListWrap{padding: 0 0 50px;}
  #infoListWrap .list{gap: 15px 2%;}
  #infoListWrap .list li a{padding: 20px; height: 205px;}
  #infoListWrap .list li a span{margin-bottom: 5px;}
  #infoListWrap .list li a h3{font-size: 20px;}
  #infoListWrap .list li:nth-child(1) a::after{bottom: 15px; width: 110px; height: 110px;}
  #infoListWrap .list li:nth-child(2) a::after{bottom: 15px; width: 110px; height: 110px;}
  #infoListWrap .list li:nth-child(3) a::after{right: 20px; bottom: 20px; width: 90px; height: 90px;}
  #infoListWrap .list li:nth-child(4) a::after{right: 20px; bottom: 20px; width: 90px; height: 90px;}

}

@media (max-width: 576px){

  #infoListWrap{padding: 0 0 40px;}
  #infoListWrap .list{gap: 10px 2%;}
  #infoListWrap .list li a{border-radius: 10px;}
  #infoListWrap .list li a span{font-size: 14px;}
  #infoListWrap .list li a h3{font-size: 18px;}
  #infoListWrap .list li:nth-child(1) a::after{width: 90px; height: 90px;}
  #infoListWrap .list li:nth-child(2) a::after{width: 90px; height: 90px;}
  #infoListWrap .list li:nth-child(3) a::after{width: 70px; height: 70px;}
  #infoListWrap .list li:nth-child(4) a::after{width: 70px; height: 70px;}

}

@media (max-width: 414px){

  #infoListWrap{padding: 0 0 20px;}
  #infoListWrap .list li a{padding: 10px 10px 15px; height: 140px;}
  #infoListWrap .list li a span{font-size: 12px; margin-bottom: 3px;}
  #infoListWrap .list li a h3{font-size: 14px;}
  #infoListWrap .list li:nth-child(1) a::after{right: 5px; bottom: 10px; width: 60px; height: 60px;}
  #infoListWrap .list li:nth-child(2) a::after{right: 5px; bottom: 5px; width: 70px; height: 70px;}
  #infoListWrap .list li:nth-child(3) a::after{bottom: 10px; right: 10px; width: 50px; height: 50px;}
  #infoListWrap .list li:nth-child(4) a::after{bottom: 10px; right: 10px; width: 50px; height: 50px;}

}

@media (max-width: 360px){

  #infoListWrap{padding: 0;}
  #infoListWrap .list{gap: 5px 2%;}

}

/* 금투자 안내 영역 */
#infoWrap01{padding: 110px 0 120px;}
#infoWrap01 .titleBox{margin-bottom: 91px;}
#infoWrap01 .list{display: flex; gap: 0 32px;}
#infoWrap01 .list li img{display: block; width: 100%;}

@media (max-width: 1024px){

  #infoWrap01{padding: 70px 0;}
  #infoWrap01 .list{display: flex; gap: 0 20px;}
  #infoWrap01 .titleBox{margin-bottom: 60px;}

}

@media (max-width: 767px){

  #infoWrap01 .list{display: flex; gap: 0 15px;}
  #infoWrap01 .titleBox{margin-bottom: 40px;}

}

@media (max-width: 576px){

  #infoWrap01 .list{flex-direction: column; gap: 20px 0;}
  #infoWrap01 .list li{width: 100%;}

}

@media (max-width: 320px){

  #infoWrap01 .titleBox{margin-bottom: 35px;}

}

/* 기업 안내 영역 */
#infoWrap02{padding: 120px 0 98px; height: 100vh; background: url(../images/main/bg.png)no-repeat center; background-attachment: fixed; background-size: cover;}
#infoWrap02 .titleBox{margin-bottom: 120px;}
#infoWrap02 .titleBox p{color: #fff; text-align: left;}
#infoWrap02 .list{display: flex; gap: 0 32px;}
#infoWrap02 .list li{padding: 40px 20px 20px; flex:1; height: 342px; border-radius: 20px; background-color: #fff;}
#infoWrap02 .list li h3{display: flex; flex-direction: column; align-items: center; gap:10px 0; margin-bottom: 25px; text-align: center; font-size: 20px; color: #454C57;}
#infoWrap02 .list li h3::before{content: ''; width: 100px; height: 100px; }
#infoWrap02 .list li:nth-child(1) h3::before{content: ''; background: url(../images/main/icon10.svg)no-repeat center;}
#infoWrap02 .list li:nth-child(2) h3::before{content: ''; background: url(../images/main/icon11.svg)no-repeat center;}
#infoWrap02 .list li:nth-child(3) h3::before{content: ''; background: url(../images/main/icon12.svg)no-repeat center;}
#infoWrap02 .list li .infoText{display: flex; justify-content: center; align-items: center; gap: 0 10px; font-size: 45px;}
#infoWrap02 .list li .infoText span{font-weight: 700;}

@media (max-width: 1024px){

  #infoWrap02,
  #infoWrap02 .container,
  #infoWrap02 .infoBox{height: 100%;}
  #infoWrap02 .infoBox{display: flex; flex-direction: column; justify-content: center;}
  #infoWrap02 .list{gap: 0 25px;}
  #infoWrap02 .list li{padding: 30px 20px 40px; height: auto; border-radius: 15px;}
  #infoWrap02 .list li h3{font-size: 16px;}
  #infoWrap02 .list li .infoText{font-size: 35px;}
  #infoWrap02 .titleBox{margin-bottom: 100px;}

}

@media (max-width: 767px){

  #infoWrap02 .titleBox{margin-bottom: 55px;}
  #infoWrap02 .list{gap: 0 15px;}
  #infoWrap02 .list li{padding: 25px 20px 35px; border-radius: 10px;}
  #infoWrap02 .list li .infoText{font-size: 26px;}

}

@media (max-width: 576px){
  
  #infoWrap02 .titleBox p{text-align: center;}
  #infoWrap02{padding: 100px 0 80px; height: auto;}
  #infoWrap02 .list{flex-direction: column; gap: 10px 0;}
  #infoWrap02 .list li{padding: 10px 20px 15px; background: linear-gradient(to right, #F8B519 20%, #F89419);}
  #infoWrap02 .list li .infoText strong{-webkit-text-fill-color:#fff}
  #infoWrap02 .list li .infoText strong,
  #infoWrap02 .list li .infoText span,
  #infoWrap02 .list li h3{margin-bottom: 10px; color: #fff;}

}

@media (max-width: 480px){

  #infoWrap02{padding: 80px 0;}
  #infoWrap02 .titleBox{margin-bottom: 45px;}

}

@media (max-width: 360px){

  #infoWrap02{padding: 70px 0;}

}

@media (max-width: 320px){

  #infoWrap02 .list li h3{font-size: 14px;}
  #infoWrap02 .list li .infoText{font-size: 22px;}
  
}

/* 탭 슬라이드 영역 */
#infoWrap03{padding: 120px 0;}
#infoWrap03 .tabContentBox{position: relative;}
#infoWrap03 .tabBox{margin-bottom: 80px; display: flex; gap: 0 8px; justify-content: center;}
#infoWrap03 .tabBox .tabBtn{width: 195px; height: 80px; text-align: center; font-size: 28px; color: #ccc; font-weight: 700; border-radius: 16px;}
#infoWrap03 .tabBox .tabBtn.active{background-color: #FFF7E5; color: #FFB200;}
#infoWrap03 .box{padding: 30px 20px 20px; width: 981px; height: 484px; margin: 0 auto; background-color: #FBFBFB; border-radius: 20px;}
#infoWrap03 .box h3{display: flex; gap: 20px 0; flex-direction: column; align-items: center; margin-bottom: 10px; text-align: center; font-size: 45px; font-weight: 700;}
#infoWrap03 .box h3::before{content: ''; width: 150px; height: 150px;}
#infoWrap03 .box01 h3::before{background: url(../images/main/icon13.svg) no-repeat center;}
#infoWrap03 .box02 h3::before{background: url(../images/main/icon14.svg)no-repeat center;}
#infoWrap03 .box03 h3::before{background: url(../images/main/icon15.svg)no-repeat center;}
#infoWrap03 .box .title{margin-bottom: 25px; text-align: center; color: #000; font-size: 30px; font-weight: 700; word-break: keep-all;}
#infoWrap03 .box .text{text-align: center; color: #000; font-size: 20px; font-weight: 700;}
#infoWrap03 .control button{position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 38px;}
#infoWrap03 .control .prev{left:0;  background: url(../images/main/arrow_icon03.svg)no-repeat center; transform: rotate(-180deg);}
#infoWrap03 .control .next{right:0;  background: url(../images/main/arrow_icon03.svg)no-repeat center;}
#infoWrap03 .control button.slick-disabled {
  display: none !important;
}

@media(max-width: 1199px){

  #infoWrap03 .slick{margin: 0 -15px;}
  #infoWrap03 .slide{margin: 0 15px;}
  #infoWrap03 .box{width: 100%; }
  #infoWrap03 .control{display: none;}

}

@media (max-width: 1024px){

  #infoWrap03 .tabBox .tabBtn{width: 165px; height: 70px; font-size: 26px; border-radius: 10px;}
  #infoWrap03 .box{height: auto; padding: 30px 20px 65px;}
  #infoWrap03 .box h3{gap: 15px 0; font-size: 36px;}
  #infoWrap03 .box .title{font-size: 24px;}
  #infoWrap03 .box .text{font-size: 18px;}

}

@media (max-width: 767px){

  #infoWrap03{padding: 100px 0;}
  #infoWrap03 .tabBox .tabBtn{width: 155px; height: 60px; font-size: 20px;}
  #infoWrap03 .box h3{font-size: 26px;}
  #infoWrap03 .box .title{font-size: 20px;}
  #infoWrap03 .box .text{font-size: 16px;}

}

@media (max-width: 576px){

  #infoWrap03 .box .text br{display: none;}

}

@media (max-width: 480px){

  #infoWrap03 .tabBox .tabBtn{flex:1; font-size: 18px;}
  #infoWrap03 .box h3{font-size: 24px;}
  #infoWrap03 .box .title{font-size: 18px;}
  #infoWrap03 .box .text{font-size: 16px;}

}

@media (max-width: 414px){

  #infoWrap03{padding: 65px 0;}
  #infoWrap03 .box{padding: 25px 20px 50px;}
  #infoWrap03 .box h3{font-size: 20px;}
  #infoWrap03 .box .title{font-size: 16px;}
  #infoWrap03 .box .text{font-size: 14px;}
  #infoWrap03 .tabBox{margin-bottom: 55px;}
  #infoWrap03 .tabBox .tabBtn{font-size: 16px;}

}

/* 팝업 */
body.fixed{position: fixed;}
html, body {scrollbar-width: none; -ms-overflow-style: none;}
html::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;}

.popupWrap.active{opacity: 1; visibility: visible;}
.popupWrap{opacity: 0; position: fixed; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,.5); z-index: 9999999; transition: all 1s; visibility: hidden;}
.popupBox{max-width: 600px; width: 90%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; overflow: hidden; border-radius: 20px; overflow: hidden;}
.popupBox img{display: block; width: 100%; height: 100%;}
.popupBox .closeBtn::before{transform: translate(-50%, -50%) rotate(45deg);}
.popupBox .closeBtn::after{transform: translate(-50%, -50%) rotate(-45deg);}
.popupBox .control button{ display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-65%); width: 40px;height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); color: #fff; font-size: 18px;}
.popupBox .control button::after{content: ''; width: 15px; height: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: contain!important;}
.popupBox .control .prev{left: 10px;}
.popupBox .control .next{right: 10px;}
.popupBox .control .prev::after {background: url(../images/main/arrow_icon.png) no-repeat center; transform: translate(-50%, -50%) rotate(-180deg);}
.popupBox .control .next::after {background: url(../images/main/arrow_icon.png) no-repeat center; }
.popupBox .closeBtnBox{display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #F8B519, #F89419);}
.popupBox .closeBtnBox .btn{display: block; height: 45px; flex: 1; text-align: center; color: #000; font-size: 16px; font-weight: 500; color: #fff;}

@media (max-width: 767px){

  .popupBox{border-radius: 8px;}

}

@media (max-width: 414px){

  .popupBox .control button{width: 30px; height: 30px; transform: translateY(-70%);}
  .popupBox .closeBtnBox .btn{height: 35px; font-size: 14px;}
  .popupBox .control button::after{width: 12px; height: 12px;}
  
}

@media (max-width: 360px){

  .popupBox .closeBtnBox .btn{height: 30px; font-size: 12px;}

}