@charset "UTF-8";
/*-------------------------------------------------------------------
  공통
-------------------------------------------------------------------*/
#container{max-width: 100%; padding: 0;  margin: 0;}
#container .in{width: 100%; max-width: calc(1440px + 4rem); margin: 0 auto; padding: 0 2rem;}
#container .in .titles{display: block; }
#container .in .titles strong{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; gap: 1rem; color: #151515; font-size: 3.6rem; font-weight: 800; letter-spacing: -0.036rem;}
#container .in .titles.c_w strong{color: #fff; font-weight: 600;}
#container .in .titles strong:after{content: ""; display: block; width: 1.8rem; height: 1.8rem; background: url(../../../images/site/kor/main/title_img01.svg) no-repeat center center / 100% auto;}
#container .in .titles.c_w strong:after{background-image: url(../../../images/site/kor/main/title_img02.svg);}
#container .more_btn{
  display: block; position: relative; width: 6rem; height: 6rem; border: 1px solid #CBD1DB; border-radius: 50%; text-indent: -9999px;
  transition: transform 0.4s, opacity 0.4s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
#container .more_btn.white{border-color: #fff;}
#container .more_btn:hover{border-color: transparent;}
#container .more_btn:before{
  content: ""; opacity: 0; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 1; border-radius: 50%;
  transform: scale3d(0.7, 0.7, 0.7);
  transition: transform 0.4s, opacity 0.4s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
#container .more_btn.white:before{background-color: #fff;}
#container .more_btn:hover:before{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
#container .more_btn:after{
  content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: url(../../../images/site/kor/main/morebtn_img01.svg) no-repeat center center / 100% auto;
  -webkit-transition: all 0.4s; transition: all 0.4s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
