@charset "utf-8";

/* 타이틀 영역 */
.Subtitle_wrapA {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1240px;
    min-height: 150px;
    margin: 0 auto;
    margin-top: 10px;
    padding: 15px;
    background: #FFF;
    word-break: keep-all;
    transition: all .25s ease;
}
.Subtitle_wrapA .Sub_title {position: relative; width:auto; text-align: center;}
.Subtitle_wrapA .Sub_title h1{font-size:16px; font-weight:700; letter-spacing:-1px; color:#565e65; transition: all .25s ease;}
.Subtitle_wrapA .Sub_title .Subtext {display: block; color:#000; font-size:40px; font-weight:700; margin-top: 4px; letter-spacing: -3px;}



/* 탭 메뉴 페이지링크 */
.sTabBox {position:relative; width:100%; max-width:1200px; margin:0 auto; margin-top:-30px; z-index:100;}
.sTabBox .btnbox {position: absolute; display: none; width:50px; height: 48px; padding-left: 10px; right: 0px; top:0px; z-index: 10;}
.sTabBox .btnbox img {transition: all 0.2s ease;}
.sTabBox .tab {position:relative; display:flex; flex-wrap: wrap; border:1px solid #e9eef4; border-radius:30px; background: #FFF; padding:4px;}
.sTabBox .tab li {position:relative; flex: 1 1;}
.sTabBox .tab li a {display:flex; height:50px; font-size:18px; font-weight: 500; align-items:center; justify-content:center;}
.sTabBox .tab li:hover a {color: #0194d8;}
.sTabBox .tab li.active:before {display:none;}
.sTabBox .tab li.active + li:before {display:none;}
.sTabBox .tab li.active a {background-image: linear-gradient(115deg, #00d8ff 3%, #00a9ff 110%); color:#FFF; border-radius: 27px 27px;}
.sTabBox .tab li + li:before {position:absolute; content: ''; display: block; width: 1px; height:16px; background: #DDD; top: 50%; left: 0; margin-top: -8px;}
.sTabBox.MaxW1200 {max-width:1200px !important;}
.sTabBox.MaxW1000 {max-width:1000px !important;}
.sTabBox.MaxW800 {max-width:800px !important;}
.sTabBox.ordTop {margin-top: 80px;}


/* 탭 메뉴 페이지내 타겟 이동 */
.sub_depth {width:100%; max-width:1200px; margin:0 auto;}
.sub_depth .tab {position:relative; display:flex; flex-wrap: wrap; border:1px solid #EEE; border-radius:27px;}
.sub_depth .tab li {position:relative; flex: 1 1;}
.sub_depth .tab li a {display:flex; height:54px; font-size:18px; font-weight: 500; align-items:center; justify-content:center;}
.sub_depth .tab li:hover a {background-image: linear-gradient(115deg, #fbd302 3%, #05ac97 110%); color:#FFF; border-radius: 27px 27px;}
.sub_depth .tab li:hover:before {display:none}
.sub_depth .tab li:hover + li:before {display:none;}
.sub_depth .tab li + li:before {position:absolute; content: ''; display: block; width: 1px; height:16px; background: #DDD; top: 50%; left: 0; margin-top: -8px;}


/* wrap 공통  */
.cont_wrap {position:relative; width:100%; height:auto; min-height:700px; font-size: 18px; word-break:keep-all; margin-top:-30px; padding-bottom:140px;}
.cont_wrapB {position:relative; width:100%; height:auto; min-height:700px; font-size: 18px; word-break:keep-all; margin-top:-30px; padding: 0 10px 140px 10px;}


/* 콘텐츠 wrap 박스 공통 */
.cont_SwrapA {position:relative; width:100%; max-width:1200px; height:auto; overflow:hidden; margin:0 auto; padding: 100px 0 100px 0;} /* 1200 가운데 */
.cont_SwrapB {position:relative; width:100%; height:auto; overflow:hidden; padding: 100px 20px;} /* 와이드 */
.cont_BoxA {position:relative; width: 100%; max-width:1200px; height: auto; margin: 0 auto;}

.titleBoxA {display: block; width: 100%; margin-bottom: 40px;}
.titleBoxA h1 {font-size: 34px; color: #000; line-height: 1; margin-bottom: 2.5%;}
.titleBoxA .subText {font-size: 20px; font-weight: 600; color: #666;}



/* ------------------------------------------- 서브 콘텐츠 페이지 시작 ---------------------------------------- */


/* 서브 비주얼 */
.sub_visual {position:relative; width: 100%; height:300px; position: relative; text-align:center; color: #fff; overflow:hidden;}
.s_visual_img {position:relative; width: 100%; height: 100%;}
.s_visual_img > img {max-width:none; width:auto; height:100%;}
.s_visual_img > img {position:relative; left:50%; top: 50%; transform:translate(-50%,-50%); width:auto; height:auto; min-width:100%; min-height:100%; max-width:initial;}
.sub_visual_over {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding-bottom: 0px !important;
    background-color: rgba(30, 30, 30, 0.35);
    z-index: 1;
}.sub_visual_txtbox {position:absolute; width: 100%; top:45%; left: 50%; transform: translate(-50%,-50%); z-index:2;}
.sub_visual_tit {font-size: 48px; font-weight:500; line-height:1}
.sub_visual_txt {font-size: 22px; font-weight: 400; margin-top:10px; width: 100%; padding:0 20px;}


/* 서브 비디오 비주얼 */
.video-wrap { position:relative; width:100%; height:auto; overflow:hidden;}
.video-element-group{ position:relative; width:100%; height:100%; max-width:100%;  min-width:1024px; margin:0 auto;  top:-472px;} /* 서브 지역그룹 {화면 W1024부터} 이미지로 변경*/























/* ********** 콘텐츠 미디어쿼리 1024 ********** */	
@media screen and (max-width:1024px) {

   /* 서브 비주얼 */
   .sub_visual {height:200px;}
   .sub_visual_txtbox {top:50%;}
   .sub_visual_tit {font-size: 48px;}
   .sub_visual_txt {font-size: 20px;}

	/* 서브 비디오 비주얼 */
    .video-wrap {display:none;}

}


/* ********** 콘텐츠 미디어쿼리 1020 ********** */	
@media screen and (max-width:1020px) {



}


/* ********** 콘텐츠 미디어쿼리 768 ********** */	
@media screen and (max-width:768px) {

    /* 타이틀 영역 */
    .Subtitle_wrapA { min-height: 140px; margin-top: 10px; padding: 15px;}
    .Subtitle_wrapA .Sub_title .Subtext {font-size:32px; letter-spacing: -2px;}

    /* 서브 비주얼 */
    .sub_visual {height:180px;}
    .sub_visual_tit {font-size: 40px;}
    .sub_visual_txt {font-size: 18px;}
    .s_visual_img > img{width:1152px;}

    /* 탭 메뉴 페이지링크 */
    .sTabBox .btnbox{display: flex;align-items: center;}
    .sTabBox .tab {display: block; border-radius:22px; padding:3px;}
    .sTabBox .tab li a {height:40px; font-size:15px; color: #999;}
    .sTabBox .tab li + li:before {position:absolute; width: 90%; height:1px; top:0%; left: 50%; transform: translateX(-50%); margin-top: 0px; background: #F5F5F5;}
    .sTabBox .tab li.menuno768 {display: none !important;}
}


/* ********** 콘텐츠 미디어쿼리 500 ********** */	
@media screen and (max-width:500px) {

    /* 타이틀 영역 */
    .Subtitle_wrapA .Sub_title .Subtext {font-size:28px; letter-spacing: -2px;}

    /* 서브 비주얼 */
    .sub_visual {height:160px;}
    .sub_visual_tit {font-size: 30px;}
    .sub_visual_txt {font-size: 16px;}
	.s_visual_img > img{width:1024px;}

}


/* ********** 콘텐츠 미디어쿼리 420 ********** */	
@media screen and (max-width:420px) {
   
    /* 타이틀 영역 */
    .Subtitle_wrapA .Sub_title .Subtext {font-size:24px; letter-spacing: -2px;}


}



/* ********** 콘텐츠 미디어쿼리 360 ********** */	
@media screen and (max-width:360px) {
   
    /* 타이틀 영역 */
    .Subtitle_wrapA .Sub_title .Subtext {font-size:20px; letter-spacing: -2px;}

}