@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Common *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.wrap img {width: 100%; max-width: fit-content;}
.scroll_wrap {width: 100%; overflow-x: auto;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Section *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.section {padding: 90px 0; box-sizing: border-box;}
.section.pb-0 {padding-bottom: 0;}
.section.pt-0 {padding-top: 0;}
.section.last {padding-bottom: 110px;}

.section [class^=row] + [class^=row] {margin-top: 50px;}

/* 반응형에서 조절이 필요한 경우 사용 */

@media all and (max-width: 1024px) {
    .section {padding: 45px 0;}
    .section.last {padding-bottom: 65px;}
    .section [class^=row] + [class^=row] {margin-top: 25px;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Title *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.heading .desc p {
    font-size: var(--fz-20);
    line-height: 1.5em;
    letter-spacing: -0.045em;
    color: #666;
}
.heading .desc {margin-top: 50px;}

@media all and (max-width: 767px) {
    .heading .desc {margin-top: 25px;}
}

/* main_tit margin-bottom 기본 없음 */
.main_tit i {width: 210px; display: block; margin-bottom: 30px;}
.main_tit i img {width: 100%;}
.main_tit span {display: inline-block; font-family: var(--sub-font); font-weight: 300; font-size: var(--fz-18); letter-spacing: 0.4em; background-color: #0a2a3b; color: #fff; line-height: 1.55em; padding: 5px 10px; box-sizing: border-box;}
.main_tit h3 {font-weight: 300; font-family: var(--sub-font); font-size: var(--fz-42); letter-spacing: -0.045em; color: #0a2a3b;}
.main_tit h3 b {font-weight: 700;}
.main_tit.mb {margin-bottom: 60px;}

@media all and (max-width: 767px) {
    .main_tit.mb {margin-bottom: 30px;}
}


.main_con_tit h5 {}
.sub_main_tit h3 {}
/* sub_main_tit margin-bottom 기본 20px */
.sub_main_tit h5 {font-family: var(--sub-font); font-weight: 600; font-size: var(--fz-34); color: #0a2a3b;} 
.sub_main_tit .line {width: 100%; height: 2px; background-color: #0f0f0f; margin-top: 20px;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * icon *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
i.home {display: block; width: 26px; height: 22px; background: url(/img/home_26x22.png) no-repeat center center / 26px 22px;}
i.arrow {display: inline-block; background: url(/img/arrow_next_49x8.png) no-repeat center center; background-size: 100% auto; width: 49px; height: 8px;}
i.rice {display: inline-block; background: url(/img/rice_53x53.png) no-repeat center center; background-size: 100% auto; width: 53px; height: 53px;}
i.clip {display: inline-block; background: url(/img/clip_54x53.png) no-repeat center center; background-size: 100% auto; width: 54px; height: 53px;}
i.cotton {display: inline-block; background: url(/img/cotton_48X53.png) no-repeat center center; background-size: 100% auto; width: 48px; height: 53px;}
i.laundry {display: inline-block; background: url(/img/laundry_44x53.png) no-repeat center center; background-size: 100% auto; width: 44px; height: 53px;}
i.chevron {display: inline-block; background: url(/img/chevron.png) no-repeat center center; background: 100% auto; width: 18px; height: 18px;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * TextBox(type01) *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.txt_box.type01 h5 {font-family: var(--sub-font); font-weight: 600; font-size: var(--fz-34); line-height: 1.2em; color: #0a2a3b;}
.txt_box.type01 h5 span {font-size: var(--fz-24);}
.txt_box.type01 p {font-size: var(--fz-20); line-height: 1.5em; color: #666; margin-top: 25px;}
.txt_box.type01 p span.black {color: #222;}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * theme(type01) *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.theme.type01 {display: flex; gap: 20px; max-width: 1400px; margin: auto;}
.theme.type01 .sub_tab {width: 310px;}
.theme.type01 .sub_tab ul {position: sticky; top: 90px;}
.theme.type01 .content {width: calc(100% - 330px)}
.theme.type01 .inner,
.theme.type01 .programCon {max-width: 1100px; margin-left: 0;}

@media (min-width: 1025px) and (max-width: 1400px) {
    .theme.type01 .inner {width: 96.875%;}
}

@media all and (max-width: 1024px) {
    .theme.type01 .sub_tab {display: none;}
    .theme.type01 .content {width: 100%;}
    .theme.type01 .inner {width:93.75%; margin-left: auto;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * layout01 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- layout ---*/
.layout01 {display: flex; gap: 30px; align-items: center;}
.layout01 .left {width: calc(40% - 15px); min-width: 350px;}
.layout01 .right {width: calc(60% - 15px);  flex-shrink: 1;}
/* imgbox */
.layout01 .img_box {position: relative;}
.layout01 .img_box img {width: 100%; max-width: unset;}
.layout01 .img_box .txt_box {position: absolute; width: 100%; bottom: 0; left: 0; color: #fff; padding: 15px 20px; box-sizing: border-box;}
.layout01 .img_box .txt_box p {font-size: 20px; line-height: 1.5em;}
/* logobox */
.layout01 .logo_box {text-align: center;}
.layout01 .logo_box p {font-family: var(--sub-font); font-weight: 700; font-size: var(--fz-48); letter-spacing: 0.01em; color: #0a2a3b;}
/* btn_wrap */
.layout01 .btn_wrap {justify-content: flex-end; margin-top: 75px; gap: 10px;}

@media all and (max-width: 767px) {
    .layout01 {flex-wrap: wrap;}
    .layout01 .left,
    .layout01 .right {width: 100%;}
    .layout01 .btn_wrap {margin-top: 35px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * btn *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.btn_wrap {display: flex; align-items: center;}
.btn_wrap .btn {display: flex; align-items: center; justify-content: center;}
.btn_wrap .btn.icon {gap: 30px;}

.btn.basic {padding: 10px 15px; box-sizing: border-box;}
.btn.rect {min-width: 200px; height: 60px; font-size: var(--fz-18); padding: 0 15px; box-sizing: border-box;}
.btn .arrow {width: 30px; height: 6px;}

/* color */
.color-main {background-color: #0a2a3b; color: #fff;}
.color-main:link,
.color-main:visited {color: #fff;}
.color-main i {filter: invert(1);}

/*--- swiper btn(type01) ---*/
.swiper-button.type01 {display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 60px;}
.swiper-button.type01 [class*=Btn] span {font-family: var(--eng-font); font-size: var(--fz-18); letter-spacing: 0; line-height: 1.55em; color: #b4b4b4; display: inline-block; vertical-align: middle; transition: 0.25s;}
.swiper-button.type01 .prevBtn::after,
.swiper-button.type01 .nextBtn::before {content: ''; display: inline-block; vertical-align: middle; width: 49px; height: 8px; background: no-repeat center center / 49px 8px; filter: invert(75%) sepia(0%) saturate(29%) hue-rotate(248deg) brightness(99%) contrast(87%);}
.swiper-button.type01 .prevBtn::after {background-image: url(/img/arrow_prev_49x8.png); margin-left: 20px;}
.swiper-button.type01 .nextBtn::before {background-image: url(/img/arrow_next_49x8.png); margin-right: 20px;}
/* hover */
.swiper-button.type01 [class*=Btn]:hover span {color: #0a2a3b;}
.swiper-button.type01 .prevBtn:hover::after,
.swiper-button.type01 .nextBtn:hover::before {filter: invert(13%) sepia(14%) saturate(2896%) hue-rotate(158deg) brightness(93%) contrast(96%);}

@media all and (max-width: 767px) {
    .swiper-button.type01 {margin-top: 30px;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * list *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- square_list ---*/
ul.square li {position: relative; font-size: var(--fz-20); padding-left: 20px; box-sizing: border-box; line-height: 2em;}
ul.square li::before {content: url(/img/square_7x7.png); display: flex; height: 2em; align-items: center; position: absolute; top: 0; left: 0;}
ul.square li h6 {font-size: var(--fz-24); line-height: 1.66em; color: #0a2a3b;}
ul.square li p {font-size: var(--fz-20);}