#container .more_btn.white:after{background-image: url(../../../images/site/kor/main/morebtn_img02.svg);}
#container .more_btn:hover:after{background-image: url(../../../images/site/kor/main/morebtn_img02.svg);}
#container .more_btn.white:hover:after{background-image: url(../../../images/site/kor/main/morebtn_img01.svg);}
#container .more_btn.play:after{background-image: url(../../../images/site/kor/main/sec06_img02.svg);}
#container .more_btn.play:hover:after{background-image: url(../../../images/site/kor/main/sec06_img03.svg);}
#container .more_btn.play.active:after{background-image: url(../../../images/site/kor/main/sec06_img04.svg);}
#container .more_btn.play.active:hover:after{background-image: url(../../../images/site/kor/main/sec06_img05.svg);}
.swiper{overflow: hidden;}
.swiper .tools{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 2rem; position: relative; margin-top: 2rem;}
.swiper .tools .t_btn{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.5rem; position: relative; }
.swiper .tools .t_btn button{
  display: block; width: 2.4rem; height: 2.4rem; background: url(../../../images/site/kor/main/swiper_img01.svg) no-repeat center center / 100% auto; text-indent: -9999px;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.swiper .tools .t_btn button.next{
  -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.swiper .tools .pagination{flex: 1; position: relative; width: 100%; height: 2px; background-color: #EEE;}
.swiper .tools .pagination .swiper-pagination-progressbar-fill{background-color: #17469E;}

@keyframes main_marquee{
  0%{background-position:0 100%;}
  100%{background-position:1000% 100%;}
}

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

}
@media screen and (max-width: 1024px){
  #container .more_btn{width: 5rem; height: 5rem;}
  #container .in .titles strong{gap: 0.8rem;font-size: 3.3rem;}
  #container .in .titles strong:after{width: 1.6rem; height: 1.6rem;}
  #container .more_btn{width: 5rem; height: 5rem;}
  .swiper .tools{margin-top: 1.6rem;}
  .swiper .tools .t_btn button{width: 3.4rem; height: 3.4rem;}
}
@media screen and (max-width: 640px){
  #container .more_btn{width: 4.5rem; height: 4.5rem;}
  #container .in .titles strong{font-size: 3.1rem; gap: 0.6rem;}
}
@media screen and (max-width: 480px){
  #container .in .titles strong{font-size: 2.9rem;}
}

/*-------------------------------------------------------------------
  #text_pop
-------------------------------------------------------------------*/
body:not(#onpage)[data-textpop="on"]{
  padding-top: 14rem;
  -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
body:not(#onpage)[data-scroll="on"][data-textpop="on"]{padding-top: 0;}


#text_pop{
  opacity: 1; visibility: visible; position: absolute; top: 0; left: 0; width: 100%; height: 14rem; background-color: #17469E;
  -webkit-transition: all 0.15s ease; transition: all 0.15s ease;
}
[data-scroll="on"] #text_pop{opacity: 0; visibility: hidden; }
#text_pop .ins{max-width: calc(1440px + 20rem); height: 100%; margin: 0 auto; padding: 0 10rem;}
#text_pop .ins .swiper{position: relative; width: 100%; height: 100%;}
#text_pop .ins .swiper:before{content: ""; display: block; position: absolute; top: 50%; left: 0; width: 1px; height: 6rem; margin-top: -3rem; background-color: #2F67CF; }
#text_pop .ins .swiper:after{content: ""; display: block; position: absolute; top: 50%; right: 0; width: 1px; height: 6rem; margin-top: -3rem; background-color: #2F67CF; }
#text_pop .ins .swiper .swiper-wrapper{width: 100%; height: 100%;}
#text_pop .ins .swiper .swiper-wrapper .swiper-slide{position: relative; width: 100%; height: 100%;}
#text_pop.one .ins .swiper .swiper-wrapper .swiper-slide{width: 100% !important;}
#text_pop .ins .swiper .swiper-wrapper .swiper-slide:nth-child(2n-1):after{content: ""; display: block; position: absolute; top: 50%; right: 0; width: 1px; height: 6rem; margin-top: -3rem; background-color: #2F67CF;}
#text_pop .ins .swiper .swiper-wrapper .swiper-slide >*{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; position: relative; width: 100%; height: 100%; padding: 1rem 5rem 1rem 11.5rem; box-sizing: border-box;}
#text_pop .ins .swiper .swiper-wrapper .swiper-slide >*:before{
  content: ""; display: block; position: absolute; top: 50%; left: 3rem; width: 6rem; height: 6rem; background: url(../../../images/site/kor/main/textpop_img01.svg) no-repeat center center / 100% auto;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
#text_pop .ins .swiper .swiper-wrapper .swiper-slide >* strong{overflow: hidden; display: block; width: 100%; color: #FFF; font-size: 2.1rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
#text_pop .ins .swiper .swiper-wrapper .swiper-slide >a:hover strong{text-decoration: underline; text-underline-position: under;}
#text_pop .ins .swiper .swiper-wrapper .swiper-slide >* p{overflow: hidden; display: block; display: -webkit-box; width: 100%; height: auto; max-height: 4.08rem; margin-top: 0.6rem; color: #fff; font-size: 1.7rem; font-weight: 400; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis;}
#text_pop .ins .controls{}
#text_pop .ins .controls a{
  position: absolute; top: 50%; width: 6rem; height: 6rem; background: transparent url(../../../images/site/kor/main/textpop_img02.svg) no-repeat center center / 100% auto; border-radius: 50%; border: 1px solid #fff; text-indent: -9999px;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#text_pop .ins .controls a.prev{left: 2rem;}
#text_pop .ins .controls a.next{
  right: 2rem;
  -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
}
#text_pop .ins .controls a:hover{background-color: #fff; background-image: url(../../../images/site/kor/main/textpop_img03.svg);}

@media screen and (max-width: 1200px){
  #text_pop .ins{max-width: calc(1440px + 18rem); padding: 0 9rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >*{padding: 1rem 3rem 1rem 9rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >*:before{left: 2.2rem; width: 5rem; height: 5rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >* strong{font-size: 2rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >* p{max-height: 3.84rem; font-size: 1.6rem;}
  #text_pop .ins .controls a{width: 5rem; height: 5rem;}
}
@media screen and (max-width: 1024px){
  #text_pop{height: 12rem;}
  #text_pop .ins{padding: 0 8rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >*{padding: 1rem 2rem 1rem 7.6rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >*:before{left: 1.5rem; width: 4.5rem; height: 4.5rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide:nth-child(2n-1):after{display: none;}
  #text_pop .ins .controls a{width: 4.5rem; height: 4.5rem;}
  #text_pop .ins .controls a.prev{left: 1rem;}
  #text_pop .ins .controls a.next{right: 1rem;}
  body:not(#onpage)[data-textpop="on"]{padding-top: 12rem;}
}
@media screen and (max-width: 640px){
  #text_pop{height: 11rem;}
  #text_pop .ins{padding: 0 5.5rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >*{padding: 1rem 2rem 1rem 6rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >*:before{left: 1.25rem; width: 3.5rem; height: 3.5rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >* strong{font-size: 1.9rem;}
  #text_pop .ins .swiper .swiper-wrapper .swiper-slide >* p{font-size: 1.5rem;}
  #text_pop .ins .controls a{width: 3.5rem; height: 3.5rem;}
  body:not(#onpage)[data-textpop="on"]{padding-top: 11rem;}
}


/*-------------------------------------------------------------------
  #sec01
-------------------------------------------------------------------*/
#sec01{position:relative;overflow: hidden; height: 100vh; min-height: 940px;}
#sec01 .gallery-top{width: 100%; height: calc(100% - 14rem);z-index:inherit}
#sec01 .gallery-top [data-num="1"]{background-color: #fff;}
#sec01 .gallery-top [data-num="1"].active{z-index:2}
#sec01 .gallery-top [data-num="1"] .texts{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 1.6rem; width: 100%; max-width: calc(1440px + 4rem); height: 100%; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; line-height: 1.5; box-sizing: border-box;}
#sec01 .gallery-top [data-num="1"] .texts >strong{display: block; width: 100%; font-size: 6.6rem; color: #000; font-weight: 400; letter-spacing: -0.132rem; text-align: center;}
#sec01 .gallery-top [data-num="1"] .texts >strong em{font-weight: 700;}
#sec01 .gallery-top [data-num="1"] .texts >p{display: block; width: 100%; text-align: center; color: #000; font-size: 3.2rem; font-weight: 400; font-family: 'Poppins';}
#sec01 .gallery-top [data-num="1"] .texts >span{display: block; width: 100%; text-align: center; color: #000; font-size: 1.7rem; font-weight: 400; letter-spacing: 0.034rem; }
#sec01 .gallery-top [data-num="1"] .texts >span i{display: inline-block; margin: 0 0.5rem; color: #D8D8D8;}
#sec01 .gallery-top [data-num="1"] .texts >a{overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 16rem; height: 16rem; margin-top: 4rem; padding: 1rem; background: url(../../../images/site/kor/main/sec01_img12.svg) no-repeat center center / 100% auto; border-radius: 50%; box-sizing: border-box;}
#sec01 .gallery-top [data-num="1"] .texts >a >div{display: block; padding-top: 3rem; padding-right: 1.6rem; color: #fff;}
#sec01 .gallery-top [data-num="1"] .texts >a >div strong{display: block; font-size: 1.5rem; font-weight: 600;}
#sec01 .gallery-top [data-num="1"] .texts >a >div span{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items:baseline; gap: 0.2rem;font-size: 1.5rem; font-weight: 300;}
#sec01 .gallery-top [data-num="1"] .texts >a >div span:after{
  content: ""; display: block; width: 1.2rem; height: 1.2rem; background: url(../../../images/site/kor/main/sec01_img13.svg) no-repeat center center / 100% auto;
  -webkit-transform: translateX(0); transform: translateX(0);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec01 .gallery-top [data-num="1"] .texts >a:hover >div span:after{
  -webkit-transform: translateX(0.5rem); transform: translateX(0.5rem);
}
#sec01 .gallery-top [data-num="1"] .texts.ty2{gap: 0;}
#sec01 .gallery-top [data-num="1"] .texts.ty2 >div{width: 100%; text-align: center;}
#sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div{display: inline-block;}
#sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div >strong{color: #000; font-family: 'Paperlogy'; font-size: 10rem; font-weight: 700; letter-spacing: 1rem; line-height: 1;}
#sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div >strong em{display: block; color: #151515; font-family: 'Hanwha'; font-size: 0.7em; letter-spacing: 0; text-align: left;}
#sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div >p{display: block; width: 100%; margin-top: 1.5rem; color: #151515; font-size: 3rem; font-weight: 500; text-align: right;}
#sec01 .gallery-top .swiper-slide .desc{display: flex; flex-wrap: wrap; justify-content: center; align-content:center; align-items: center; gap: 1.6rem; width: 100%; max-width: calc(1440px + 4rem); height: 100%; margin: 0 auto; padding:0 2rem; position: relative; z-index: 1; line-height: 1.5;}
#sec01 .gallery-top .swiper-slide .desc div{display: inline-block; width: auto; font-family: "Exat"; text-shadow: 0 0 1rem rgba(0,0,0,0.3);}
#sec01 .gallery-top .swiper-slide .desc div em{display: block; color: #FFF; font-size: 2.4rem; font-weight: 400; line-height: 1;}
#sec01 .gallery-top .swiper-slide .desc div strong{display: block;margin:1rem 0; color: #FFF; font-size: 8rem; font-weight: 400; line-height: 1; font-weight: 700; letter-spacing: -0.16rem;}
#sec01 .gallery-top .swiper-slide .desc div strong i{position: relative; }
#sec01 .gallery-top .swiper-slide .desc div strong i:before{
  content: ""; position: absolute; top: -0.1em; left: 50%; width: 0.3625em; height: 0.3625em; background: url(../../../images/site/kor/main/sec01_img11.svg) no-repeat center center / 100% auto;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
#sec01 .gallery-top .swiper-slide .desc div p{color: #fff; font-size: 2.3rem; font-weight: 400; text-align: right; padding-right: 1.3rem;}
#sec01 .gallery-top .swiper-slide{
  opacity: 0; position: relative;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec01 .gallery-top .swiper-slide.active{opacity: 1;}
#sec01 .gallery-top .swiper-slide .bgs{
  position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; background-repeat: no-repeat; background-position: center center; background-size: cover; transform-origin: left top; text-indent: -9999px; font-size:0;
  transform:translate(-50%,-50%);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec01 .gallery-top .swiper-slide .bgs::before{content:"";display:block;width:100%;height:50%;background:linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 66.15%);}
#sec01 .gallery-top .swiper-slide.active .bgs{
	animation-name:visual_eff;
	animation-duration: 6s;
	animation-timing-function:linear;
  
}
@keyframes visual_eff{
  0%{
    width:120%;height:120%;
  }
  20%{
    width:100%;height:100%;
  }
  100%{
    width:100%;height:100%;
  }
}
#sec01 .gallery-thumbs{overflow: visible; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; width: 100%; height: 14rem; /*background-color: #17469E;*/}
#sec01 .gallery-thumbs .swiper-wrapper{justify-content: flex-start; width: auto; max-width: 100%;}
#sec01 .gallery-thumbs .swiper-slide{
  position: relative; width: 24rem; height: 100%; cursor: pointer; background-position: bottom center;background-size: cover;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec01 .gallery-thumbs .swiper-slide[data-index="0"]{background-position: center center;}
#sec01 .gallery-thumbs .is-active{height: calc(100% + 2rem); margin-top: -2rem; border-radius: 1.2rem 1.2rem 0 0; box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10);}
#sec01 .gallery-thumbs .swiper-slide:before{
  content: ""; opacity: 1; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(1, 71, 100, 0.50);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec01 .gallery-thumbs .is-active:before{opacity: 0;}
#sec01 .obj{position: absolute; top: 50%; left: 50%;}
#sec01 .obj:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
#sec01 .obj.obg01{top: 12%; left: 13%; width: 13%; height: 0; padding-top: 13%;}
#sec01 .obj.obg02{top: 8%; left: auto; right: 9%; width: calc(13.124% * 0.6); height: 0; padding-top: calc(25.302% * 0.6);}
#sec01 .obj.obg03{top: auto; bottom: 0; left: 0; width: 13%; height: 0; padding-top: 13%;}
#sec01 .obj.obg04{top: auto; bottom: 20%; left: 25%; width: 13%; height: 0; padding-top: 13%;}
#sec01 .obj.obg05{top: 41%; left: 62%; width: 13%; height: 0; padding-top: 13%;}
#sec01 .obj.obg06{top: auto; bottom: 0; left: auto; right: 0; width: 13%; height: 0; padding-top: 13%;}
#sec01 .obj.obg01:before{background-image: url(../../../images/site/kor/onepage/sec01_img01.png);}
#sec01 .obj.obg02:before{background-image: url(../../../images/site/kor/onepage/sec01_img02.png);}
#sec01 .obj.obg03:before{background-image: url(../../../images/site/kor/onepage/sec01_img03.png);}
#sec01 .obj.obg04:before{background-image: url(../../../images/site/kor/onepage/sec01_img04.png);}
#sec01 .obj.obg05:before{background-image: url(../../../images/site/kor/onepage/sec01_img05.png);}
#sec01 .obj.obg06:before{background-image: url(../../../images/site/kor/onepage/sec01_img06.png);}
#sec01 .controls{
  opacity: 0; visibility: hidden; display: flex; justify-content: flex-end;align-items:center; position: absolute; top:calc(50% + 7rem); left: 50%; z-index: 1; width: 100%; max-width: 62rem; height: auto; padding:0;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  -webkit-transition:opacity 0.2s linear .3s; transition:opacity 0.2s linear .3s;
}
#sec01 .controls.active{
  opacity: 1; visibility: visible;
}
#sec01 .controls .control_btn{
  display: block; width: 4.4rem; height: 4.4rem; border-radius: 50%; text-indent: -9999px; background:rgba(0,0,0,.7) url(../../../images/site/kor/main/sec01_img25.svg) no-repeat center center / 100% auto;
  -webkit-transition: opacity 0.2s linear .3s; transition: opacity 0.2s linear .3s;
}
@keyframes progressAnimation {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
#sec01 .controls .control_btn.on{background-image: url(../../../images/site/kor/main/sec01_img26.svg);}
#sec01 .v_progress{position:relative;width:22.4rem;height:2px;margin-right:3rem;background:rgba(255,255,255,.4);border-radius:1px}
#sec01 .v_progress > span{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff;border-radius: 2px;transform: scaleX(0);transform-origin: left;transition: none;}
#sec01 .mouse_scr{display:flex;flex-direction: column;justify-content:center;position:absolute;left:50%;bottom:19.7rem;transform:translateX(-50%);z-index:1}
#sec01 .mouse_scr::before,
#sec01 .mouse_scr::after{content:"";display:block;transition:background .2s}
#sec01 .mouse_scr::before{width:20px;height:28px;background:url(../../../images/site/kor/main/icon_mouse_white.svg) center/contain no-repeat}
#sec01 .mouse_scr::after{height:11px;margin-top:5px;background:url(../../../images/site/kor/main/icon_top_botArr_white.svg) center/contain no-repeat;animation:floatUpDown .7s ease-in-out infinite}
/*.first #sec01 .mouse_scr::before{background-image:url(../../../images/site/kor/main/icon_mouse.svg)}
.first #sec01 .mouse_scr::after{background-image:url(../../../images/site/kor/main/icon_top_botArr.svg)}*/
 @keyframes floatUpDown {
      0%{transform:translateY(0)}
      50%{transform:translateY(5px)}
      100%{transform:translateY(0)}
    }


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

}
@media screen and (max-width: 1024px){
  #sec01{height: 60rem;}
  #sec01 .gallery-top [data-num="1"] .texts{gap: 1rem;}
  #sec01 .gallery-top [data-num="1"] .texts >strong{font-size: 6rem;}
  #sec01 .gallery-top [data-num="1"] .texts >p{font-size: 3rem;}
  #sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div >strong{font-size: 8.5rem; letter-spacing: 0.85rem;}
  #sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div > p{font-size: 2.75rem;}

  #sec01 .gallery-top .swiper-slide .desc{padding:0 2rem;}
  #sec01 .controls{max-width: 66rem;}
}
@media screen and (max-width: 640px){
  #sec01{height: 76rem; min-height: auto;}
  #sec01 .gallery-top{height: calc(100% - 9rem);}
  #sec01 .gallery-top [data-num="1"] .texts{gap: 0.4rem;}
  #sec01 .gallery-top [data-num="1"] .texts >strong{font-size: 4.8rem;}
  #sec01 .gallery-top [data-num="1"] .texts >p{font-size: 2.6rem;}
  #sec01 .gallery-top [data-num="1"] .texts >a{width: 14rem; height: 14rem; margin-top: 3rem;}
  #sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div >strong{font-size: 7rem; letter-spacing: 0.7rem;}
  #sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div > p{font-size: 2.5rem;}
  #sec01 .gallery-top .swiper-slide .desc{box-sizing: border-box;}
  #sec01 .gallery-top .swiper-slide .desc div em{font-size: 2rem;}
  #sec01 .gallery-top .swiper-slide .desc div strong{font-size: 5.6rem;}
  #sec01 .gallery-top .swiper-slide .desc div p{font-size: 2rem;}
  #sec01 .gallery-thumbs{height: 9rem;}
  #sec01 .gallery-thumbs .swiper-slide{width: 14rem;}
  #sec01 .gallery-thumbs .is-active{height: calc(100% + 1.4rem); margin-top: -1.4rem;}
  #sec01 .obj.obg01{top: 12%; left: 13%; width: 17%; height: 0; padding-top: 17%;}
  #sec01 .obj.obg02{top: 8%; left: auto; right: 9%; width: calc(13.124% * 0.8); height: 0; padding-top: calc(25.302% * 0.8);}
  #sec01 .obj.obg03{top: auto; bottom: 0; left: 0; width: 17%; height: 0; padding-top: 17%;}
  #sec01 .obj.obg04{top: auto; bottom: 20%; left: 25%; width: 17%; height: 0; padding-top: 17%;}
  #sec01 .obj.obg05{top: 41%; left: 62%; width: 17%; height: 0; padding-top: 17%;}
  #sec01 .obj.obg06{top: auto; bottom: 0; left: auto; right: 0; width: 17%; height: 0; padding-top: 17%;}
  #sec01 .controls{max-width: 43rem;}
  #sec01 .controls a{width: 4rem; height: 4rem;}
}
@media screen and (max-width: 480px){
  #sec01 .gallery-top [data-num="1"] .texts >strong{font-size: 4.2rem; line-height: 1.3;}
  #sec01 .gallery-top [data-num="1"] .texts >p{font-size: 2.4rem;}
  #sec01 .gallery-top [data-num="1"] .texts >a{width: 12.5rem; height: 12.5rem; margin-top: 2.4rem; padding: 1.5rem;}
  #sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div >strong{font-size: 7rem; letter-spacing: 0.7rem;}
  #sec01 .gallery-top [data-num="1"] .texts.ty2 >div >div > p{font-size: 2.5rem;}
  #sec01 .gallery-top .swiper-slide .desc{}
  #sec01 .gallery-top .swiper-slide .desc div em{font-size: 2rem; font-weight: 300; letter-spacing: 0.5px;}
  #sec01 .gallery-top .swiper-slide .desc div strong{font-size: 5.2rem; font-weight: 600;}
  #sec01 .gallery-top .swiper-slide .desc div p{font-size: 2rem; font-weight: 300; letter-spacing: 0.5px;}
  #sec01 .controls{max-width: 40rem;}
}
@media screen and (max-width: 450px){
  #sec01 .gallery-top [data-num="1"] .texts >strong em{display: block; width: 100%;}
}




