@import "content.css";
/***** for index *****/
section{
  margin-bottom: 10px;
}
section#bannerWrap{
  margin-bottom: 0;
  color: #000;
}
#mainVisualWrap{
  padding-bottom: 60px;
  background: url(../images/home/mv-bg-repeat.jpg) 0 100% repeat-x;
}
#mainVisualWrap .container{
  position: relative;
}
#mainVisualWrap .swiper-wrapper{
	height: 0;
	width: 100%;
	padding-top: 42.94%;
}
#mainVisualWrap .swiper-initialized .swiper-wrapper{
	padding-top: 0;
	height: auto;
}
#main-visual-wrap div.swiper-slide :is(a:after, div.main_item:after) {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
  background: var(--white);
  transition: opacity 0.5s ease 0s;
  border-radius: var(--hotline-radius);
}
#main-visual-wrap div.swiper-slide.end a:after{
  /* display: none; */
}
#main-visual-wrap div.swiper-slide.change :is(a:after, div.main_item:after){
  opacity: 0;  
}
#main-visual-wrap div.swiper-slide :is(a, div.main_item){
  display: block;
  width: 100%;
  height: 0;
  padding-top: 42.94%;
  position: relative;
  border-radius: var(--hotline-radius);
  overflow: hidden;
}
#main-visual-wrap div.swiper-slide :is(a, div.main_item) > span{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#main-visual-wrap div.swiper-slide :is(a, div.main_item) > span img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#main-visual-wrap div.swiper-slide .caption{
  display: none;
}
#main-visual-wrap #swiper-control-caption{
  display: flex;
  padding-top: 15px;
}
#main-visual-wrap div.swiper-slide .caption{
  padding-top: 15px;
}
#main-visual-wrap #swiper-control-caption .caption, #main-visual-wrap div.swiper-slide .caption{
  flex: 1 1 auto;
  padding-right: 10px;
  padding-left: 15px;
  font-size: calc((var(--mainvisual-font-size) / var(--text-base-size-for-calc)) * 1em);
  font-weight: 700;
  color: var(--primary-blue);
}
#main-visual-wrap #swiper-control-caption .caption > div, #main-visual-wrap div.swiper-slide .caption>div{
	transform: translateY(100%);
	opacity: 0;
}
#main-visual-wrap #swiper-control-caption.change .caption > div, #main-visual-wrap div.swiper-slide.change .caption>div{
	opacity: 1;
	transition: transform .5s, opacity .5s;
	transform: translateY(0);
}

#newsWrap{
  padding: 80px 0 80px 0;
  background: url(../images/home/index-news-bg.jpg) 100% 0 no-repeat;
  background-size: cover;
  overflow: hidden;
}
#newsWrap .container{
  position: relative;
}
#news-outer{
  overflow: hidden;
  padding: 30px 20px;
  width: calc(100% + 40px);
  transform: translateX(-20px);
}

#news-wrap .swiper-wrapper{
  padding-bottom: 40px;
}
#news-wrap{
  overflow: initial;
}
#news-wrap .swiper-slide{
  width: calc(50% - 20px);
  margin-right: 40px;
  opacity: 1;
  height: auto;
}
#news-wrap .swiper-slide:not(.swiper-slide-visible){
  opacity: 0;
  transition: opacity 1s ease 0.5s;
}
#news-wrap .swiper-slide a{
  display: flex;
  border-radius: var(--hotline-radius);
  overflow: hidden;
  background-color: var(--white);
  text-decoration: none;
  box-shadow: 0 0 20px rgb(0,0,0,0.25);
  transition: box-shadow 0.25s ease 0s;
  height: 100%;
}
#news-wrap .swiper-slide a:hover, #news-wrap .swiper-slide a:focus{
  box-shadow: 0 0 20px rgb(10,41,111,0.7);
}
#news-wrap .swiper-slide a>span.img{
  flex: 0 0 35%;
  position: relative;
  overflow: hidden;
  line-height: 0;
}
#news-wrap .swiper-slide a>span.img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease 0s;
}
#news-wrap .swiper-slide a:hover>span.img img, #news-wrap .swiper-slide a:focus>span.img img{
  transform: scale(1.15);
}
#news-wrap .swiper-slide a>span.detail{
  padding: 20px 25px;
}
#news-wrap .swiper-slide a>span.detail span, #news-wrap .swiper-slide a>span.detail strong{
  display: block;
}
#news-wrap .swiper-slide a>span.detail span.date, #news-wrap .swiper-slide a>span.detail strong.date{
  color: var(--grey-dark);
  font-weight: 700;
  margin-bottom: 20px;
}
#news-wrap .swiper-slide a>span.detail span:not(.date){
  font-size: calc((var(--home-news-title-font-size) / var(--text-base-size-for-calc)) * 1em);
  /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden; */
}
#newsWrap .swiper-control .swiper-button-next, #dramaWrap .swiper-control .swiper-button-next, :is(#videoWrap, #focusWrap) .swiper-control .swiper-button-next{
  margin-left: 10px;
}
#newsWrap .swiper-button-prev, #newsWrap .swiper-button-next{
  margin-top: -70px;
}
#newsWrap .swiper-control .swiper-button-next, #newsWrap .swiper-control .swiper-button-prev{
  margin-top: 0;
}

