@charset "UTF-8";

/* section01 */
#section01{background: linear-gradient(to right, #5B76FF, #2686DD); border-radius: 0 0 0 70px;}
#section01 .box{padding-top: 225px; height: 640px; display: flex; justify-content: space-between;}
#section01 .box .textBox .text01{margin-bottom: 15px; font-size: 28px; font-weight: 700; color: #fff;}
#section01 .box .textBox .text02{margin-bottom: 45px; font-size: 18px; color: #fff;}
#section01 .box .textBox .view{display: flex; align-items: center; gap: 0 10px; font-size: 28px; color: #fff;}
#section01 .box .textBox .view::after{content: ''; width: 17px; height: 17px; background: url(../images/main/arrow_icon01.svg)no-repeat center;}
#section01 .box .loginBox{display: flex; flex-direction: column; width: 398px; height: 476px; border-radius: 0 30px 0 30px; box-shadow: 0 4px 20px rgba(0,0,0,.15); background-color: #fff; overflow: hidden;}
#section01 .box .loginBox .loginTopBox{padding: 30px 30px 0; }
#section01 .box .loginBox h3{margin-bottom: 24px; font-size: 21px; font-weight: 800; color: #4B54B8;}
#section01 .box .loginBox .inputTextBox{margin-bottom: 10px;}
#section01 .box .loginBox .inputTextBox:nth-of-type(2){margin-bottom: 0;}
#section01 .box .loginBox .inputTextBox input{width: 100%; padding-left: 20px; height: 55px; border: 1px solid #D3D3D3; border-radius: 5px; background-color: #FAFAFA;}
#section01 .box .loginBox .inputTextBox input::placeholder{color: #A3A7AD;}
#section01 .box .loginBox .loginBtn{margin-top: 20px; width: 100%; height: 55px; background-color: #15438F; border-radius: 10px; text-align: center; font-weight: 700; color: #fff;} 
#section01 .box .loginBox .authBox{margin-top: auto; position: relative; gap: 0 30px; display: flex; align-items: center; justify-content: center; height: 171px; z-index: 1; background-color: #F7F8FD;}

#section01 .box .loginBox .authBox a{gap: 10px 0; display: flex; flex-direction: column; color: #42474C; font-weight: 700;}
#section01 .box .loginBox .authBox a::before{content: ''; margin: 0 auto; width: 70px; height: 70px; border-radius: 50%; }
#section01 .box .loginBox .authBox a.btn01::before{background: #fff url(../images/main/icon01.svg)no-repeat center;}
#section01 .box .loginBox .authBox a.btn02::before{background: #fff url(../images/main/icon02.svg)no-repeat center;}
#section01 .box .imgBox{position: relative; margin-top: -50px;}
#section01 .box .imgBox .icon01{width: 86px; height: 100px; position: absolute; top:-18px; left:-9px;}
#section01 .box .imgBox .icon02{position: absolute; top:-44px; right:-13px;}
#section01 .box .imgBox .icon03{position: absolute; bottom: 30px; left:-49px;}
#section01 .slick-list{overflow: visible;}
#section01 .box .imgBox .icon{width: 101px; height: 110px;}
#section01 .box .logoutBox{padding: 60px 0 0; display: flex; flex-direction: column; width: 398px; height: 476px; border-radius: 0 30px 0 30px; box-shadow: 0 4px 20px rgba(0,0,0,.15); background-color: #fff; overflow: hidden;}
#section01 .box .logoutBox .logoutTopBox{padding: 0 30px;}
#section01 .box .logoutBox p{position: relative; padding-left: 80px; margin-bottom: 15px; line-height: 1.7;}
#section01 .box .logoutBox p::before{content: ''; width: 56px; height: 57px; position: absolute; top:0; left:0; background: url(../images/main/logout_icon.svg)no-repeat center;}
#section01 .box .logoutBox .infoBox .layoutBox{margin-left: 88px; display: flex; gap: 0 10px;} 
#section01 .box .logoutBox .infoBox .btn{display: flex; align-items: center; gap: 0 8px; padding: 7px 12px; border: 1px solid #E6E6E6; border-radius: 5px;}
#section01 .box .logoutBox .infoBox .btn::after{content: ''; width: 7px; height: 9px; background: url(../images/main/arrow_icon03.svg)no-repeat center;}
#section01 .box .logoutBox .loginBtn{display: flex; align-items: center; justify-content: center; gap: 0 7px; margin-top: 59px; width: 100%; height: 55px; line-height: 55px; border-radius: 10px; background-color: #15438F; text-align: center; color: #fff; font-weight: 700;}
#section01 .box .logoutBox .loginBtn::after{content: ''; width: 11px; height: 11px; background: url(../images/main/arrow_icon04.svg)no-repeat center;}
#section01 .box .logoutBox .authBox{margin-top: 30px; position: relative; gap: 0 30px; display: flex; align-items: center; justify-content: center; height: 171px; z-index: 1; background-color: #F7F8FD;}
#section01 .box .logoutBox .authBox .logoutBtn{display: flex; flex-direction: column; gap: 10px 0; font-weight: 700; color: #42474C;}
#section01 .box .logoutBox .authBox .logoutBtn::before{content: ''; width: 70px; height: 70px; border-radius: 50%; background: #fff url(../images/main/logout_icon02.svg)no-repeat center;}

@media (max-width: 1199px){

  #section01 .box .logoutBox,
  #section01 .box .loginBox{display: none;}
  #section01 .box{padding-top: 132px; justify-content: flex-start;}
  #section01 .box .imgBox{margin: 0; position: absolute; right:170px; bottom: 50px;}

}