/*-------------------------------------------------------------------
  #sec02
-------------------------------------------------------------------*/
#sec02{position: relative; padding: 13rem 0 19rem;}
#sec02:after{content: ""; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 6.1rem; background: url(../../../images/site/kor/main/sec02_img07.svg) 0 100% repeat-x; animation: main_marquee 300s linear infinite; background-size: auto 100%;}
#sec02 .in{position: relative;}
#sec02 .in .more_btn{position: absolute; top: 0; right: 2rem;}
#sec02 .in ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 3rem; margin-top: 3.2rem;}
#sec02 .in ul >li{
  height: 47.7rem; position: relative;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec02 .in ul >li:before{
  content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 2.7rem); background: url(../../../images/site/kor/main/sec02_img03.jpg) no-repeat center center / cover; border-radius: 1.2rem;
}
#sec02 .in ul >li:nth-child(2):before{background-image: url(../../../images/site/kor/main/sec02_img02.jpg);}
#sec02 .in ul >li:nth-child(3):before{background-image: url(../../../images/site/kor/main/sec02_img04.jpg);}
#sec02 .in ul >li:nth-child(4):before{background-image: url(../../../images/site/kor/main/sec02_img05.jpg);}
#sec02 .in ul >li:nth-child(5):before{background-image: url(../../../images/site/kor/main/sec02_img06.jpg);}
#sec02 .in ul >li:after{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.40) 100%); border-radius: 1.2rem;}
#sec02 .in ul >li a{display: block; }
#sec02 .in ul >li a >div{
  opacity: 1; display: flex; flex-wrap: wrap; align-content: flex-end;; align-items: flex-end; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; padding: 3.6rem 1rem;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec02 .in ul >li a >div:nth-child(2) p{margin-top: 1.1rem; color: #FFF; font-size: 1.8rem;}
#sec02 .in ul >li a >div >strong{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 0.4rem 1rem; width: 100%; color: #FFF; font-size: 3.2rem; font-weight: 600; line-height: 1.2;}
#sec02 .in ul >li a >div >strong span{font-size: 1.6rem; font-weight: 400; color: rgba(255, 255, 255, 0.8);}
#sec02 .in ul >li a >div:nth-child(1) >strong{justify-content: center; }
#sec02 .in ul >li a >div:nth-child(1) >strong span{display: block; width: 100%; text-align: center; }
#sec02 .in ul >li a >div:nth-child(2){padding: 3.6rem;}
#sec02 [data-skin="popup"]{}
#sec02 [data-skin="popup"] .inner{max-width: 1200px; border-radius: 0;}
#sec02 [data-skin="popup"] .inner .ins{position: relative; width: 100%; max-width: 966px; margin: 0 auto; }
#sec02 [data-skin="popup"] .inner .ins [data-tab-btn]{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0.4rem; width: calc(100% - 8rem);}
#sec02 [data-skin="popup"] .inner .ins [data-tab-btn] >li{width: 100%;}
#sec02 [data-skin="popup"] .inner .ins [data-tab-btn] >li >a{
  display: flex; flex-wrap: wrap; justify-content: center; min-height: 6rem; font-weight: 600; align-items: center; padding: 1rem; text-align: center; color: #fff; font-size: 2.4rem; background-color: #173784; border-radius: 1.2rem 1.2rem 0 0;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec02 [data-skin="popup"] .inner .ins [data-tab-btn] >li >a:hover,
#sec02 [data-skin="popup"] .inner .ins [data-tab-btn] >li.active >a{color: #173784; background-color: #fff; }
#sec02 [data-skin="popup"] .inner .ins [data-tab-cont]{overflow-y: auto; height: 65rem; max-height: 70vh; font-size: 1.6rem; line-height: 1.6; letter-spacing: -0.016rem; padding: 1rem 1rem 3rem; background-color: #fff;}
#sec02 [data-skin="popup"] .inner .ins [data-tab-cont] .imgs{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 1rem; width: 100%;}
#sec02 [data-skin="popup"] .inner .ins [data-tab-cont] .imgs img{display: block; width: calc((100% - 1rem) * 0.67)}
#sec02 [data-skin="popup"] .inner .ins [data-tab-cont] .imgs img:nth-child(2){width: calc((100% - 1rem) * 0.33);}
#sec02 [data-skin="popup"] .inner .ins [data-skin="table"] tbody tr:last-child th,
#sec02 [data-skin="popup"] .inner .ins [data-skin="table"] tbody tr:last-child td{border-bottom: 1px solid #151515;}
#sec02 [data-skin="popup"] .inner .ins [data-tab-cont] p{padding: 0 0.8rem;}
#sec02 [data-skin="popup"] .inner .ins .close{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; position: absolute; top: 0; right: 0; width: 4.4em; height: 4.4rem; border: 1px solid #fff; background-color: transparent; background-size: 1.4rem auto; border-radius: 50%; box-sizing: border-box;}

@media screen and (min-width: 1025px){
  #sec02 .in ul >li{flex: 1;}
  #sec02 .in ul:hover >li:hover{flex: 25.695%; padding-top: 0;}
  #sec02 .in ul:not(:hover) >li:first-child{flex: 25.695%;}
  #sec02 .in ul:hover >li:not(:hover){flex: 1;}
  #sec02 .in ul >li:hover:before,
  #sec02 .in ul:not(:hover) >li:first-child:before{height: 100%;}
  #sec02 .in ul >li a >div:nth-child(1),
  #sec02 .in ul:hover >li:not(:hover) a >div:nth-child(1){opacity: 1;}
  #sec02 .in ul >li a >div:nth-child(2),
  #sec02 .in ul:hover >li:not(:hover) a >div:nth-child(2){opacity: 0}
  #sec02 .in ul:hover >li:hover a >div:nth-child(1){opacity: 0;}
  #sec02 .in ul:hover >li:hover a >div:nth-child(2){opacity: 1;}
  #sec02 .in ul:hover >li:hover a >div:nth-child(2):before{
    opacity: 1;
  }
  #sec02 .in ul >li:nth-child(1) a >div:nth-child(1){opacity: 0;}
  #sec02 .in ul >li:nth-child(1) a >div:nth-child(2){opacity: 1;}
  #sec02 .in ul >li a >div:nth-child(2):before{
    content: ""; opacity: 1; display: block; position: absolute; top: 3rem; right: 3rem; width: 5.4rem; height: 5.4rem; background: #17469E url(../../../images/site/kor/main/sec02_img18.svg) no-repeat center center / 100% auto; border-radius: 50%;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
  }
  #sec02 .in ul >li:nth-child(1) a >div:nth-child(2):before{opacity: 1;}
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1024px){
  #sec02{padding: 7rem 0 10rem;}
  #sec02:after{height: 4rem;}
  #sec02 .in >div{overflow-x: auto; width: calc(100% + 2rem); }
  #sec02 .in ul{flex-wrap: nowrap; width: 1340px; gap: 2.2rem; margin-top: 2rem;}
  #sec02 .in ul >li{width: 100%; height: 33.34rem;}
  #sec02 .in ul >li:before{height: 100%;}
  #sec02 .in ul >li a >div:first-child{display: none;}
  #sec02 .in ul >li a >div:nth-child(2){padding: 3rem 2.2rem;}
  #sec02 .in ul >li a >div >strong{font-size: 2.5rem;}
  #sec02 .in ul >li a >div:nth-child(2) p{margin-top: 0.8rem; font-size: 1.7rem;}
  #sec02 [data-skin="popup"] .inner .ins [data-tab-btn] >li >a{min-height: 5rem; font-size: 2.2rem; border-radius: 1rem 1rem 0 0;}
  #sec02 [data-skin="popup"] .inner .ins [data-tab-cont] .imgs img,
  #sec02 [data-skin="popup"] .inner .ins [data-tab-cont] .imgs img:nth-child(2){width: 100%;}
}
@media screen and (max-width: 640px){
  #sec02{padding: 4rem 0 8rem;}
  #sec02 .in ul{width: 1000px; margin-top: 1.4rem; gap: 1.4rem;}
  #sec02 .in ul >li:after{z-index: 1;}
  #sec02 .in ul >li a >div:nth-child(2){z-index: 2; padding: 2rem;}
  #sec02 .in ul >li a >div >strong{font-size: 2.2rem;}
  #sec02 .in ul >li a >div:nth-child(2) p{margin-top: 0.4rem; font-size: 1.5rem;}
  #sec02 [data-skin="popup"] .inner .ins [data-tab-btn] >li >a{min-height: 4rem; font-size: 2rem; border-radius: 1rem 1rem 0 0;}
}
@media screen and (max-width: 480px){
  #sec02 [data-skin="popup"] >.inner{overflow: visible;}
  #sec02 [data-skin="popup"] .inner .ins [data-tab-btn] >li >a{font-size: 1.8rem;}
  #sec02 [data-skin="popup"] .inner .ins [data-tab-btn]{width: 100%;}
  #sec02 [data-skin="popup"] .inner .ins [data-skin="table"] thead tr th{padding: 1rem 0.5rem;}
  #sec02 [data-skin="popup"] .inner .ins [data-skin="table"] tbody tr th,
  #sec02 [data-skin="popup"] .inner .ins [data-skin="table"] tbody tr td{padding: 1rem 0.5rem;}
  #sec02 [data-skin="popup"] .inner .ins .close{top: -5.5rem;}
}