#deptWrap{
  position: relative;
  z-index: 5;
}
#dept-wrap{
  display: flex;
  gap: 2px;
  max-width: 2300px;
  margin: 0 auto;
}
#dept-wrap>div{
  width: 25%;
  position: relative;
  background-color: #000;
}

#dept-wrap>div div.img {
  overflow: hidden;
  line-height: 0;
  position: relative;
  background: #000;
  width: 100%;
  height: 0;
  padding-top: 40%;
  min-height: 145px;
}
#dept-wrap>div div.img:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-blue);
  opacity: 0.5;
  z-index: 1;
}
#dept-wrap>div div.img img{
  width: 120%;
  max-width: 120%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.3;
  z-index: 2;
  transition: top 0.5s ease 0s;
  top: 0;
}
#dept-wrap>div.active div.img img{
  top: -20px;
}
#dept-wrap .links-wrap{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  left: 0;
  top: 0;
  flex-direction: column;
  z-index: 3;
  align-items: center;
}
#dept-wrap .links-wrap .dept-title{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  color: var(--white);
  font-size: calc((var(--home-dept-title-font-size) / var(--text-base-size-for-calc)) * 1em);
  font-weight: 700;
  text-align: center;
  padding: 0 15px;
}
#dept-wrap .links-wrap .links{
  padding: 0 15px;
  width: 100%;
  position: relative;
  z-index: 10;
  transition: height 0.4s ease 0s;
}
#dept-wrap .active .links-wrap .links{
  height: 70px;
}
#dept-wrap .links-wrap .links a.trigger-btn{
  display: block;
  width: 100%;
  text-indent: -9999px;
  text-decoration: none;
  background-color: var(--green-type3);
  border-top-right-radius: var(--hotline-radius);
  border-top-left-radius: var(--hotline-radius);
  height: 40px;
  position: relative;
  z-index: 2;
  transition: background-color 0.5s ease 0s;
}
#dept-wrap .links-wrap .links a.trigger-btn:after{
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-right: 3px solid var(--white);
  border-bottom: 3px solid var(--white);
  transform: rotate(45deg) translateX(-50%);
  left: 50%;
  top: 11px;
  transition: transform 0.25s ease 0s;
}
#dept-wrap .deptItem.active .links-wrap .links a.trigger-btn:after{
  transform: rotate(-135deg) translateX(-50%);
  top: 9px;
  margin-left: -9px;
}
#dept-wrap .links-wrap .links a.trigger-btn:hover, #dept-wrap .deptItem.active .links-wrap .links a.trigger-btn{
  background-color: var(--red-normal);
}