@media (max-width: 1024px){

  #section01 .box{height: 480px;}
  #section01 .box .imgBox{right:60px; bottom: -54px;}
  #section01 .box .imgBox .img01{width: 300px;}
  #section01 .box .imgBox .icon01{width: 85px;}
  #section01 .box .imgBox .icon,
  #section01 .box .imgBox .icon{width: 95px; height: 103px;}
  #section01 .box .imgBox .icon03{bottom: 3px;}

}

@media (max-width: 767px){

  #section01 .box{height: 640px; padding-top: 90px; flex-direction: column; align-items: center; gap: 75px 0;}
  #section01 .box .imgBox{margin-left: 20px; position: relative; right: auto; bottom: auto;}
  #section01 .box .textBox{text-align: center;}
  #section01 .box .textBox .text01{font-size: 24px;}
  #section01 .box .textBox .text02{margin-bottom: 28px;}
  #section01 .box .textBox .view{justify-content: center;}

}

@media (max-width: 480px){

  #section01{border-radius: 0 0 0 40px;}
  #section01 .box{height: 540px; gap: 65px 0;}
  #section01 .box .imgBox .img01{width: 240px;}
  #section01 .box .imgBox .icon01{width: 65px;}
  #section01 .box .imgBox .icon02,
  #section01 .box .imgBox .icon03{width: 75px;}
  #section01 .box .imgBox .icon03{bottom: 3px; left: -32px;}
  #section01 .box .imgBox .icon02{top: -29px; right: -4px;}
  #section01 .box .textBox .text01{font-size: 20px;}
  #section01 .box .textBox .view{font-size: 22px; line-height: 1.6; margin-bottom: 10px;}
  #section01 .box .textBox .text02{font-size: 16px; margin-bottom: 18px;}

}

/* section02 */
#section02{padding: 78px 0 116px;}
#section02 .comTitleBox{margin-bottom: 54px;}
#section02 .list{display: flex;}
#section02 .list li{flex: 1;}
#section02 .list li .iconBox{margin: 0 auto 9px; display: flex; align-items: center; justify-content: center; width: 131px; height: 131px; border-radius: 50%; background-color: #F9FAFF;}
#section02 .list li .textBox h4{margin-bottom: 13px; text-align: center; font-size: 18px; font-weight: 700; color: #42474C;}
#section02 .list li .textBox p{text-align: center; color: #42474C;}

@media (max-width: 1199px){

  #section02 .list{flex-wrap: wrap; gap: 70px 0 ;}
  #section02 .list li{width: 33.33%; flex: none;}

}

@media (max-width: 767px){

  #section02{padding: 130px 0 100px;}

}

@media (max-width: 576px){

  #section02 .list{gap: 50px 0;}
  #section02 .list li{width: 50%;}
  #section02 .list li .textBox p{font-size: 12px; word-break: keep-all;}
  #section02 .list li .textBox p br{display: none;}
  #section02 .list li .textBox h4{margin-bottom: 6px; font-size: 14px;}
  #section02 .list li .iconBox{width: 100px; height: 100px;}
  #section02 .list li .iconBox img{width: 35px;}

}

/* section03 */
#section03{padding: 100px 0 112px; background-color: #F6F8FB;}
#section03 .comTitleBox{margin-bottom: 70px; text-align: center;}
#section03 .list{display: flex; flex-wrap: wrap; gap: 0;}
#section03 .list li{width: 25%;}
#section03 .list li a,
#section03 .list li a img{display: block;}
#section03 .list li a img{ margin: 0 auto; max-width: 100%;}

@media (max-width: 1024px){

  #section03 .list li{width: 33.33%;}

}

@media (max-width: 767px){

  #section03 .list li{width: 50%;}

}

@media (max-width: 480px){

  #section03{padding: 90px 0 60px;}
  #section03 .comTitleBox{margin-bottom: 50px;}

}

/* section04 */
#section04{padding: 100px 0;}
#section04 .layoutBox{display: flex; gap: 0 30px;}
#section04 .box{position: relative; overflow: hidden; flex: 1;}
#section04 .box h3{margin-bottom: 20px; font-size: 32px; color: #000; font-weight: 800;}
#section04 .box .list{border-top: 1px solid #000;}
#section04 .box .list li a{display: block; padding: 18px 20px 18px 0; font-size: 18px; color: #000; border-bottom: 1px solid #E0E0E0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#section04 .box .view{display: flex; align-items: center; gap: 0 15px; position: absolute; top:8px; right:0; font-size: 18px; font-weight: 700; color: #212121;}
#section04 .box .view::after{content: ''; width: 17px; height: 17px; background: url(../images/main/arrow_icon02.svg)no-repeat center; margin-top: -2px;}
#section04 .faqBox .list li a{position: relative; padding: 18px 20px 18px 30px;}
#section04 .faqBox .list li a::before{width: 16px; height: 14px; content: ''; position: absolute; transform: translateY(-50%); top: 50%; left:4px; background: url(../images/main/faq_icon.svg)no-repeat center;}

@media (max-width: 1199px){

  #section04 .box h3{font-size: 24px;}
  #section04 .box .view{gap: 0 10px; font-size: 16px;}
  #section04 .layoutBox{flex-direction: column; gap: 50px 0;}

}

@media (max-width: 767px){

    #section04 .box h3{font-size: 20px;}

}

@media (max-width: 480px){

  #section04{padding: 80px 0;}
  #section04 .box .list li a{font-size: 16px;}

}