/*-------------------------------------------------------------------
  #sec03
-------------------------------------------------------------------*/
#sec03{padding: 10rem 0;background: linear-gradient(180deg, #F0F8FF 69.66%, #FFF 100%);}
#sec03 .in{}
#sec03 .in >ul{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 2.81%; margin-top: 4rem;}
#sec03 .in >ul >li{position: relative; width: calc((100% - 5.62%) / 3);}
#sec03 .in >ul >li >a{overflow: hidden; display: block; width: 100%; height: 0; padding-top: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
#sec03 .in >ul >li:nth-child(1) >a{background-image: url(../../../images/site/kor/main/sec03_img01.jpg); border-radius: 1.2rem;}
#sec03 .in >ul >li:nth-child(2) >a{background-image: url(../../../images/site/kor/main/sec03_img02.jpg); border-radius: 50%;}
#sec03 .in >ul >li:nth-child(3) >a{background-image: url(../../../images/site/kor/main/sec03_img03.jpg); border-radius: 1.2rem 100rem 1.2rem 1.2rem;}
#sec03 .in >ul >li >a >div{
    overflow: hidden; opacity: 1; visibility: visible; display: flex; flex-wrap: wrap; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 6% 4%;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec03 .in >ul >li:nth-child(1) >a >div{border-radius: 1.2rem;}
#sec03 .in >ul >li:nth-child(2) >a >div{border-radius: 50%;}
#sec03 .in >ul >li:nth-child(3) >a >div{border-radius: 1.2rem 100rem 1.2rem 1.2rem;}
#sec03 .in >ul >li >a >div:nth-child(1){align-items: flex-end;}
#sec03 .in >ul >li >a >div:nth-child(1) >strong{display: block; text-align: center; color: #fff; font-size: 3rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.016rem;}
#sec03 .in >ul >li >a >div:nth-child(2){opacity: 0; visibility: hidden; align-items: center; align-content: center; background: linear-gradient(0deg, rgba(0, 56, 148, 0.90) 0%, rgba(0, 56, 148, 0.90) 100%);}
#sec03 .in >ul >li >a >div:nth-child(2) >strong{display: block; width: 100%; text-align: center; color: #fff; font-size: 4rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.08rem;}
#sec03 .in >ul >li >a >div:nth-child(2) >em{display: block; width: 100%; margin-top: 0.4rem; text-align: center; color: rgba(255, 255, 255, 0.84); font-family: 'Exat'; font-weight: 300; font-size: 2.6rem; line-height: 1.4; letter-spacing: -0.042rem;}
#sec03 .in >ul >li >a >div:nth-child(2) >.more{display: block; width: 6rem; height: 6rem; margin-top: 9.5%; background: url(../../../images/site/kor/main/morebtn_img02.svg) no-repeat center center / 100% auto; border: 1px solid #fff; text-indent: -9999px; border-radius: 50%; }
#sec03 .in >ul >li >a:hover >div:nth-child(1){opacity: 0; visibility: hidden; }
#sec03 .in >ul >li >a:hover >div:nth-child(2){opacity: 1; visibility: visible; }

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

}
@media screen and (max-width: 1024px){
  #sec03{padding: 5rem 0 8rem;}
  #sec03 .in >ul{margin-top: 3.2rem; gap: 3%;}
  #sec03 .in >ul >li{width: calc((100% - 6%) / 3);}
  #sec03 .in >ul >li >a >div{padding: 8%;}
  #sec03 .in >ul >li >a:hover >div:nth-child(1){opacity: 1; visibility: visible; }
  #sec03 .in >ul >li >a >div:nth-child(2){display: none;}
  #sec03 .in >ul >li >a >div:nth-child(1) >strong{font-size: 2.6rem;}
}
@media screen and (max-width: 840px){
  #sec03 .in >ul >li >a >div:nth-child(1) >strong{font-size: 2.4rem;}
}
@media screen and (max-width: 640px){
  #sec03{padding: 4rem 0 5rem;}
  #sec03 .in >ul{gap: 1.4em; margin-top: 1.4rem;}
  #sec03 .in >ul >li{width: calc((100% - 2.8rem) / 3);}
}
@media screen and (max-width: 480px){

}