#dept-wrap .links-wrap .links > div>div{
  padding: 15px 10px;
  border-bottom-right-radius: var(--hotline-radius);
  border-bottom-left-radius: var(--hotline-radius);
  background: var(--grey-light1);
}
#dept-wrap .links-wrap .links > div{
  max-height: 0;
  overflow: hidden;
  position: absolute;
  width: calc(100% - 30px);
  left: 15px;
  top: calc(100% - 30px);
  /* clip: rect(0px,600px,0px,0px); */
  transition: all .3s ease 0s;
  opacity: 0;
}
#dept-wrap .deptItem.active .links-wrap .links > div{
  max-height: 370px;
  /* opacity: 1; */
  opacity: 1;
  /* clip: rect(0px,600px,600px,0px); */
}
#dept-wrap .links-wrap .links > div >div >  ul{
  list-style-type: none;
  margin: 0;
}
#dept-wrap .links-wrap .links > div >div >  ul > li{
  padding-left: 0;
  margin : 0;
}
#dept-wrap .links-wrap .links > div >div >  ul > li  > a {
  display: block;
  text-align: left;
  border-radius: var(--border-radius-lv2);
  padding: 5px 15px 5px 25px;
  position: relative;
  transition: all 0.25s ease 0s;
  color: #000;
  text-decoration: none;
}

#dept-wrap .links-wrap .links > div >div >  ul > li  > a:before{
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  left: 10px;
  top: 17px;
  background: var(--red-normal);
}

#dept-wrap .links-wrap .links > div >div >  ul > li  > a:hover,
#dept-wrap .links-wrap .links > div >div >  ul > li  > a:focus {
  background-color: var(--white);
}

#dramaWrap{
  padding: 80px 0 80px 0;
  background: url(../images/home/drama-bg.jpg) 50% 0 no-repeat;
  background-size: cover;
  overflow: hidden;
}
#dramaWrap .container{
  position: relative;
}
#drama-wrap{
  margin-bottom: 50px;
}
#dramaWrap .swiper-slide{
  width: calc(33% - 20px);
  margin-right: 40px;
  height: auto;
}
#dramaWrap .swiper-slide a{
  display: block;
  border-radius: var(--hotline-radius);
  text-decoration: none;
  overflow: hidden;
  background-color: rgba(203,0,18,0.8);
  color: var(--white);
  transition: background-color 0.25s ease 0s;
}
#dramaWrap .swiper-slide a:hover, #dramaWrap .swiper-slide a:focus{
  background-color: var(--red-dark);
}
#dramaWrap .swiper-slide a span{
  display: block;
}
#dramaWrap .swiper-slide a span.img{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 52.78%;
  overflow: hidden;
}
#dramaWrap .swiper-slide a span.img img{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  transition: transform 0.25s ease 0s;
}
#dramaWrap .swiper-slide a:hover span.img img, #dramaWrap .swiper-slide a:focus span.img img{
  transform: scale(1.1);
}
#dramaWrap .swiper-slide a span.detail{
  padding: 15px 15px;
  text-align: center;
  line-height: 1.3;
  font-size: calc((var(--home-darama-title-font-size) / var(--text-base-size-for-calc)) * 1em);
}
#dramaWrap .swiper-button-prev.outerArrow, #dramaWrap .swiper-button-next.outerArrow{
  margin-top: -70px;
}
#dramaWrap .swiper-button-prev:after, #dramaWrap .swiper-button-prev:after, #dramaWrap .swiper-button-next:after, #dramaWrap .swiper-button-next:after{
  border-color: var(--white);
}
#dramaWrap .swiper-button-prev:hover:after, #dramaWrap .swiper-button-prev:focus:after, #dramaWrap .swiper-button-next:hover:after, #dramaWrap .swiper-button-next:focus:after{
  border-color: var(--white);
}
#dramaWrap .swiper-control .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):before{
  opacity: 0.6;
}
#dramaWrap .swiper-control .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover:before, #dramaWrap .swiper-control .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):focus:before{
  opacity: 1;
}
#dramaWrap .swiper-fraction{
  color: var(--white);
}
#btmWrap{
  position: relative;
  overflow: hidden;
}
#btmWrap:before{
  content: '';
  width: calc(50% - 5px);
  left: 0;
  top: 0;
  height: 100%;
  background: url(../images/home/video-bg.jpg) 50% 0 no-repeat;
  background-size: cover;
  position: absolute;
}
#btmWrap .container{
  padding: 0;
}
#btmWrap .flexbox{
  display: flex;
  column-gap: 10px;
  margin: 0;
  position: relative;
}
#btmWrap .flexbox>div{
  width: calc(50% - 5px);
  position: relative;
  z-index: 2;
}
#btmWrap .flexbox>div#videoWrap{
   padding: 80px 0 100px var(--container-padding);
   overflow: hidden;
}
#btmWrap .flexbox .innerContainer{
  padding: 0 var(--container-padding);
  position: relative;
}
#btmWrap .flexbox :is(#videoWrap, #focusWrap) .innerContainer{
    height: calc(100% - 100px);
}
:is(#videoWrap, #focusWrap) .swiper-slide a{
  display: block;
  text-decoration: none;
  position: relative;
}
:is(#videoWrap, #focusWrap) .swiper-slide a.non-youtube, :is(#videoWrap, #focusWrap) .swiper-slide a.disabled{
	pointer-events: none;
}

