/* font */
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 900;
  font-display: block;
  src: local("Pretendard GOV Black"),
    url(../fonts/woff2/PretendardGOV-Black.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-Black.woff) format("woff");
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 800;
  font-display: block;
  src: local("Pretendard GOV ExtraBold"),
    url(../fonts/woff2/PretendardGOV-ExtraBold.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-ExtraBold.woff) format("woff");
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 700;
  font-display: block;
  src: local("Pretendard GOV Bold"),
    url(../fonts/woff2/PretendardGOV-Bold.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-Bold.woff) format("woff");
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 600;
  font-display: block;
  src: local("Pretendard GOV SemiBold"),
    url(../fonts/woff2/PretendardGOV-SemiBold.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-SemiBold.woff) format("woff");
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 500;
  font-display: block;
  src: local("Pretendard GOV Medium"),
    url(../fonts/woff2/PretendardGOV-Medium.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-Medium.woff) format("woff");
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 400;
  font-display: block;
  src: local("Pretendard GOV Regular"),
    url(../fonts/woff2/PretendardGOV-Regular.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-Regular.woff) format("woff");
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 300;
  font-display: block;
  src: local("Pretendard GOV Light"),
    url(../fonts/woff2/PretendardGOV-Light.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-Light.woff) format("woff");
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 200;
  font-display: block;
  src: local("Pretendard GOV ExtraLight"),
    url(../fonts/woff2/PretendardGOV-ExtraLight.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-ExtraLight.woff) format("woff");
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 100;
  font-display: block;
  src: local("Pretendard GOV Thin"),
    url(../fonts/woff2/PretendardGOV-Thin.woff2) format("woff2"),
    url(../fonts/woff/PretendardGOV-Thin.woff) format("woff");
}

@font-face {
  font-family: "Korail";
  font-weight: 700;
  font-display: block;
  src: 
    url(../fonts/KorailRoundGothic/KorailRoundGothicBold.woff2) format("woff2"),
    url(../fonts/KorailRoundGothic/KorailRoundGothicBold.woff) format("woff");
}
@font-face {
  font-family: "Korail";
  font-weight: 500;
  font-display: block;
  src: 
    url(../fonts/KorailRoundGothic/KorailRoundGothicMedium.woff2) format("woff2"),
    url(../fonts/KorailRoundGothic/KorailRoundGothicMedium.woff) format("woff");
}
@font-face {
  font-family: "Korail";
  font-weight: 300;
  font-display: block;
  src: 
    url(../fonts/KorailRoundGothic/KorailRoundGothicLight.woff2) format("woff2"),
    url(../fonts/KorailRoundGothic/KorailRoundGothicLight.woff) format("woff");
}