/*-------------------------------------------------------------------
  #sec04
-------------------------------------------------------------------*/
#sec04{position: relative; padding: 12.4rem 0; background-color: #18469D;}
#sec04:before{content: ""; display: block; position: absolute; top: 0; right: 0; width: 27.2rem; height: 46rem; background: url(../../../images/site/kor/main/sec04_img01.svg) no-repeat center center / 100% auto;}
#sec04 .in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 5%; position: relative; }
#sec04 .in:before{content: ""; display: block; position: absolute; top: -12.4rem; right: calc(100% - 15rem); width: 100vw; height: calc(100% + 12.4rem + 12.4rem); background-color: #fff;}
#sec04 .in:after{content: ""; display: block; position: absolute; top: -12.4rem; right: calc(100% - 15rem); width: 50rem; height: calc(100% + 12.4rem + 12.4rem); background-color: #18469D; border-top-left-radius: 5000rem;}
#sec04 .in .l{flex: 1; position: relative; z-index: 1; background: url(../../../images/site/kor/main/sec04_img02.png) no-repeat center center / contain;}
#sec04 .in .l:before{content: ""; display: block; position: absolute; top: 100%; left: 100%; width: 10.982%; height: 13.6%; background: url(../../../images/site/kor/main/sec04_img03.svg) no-repeat center center / 100% auto;}
#sec04 .in .l:after{content: ""; display: block; position: absolute; bottom: 90%; right: 16%; width: 23.668%; height: 11.47%; background: url(../../../images/site/kor/main/sec04_img04.svg) no-repeat center center / 100% auto;}
#sec04 .in .l .more_btn{margin-top: 3.5rem;}
#sec04 .in .r{position: relative; width: 43rem; min-height: 37.5rem;}
#sec04 .in .r ul{margin-top: 4rem; border-top: 2px solid #fff;}
#sec04 .in .r ul >li{border-bottom: 1px solid rgba(255, 255, 255, 0.2)}
#sec04 .in .r ul >li.no_data{padding: 4rem 0;font-size: 1.8rem;text-align: center;color: #FFF;}
#sec04 .in .r ul >li >a{display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 2rem; padding: 2rem 0; }
#sec04 .in .r ul >li >a >em{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 5.2rem; padding: 0.5rem; height: 5.2rem; background-color: #fff; border-radius: 1.2rem; color: #17469E; font-size: 1.4rem; font-weight: 600; line-height: 1.2; text-align: center; }
#sec04 .in .r ul >li >a >p{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; width: calc(100% - 5.2rem - 2rem);}
#sec04 .in .r ul >li >a >p >strong{
  overflow: hidden; display: block; max-width: 100%; padding-bottom: 0.3rem; white-space: nowrap; text-overflow: ellipsis; color: #fff; font-size: 1.7rem; font-weight: 400; line-height: 1; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(to right, #fff, #fff, #fff); background-size: 100% 0.1rem, 0 0.1rem !important; background-position: 100% 100%, 0 100% !important; background-repeat: no-repeat !important;
  -webkit-transition: background-size 0.3s; transition: background-size 0.3s;text-shadow:1px 1px 3px rgba(0,0,0,.7);
}
#sec04 .in .r ul >li >a:hover >p >strong{background-size: 0 0.1rem, 100% 0.1rem !important;}
#sec04 .in .r ul >li >a >p >span{display: block; width: 100%; margin-top: 0.9rem; color: rgba(255, 255, 255, 0.6); font-size: 1.6rem; font-weight: 300; line-height: 1;}
#sec04 .in .r .more_btn{position: absolute; top: 0; right: 0;}

@media screen and (max-width: 1440px){
  #sec04 .in:before,
  #sec04 .in:after{display: none;}
}
@media screen and (max-width: 1200px){

}
@media screen and (max-width: 1024px){
  #sec04{padding: 6rem 0;}
  #sec04 .in{display: block; }
  #sec04:before{top: auto; bottom: 0; width: 40.45rem; height: 22.89rem; background-image: url(../../../images/site/kor/main/sec04_img05.svg) ;}
  #sec04 .in .l{height: 40rem; background-image: url(../../../images/site/kor/main/sec04_img06.png);}
  #sec04 .in .l:after,
  #sec04 .in .l:before{display: none;}
  #sec04 .in .l .titles{position: relative;}
  #sec04 .in .l .titles strong{justify-content: center;}
  #sec04 .in .l .titles .more_btn{position: absolute; top: 0; right: 0; margin-top: 0;}
  #sec04 .in .r{width: 100%; min-height: auto; margin-top: 3.2rem;}
  #sec04 .in .r ul{margin-top: 3.2rem;}
  #sec04 .in .r ul >li >a{padding: 1.8rem 0;}

}
@media screen and (max-width: 640px){
  #sec04{padding: 4rem 0 5rem;}
  #sec04 .in .r{margin-top: 1rem;}
  #sec04 .in .r ul{margin-top: 1.4rem;}
}
@media screen and (max-width: 480px){

}


/*-------------------------------------------------------------------
  #sec05
-------------------------------------------------------------------*/
#sec05{padding: 12.7rem 0 12rem;}
#sec05 .in{position: relative;}
#sec05 .in .t{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3rem; position: absolute; top: 0; left: 2rem; width: calc(100% - 4rem);}
#sec05 .in .t >strong{color: #151515; font-size: 3.4rem; font-weight: 600; letter-spacing: -0.034rem;}
#sec05 .in .t >a{
  display: block; width: 3.4rem; height: 3.4rem; background: url(../../../images/site/kor/main/sec05_img01.svg) no-repeat center center / 100% auto; text-indent: -9999px;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec05 .in .t >a:hover{
  -webkit-transform: translateX(0.5rem); transform: translateX(0.5rem);
}
#sec05 .in .t >a.prev{
  -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
