@charset "UTF-8";
@import url('/design/common/css/Pretendard.css');

body, input, select { font-family:'Pretendard', sans-serif; font-size:16rem; color:#323232; font-weight:400; line-height: 1.5; letter-spacing: -0.25rem; }
a, a:hover, a:visited a:active, a:focus { color: inherit; }

::-webkit-scrollbar { width:18px; }
::-webkit-scrollbar-thumb {  border:5px solid #fff; border-radius:20px; background:#ccc; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0); }
.wrap { width: calc(100% - 80rem); max-width:1400px; margin:0 auto; }
@media all and (max-width:768px){
  html { font-size:0.95px; }
  .wrap {width: calc(100% - 60rem);}
}
@media all and (max-width:480px){
  html { font-size:0.9px; }
  .wrap {width: calc(100% - 40rem);}
}

body {background-color: #F7F7F7; background-image: url(/design/intro2025/img/intro_bg1.png), url(/design/intro2025/img/intro_bg2.png); background-position: bottom left, top -90px right; background-repeat: no-repeat; position: relative; width: 100vw; height: 100vh;}

header {padding: 90rem 0 70rem;}
.slogan {text-indent: -999999rem; background: url(/design/intro2025/img/slogan.png) no-repeat center / contain; height: 66rem;}

main {display: flex; flex-wrap: wrap; justify-content: center;}
.banner {width: 335rem; text-align: center; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2); border-radius: 20rem; overflow: hidden; position: relative; margin-left: 20rem; margin-bottom: 30rem;}
.banner:first-of-type {margin-left: 0;}
.banner .btn_wrap {background: #ffffff; border-radius: 20rem; padding: 25rem 30rem; width: 100%;}
.banner .tit {font-size: 26rem;}
.banner .sub {color: #555555; line-height: 19rem; margin-top: 5rem;}
.banner .btn { padding: 8rem 20rem; display: inline-block; min-width: 170rem; border-radius: 60rem; border: 1px solid #002CCF; background: #345DF5; color: #ffffff; transition: 0.2s;}
.banner .btn.gold {border: 1px solid #E8B748; background: #FFC956; color: #323232;}
.banner .btn.first {margin-top: 20rem;}
.banner .btn:not(.first) {margin-top: 10rem;}
.banner .btn:hover {background: #002CCF;}
.banner .btn.gold:hover {background: #ffdd7c;}
#banner01 {background: #FFFAF5 url(/design/intro2025/img/banner01.png) no-repeat top left/cover; padding-top: 297rem;}
#banner02 {background: #E4EFFF url(/design/intro2025/img/banner02.png) no-repeat bottom center/cover; padding-bottom: 307rem;}
#banner03 {background: #ffffff url(/design/intro2025/img/banner03.png) no-repeat top center/contain; padding-top: 223rem;}
#banner04 {background: #5477F0 url(/design/intro2025/img/banner04.png) no-repeat top center/contain; padding-top: 205rem;}
#banner03 .btn_wrap {background: none;}
#banner03 .chatbot_qr {margin-bottom: 20rem;}

footer {text-align: center; padding: 30rem 0;}
@media all and (max-width: 1497px) {
    header {padding: 70rem 0;}
    .wrap {max-width: 690rem;}
    .banner {width: calc((100% - 20rem)/2); max-width: 335rem;}
    .banner:nth-last-of-type(even) {margin-left: 0;}
    #banner01 {padding-top: 254rem;}
    #banner02 {padding-bottom: 269rem;}
    #banner03 {padding-top: 201rem;}
    #banner04 {padding-top: 170rem;}
    #banner03 .chatbot_qr {width: 80rem;}
}
@media all and (max-width: 1200px) {
    body {height: auto;}
}
@media all and (max-width: 768px) {
    header {padding: 50rem 0;}
    .slogan {width: 90%; margin: 0 auto;}
    .banner {width: 100%; max-width: none; margin-left: 0; padding-left: 40%;}
    #banner01 {padding-top: 0; background-size: 45%; background-position: left top;}
    #banner02 {padding-bottom: 0; background-size: 45%; background-position: left bottom}
    #banner03 {padding-top: 0; background-size: 40%; background-position: left center; background-color: #384285;}
    #banner04 {padding-top: 0; background-size: 45%; background-position: left top;}
    #banner03 .btn_wrap {background: #ffffff;}
    #banner03 .chatbot_qr {display: none;}
}
@media all and (max-width: 440px) {
    header {padding: 30rem 0;}
    .banner {padding-left: 0;}
}