/* basic */
* {margin:0;padding:0;box-sizing:border-box}
html {font-size:62.5%;-webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0);}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,dl,dt,dd,table,thead,tbody,tfoot,label,
caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;border:0 none}
body{width:100%; background:#fff;-webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;max-width:2560px;min-width:280px;height:100%}
body,input,select,textarea,button {border:none;font-size:1.5rem;font-family:"Pretendard GOV",'Malgun Gothic','Dotum','Gulim','Tahoma','Verdana',sans-serif;color:#777;color:var(--Greyscale9);font-weight: 500;letter-spacing: -0.5px;}
input {font-family:"Pretendard GOV",'Malgun Gothic','Dotum','Gulim','Tahoma','Verdana',sans-serif;font-weight:200}
header, h1 {font-size:100%}
html, body {height:100%}
main,header,section,nav,footer,aside,article,figure{display:block}
div, p, span, li, table td {word-break:keep-all}
caption,legend {overflow:hidden;position:absolute;width:1px;height:1px;font-size:0;line-height:0}
img {border:none;vertical-align:top;/*width:100%;*/ }
select, input {vertical-align:middle}
hr {display:none;border:0 none}
ol, ul, ul li{list-style:none}
address,cite,code,em{font-style:normal;font-weight:normal}
label{cursor:pointer}
button{border:0;outline:0;cursor:pointer}
textarea:focus, button:focus, input:focus{outline:none}

/* root */
:root {
  /* 메인컬러 & 서브컬러 지정 */
  --Primary1: #4D19AE;

  /* 그레이스케일 컬러 */
  --Greyscale9: #172043;
  --Greyscale8: #2F385E;


  /* 기본사이즈 */
  --containerSize: 1400px;
}


/* commone */
section{height: 100vh;overflow: hidden;}
.container{width:var(--containerSize);margin:0 auto;}
.mtit{color:var(--Greyscale9);font-size: 34px;font-weight: 700;}
.mstit{color:var(--Greyscale8);font-size: 18px;line-height: 150%;margin-top: 20px;}


/* color */
.color-pr{color:var(--Primary1);}


/* section1 */
section.sc1{background: url(../assets/Img/sc1-bg.png) center no-repeat;background-size: cover;display: flex;align-items: center;justify-content: center;position: relative;}
section.sc1 .container{display: flex;align-items: center;justify-content: space-between;}
section.sc1 .sc1-txt{
    font-family: "Korail";
    font-weight: 700;
    z-index: 1;
}
section.sc1 .sc1-txt .tit{
    font-weight: 700;
    font-size: 28px;
}
section.sc1 .sc1-txt .logo{
    margin: 30px 0;
}
section.sc1 .sc1-txt .logo img{
  width: 280px;
}
section.sc1 .sc1-txt .stit{
    font-weight: 500;
    font-size: 21px;
    line-height: 140%;
    margin-bottom: 66px;
}
.app-btn{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.app-btn button{
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2A2B47;
    color: #fff;
    padding: 15px 47px 17px;
    font-weight: 600;
    border-radius: 5px;
    gap: 7px;
    box-sizing: border-box;
}
.app-btn button:before{content:'';display: inline-block;width: 26px;height: 33px;}
.app-btn button:first-child:before{background: url(../assets/Img/sc1-btn1.png) center no-repeat;}
.app-btn button:last-child:before{background: url(../assets/Img/sc1-btn2.png) center no-repeat;top: 3px;position: relative;}
section.sc1 .sc1-img{
    position: absolute;
    right: 0;
    bottom:0;
    width: 100%;
    height: 100%;
}
section.sc1 .sc1-img:before{
  content:'';
  display: inline-block;
  background: url(../assets/Img/sc1-vsbg.png) right bottom no-repeat;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 998px;
  height: 900px;
}
section.sc1 .sc1-img img{
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
}


/* section2 */
section.sc2{
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 110px 0;
    height: auto;
}
section.sc2 .mtit{
  text-align: center;
}
section.sc2 .mtit:before{
  content:'';
  display: block;
  background: url(../assets/Img/sc2-tit-ico.png) center no-repeat;
  width: 101px;
  height: 80px;
  margin: 0 auto;
  margin-bottom: 30px;
}
section.sc2 .sc2-cont{
    position: relative;
    margin-top: 30px;
}
section.sc2 .sc2-cont .sc2-img{
    position: relative;
}
/*
section.sc2 .sc2-cont .sc2-img:before{
  content:'';
  display: inline-block;
  background: url(../img/sc2-bg.png) center no-repeat;
  width: 554px;
  height: 495px;
  position: absolute;
  z-index: -1;
  bottom: 70px;
  right: 0;
}
section.sc2 .sc2-cont .sc2-img:after{
  content:'';
  display: inline-block;
  background: url(../img/sc2-bg.png) center no-repeat;
  width: 554px;
  height: 495px;
  position: absolute;
  z-index: -1;
  top: 70px;
  left: 0;
  transform: scaleX(-1);
}
*/
section.sc2 .sc2-cont ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  display: grid;
  grid-template-columns: repeat(2, 370px); /* 두 열로 구성하고 각 열의 너비를 400px로 설정 */
  gap: 110px; /* 항목 간의 간격 */
  justify-content: space-between; /* 그리드 항목을 가운데 정렬 */
}
section.sc2 .sc2-cont ul li{
  text-align: left;
  padding: 40px;
  box-sizing: border-box;
  border: 1px solid #C6DDF4;
  border-radius: 16px;
  background: #F3F7FF;
  width: 100%;
  position: relative;
}
section.sc2 .sc2-cont ul li:before{
  content:'';
  display: inline-block;
  width: 60px;
  height: 55px;
  position: absolute;
  right: 20px;
  top: 20px;
}
section.sc2 .sc2-cont ul li:nth-child(1)::before{
  background: url(../assets/Img/sc2-ico1.svg) center no-repeat;
}
section.sc2 .sc2-cont ul li:nth-child(2)::before{
  background: url(../assets/Img/sc2-ico2.svg) center no-repeat;
}
section.sc2 .sc2-cont ul li:nth-child(3)::before{
  background: url(../assets/Img/sc2-ico3.svg) center no-repeat;
}
section.sc2 .sc2-cont ul li:nth-child(4)::before{
  background: url(../assets/Img/sc2-ico4.svg) center no-repeat;
}
section.sc2 .sc2-cont ul li p{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 13px;
}
section.sc2 .sc2-cont ul li span{
  font-size: 15px;
  line-height: 150%;
}

/* section3 */
.sc3{
    background: #EBF0FF;
    display: flex;
    align-items: end;
    justify-content: center;
}
.sc3 .container{
  display: flex;
  gap: 135px;
  align-items: center;
}
.sc3 .container .if-cont{position:relative;}
.sc3 .container .if-cont:first-child::before{content:'';display: inline-block;background: url('../assets/Img/sc3-line.png') center no-repeat;width: 108px;height: 499px;position: absolute;right: -108px;top: 143px;}
ul.if-list{
    gap: 10px;
    margin: 35px 0;
    text-align: right;
    justify-content: start;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
ul.if-list li{
    background: #fff;
    border-radius: 100px;
    height: 60px;
    border: 2px solid #96A7EA;
    box-sizing: border-box;
    display: flex;
    color: #4559A8;
    font-size: 19px;
    font-weight: 600;
    width: calc(100% / 2 - 7px);
    align-items: center;
    justify-content: center;
}
ul.if-img{
    display: flex;
    gap: 30px;
}
ul.if-img li{
    width: 283px;
    aspect-ratio: 1/1 auto;
    background: gray;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 0 30px #D6DDFB;
}


/* section4 */
.sc4{background: #fff;}
.sc4{background: #fff;}
.sc4 .container .if-cont{text-align: right;}
.sc4 .container .if-cont:first-child::before{display:none;}
.sc4 .container .if-cont:last-child::before{content:'';display: inline-block;background: url('../assets/Img/sc3-line.png') center no-repeat;width: 108px;height: 499px;position: absolute;left: -108px;top:143px;transform: scaleX(-1);}
.sc4 ul.if-list{justify-content: end;}
.sc4 ul.if-img{justify-content: end;}

/* footer */
footer{
    background: #6D3CC7;
    padding: 60px 0;
    color: #fff;

}
footer .container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
  gap: 25px;
}
footer p{
    font-size: 21px;
    font-family: "Korail";
    font-weight: 500;
}
footer .app-btn{justify-content: center;}


/* -------------------- media -------------------- */
@media (max-width: 1600px) {
  .container{width: 1200px;}
  section.sc1 .sc1-img img{width: 720px;}
  section.sc1 .sc1-img:before{
    width: 100%;
    height: 100%;
    background-size: 56%;
  }
  section.sc2 .sc2-cont ul{
    width:100%;
  }
}

@media (max-width: 1400px) {
  section{
    height: auto;
    padding: 100px 0 !important;
  }
  .container{
    width: 1000px;
  }
  section.sc3{
    padding: 100px 0 0 !important;    
  }  
  section.sc1 .sc1-txt .tit{
    font-size: 23px;
  }
  section.sc1 .sc1-txt .logo img{
    width: 240px;
  }
  section.sc1 .sc1-txt .stit{
    font-size: 19px;
  }
  .app-btn button{
    font-size: 17px;
    padding: 15px 35px;
  }
  .app-btn button:before{
    width: 20px;
    height: 20px;
  }
  .app-btn button:first-child:before{
    background-size: 15px;
  }
  .app-btn button:last-child:before{
    background-size: 20px;
  }  
  section.sc1 .sc1-txt{
    font-family: "Pretendard GOV";
  }
  section.sc1 .sc1-txt .stit{
    margin-bottom: 40px;
  }
  section.sc1 .sc1-img img{
    width: 40%;
  }
  section.sc1 .sc1-img:before{
    background-size: 48%;
  }
  section.sc2 .sc2-cont ul li::before{
    background-size: 45px !important;
    width: 45px;
    top: 13px;
  }
  section.sc2 .sc2-cont ul li:nth-child(4)::before{
    background-size: 27px !important;
    top: 11px;
  }
  .mtit{
    font-size: 28px;
  }
  .mstit{
    font-size: 16px;
  }
  section.sc2 .mtit:before{
    width: 80px;
    height: 70px;
    background-size: 80px;
    margin-bottom: 20px;
  }
  section.sc2 .sc2-cont .sc2-img:before, section.sc2 .sc2-cont .sc2-img:after{display: none;}
  section.sc2 .sc2-cont ul{
    grid-template-columns: repeat(2, 340px);
  }
  section.sc2 .sc2-cont ul li{
    padding: 30px;
  }
  section.sc2 .sc2-cont .sc2-img img{
    width: 300px;
  }
  section.sc2 .sc2-cont ul li p{
    font-size: 18px;
  }
  .sc3 .container .if-cont.if-mb{
    width:40%;
    display: flex;
    align-items: end;
  }
  .sc3 .container .if-cont.if-mb img{
    width:100%;
  }
  .sc3 .container .if-cont:first-child::before, .sc4 .container .if-cont:last-child::before{display: none;}
  .sc3 .container{gap: 70px;}
  ul.if-list{margin: 20px 0;}
  ul.if-list li{height: 50px;font-size: 17px;}
  ul.if-img li{width: calc(100% / 2 - 15px);margin-bottom: 40px;}
  footer img{width: 80px;}
  footer p{
    font-family: "Pretendard GOV";
    font-size: 20px;
  }
}


@media (max-width: 1200px) {
  .container{width: 90%;}
  section.sc1 .sc1-txt .tit{font-size: 21px;}
  section.sc1 .sc1-txt .logo img{width: 230px;}
  section.sc1 .sc1-txt .stit{margin-bottom: 40px;}
  .mtit{font-size: 26px;}
  section.sc2 .mtit:before{display: none;}
  section.sc2 .sc2-cont ul{grid-template-columns: repeat(2, 290px);}
}

@media (max-width: 1000px) {
  section{padding: 80px 0 !important;}
  section.sc3{padding: 80px 0 0 !important;}
  section.sc1 .container{flex-direction: column;}
  section.sc1 .sc1-txt{text-align: center;}
  section.sc1 .sc1-txt .logo img{width: 190px;}
  section.sc1 .sc1-txt .tit{font-size: 20px;}
  section.sc1 .sc1-txt .stit{font-size: 17px;margin-bottom: 30px;}
  section.sc2 .sc2-cont ul{
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    position: relative;
    top: inherit;
    left: inherit;
    transform: inherit;
  }
  ul.if-img{display: none;}
  .sc3 .container{flex-direction: column;gap: 10px;}
  .sc3 .container .if-cont{text-align: center;}
  .sc3 .container .if-cont.if-mb{order:2;margin: 0 auto;}
  section.sc1 .sc1-img{display: none;}
  ul.if-list, .sc4 ul.if-list{justify-content: center;}
}

@media (max-width: 690px) {
  section.sc1 .sc1-txt{width:100%;}
  section.sc1 .sc1-txt .logo{margin: 25px 0;}
  section.sc1 .sc1-txt .logo img{width: 160px;}
  section.sc1 .sc1-txt .tit{font-size: 19px;}
  section.sc1 .sc1-txt .stit{font-size: 16px;}
  .app-btn button{width: calc(100% / 2);padding: inherit;height: 50px;font-size: 16px;}
  .mtit{font-size: 23px;}
  section.sc2 .sc2-cont ul{grid-template-columns: repeat(1, 1fr);gap: 20px;}
  ul.if-list, .sc4 ul.if-list{justify-content: start;}
  ul.if-list li{width: calc(100% / 2 - 5px);}
  footer img{width: 70px;}
  footer p{font-size: 18px;}
}

@media (max-width: 400px) {
  section{padding: 70px 0 !important;}
  section.sc1 .sc1-txt .tit, footer p{font-size: 17px;}
  section.sc1 .sc1-txt .logo img{width: 140px;}
  section.sc2{padding: 70px 0 !important;}
  .mtit{font-size: 21px;}
  ul.if-list{flex-direction: column;}
  ul.if-list li{width: 100%;font-size: 16px;}
  .sc3 .container .if-cont.if-mb{width: 60%;}
}