#sec05 .in .t >a.prev:hover{
  -webkit-transform: rotate(180deg) translateX(0.5rem); transform: rotate(180deg) translateX(0.5rem);
}
#sec05 .in .lr{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 5%; margin-top: 5rem;}
#sec05 .in .lr >div{position: relative; width: calc((100% - 5%) / 2);}
#sec05 .in .lr .l{}
#sec05 .in .lr .l >table{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start;}
#sec05 .in .lr .l >table >thead,
#sec05 .in .lr .l >table >tbody{display: block; width: 100%; background-color: transparent;}
#sec05 .in .lr .l >table >thead >tr,
#sec05 .in .lr .l >table >tbody >tr{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 1rem;}
#sec05 .in .lr .l >table >thead >tr >th,
#sec05 .in .lr .l >table >tbody >tr >td{width: 100%; height: 5rem; padding: 0; border-bottom: 1px solid #151515; text-align: left; color: #151515; font-size: 2.4rem; font-weight: 400; letter-spacing: -0.024rem;}
#sec05 .in .lr .l >table >thead >tr >th:first-child{color: #FE3016;}
#sec05 .in .lr .l >table >thead >tr >th:last-child{color: #17469E;}
#sec05 .in .lr .l >table >tbody >tr >td{height: 8rem;font-size: 1.8rem; letter-spacing: -0.018rem; border-bottom-color: #DDD;}
#sec05 .in .lr .l >table >tbody >tr >td >*{display: block; position: relative; width: 100%; height: 100%; padding-left: 1rem; padding-top: 2rem;}
#sec05 .in .lr .l >table >tbody >tr >td.today >*{color: #fff;}
#sec05 .in .lr .l >table >tbody >tr >td.today >*:before{content: ""; display: block; position: absolute; top: -2px; left: 0; z-index: -1; width: 100%; height: calc(100% + 2px); background-color: #17469E;}
#sec05 .in .lr .l >table >tbody >tr >td:first-child >a{color: #FE3016;}
#sec05 .in .lr .l >table >tbody >tr >td:last-child >a{color: #17469E;}
#sec05 .in .lr .l >table >tbody >tr >td:first-child.today >*,
#sec05 .in .lr .l >table >tbody >tr >td:last-child.today >*{color: #fff;}
#sec05 .in .lr .l >table >tbody >tr >td >*:not(a){color: #ccc;}
#sec05 .in .lr .r .swiper{}
#sec05 .in .lr .r .swiper .swiper-slide{display: block; padding-top: 1rem;}
#sec05 .in .lr .r .swiper .swiper-slide.no-data{position: relative;width: 100% !important;margin-right: 0 !important;padding-top: 0; border: 1px solid #DDD;border-radius: 1.2rem;background-color: #F9F9F9;box-sizing: border-box;}
#sec05 .in .lr .r .swiper .swiper-slide.no-data:after{content: "";display: block;position: relative;width: 100%;height: 0;padding-top: 61%;}
#sec05 .in .lr .r .swiper .swiper-slide.no-data p{display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 4rem; position: absolute; top: 0; left: 0; width: 100%;  height: 100%; margin-top: 0; padding: 2rem; font-size: 2.4rem;font-weight: 600; line-height: 1.2; letter-spacing: -0.024rem; color: #151515; text-align: center; }
#sec05 .in .lr .r .swiper .swiper-slide.no-data p:before{content: ""; display: block; position: relative; width: 18.7rem; height: 5rem; background: url(../../../images/site/kor/layout/logo.svg) no-repeat center center / 100% auto;}
#sec05 .in .lr .r .swiper .swiper-slide >em{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; color: #17469E; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.016rem;}
#sec05 .in .lr .r .swiper .swiper-slide >em:before{content: ""; display: block; width: 2.4rem; height: 2.4rem; margin-right: 0.6rem; background: url(../../../images/site/kor/main/sec05_img02.svg) no-repeat center center / 100% auto;}
#sec05 .in .lr .r .swiper .swiper-slide >em[data-color="2"]{color: #FE3016;}
#sec05 .in .lr .r .swiper .swiper-slide >em[data-color="2"]:before{background-image: url(../../../images/site/kor/main/sec05_img03.svg);}
#sec05 .in .lr .r .swiper .swiper-slide >.imgs{overflow: hidden; display: block; position: relative; width: 100%; height: 0; margin-top: 1.4rem; padding-top: 126.445%; border-radius: 1.2rem; }
#sec05 .in .lr .r .swiper .swiper-slide >.imgs img{display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover;object-position:top center;
  -webkit-transform: translate(-50%,-50%) scale(1); transform: translate(-50%,-50%) scale(1);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec05 .in .lr .r .swiper .swiper-slide:hover >.imgs img{
  -webkit-transform: translate(-50%,-50%) scale(1.15); transform: translate(-50%,-50%) scale(1.15);
}
#sec05 .in .lr .r .swiper .swiper-slide >strong{
  overflow: hidden; display: inline-block; width: auto; max-width: 100%; margin-top: 2rem; padding-bottom: 0.2rem;  font-size: 2rem; font-weight: 700; letter-spacing: -0.02rem; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2;color: #151515; letter-spacing: -0.021rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; background: linear-gradient(to right, rgba(21, 21, 21, 0), rgba(21, 21, 21, 0)), linear-gradient(to right, #151515, #151515, #151515); background-size: 100% 0.1rem, 0 0.1rem !important; background-position: 100% 100%, 0 100% !important; background-repeat: no-repeat !important;
  -webkit-transition: background-size 0.3s; transition: background-size 0.3s;
}

#sec05 .in .lr .r .swiper .swiper-slide:hover >strong{background-size: 0 0.1rem, 100% 0.1rem !important;}
#sec05 .in .lr .r .swiper .swiper-slide >p{overflow: hidden; display: block; display: -webkit-box; width: 100%; height: 4.48rem; margin-top: 0.9rem; color: #555; font-size: 1.6rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.016rem; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis;}
#sec05 .in .more_btn{position: absolute; top: 0; right: 2rem;}

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

}
@media screen and (max-width: 1024px){
  #sec05{padding: 6rem 0 8rem;}
  #sec05 .in .t{gap: 2rem;}
  #sec05 .in .t >strong{font-size: 3rem;}
  #sec05 .in .lr{display: block; margin-top: 3.2rem;}
  #sec05 .in .lr >div{width: 100%;}
  #sec05 .in .lr .l >table >thead >tr >th,
  #sec05 .in .lr .l >table >tbody >tr >td{font-size: 2rem;}
  #sec05 .in .lr .l >table >thead >tr >th,
  #sec05 .in .lr .l >table >tbody >tr >td{height: 4.4rem;}
  #sec05 .in .lr .l >table >tbody >tr >td{height: 7rem; font-size: 1.7rem;}
  #sec05 .in .lr .l >table >tbody >tr >td >*{padding-left: 0.8rem; padding-top: 1rem;}
  #sec05 .in .lr .r{margin-top: 4rem;}
  #sec05 .in .lr .r .swiper .swiper-slide >.imgs{margin-top: 1.2rem; padding-top: 119%;}
  #sec05 .in .lr .r .swiper .swiper-slide >strong{margin-top: 1.7rem; font-size: 1.9rem; }
  #sec05 .in .lr .r .swiper .swiper-slide >p{height: 4.2rem; margin-top: 0.5rem; font-size: 1.5rem;}
  #sec05 .in .lr .r .swiper .swiper-slide.no-data p{gap: 3rem; font-size: 2rem;}
    #sec05 .in .lr .r .swiper .swiper-slide.no-data p:before{width: 17rem; height: 4.5rem;}

}
@media screen and (max-width: 640px){
  #sec05{padding: 4rem 0 6rem;}
  #sec05 .in .t{gap: 1.2rem; position: relative; top: auto; left: auto; width: 100%; margin-top: 1rem;}
  #sec05 .in .t >strong{font-size: 2.7rem;}
  #sec05 .in .lr{margin-top: 2rem;}
  #sec05 .in .lr .l >table >thead >tr >th{font-size: 1.8rem;}
  #sec05 .in .lr .l >table >tbody >tr >td{font-size: 1.6rem;}
  #sec05 .in .lr .r{margin-top: 2rem;}
  #sec05 .in .lr .r .swiper .swiper-slide.no-data p{gap: 3rem; font-size: 1.8rem;}
  #sec05 .in .lr .r .swiper .swiper-slide.no-data p:before{width: 16rem; height: 4rem;}
}
@media screen and (max-width: 480px){

}

/*-------------------------------------------------------------------
  #sec06
-------------------------------------------------------------------*/
#sec06{}
#sec06 .in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; position: relative; }
#sec06 .in .titles{position: relative; width: 26rem; padding-top: 9.5rem; padding-right: 2rem;}
#sec06 .in .titles:before{content: ""; display: block; position: absolute; top: 0; right: -8rem; z-index: -1; width: 100vw; height: 100%; background: #062133 url(../../../images/site/kor/main/sec06_img01.svg); border-radius: 0 6rem 0 0}
#sec06 .in .ins{z-index: 1; width: calc(100% - 26rem);}
#sec06 .in .ins >ul{display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: 1rem 4rem; height: 9.5rem; padding-left: 10rem;}
#sec06 .in .ins >ul >li{}
#sec06 .in .ins >ul >li >a{
  color: #555; font-size: 2rem; font-weight: 500; letter-spacing: -0.02rem;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec06 .in .ins >ul >li >a:hover,
#sec06 .in .ins >ul >li.active >a{color: #17469E;}
#sec06 .in .ins >ul >li >a:before{
  content: "·"; margin-right: 0.8rem; color: inherit;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec06 .in .ins [data-tab-cont]{}
#sec06 .in .ins [data-tab-cont] >div{display: block; opacity: 0; visibility: hidden; height: 0;}
#sec06 .in .ins [data-tab-cont] >div.active{opacity: 1; visibility: visible; height: auto;}
#sec06 .in .ins .swiper{width: 100vw;
transform: translateY(10px)}
#sec06 .in .ins .swiper .swiper-wrapper{
  padding-bottom: 10px;
}
#sec06 .swiper .swiper-slide{width: auto; }
#sec06 .in .ins .swiper .swiper-wrapper .swiper-slide{overflow: hidden; position: relative; width: 27rem; height: 38.6rem; border-radius: 1.2rem; box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.14);}
#sec06 .in .ins .swiper .swiper-wrapper .swiper-slide .imgs{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#sec06 .in .ins .swiper .swiper-wrapper .swiper-slide .imgs img{
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover;
  -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
#sec06 .in .ins .swiper .swiper-wrapper .swiper-slide .desc{
  opacity: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-end; align-items: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 2.3rem 2rem; background-color: rgba(0, 0, 0, 0.7); box-sizing: border-box;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec06 .in .ins .swiper .swiper-wrapper .swiper-slide:hover .desc{opacity: 1;}