:is(#videoWrap, #focusWrap) .swiper-slide span.jwplayer-container{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  padding-top: 56.06%;
  border: 5px solid var(--primary-blue);
  cursor: pointer;
}
:is(#videoWrap, #focusWrap) .swiper-slide span.jwplayer-container:before{
	pointer-events: none;
}
:is(#videoWrap, #focusWrap) .swiper-slide span.jwplayer-container.clicked:before{
	display: none;
}
:is(#videoWrap, #focusWrap) .swiper-slide span.jwplayer-container.clicked iframe{
	opacity: 1;
}
:is(#videoWrap, #focusWrap) .swiper-slide span.jwplayer-container iframe{
	opacity: 0;
}
:is(#videoWrap, #focusWrap) .swiper-slide a span{
  display: block;
  position: relative;
}
:is(#videoWrap, #focusWrap) .swiper-slide a span.img{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.06%;
  border: 5px solid var(--primary-blue);
}
:is(#videoWrap, #focusWrap) .swiper-slide a span.img img, :is(#videoWrap, #focusWrap) .swiper-slide a span.img iframe, :is(#videoWrap, #focusWrap) .swiper-slide span.jwplayer-container iframe, :is(#videoWrap, #focusWrap) .swiper-slide a span.img video{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  background: #000;
}
:is(#videoWrap, #focusWrap) .swiper-slide a:not(.notVideo) span.img:before, :is(#videoWrap, #focusWrap) .swiper-slide span.jwplayer-container:before {
    content: '';
    width: 102px;
    height: 102px;
    position: absolute;
    background-image: url(../../common/images/Video-Play-Btn.png);
    background-size: contain;
    background-position: 0 0;
    background-repeat: no-repeat;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100;
}
:is(#videoWrap, #focusWrap) .swiper-slide a:not(.notVideo) span.img:hover:before, :is(#videoWrap, #focusWrap) .swiper-slide span.jwplayer-container:hover:before {
    background-image: url(../../common/images/Video-Play-Btn-On.png);
}
:is(#videoWrap, #focusWrap) .swiper-slide a.non-youtube span.img:before{
	display: none;
}
/* #videoWrap .swiper-slide a.clicked.non-youtube span.img{
	opacity: 0;
} */
:is(#videoWrap, #focusWrap) .swiper-slide a.clicked span.img:before {
  display: none;
}
:is(#videoWrap, #focusWrap) .swiper-slide a span.detail{
  font-size: calc((var(--home-video-title-font-size) / var(--text-base-size-for-calc)) * 1em);
  color: #000;
  text-align: center;
  padding: 10px 10px;
}
/* :is(#videoWrap, #focusWrap){
  margin-bottom: 40px;
} */
:is(#videoWrap, #focusWrap) .swiper-control-wrap .swiper-control{
  justify-content: center;
}
:is(#videoWrap, #focusWrap) .swiper-control .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):before{
  box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
:is(#videoWrap, #focusWrap) .swiper-control .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover:before, :is(#videoWrap, #focusWrap) .swiper-control .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):focus:before{
  box-shadow: none;
  background-color: var(--primary-blue);
}
:is(#videoWrap, #focusWrap) .swiper-control-wrap{
	position: absolute;
	bottom: 60px;
	width: 100%;
}
#btmWrap:after{
  content: '';
  width: calc(50% - 5px);
  right: 0;
  top: 0;
  height: 100%;
  background: url(../images/home/media-bg.jpg) 50% 0 no-repeat;
  background-size: cover;
  position: absolute;
}
#btmWrap.focusBg:after{
  background-image: url(../images/home/focus-bg.jpg);
}
#btmWrap .flexbox>div#mediaWrap, #btmWrap .flexbox>div#focusWrap{
   padding: 80px var(--container-padding) 100px 0;
   overflow: hidden;
}
#btmWrap .flexbox #mediaWrap .innerContainer{
  height: 100%;
}
div#focusWrap .focusBanner{
  /* line-height: 0; */
  margin-bottom: 40px;
}
div#focusWrap .focusBanner div.focus-title{
	font-size: calc((var(--home-video-title-font-size) / var(--text-base-size-for-calc))* 1em);
    color: #000;
    text-align: center;
    padding: 10px 10px;
}

