@charset "utf-8";

/* **************************************** *
 * sub page css
 * **************************************** */

/* sub Visual */
.subVisual {position: relative; width: 100%;}
.subVisual .subVisual_bg { position: relative; width: 100%; height: 480px; overflow: hidden; background-color: #ddd;}
.subVisual .subVisual_bg > .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/images/page/contents/subVisual_bg.jpg') no-repeat 50% 50%; background-size: cover;  animation: visualScale 1.6s ease 0s; z-index: 1;}
.subVisual .subVisual_tit {position: absolute; top: 50%; left: calc((100% - 1600px) / 2); z-index: 10; transform: translateY(-50%);}
/* .subVisual .subVisual_tit .subVisual_tit_table {display: table-cell; vertical-align: middle;} */
.subVisual .subVisual_tit h1 {font-size: 46px; font-weight: 700; color: #fff;}
.subVisual .subVisual_tit p {font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, .6); font-family: 'Ubuntu'; letter-spacing: 2px; margin-top: 30px;}

@keyframes visualScale{
    0%{transform:scale(1.1) rotate(.001deg);}
    100%{transform:scale(1) rotate(.001deg);}
}

/* navigation */
.area_cont_navi {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 1600px; width: 100%; height: 60px; background-color: #fff; z-index: 10;}
.navigation {position: relative; float: right;}
.navigation .home {float: left; display: block; width: 60px; height: 60px; background: url('/images/page/common/icon_home.png') no-repeat 50% 50%; background-size: 18px auto;}
.navigation .navi_select {float: left; position: relative; z-index: 100;}
.navigation .navi_select .depth {position: relative; display: block; min-width: 240px; width: fit-content;  height: 60px; padding-left: 20px; text-align: left; transition: all .3s;}
.navigation .navi_select .depth:before {content: ''; position: absolute; top: 50%; left: 0; margin-top: -9px; display: block; width: 1px; height: 18px; background-color: #ddd;}
.navigation .navi_select .depth span {position: relative; display: block; color: #111; font-size: 1rem; line-height: 60px; letter-spacing: -0.05rem; padding-right: 50px;}
.navigation .navi_select .depth span:after {content: ''; position: absolute; top: 50%; right: 20px; margin-top: -5px; display: block; width: 10px; height: 10px; border-bottom: 3px solid #999; border-right: 3px solid #999; transform: rotate(45deg); transition: all .4s; box-sizing: border-box;}

.navigation .navi_list {position: absolute; top: 60px; left: 0; width: 100%; background-color: #000; border: 0; padding: 20px 20px; display: none; z-index: 10;}
.navigation .navi_list li {display: block; font-size: 1rem; margin-bottom: 10px; padding-bottom: 10px; line-height: 1;}
.navigation .navi_list li:last-child {margin-bottom: 0; padding-bottom: 0;}
.navigation .navi_list li a {display: block; color: rgba(255, 255, 255, .6); letter-spacing: -0.05rem;}
.navigation .navi_list li:hover a {color: var(--mitc-main);}

/* navi active */
.navigation .navi_select.active .depth span {color: var(--mitc-main);}
.navigation .navi_select.active .depth span:after {transform: rotate(225deg);}


/* sub common 서브페이지 공통 */
.sub_wrap {padding: 80px 0 120px;}
.page_title {text-align: center; margin-bottom: 80px;}
.page_title h2 {font-size: 40px; font-weight: 700; color: #000;}
.sub_wrap .item + .item {margin-top: 60px;}
.sub_wrap > div ~ .page_title {margin-top: 120px;}

/* page tab */
.page_tab {max-width: 1600px; width: 100%; margin: 0 auto 60px;}
.page_tab .tab_menu {display: flex; align-items: stretch; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;}
.page_tab .tab_menu > li {min-width: calc(25% - 20px);}
.page_tab .tab_menu > li > a {display: block; font-size: 18px; font-weight: 500; color: var(--mitc-gray); text-align: center; padding: 10px 20px; border: 2px solid rgba(30, 31, 36, .05); background-color: rgba(30, 31, 36, .02); border-radius: 50px;}
.page_tab .tab_menu > li.active > a {border-color: #fff; background-color: var(--mitc-main); color: #fff; box-shadow: 0 0 20px 0 rgba(202, 31, 28, .3);}

/* sub tab */
.sub_tab {position: relative; display: flex; justify-content: center; flex-wrap: wrap; border-width: 2px 0 2px 0; padding: 14px 0; border: 2px solid #ddd; border-width: 2px 0;}
/* .sub_tab:before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 10px solid transparent; border-top: 15px solid var(--mitc-main);} */
.sub_tab li a {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 16px; font-size: 17px; font-weight: 400; color: #999;}
.sub_tab li a:before {content: ''; position: absolute; top: 20px; left: 0; display: inline-block; width: 8px; height: 8px; background-color: var(--mitc-main); border-radius: 50%; opacity: 0; visibility: hidden;}
.sub_tab li a i {font-size: 20px;}
.sub_tab li:hover a {text-decoration: underline;}
.sub_tab li.active a {color: #000; font-weight: 700;}
.sub_tab li.active a:before {content: ''; opacity: 1; visibility: visible; background-color: var(--mitc-main);}
.sub_tab li.active a i {color: var(--mitc-main);}

.layout {display: flex; flex-wrap: wrap; align-items: stretch;}
.layout .layout_tit {width: 300px;}
.layout .layout_cont {width: calc(100% - 300px); padding-left: 40px;}
.layout .layout_item + .layout_item {margin-top: 80px;}
.layout .layout_item_tit {display: flex; align-items: center; justify-content: space-between;}

/* contents box */
.cont_box {background-color: rgba(30, 31, 36, .02); border: 2px solid rgba(30, 31, 36, .05); padding: 24px 24px; border-radius: 10px;}
.cont_box + .cont_box {margin-top: 30px;}

.info_box {display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; border: 2px solid rgba(30, 31, 36, .05); background-color: #fff; overflow: hidden; border-radius: 10px;}
.info_box + .info_box {margin-top: 10px;}
.info_box .left {flex: 0 0 280px; border-right: 1px solid rgba(30, 31, 36, .05); max-width: 280px; padding: 20px 20px; background-color: rgba(30, 31, 36, .02);}
.info_box .left > strong {font-size: 18px; font-weight: 600;}
.info_box .right {flex: 0 0 calc(100% - 280px); width: calc(100% - 280px); padding: 20px 20px;}
.info_box .right > p {font-size: 18px; color: #333;}

.img_box > img {max-width: 100%; height: 100%; object-fit: cover;}

/* sub title 공통 */
.sub_tit {position: relative; margin-bottom: 15px; word-break: keep-all;}
h3.sub_tit {font-size: 26px; font-weight: 700; color: #000;}
h4.sub_tit {font-size: 22px; font-weight: 700; color: #000; padding-left: 24px;}
h4.sub_tit:before {content: ''; position: absolute; top: 8px; left: 0; width: 16px; height: 16px; border: 4px solid var(--mitc-main); border-radius: 50%; box-sizing: border-box; box-shadow: 0 3px 5px 0 rgba(202, 31, 28, .3);}
h5.sub_tit {font-size: 17px; font-weight: 700; color: #000;}

.highlight {position: relative; z-index: 1;}
.highlight:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.7rem; background-color: #fff; box-shadow: 0 1px 10px rgba(30, 31, 36, .1); display: block; z-index: -1;}

/* box icon style */
.bx.icon {font-size: 20px; vertical-align: text-top; margin-right: 8px;}

/* list style 공통 */
.list_st_dot > li {position:relative; padding-left:10px; text-align:left; font-size: 1rem}
.list_st_dot > li + li{margin-top:10px;}
.list_st_dot > li:before{content:''; width:4px; height:4px; border-radius:50%; background:#aaa; position:absolute; display:block; left:0; top:10px; margin-right:8px;}
.list_st_dot > li > b {color:#222;}
.list_st_dot > li > p {font-size: 17px; color: #333;}
.list_st_dot > li > ul {margin-top: 15px;}

.list_st_dash > li {position:relative; padding-left:10px; text-align:left; font-size: 1rem;}
.list_st_dash > li + li{margin-top:10px;}
.list_st_dash > li:before{content:'-'; position:absolute; display:block; left:0; top:0; margin-right:8px;}
.list_st_dash > li > b{color:#222;}

.dl_bd_list {display: flex; align-items: stretch;}
.dl_bd_list + .dl_bd_list {margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px}
.dl_bd_list dt {width: 160px; font-size: 18px; font-weight: 600;}
.dl_bd_list dd {width: calc(100% - 160px); font-size: 1rem; font-weight: 400; color: var(--mitc-gray);}


/* image list style 공통 */
/* style1 */
.img_list_st1 {display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px 30px;}
.img_list_st1 > li {width: 100%; height: 100%; border: 1px solid #eee; background-color: #fff; border-radius: 10px; overflow: hidden; padding: 20px 20px;}
.img_list_st1 > li .img_box {position: relative; width: 100%; height: 195px; text-align: center; overflow: hidden;}
.img_list_st1 > li > .tit {display: block; width: 100%; font-size: 1rem; font-weight: 500; color: #333; text-align: center; padding: 10px 20px; background-color: var(--mitc-light); border-radius: 30px 30px; margin-top: 15px; word-break: keep-all;}

.img_list_st1 > li > p {font-size: 1rem; color: var(--mitc-gray); margin-top: 10px;}

.img_list_st1.list2 > li {width: calc(50% - 15px);}
.img_list_st1.list3 > li {width: calc(33.3% - 20px);}
.img_list_st1.list4 > li {width: calc(25% - 23px);}

.img_list_st1 > li.col > div {display: flex;}
.img_list_st1 > li.col2 {width: calc(50% - 15px);}
.img_list_st1 > li.col3 {width: calc(75% - 23px);}


/* .img_list_st2 {} */
.img_list_st2 > li {display: flex; flex-wrap: wrap; align-items: center;}
.img_list_st2 > li .img_box {width: 50%; border: 2px solid rgba(30, 31, 36, .05); border-radius: 10px; overflow: hidden;}
.img_list_st2 > li .img_box > img {display: inline-block; width: 50%;}
.img_list_st2 > li .txt_box {width: 50%; padding: 60px 80px;}
.img_list_st2 > li .txt_box .tit {display: block; font-size: 28px; font-weight: 700; margin-bottom: 40px;}


/* style2 */

/* 준비중 페이지 */
.ready_box {text-align: center;}
.ready_box i {display: block; width: 120px; height: 120px; border: 5px solid #ddd; border-radius: 50%; margin: 0 auto;}
.ready_box i span {font-size: 60px; font-weight: 800; color: #ddd; font-family: 'Ubuntu'; line-height: 125px;}
.ready_box h5 {font-size: 35px; font-weight: 600; color: #111; letter-spacing: 5px; margin-top: 40px; font-family: 'Ubuntu';}
.ready_box p {margin-top: 30px; color: #666;}


/* 센터소개 about */
/* greeting 센터소개 > 인사말 */
.greeting {overflow: hidden;}
.greeting h3 {font-size: 32px; font-weight: 600; line-height: 1.3;}
.greeting h3 > b {color: var(--mitc-main); font-weight: 700;}
.greeting .img_box {width: 100%; height: 580px; background: url('/images/page/contents/greeting_img.jpg') no-repeat 0 0; background-size: cover; border-radius: 20px; overflow: hidden; margin-top: 50px; margin-bottom: 50px;}
.greeting .box {width: 50%; float: left; padding: 0 30px;}
.greeting .box p {font-size: 18px; word-break: keep-all; line-height: 1.6;}
.greeting .box p + p {margin-top: 30px;}
.greeting .sign {clear: both; padding-top: 60px; text-align: right;}
.greeting .sign * {display: inline-block; vertical-align: middle;}
.greeting .sign strong {font-size: 18px; font-weight: 600;}

/* organization 센터소개 > 조직도 */


/* location 센터소개 > 찾아오시는 길 */
/* 지도 */
.map {width: 100%; overflow: hidden;}
.map_label {position: relative; display: inline-block; background: var(--mitc-main); padding: 10px 20px;}
.map_label > span {color: #fff;}
.map_label:after {content:''; position: absolute; left: 0; right: 0; bottom: -10px; margin: 0 auto; width: 0; height: 0; border-top: 10px solid var(--mitc-main); border-left: 10px solid transparent; border-right: 10px solid transparent;}

.location .map {height: 600px;}
.location .map_cont {margin-bottom: 80px;}
.location .map_cont:after {content: ''; display: block; clear: both;}
.location .map_tit {position: relative; float: left; margin-top: -80px; margin-left: 40px; display: block; width: 420px; height: 160px; background: rgba(0, 0, 0, .9); backdrop-filter: blur(5px); text-align: center; line-height: 160px; z-index: 10; border-radius: 15px; padding: 0 20px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2); overflow: hidden;}
.location .map_tit h3 {position: relative; font-size: 30px; font-weight: 800; color: #fff; z-index: 1;}
.location .map_info {width: calc(100% - 520px); float: right; margin-top: 28px;}
.location .map_info dl {font-size: 0;}
.location .map_info dl > dt {position: relative; font-size: 18px; font-weight: 800; display: inline-block;  margin-right: 24px;}
.location .map_info dl > dt > .bx.icon {color: var(--mitc-main);}
.location .map_info dl > dd {font-size: 18px; display: inline-block; margin-right: 40px; color: #666;}


/* 주요사업 project */
/* service 서비스 맞춤 자동차~ */
/* 비전 */
.vision .vision_box {display: flex; flex-wrap: wrap; justify-content: space-between;}
.vision .vision_box > .box {position: relative; flex: 0 0 calc(50% - 20px); width: calc(50% - 20px); padding: 40px 40px; border-radius: 15px; color: #fff; border: 2px solid #fff;}
.vision .vision_box > .box.box1 {background-color: var(--mitc-main); box-shadow: 0 0 40px 0 rgba(202, 31, 28, .3);}
.vision .vision_box > .box.box2 {background-color: #000; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3);}
.vision .vision_box > .box > em {display: block; font-size: 80px; font-weight: 800; color: rgba(255, 255, 255, .2); font-family: 'Ubuntu'; line-height: 1;}
.vision .vision_box > .box > strong {display: block; font-size: 24px; font-weight: 700; margin-top: -30px; text-decoration: underline;}
.vision .vision_box > .box .icon {position: absolute; right: 40px; top: 40px; width: 80px; height: 80px; background: no-repeat 50% 50%; background-size: auto 80px;}
.vision .vision_box > .box.box1 .icon {background-image: url('/images/page/contents/vision_icon1.png');}
.vision .vision_box > .box.box2 .icon {background-image: url('/images/page/contents/vision_icon2.png');}
.vision .vision_box > .box > p {font-size: 18px; font-weight: 400; margin-top: 60px; word-break: keep-all;}

/* 주요사업 추진내용 */
/* 센터구축 */
.business .busi_center {position: relative; width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 30px;}
.business .busi_center:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .25); z-index: 0;}
.business .busi_center .img_box {width: 100%; height: 480px; background: url('/images/page/contents/center_img.jpg') no-repeat 50% 70%; background-size: cover;}
.business .busi_center .txt_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; z-index: 1;}
.business .busi_center .txt_box .tit {font-size: 36px; font-weight: 800; color: #fff;}
.business .busi_center .txt_box > p {font-size: 18px; font-weight: 200; color: #fff; word-break: keep-all; margin-top: 20px;}


/* 기술지원 technical */
/* platform 부품 공동활용 플랫폼 */
.platform .platform_box {display: flex; flex-wrap: wrap; gap: 20px 20px; margin-top: 30px;}
.platform .platform_box .box {position: relative; flex: 0 0 calc(50% - 10px); border-radius: 20px; padding: 40px 40px; border: 2px solid #fff; box-shadow: 8px 2px 60px 0 rgba(30, 31, 36, .07); text-align: center;}
.platform .platform_box .box .icon {display: block; width: 80px; height: 110px; background: no-repeat 50% 50%; background-size: 80px auto; margin: 0 auto 20px;}
.platform .platform_box .box .icon.icon1 {background-image: url('/images/page/contents/platform_icon1.png');}
.platform .platform_box .box .icon.icon2 {background-image: url('/images/page/contents/platform_icon2.png');}
.platform .platform_box .box .icon.icon3 {background-image: url('/images/page/contents/platform_icon3.png');}
.platform .platform_box .box .icon.icon4 {background-image: url('/images/page/contents/platform_icon4.png');}
.platform .platform_box .box *:not(.sr_only) {position: relative; z-index: 1;}
.platform .platform_box .box > p {font-size: 18px; color: var(--mitc-gray);}
.platform .platform_box .box .tit {display: block; font-size: 26px; font-weight: 700; color: #27A0CC; margin-top: 5px;}
.platform .platform_box .box:nth-child(2n) .tit {color: var(--mitc-sub);}

.platform .platform_box .box.result:before {content: ''; position: absolute; top: -140px; left: 50%; width: 192px; height: 120px; transform: translateX(-50%) rotate(180deg); background: url('/images/page/contents/sub_arw.png') no-repeat 50% 100%; background-size: contain; z-index: 1;}
.platform .platform_box .box.result {flex: 0 0 100%; width: 100%; background: #000 url('/images/page/contents/platform_result_bg.jpg') no-repeat 50% 50%; background-size: cover; margin-top: 140px;}
.platform .platform_box .box.result .tit {color: #fff;}


/* sw_technical 전장부품SW 구축 및 기술지원 */
.sw_technical .autosar {position: relative; display: flex; align-items: center; justify-content: space-between; background-color: var(--mitc-sub); background: url('/images/page/contents/autosar_bg.jpg') no-repeat 50% 50%; background-size: cover; padding: 40px 40px; border-radius: 20px; margin-top: 30px;}
.sw_technical .autosar:before {content: ''; position: absolute; top: -25px; left: 50px; width: 0; height: 0; border-style: solid; border-width: 0 20px 40px 20px; border-color: transparent transparent #1A1F49 transparent; z-index: -1;}
.sw_technical .autosar .img_box {width: 320px; height: 220px; background-color: #000; border-radius: 10px; overflow: hidden;}
.sw_technical .autosar .txt_box {width: calc(100% - 320px); padding-left: 80px;}
.sw_technical .autosar .txt_box > strong {display: block; font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 20px; font-family: 'Ubuntu';}
.sw_technical .autosar .txt_box .list_st_dot > li > p {color: #fff;}


/* 시설이용 facilities */
/* 구축장비 리스트 equipment */
.equipmentList {display: flex; flex-wrap: wrap; gap: 20px 20px;}
.equipmentList > li {position: relative; width: calc(25% - 15px); border: 2px solid rgba(30, 31, 36, .05); background-color: rgba(30, 31, 36, .02); border-radius: 10px; overflow: hidden;}
.equipmentList > li .img_box {position: relative; width: 100%; height: 0; padding-bottom: 75%; background-color: #fff; background-image: url('/images/page/common/noimg.png'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; border-radius: 10px 10px 0 0;}
.equipmentList > li .img_box > img {position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: contain;}
.equipmentList > li .txt_box {padding: 20px 20px;}
.equipmentList > li .txt_box .tit {display: block; height: 2.8em; font-size: 20px; font-weight: 600; margin-top: 10px; margin-bottom: 20px;}
.equipmentList > li .txt_box .address {font-size: 1rem; color: var(--mitc-gray);}
.equipmentList li.nodata {width: 100%; padding: 40px 20px; background-color: transparent;}

/* .equipmentList > li:hover {border-color: #fff;} */

/* 장비신청 상세보기 detail */
/* photo slide view */
.photoSlide .swiper{border-radius:15px;}
.photoSlide .swiper, .photoSlide .swiper-container {margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; font-size:0;}
.photoSlide .photo_main{border:1px solid #ddd;}
.photoSlide .photo_main ul li {position: relative; height: 0; padding-top: 50%; overflow: hidden; background: #fff;}
.photoSlide .photo_main ul li img{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:100%; height:100%; object-fit: contain;}

/* .photoSlide .photo_thum ul{} */
.photoSlide .photo_thum {margin-top: 20px;}
.photoSlide .photo_thum ul li {position:relative; height:0; padding-top:19%; overflow:hidden; background:rgba(0,0,0,0.3); border-radius:15px;}
.photoSlide .photo_thum ul li:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid var(--mitc-main); box-sizing: border-box; opacity: 0; z-index: 1; border-radius:15px;}
.photoSlide .photo_thum ul li.swiper-slide-thumb-active:before {opacity: .8;}
.photoSlide .photo_thum ul li img{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:100%; height:100%; object-fit: cover;}

/* .photoSlide .photo_thum .thumb_ctrl {} */
.photoSlide .photo_thum .thumb_ctrl button {position: absolute; top: 50%; display: inline-block; background-color: transparent; width: 40px; height: 40px; background: rgba(255, 255, 255, .7) no-repeat 50% 50%; background-size: 12px auto; border-radius: 10px; vertical-align: middle;}
.photoSlide .photo_thum .thumb_ctrl button.swiper-button-prev {left: 10px; background-image: url('/images/page/common/icon_prev_bk.png');}
.photoSlide .photo_thum .thumb_ctrl button.swiper-button-next {right: 10px;; background-image: url('/images/page/common/icon_next_bk.png');}
.photoSlide .photo_thum .thumb_ctrl button.swiper-button-prev:after,
.photoSlide .photo_thum .thumb_ctrl button.swiper-button-next:after {content: none;}

/*.prd_detail > div + div {margin-top:50px;}*/
.prd_detail .btn_wrap {padding-top: 80px;}
.prd_detail .prd_box {display: flex; justify-content: space-between;}
.prd_detail .prd_box .photoSlide {max-width: 800px; width:50%;}
.prd_detail .prd_box .photo_main ul li {padding-top: 80% !important;}

.prd_detail .prd_info {max-width: calc(100% - 800px); width: 100%; padding-left: 80px;}
/* .prd_detail .prd_info .sub_tit {font-size: 30px;} */

.prd_detail .prd_info .btn_wrap a {display: block; width: 100%; height: 60px; line-height: 60px; background-color: var(--main_color); font-size: 18px; color: #fff; transition: all .2s;}
.prd_detail .prd_info .btn_wrap a:hover {border-radius: 35px; background-color: #111;}

/* .prd_detail .detail_item {} */
.prd_detail .detail_item dl {font-size: 0; padding: 15px 0; border-top: 1px solid #eee; display:flex; flex-wrap: wrap;}
.prd_detail .detail_item dl *{font-size:16px;}
.prd_detail .detail_item dl dt {position: relative; width: 180px; color: #111; font-weight: 600; font-size: 18px; line-height: 1.7rem; width:180px;}
/* .prd_detail .detail_item dl dt:before {content: ''; position:absolute; left:0; top:13px; display:block; width:3px; height:3px; background:#000;} */
.prd_detail .detail_item dl dd {width: calc(100% - 180px); color: #666; font-weight: 400;}
.prd_detail .detail_item dl dd .dd_tit{color:#222; display:block;}
.prd_detail .detail_item dl dd .dd_tit + *{margin-top:6px;}
.prd_detail .detail_item dl dd * + ul.list_st_dash{margin-top:6px; margin-left:10px;}
.prd_detail .detail_item dl.w100 dt {width: 100%; margin-bottom: 10px;}
.prd_detail .detail_item dl.w100 dd {width: 100%;}

/* 지도 (장비신청 / 교육및세미나 상세보기) */
.apl_loca {display: flex; align-items: center; justify-content: space-between; margin: 10px 0; padding: 10px 10px; background-color: var(--mitc-main); border-radius: 10px;}
.apl_loca p {color: #fff !important;}

.equip_photo_list{padding:0 50px}

.equip_photo_list .swiper-wrapper li a.img_box{display:block; padding-top:100%; height:0; position:relative; overflow:hidden; border:1px solid #eee; border-radius:15px; background:#f9f9f9;}
.equip_photo_list .swiper-wrapper li a.img_box:hover:after{content:''; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:15px; border:5px solid var(--sub_color); position:absolute; top:0; left:0;}
.equip_photo_list .swiper-wrapper li a.img_box img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:100%; height:100%; object-fit: contain;}
.equip_photo_list .swiper-wrapper li a.txt_box strong{display:block; text-align: center; font-size:18px; margin-top:10px; font-weight:500; font-family: var(--tit_font)}

.equip_photo_list .equip_list_remot{position:absolute; top:0; bottom:0; margin:auto; height:fit-content; font-size:24px; z-index: 10;}
.equip_photo_list .equip_list_remot.prev{left:0;}
.equip_photo_list .equip_list_remot.next{right:0;}

/*.apl_form{padding-top:60px;}*/
.apl_form .btn_wrap a {display: block; width: 60%; margin:30px auto; height: 60px; line-height: 60px; font-size: 18px; color:#fff; background:var(--sub_color); border-radius:5px; transition: all .2s;}
.apl_form .btn_wrap a:hover {border-radius: 35px;}

.apl_form .apl_opt_wrap {display:flex; justify-content: space-between;}
.apl_form .apl_opt_left {flex:0 0 460px;}
.apl_form .apl_opt_left .calendar {height: 100%;}
.apl_form .apl_opt_right {flex:1 1 calc(100% - 460px); padding-left:60px;}

.apl_form .form_group {display: block;}
.apl_form .form_group .input_field + .input_field {margin-top: 20px;}
.apl_form .form_group .input_field {display: flex; align-items: stretch; justify-content: space-between;}
.apl_form .form_group .input_field .field_tit {width: 240px; font-size: 18px; font-weight: 700;}
.apl_form .form_group .input_field .field_con {width: calc(100% - 240px);}


.apl_form .apl_opt_right input[type="date"]{-webkit-appearance: none;-moz-appearance: none; appearance: none; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; min-width: 120px; height: 40px; background: transparent; border:1px solid #ddd; font-family: 'Pretendard', sans-serif; vertical-align: middle; margin: 2px 3px; border-radius:5px; font-size:inherit;}
.apl_form .apl_opt_right .btn.refresh{min-width: auto; width:50px; height:50px; line-height:40px; border:1px solid #eee; border-radius:5px; background:#fff url('/images/page/common/icon_reset.png') no-repeat 50% 50%; background-size: auto 16px; text-align:center;}

.apl_form .time_opt{margin-top:15px;}
.apl_form .time_opt > span {display: block; font-size: 18px; font-weight: 600; margin-bottom: 10px;}

.apl_form .time_state {display:flex; justify-content: center; gap:10px; margin-bottom:15px; border:1px solid #eee; border-radius:5px; padding-top:10px; padding-bottom:10px; padding-left:min(2%, 10px); padding-right:min(2%, 10px); min-width:285px;}
.apl_form .time_state li{position:relative; padding-left:15px;}
.apl_form .time_state .state{min-width:auto; padding:0; width:11px; height:11px; border-radius:50%; display:block; border:2px solid #eee; position:absolute; top:0; bottom:0; left:0; margin:auto; box-sizing: border-box; background:#fff;}
.apl_form .time_state .state.time_dont{background-color:#eee; border-color:#eee;}
.apl_form .time_state .state.time_slt{border-color:#2664d6;}

.apl_form .time_group {display: flex; flex-wrap: wrap; gap: 12px 12px;}
.apl_form .time_group button {width: calc(20% - 10px); border: 1px solid #eee; background-color: #fff; color: #666; padding: 8px 3px;}
.apl_form .time_group button.on,
.apl_form .time_group button:not(.disable):hover {border: 2px solid #2664d6; color: #2664d6; box-shadow: 0 5px 5px 0 rgba(38, 100, 214, .1);}
.apl_form .time_group button.disable {background-color: #eee; color: #999;}

.apl_form .file_list {max-height: 150px;}


/* 교육 education */
.education .eduList {display: flex; flex-direction: column; gap: 20px 0;}
.education .eduList > li {width: 100%; display: flex; justify-items: center; width: 100%; padding: 40px 40px; border: 2px solid rgba(30, 31, 36, .05); background-color: rgba(30, 31, 36, .02); border-radius: 20px;}
/* .education ul > li > a {display: block; } */
.education .eduList > li .txt_box {flex-grow: 1; width: 100%; padding-right: 40px;}
.education .eduList > li .tit {font-size: 20px; font-weight: 700; margin-top: 15px;}
.education .eduList > li .info {margin-top: 20px;}
.education .eduList > li .info dl * {display: inline-block; vertical-align: middle; font-size: 18px;}
.education .eduList > li .info dl dt {width: 120px; font-weight: 600;}
.education .eduList > li .info dl dd {width: calc(100% - 120px); font-weight: 400; color: #666;}
.education .eduList > li .btn_box {flex-shrink: 0; margin-left: auto;}

.education .eduList > li:hover .tit {text-decoration: underline;}

.education .eduList > li.nodata {display: block; background-color: transparent;}

/* 레이어팝업 layerpopup */
.layer_popup {position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; display: none;}
.layer_popup {background: rgba(16, 25, 36, .4); backdrop-filter: blur(5px);}
.popup_box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; width: 1024px; max-height: 95%; height: auto; background: #fff; border: 1px solid #eee; box-shadow: 0 3px 29px 0 rgba(0, 0, 0, 0.15); border-radius: 10px; overflow: auto;}
.popup_box.sm {width: 640px;}
.popup_box .popup_header {position: relative; width: 100%; height: 60px; background-color: var(--mitc-light); padding: 16px 30px; border-bottom: 1px solid #eee;}
.popup_box .popup_header > h4 {font-size: 18px; font-weight: 600;}
.popup_box .close_btn {position: absolute; top: 0; right: 0; transform: none; z-index: 10; display: block; width: 60px; height: 60px; background: url("/images/page/common/icon_close.svg") no-repeat 50% 50%; background-size: 20px auto;}

.popup_box .popup_body {padding: 30px 30px;}
.popup_box .popup_body .map {height: 400px;}
.popup_box .btn_wrap {margin-top: 0; text-align: center !important;}

.popup_box .popup_bottom {padding: 16px 30px;}

.popup_box .fixedY {max-height: 303px;}


/* 마이페이지 */
/* .mypage {background-color: rgba(30, 31, 36, .02);} */
/* .mypage .mypage_menu {padding: 0 20px;} */
.mypage .mypage_menu .user_info {margin-bottom: 20px;}
.mypage .mypage_menu .user_info p {font-size: 18px;}
.mypage .mypage_menu .user_info p > strong {font-size: 30px; font-weight: 700;}
.mypage .mypage_menu .user_info .btn {display: none;}

.mypage .mypage_menu ul {border: 2px solid rgba(30, 31, 36, .05); background-color: rgba(30, 31, 36, .02); border-radius: 10px; padding: 10px 0;}
.mypage .mypage_menu ul > li {display: block; margin: 0 10px;}
.mypage .mypage_menu ul > li > a {display: block; padding: 10px 10px; font-size: 1rem; color: #666;}
.mypage .mypage_menu ul > li.active > a,
.mypage .mypage_menu ul > li:hover > a {color: var(--mitc-main); font-weight: 600;}

.mypage .pagination {margin-top: 30px;}

/* 마이페이지 - 장비예약 상담내역 */
.mypage .sub_tit .btn {position: absolute; top: 0; right: 0;}
.mypage .prd_detail .prd_box {margin-bottom: 100px;}
.mypage .prd_detail .prd_info {max-width: none;}

.mypage .apl_form .form_group .input_field {display: block;}
.mypage .apl_form .form_group .input_field .field_tit {display: block; width: 100%; margin-bottom: 10px;}
.mypage .apl_form .form_group .input_field .field_con {width: 100%;}


/* 이용약관 policy */

/* bul list */
.bul_list > li {position: relative; display: block; font-size: 1rem; padding-left: 13px; margin-bottom: 10px;}
.bul_list > li:last-child {margin-bottom: 0;}
.bul_list > li:before {content: ''; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; background-color: #666; border-radius: 50%;}
.bul_list > li .txt {color: #666;}

.bul_list > li > ul > li {position: relative; padding-left: 12px; font-size: 1rem; color: #666; margin-bottom: 2px;}
.bul_list > li > ul > li:before {content: ''; position: absolute; top: 12px; left: 0; width: 5px; height: 1px; background-color: #999;}

.def_box > li {margin-bottom: 60px;}
.def_box > li .tit {display: block; font-size: 18px; font-weight: 800; padding: 18px 0; border-bottom: 1px solid #eee; margin-bottom: 20px; color: #222;}
.def_box > li > .txt {font-size: 16px; margin-bottom: 20px;}

.def_box .bul_list > li {color: #666;}
.def_box .bul_list > li b {color: #111;}



/* **************************************** *
 * responsive
 * **************************************** */
@media (max-width: 1600px) {
    /* sub Visual */
    .subVisual .subVisual_tit {left: 4%;}

    /* navigation */
    .area_cont_navi {max-width: calc(100% - 8%);}

    /* page tab */
    .page_tab {max-width: calc(100% - 4%);}

    /* 장비신청 상세보기 detail */
    /* photo slide view */
    .prd_detail .prd_info {max-width: none;}

}

@media (max-width: 1440px) {
    /* sub Visual */
    .subVisual .subVisual_bg {height: 25rem;}
    .subVisual .subVisual_tit h1 {font-size: 42px;}
    .subVisual .subVisual_tit p {margin-top: 20px;}

    /* sub common 서브페이지 공통 */
    .page_title {margin-bottom: 60px;}
    .page_title h2 {font-size: 36px;}

    .layout .layout_tit {width: 240px;}
    .layout .layout_cont {width: calc(100% - 240px);}

    /* 마이페이지 */
    .mypage .prd_detail .prd_info {padding-left: 40px;}


}

@media (max-width: 1280px) {
    /* page tab */
    .page_tab .tab_menu > li > a {font-size: 16px;}
    .sub_tab {flex-direction: column; padding-left: 20px; padding-right: 20px;}
    .sub_tab li a:before {opacity: 1; visibility: visible; background-color: #eee;}

    .layout {display: block;}
    .layout .layout_tit {width: 100%;}
    .layout .layout_tit .sub_tit > br {display: none;}
    .layout .layout_cont {padding-left: 0; width: 100%;}

    /* image list style 공통 */
    .img_list_st2 > li .txt_box {padding: 60px 60px;}

    /* 센터소개 about */
    /* greeting 센터소개 > 인사말 */
    .greeting h3 {font-size: 28px;}
    .greeting .img_box {margin-top: 30px; margin-bottom: 30px;}
    .greeting .box p {font-size: 16px;}

    /* location 센터소개 > 찾아오시는 길 */
    .location .map_tit {width: 30%;}
    .location .map_tit h3 {font-size: 26px;}
    .location .map_info {width: 100%;}

    /* 시설이용 facilities */
    /* 구축장비 리스트 equipment */
    .equipmentList > li .txt_box .tit {font-size: 16px;}

    /* 장비신청 상세보기 detail */
    /* photo slide view */
    .apl_form .form_group .input_field {flex-direction: column;}
    .apl_form .form_group .input_field .field_tit {width: 100%; margin-bottom: 10px;}
    .apl_form .form_group .input_field .field_con {width: 100%;}

    /* 교육 education */
    .education .eduList > li .tit {font-size: 18px;}

    /* 마이페이지 */
    .mypage .layout {display: flex;}
    .mypage .layout .layout_cont {padding-left: 40px;}
    .mypage .mypage_menu {margin-bottom: 60px;}

}

@media (max-width: 1024px) {
    /* sub Visual */
    .subVisual .subVisual_tit h1 {font-size: 38px;}
    .subVisual .subVisual_tit p {font-size: 16px; margin-top: 10px;}

    /* navigation */
    .navigation {float: none;}

    /* sub common 서브페이지 공통 */
    .sub_wrap {padding: 60px 0 80px;}
    .page_title h2 {font-size: 32px;}

    /* page tab */
    .page_tab .tab_menu {gap: 0 10px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
    .page_tab .tab_menu > li {flex: 0 0 calc(25% - 5px); width: fit-content;}
    .page_tab .tab_menu > li > a {white-space: nowrap;}
    .page_tab .tab_menu > li.active > a {box-shadow: none;}

    .sub_tab li a {font-size: 16px;}

    .layout .layout_tit {width: 100%;}
    .layout .layout_cont {width: 100%;}

    /* sub title 공통 */
    h3.sub_tit {font-size: 22px;}
    h4.sub_tit {font-size: 18px;}

    /* list style 공통 */
    .list_st_dot > li > p {font-size: 1rem;}

    /* 기술지원 technical */
    /* platform 부품 공동활용 플랫폼 */
    .platform .platform_box .box .tit {font-size: 22px;}

    /* 구축장비 리스트 equipment */
    .equipmentList > li {width: calc(33.3% - 14px);}

    /* 장비신청 상세보기 detail */
    /* photo slide view */
    .prd_detail .prd_info {padding-left: 40px;}
    .prd_detail .detail_item dl dt {font-size: 1rem;}
    .prd_detail .detail_item dl * {font-size: 1rem;}

    .apl_form .form_group .input_field .field_tit {font-size: 16px;}

    .apl_form .apl_opt_right {padding-left: 40px;}
    .apl_form .apl_opt_right .btn.refresh {width: 40px; height: 40px;}

    /* 교육 education */
    .education .eduList > li {padding: 30px 30px;}
    .education .eduList > li .info dl * {font-size: 1rem;}

    /* 마이페이지 */
    .mypage .layout {display: block;}
    .mypage .layout .layout_cont {padding-left: 0;}
    .mypage .mypage_menu .user_info {display: flex; align-items: center; justify-content: space-between; background-color: rgba(30, 31, 36, .02); border: 2px solid rgba(30, 31, 36, .05); border-radius: 10px; padding: 10px 20px;}
    .mypage .mypage_menu .user_info p > strong {font-size: 24px;}
    .mypage .mypage_menu .user_info .btn {display: block;}
    .mypage .mypage_menu ul {display: none;}

    /* layer popupp */
    .popup_box,
    .popup_box.sm {width: 94%;}
    .popup_box .popup_body {padding: 20px 20px;}
    .popup_box .popup_header {padding-left: 20px; padding-right: 20px;}

}


@media (max-width: 768px) {
    /* sub Visual */
    .subVisual .subVisual_tit h1 {font-size: 34px;}

    /* navigation */
    .area_cont_navi {height: 50px;}
    .navigation {display: flex; justify-content: space-between; align-items: center;}
    .navigation .home {display: none; width: 50px; height: 50px;}
    .navigation .navi_select {float: none; width: 50%;}
    .navigation .navi_select .depth {min-width: auto; width: 100%; height: 50px;}
    .navigation .navi_select .depth span {line-height: 50px;}
    .navigation .navi_list {top: 50px;}

    /* sub common 서브페이지 공통 */
    .page_title {margin-bottom: 40px;}
    .page_title h2 {font-size: 30px;}
    .page_title h2 > br {display: none;}

    /* content box */
    .cont_box {padding: 20px 20px;}

    .info_box .left {flex: 0 0 200px;}
    .info_box .left > strong {font-size: 16px;}
    .info_box .right {flex: 0 0 calc(100% - 200px); width: calc(100% - 200px);}
    .info_box .right > p {font-size: 16px;}

    /* list style 공통 */
    .list_st_dot > li > p {font-size: 1rem; word-break: keep-all;}
    .list_st_dash > li {font-size: 1rem; word-break: keep-all;}
    .dl_bd_list dt,
    .dl_bd_list dd {font-size: 1rem; word-break: keep-all;}

    /* image list style 공통 */
    .img_list_st1.list4 > li,
    .img_list_st1.list3 > li {width: calc(50% - 15px);}

    .img_list_st1 > li.col2,
    .img_list_st1 > li.col3 {width: 100%;}

    .img_list_st2 > li {display: block;}
    .img_list_st2 > li .img_box {width: 100%;}
    .img_list_st2 > li .txt_box {width: 100%; padding: 40px 40px;}

    /* 센터소개 about */
    /* greeting 센터소개 > 인사말 */
    .greeting h3 {font-size: 24px;}
    .greeting .box {width: 100%; float: none;}

    /* location 센터소개 > 찾아오시는 길 */
    .location .map {height: 300px;}
    .location .map_tit {display: none;}
    .location .map_tit h3 {font-size: 22px;}
    .location .map_info dl > dt {font-size: 1rem; width: 84px;}
    .location .map_info dl > dd {font-size: 1rem; width: calc(100% - 108px); margin-right: 0; margin-top: 5px;}
    .location .map_cont {margin-bottom: 30px;}


    /* 주요사업 project */
    /* service 서비스 맞춤 자동차~ */
    /* 비전 */
    .vision .vision_box {gap: 10px 0;}
    .vision .vision_box > .box {flex: 0 0 100%; width: 100%; padding: 20px 30px;}
    .vision .vision_box > .box > p {margin-top: 40px; font-size: 16px;}
    .vision .vision_box > .box .icon {top: 20px; right: 30px;}

    .business .busi_center .img_box {height: 400px;}
    .business .busi_center .txt_box .tit {font-size: 26px;}
    .business .busi_center .txt_box > p {font-size: 1rem; word-break: keep-all;}

    /* 기술지원 technical */
    /* platform 부품 공동활용 플랫폼 */
    .platform .platform_box .box {padding: 20px 30px;}
    .platform .platform_box .box *:not(.sr_only) {font-size: 1rem; word-break: keep-all;}
    .platform .platform_box .box .tit {font-size: 18px;}

    /* 구축장비 리스트 equipment */
    .equipmentList > li {width: calc(50% - 10px);}

    /* 장비신청 상세보기 detail */
    /* photo slide view */
    .prd_detail .prd_box {flex-direction: column-reverse;}
    .prd_detail .prd_box .photoSlide {width: 100%;}
    .prd_detail .prd_info {padding-left: 0;}

    .apl_form .apl_opt_wrap {flex-direction: column;}
    .apl_form .calendar {width: 460px;}
    .apl_form .apl_opt_right {padding-left: 0; padding-top: 40px;}

    /* 마이페이지 */
    .mypage .prd_detail .prd_info {padding-left: 0;}

}

@media (max-width: 640px) {

    /* sub common 서브페이지 공통 */
    .page_title h2 {font-size: 26px;}

    /* image list style 공통 */
    /* style1 */
    .img_list_st1.list2 > li,
    .img_list_st1.list3 > li,
    .img_list_st1.list4 > li {width: 100%;}

    .img_list_st2 > li .txt_box .tit {font-size: 26px; margin-bottom: 20px;}

    /* sw_technical 전장부품SW 구축 및 기술지원 */
    .sw_technical .autosar {display: block;}
    .sw_technical .autosar .img_box {margin: 0 auto;}
    .sw_technical .autosar .txt_box {padding-left: 0; width: 100%; margin-top: 20px;}
    .sw_technical .autosar .txt_box > strong {font-size: 22px; padding-bottom: 10px; margin-bottom: 10px;}

    /* 장비신청 상세보기 detail */
    /* photo slide view */
    .equipmentList > li {width: 100%;}

    /* 장비신청 상세보기 detail */
    .apl_form .calendar {width: 100%; min-width: 100%;}

    /* 교육 education */
    .education .eduList > li {display: block; padding: 20px 20px;}
    .education .eduList > li .tit {font-size: 16px;}
    .education .eduList > li .txt_box {padding-right: 0;}
    .education .eduList > li .btn_box {display: none;}

}

@media (max-width: 576px) {
    /* sub Visual */
    .subVisual .subVisual_tit h1 {font-size: 30px;}
}

@media (max-width: 420px) {
    /* sub Visual */
    .subVisual .subVisual_tit h1 {font-size: 26px;}

    /* navigation */
    .navigation .navi_select.select01 {display: none;}
    .navigation .navi_select {width: 100%;}

    .page_title {padding: 0 4%; margin-bottom: 30px;}
    .page_title h2 {font-size: 22px; word-break: keep-all;}

    /* contents box */
    .info_box {display: block;}
    .info_box .left {width: 100%; border-right: 0; max-width: none; padding: 12px 20px;}
    .info_box .right {width: 100%;}

    /* sub title 공통 */
    h3.sub_tit {font-size: 19px;}
    h4.sub_tit {font-size: 17px;}

    /* 센터소개 about */
    /* greeting 센터소개 > 인사말 */
    .greeting h3 {font-size: 18px; word-break: keep-all;}
    .greeting .img_box {height: 280px;}
    .greeting .box {padding: 0;}
    .greeting .box p {font-size: 1rem;}

    /* 기술지원 technical */
    /* platform 부품 공동활용 플랫폼 */
    .platform .platform_box {flex-direction: column;}

}

@media (max-width: 360px) {


}