@charset "utf-8";
/* *******************************************************
 * filename : sub_style.css
 * description : 서브페이지 CSS
 * date : 2024-12-05
******************************************************** */

/* ========================================================
 * SETTING
======================================================== */
:root{
	--main-color: #1d4ea3;
	--page-container-width: 1600px;
	--area-wide-width: 1620px;
	--area-box-width: 1520px;
	--area-width: 1320px;
	--area-padding: 30px;
	--header-height: 110px;
	--header-top:0;
	--sub-visual-height: 93.3rem;
	--sub-visual-img-height: 50rem;
	--sub-menu-height: 69px;
	--full-height: 100vh;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
	--font-family1:'Wanted Sans Variable', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
}
/* ========================================================
 * SETTING
======================================================== */

.sub_visual {width: 100%; height: 580px; background-repeat: no-repeat; background-size: cover; background-position: center;}
@media (max-width: 800px){
    .sub_visual {height: 400px;}
}
.sub_visual.visual1 {background-image: url(../../images/sub_visu01.jpg);}
.sub_visual.visual2 {background-image: url(../../images/sub_visu02.jpg);}
.sub_visual.visual3 {background-image: url(../../images/sub_visu03.jpg);}
.sub_visual.visual4 {background-image: url(../../images/sub_visu04.jpg);}
.sub_visual.visual5 {background-image: url(../../images/sub_visu05.jpg);}