div#focusWrap .focusBanner>a{
	display: block;
	line-height: 0;
}
div#focusWrap .focusBanner img{
  width: 100%;
}
div#mediaWrap .socialWrap{
  position: relative;
  width: 100%;
  /* height: 100%; */
  display: flex;
  flex-wrap: wrap;
}
div#mediaWrap .socialWrap>div{
  width: 100%;
  position: relative;
  display: flex;
  height: 55px;
}
div#mediaWrap .socialWrap>div a{
  display: flex;
  align-items: center;
  max-width: 310px;
  width: 100%;
  position: relative;
  height: 95px;
  line-height: 1.2;
  border-radius: 95px;
  background-color: var(--white);
  text-decoration: none;
  color: #000000;
  font-weight: 700;
  font-size: calc((var(--home-social-title-font-size) / var(--text-base-size-for-calc)) * 1em);
  /* border: 5px  solid var(--white); */
  padding-left: 95px;
  overflow: hidden;
  z-index: 3;
  transition: color 0.3s ease-out 0s, box-shadow 0.3s ease 0s;
}
div#mediaWrap .socialWrap>div a:hover, div#mediaWrap .socialWrap>div a:focus{
  box-shadow: 0 0 15px rgb(10,41,111,0.6);
}
/* div#mediaWrap .socialWrap>div a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--red-dark);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div#mediaWrap .socialWrap>div a:hover:before, div#mediaWrap .socialWrap>div a.focus:before{
  transform: scaleX(100%);
} */
div#mediaWrap .socialWrap>div a:after{
  content: '';
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  left: 5px;
  top: 5px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
div#mediaWrap .socialWrap>div a.youtube:after{
  background-image: url(../images/home/media-youtube.svg);
}
div#mediaWrap .socialWrap>div a.fb:after{
  background-image: url(../images/home/media-facebook.svg);
}
div#mediaWrap .socialWrap>div a.ig:after{
  background-image: url(../images/home/media-ig.svg);
}
div#mediaWrap .socialWrap>div a.weibo:after{
  background-image: url(../images/home/media-weibo.svg);
}
div#mediaWrap .socialWrap>div a.wechat:after{
  background-image: url(../images/home/media-wechat.svg);
}
div#mediaWrap .socialWrap>div a.linkedin:after{
  background-image: url(../images/home/media-linkedin.svg);
}

