/*-------------------------------------------------------------------
    파일정의 : 레이아웃
    속성순서 : 레이아웃, 사이징, 박스모양, 글자모양, 문단모양, 기타모양

    1210, 1460
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
    @공통
-------------------------------------------------------------------*/
#skip-nav {height:0}
#skip-nav a {display: block; position: absolute; left: 0; top: -100px; width: 100%; height: 1px; text-align: center}
#skip-nav a:focus, #skip a:active {position: absolute; top: 0; z-index: 120; height: 25px; padding: 10px 0; font-size: 1.4em; font-weight: 700; color: #36348f; background: #fff;}

.dim {background-color: #000000; opacity: 0.65; position: fixed; z-index: 98; width: 100vw; height: 100vh; left: 0; top: 0;}

/* let's value up */
.levalup {padding-top: 103px; padding-bottom: 127px;}
.levalup .container {max-width: 1460px;}
.levalup .title-wrap {text-align: center;}
.levalup .title-wrap .tit {font-family: 'Play'; font-weight: 700; color: #DDDDDD; font-size: 52px; line-height: 1.326;}
.levalup .title-wrap .tit span {color: #243946;}
.levalup .title-wrap .tit span.blue {color: #7BABD0;}
.levalup .title-wrap .tit-sub {font-size: 20px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.5; margin-top: 12px;}
.levalup .title-wrap .txt {padding-top: 42px; line-height: 1.1875; color: #A9A9A9; position: relative;}
.levalup .title-wrap .txt::before {content: ""; width: 40px; height: 1px; background: #DEDEDE; position: absolute; top: 21px; left: 50%; transform: translateX(-50%)}
.levalup .diagram {margin-top: 70px; display: flex; align-items: center; justify-content: center;}
.levalup .diagram .aos-animate {border: 2px solid #7BABD0 !important;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(36,69,88,0.3);
    box-shadow: 0px 0px 10px 0px rgba(36,69,88,0.3);
}
.levalup .diagram .program {border: 1px solid #E6E6E6; border-radius: 20px; width: 960px;}
.levalup .diagram .program .head {text-align: center; background: #5584A0; color: #ffffff; padding: 18px 0 24px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.levalup .diagram .program .head .tit {font-family: 'Play'; font-size: 24px; font-weight: 700;}
.levalup .diagram .program .head .txt {opacity: 0.7; letter-spacing: -0.05em; font-size: 15px; font-weight: 600; margin-top: 4px;}
.levalup .diagram .program .cont {padding: 0 25px;}
.levalup .diagram .program .cont .part {display: flex; padding: 30px 0; border-bottom: 2px dotted rgba(36, 57, 70, 0.33);}
.levalup .diagram .program .cont .part .part-item {flex: 1 0; border: 1px solid #E6E6E6; border-radius: 10px; background-color: #ffffff; text-align: center; padding-top: 30px; padding-bottom: 26px;}
.levalup .diagram .program .cont .part .part-item.aos-animate {transform: scale(1.127);}
.levalup .diagram .program .cont .part .part-item + .part-item {margin-left: 11px;}
.levalup .diagram .program .cont .part .part-item img {margin:0 auto; width: 48px;}
.levalup .diagram .program .cont .part .part-item .tit01 {margin-top: 22px; font-size: 18px; font-family: 'Play'; font-weight: 700;}
.levalup .diagram .program .cont .part .part-item:nth-child(1) .tit01 {color: #7BABD0;}
.levalup .diagram .program .cont .part .part-item:nth-child(2) .tit01 {color: #457DAF;}
.levalup .diagram .program .cont .part .part-item:nth-child(3) .tit01 {color: #6998AB;}
.levalup .diagram .program .cont .part .part-item:nth-child(4) .tit01 {color: #406882;}
.levalup .diagram .program .cont .part .part-item:nth-child(5) .tit01 {color: #1A374D;}
.levalup .diagram .program .cont .part .part-item .tit02 {margin-top: 2px; line-height: 1.3125;}
.levalup .diagram .program .cont .type {padding: 30px 0;}
.levalup .diagram .program .cont .type .type-item {background-color: #F6F7F8; border-radius: 10px; display: flex; align-items: center; justify-self: center; height: 62px; justify-content: center}
.levalup .diagram .program .cont .type .type-item.aos-animate {transform: scale(1.033);}
.levalup .diagram .program .cont .type .type-item + .type-item {margin-top: 10px;}
.levalup .diagram .program .cont .type .type-item p {font-size: 18px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.3333; text-align: center; width: 100%; flex: none; word-break: keep-all;}
.levalup .diagram .value-up {width: 150px; border: 2px dotted #243946; border-radius: 20px; text-align: center; position: relative; margin-left: 30px; padding-top: 80px; padding-bottom: 88px;}
.levalup .diagram .value-up::before {content: ""; position: absolute; width: 18px; height: 20px; background: url('../img/icon/ico_arr_levalup.png') no-repeat center; background-size: 100%; top: 50%; left: -6px; transform: translate(-100%, -50%);}
.levalup .diagram .value-up img {margin: 0 auto; width: 31px;}
.levalup .diagram .value-up p {margin-top: 20px; font-family: 'Play'; font-weight: 700; line-height: 1.4; font-weight: 700;}
.levalup .diagram .value-up p strong {font-size: 20px; font-weight: 700;}
.levalup .diagram .benefits {border: 1px solid #E6E6E6; background: #F8F8F8; margin-left: 30px; width: 240px; position: relative; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.levalup .diagram .benefits::before {content: ""; position: absolute; width: 18px; height: 20px; background: url('../img/icon/ico_arr_levalup.png') no-repeat center; background-size: 100%; top: 50%; left: -6px; transform: translate(-100%, -50%);}
.levalup .diagram .benefits .head {text-align: center; background: #243946; color: #ffffff; padding: 11px 0 14px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.levalup .diagram .benefits .head .tit {font-family: 'Play'; font-size: 24px; font-weight: 700;}
.levalup .diagram .benefits .cont {padding: 40px 20px 20px; text-align: center;}
.levalup .diagram .benefits .cont img {margin: 0 auto; width: 50px;}
.levalup .diagram .benefits .cont .txt {margin-top: 11px; font-size: 20px; font-family: 'Play'; font-weight: 700; line-height: 1.35; margin-bottom: 30px;}
.levalup .diagram .benefits .cont .benefits-item {display: flex; letter-spacing: -0.05em; align-items: center; justify-content: center; background-color: #ffffff; border: 1px solid #EFEFEF; border-radius: 10px; height: 62px; font-weight: 500;}
.levalup .diagram .benefits .cont .benefits-item + .benefits-item {margin-top: 10px;}
.levalup .diagram .benefits .cont .benefits-item p {font-size: 18px;}
.levalup .diagram .benefits .cont .benefits-item p span {display: inline-block; font-size: 16px; color: #7BABD0; margin-left: 8px;}

/*-------------------------------------------------------------------
    @header
-------------------------------------------------------------------*/
#header{color: #ffffff; width: 100%; position: absolute; left: 0; top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); z-index: 97; transition: all 0.3s;}
#header.on{position: fixed; background-color: #ffffff; color: #222222; border-bottom-color: #E8E8E8;}

#header .logo {width: 134px; height: 50px; float: left; margin-top: 16px;}
#header .logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; background-image: url('../img/common/logo_w.png'); background-repeat: no-repeat; background-size: 100%; background-position: center;}

#header .btn-menu {width: 4.5rem; height: 4.5rem; float: right; position: relative; margin-top: 2.7rem;}
#header .btn-menu > span {position:absolute; top:26.666%; left:20%; width:60%; height:5%; background-color:#fff;}
#header .btn-menu > span:nth-child(2) {top: 46.666%; transition: visibility 0s .15s;}
#header .btn-menu.on > span:nth-child(2) {visibility: hidden; transition: visibility 0s;}
#header .btn-menu > span:nth-child(3) {top:66.6666%;}
#header .btn-menu > span:nth-child(1),
#header .btn-menu > span:nth-child(3) {transition:top .15s .15s, transform .15s;}
#header .btn-menu.on > span:nth-child(1),
#header .btn-menu.on > span:nth-child(3) {top:40%; transform:rotate(45deg); transition:top .15s, transform .15s .15s;}
#header .btn-menu.on > span:nth-child(3) {transform:rotate(-45deg);}

#header.on .logo a {background-image: url('../img/common/logo_b.png');}

#header.on .btn-menu > span{background-color:#222222;}

/*-------------------------------------------------------------------
    @footer
-------------------------------------------------------------------*/
#footer { background-color: #262626;}

#footer .container {max-width: 1460px; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}

#footer .logo {width: 121px; height: 45px;}
#footer .logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; background-image: url('../img/common/footer_logo.png'); background-repeat: no-repeat; background-size: 100%; background-position: center;}

#footer .family {border-top: 1px solid #F1F1F1; padding: 36px 0; background: #ffffff;}
#footer .family .swiper-slide {border: 1px solid #F1F1F1; width: 230px; height: 80px; display: flex; align-items: center; justify-content: center;}
#footer .family .swiper-slide img {flex: none; max-height: 66px;}

#footer .info {border-top: 1px solid #F1F1F1; color: #999999; border-bottom: 1px solid #999999; padding-top: 30px; padding-bottom: 40px; overflow: hidden;}

#footer .company {}
#footer .company p {margin-top: 30px; overflow: hidden;}
#footer .company p span {float: left; position: relative; line-height: 1.666; font-size: 15px; letter-spacing: -0.05em;}
#footer .company p * + span {padding-left: 19px;}
#footer .company p * + span::before {content: "|"; position: absolute; left: 9px;}

#footer address{line-height: 1.666; font-size: 15px; letter-spacing: -0.05em; font-style: normal;}

#footer .link {overflow: hidden; margin-top: 6px;}
#footer .link > div {width: 210px; float: left;}
#footer .link .tit {font-size: 15px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.2;}
#footer .link ul {margin-top: 20px; color: #999999; font-size: 14px; line-height: 1.5714; letter-spacing: -0.05em;}

#footer .copyright{color: #999999; padding: 25px 0; font-size: 13px; font-weight: 500; letter-spacing: -0.05em;}

#footer .sns_wrap {display: flex; width: 100%; padding-top: 20px;}
#footer .sns_list {margin-right: 10px;}
#footer .sns_list:last-child {margin-right: 0}
#footer .sns_list img {}

/*-------------------------------------------------------------------
    @content
-------------------------------------------------------------------*/
#content{}

.container{ margin-left: auto; margin-right: auto; position: relative; max-width: 1210px; padding-left: 20px; padding-right: 20px;}
.container::after{ display: block; clear: both; content: ""; }

.has-padding{}

/*-------------------------------------------------------------------
    @floating
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    @popup
-------------------------------------------------------------------*/
.popup {max-width: 930px; width: calc(100vw - 40px); position: fixed; top: 180px; left: 50%; transform: translateX(-50%); background-color: #FFFFFF; border-radius: 20px; display: none; z-index: 99; padding: 60px;}
.popup.on {display: block;}

.popup .btn-close {position: absolute; width: 40px; height: 40px; background: url('../img/icon/ico_pop_close.png') no-repeat center; background-size: 100%; right: 25px; top: 25px; text-indent: -9999px;}

.popup > .title {text-align: center; font-size: 32px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1875;}
.popup > .txt {text-align: center; margin-top: 15px; color: #000000; opacity: 0.5; letter-spacing: -0.05em; line-height: 1.1875;}

#downloadGuide .form {margin-top: 60px;}
#downloadGuide .form .inp-wrap {margin-bottom: 35px;}
#downloadGuide .form button {display: block; width: 100%; margin-top: 25px; line-height: 65px; height: 65px; text-align: center; color: #ffffff; background-color: #7BABD0; font-size: 18px; font-weight: 500;}

#privacyPolicy .terms {width: 100%; height: 442px; margin-top: 40px; line-height: 1.5; font-size: 16px; overflow: auto;}
#privacyPolicy .terms strong {font-weight: 700;}

#inquiryDiagnostic .form {margin-top: 60px;}
#inquiryDiagnostic .form .inp-wrap {margin-bottom: 35px;}
#inquiryDiagnostic .form button {display: block; width: 100%; margin-top: 25px; line-height: 65px; height: 65px; text-align: center; color: #ffffff; background-color: #7BABD0; font-size: 18px; font-weight: 500;}

@media screen and (min-width:1210px) {
    /*-------------------------------------------------------------------
        @header
    -------------------------------------------------------------------*/
    #header .container {max-width: 100%; padding-left: 50px; padding-right: 50px;}

    #header .logo {width: 134px; height: 50px; margin-top: 16px;}

    #header .btn-menu {display: none;}

    .menu-wrap {width: calc(100% - 134px); display: flex; justify-content: flex-end; align-items: center;}
    .menu-wrap .gnb-bg {width: 100vw; position: absolute; left: 0; top: 100%; background-color: #ffffff; box-shadow: 0px 30px 40px #00000040; margin-top: 1px;}
    .menu-wrap::after {display: block; clear: both; content: "";}
    .menu-wrap .tel {flex: none; overflow: hidden; font-weight: 700; font-family: 'Play'; line-height: 1.75;}
    .menu-wrap .tel > * {float: left;}
    .menu-wrap .tel span {position: relative; margin-right: 10px; padding-right: 11px;}
    .menu-wrap .tel span::after {content: "|"; position: absolute; right: 0; font-weight: 500; font-family: 'Pretendard'; opacity: 0.2;}

    #gnb {margin: 0 auto; display: flex; justify-content: center; flex: none; position: relative;}
    #gnb a {display: block;}

    #gnb > li:hover .depth01::after,
    #gnb > li.on .depth01::after {opacity: 1;}
    #gnb > li.on .depth01 {color: #7BABD0}

    #gnb .depth01 {line-height: 80px; padding: 0 13px; font-weight: 700; position: relative;}
    #gnb .depth01::after {width: calc(100% - 26px); height: 2px; background-color: #7BABD0; content: ""; position: absolute; bottom: 0; left: 13px; opacity: 0; transition: all 0.3s}
    #gnb .depth01 span{transition: all 0.3s; text-align: center; font-size: 18px;}
    #gnb .depth01 span.ko{opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
    #gnb .depth01:hover span:not(.ko){opacity: 0;}
    #gnb .depth01:hover span.ko{opacity: 1;}

    #gnb .depth02 {display: none; color: #000000}
    #gnb .depth02 {position: absolute; padding: 36px 13px 45px; width: fit-content; z-index: 96;}
    #gnb .depth02 .title-wrap{font-family: 'Play'; font-weight: 700; letter-spacing: -0.05em;}
    #gnb .depth02 .title-wrap .tit01 {font-size: 24px;}
    #gnb .depth02 .title-wrap .tit02 {line-height: 1.3125; color: #7BABD0; margin-top: 5px;}
    #gnb .depth02 ul {margin-top: 24px; letter-spacing: -0.05em;}
    #gnb .depth02 ul li a {font-size: 15px; line-height: 2;}
}

@media screen and (min-width:1460px) {
    #gnb .depth01 {padding: 0 25px;}
    #gnb .depth01::after {width: calc(100% - 50px); left: 25px;}

    #gnb .depth02 {padding: 36px 25px 45px;}
}

@media screen and (max-width: 1460px) {
    /* let's value up */
    .levalup {padding-top: 84px; padding-bottom: 90px;}
    .levalup .title-wrap .tit {font-size: 36px; line-height: 1.25;}
    .levalup .title-wrap .tit-sub {font-size: 24px; line-height: 1.875; margin-top: 14px;}
    .levalup .title-wrap .txt {padding-top: 47px; line-height: 1.5; font-size: 24px}
    .levalup .title-wrap .txt::before {width: 60px; height: 1px; top: 24px;}
    .levalup .diagram {margin-top: 60px; flex-direction: column;}
    .levalup .diagram .program {border-radius: 15px; width: 100%;}
    .levalup .diagram .program .head {padding: 33px 36px 36px; border-top-left-radius: 15px; border-top-right-radius: 15px;}
    .levalup .diagram .program .head .tit {font-size: 30px; line-height: 1.35;}
    .levalup .diagram .program .head .txt {font-size: 23px; line-height: 1.2; margin-top: 8px;}
    .levalup .diagram .program .cont {padding: 0 30px;}
    .levalup .diagram .program .cont .part {flex-direction: column; padding: 23px 0 30px; border-bottom: 2px dotted rgba(36, 57, 70, 0.33);}
    .levalup .diagram .program .cont .part .part-item {flex: none; width: 100%; border-radius: 15px; padding-top: 23px; padding-bottom: 27px; padding-left: 150px; position: relative; text-align: left;}
    .levalup .diagram .program .cont .part .part-item.aos-animate {transform: scale(1.068);}
    .levalup .diagram .program .cont .part .part-item + .part-item {margin-left: 0; margin-top: 15px;}
    .levalup .diagram .program .cont .part .part-item img {position: absolute; left: 45px; top: 50%; transform: translateY(-50%); width: 50px;}
    .levalup .diagram .program .cont .part .part-item .tit01 {font-size: 30px; line-height: 1.35; margin-top: 0;}
    .levalup .diagram .program .cont .part .part-item .tit02 {margin-top: 8px; font-size: 26px; line-height: 1.176;}
    .levalup .diagram .program .cont .type {padding: 30px 0;}
    .levalup .diagram .program .cont .type .type-item {border-radius: 15px; min-height: 93px; height: auto;}
    .levalup .diagram .program .cont .type .type-item.aos-animate {transform: scale(1.068);}
    .levalup .diagram .program .cont .type .type-item + .type-item {margin-top: 15px;}
    .levalup .diagram .program .cont .type .type-item p {font-size: 27px; line-height: 1.3333;}
    .levalup .diagram .value-up {width: 100%; border: 2px dotted #243946; border-radius: 15px; margin-left: 0; margin-top: 57px; padding-top: 27px; padding-bottom: 21px; display: flex; align-items: center; justify-content: center;}
    .levalup .diagram .value-up::before {width: 27px; height: 30px; top: -15px; left: 50%; transform: translate(-50%, -100%) rotate(90deg);}
    .levalup .diagram .value-up img {flex: none; width: 47px; margin: 0; margin-right: 23px; width: 47px;}
    .levalup .diagram .value-up p {margin-top: 0; font-size: 24px;}
    .levalup .diagram .value-up p strong {font-size: 30px;}
    .levalup .diagram .benefits {margin-left: 0; width: 100%; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 57px;}
    .levalup .diagram .benefits::before {width: 27px; height: 30px; top: -15px; left: 50%; transform: translate(-50%, -100%) rotate(90deg);}
    .levalup .diagram .benefits .head {padding: 23px 0; border-top-left-radius: 15px; border-top-right-radius: 15px;}
    .levalup .diagram .benefits .head .tit {font-size: 30px;}
    .levalup .diagram .benefits .cont {padding: 60px 30px 30px;}
    .levalup .diagram .benefits .cont img {margin: 0 auto; width: 75px;}
    .levalup .diagram .benefits .cont .txt {margin-top: 17px; font-size: 30px; margin-bottom: 45px;}
    .levalup .diagram .benefits .cont .benefits-item {border-radius: 15px; height: 93px;}
    .levalup .diagram .benefits .cont .benefits-item + .benefits-item {margin-top: 15px;}
    .levalup .diagram .benefits .cont .benefits-item p {font-size: 27px; line-height: 1.16666;}
    .levalup .diagram .benefits .cont .benefits-item p span {font-size: 24px; margin-left: 12px;}

    /*-------------------------------------------------------------------
        @popup
    -------------------------------------------------------------------*/
    .popup {top: 83px; border-radius: 20px; padding: 90px 45px 45px;}

    .popup .btn-close {width: 45px; height: 45px; right: 30px; top: 30px;}

    .popup > .title {font-size: 27px; line-height: 1.1666;}
    .popup > .txt {margin-top: 17px; font-size: 21px; line-height: 1.5714;}

    #downloadGuide .form {margin-top: 72px;}
    #downloadGuide .form .inp-wrap {margin-bottom: 39px;}
    #downloadGuide .form button {margin-top: 39px; line-height: 75px; height: 75px; font-size: 21px;}

    #privacyPolicy .terms {height: 792px; margin-top: 15px; font-size: 24px;}

    #inquiryDiagnostic .form {margin-top: 72px;}
    #inquiryDiagnostic .form .inp-wrap {margin-bottom: 39px;}
    #inquiryDiagnostic .form button {margin-top: 39px; line-height: 75px; height: 75px; font-size: 21px;}
}

@media screen and (max-width:1210px) {
    /* let's value up */
    .levalup {padding-top: 8.4rem; padding-bottom: 9rem;}
    .levalup .title-wrap .tit {font-size: 3.6rem;}
    .levalup .title-wrap .tit-sub {font-size: 2.4rem; margin-top: 1.4rem;}
    .levalup .title-wrap .txt {padding-top: 4.7rem; font-size: 2.4rem}
    .levalup .title-wrap .txt::before {width: 6rem; top: 2.4rem;}
    .levalup .diagram {margin-top: 6rem;}
    .levalup .diagram .program {border-radius: 1.5rem;}
    .levalup .diagram .program .head {padding: 3.3rem 3.6rem 3.6rem; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;}
    .levalup .diagram .program .head .tit {font-size: 3rem;}
    .levalup .diagram .program .head .txt {font-size: 2.3rem; margin-top: 0.8rem;}
    .levalup .diagram .program .cont {padding: 0 3rem;}
    .levalup .diagram .program .cont .part {padding: 2.3rem 0 3rem;}
    .levalup .diagram .program .cont .part .part-item {border-radius: 1.5rem; padding-top: 2.3rem; padding-bottom: 2.7rem; padding-left: 15rem;}
    .levalup .diagram .program .cont .part .part-item + .part-item {margin-top: 1.5rem;}
    .levalup .diagram .program .cont .part .part-item img {left: 4.5rem; width: 5rem;}
    .levalup .diagram .program .cont .part .part-item .tit01 {font-size: 3rem;}
    .levalup .diagram .program .cont .part .part-item .tit02 {margin-top: 0.8rem; font-size: 2.6rem;}
    .levalup .diagram .program .cont .type {padding: 3rem 0;}
    .levalup .diagram .program .cont .type .type-item {border-radius: 1.5rem; min-height: 9.3rem;}
    .levalup .diagram .program .cont .type .type-item + .type-item {margin-top: 1.5rem;}
    .levalup .diagram .program .cont .type .type-item p {font-size: 2.7rem;}
    .levalup .diagram .value-up {border-radius: 1.5rem; margin-top: 5.7rem; padding-top: 2.7rem; padding-bottom: 2.1rem;}
    .levalup .diagram .value-up::before {width: 2.7rem; height: 3rem; top: -1.5rem;}
    .levalup .diagram .value-up img {width: 4.7rem; margin-right: 2.3rem;}
    .levalup .diagram .value-up p {font-size: 2.4rem;}
    .levalup .diagram .value-up p strong {font-size: 3rem;}
    .levalup .diagram .benefits {border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; margin-top: 5.7rem;}
    .levalup .diagram .benefits::before {width: 2.7rem; height: 3rem; top: -1.5rem;}
    .levalup .diagram .benefits .head {padding: 2.3rem 0; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;}
    .levalup .diagram .benefits .head .tit {font-size: 3rem;}
    .levalup .diagram .benefits .cont {padding: 6rem 2rem 2rem;}
    .levalup .diagram .benefits .cont img {margin: 0 auto; width: 7.5rem;}
    .levalup .diagram .benefits .cont .txt {margin-top: 17px; font-size: 3rem; margin-bottom: 4.5rem;}
    .levalup .diagram .benefits .cont .benefits-item {border-radius: 1.5rem; height: 9.3rem;}
    .levalup .diagram .benefits .cont .benefits-item + .benefits-item {margin-top: 1.5rem;}
    .levalup .diagram .benefits .cont .benefits-item p {font-size: 2.7rem;}
    .levalup .diagram .benefits .cont .benefits-item p span {font-size: 2.4rem; margin-left: 1.2rem;}

    /*-------------------------------------------------------------------
        @header
    -------------------------------------------------------------------*/
    #header {height: 9.8rem; color: #222222}
    #header .container {max-width: 100%; padding-left: 20px; padding-right: 20px;}

    #header .logo {width: 14.3rem; height: 5.4rem; margin-top: 2.3rem;}

    .menu-wrap {position: fixed; top: 9.8rem; transition: all 0.3s; transform:translateX(100%); right: 0; width: 100%; height: calc(100% - 9.8rem); background-color: #ffffff; overflow: auto;}
    .menu-wrap.on {transform:translateX(0)}
    .menu-wrap .tel {display: none;}

    #gnb a {display: block;}

    #gnb .depth01 {font-size: 2.4rem; padding: 0 20px; line-height: 6rem; position: relative;}
    #gnb .depth01 .arr {position: absolute; width: 1.2rem; height: 1.2rem; border-top: 2px solid #7BABD0; border-left: 2px solid #7BABD0; right: 3.4rem; top: 50%; transition: all 0.3s; transform: translateY(-75%) rotate(-135deg)}
    #gnb .on .depth01 .arr {transform: translateY(-15%) rotate(45deg)}

    #gnb .depth02 {display: none; background-color: #d8e4ed; padding: 0.5rem 20px;}
    #gnb .depth02 .title-wrap {display: none;}
    #gnb .depth02 a {line-height: 2; font-size: 2rem;}

    #footer .logo {width: 18.2rem; height: 6.8rem; margin: 0 auto;}

    #footer .link {display: none;}

    #footer .family {padding: 1.5rem 0;}
    #footer .family .swiper-slide {width: 12.8rem; height: 6.5rem;}
    #footer .family .swiper-slide img {width: 70%; margin: 0 auto;}

    #footer .info {padding-top: 5.3rem; padding-bottom: 6rem;}

    #footer .company {float: none; width: 100%;}
    #footer .company p {margin-top: 5.7rem; text-align: center;}
    #footer .company p span {float: none; display: inline-block; line-height: 1.769; font-size: 2rem;}
    #footer .company p * + span {padding-left: 1.9rem;}
    #footer .company p * + span::before {content: "|"; position: absolute; left: 0.5rem;}
    #footer .company p br + span {padding-left: 0;}
    #footer .company p br + span::before {display: none;}

    #footer address{line-height: 1.769; font-size: 2rem; text-align: center;}

    #footer .copyright{padding: 2.4rem 0; line-height: 1.153; font-size: 2rem; text-align: center;}

    #footer .sns_wrap {justify-content: center; padding-top: 30px}
    #footer .sns_list {margin-right: 15px}

    /*-------------------------------------------------------------------
        @popup
    -------------------------------------------------------------------*/
    .popup {top: 8.3rem; border-radius: 2rem; padding: 9rem 4.5rem 4.5rem;}

    .popup .btn-close {width: 4.5rem; height: 4.5rem; right: 3rem; top: 3rem;}

    .popup > .title {font-size: 2.7rem;}
    .popup > .txt {margin-top: 1.7rem; font-size: 2.1rem;}

    #downloadGuide .form {margin-top: 7.2rem;}
    #downloadGuide .form .inp-wrap {margin-bottom: 3.9rem;}
    #downloadGuide .form button {margin-top: 3.9rem; line-height: 7.5rem; height: 7.5rem; font-size: 2.1rem;}

    #privacyPolicy .terms {height: 79.2rem; margin-top: 1.5rem; font-size: 2.4rem;}

    #inquiryDiagnostic .form {margin-top: 7.2rem;}
    #inquiryDiagnostic .form .inp-wrap {margin-bottom: 3.9rem;}
    #inquiryDiagnostic .form button {margin-top: 3.9rem; line-height: 7.5rem; height: 7.5rem; font-size: 2.1rem;}
}

@media screen and (max-width:1210px) {

}