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

 * sub_visual *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.sub_visual {font-family: var(--sub-font); display: flex; align-items: center; height: 480px; color: #fff; background: no-repeat center center / cover}
/* text */
.sub_visual .text h2 {font-weight: 700; font-size: var(--fz-62); text-transform: capitalize;}
.sub_visual .text p {font-weight: 300; font-size: var(--fz-26); margin-top: 10px;}
/* path */
.sub_visual .sub_path {display: flex; align-items: center; gap: 15px; margin-top: 75px;}
.sub_visual .sub_path .home {filter: invert(1);}
.sub_visual [class*=depth] p {font-weight: 300; font-size: var(--fz-20);}

@media all and (max-width: 1024px) {
    .sub_visual {align-items: flex-end; box-sizing: border-box; padding-bottom: 60px;}
}

@media all and (max-width: 767px) {
    .sub_visual {height: 400px;}
}

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

 * sub_tab *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.sub_tab ul {max-width: 310px; margin: auto; margin-right: 0; margin-top: -90px; background: #0a2a3b url(/img/logo_390x485.png) no-repeat top -75px left -90px; background-size: 390px 485px; color: #fff; padding: 190px 30px 90px 50px; box-sizing: border-box;}
.sub_tab ul li {font-family: var(--sub-font); font-weight: 600; font-size: var(--fz-20);  position: relative;}
.sub_tab ul li::before {content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background-color: #fff; transition: 0.25s;}
.sub_tab ul li:hover,
.sub_tab ul li.on {font-weight: 700;}
.sub_tab ul li:hover::before,
.sub_tab ul li.on::before {width: 75px;}
.sub_tab ul li + li {margin-top: 50px;}


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

 * home *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- con01 ---*/
.home .con01 .logo_box img {max-width: 220px;}
:is(.home, .goose-on) .con01 .swiper-slide {width: 100%; aspect-ratio: 2/1; box-sizing: border-box;}
:is(.home, .goose-on) .con01 .swiper-slide img {width: 100%; height: 100%; object-fit: cover; object-position: center center; max-width: unset;}
:is(.home, .goose-on) .con01 .row02 .img_box {position: relative; height: 530px;}
:is(.home, .goose-on) .con01 .row02 .img_box img {width: 100%; height: 100%; object-fit: cover; object-position: center center; max-width: unset;}
.home .layout01 .btn_wrap .btn {width: calc(50% - 5px);}

@media (min-width: 767px) and (max-width: 1200px) {
    .home .layout01 .btn_wrap {flex-wrap: wrap;}
    .home .layout01 .btn_wrap .btn {width: 100%;}
}

/*--- con02 ---*/
.home .con02 ul {border-top: 2px solid #061b27; border-bottom: 2px solid #061b27;}
.home .con02 ul li {display: flex; justify-content: space-between; padding: 65px 0; box-sizing: border-box;}
.home .con02 ul li + li {border-top: 1px solid #d0d0d0;}
.home .con02 .branch {display: flex; flex-direction: column; justify-content: space-between;}
.home .con02 .branch h6 {font-weight: 700; font-size: var(--fz-24); color: #0a2a3b; line-height: 1em;}
.home .con02 .branch a {display: block; padding: 10px 15px; background-color: #0a2a3b; color: #fff; font-size: var(--fz-18); line-height: 1.11em;}
.home .con02 table {width: 80%; margin: -10px 0; font-size: var(--fz-20); line-height: 1.5em; table-layout: fixed;}
.home .con02 table tr > * {font-weight: normal; padding: 5px 0; vertical-align: top;}
.home .con02 table th {width: 130px;}
.home .con02 table td {color: #666; width: 170px;}
.home .con02 table td:last-child {width: 100%;}
/*--- con02 responsive ---*/
@media all and (max-width: 767px) {
    .home .con02 ul li {flex-wrap: wrap; gap: 40px; padding: 30px 0;}
    .home .con02 table {width: 100%;}
    .home .con02 .branch {width: 100%; flex-direction: row; align-items: center;}
}
@media all and (max-width: 640px) {
    .home .con02 table th {width: 100px;}
    .home .con02 table td {color: #666; width: 130px;}
}


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

 * GooseOn *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- con01 ---*/
.goose-on .con01 .img_box .btn_wrap {position: absolute; width: 100%; bottom: 0; left: 0; justify-content: flex-end;}
.goose-on .con01 .logo_box img {max-width: 220px;}


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

 * GoosePet *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.pet .con01 .row02 .note {text-align: right; font-size: var(--fz-16);}
.pet .con01 .row02 .short-cut {background: url(/img/pet_row02_bg.jpg) no-repeat center center / cover;}
.pet .con01 .row02 .btn_wrap {justify-content: flex-end;}
.pet .con01 .row02 .flex_wrap {display: flex; align-items: flex-start; justify-content: space-between; padding: 60px 40px 40px; box-sizing: border-box;}
.pet .con01 .row02 .txt_box {width: 70%;}
.pet .con01 .row02 .img_box {width: 60%; margin-left: -30%; padding-top: 50px;}
.pet .con01 .row02 .txt_box h5 {font-weight: 700; font-size: var(--fz-65); color: #0a2a3b;}
.pet .con01 .row02 .txt_box p {font-size: var(--fz-18);}
/* swiper */
.pet .con01 .row02 .swiper {margin-top: 40px;}
.pet .con01 .row02 .swiper-slide {width: calc(25% - 8px); margin-right: 10px; aspect-ratio: 1/1;}
.pet .con01 .row02 .swiper-slide img {width: 100%; height: 100%; object-fit: cover; object-position: center center; max-width: unset;}

@media all and (max-width: 767px) {
    .pet .con01 .row02 .flex_wrap {flex-wrap: wrap;}
    .pet .con01 .row02 .txt_box {width: 100%;}
    .pet .con01 .row02 .img_box {width: 100%; margin-left: 0;}
    .pet .con01 .row02 .swiper-slide {width: calc(50% - 5px);}
}


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

 * TCS *
 * TCS 전체 수정 20230718 백업본 확인

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.tcs .con01 .row02 .img_box {aspect-ratio: 2/1;}
.tcs .con01 .row02 .img_box img {width: 100%; height: 100%; object-fit: cover; object-position: center center; max-width: unset;}
.tcs .con01 .row03 ul {display: flex; flex-wrap: wrap; gap: 20px; counter-reset: tcs_con01;}
.tcs .con01 .row03 ul li {width: calc(50% - 10px); text-align: center; counter-increment: tcs_con01; border: 1px solid #0a2a3b; border-radius: 30px; box-sizing: border-box; padding: 45px 20px;}
.tcs .con01 .row03 ul li i {font-style: normal; font-family: var(--sub-font);  width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: #0a2a3b; color: #fff; font-weight: 600; font-size: var(--fz-20);}
.tcs .con01 .row03 ul li i::before {content: counter(tcs_con01, decimal-leading-zero);}
.tcs .con01 .row03 ul li .txt_box {margin-top: 25px;}
.tcs .con01 .row03 ul li h6 {font-weight: 700; font-size: var(--fz-20); color: #0a2a3b;}
.tcs .con01 .row03 ul li p {font-size: 18px; line-height: 1.56em; margin-top: 20px;}
.tcs .con01 .row03 ul li p span {color: #2984b4; display: block;}

/* @media all and (max-width: 767px) {
    .tcs .con01 .row03 ul li {width: 100%;}
} */


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

 * Pure *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
:is(.pure, .tcs) .logo_box img {font-size: var(--fz-48); width: 5.3em;}
/*--- row02 ---*/
.pure .con01 .row02 .icon_list {display: flex; flex-wrap: wrap; gap: 65px 20px; counter-reset: item; margin-top: 40px;}
.pure .con01 .row02 .icon_list li {position: relative; width: calc(25% - 15px); border: 1px solid #0a2a3b; counter-increment: item; box-sizing: border-box; display: flex; flex-direction: column;}
.pure .con01 .row02 .icon_list li.grid-2 {width: calc(50% - 10px);}
.pure .con01 .row02 .icon_list li.grid-2 .flex_wrap {display: flex; align-items: center;}
.pure .con01 .row02 .icon_list li.grid-2 .flex_wrap > * {width: 50%;}
.pure .con01 .row02 .icon_list li i {font-style: normal; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background-color: #0a2a3b; color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;}
.pure .con01 .row02 .icon_list li i::before {content: counter(item, decimal-leading-zero); font-family: var(--eng-font); font-weight: 600; font-size: var(--fz-20); color: #fff; line-height: 1em;}
.pure .con01 .row02 .icon_list li .tit_box {background-color: #0a2a3b; color: #fff; text-align: center; padding: 25px 0 10px; box-sizing: border-box;}
.pure .con01 .row02 .icon_list li .tit_box h5 {font-weight: 600; font-size: var(--fz-18);}
.pure .con01 .row02 .icon_list li .con_box {padding: 20px; box-sizing: border-box; flex: 1;}
.pure .con01 .row02 .icon_list li .icon_box {height: 120px; position: relative;}
.pure .con01 .row02 .icon_list li .img_box {height: 100%; position: relative;}
.pure .con01 .row02 .icon_list li .img_box img,
.pure .con01 .row02 .icon_list li .icon_box img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: fit-content;}
.pure .con01 .row02 .icon_list li .txt_box {text-align: center;}
.pure .con01 .row02 .icon_list li .txt_box p {font-size: var(--fz-14); color: #444;}

@media all and (max-width: 1200px) {
    .pure .con01 .row02 .icon_list li {width: calc(33.3333% - 14px);}
    .pure .con01 .row02 .icon_list li.grid-2 {width: 100%;}
}

@media all and (max-width: 767px) {
    .pure .con01 .row02 .icon_list li {width: calc(50% - 10px);}
}
/*--- row03 ---*/
.pure .con01 .row03 .img_box {text-align: center;}

/*--- row04 ---*/
.pure .con01 .row04 .flex_wrap {display: flex; flex-wrap: wrap; align-items: center; row-gap: 40px;}
.pure .con01 .row04 .flex_wrap > * {width: 50%;}
.pure .con01 .row04 .img_box {text-align: center;}
.pure .con01 .row04 .txt_box h6 {font-weight: 500; font-size: var(--fz-28); color: #f5a303;}
.pure .con01 .row04 .txt_box p {font-size: var(--fz-20); line-height: 1.5em; color: #666; margin-top: 25px;}

@media all and (max-width: 767px) {
    .pure .con01 .row04 .flex_wrap > * {width: 100%;}
}


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

 * Story *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- Con01 ---*/
.story .con01 {position: relative; overflow: hidden;}
.story .con01 .logo_box {margin-bottom: 50px;}
.story .con01 .txt_box {font-size: var(--fz-20); line-height: 1.5em; color: #666; max-width: 45em;}
.story .con01 .txt_box p + p {margin-top: 30px;}
.story .con01 .txt_box b {font-weight: 700; color: #0a2a3b;}
.story .con01 .txt_box .bg {background-color: #0a2a3b; color: #fff;}
/*--- Con02 ---*/
.story .con02 .flex_wrap {display: flex; align-items: baseline; gap: 0 40px;}
/* row01 */
.story .con02 .row01 ul li + li {margin-top: 20px;}
.story .con02 .row01 ul li h6 {flex: 1;}
.story .con02 .row01 ul li p {width: calc(75% - 40px); max-width: 800px;}

@media all and (max-width: 767px) {
    .story .con02 .row01 .flex_wrap {flex-wrap: wrap;}
    .story .con02 .row01 ul li h6,
    .story .con02 .row01 ul li p {width: 100%;}
}
/* row02 */
.story .con02 .row02 ul li + li {margin-top: 20px;}
.story .con02 .row02 ul li h6 {width: 5.2em;}