div#mediaWrap .socialWrap>div:first-child, div#mediaWrap .socialWrap>div:nth-child(4), div#mediaWrap .socialWrap>div:nth-child(7){
  justify-content: center;
}
div#mediaWrap .socialWrap>div:first-child a{
  margin-left: -150px;
}
div#mediaWrap .socialWrap>div:nth-child(2), div#mediaWrap .socialWrap>div:nth-child(6){
  justify-content: flex-end;
}
div#mediaWrap .socialWrap>div:nth-child(2) a{
  margin-right: -30px;
}
div#mediaWrap .socialWrap>div:nth-child(3){
  margin-top: 13px;
}
div#mediaWrap .socialWrap>div:nth-child(4){
  height: 95px;
}
div#mediaWrap .socialWrap>div:nth-child(4) a{
  margin-left: 220px;
}
div#mediaWrap .socialWrap>div:nth-child(5){
  margin-top: 20px;
  height: 40px;
}
div#mediaWrap .socialWrap>div:nth-child(5) a{
  margin-left: 60px;
}
div#mediaWrap .socialWrap>div:nth-child(6){
  height: 95px;
}
div#mediaWrap .socialWrap>div:nth-child(6) a{
  margin-left: -60px;
}
div#mediaWrap .socialWrap>div:nth-child(7){
  margin-top: 15px;
}
#bannerWrap{
  background: var(--primary-blue);
  padding: 30px 0;
}
#bannerWrap .container{
  position: relative;
}
#bannerWrap .swiper-slide{
  width: auto;
}
#bannerWrap .swiper-slide a{
  display: block;
  line-height: 0;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--grey-light1);
  transition: border-color 0.25s ease 0s;
}
#bannerWrap .swiper-slide a:hover, #bannerWrap .swiper-slide a:focus{
  border-color: var(--red-normal);
}
#bannerWrap .control-btn.stop:before, #bannerWrap .control-btn.stop:after{
  background-color: var(--white);
}
#bannerWrap .control-btn.stop:hover:before, #bannerWrap .control-btn.stop:hover:after, #bannerWrap .control-btn.stop:focus:before, #bannerWrap .control-btn.stop:focus:after{
  background-color: var(--red-light);
}
#bannerWrap .swiper-control{
  justify-content: center;
  margin-top: 10px;
}
#bannerWrap .swiper-button-prev.outerArrow, #bannerWrap .swiper-button-next.outerArrow{
  margin-top: 0;
  transform: translateY(-55%);
}
#bannerWrap .swiper-button-prev:after, #bannerWrap .swiper-button-prev:after, #bannerWrap .swiper-button-next:after, #bannerWrap .swiper-button-next:after{
  border-color: var(--white)!important;
}
#bannerWrap .control-btn.play:before{
  border-left-color: var(--white);
}
#bannerWrap .control-btn.play:hover:before, #bannerWrap .control-btn.play:focus:before{
  border-left-color: var(--red-light);
}
#bannerWrap .swiper-control .swiper-button-prev{
  margin-right: 0;
}
#jobZone{
  display: flex;
  width: 100%;
  overflow: hidden;
}
#jobZone .jobScroll{
  flex: 1 1 auto;
  border-top-left-radius: var(--hotline-radius);
  border-bottom-left-radius: var(--hotline-radius);
  background-color: var(--primary-green-light);
  padding: 10px 20px 10px 30px;
}
#jobZone .jobScroll .swiper-slide{
  width: 100%!important;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: var(--primary-green-light);
}
#jobZone .jobScroll .swiper-slide a{
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: calc((var(--job-title-font-size) / var(--text-base-size-for-calc)) * 1em);
  color: var(--primary-green);
  line-height: 1.2;
  text-align: right;
}
#jobZone .jobScroll .swiper-slide a span{
  display: inline-block;
  margin-left: 5px;
  font-size: calc((var(--job-smaller-font-size) / var(--text-base-size-for-calc)) * 1em);
}

#jobZone .jobTitle{
  line-height: 100%;
  padding: 0 5px 0 15px;
  position: relative;
  background-color: var(--primary-green);
  border-top-right-radius: var(--hotline-radius);
  border-bottom-right-radius: var(--hotline-radius);
  color: var(--white);
  font-size: calc((var(--job-title-font-size) / var(--text-base-size-for-calc)) * 1em);
  font-weight: 700;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
#jobZone .jobTitle a{
  color: var(--white);
}
#jobZone .jobTitle a:hover, #jobZone .jobTitle a:focus{
  text-decoration: underline;
}
/* #jobZone .jobTitle:before{
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: url(../images/icons-jobs.svg) 50% 50% no-repeat;
  background-size: cover;
  left: 25px;
  top: calc(50% - 2px);
  transform: translateY(-50%);
} */
#jobZone .jobTitle #jobNo{
  display: inline-block;
  padding: 5px 10px;
  border-radius: 10px;
  background-color: var(--white);
  color: var(--primary-green);
  line-height: 10px;
  min-width: 28px;
  margin-left: 10px;
}
#jobZone .jobTitle > div{
  display: flex;
  align-items: center;
}
#jobZone .jobTitle a.control-btn{
  display: block;
  /* width: 20px; */
}
#jobZone .jobTitle .control-btn.stop:before, #jobZone .jobTitle .control-btn.stop:after{
  margin-top: -8px;
  background-color: currentColor;
}
#jobZone .jobTitle .control-btn.stop:hover:before, #jobZone .jobTitle .control-btn.stop:focus:before, #jobZone .jobTitle .control-btn.stop:hover:after, #jobZone .jobTitle .control-btn.stop:focus:after{
  background-color: var(--primary-green-light);
}
#jobZone .control-btn.play:before{
  margin-top: 0;
  border-left-color: currentColor;
}
#jobZone .control-btn.play:hover:before, #jobZone .control-btn.play:focus:before{
  border-left-color: var(--primary-green-light);
}


