html,body {color:#000000; width:100%; max-width: 100%; overflow-x: hidden; word-break: keep-all; }

html { width:100%; max-width: 100%;}
body {position: relative; width: 100%; overflow-y: hidden;}
.title-wrap {width: 100%; text-align: center;}
.title-wrap>h3 {font-size:4rem;}
.title-wrap>p {font-size:1.8rem; font-weight: 300;}

.boundary-1200 {width: 100%; max-width: 1200px; margin: 0 auto;}
.sub-p {color:#616161;}
.vertical-line {width: 1px; height:5rem; background-color:#ddd; margin:0 auto;}

.flex {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.flex-start {width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.flex-2ea {width: 100%;}
.flex-2ea .item {flex-basis: 49%; max-width: 49%;}
.space-between {justify-content: space-between;}
.stretch {align-items: stretch !important;}


.gray-box {background-color:#f5f5f5; padding:3rem; width: 100%; font-size:2.4rem;  line-height: 1.4;}
.yellow {color:#00A3FF;}
.mobile-br {display: none;}






header {width: 100%; background-color:#fff; border-bottom:1px solid #ddd; position: fixed; top:0; left:50%; transform: translateX(-50%) ; z-index: 999; }
header>ul {width:95%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-left:2.5%; margin-right:2.5%; height: 9rem;}

header>ul>li.logo-wrap {width: 20%;}
header>ul>li.logo-wrap>a {font-size:2rem;}

header>ul>li.menu-wrap {width: 65%;}
header>ul>li.menu-wrap>ul {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
header>ul>li.menu-wrap>ul>li {flex-basis: 12.5%; max-width: 12.5%; font-size:1.6rem; font-weight: bold; text-align: center; width: 100%; cursor: pointer;}
header>ul>li.menu-wrap>ul>li:last-child {padding:0.5rem; background-color: #000000; color:#fff; border-radius: 3rem;}
/* header>ul>li.menu-wrap>ul>li:last-child>p {background-color:#000000; border-radius: 3rem; color:#fff; padding: 0.5rem 3rem; } */
header>ul>li.menu-wrap>ul>li:hover {opacity: 0.8;}
header>ul>li.menu-wrap>ul>li>span {background-color:black; color:#fff; width: 2.4rem; height: 2.4rem; display: block; text-align: center; border-radius: 50%; margin-right:1rem; line-height: 1.6; font-size:1.6rem; }

header>ul>li.menu-wrap>ul>li.active{color:#00A3FF;}
header>ul>li.menu-wrap>ul>li.active>span {background-color:#00A3FF; }
header>ul>li.menu-wrap>ul>li.active>span {background-color:#00A3FF; }

header>ul>li.hamberger-wrap {display: none;}

.menu-wrap-mobile {width: 95%; height: calc(100vh - 5rem); display: none; justify-content: center; align-items: center; flex-wrap: wrap; background-color:#fff;}
.menu-wrap-mobile>li {font-size:2rem; font-weight: bold; padding:1.5rem 0rem; width: 100%;  cursor: pointer; padding-left:2rem;}
.menu-wrap-mobile>li#menu-00-m,.menu-wrap-mobile>li#menu-06-m,.menu-wrap-mobile>li#menu-07-m {padding-left:5.3rem;}
.menu-wrap-mobile>li>span {background-color:black; color:#fff; width: 2.4rem; height: 2.4rem; display: block; text-align: center; border-radius: 50%; margin-right:1rem; line-height: 1.6; font-size:1.6rem; }
.menu-wrap-mobile>li.active{color:#00A3FF;}
.menu-wrap-mobile>li.active>span {background-color:#00A3FF; }




.navBtn5 {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    margin: auto;
    text-align: center;
}
.navBtn5 .bar {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: 2px;
    background: #000000;
    transition: transform .3s ease-out .1s;
    -webkit-transition: transform .3s ease-out .1s;
    -moz-transition: transform .3s ease-out .1s;
}
.navBtn5 .bar:nth-child(1) {
    top: 5px;
    transform-origin: left;
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
}
.navBtn5 .bar:nth-child(2) {
    top: 15px;
}
.navBtn5 .bar:nth-child(3) {
    top: 15px;
}
.navBtn5 .bar:nth-child(4) {
    top: 25px;
    transform-origin: right;
    -webkit-transform-origin: right;
    -moz-transform-origin: right;
}


.navBtn5.is-open .bar:nth-child(1) {
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
}
.navBtn5.is-open .bar:nth-child(2) {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
}
.navBtn5.is-open .bar:nth-child(3) {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
}
.navBtn5.is-open .bar:nth-child(4) {
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
}

 /* 사이드 메뉴 연락처 */
 .site-map {width:100%; max-width:100%; height:100vh; background-color:#fff; z-index: 999; position: fixed; top:-100%; right:0; z-index: 1001; transition: all 0.4s; opacity: 0;} 
 .site-map.on {opacity: 1; display: flex; top:0%;}



section:not(#section-00) {width: 100%; padding-top:15rem; padding-bottom:15rem;}
/* section:last-of-type {margin-bottom:15rem;} */
section#section-00 {width: 100%; height: 70rem; padding-top:9rem;  background-color:#ffffff; }
section#section-00 .boundary-1200 {width: 100%; max-width: 1200px; position: relative; }
section#section-00 .boundary-1200 .logo-svg {position: absolute; top:50%; left:100%; transform: translate(-75%,-50%);  animation: ease 5.5s forwards;}
section#section-00 .boundary-1200 .logo-svg path {stroke-dasharray: 2040; stroke-dashoffset: 2040;  animation: line-anim infinite 5.5s ease;}

@keyframes line-anim {

    0% {
        stroke-dashoffset: 4080;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes fill {
    from {
        opacity: 0;
        fill:#ffffff;
        top:60%;
        right:5%;
    }
    to {
        fill: #009ADA;
        opacity: 1;
        top:55%;
        right:0%;
    }
}


section#section-00 .boundary-1200 .text-wrap {width: 100%; z-index: 99;}
section#section-00 .boundary-1200 .text-wrap>h1 {font-size:6rem; font-weight: bold; color:#000000; line-height: 1.4; width: 100%; word-break:keep-all; }
section#section-00 .boundary-1200 .text-wrap>h3 {font-size:2.4rem; font-weight: 300; color:#616161; width: 100%; margin-top:2rem;}

#scroll-wrap {width:100%; position: absolute; bottom:20px; left:50%; transform: translateX(-50%);}
#scroll-wrap .container {width:100%; position: relative;}
#scroll-wrap .scroll {
  position: absolute; bottom: 20px; left: 50%; 
  transform: translatex(-50%);
  z-index: 2;
  display: inline-block;
  color: rgba(0,0,0,0.5);
  transition: opacity .3s;
  font-size:1.6rem;
  font-family: "Play";
}

#scroll-wrap a span {
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  bottom: 5px;
  height: 40px;
  top: -50px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  transform: translateX(-50%);
  width: 4px;    

}

#scroll-wrap a span::before {
    animation: pill 3.5s linear infinite;
    background-image: linear-gradient(to top, #fff 30%, rgba(255,255,255,0.3) 70%);
    border-radius: 2px;
    content: '';
    display: block;
    height: 40px;
    left: 0;
    position: absolute;
    width: 4px;  

}


.box-container {width: 100%;}
.box-container .item {flex-basis: 32.333%; max-width: 32.333%;  padding:4.5rem 3em; margin:0.5%; box-shadow: 6px 6px 14px 1px rgba(0, 0, 0, .12); border:1px solid #fff; cursor: pointer;}
.box-container .item:hover {color:#00A3FF; border:1px solid #00A3FF;}
.box-container .item:hover>ul>li:first-child>p {background-color:#00A3FF;}
.box-container .item>ul {display: flex; flex-direction: column;}
.box-container .item>ul>li:first-child>p {font-size:1.6rem; background-color:#000000; color:#fff; border-radius: 2rem; display: inline-block; padding:0.3rem 2rem; font-weight: bold;}

.box-container .item>ul>li:nth-child(2)>h4 {font-size:3.6rem; font-weight: bold;}
.box-container .item>ul>li:nth-child(3) {font-size:1.6rem;}
.box-container .item.write {background-color:#000000; color:#fff;}
.box-container .item.write>ul>li:first-child>p {background-color:#ffffff; color:#000000;}
.box-container .item.write>ul>li:nth-child(3) {color:rgba(255,255,255,0.5);}



.contents-wrap {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.contents-wrap>li:first-child {flex-basis: 15%; max-width: 15%;}
.contents-wrap>li:first-child>h3 {display: inline-block; font-size:1.6rem; background-color:#000000; color:#fff; padding:0.3rem 2rem; border-radius: 2rem;}
.contents-wrap>li:first-child>h2 {display: inline-block; font-size:4rem;}
.contents-wrap>li:last-child {flex-basis: 85%; max-width: 85%; padding-top:3rem;}
.contents-wrap>li:last-child .text-wrap {border-bottom:1px solid #ddd; padding-bottom:1rem; z-index: 1;}
.contents-wrap>li:last-child .text-wrap .button-wrap {display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top:1rem;}
.contents-wrap>li:last-child .text-wrap .button-wrap .form-btn {position: relative; z-index: 999; cursor: pointer;}
.contents-wrap>li:last-child .text-wrap .button-wrap .form-btn:hover {opacity: 1;}
.contents-wrap>li:last-child .text-wrap .button-wrap .form-btn:hover>ul {opacity: 1;}
.contents-wrap>li:last-child .text-wrap .button-wrap .form-btn>ul {position: absolute; top:4.7rem; background-color:#006caa; left:0; width: 100%; opacity: 0; transition: all 0.4s; box-shadow: rgba(255, 255, 255, 0.1) 0px 8px 24px, rgba(255, 255, 255, 0.1) 0px 16px 56px, rgba(255, 255, 255, 0.1) 0px 24px 80px;}
.contents-wrap>li:last-child .text-wrap .button-wrap .form-btn>ul>li>a {padding:0.5rem 1rem; color:#fff; font-size:1.4rem; text-align: left;}
.contents-wrap>li:last-child .text-wrap .button-wrap .form-btn>ul>li>a:hover {text-decoration: underline; background-color:#004e7c;}

.button {border:1px solid #0085CF; padding: 1rem 3rem; font-size:1.6rem; transition: all 0.4s;}
.button:hover {opacity: 0.7;}
.button.border-button {color:#00A3FF; margin-right:1rem; background-color:#fff;}
.button.bg-button {color:#fff; background-color:#00A3FF;}
.contents-wrap>li:last-child .text-wrap>h2 {font-size:4rem; font-weight: 300;}
.contents-wrap>li:last-child .text-wrap>p {font-size:1.6rem; font-weight: 300;}
.contents-wrap>li:last-child .text-wrap>span  {color:#a6a6a6; padding: 0 1rem; font-size:1.8rem;}
.contents-wrap>li:last-child .content {padding-top:4rem; align-items: flex-start; width: 100%;}
.contents-wrap>li:last-child .content .menu {flex-basis: 19%; max-width: 19%; margin: 0.5%;}
.contents-wrap>li:last-child .content .menu>li:first-child {background-color:#000000; border:1px solid #000000; color:#fff; padding:0.5rem 3rem; font-size:1.6rem; text-align: center;}
.contents-wrap>li:last-child .content .menu>li {border:1px solid #ddd; font-size:1.4rem; margin-bottom:0.2rem;  }
.contents-wrap>li:last-child .content .menu>li>a {position: relative; overflow: hidden; padding:0.5rem 1rem; background:#fff;}
.contents-wrap>li:last-child .content .menu>li>a::before {content:'예시보기 →'; width:100%; height:100%; background-color:rgba(0,163,255,0.8); color:#fff; font-size:1.4rem; opacity: 0; transition: all 0.4s; position: absolute; left:0%; top:100%; text-align: center; vertical-align: middle; line-height: 2.4; z-index: 1;}
.contents-wrap>li:last-child .content .menu>li>a:hover::before {opacity: 1; top:0;}
.contents-wrap>li:last-child .content .menu>li>a>ul {width: 90%; margin-left:10%; opacity: 0.7;}
.need-p {font-size:1.6rem; text-align: left; flex-basis: 100%; max-width: 100%; margin-bottom:1rem;}


#section-01 {background-color:#f9f9f9;}
#section-01 #tip-wrap {width: 100%; margin-top:3rem; justify-content: space-between; align-items: stretch;}
#section-01 #tip-wrap .item {padding:3rem 3rem; border:1px solid #ddd; margin-bottom:2%; background-color:#fff;}
#section-01 #tip-wrap .item h4 {font-size:2rem; margin-bottom:1rem;}
#section-01 #tip-wrap .item h4>span {font-size:1.4rem; background-color:#FF334B; color:#fff; padding:0.5rem 2rem; border-radius: 2rem; margin-right:1rem; vertical-align: middle;} 
#section-01 #tip-wrap .item h4>.orange-bg {background-color:#FB8E00;}
#section-01 #tip-wrap .item p {font-size:1.6rem; line-height: 1.4;}

#section-02 .flex-2ea .item {margin-bottom:5rem;}
#section-02 .flex-2ea .item .text-wraps>h3 {font-size:2rem; line-height: 1.3; margin-bottom:0.5rem;}
#section-02 .flex-2ea .item .text-wraps>p {font-size:1.6rem; font-weight: 300; padding-bottom:1rem; line-height: 1.4;}
#section-02 .flex-2ea .item .img-wrap {width: 100%;}
#section-02 .flex-2ea .item .img-wrap>img {width: 100%;}

#section-03 {background-color:#f9f9f9;}
#section-03 .flex-2ea .item {padding:3rem; opacity: 0.5; transition: all 0.2s;}
#section-03 .flex-2ea .item:hover {opacity: 1; box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; border-radius: 0.5rem;}
#section-03 .flex-2ea .item .text-wraps>h2 {font-size:3.4rem;}
#section-03 .flex-2ea .item .text-wraps>p {font-size:1.8rem;}
#section-03 .flex-2ea .item .text-wraps>p>.note {font-size:1.4rem; opacity: 0.7; line-height: 1.4; margin-bottom:2rem;}
#section-03 .flex-2ea .item .text-wraps>a {display: inline-block; margin-top:2rem;}
#section-03 .flex-2ea .item .text-wraps> .gray-box {font-size:1.6rem; margin-top:2rem;}



#section-04 .flex-2ea .item {padding:3rem; opacity: 0.5; transition: all 0.2s;}
#section-04 .flex-2ea .item:hover {opacity: 1; box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; border-radius: 0.5rem;}
#section-04 .flex-2ea .item .text-wraps>h2 {font-size:3.4rem;}
#section-04 .flex-2ea .item .text-wraps>p {font-size:1.8rem;}
#section-04 .flex-2ea .item .text-wraps>p>.note {font-size:1.4rem; opacity: 0.7; line-height: 1.4; margin-bottom:2rem;}
#section-04 .flex-2ea .item .text-wraps>a {display: inline-block; margin-top:2rem;}
#section-04 .flex-2ea .item .text-wraps> .gray-box {font-size:1.6rem; margin-top:2rem;}


#section-05 {background-color:#f9f9f9;}
#section-05 .content.ssl-wrap {width: 100%;}
#section-05 .content.ssl-wrap>h3 {font-size:4rem;}
#section-05 .content.ssl-wrap>h4 {font-size:2.4rem;}
#section-05 .content.ssl-wrap>p {font-size:1.8rem; font-weight: 300;}
#section-05 .content.ssl-wrap>a {color:#0085CF; text-align: right; text-decoration: underline; font-size:1.6rem; display: inline-block; margin-top:2rem; float: right;}
#section-05 .content.ssl-wrap-min {border-bottom:1px solid #ddd;}
#section-05 .content.ssl-wrap-min.flex-2ea {justify-content: space-between !important; }
#section-05 .content.ssl-wrap-min.flex-2ea .item {display: flex; border:1px solid #ddd; padding:4rem 3rem; margin-bottom:2%; background-color:#fff; justify-content: flex-start;}
#section-05 .content.ssl-wrap-min.flex-2ea .item>div>h4 {font-size:2rem;}
#section-05 .content.ssl-wrap-min.flex-2ea .item>div>p {font-size:1.6rem; color:#616161; line-height: 1.4;}

#section-05 .content.ssl-button {width: 100%; text-align: center;}
#section-05 .content.ssl-button>div>h3 {font-size:4rem;}
#section-05 .content.ssl-button>div>p {font-size:2rem; margin-bottom:2rem;}
#section-05 .content.ssl-button>div>a {display: inline-block;}


#section-06 .contents-wrap>li:last-child {padding-top:0;}
#section-06 .contents-wrap>li:last-child .faq-wrap {width: 100%; padding-top:2rem; padding-bottom:2rem; padding-left:1rem; padding-right:1rem;border-bottom:1px solid #ddd; transition: all 0.4s;}
#section-06 .contents-wrap>li:last-child .faq-wrap:hover {cursor: pointer;}
#section-06 .contents-wrap>li:last-child .faq-wrap:hover>li>h3 {color:#00A3FF;}
#section-06 .contents-wrap>li:last-child .faq-wrap>li {display: flex; justify-content: space-between;}
#section-06 .contents-wrap>li:last-child .faq-wrap>li:last-child {width: 80%; display: none;}
#section-06 .contents-wrap>li:last-child .faq-wrap>li>h3 {font-size:2rem;}
#section-06 .contents-wrap>li:last-child .faq-wrap>li>span {max-width: 3rem; transition: all 0.4s;}
#section-06 .contents-wrap>li:last-child .faq-wrap.on>li>span {transform: rotate(-180deg);}
#section-06 .contents-wrap>li:last-child .faq-wrap>li>p {font-size:1.8rem; padding-top:1.6rem;}


.black-background {background-color:#000000; color:#fff;}
.black-background .boundary-1200 {color:#fff;}
.black-background .boundary-1200 .text-wrap {border-bottom:0 !important;}
.black-background .boundary-1200 .contact-us {width: 100%; margin-top:3rem;}
.black-background .boundary-1200 .contact-us>.flex-2ea {display: flex; justify-content: space-between;}
.black-background .boundary-1200 .contact-us>.flex-2ea .item {background-color:rgba(255,255,255,0.035); color:#fff; padding:3rem;}
.black-background .boundary-1200 .contact-us>.flex-2ea .item>h2 {font-size:3rem;}
.black-background .boundary-1200 .contact-us>.flex-2ea .item>h3 {font-size:2.4rem; font-weight: 600; line-height: 1.2; color:rgba(255,255,255,0.6);}
.black-background .contents-wrap>li:last-child {padding-top:0;}
.black-background .contents-wrap>li:last-child .content {padding-top:0; margin-bottom:1rem;}
.black-background .contents-wrap>li:last-child table {width: 100%;  border-collapse: separate; border-spacing:0.5rem; border:2px solid #fff; transition: all 0.4s;}
.black-background .contents-wrap>li:last-child table:hover {box-shadow: rgba(255, 255, 255, 0.5) 0px 7px 29px 0px;}
.black-background .contents-wrap>li:last-child table thead tr th {font-size:2rem; text-align: center; font-weight: bold; padding:1rem 2rem; border-bottom:2px solid rgba(255,255,255,0.3); }
.black-background .contents-wrap>li:last-child table thead tr th:last-child {text-align: center;}
.black-background .contents-wrap>li:last-child table tbody tr td {font-size:1.6rem; text-align: left;  padding:1rem 2rem; border-bottom:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.75); }
.black-background .contents-wrap>li:last-child table tbody tr td>p {font-size:1.2rem; padding-left:2rem; position: relative;}
.black-background .contents-wrap>li:last-child table tbody tr td>p::before {content:''; position: absolute; top:0.8rem; left:1rem; width:2px; height:2px; background-color:#fff;}
.black-background .contents-wrap>li:last-child table tbody tr td.white {color:rgba(255,255,255,1);}
.black-background .contents-wrap>li:last-child table tbody tr td.center {text-align: center;}