#sec06 .in .ins .swiper .swiper-wrapper .swiper-slide .desc strong{display: block; color: #fff; font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02rem;}
#sec06 .in .ins .swiper .swiper-wrapper .swiper-slide .desc p{overflow: hidden; display: block; display: -webkit-box; width: 100%; height: auto; max-height: 4.8rem; margin-top: 1.1rem; font-size: 1.6rem; font-weight: 400; color: #fff; line-height: 1.5; letter-spacing: -0.016rem; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; box-sizing: border-box;}
#sec06 .in .ins .tools{display: flex; position: absolute; bottom: 5rem; left: 2rem ; width: 20rem;}
#sec06 .in .ins .tools .pagination{display: block; width: 100%; height: 2px; background-color: #17469E; order: 1;}
#sec06 .in .ins .tools .pagination .swiper-pagination-progressbar-fill{background-color: #fff;}
#sec06 .in .ins .tools .t_btn{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem; order: 2; margin-top: 4rem;}
#sec06 .in .ins .tools .t_btn .prev{
  -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

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

}
@media screen and (max-width: 1024px){
  #sec06{padding: 5rem 0 6rem; background: #062133 url(../../../images/site/kor/main/sec06_img01.svg); border-top-right-radius: 10rem;}
  #sec06 .in{display: block;}
  #sec06 .in .titles{width: 100%; padding-top: 0;}
  #sec06 .in .titles:before{display: none;}
  #sec06 .in .ins{width: 100%;}
  #sec06 .in .ins >ul{height: auto; justify-content: flex-start; margin-top: 3em; padding-left: 0; gap: 2.4rem;}
  #sec06 .in .ins >ul >li >a{font-size: 1.8rem; font-weight: 300; color: rgba(255, 255, 255, 0.5);}
  #sec06 .in .ins >ul >li >a:hover,
  #sec06 .in .ins >ul >li.active >a{color: #fff;}
  #sec06 .in .ins [data-tab-cont]{margin-top: 2.2rem;}
  #sec06 .in .ins .tools{flex-wrap: wrap; justify-content: flex-start; align-items: center; position: relative; bottom: auto; left: auto; width: 100%; gap: 3rem; margin-top: 3.2rem;}
  #sec06 .in .ins .tools .t_btn{margin-top: 0; order: 1;}
  #sec06 .in .ins .tools .pagination{order: 2; position: relative; width: calc(100% - 10rem - 4rem);}
  #sec06 .in .ins .swiper .swiper-wrapper .swiper-slide{width: calc(27rem * 0.8); height: calc(38.6rem * 0.8);}
}
@media screen and (max-width: 640px){
  #sec06{padding: 4rem 0 6rem;}
  #sec06 .in .ins >ul{margin-top: 1.4rem; gap: 0.2rem 1.6rem;}
  #sec06 .in .ins [data-tab-cont]{margin-top: 1rem;}
  #sec06 .in .ins .tools{gap: 2.4rem; margin-top: 2.4rem;}
  #sec06 .in .ins .tools .pagination{width: calc(100% - 10rem - 3.4rem);}
  #sec06 .in .ins .swiper .swiper-wrapper .swiper-slide{height: 27rem;}
  #sec06 .in .ins .swiper .swiper-wrapper .swiper-slide .desc{padding: 2rem;}

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

}

/*-------------------------------------------------------------------
  #sec07
-------------------------------------------------------------------*/
#sec07{position: relative; padding-top: 11rem; padding-bottom: 17rem;}
#sec07:after{content: ""; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 6.1rem; background: url(../../../images/site/kor/main/sec02_img01.svg) 0 100% repeat-x; animation: main_marquee 300s linear infinite; background-size: auto 100%;}
#sec07 .in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 5%;}
#sec07 .in >div{}
#sec07 .in >div > .titles + *{margin-top: 4rem;}
#sec07 .in >div >.more_btn{position: absolute; top: 0; right: 0;}
#sec07 .in >.l{position: relative; width: calc((100% - 5%) * 0.65);}
#sec07 .in >.l .no-data{position: relative;width: 100%;margin-right: 0;padding-top: 0; border: 1px solid #DDD;border-radius: 1.2rem;background-color: #F9F9F9;box-sizing: border-box;}
#sec07 .in >.l .no-data:after{content: "";display: block;position: relative;width: 100%;height: 0;padding-top: 48%;}
#sec07 .in >.l .no-data p{display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 4rem; position: absolute; top: 0; left: 0; width: 100%;  height: 100%; margin-top: 0; padding: 2rem; font-size: 2.4rem;font-weight: 600; line-height: 1.2; letter-spacing: -0.024rem; color: #151515; text-align: center; }
#sec07 .in >.l .no-data p:before{content: ""; display: block; position: relative; width: 18.7rem; height: 5rem; background: url(../../../images/site/kor/layout/logo.svg) no-repeat center center / 100% auto;}
#sec07 .in >.l ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 4.5%;}
#sec07 .in >.l ul >li{width: calc((100% - 4.5%) / 2);}
#sec07 .in >.l ul >li >a{display: block;}
#sec07 .in >.l ul >li >a >.imgs{overflow: hidden; display: block; position: relative; width: 100%; height: 0; padding-top: 73.014%; border-radius: 1.2rem;}
#sec07 .in >.l ul >li >a >.imgs img{
  display: block; position: absolute; top:0; left: 50%; width: 100%; height: 100%; object-fit: cover;object-position:top center;
  -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec07 .in >.l ul >li >a:hover >.imgs img{
  -webkit-transform: translateX(-50%) scale(1.15); transform: translateX(-50%) scale(1.15);
}
#sec07 .in >.l ul >li >a >strong{
  overflow: hidden; display: inline-block; width: auto; max-width: 100%; margin-top: 2rem; padding-bottom: 0.2rem; line-height: 1.2; font-size: 2.1rem; color: #151515; letter-spacing: -0.021rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; background: linear-gradient(to right, rgba(21, 21, 21, 0), rgba(21, 21, 21, 0)), linear-gradient(to right, #151515, #151515, #151515); background-size: 100% 0.1rem, 0 0.1rem !important; background-position: 100% 100%, 0 100% !important; background-repeat: no-repeat !important;
  -webkit-transition: background-size 0.3s; transition: background-size 0.3s;
}
#sec07 .in >.l ul >li >a:hover >strong{background-size: 0 0.1rem, 100% 0.1rem !important;}
#sec07 .in >.l ul >li >a >p{overflow: hidden; display: block; display: -webkit-box; width: 100%; height: 4.48rem; margin-top: 0.9rem; color: #555; font-size: 1.6rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.016rem; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis;}
#sec07 .in >.r{position: relative; width: calc((100% - 5%) * 0.35);}
#sec07 .in >.r .swiper{overflow: hidden;}
#sec07 .in >.r .swiper .swiper-slide{display: block; }
#sec07 .in >.r .swiper .swiper-slide .imgs{overflow: hidden; display: block; position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 0.8rem;}
#sec07 .in >.r .swiper .swiper-slide .imgs img{
  display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover;
  -webkit-transform: translate(-50%,-50%) scale(1); transform: translate(-50%,-50%) scale(1);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec07 .in >.r .swiper .swiper-slide:hover .imgs img{
  -webkit-transform: translate(-50%,-50%) scale(1.15); transform: translate(-50%,-50%) scale(1.15);
}
#sec07 .in >.r .swiper .swiper-slide strong{display: block; margin-top: 1rem; font-size: 1.8rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.018rem; color: #151515; text-align: center; }

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

}
@media screen and (max-width: 1024px){
  #sec07{padding: 7rem 0 10rem;}
  #sec07:after{height: 4rem;}
  #sec07 .in{display: block; }
  #sec07 .in >div > .titles + *{margin-top: 3.2rem;}
  #sec07 .in >.l{width: 100%;}
  #sec07 .in >.l .no-data p{gap: 3rem; font-size: 2rem;}
  #sec07 .in >.l .no-data p:before{width: 17rem; height: 4.5rem;}
  #sec07 .in >.l ul{gap: 3.5%;}
  #sec07 .in >.l ul >li{width: calc((100% - 3.5%) / 2);}
  #sec07 .in >.l ul >li >a >.imgs{padding-top: 65%;}
  #sec07 .in >.l ul >li >a >strong{margin-top: 1.5rem; font-size: 1.9rem;}
  #sec07 .in >.l ul >li >a >p{height: 4.2rem; margin-top: 0.5rem; font-size: 1.5rem; }
  #sec07 .in >.r{width: 100%; margin-top: 3.2rem;}
  #sec07 .in >.r .swiper .swiper-slide{width: auto; }
  #sec07 .in >.r .swiper .swiper-slide .imgs{width: 120px; padding-top: 120px;}
}
@media screen and (max-width: 640px){
  #sec07{padding: 4rem 0 5rem;}
  #sec07 .in >div > .titles + *{margin-top: 1.4rem;}
  #sec07 .in >.l .no-data p{gap: 3rem; font-size: 1.8rem;}
  #sec07 .in >.l .no-data p:before{width: 16rem; height: 4rem;}
  #sec07 .in >.r .swiper .swiper-slide .imgs{width: 100%; padding-top: 100%;}
}
@media screen and (max-width: 480px){
  #sec07 .in >.l >div{overflow-x: auto; }
  #sec07 .in >.l >div >ul{width: 500px; gap: 16px}
  #sec07 .in >.r .swiper .swiper-slide .imgs{width: 100%; padding-top: 100%;}
}