#newsWrap .swiper-control-wrap, #dramaWrap .swiper-control-wrap{
  justify-content: center;
}
.swiper-control-wrap{
  display: flex;
  position: relative;
}
.swiper-control-wrap .swiper-control{
  flex: 1 1 auto;
}
.swiper-control{
  position: relative;
  display: flex;
  align-items: center;
}
.swiper-control .swiper-button-prev, .swiper-control .swiper-button-next{
  position: relative;
  margin-top: 0;
  margin: 0 10px;
  height: 30px;
  top: 0!important;
}
.swiper-control .swiper-button-next{
  margin-left: 0;
}
.swiper-button-prev, .swiper-button-next{
  width: var(--container-padding);
  height: 50px;
  background: transparent;
}
.swiper-button-prev:after, .swiper-button-prev:after, .swiper-button-next:after, .swiper-button-next:after{
  border-color: var(--red-normal);
  border-width: 3px;
}
.swiper-button-prev:hover:after, .swiper-button-prev:focus:after, .swiper-button-next:hover:after, .swiper-button-next:focus:after{
  border-color: var(--red-normal);
}
.swiper-control .swiper-button-prev, .swiper-control .swiper-button-next, .swiper-control .swiper-fraction{
    display: none;
}
.swiper-pagination-bullet{
  width: 10px;
  margin-left: 15px;
  margin-right: 0;
  transition: all 0.25s ease 0s;
}
.swiper-pagination-bullet:first-child{
  margin-left: 0;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
  width: 40px;
}
.swiper-control .swiper-pagination-bullet:before{
  width: 100%;
  height: 10px;
  border-radius: 50%;
  transition: all 0.25s ease 0s;
  opacity: 1;
}
.swiper-control .swiper-pagination-bullet.swiper-pagination-bullet-active:before{
  border-radius: 10px;
}
#main-visual-wrap .swiper-control .swiper-pagination-bullet:before{
  margin-top: -5px;
}
#main-visual-wrap .control-btn.stop:before, #main-visual-wrap .control-btn.stop:after{
  margin-top: -8px;
}
#main-visual-wrap .control-btn.play:before{
  margin-top: 0;
}
#main-visual-wrap .swiper-control .swiper-pagination-bullet:before, #newsWrap .swiper-control .swiper-pagination-bullet:before{
  background-color: var(--grey-normal);
}
#main-visual-wrap .swiper-control .swiper-pagination-bullet:hover:before, #newsWrap .swiper-control .swiper-pagination-bullet:hover:before, #main-visual-wrap .swiper-control .swiper-pagination-bullet:focus:before, #newsWrap .swiper-control .swiper-pagination-bullet:focus:before{
  background-color: var(--red-normal);
}
#main-visual-wrap .swiper-control .swiper-pagination-bullet.swiper-pagination-bullet-active:before, #newsWrap .swiper-control .swiper-pagination-bullet.swiper-pagination-bullet-active:before, :is(#videoWrap, #focusWrap) .swiper-control .swiper-pagination-bullet.swiper-pagination-bullet-active:before{
  background-color: var(--primary-blue);
}

