/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;700&display=swap');

@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

@import url('https://fonts.googleapis.com/css2?family=Marcellus:wght@300;400;500;700&display=swap');

@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

.NotoSerif {font-family: 'Noto Serif KR', serif;}
.nanummyeongjo {font-family: 'Nanum Myeongjo', 'Noto Sans KR', sans-serif; }
.marcellus {font-family: 'Marcellus','Noto Sans KR', sans-serif;}
.nanumsquare {font-family: 'NanumSquare','Noto Sans KR', sans-serif; transform : rotate(0.04deg); -webkit-transform : rotate(0.04deg); -ms-transform : rotate(0.04deg);}



/* reset & common */
:root { /* 다크모드 막기 */
    color-scheme: light only !important;
}
@media (prefers-color-scheme: dark) { /* 다크모드 막기 */
    html,
    body {
        background: #fff !important;
        background-color: #fff !important;
    }
    :root { /* 다크모드 막기 */
        color-scheme: light only !important;
    }
}
* { margin: 0; padding: 0; outline: none;}
body {margin: 0; padding: 0;}
html { scroll-behavior: smooth; }
html, body {font: 300 16px/1.3 'Noto Sans KR', sans-serif;  color: #303030;}
ul, li {list-style: none;}
a {text-decoration: none; color: inherit;}

.mob {display: none;}
.pc {display: block;}

.sub_wrap { width: 100%;height: 100%; position: relative;}
.sub_wrap .ani_box { overflow: hidden; display: block;}
.sub_wrap [data-aos=fade-up] { animation: forwards 1.4s 0.8s ease-out;}
.Sub_inner {position: relative; width: 90%; max-width: 1200px; margin: auto;}
.Sub_inner2 {position: relative; width: 80%;}
.Sub_inner2.left {margin-right: 20%;}
.Sub_inner2.right {margin-left: 20%;}

.img-full {width: 100%;}
.text-center {text-align: center;}
.--fw-500 { font-weight: 500; }
.--bold { font-weight: bold; }
.--black { color: #000; }

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {   content: none;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {   content: none;}

.pc_cont_480{display:block; opacity:1; visibility:visible;}
.m_cont_480{display:none; opacity:0; visibility:hidden; height: 0;}

/* effect */
.effect1 { position: relative; width: auto;  display: inline-block;}
.effect1:hover::after { -webkit-transform-origin: left top;  -ms-transform-origin: left top; transform-origin: left top;  -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1);  transform: scale(1, 1);}
.effect1::after {content: '';  position: absolute;  bottom: 0;  left: 0; width: 100%; border-bottom: 1px solid #000;  -webkit-transform-origin: right top; -ms-transform-origin: right top;  transform-origin: right top; -webkit-transform: scale(0, 1);  -ms-transform: scale(0, 1);transform: scale(0, 1);  -webkit-transition: transform 0.8s cubic-bezier(1, 0, 0, 1);  transition: transform 0.8s cubic-bezier(1, 0, 0, 1);}

.effect2  { opacity: 0; -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);  -webkit-transition: clip-path 1.1s cubic-bezier(.19, 1, .22, 1), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(.19, 1, .22, 1); transition: clip-path 1.1s cubic-bezier(.19, 1,.22,1), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(.19, 1, .22, 1); transition-property: all !important;}
.effect2.aos-animate { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width:960px) {
    .effect2 { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}



/* header 임시 추가 */
.sub_wrap .sub_nav {position: relative; z-index: 20;}
.sub_wrap .sub_header_menu{ display:block;}
.sub_wrap .language {margin: 0 0rem 0 4rem;}
.sub_wrap .language .lang-select-list{background-color: #fff;
border: 1px solid #b3b3b3; transform: translate(0px, -20px); -webkit-transform: translate(0px, -20px); -ms-transform: translate(0px, -20px); -webkit-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s;}
.sub_wrap .language:hover .lang-select-list{opacity: 1; visibility: inherit; transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px);}
.sub_wrap .lang-select-list li.active:hover {font-weight: 300; font-size: 0.8rem; color: #101010;}
.sub_wrap .search_cont_wrap {display: none;}
.sub_wrap .ht-inner .loginbox {height: 100%; margin-right: 2.2rem; margin-left: 0.7rem;}
.sub_wrap .ht-inner .loginbox > a {display: flex; align-items: center;  justify-content: center;}
.sub_wrap .ht-inner .loginbox > a > img {max-width: 11px;}
.sub_wrap .hamberger { border: 1px solid #415951; width: 97px;   padding: 0.5rem;}
.sub_wrap .hamberger-box {margin-bottom: 0; width: 17px;}
.sub_wrap .hamberger-box .line { margin: 2px auto; background-color: #415951;}
.sub_wrap .hamberger_text > p { color: #445b54;  text-transform: lowercase;  font-weight: 300;}

.sub_header {position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 15; }



/* sub_top */
.sub_topbox { height: 95vh; background: repeat center top/cover; position: relative; display: flex; justify-content: center; align-items: center;}

@media (min-width:1921px) {
    .sub_topbox{
        background: repeat center top/cover;
        border-bottom-left-radius: 100% 30rem;
        border-bottom-right-radius: 100% 30rem;
    }
}

.sub_topbox.s_1_1 {background: url(../img/s_1_1_subtop.png) no-repeat center center /cover;}
.sub_topbox.s_1_2 {background: url(../img/s_1_2_subtop.png) no-repeat center bottom /cover;}
.sub_topbox.s_1_3 {background: url(../img/s_1_3_subtop.png) no-repeat center bottom /cover;}
.sub_topbox.s_2_1 {background-image: url(../img/s_2_1_subtop.png);}
.sub_topbox.s_2_2 {background-image: url(../img/s_2_2_subtop.png);}
.sub_topbox.s_2_3 {background-image: url(../img/s_2_3_subtop.png);}
.sub_topbox.s_2_4 {background-image: url(../img/s_2_4_subtop.png);}
.sub_topbox.s_2_5 {background-image: url(../img/sub2/sub_2_5/visual.jpg);}
.sub_topbox.s_2_6 {background-image: url(../img/s_2_6_subtop_231116.png);}

.sub_topbox.s_3_1 {background-image: url(../img/s_3_1_subtop.png);}
.sub_topbox.s_3_2 {background: url(../img/s_3_2_subtop.png) no-repeat center center /cover;}
.sub_topbox.s_3_3 {background-image: url(../img/s_3_3_subtop.png);}
.sub_topbox.s_3_4 {background-image: url(../img/s_3_4_subtop.png);}
.sub_topbox.s_3_5 {background-image: url(../img/s_3_5_subtop.png);}

.sub_topbox.s_4_1 {background-image: url(../img/s_4_1_subtop.png);}
.sub_topbox.s_4_2 {background: url(../img/s_4_2_subtop.png) no-repeat center center /cover;}
.sub_topbox.s_4_3 {background-image: url(../img/s_4_3_subtop.png);}

.sub_topbox.s_5_1 {background-image: url(../img/s_5_1_subtop.png);}
.sub_topbox.s_5_2 {background-image: url(../img/s_5_2_subtop.png);}
.sub_topbox.s_5_3 {background-image: url(../img/s_5_3_subtop.png);}
.sub_topbox.s_5_4 {background-image: url(../img/s_5_4_subtop.png);}
@media (min-width:1921px) {
    .sub_topbox.s_1_1 {background: url(../img/s_1_1_subtop.png) no-repeat center top /cover;}
    .sub_topbox.s_3_2 {background: url(../img/s_3_2_subtop.png) no-repeat center top /cover;}
    .sub_topbox.s_4_2 {background: url(../img/s_4_2_subtop.png) no-repeat center top /cover;}
}

.sub_topbox .inner { width: 90%; max-width: 1360px; margin: auto;}
.sub_topbox.right .inner { display: flex; justify-content: flex-end;}
.sub_topbox .txtbox { margin-bottom: 5rem;}
.sub_topbox.right .inner .txtbox { min-width: 440px;}
.sub_topbox .txtbox .sub { font-size: 1.25rem; color: #000000; margin-bottom: 1rem;}
.sub_topbox .txtbox .sub.upper {text-transform: uppercase;}
.sub_topbox .txtbox .tit {font-size: 2.3rem; color: #000000; font-weight: 400; margin-bottom: 1.05rem;}
.sub_topbox .txtbox .desc { font-size: 1rem; color: #616161; font-weight: 400;}
.sub_topbox .txtbox .desc + .desc {margin-top: 2rem;}
.sub_topbox .txtbox .desc2 { font-size: 1.25rem; line-height: 1.7; letter-spacing: -0.25px; color: #616161; font-weight: 400;}
.sub_topbox .txtbox .desc2 + .desc2 {margin-top: 2rem;}

.top_visual_bg {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background: url(../img/sub_top_video_bg.png) 50% 100%/cover no-repeat;
    transform: scale(1.01) translateZ(0);
    -webkit-transform: scale(1.01) translateZ(0);
    -moz-transform: scale(1.01) translateZ(0);
    -ms-transform: scale(1.01) translateZ(0);
    -o-transform: scale(1.01) translateZ(0);
    z-index:1;
}
@media (max-width: 768px) {
    .top_visual_bg { height: 30%; }
}

/* sub_txt */
.sub_txt1 { font-size: 2.3rem; color: #000000;  font-weight: 400;  margin-bottom: 2rem;}
.sub_txt2 { font-size: 0.963rem;  font-weight: 400;  line-height: 1.7;  color: #676767; letter-spacing: -0.25px;}
.sub_txt2 + .sub_txt2  { margin-top: 1rem;}
.sub_txt2 > em.see { font-weight: 600; }
.sub_txt3 { font-family: 'Marcellus','Noto Sans KR', sans-serif; font-weight: 400; font-size: 1.25rem; color: #676767; margin-bottom: 1.5rem;}
.sub_txt4 { font-weight: 400;  font-size: 1.25rem;  color: #254633; margin-bottom: 0.5rem;}
.sub_txt4.black {color:#000000}
.sub_txt4.light {font-weight: 300; }
.sub_txt4.deco { margin-bottom: 1.25rem; position: relative;  padding-left: 20px; box-sizing: border-box; color: #254633;}
.sub_txt4.deco::before {content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 100%; background-color: #254633;}
.sub_txt5 { font-weight: 400; font-size: 1.1rem; line-height: 1.7; color: #676767;}
.sub_txt5.big { font-size: 1.2rem;  font-weight: bold;}
.sub_txt6 { font-weight: 400; font-size: 1.15rem; color: #676767;margin-bottom: 1.25rem;}
.sub_txt17 { font-size: 1.1rem;  font-weight: 400;  line-height: 1.7;  color: #676767; letter-spacing: -0.25px;}
.sub_txt17 + .sub_txt17  { margin-top: 1rem;}




/* sub_badge */
.sub_badge { margin-bottom: 1rem;}
.sub_badge span { font-family: 'Marcellus','Noto Sans KR', sans-serif;  display: inline-block;  background-color: #254633; padding: 0.4rem 1rem;  border-radius: 20px; font-size: 1.25rem;  font-weight: 400;  color: #fff;}
.sub_badge_round {display: inline-block; padding: 0.5rem 1rem;  font-size: 0.9rem; color: #254633; font-weight: 400;  letter-spacing: -0.25px; border: 1px solid #254633;  border-radius: 50%; margin-bottom: 1.25rem;}



/* button */
.button { position: relative;  text-align: center;  border: 1px solid #254633; color: #fff;  background-color: #254633;  overflow: hidden; border-radius: 8px 50px; transition: all 0.75s cubic-bezier(0.19,1,0.22,1);  -webkit-transition: all 0.75s cubic-bezier(0.19,1,0.22,1);  -moz-transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -ms-transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -o-transition: all 0.75s cubic-bezier(0.19,1,0.22,1);  padding: 0.4rem 1.75rem 0.6rem 2rem; font-size: 1.15rem; line-height: 1;  display: inline-flex; align-items: center; gap: 0 0.5rem;}
a.button {color: #fff;}
.button .icon_arrow_right_s_w { margin-top: 0.2rem;}
.button:after { content: "";  position: absolute;  left: -75px;  top: -50px;  width: 50px; height: 155px;  background-color: #fff;  opacity: 0.2;   transform: rotate(35deg) translateZ(0);   -webkit-transform: rotate(35deg) translateZ(0); -moz-transform: rotate(35deg) translateZ(0); -ms-transform: rotate(35deg) translateZ(0); -o-transform: rotate(35deg) translateZ(0); transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -webkit-transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -moz-transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -ms-transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -o-transition: all 0.75s cubic-bezier(0.19,1,0.22,1);}
.button:hover { border-radius: 0;  transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -webkit-transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -moz-transition: all 0.75s cubic-bezier(0.19,1,0.22,1);  -ms-transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -o-transition: all 0.75s cubic-bezier(0.19,1,0.22,1);}
.button:hover:after { left: 120%;}

.button.typeB { color: #000000; border-color: #254633; background-color: #fff;}
a.button.typeB {color: #000000;}

@media (max-width:480px) {
    .button{padding:0.6rem 1.75rem 0.6rem 2rem;}
}

.link_btn { display: inline-flex;  align-items: center; gap: 0 0.5rem; font-size: 1.15rem; color: #455e56; letter-spacing: 1px;  cursor: pointer;}


/* Common Section1 */
.sub_common .CS1 {position: relative; padding-top: 15rem; overflow: hidden; margin-bottom: 14rem;}
.sub_common .CS1::before { content: ""; position: absolute; left: 0;  bottom: 0; width: 100%; height: 32%; opacity: 0.5; background: linear-gradient(to top, #f0f0f0, #fff); z-index: 0;}
.sub_common .CS1 .bg_img { position: absolute; left: 0; bottom: 0;  width: 38%; z-index: 0; opacity: 0.8; filter: grayscale(1);}
.sub_common .CS1::before {content: "";}
.sub_common .CS1 .inner {z-index: 10;}
.sub_common .CS1 .contbox { display: flex; align-items: flex-start;}
.sub_common .CS1 .contbox .imgbox { width: 50%; text-align: right;}
.sub_common .CS1 .contbox .imgbox > img {width: 65%; max-width: 370px;}
.sub_common .CS1 .contbox .txtbox {width: 50%; padding-left: 5rem;  margin-top: 1.5rem;}
.sub_common .CS1 .contbox .txtbox .descbox p + p { margin-top: 2rem;}



/* Common Section2 */
.sub_common .CS2 {margin:14rem 0}
.sub_common .CS2 .contbox { display: flex;  align-items: center;  justify-content: center;}
.sub_common .CS2 .contbox .imgbox { width: 50%;}
.sub_common .CS2 .contbox .imgbox > img {width: 100%;}
.sub_common .CS2 .contbox .txtbox {width: 50%; padding-right: 4.5rem; padding-left: 1rem;}
.sub_common .CS2 .contbox .txtbox .descbox p + p { margin-top: 2rem;}

.sub_common .CS2.reverse .contbox { flex-direction: row-reverse;}
.sub_common .CS2.reverse .contbox .txtbox {padding-right: 0rem; padding-left: 4.5rem;}

.sub_common .CS2.bgA { position: relative; padding: 10rem 0;  background: url(../img/sub2/s21_S8_bg.png) no-repeat center/ 100%;}
.sub_common .CS2.bgA .contbox .txtbox { width: 52%; padding-right: 4rem;}
.sub_common .CS2.bgA .contbox .imgbox { position: relative;  width: 48%; padding-right: 4%; padding-top: 4%;}
.sub_common .CS2.bgA .contbox .imgbox .add_img { position: absolute; right: 0;  top: -3%;  max-width: 23%;}

.sub_common .CS2.bgB { position: relative; padding-top: 10rem;}
.sub_common .CS2.bgB .CS2_bg { position: absolute; right: 0; top: -27%;  width: 52%;}
.sub_common .CS2.bgB .contbox .imgbox { position: relative;  padding-right: 5%;}
.sub_common .CS2.bgB .contbox .imgbox .add_img {position: absolute;  right: 0; bottom: -18%; max-width: 45%;}



/* Common Section3 */
.sub_common .CS3 {margin:10rem 0}
.sub_common .CS3 .contbox { display: flex;  align-items: flex-start;  gap: 0 2rem; width: 85%; max-width: 1080px; margin: 2rem auto;}
.sub_common .CS3 .contbox .item{position: relative;}
.sub_common .CS3 .contbox .item .imgbox { margin-bottom: 1.5rem;}
.sub_common .CS3 .contbox .item.item1 .imgbox { border-bottom-left-radius: 100px; overflow: hidden;}
.sub_common .CS3 .contbox .item.item2 .imgbox { position: relative;}
.sub_common .CS3 .contbox .item.item2 .imgbox .add_img { position: absolute; right: 0; bottom: -18%; width: 32%;}
.sub_common .CS3 .contbox .item.item3 .imgbox { border-top-right-radius: 100px; overflow: hidden;}
.sub_common .CS3 .contbox .item .txtbox { text-align: center;}
.sub_common .CS3 .contbox .item .txtbox .tit { font-size: 1.4rem;  color: #254633; font-weight: 400;  margin-bottom: 0.6rem;}



/* Common Section4 */
.sub_common .CS4 {margin:10rem 0}
.sub_common .CS4 .Sub_inner{max-width: 1600px;}
.sub_common .CS4 .contbox { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 5rem 15px;  margin: 5rem 0 0;}
.sub_common .CS4 .contbox .item { position: relative;  width: calc(20% - 15px);  max-width: 290px;}
.sub_common .CS4 .contbox .item .txtbox { text-align: center;}
.sub_common .CS4 .contbox .item .txtbox .sub_badge { margin-top: -1.3em;}
.sub_common .CS4 .contbox .item .txtbox .sub_badge span { min-width: 130px;}
.sub_common .CS4 .contbox .item .txtbox .tit { font-size: 1.4rem;  color: #000000; font-weight: 500;  margin-bottom: 0.75rem;}

.sub_common .CS4.typeA.wide .contbox .item:nth-child(1) {margin-left: 5%;}
.sub_common .CS4.typeA.wide .contbox .item:nth-child(4) {margin-right: 5%; }

.sub_common .CS4.typeB {margin:16rem 0;}
.sub_common .CS4.typeB .contbox {margin: 5rem auto 0; width: 100%;  max-width: 1080px;}
.sub_common .CS4.typeB .contbox .item { width: calc(33.333% - 15px);}
.sub_common .CS4.typeB .contbox .item .imgbox {text-align: center;}
.sub_common .CS4.typeB .contbox .item .imgbox > img {max-width: 92px;}
.sub_common .CS4.typeB .contbox .item .txtbox {margin-top: 1rem;}
.sub_common .CS4.typeB .contbox .item .txtbox .desc { font-size: 1.25rem; line-height: 1.5; color: #676767; letter-spacing: -0.25px;}

.sub_common .CS4.typeB.wide .contbox {max-width: 100%; }
.sub_common .CS4.typeB.wide .contbox .item:nth-child(1) {margin-left: 15%;}
.sub_common .CS4.typeB.wide .contbox .item:nth-child(3) {margin-right: 15%; }
.sub_common .CS4.typeB.wide2 .contbox {max-width: 100%; }
.sub_common .CS4.typeB.wide2 .contbox .item:nth-child(1) {margin-left: 5%;}
.sub_common .CS4.typeB.wide2 .contbox .item:nth-child(4) {margin-right: 5%; }


/* Common Section5 */
.sub_common .CS5 { position: relative; margin: 10rem 0 12rem; background: url(../img/sub2/s21_S11_bg.png) no-repeat center bottom /cover; padding-bottom: 7rem;}
.sub_common .CS5 .sliebox { position: relative;}
.sub_common .CS5 .sliebox .bg_txt { position: absolute;  font-family: 'Marcellus','Noto Sans KR', sans-serif;  font-size: 9rem; font-weight: 400; letter-spacing: -0.25px;  color: #f5f5f5;  z-index: -1;}
.sub_common .CS5 .sliebox .bg_txt.before {left: 14%; top: -10%;}
.sub_common .CS5 .sliebox .bg_txt.after {right: 14%; bottom: 18%;}
.sub_common .CS5 .CS5_slider { position:relative; width:100%; margin-top:2rem; padding-bottom:4rem; }
.sub_common .CS5 .CS5_slider .swiper-wrapper {height:auto;}
.sub_common .CS5 .CS5_slider .swiper-slide { width:40% !important; max-width:614px; margin:0 11rem; opacity:0.25; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease;}
.sub_common .CS5 .CS5_slider .swiper-slide.swiper-slide-active {  opacity: 1;}
.sub_common .CS5 .CS5_slider .swiper-slide .contbox { position:relative; width:100%; max-width:100%; display: flex;  justify-content: center; align-items: flex-start;  gap: 0 3rem;}
.sub_common .CS5 .CS5_slider .swiper-slide .item.before_after{ position:relative; width:100%; text-align:center;}
.sub_common .CS5 .CS5_slider .swiper-slide .item.before_after > img{width:100%;}
.sub_common .CS5 .CS5_slider .swiper-slide .item .imgbox{  margin-bottom: 2rem;}
.sub_common .CS5 .CS5_slider .swiper-slide .item .txt{ text-align: center;  font-size: 1rem;  color: #000000;  font-weight: 400;}
.sub_common .CS5 .CS5_slider .swiper-button-prev, 
.sub_common .CS5 .CS5_slider .swiper-button-next {top:30%; font-size: 4.5rem; color: #676767;}
.sub_common .CS5 .CS5_slider .swiper-button-prev {left: 24%;}
.sub_common .CS5 .CS5_slider .swiper-button-next {right: 24%}
.sub_common .CS5 .CS5_slider .button_box { margin-top:6rem; }
@media (max-width:480px) {
    .sub_common .CS5{margin: 10rem 0;}
}



/* Common Section6 */
.sub_common .CS6 {margin-bottom: 10rem;}
.sub_common .CS6 .videobox { display: flex;  align-items: flex-start; justify-content: center; flex-wrap:wrap; margin: 3rem auto 0rem; }
.sub_common .CS6 .videobox .youtube_view { width: 60%; height: 400px; position: relative;}
.sub_common .CS6 .videobox .youtube_view iframe {width: 100%;  height: 100%; box-shadow: 5px 5px 8px rgba(0,0,0,0.3);}
.sub_common .videobox .youtube_list {width: 25%; height: 400px;  padding-left: 2rem; padding-right: 2rem; display: flex; flex-direction: column; gap: 1.6rem 0; overflow-y: auto;}
.sub_common .videobox .youtube_list::-webkit-scrollbar {width: 6px;}
.sub_common .videobox .youtube_list::-webkit-scrollbar-track {background: #e6e6e6;}
.sub_common .videobox .youtube_list::-webkit-scrollbar-thumb {background: #0f594e;}
.sub_common .videobox .youtube_list::-webkit-scrollbar-thumb:hover {background: #0f594e;}
.sub_common .CS6 .videobox .youtube_item{ cursor: pointer; opacity: 0.4;box-shadow: 5px 5px 8px rgba(0,0,0,0.3);}
.sub_common .CS6 .videobox .youtube_item:hover {opacity: 1;}
.sub_common .CS6 .videobox .youtube_item.active {opacity: 1;}
.sub_common .CS6 .videobox .youtube_item img{width: 100%;}
.sub_common .CS6 .videobox .button_box {margin-top:5rem;}
@media (max-width:480px) {
    .sub_common .CS6 .videobox .button_box {margin-top:1rem;}
}


/* Common Section7 */
.sub_common .CS7 {margin: 12rem 0 10rem;}
/* .sub_common .CS7 .contbox { display: flex; flex-wrap: wrap;  align-items: flex-start; gap: 2rem;  margin-top: 2rem;} */
.sub_common .CS7 .contbox { display: flex; flex-wrap: wrap;  align-items: flex-start; gap: 1rem 2rem;  margin-top: 0rem;}
.sub_common .CS7 .contbox .item { display: flex; align-items: center;  width: calc(50% - 1rem); background-color: #fff;  border: 1px solid #dfdfdf; border-radius: 100px; padding: 1rem;  transition: all 1.4s ease-out, box-shadow 0.6s ease-out;}
.sub_common .CS7 .contbox .item:hover { box-shadow: 4px 5px 10px rgba(0,0,0,0.15);}
.sub_common .CS7 .contbox .item .img { width: 20%; margin-right: 4%;}
.sub_common .CS7 .contbox .item .txtbox{flex: 1;}
.sub_common .CS7 .contbox .item .txtbox .tit { font-size: 1.5rem;  color: #000000;  font-weight: 400;  margin-bottom: 0.5rem;  letter-spacing: -0.25px;}
.sub_common .CS7 .contbox .item .txtbox .desc {font-size: 1.2rem;  color: #676767; line-height: 1.5; letter-spacing: -0.25px;}
.sub_common .CS7 .contbox .item .arrow { width: 8%;  font-size: 1.5rem; color: #676767;}
@media (max-width:480px) {
    .sub_common .CS7 .contbox .item:hover { box-shadow:none;}
    .sub_common .CS7 .contbox { margin-top: 2rem;}
}


/* Common Section8 */
.sub_common .CS8 { margin:15rem 0}
.sub_common .CS8 .top_txtbox .button_box { margin: 1rem 0 2rem;  display: flex;  justify-content: center;  gap: 0 1.5rem;}
.sub_common .CS8 .top_txtbox .button_box .button { padding: 0.4rem 2.55rem 0.6rem 2.8rem;}
.sub_common .CS8 .top_txtbox .button_box .button.on { background-color: #254633;  color: #fff;}
.sub_common .CS8 .top_txtbox .info_txt { display: flex;  justify-content: center;  align-items: center;  gap: 0 0.5rem;}
.sub_common .CS8 .top_txtbox .info_txt > img{max-width: 22px;}
.sub_common .CS8 .img_items {  position: relative;  width: 90%; margin: 2rem auto 0; }
.sub_common .CS8 .img_item { transition: all 0.75s cubic-bezier(0.19,1,0.22,1); -webkit-transition: all 0.75s cubic-bezier(0.19,1,0.22,1);  -moz-transition: all 0.75s cubic-bezier(0.19,1,0.22,1);  -ms-transition: all 0.75s cubic-bezier(0.19,1,0.22,1);  -o-transition: all 0.75s cubic-bezier(0.19,1,0.22,1); opacity: 0; position: relative; margin: auto;}
.sub_common .CS8 .img_item.on { opacity: 1;  z-index: 10;}
.sub_common .CS8 .facebox { position: absolute;  left: 50%;  top: 0;  width: 100%; transform: translateX(-50%)}
.sub_common .CS8 .img_item .img_img{position: relative; width: 100%;}
.sub_common .CS8 .img_item .img_img .face_base, 
.sub_common .CS8 .img_item .img_img .body_base { position: relative;  z-index: -1;  width: 100%;}
.sub_common .CS8 .img_item .img_img .face {  position: absolute;   left: 0;  top: 0;  width: 100%;  transition: all 0.6s ease; opacity: 0;}
.sub_common .CS8 .img_item .img_img .face.on {opacity: 1;}
.sub_common .CS8 .img_item .img_img .body {  position: absolute;   left: 0;  top: 0;  width: 100%;  transition: all 0.6s ease; opacity: 0;}
.sub_common .CS8 .img_item .img_img .body.on {opacity: 1;}
.sub_common .CS8 .img_item .btnbox { position: absolute;  left: 0;  top: 0; width: 100%;  height: 100%;}
/* .sub_common .CS8 .img_item .btnbox .btn {  position: absolute;  background-color: #42544f;  opacity: 0.7;  width: 2.382%; padding-bottom: 2.382%;  border-radius: 100%;  cursor: pointer;} */
.sub_common .CS8 .img_item .btnbox .btn { 
    position: absolute;  /*background-color: #42544f;*/  opacity:1;  width: 1.188rem; height: 1.188rem; border-radius: 100%;  cursor: pointer;
        background: #42544f url(../img/sub2/plus_icon.png) 50% 50%/ 100% no-repeat;
}
.sub_common .CS8 .top_txtbox .info_txt.sub4_1_plusicon > img{max-width:18px;}
.sub_common .CS8 .img_item.sub4_1_plusicon > .btnbox > .btn { 
    position: absolute; opacity:1; width:1.125rem; height:1.125rem; padding:0; border-radius:100%; cursor:pointer;
    background: #42544f url(../img/sub2/plus_icon.png) 50% 50%/ 100% no-repeat;
}


/* Common Section9 */
.sub_common .CS9 { position: relative;  margin: 16rem 0;}
.sub_common .CS9 .CS9_slider { margin-top: 4rem;  margin-bottom: 7rem;}
.sub_common .CS9 .CS9_slider .swiper-wrapper {width: 100%;}
.sub_common .CS9 .CS9_slider .swiper-slide {  opacity: 0.25;  transition: opacity 0.6s ease-in-out;  -webkit-transition: opacity 0.6s ease-in-out;  -moz-transition: opacity 0.6s ease-in-out;  -ms-transition: opacity 0.6s ease-in-out;  -o-transition: opacity 0.6s ease-in-out;}
.sub_common .CS9 .CS9_slider .swiper-slide.swiper-slide-active {  opacity: 1;}
.sub_common .CS9 .CS9_slider .swiper-slide .imgbox { width: 90%;  margin: 0 auto 2rem;}
.sub_common .CS9 .CS9_slider .swiper-slide .tit { font-size: 1.35rem;  color: #000000;  text-align: center;  letter-spacing: -0.2px;  font-weight: 400;  margin-bottom: 1rem;}
.sub_common .CS9 .CS9_slider .swiper-slide .desc { font-size: 1.2rem;  letter-spacing: 0.25px; color: #676767;  text-align: center;}
.sub_common .CS9 .CS9_slider .swiper-button-prev, .sub_common .CS9 .CS9_slider .swiper-button-next { font-size: 3.5rem;  color: #676767;  top: 34%;}
.sub_common .CS9 .CS9_slider .swiper-button-prev { left: 28%;}
.sub_common .CS9 .CS9_slider .swiper-button-next {right: 28%}
.sub_common .CS9 .CS9_slider .swiper-scrollbar { width: 70%;  max-width: 1200px;  position: relative;  left: auto;  bottom: auto;  top: auto;  margin: 4rem auto 0;}


/* Common Section10 */
.sub_common .CS10 { position: relative;  margin-top: 15rem;}
.sub_common .CS10 .contbox { display: flex; flex-direction: column;  gap: 0.1rem 0;}
.sub_common .CS10 .contbox .banner { position: relative;  background: no-repeat center/cover; display: block; text-align: center;   padding: 4.5rem 0;}
.sub_common .CS10 .contbox .banner::before { content: "";  position: absolute; left: 0;  top: 0; width: 100%;  height: 100%;  background-color: rgba(0,0,0,0.5); opacity: 0;  transition: all 0.6s ease;}
.sub_common .CS10 .contbox .banner:hover::before { content: "";    opacity: 1;}
.sub_common .CS10 .contbox .banner.ban1{background-image: url(../img/sub5/s51_S10_bg1.png);}
.sub_common .CS10 .contbox .banner.ban2{background-image: url(../img/sub5/s51_S10_bg2.png)}
.sub_common .CS10 .contbox .banner.ban3{background-image: url(../img/sub5/s51_S10_bg3.png)}
.sub_common .CS10 .contbox .banner.ban4{background-image: url(../img/sub5/s51_S10_bg4.png)}
.sub_common .CS10 .contbox .banner .txtbox { position: relative;  width: 90%; max-width: 1200px; margin: auto;}
.sub_common .CS10 .contbox .banner .txtbox .tit { font-family: 'Noto Serif KR', serif;  font-size: 2.2rem; color: #000000;  display: flex;justify-content: center; gap: 0 1rem;  margin-bottom: 1.25rem; transition: all 0.6s ease;}
.sub_common .CS10 .contbox .banner:hover .txtbox .tit { color: #fff;}
.sub_common .CS10 .contbox .banner .txtbox .tit .arrowbox {  position: relative;  height: 18px;  display: inline-block;  align-self: center;}
.sub_common .CS10 .contbox .banner .txtbox .tit .arrowbox img {  transition: all 0.6s ease;  max-width: 18px;}
.sub_common .CS10 .contbox .banner .txtbox .tit .arrowbox img:nth-child(2) { position: absolute; left: 0; top: 0;opacity: 0;}
.sub_common .CS10 .contbox .banner:hover .txtbox .tit .arrowbox img:nth-child(1){opacity: 0;}
.sub_common .CS10 .contbox .banner:hover .txtbox .tit .arrowbox img:nth-child(2){opacity: 1;}
.sub_common .CS10 .contbox .banner .desc { font-family: 'Noto Serif KR', serif;  font-size: 1.15rem;  color: #000000;  transition: all 0.6s ease;}
.sub_common .CS10 .contbox .banner:hover .desc{color: #fff;}



/* Common Section11 */
.sub_common .CS11 { position: relative;  margin: 15rem 0;  background: url(../img/sub5/s53_S5_bg.png) no-repeat center/cover;  overflow: hidden;  padding: 5rem 0;}