/*-------------------------------------------------------------------
  #sec08
-------------------------------------------------------------------*/
#sec08{padding-top: 10rem; background-color: #F0F8FF;}
#sec08 .in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 5%;}
#sec08 .in .l{display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; width: 43rem; height: auto;}
#sec08 .in .l .l_t{position: relative; width: 100%;}
#sec08 .in .l .l_t ul{margin-top: 4rem; border-top: 2px solid #001950;}
#sec08 .in .l .l_t ul >li{border-bottom: 1px solid #DEDEDE;}
#sec08 .in .l .l_t ul >li >a{display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1.8rem; padding: 2rem 0; }
#sec08 .in .l .l_t ul >li >a >em{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 5.2rem; padding: 0.5rem; height: 5.2rem; background-color: #fff; border: 1px solid #17469E; border-radius: 0.4rem; color: #17469E; font-size: 1.4rem; font-weight: 600; line-height: 1.2; text-align: center; }
#sec08 .in .l .l_t ul >li >a >p{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; width: calc(100% - 5.2rem - 2rem);}
#sec08 .in .l .l_t ul >li >a >p >strong{
  overflow: hidden; display: block; max-width: 100%; padding-bottom: 0.3rem; white-space: nowrap; text-overflow: ellipsis; color: #222; font-size: 1.7rem; font-weight: 500; line-height: 1; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(to right, #222, #222, #222); background-size: 100% 0.1rem, 0 0.1rem !important; background-position: 100% 100%, 0 100% !important; background-repeat: no-repeat !important;
  -webkit-transition: background-size 0.3s; transition: background-size 0.3s;
}
#sec08 .in .l .l_t ul >li >a:hover >p >strong{background-size: 0 0.1rem, 100% 0.1rem !important;}
#sec08 .in .l .l_t ul >li >a >p >span{display: block; width: 100%; margin-top: 0.9rem; color: #555; font-size: 1.6rem; font-weight: 300; line-height: 1;}
#sec08 .in .l .l_t .more_btn{position: absolute; top: 0; right: 0; background-color: #fff;}

#sec08 .in .l .l_b{position: relative; width: 100%; margin-top: 4rem; padding-top: 4rem;}
#sec08 .in .l .l_b:before{content: ""; display: block; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; background-color: #153E93; border-radius: 0 6rem 0 0;}
#sec08 .in .l .l_b *{position: relative; z-index: 1;}
#sec08 .in .l .l_b >.desc{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 1rem;}
#sec08 .in .l .l_b >.desc .more_btn{margin-right: auto; margin-top: 2rem;}
#sec08 .in .r{position: relative; width: calc(100% - 43rem - 5%);}
#sec08 .in .r [data-tab-btn]{display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: 0.8rem; position: absolute; top: 0; right: 0;}
#sec08 .in .r [data-tab-btn] >li{}
#sec08 .in .r [data-tab-btn] >li >a{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; width: 3.4rem; height: 3.4rem; font-size: 1.2rem; font-weight: 600; line-height: 1.2; font-weight: 300; background-color: #fff; border: 1px solid #8193B5; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec08 .in .r [data-tab-btn] >li:not(:first-child) >a{text-indent: -9999px;}
#sec08 .in .r [data-tab-btn] >li >a:hover,
#sec08 .in .r [data-tab-btn] >li.active >a{background-color: #17469E; color: #fff;}
#sec08 .in .r [data-tab-btn] >li:nth-child(2) >a{background-image: url(../../../images/site/kor/main/sec08_img07.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(2).active >a,
#sec08 .in .r [data-tab-btn] >li:nth-child(2) >a:hover{background-image: url(../../../images/site/kor/main/sec08_img08.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(3) >a{background-image: url(../../../images/site/kor/main/sec08_img09.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(3).active >a,
#sec08 .in .r [data-tab-btn] >li:nth-child(3) >a:hover{background-image: url(../../../images/site/kor/main/sec08_img10.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(4) >a{background-image: url(../../../images/site/kor/main/sec08_img11.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(4).active >a,
#sec08 .in .r [data-tab-btn] >li:nth-child(4) >a:hover{background-image: url(../../../images/site/kor/main/sec08_img12.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(5) >a{background-image: url(../../../images/site/kor/main/sec08_img13.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(5).active >a,
#sec08 .in .r [data-tab-btn] >li:nth-child(5) >a:hover{background-image: url(../../../images/site/kor/main/sec08_img14.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(6) >a{background-image: url(../../../images/site/kor/main/sec08_img15.svg);}
#sec08 .in .r [data-tab-btn] >li:nth-child(6).active >a,
#sec08 .in .r [data-tab-btn] >li:nth-child(6) >a:hover{background-image: url(../../../images/site/kor/main/sec08_img16.svg);}
#sec08 .in .r [data-tab-cont]{margin-top: 4rem; margin-bottom: 18rem;}
#sec08 .in .r [data-tab-cont] >div{opacity: 0; visibility: hidden; height: 0;}
#sec08 .in .r [data-tab-cont] >div.active{opacity: 1; visibility: visible; height: auto;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide{overflow: hidden; position: relative; height: auto; border-radius: 1.2rem;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide:before{content: ""; display: block; width: 100%; padding-top: 100%;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i{position: absolute; bottom: 0; right: 0; z-index: 1; width: 4rem; height: 4rem; text-indent: -9999px; border-radius: 1.2rem 0 1.2rem 0;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.ins{background: linear-gradient(33deg, #5257A6 11.87%, #E2358C 34.98%, #EF6834 62.43%, #EDC768 84.1%), #F00;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.fcb{background-color: #1877F2;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.twt{background-color: #000;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.ytb{background-color: #FF0000;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.nbg{background-color: #54B848;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.ins:before{background-image: url(../../../images/site/kor/main/sec08_img02.svg);}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.ytb:before{background-image: url(../../../images/site/kor/main/sec08_img03.svg);}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.nbg:before{background-image: url(../../../images/site/kor/main/sec08_img04.svg);}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.fcb:before{background-image: url(../../../images/site/kor/main/sec08_img05.svg);}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide i.twt:before{background-image: url(../../../images/site/kor/main/sec08_img06.svg);}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide >.imgs{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide >.imgs >img{
  display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover;
  -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide:hover >.imgs >img{
  -webkit-transform: translate(-50%, -50%) scale(1.15); transform: translate(-50%, -50%) scale(1.15);
}


@media screen and (min-width: 1201px){
  #sec08 .in .r [data-tab-cont] >div .swiper-wrapper{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; transform: translate3d(0px, 0px, 0px) !important; transition-duration: 0ms !important; gap: 4rem;}
  #sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide{width: calc((100% - 8rem) / 3) !important; margin-right: 0 !important;}
  #sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide:nth-child(n+7){display: none;}
  #sec08 .in .r [data-tab-cont] >div .tools{display: none;}
}
@media screen and (max-width: 1200px){

  #sec08{position: relative; padding-top: 5rem; padding-bottom: 72rem;}
  #sec08 .in{gap: 3rem;}
  #sec08 .in .l{width: calc((100% - 3rem) / 2);}
  #sec08 .in .l .l_t ul{margin-top: 3.2rem;}
  #sec08 .in .r{width: calc((100% - 3rem) / 2);}
  #sec08 .in .r [data-tab-cont]{margin-top: 3.2rem; margin-bottom: 0;}
  #sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide{width: 20rem;}
  #sec08 .in .r [data-tab-cont] >div .tools .t_btn .more_btn{background: none;}
  #sec08 .in .r [data-tab-cont] >div .tools .t_btn .more_btn:after{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
  }
  #sec08 .in .l .l_b{position: absolute; bottom: 0; left: 0; padding: 3.2rem 2rem 0;}
  #sec08 .in .l .l_b img{height: 52rem; margin-right: auto; }
}
@media screen and (max-width: 1024px){
  #sec08{padding-bottom: 52rem;}
  #sec08 .in .l .l_b img{height: 40rem; margin-right: 15%;}

}
@media screen and (max-width: 840px){
  #sec08 .in{display: block;}
  #sec08 .in .l{width: 100%;}
  #sec08 .in .r{width: 100%; margin-top: 3rem;}
  #sec08 .in .r [data-tab-cont]{margin-top: 1.4rem;}
  #sec08 .in .r [data-tab-cont] >div .swiper-wrapper .swiper-slide{width: 18.7rem;}
}
@media screen and (max-width: 640px){
  #sec01 .mouse_scr{bottom:15rem}
  #sec08 .in .l .l_t ul{margin-top: 1.4rem;}
}
@media screen and (max-width: 480px){
  #sec08 .in .l .l_b >.desc{position: static; }
  #sec08 .in .l .l_b >.desc .more_btn{position: absolute; top: 3.2rem; right: 2rem; margin-top: 0;}
  #sec08 .in .l .l_b img{margin: 1px auto 0; }
}