#header {background: none;}
#header .header__logo > a {background: url("/_wavedream/images/common/logo_nanum_white.webp") no-repeat center center/contain;transition: .4s;}
#header .header__logo > a > img {opacity: 0;}
#header .header__gnb > ul > li {color: #fff;}
#header .header__gnb > ul > li:hover {color: var(--color-primary);}
#header .header__mobile-bar > svg {color: #fff;}
#header.on {background: #fff;}
#header.on .header__logo > a {background: url("/_wavedream/images/common/logo_nanum.webp") no-repeat center center/contain;}
#header.on .header__gnb > ul > li {color: #777;}
#header.on .header__gnb > ul > li:hover {color: var(--color-black);}
#header.on .header__mobile-bar > svg {color: var(--color-black);}




#template {}



.section01 {position: relative;padding: 320px 0 140px; margin-bottom: 180px;background: url('/_wavedream/images/template/template_01_01.webp') no-repeat center center/cover;z-index: -1;}
.section01 .section-wrap {padding: 0 0;}
.section01__bg {position: absolute;top: 60%;left: 0; transform: translateY(-50%);width: 58%;height: 55%;background: #fff;z-index: -1;}
.section01__content {width: 58%;background: #fff;padding: 60px var(--layout-padding);}
.section01__content-logo {width: 250px;margin-bottom: 30px;}
.section01__content-logo > img {width: 100%;}
.section01__content-text {font-size: 17px;line-height: 1.4;}
.section01__content-text > p {margin-bottom: 20px;}
.section01__content-text > p:last-child {margin-bottom: 0;}

.section02 {margin-bottom: 200px;}
.section02 .section-wrap {display: flex;flex-flow: row wrap;align-items: center;}
.section02__content {width: 63%;}
.section02__content-advantage {margin-bottom: 65px ;}
.section02__content-advantage > p {position: relative;padding-left: 22px;font-size: 21px;font-weight: 900;line-height: 2.1; color: var(--color-primary);}
.section02__content-advantage > p::before {content: "·";position: absolute;top: 0;left: 0;}
.section02__content-cate {display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 18px 17px;}
.section02__content-cate > li {display: flex;align-items: center;justify-content: center;height: 60px; border-radius: 5px;text-align: center;font-size: 17px;background: #f7f7f7;}
.section02__img {width: 37%;}
.section02__img > img {width: 100%;}


.section03 {margin-bottom: 200px; }
.section03 .section-wrap {position: relative;padding-bottom: 140px;overflow: hidden;}
.section03__img {position: absolute;bottom: 0;left: 0;width: 100%;max-width: 956px;z-index: -1;}
.section03__img > img {width : 100%;}
.section03__content {width: 100%;max-width: 765px;margin-left: auto;}
.section03__content > ul {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 22px 25px; margin-bottom: 38px;}
.section03__content > ul > li {min-height: 160px;padding: 60px 25px 25px; border-radius: 15px;background: #f7f7f7;font-size: 18px;line-height: 1.35;}


.section04 {text-align: center;margin-bottom: 100px;}
.section04 > div {}
.section04__title {margin-bottom: 40px;color: var(--color-black);}
.section04__sub {margin-bottom: 100px;font-size: 20px;}
.section04__swiper {}
.section04__swiper > ul {transition-timing-function: linear;}
.section04__swiper > ul > li {width: 200px;margin-right: 20px; border-radius: 5px;overflow: hidden;}
.section04__swiper > ul > li > img {width: 100%;}



@media all and (max-width:1024px) {
    .section01 {padding: 100px 0;margin-bottom: 100px;background: url('/_wavedream/images/template/template_01_01_mo.webp') no-repeat center center/cover;}
    .section01__bg {display: none;}
    .section01__content {width: 95%; max-width: 500px; margin-bottom: 10px;padding: 40px var(--layout-padding) 20px;}
    .section01__content-logo {width: 150px;margin-bottom: 25px;}
    .section01__content-text {font-size: 14px;}
    .section01__content-text > p {margin-bottom: 10px;}
    .section01__content-text > p br {display: none;}
    .section01__img {position: absolute;bottom: 0;right: 0;width: 200px;margin: 0 70px 0 auto;z-index: -1;}
    .section01__img > img {width: 100%;}


    .section02 {margin-bottom: 50px;}
    .section02 .section-wrap {flex-direction: column;}
    .section02__content {width: 100%;margin-bottom: 40px;}
    .section02__content-advantage {max-width: 500px;margin: 0 auto 35px;}
    .section02__content-advantage > p {padding-left: 10px; margin-bottom: 10px;line-height: 1.5;font-size: 13px; }
    .section02__content-cate {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;max-width: 500px; margin: 0 auto;}
    .section02__content-cate > li {height: 40px;font-size: 14px;}
    .section02__img {width: 100%; max-width: 300px;}


    .section03 {padding-bottom: 0;margin-bottom: 100px;}
    .section03 .section-wrap {display: flex;flex-direction: column;padding-bottom: 0;}
    .section03__content {margin: 0 auto 10px;max-width:500px;}
    .section03__content > h2 {font-size: 17px;}
    .section03__content > ul {gap: 10px;margin-bottom: 20px;}
    .section03__content > ul > li {min-height: 120px;padding: 50px 15px 15px;font-size: 14px;border-radius: 5px;}
    .section03__img {position: static;order: 10;max-width: 400px;margin: 0 auto;}
    


    .section04__title {padding: 0 var(--layout-padding);margin-bottom: 20px;}
    .section04__sub {padding: 0 var(--layout-padding); margin-bottom: 50px;;font-size: 17px;}
    .section04__swiper > ul > li {width: 150px; margin-right: 10px;}
}




@media all and (max-width:768px) {
    .section01 {padding: 70px 0 215px;}
    .section01__content {padding: 20px var(--layout-padding);}
    .section01__content-logo {margin-bottom: 20px;}
    .section01__img {width: 100px;margin: 0 20px 0 auto;}
}