@charset "UTF-8";
@font-face {
    font-family: "SUIT";
    font-weight: 100;
    font-style: normal;
    src: url("/fonts/SUIT-Thin.otf") format("opentype"),
         url("/fonts/SUIT-Thin.woff2") format("woff2"),
         url("/fonts/SUIT-Thin.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "SUIT";
    font-weight: 200;
    font-style: normal;
    src: url("/fonts/SUIT-ExtraLight.otf") format("opentype"),
         url("/fonts/SUIT-ExtraLight.woff2") format("woff2"),
         url("/fonts/SUIT-ExtraLight.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "SUIT";
    font-weight: 300;
    font-style: normal;
    src: url("/fonts/SUIT-Light.otf") format("opentype"),
         url("/fonts/SUIT-Light.woff2") format("woff2"),
         url("/fonts/SUIT-Light.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "SUIT";
    font-weight: 400;
    font-style: normal;
    src: url("/fonts/SUIT-Regular.otf") format("opentype"),
         url("/fonts/SUIT-Regular.woff2") format("woff2"),
         url("/fonts/SUIT-Regular.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "SUIT";
    font-weight: 500;
    font-style: normal;
    src: url("/fonts/SUIT-Medium.otf") format("opentype"),
         url("/fonts/SUIT-Medium.woff2") format("woff2"),
         url("/fonts/SUIT-Medium.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "SUIT";
    font-weight: 600;
    font-style: normal;
    src: url("/fonts/SUIT-SemiBold.otf") format("opentype"),
         url("/fonts/SUIT-SemiBold.woff2") format("woff2"),
         url("/fonts/SUIT-SemiBold.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "SUIT";
    font-weight: 700;
    font-style: normal;
    src: url("/fonts/SUIT-Bold.otf") format("opentype"),
         url("/fonts/SUIT-Bold.woff2") format("woff2"),
         url("/fonts/SUIT-Bold.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "SUIT";
    font-weight: 800;
    font-style: normal;
    src: url("/fonts/SUIT-ExtraBold.otf") format("opentype"),
         url("/fonts/SUIT-ExtraBold.woff2") format("woff2"),
         url("/fonts/SUIT-ExtraBold.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "SUIT";
    font-weight: 900;
    font-style: normal;
    src: url("/fonts/SUIT-Heavy.otf") format("opentype"),
         url("/fonts/SUIT-Heavy.woff2") format("woff2"),
         url("/fonts/SUIT-Heavy.ttf") format("truetype");
    font-display: swap;
  }
/***************************************************************************************
   Setting
***************************************************************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}

body, button, input, select, table, textarea, h1, h2, h3, h4 {
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  letter-spacing: -1px;;scroll-behavior: smooth;
}

ul, ol {
  list-style: none;
}

img, button, fieldset {
  border: 0 none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

em, address, i {
  font-style: normal;
}

a, u {
  text-decoration: none;
}

fieldset, legend {
  border: 0;
}

legend {
  height: 0;
  visibility: hidden;
}

button {
  background: none;
}

button * {
  position: relative;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input::-ms-clear,
input[type=password]::-ms-reveal {
  display: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input {
  box-sizing: border-box;
}

textarea {
  resize: none;
}

a, button, input, select, textarea, [contenteditable] {
  outline: 0;
}

button, select, input[type=checkbox], input[type=radio] {
  cursor: pointer;
}

button:disabled, input:disabled {
  cursor: default
}
/***************************************************************************************
   layout
***************************************************************************************/
.layout-header {width:100%; height:110px; border-bottom:1px solid #fff; margin:0 auto; padding:0 109px 0 96px; display:flex; align-items: center; justify-content: space-between; position:relative; z-index:20;}
.layout-header.white {background-color:#fff; border-bottom:1px solid #6f6f6f;}
.layout-header .logo {font-weight:700; font-size:28px; color:#fff; display:flex; align-items: center;}
.layout-header.white .logo {color:#000;}
.layout-header .logo img {margin-right:15px;}
.layout-header .logo .logo-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.layout-header .list-menu {display:flex; align-items: center;}
.layout-header .list-menu li {height:110px; display:flex; align-items: center;}

.layout-header .list-menu li a {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  width: auto;
  min-width: 200px;
}

.layout-header.white .list-menu li a {
  display: inline-block;
  color: #000;
  padding: 10px 20px;
  background-color: #fff;
}

.layout-header.white .list-menu > li > a.active {
  color: #914a91;
  background-color: #fff;
  position: relative;
}

.layout-header.white .list-menu > li > a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background-color: #914a91;
}

.layout-header.white .list-menu > li > a:hover {
  color: #914a91;
  background-color: #fff;
  position: relative;
}

.layout-header.white .list-menu > li > a:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background-color: #914a91;
  transition: all 0.3s ease;
}

.layout-header .list-menu > li > a {
  padding: 10px 20px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.layout-header .list-menu > li > a:hover {
  color: #fff;
}
.layout-header .list-menu li a img {margin-right:10px;}
.layout-header .list-menu li + li {margin-left:60px;}
.sub-menu {position:absolute; top:110px; left:0; right:0; height:110px; background-color:#fff; display:flex; justify-content: center; align-items: center; display:none; }
.sub-menu ul {width:1920px; padding-left:300px; display:flex; align-items: center;gap:90px;}
.layout-header .list-menu .sub-menu ul li {}
.layout-header .list-menu .sub-menu ul li a {color:#000; font-weight:700; font-size:20px;}
.layout-header .list-menu li:hover .sub-menu {display:flex;}

/***************************************************************************************
   main
***************************************************************************************/
.banner {height:933px; background:url(/images/bg-banner.png) no-repeat; background-size:cover; margin-top:-110px; padding:110px 0 0 0; position:relative; display:flex; justify-content: center;}
.banner:before {position:absolute; top:0; left:0; right:0; bottom:0; content:'';background-color:rgba(0,0,0,0.8);}
.banner .view-banner { color:#fff; position:relative; padding:60px 20px 0 20px;}
.banner .view-banner .txt {font-size:35px; font-weight:400;}
.banner .view-banner .title {display:block; margin:80px 0 115px 0;font-size:84px; font-weight:700;}
.banner .view-banner .title span {display:block; padding-left:230px;}
.banner .view-banner .list-num {display:flex; align-items: center;gap:70px;}
.banner .view-banner .list-num .label {font-size:30px; font-weight:600;}
.banner .view-banner .list-num .label span {display:block;}
.banner .view-banner .list-num .num {font-size:160px; font-weight:800;}
.banner .view-banner .list-num .num span {font-size:70px; font-weight:600;}


.wrap-edu {background-color:#eee; overflow:hidden; }
.wrap-edu .label {background-color:#fff; height:90px; border-bottom:1px solid #aeadad;}
.wrap-edu .label span {display:block;width:1360px; margin:0 auto; font-size:35px; color:#040000; line-height:90px;}
.view-edu {width:1360px; margin:0 auto;}
.view-edu .txt {font-size:35px; color:#08396a; font-weight:400; padding:40px 0 0 0}
.view-edu strong {display:block; margin:55px 0 0 0; font-size:84px; font-weight:700;color:#08396a;}
.view-edu strong span {display:block; padding-left:375px; }
.view-edu .list-ol {display:flex; padding:220px 0 110px 470px; margin-top:-20px; background:url(/images/ico-beacon.png) no-repeat left top; gap:30px; }
.view-edu .list-ol li {position:relative;;}
.view-edu .list-ol li strong {background:url(/images/ico-num01.png) no-repeat; background-size:100% 100%; width:129px; height:115px; display:inline-block; font-size:0; position:absolute; top:-50%; left:50%; transform:translateX(-50%);}
.view-edu .list-ol li:nth-child(2) strong {background:url(/images/ico-num02.png) no-repeat;width:159px; height:120px; background-size:100% 100%;}
.view-edu .list-ol li:nth-child(3) strong {background:url(/images/ico-num03.png) no-repeat;width:157px; height:115px;  background-size:100% 100%;}
.view-edu .list-ol li .box {box-shadow: inset 3.5px 6.062px 3.5px rgba(0,0,0,0.2); width:280px; height:248px; background-color:#fff; border-radius:20px; padding:75px 0 0 25px; font-size:30px; line-height:50px; color:#000;}

.view-edu .list-ol li .box.web {display:block;}
.view-edu .list-ol li .box.mobile{display:none;}
.iew-edu .list-ol li .box.web {display:block;}
.iew-edu .list-ol li .box.mobile {display:none;}
.label-mobile {display:none;}
.level {height:1940px; display:flex; overflow:hidden;}
.level .view-level { width:38%; flex:none; background-color:#3a86c0; text-align:right;}
.level .view-level .det {width:445px; display:inline-block; margin:90px 0 0 0; color:#fff; padding:195px 45px 0 0;}
.level .view-level .det .label {font-size: 40px;letter-spacing: -1px;font-weight: 700;}
.level .view-level .det .txt {font-size: 30px;line-height: 50px;}
.level .view-level .det .txt.web {display:block;}
.level .view-level .det .txt.mobile {display:none;}
.level .chart {flex:auto; width:100%; background-color:#fff; padding:195px 0 0 80px;}
.img-book {margin:-270px 0 0 0; position:relative; z-index:3; padding:0 65px;}
.img-book .swiper-slide {width:214px; }
.img-book .swiper-slide img {width:100%;}
.img-book .swiper-slide + .swiper-slide {margin-left:30px;}
.info-book {padding-top:135px; background-color:#000; height:430px; color:#fff; display:flex; justify-content: center; margin:-70px 0 0 0; background: #231815; position:relative;}
.info-book:after {height:70px; position:absolute; bottom:-70px; left:0; right:0; background:url(/images/bg-bottom.png) repeat-x left bottom; content:'';}
.info-book .in {width:1360px; margin:0 auto;display:flex; align-items: flex-start ; }
.info-book .label {font-size: 40px; font-weight: 700; margin-right:45px; padding:10px 0 0 0;}
.info-book .num {font-size:70px; font-weight:700; margin-right:97px;}
.info-book .num strong {font-size:160px; line-height:160px; margin-top:-30px;}
.info-book .det {font-size: 50px; line-height:70px;}

.patent {background-color:#d7e7f5; margin:-30px 0 0 0; padding:135px 0 0 0;}
.patent .title {padding:240px 0 0 0; background:url(/images/img-patent.png) no-repeat center top; font-size:50px; color:#08396a; font-weight:900; line-height:70px; text-align:center; margin-bottom:25px;}
.patent .img-step {margin:0 auto; display:block;}

.help {background-color:#3a8ecd;display:flex; height:780px;}
.help .label {width:38%; flex:none;text-align:right; padding:35px 0 0 0;}
.help .label span {width:443px; color:#fff; display:inline-block; font-weight:700; text-align:left; font-size:40px;}
.help .det {flex:auto; width:100%; background:url(/images/bg-help.png) no-repeat; background-size:cover; font-size:40px; color:#fff; font-weight:700; position:relative;}
.help .det span {display:block; padding:235px 0 0 180px; font-size:50px; color:#fff; line-height:70px; font-weight:400; position:relative;}
.help .det span:before {display:inline-block; width:300px; height:300px; background:url(/images/ico-beacon.png) no-repeat; background-size:100% 100%; content:''; left:-150px; position:absolute; top:235px;}
.help .det span strong {font-weight:700;}
.box-help {width: 1360px; height: 283px; background-color:#fff; margin:-141px auto 0 auto; box-shadow: 3px 4px 22px 11px rgba(0,0,0,0.3); display:flex; position:relative;z-index:3;}
.box-help .left {width:280px; flex:none; height:100%; background-color:#073a6f; padding:30px 40px;}
.box-help .select {appearance: none;background:none; border:none;  border-bottom:1px solid #fff; width:190px; padding:10px 0; background:url(/images/arrow-select.png) no-repeat right center; font-size: 20px; color: #ffffff; font-weight: 700;}
.box-help p {font-size: 50px; color: #ffffff; font-weight:600; padding:40px 0 0 0; font-weight:900;}
.form {padding:0 0 0 40px;}

.form .wrap-check {padding:45px 0 0 0; display:flex; margin-bottom:25px;}
.form .wrap-check .label-checkbox {font-size: 15px;
  color: #7f7f7f; display:flex; align-items: center;}
.form .wrap-check .label-checkbox input { width: 20px;height: 20px; border:1px solid #7f7f7f; margin-right:8px;}
.form .wrap-check a {font-size: 15px; color: #034a96; text-decoration: underline; margin-left:5px;}
.form .wrap-check em {font-size: 15px;color: #b61e22;}
.form .form-input {margin-right:17px; border-bottom: 1px solid #797777; display:inline-block; padding-bottom:7px;}
.form .form-input label {font-size:29px; color:#000; font-weight:700; padding-right:8px; flex:none;}
.form .form-input label em {font-size: 15px;color: #b61e22; vertical-align:top;}
.form .form-input input {background-color:#f6f8fa; padding:10px 22px; width:233px; border:none; font-size:15px;}
.form .wrap-form {margin-top:45px;}
.form .btn-button {width: 185px; height: 54px;background-color: #08396a;font-size: 29px; color: #fff;font-weight: 700;}
.brand {width:1360px; margin:80px auto 60px auto;}
.brand .label {font-size: 35px;color: #08396a; font-weight:900; margin-bottom:35px;}
.brand a {display:flex; flex-direction: column; align-items: center; justify-content: center; width: 441px;height: 175px; border-radius: 20px; background-color: #eeeeef; border:1px solid #eeeeef; font-size: 20px;color: #231815; font-weight:700; text-align:center; opacity:0.5;}
.brand .link {display:flex; gap:18px;}
.brand a:hover,
.brand a.active {background-color:#fff; border-color:#5e5653; opacity:1;}
.brand a img {margin-top:10px;}

.layout-footer {height: 118px; background-color: #ededed; padding:30px 60px 0 60px;}
.layout-footer .flex {display:flex; gap:35px;}
.layout-footer .flex + .flex {margin-top:5px;}
.layout-footer .info {font-size: 10px;  color: #231815; font-weight: 400;}
.layout-footer .info strong {font-size: 10px;color: #231815; font-weight:700; margin-right:5px;}
.layout-footer .copy {font-size: 10px; color: #231815; font-weight: 700; margin-top:5px;}

.fix-top { position:fixed; bottom:175px; width:1360px; left:50%; transform: translateX(-50%); z-index:100;}
.fix-top a{display:inline-block; width:70px; height:70px; background:url(/images/btn-top.png) no-repeat; background-size:100% 100%; position:absolute; left:100%; margin-left:20px; }

.introduce .swiper-label {font-size: 35px; color:#000; width:1385px;  line-height:90px; margin:0 auto;}
.banner-introduce {background-color:#000; text-align:center; height:486px; display:flex; align-items: center; justify-content: center;}
.intro-swiper .swiper-pagination {color:#fff; position:absolute; bottom:35px; left:50%; transform:translateX(-50%); width:1360px; text-align:left; height:0; }
.intro-swiper .buttons {width:1360px; position:absolute;bottom:25px; left:50%; transform:translateX(-50%); height:15px;border:1px solid red;}
.intro-swiper .swiper-button-next,
.intro-swiper .swiper-button-prev {width:15px; height:15px;}
.intro-swiper .swiper-button-next:after,
.intro-swiper .swiper-button-prev:after {font-size:15px; color:#fff;}

.txt-banner {background-color:#000; color:#fff; font-weight:900;font-size: 50px;}
.panda {padding:50px 0 0 0;}
.panda .swiper-slide {width:210px;}
.panda .swiper-slide img {width:100%;}
.panda .swiper-slide + .swiper-slide {margin-left:38px;}

.txt-info {background-color:#000; text-align:center; color:#fff; margin-top:-80px; padding:162px 0 126px 0; position:relative;font-size: 50px; line-height:70px;}
.txt-info:after {background:url(/images/bg-info.png) repeat-x left bottom; height:100px; content:''; position:absolute; bottom:-30px; left:0; right:0;}
.write-img {display:none;}

.info-write {padding:100px 0 240px 0;}
.info-write .title {text-align:center; padding-bottom:70px;}
.info-write .title strong{font-size: 50px;color: #b61e22; display:block; padding-bottom:30px;}
.info-write .title p {font-size: 30px;}
.write {display:block;}
.write .swiper-slide {width:450px;}
.write .swiper-slide + .swiper-slide {margin-left:15px;}
.write .swiper-slide img {Width:100%;}
.write-book {background-color:#f2f2f1; position:relative; border-top:10px solid #93b748;padding:178px 0 210px 0;}
.write-book .title {background:url(/images/txt-write.png) no-repeat; width:826px; height:216px; position:absolute; top:-108px; left:50%; transform:translateX(-50%);}

.step-write {width:1420px; padding:0 35px 58px 35px;}
.step-write .swiper-slide {text-align:center;width:1350px;}
.step-write .swiper-button-next, .step-write .swiper-button-prev {width:70px; height:70px;}
.step-write .swiper-button-next:after, .step-write .swiper-button-prev:after {display:inline-block; width:70px; height:70px; background:url(/images/btn-top.png) no-repeat; font-size:0;}
.step-write .swiper-button-prev {transform:rotate(-90deg);}
.step-write .swiper-button-next {transform:rotate(90deg)}
.step-write .swiper-pagination-bullet {display:inline-block; width: 83px;height: 29px;border-radius: 15px; background-color: #ffffff; border: 1px solid #c11920; opacity:1; cursor: pointer;}
.step-write .swiper-pagination-bullet-active {background-color:#c11920;}
.box-help.red .left {background-color:#b71d21;}
.box-help.pink .left {background-color:#ee4266;}
.box-help.pink .form .btn-button{background-color:#ee4266;}
.banner-benefit {height:486px; background-color:#b31e22; display:flex; flex-direction: column; align-items: center; justify-content: center;position:relative; z-index:3;}
.banner-benefit .btn-view {margin-top:-70px; display:inline-block; }
.view-benefit01 {background-color:#211513; display:flex; align-items: center; justify-content: center;}
.view-benefit01 img {max-width:1110px; width:100%;}
.view-benefit02 {display:flex; align-items: center; justify-content: center; position:relative; z-index:3; padding:0 10px;}
.view-benefit02 img {max-width:1216px; width:100%;}
.view-benefit03 {display:flex; align-items: center; justify-content: center; background-color:#211513; padding:225px 10px 0 10px; margin-top:-170px;}
.view-benefit03 img {max-width:1254px; width:100%;}
.view-alarm {background-color:#211513; padding:60px 0 225px 0; text-align:center;}

.view-benefit03 .web {display:block;}
.view-benefit03 .mobile {display:none;}


.page-alarm .title {font-size: 35px; color:#000; width:1385px;  line-height:90px; margin:0 auto;}
.page-alarm .alarm-banner {display:flex; align-items: center; justify-content: center; position:relative; margin:0 auto;}
.page-alarm .alarm-banner:before {display:inline-block; position:absolute; top:0; left:0; width:40%; bottom:0; content:''; background-color:#ee4266;}

.alarm-banner .mobile {display:none;}
.alarm-banner .web {display:web;}
.page-alarm .alarm-banner:after {display:inline-block; position:absolute; top:0; right:0; bottom:0; width:60%; content:''; background-color:#df152f;}
.page-alarm .alarm-banner img {position:relative; z-index:3;}
.wrap-alarm-swiper{width:1370px; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:3;}
.alarm-swiper {width:347px; position:absolute; top:70px;right:275px; z-index:3; padding-bottom:22px;}
.alarm-swiper .swiper-pagination-bullet {width:78px; height:13px; border-radius:10px; background-color:#fff; opacity:1;}
.alarm-swiper .swiper-pagination-bullet-active {background-color:#df4362;}
.wrap-infor {background-color:#000; padding-bottom:400px;}
.alarm-infor { width:1400px; margin:0 auto; padding:50px 20px 0 20px; color:#fff;}
.alarm-infor .txt-infor {font-size:30px; line-height:50px;}
.alarm-infor .btn-help {background-color:#f0d24e; border-radius:40px; font-size:35px; color:#040000; line-height:86px; text-align:center; margin:40px 0 20px 0; display:inline-block; width:440px;}
.alarm-infor .sub {font-size:20px; margin-bottom:80px;}
.function {width:1510px; margin:100px auto 0 auto; padding-bottom:400px; padding:0 80px;}
.function .box-function {width:720px; border-radius:25px; background-color:#fff; padding:30px; border:1px solid #ee4266;}
.function .box-function + .box-function {margin-top:30px;}
.function .box-function ol .badge {width:225px; border-radius:25px; background-color:#ee4266; margin-left:-80px; color:#fff; font-size:30px; font-weight:700; line-height:58px; display:inline-block; text-align:center; margin-bottom:5px; display:inline-flex; align-items: center; justify-content: center;}
.function .box-function ol li + li {margin-top:30px;}
.function .box-function ol .badge strong {font-size:40px; padding-left:18px; margin-left:10px; display:inline-block; position:relative;}
.function .box-function ol .badge strong:before {display:inline-block; position:absolute;  left:0; height:45px; top:50%; transform:translateY(-50%); border-left:5px solid #fff; border-radius:3px; content:'';}
.function .box-function ol  .strong-txt {font-size:30px; color:#df4362; font-weight:700;}
.function .box-function ol  .strong-txt em{display:block; margin:20px 0; font-size:0;}
.function .box-function ol  .strong-txt em:before {display:inline-block; width:390px; height:7px; background:url(/images/ico-dot.png) repeat-x; content:'';}
.function .box-function ol .det {color:#221815; font-size:30px; line-height:50px;}
.box-help.pink {margin:-160px auto 0 auto;}