.sub_visual .inner {max-width: 1600px; margin: 0 auto; height: 100%; padding-top: 90px; display: flex; flex-direction: column; justify-content: center;}
.sub_visual .inner .visual-tit-eng {font-size: 2.4rem; font-family: 'play'; color: #fff;}
.sub_visual .inner .visual-tit {font-size: 7.2rem; font-weight: 600; color: #fff; padding-bottom: 10rem; font-family: 'play';}
.sub_visual .navi_wrap {color: #fff; display: flex; height: 20px;}
.sub_visual .navi_wrap .ic_home {margin-right: 40px; font-size: 20px; position: relative; color: #fff;}
.sub_visual .navi_wrap .ic_home::before {content:" "; display: block; width:1px; height: 14px; background:#fff; opacity:.3; position: absolute; right: -20px; top: 2px;}
.sub_visual .navi_wrap .depth {width: 200px; position: relative; margin-right: 40px; background: url(../../img/arrow-down.png) no-repeat center right / 12px;}
.sub_visual .navi_wrap .depth::before {content:" "; display: block; width:1px; height: 14px; background:#fff; opacity:.3; position: absolute; right: -20px; top: 2px;}
.sub_visual .navi_wrap .depth:last-child::before {display: none;}
.sub_visual .navi_wrap .depth.prd_depth2, .sub_visual .navi_wrap .depth.prd_depth3 {width: 240px;}
.sub_visual .navi_wrap .depth_tit {cursor: pointer; font-size: 18px; font-weight: 300; margin-bottom: 8px;}
.sub_visual .navi_wrap .depth_menu {width: 100%; height: auto; display: none; background: rgba(255, 255, 255, 0.8); padding: 10px 0;}
.sub_visual .navi_wrap .depth_menu > li {padding: 8px 10px;}
.sub_visual .navi_wrap .depth_menu > li > a {font-size: 15px; color: #444; transition: color .2s;}
.sub_visual .navi_wrap .depth_menu > li > a:hover {color: #292f70;}


.page-container{ max-width:var(--page-container-width); margin:13rem auto; }
.page_tit h3 {text-align: center; font-size: 4.5rem; color: #333333; padding-bottom: 13rem; font-family: 'play';}

@media (max-width: 1024px){
    .page-container{margin:10rem auto; }
    .page_tit h3 {padding-bottom: 10rem}
}
@media (max-width: 800px){
    .page-container{margin:8rem auto; }
    .page_tit h3 {padding-bottom: 8rem}
}


.animation {-webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
.animation.down {-webkit-transform: translateY(-80px); transform: translateY(-80px);}
.animation.up {-webkit-transform: translateY(80px); transform: translateY(80px);}
.animation.left {-webkit-transform: translateX(80px); transform: translateX(80px);}
.animation.right {-webkit-transform: translateX(-80px); transform: translateX(-80px);}
.animation.opacity {opacity: 0;}
.animation.on.down, .animation.on.up {-webkit-transform: translateY(0); transform: translateY(0);}
.animation.on.left, .animation.on.right {-webkit-transform: translateX(0); transform: translateX(0);}
.animation.on.opacity {opacity: 1;}


.pageTitle em {color: #1a50a2; font-size: 2rem; font-weight: 800; font-style: normal; font-family: 'play';}
.pageTitle h4 {margin: 10px 0 30px; font-size: 8.3rem; line-height: 1; color: #111111; font-family: 'play';}
.pageTitle h4 b {font-weight: 800;}
.pageTitle .com_txt {font-size: 25px; color: #3e3e3e; line-height: 30px; font-weight: 600;}
.marginTop60 {margin-top: 60px;}
.marginTop100 {margin-top: 100px;}
.topImg {width: 117%; position: relative;}
.topImg::after {content: ""; display: block; background: #ffffff; position: absolute; top: 0; right: 0; bottom: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; width: 100%; height: 100%;}
.topImg.on::after {width: 0;}
.topImg img {max-width: 100%; border-radius: 20px 0 0 20px;}
.about_txt_area {display: flex;}
.about_tit {font-size: 4.8rem; line-height: 1.2; color: #111111; width: 50%; word-break: keep-all;}
.about_tit strong {font-weight: 600;}
.about_tit span {font-weight: 600; color: #1a50a2;}
.about_txt {font-size: 2rem; line-height: 1.8; color: #111111; width: 50%; word-break: keep-all;}
.about_txt strong {font-weight: 600;}
.organization {text-align: center;}

@media (max-width: 1433px){
    .organization img {width: 100%;}
}
@media (max-width: 1220px){
    .pageTitle h4 {margin: 10px 0 30px; font-size: 7.3rem;}
    .about_tit br {display: none;}
}
@media (max-width: 1100px){
    .pageTitle h4 {margin: 10px 0 30px; font-size: 6.3rem;}
    .about_tit {font-size: 4.8rem; width: 40%;}
    .about_txt {font-size: 2rem; width: 60%;}
}
@media (max-width: 800px){
    .marginTop60 {margin-top: 40px;}
    .marginTop100 {margin-top: 80px;}
    
    .pageTitle h4 {margin: 10px 0 30px; font-size: 4.3rem;}
    .about_txt_area {display: block;}
    .about_tit {font-size: 3rem; width: 100%; padding-bottom: 2rem}
    .about_txt {width: 100%;}
}
@media (max-width: 680px){
    .marginTop60 {margin-top: 30px;}
    .marginTop100 {margin-top: 70px;}
    
    .pageTitle h4 {margin: 10px 0 30px; font-size: 3.8rem;}
    .about_txt_area {display: block;}
}


.history-con {overflow: hidden; padding: 26px 0;}
.history-year-group-box {position: relative; z-index: 1;}
.history-con .history-year-list {position: relative;}
.history-con .history-year-list:before {position: absolute; content: ""; top: 1.5rem; bottom: 3rem; left: 29rem; margin-left: -1px; width: 2px; height: 96%; background-color: #e1e1e1; z-index: 1;}
.history-year-item {display: flex; flex-wrap: wrap;}
.history-year-item .history-year {position: relative; display: flex; justify-content: start; text-align: right; width: 29rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.history-year-item .history-year strong {display: inline-block; text-align: right; width: 19.3rem; transition: all 0.5s ease; font-size: 2.3rem; font-weight: 600; line-height: 2em; letter-spacing: -0.72px; color: #000000; font-family: 'play';}
.history-year-item .history-year .dots {position: absolute; display: block; top: 1.3rem; right: -0.6rem; width: 1.2rem; height: 1.2rem; border: 0.3rem solid #0F5676; background: #fff; transition: all 0.3s; box-sizing: border-box; border-radius: 50%; z-index: 2;}
.history-year-item .dots .inner-dots {position: absolute; display: block; width: 6rem; height: 6rem; background: rgba(15, 86, 118,0.23); border-radius: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); z-index: 3; transition: all 0.3s;}
.history-year-item .dots .inner-dots:after {display: block; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); width: 9rem; height: 9rem; z-index: -1; background: rgba(15, 86, 118,0.1); border-radius: 100%; transition: all 0.5s;}
.history-year-item .history-month-box {width: calc(100% - 29rem); padding-bottom: 10rem;}
.history-con .history-year-item:last-of-type .history-month-box {padding-bottom: 0;}
.history-year-item .history-month-box li {display: flex; padding-left: 7.5rem; margin-bottom: 3rem;}
.history-year-item .history-month-box li:last-child {margin-bottom: 0;}
.history-year-item .history-month-box li .history-month {width: 4.4rem; font-size: 1.8rem; line-height: 2em; letter-spacing: -0.36px; color: #000000;}
.history-year-item .history-month-box li .history-detail-txt-con {width: calc(100% - 4.4rem);}
.history-year-item .history-month-box li .history-detail-txt-con .history-detail-txt {font-size: 2rem; line-height: 2em; letter-spacing: -0.36px; color: #111111;}

/* active */
.history-year-item.active .history-year strong {font-size: 5rem; letter-spacing: -1.6px; line-height: 1; color: #1d4ea3;}
.history-year-item.active .dots .inner-dots {transform: translate(-50%,-50%) scale(1); animation: dots-ani 0.5s forwards ease; animation-delay: 0.05s;}
.history-year-item.active .dots .inner-dots:before {display: block; content: ""; width: 3rem; height: 3rem; background: #fff; position: absolute; left: 50%; top: 50%; border-radius: 100%; border: 0.5rem solid #0F5676; animation: dots-ani 0.5s forwards ease; animation-delay: 0.02s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.history-year-item.active .dots .inner-dots:after {animation: dots-ani 0.5s forwards ease; animation-delay: 0.08s;}

@keyframes dots-ani {
    0% {
        transform: translate(-50%,-50%) scale(0);
    }

    100% {
        transform: translate(-50%,-50%) scale(1);
    }
}

.c_hero {position:relative;z-index:0;width:100%; height: 0;}
.c_hero .c_marquee {transform:rotate(90deg);}
.c_marquee {position:absolute; right: 91px; transform: translateX(-50%);}
.c_marquee .cm_wrap {width:100%; height:180px; display:flex; justify-content:center; align-items:center;}
.c_marquee .marquee,
.c_marquee .marqueereverse {position:absolute; display:inline-block; white-space:nowrap; font-family:'Play'; font-size:30rem; font-weight:900; line-height:180px;}
 .c_marquee .marqueereverse {color: #000; opacity: .1; animation:slidereversemarquee 120s linear infinite;}
 .c_marquee .marqueereverse.t1 {animation-delay:-60s;}
@keyframes slidemarquee {0% {transform:translateX(-100%);}100% { transform:translateX(100%);}}
@keyframes slidereversemarquee {0% {transform:translateX(100%);}100% { transform:translateX(-100%);}}

@media (max-width: 1280px){
    .history-year-item .history-year {width: 23rem;}
	.history-year-item .history-year strong {width: 15.3rem;}
	.history-year-item .history-month-box {width: calc(100% - 23rem);}
	.history-con .history-year-list:before {left: 23rem;}
}

@media (max-width: 800px){
    .history-year-item .history-year {width: 15rem;}
	.history-con .history-year-list:before {left: 15rem;  height: 94.5%;}
	.history-year-item .history-year strong {width: 8.3rem;}
	.history-year-item.active .history-year strong {font-size: 3.2rem;}
	.history-year-item .history-month-box {width: calc(100% - 15rem); padding-bottom: 7rem;}
	.history-year-item .history-month-box li {padding-left: 5rem;}
	.history-year-item .dots .inner-dots:after {width: 7rem;height: 7rem;}
	.history-year-item .dots .inner-dots {width: 4.5rem; height: 4.5rem;}
    .history-year-item .history-month-box li .history-detail-txt-con .history-detail-txt {font-size: 1.8rem;}
    
    .c_marquee .marqueereverse {font-size:20rem;}
}


.address{border-collapse: collapse;}
.loaction_contents .address {width: 100%;}
.loaction_contents .address tr:nth-child(1) th,
.loaction_contents .address tr:nth-child(1) td {border-top: 2px solid #101010;}
.loaction_contents .address th {width: 15%; text-align: left; padding: 20px; border-bottom: 1px solid #ececec; font-size: 2rem; font-weight: 600;}
.loaction_contents .address th>div{display: inline-block; padding-left: 30px;}
.loaction_contents .address td {width: 100%; text-align: left; padding: 50px; border-bottom: 1px solid #ececec; font-size: 2rem; font-weight: 400; line-height: 1.5}
.loaction_contents .map {max-width:  1450px; margin: 25px 0 50px;}
.map{width: 100% !important;}
.map iframe { width:100%;}

@media screen and (max-width: 1480px){
  .loaction_contents .address th{padding: 10px;}
}

@media screen and (max-width: 1080px){
    .loaction_contents .address th, .location_wrap .address td {font-size: 1.8rem;}
  .loaction_contents .address th {width: 22%;}
  .loaction_contents .address th>img{scale: 78%;}
  .loaction_contents .address th>div{padding: 10px; margin-left: 5px;}
}

@media screen and (max-width: 800px){
	.loaction_contents .address th {width: 27%; font-size: 1.7rem; padding: 15px; text-align: center;}  
  .loaction_contents .address th>div{padding: 0px;}	
	.loaction_contents .address td {font-size: 15px; padding: 20px;} 
}

@media screen and (max-width: 650px){
  .loaction_contents .address th>div{padding: 0px;}	
	.loaction_contents .address td {font-size: 13px; padding: 20px;} 
	.location_wrap .address th>img{display: none;}
}



.img_list li {display:flex;align-items:center; position: relative;}
.img_list li + li {margin-top:100px;}
.img_list li .img {width:50%;border-radius:20px;overflow:hidden;animation-timing-function: ease-out;animation-duration: 300ms;transition:ease-out 0.3s;}
.img_list li .img img {width:100%;}
.img_list li .txt_wrap {width:50%;padding-left:80px;box-sizing:border-box; height: 100%;}
.img_list li .txt_wrap strong {display:block;font-size:3.6rem;line-height:1.25;font-weight:700;color:#333; padding-bottom: 3rem}
.img_list li .txt_eng {font-family: 'play'; color: rgba(32,96,193,.2); font-size: 6.2rem; font-weight: 600; line-height: 1; position: absolute; top: 0; right: 0; text-align: right;}
.img_list li .txt_wrap dl.pt30 {padding-top: 3rem !important;}
.img_list li .txt_wrap dt {font-size: 2.4rem; color: #666; font-weight: 600; padding-bottom: 1rem;}
.img_list li .txt_wrap dd {font-size: 2rem; color: #666; padding-bottom: .5rem;}
.img_list li .txt_wrap dd.in {margin-left: 2rem;}
.img_list li .txt_wrap dd:last-child {padding-bottom: 0;}
.img_list li .txt_wrap dd .pc {display: inline-block;}
.img_list li .txt_wrap dd .mo {display: none;}
.img_list li:nth-of-type(even) {flex-direction: row-reverse;}
.img_list li:nth-of-type(even) .txt_wrap {padding-left:60px;padding-right:80px; text-align: right;}
.img_list li:nth-of-type(even) .txt_eng {top: 0; left: 0; text-align: left;}

@media screen and (max-width:768px) {
    .img_list li {display:block;}
    .img_list li + li {margin-top:60px;}
    .img_list li .img,
    .img_list li .txt_wrap {width:100%; padding-left:0px;}
    .img_list li .txt_wrap strong {padding: 2rem 0}
    .img_list li .txt_wrap div {display: flex}
    .img_list li .txt_wrap dt {padding-bottom: .5rem;}
    .img_list li .txt_wrap dl {width: 50%;}
    .img_list li .txt_wrap dl.pt30 {padding-top: 0 !important;}
    .img_list li .txt_wrap dd .pc {display: none;}
    .img_list li .txt_wrap dd .mo {display: inline-block;}
    .img_list li:nth-of-type(even) {flex-direction: none;}
    .img_list li:nth-of-type(even) .txt_wrap {padding-left:0px;padding-right:80px; text-align: left;}
    .img_list li:nth-of-type(even) .txt_eng {top: 0; left: 0; text-align: left;}
	}