a.more-btn{
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  position: relative;
  transition-property: color;
  transition-duration: 0.3s;
  background: var(--grey-normal);
  color: var(--white);
  padding: 8px 45px 8px 30px;
  border-radius: 45px;
  overflow: hidden;
  text-decoration: none;
  font-weight: 700;
}
a.more-btn:after{
  content: '';
  width: 0;
  height: 0;
  background-color: transparent;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--white);
  position: absolute;
  top: 50%;
  right: 13px;
  margin-top: 0px;
  transform: translateY(-50%);
  transition: transform 0.25s ease 0s;
}
a.more-btn:hover:after, a.more-btn:focus:after{
  transform: translateY(-50%) scale(1.3);
}
a.more-btn>span{
  position: absolute;
  width: 30px;
  height: calc(100% + 5px);
  background: var(--red-normal);
  right: 0;
  top: 0;
  z-index: -2;
}
a.more-btn:before{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--red-dark);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
a.more-btn:hover:before, a.more-btn:focus:before{
  transform: scaleX(100%);
}
.control-btn{
	width: 50px;
	height: 30px;
	position: relative;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0;
  color: var(--grey-dark);
}
.control-btn.stop:before, .control-btn.stop:after {
    content: '';
    width: 4px;
    height: 16px;
    background-color: var(--primary-blue);
    position: absolute;
    top: 50%;
    margin-top: -5px;
    /* transition: background-color .3s; */
}
.control-btn.stop:before {
    left: 37%;
}
.control-btn.stop:after {
    right: 37%;
}
.control-btn.stop:hover:before, .control-btn.stop:hover:after,
.control-btn.stop:focus:before, .control-btn.stop:focus:after {
    background-color: var(--red-normal);
}
.control-btn.play:before {
    content: '';
    width: 0;
    height: 0;
    background-color: transparent;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid var(--primary-blue);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 3px;
    transform: translate(-50%, -50%);
    /*-webkit-transition: border-color .3s, width .3s, height .3s;
    transition: border-color .3s, width .3s, height .3s;*/
}
.control-btn.play:hover:before, .control-btn.play:hover:after,
.control-btn.play:focus:before, .control-btn.play:focus:after {
    border-left-color: var(--red-normal);
}
.swiper-fraction{
  color: var(--primary-blue);
}
.swiper-lazy{
  opacity: 0;
}
.swiper-lazy.swiper-lazy-loaded{
  opacity: 1;
}
/***** for index end *****/

/*********** index animation start **********/
@media screen {
  section h2.indexTitle{
    opacity: 0;
    transition: opacity 0.5s ease 0s;
  }
  section.shown h2.indexTitle{
    opacity: 1;
  }
  #newsWrap #news-wrap .swiper-slide, #bannerWrap{
    opacity: 0;
    transform: translateY(20px);
  }
  #newsWrap.end #news-wrap .swiper-slide, #dramaWrap.end #drama-wrap .swiper-slide{
    opacity: 1;
    transform: translateY(0);
  }
  #newsWrap #news-wrap .swiper-slide.shown, #bannerWrap.shown{
    transition: opacity 0.3s ease 0s, transform 0.5s ease 0s;
    opacity: 1;
    transform: translateY(0);
  }
  #dept-wrap>div{
    opacity: 0;
    transform: translateY(20px);
  }
  #dept-wrap>div.shown{
    transition: opacity 0.3s ease 0s, transform 0.5s ease 0s;
    opacity: 1;
    transform: translateY(0);
  }
  #dramaWrap #drama-wrap .swiper-slide{
    opacity: 0;
    transform: translateY(20px);
  }
  #dramaWrap.shown #drama-wrap .swiper-slide.shown{
    transition: opacity 0.3s ease 0s, transform 0.5s ease 0s;
    opacity: 1;
    transform: translateY(0);
  }
  /* #dramaWrap.shown #drama-wrap .swiper-slide{
    opacity: 1;
    transform: translateY(0);
  } */

  #btmWrap:before, #btmWrap:after, #btmWrap .flexbox>div{
    opacity: 0;
  }
  #btmWrap:after, #btmWrap .flexbox>div#videoWrap{
    transform: translateX(20px);
    transition: opacity 0.3s ease 0.3s, transform 0.5s ease 0.3s;
  }
  #btmWrap:before, #btmWrap .flexbox>div#mediaWrap, #btmWrap .flexbox>div#focusWrap{
    transform: translateX(-20px);
    transition: opacity 0.3s ease 0s, transform 0.5s ease 0s;
  }
  #btmWrap.shown:before, #btmWrap.shown:after, #btmWrap.shown .flexbox>div#videoWrap, #btmWrap.shown .flexbox>div#mediaWrap, #btmWrap.shown .flexbox>div#focusWrap{
    opacity: 1!important;
    transform: translateX(0)!important;
  }
}

/*********** index animation end **********/