@charset "utf-8";


 .contTitle{font-size:3.4rem;font-weight:700;letter-spacing:-0.02em;color:#111;word-break:keep-all;}
 .supTitle{font-size:2.6rem;font-weight:700;letter-spacing:-0.02em;color:#085698;word-break:keep-all;margin-bottom:22px;}


 .grayBox{position:relative;}
 .grayBox:before{width:100vw;height:100%;background:#f8f8f8;position:absolute;left:50%;transform:translateX(-50%);top:0;content:'';z-index:-1;}


/* List */
.dotList li{position:relative;padding-left:9px;color:#555;letter-spacing:-0.02em;word-break:keep-all;}
.dotList li:before{width:2px;height:2px;border-radius:50%;position:absolute;left:0;top:8px;background:#555;content:'';}
.dotList li:nth-child(n+2){margin-top:10px;}

/* tabDesign */
.tabDesign{display:flex;justify-content:center;margin:-40px 0 80px;}
.tabDesign li{margin:0 30px;position:relative;color:#aaa;padding:0 1px 8px;border-bottom:2px solid transparent;cursor:pointer;word-break:keep-all;text-align:center;}
.tabDesign li:nth-child(n+2):after{width:1px;height:20px;background:#ddd;position:absolute;left:-30px;top:50%;transform:translateY(-50%);content:'';}
.tabDesign li.active{border-bottom:2px solid #085698;font-weight:500;color:#085698;}

/* 비전 + 연구분야 */
.topBanner{height:370px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;position:relative;z-index:2;background-repeat:no-repeat;background-size:cover;background-position:center bottom;letter-spacing:-0.02em;text-align:center;word-break:keep-all;}
.topBanner:before{width:100vw;height:100%;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:-1;content:'';}
.topBanner .upText{font-size:2.2rem;font-weight:700;}
.topBanner h4{font-size:4.8rem;margin-top:16px;font-weight:700;}
.vision .topBanner:before{background-image:url(/img/introduce/top_banner_vision.jpg);}
.functionalfood .topBanner:before{background-image:url(/img/research/top_banner_functionalfood.jpg);}





/* 센터소개 > 인사말 */
.greetings{background:url(/img/introduce/greeting_bg.png)no-repeat left bottom;margin-bottom:0 !important;padding-bottom:150px;}
.greetingsBox{display:flex;letter-spacing:-0.02em;}
.greetingsBox .greetingsTitle{width:42.254%;font-weight:700;padding:0 20px 0 0;word-break:keep-all;}
.greetingsBox .greetingsTitle dt{font-size:2.8rem;color:#085698;}
.greetingsBox .greetingsTitle dd{font-size:4.2rem;line-height:1.4286;color:#111;margin-top:20px;}
.greetingsBox .greetingsText{width:57.746%;line-height:1.667;}
.greetingsBox .greetingsText > p:nth-child(n+2){margin-top:15px;}

.greetingsBox .greetingsText .greetingsSignature{display:flex;justify-content:flex-end;align-items:flex-end;margin:15px 5px 0 0;}
.greetingsBox .greetingsText .greetingsSignature > span{font-size:2.2rem;letter-spacing:-0.02em;color:#111;}
.greetingsBox .greetingsText .greetingsSignature > .imgBox{margin-left:33px;}


/* 센터소개 > 비전 */
.vision .contTitle{font-size:3.6rem;}
.visionValue{padding:115px 0;text-align:center;}
.visionValue ul{display:flex;justify-content:center;margin-top:76px;}
.visionValue ul li{width:468px;}
.visionValue ul li dl dd{font-size:2rem;line-height:1.6;margin-top:33px;word-break:keep-all;}
.visionValue ul li dl dd .blueText{letter-spacing:-0.06em;color:#085698;font-weight:500;margin-bottom:18px;}
.visionValue ul li:last-child dl dd .blueText{font-family:'Noto Sans KR';}

.bestPartner{text-align:center;padding:126px 0 130px;}
.bestPartner .circleTarget{width:450px;height:450px;margin:140px auto 0;border:1px solid #f3f3f3;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}
.bestPartner .circleTarget:before{width:1px;height:120px;background:#111;position:absolute;left:50%;top:-70px;margin-left:-0.5px;content:'';}
.bestPartner .circleTarget .supTitle{margin-bottom:12px;}
.bestPartner .circleTarget .contTitle{line-height:1.3335;}

.mottoCreado .grayImgBox{padding:120px 0;}

/* 센터소개 > 오시는길 */
.mapBox{display:flex;}
.mapBox + .mapBox{margin-top:150px;}
.mapBox .mapCont{width:58%; letter-spacing:-0.02em;margin-left:2%;}
.mapBox .mapCont .mapTitle{font-size:3rem;font-weight:700;color:#111;margin-bottom:26px;}
.mapBox .mapCont > ul{display:flex;flex-wrap:wrap;border-bottom:1px solid #000;border-top:1px solid #000;}
.mapBox .mapCont > ul > li{width:50%;padding:25px 5px;word-break:keep-all;display:flex;}
.mapBox .mapCont > ul > li:nth-child(n+3){border-top:1px solid #e5e5e5;}
.mapBox .mapCont > ul > li > .imgBox{width:90px;margin-right:20px;flex-wrap:wrap;flex-shrink:0;}
.mapBox .mapCont > ul > li dl{width:100%;padding-top:20px;}
.mapBox .mapCont > ul > li dl dt{font-size:2rem;color:#111;font-weight:700;margin-bottom:10px;}
.mapBox .mapCont > ul > li dl dd{line-height:1.556;}
.mapBox .mapCont > ul > li dl dd > br{display:none;}
.mapBox .mapCont > ul > li dl dd ul li{display:flex;}
.mapBox .mapCont > ul > li dl dd ul li:nth-child(n+2){margin-top:15px;}
.mapBox .mapCont > ul > li dl dd ul li > span{width:80px;height:40px;text-align:center;line-height:40px;border-radius:20px;color:#fff;margin-right:20px;flex-shrink:0;}
.mapBox .mapCont > ul > li dl dd ul li > span.c_d5ac3d{background-color:#d5ac3d;}
.mapBox .mapCont > ul > li dl dd ul li > span.c_3d68d5{background-color:#3d68d5;}
.mapBox .mapCont > ul > li dl dd ul li > span.c_909539{background-color:#909539;}
.mapBox .mapCont > ul > li dl dd ul li > span.c_1f9872{background-color:#1f9872;}
.mapBox .root_daum_roughmap_landing{width:40%;}
.mapBox .root_daum_roughmap .wrap_controllers{display:none;}
.mapBox .root_daum_roughmap .map_border{display:none;}
.mapBox .wrap_map{height:100% !important;}

/* 연구분야 > P&K 건강기능식품 */
.functionalfoodList{margin-top:150px;}
.functionalfoodList ol li{height:500px;display:flex;align-items:center;letter-spacing:-0.02em;}
.functionalfoodList ol li .leftCont{width:50%;position:relative;flex-shrink:0;}
.functionalfoodList ol li .leftCont .imgBox img{border-radius:50%;box-shadow:0 0 30px 5px rgba(13,39,73,.12);}
.functionalfoodList ol li .leftCont dl dt{font-size:4.5rem;font-weight:700;color:#111;margin:32px 0 30px;}
.functionalfoodList ol li .leftCont dl dd{font-size:2.2rem;line-height:1.637;}
.functionalfoodList ol li .leftCont .num{font-size:30rem;font-weight:700;color:#f4f6f6;position:absolute;left:200px;top:50%;transform:translateY(-50%);z-index:-1;font-style:italic;line-height:1;}
.functionalfoodList ol li .rightCont{width:68%;position:relative;right:0;flex-shrink:0;}
.functionalfoodList ol li:nth-child(2n) .leftCont{order:1;padding-left:10.715%;margin-left:-251px;}
.functionalfoodList ol li:nth-child(2n) .rightCont{order:0;right:auto;left:-251px;justify-content:flex-start;}
.functionalfoodList ol li:nth-child(n+2){margin-top:7.143%;}
.functionalfoodList ol li:nth-child(2) .leftCont .num{left:310px;}
.functionalfoodList ol li:nth-child(3) .leftCont .num{left:150px;}

/* 연구분야 공통 */
.flexDesign{letter-spacing:-0.02em;display:flex;word-break:keep-all;}
.flexDesign + .flexDesign{margin-top:120px;}
.flexDesign .flexDesignTitle{width:320px;flex-shrink:0;font-size:3.4rem;line-height:1.353;font-weight:700;color:#111;}
.flexDesign .flexDesignCont{padding-top:8px;}
.flexDesign .flexDesignCont .imgList{margin-bottom:38px;text-align:right;}
.flexDesign .flexDesignCont .imgList li:nth-child(n+2){margin-top:30px;}
.flexDesign .flexDesignCont .imgList li p{margin-top:18px;}
.flexDesign .flexDesignCont .contList{display:flex;flex-wrap:wrap;border-top:1px solid #000;border-bottom:1px solid #000;}
.flexDesign .flexDesignCont .contList > li{width:50%;padding:19px 9px;color:#111;font-weight:500;display:flex;}
.flexDesign .flexDesignCont .contList > li:nth-child(n+3){border-top:1px solid #e5e5e5;}
.flexDesign .flexDesignCont .contList.col03 > li{width:33.333%;}
.flexDesign .flexDesignCont .contList.col03 > li:nth-child(3){border-top:0;}
.flexDesign .flexDesignCont .contList > li > p{flex-shrink:0;}
.flexDesign .flexDesignCont .contList > li ul{margin-left:15.71%;}
.flexDesign .flexDesignCont .contList > li ul li{padding-left:10px;position:relative;color:#555;font-weight:400;}
.flexDesign .flexDesignCont .contList > li ul li:before{width:5px;height:1px;background:#555;position:absolute;left:0;top:10px;content:'';}
.flexDesign .flexDesignCont .contList > li ul li:nth-child(n+2){margin-top:7px;}
.flexDesign .flexDesignCont .safeText{display:flex;align-items:center;margin-top:30px;}
.flexDesign .flexDesignCont .safeText span{width:120px;height:40px;line-height:40px;color:#085698;margin-right:20px;flex-shrink:0;background:#e6eef6;border-radius:20px;font-weight:700;text-align:center;}
.flexDesign .flexDesignCont .safeText p{color:#555;}

 /* 문의하기  > 시험절차 */
.testprocedureCont{display:none;}
.testprocedureCont.active{display:block;}

.testprocedureCont01 .grayImgBox{padding:60px 20px;background:#f8f8f8;text-align:center;}
.testprocedureCont01 .dotList{margin-top:60px;}
.testprocedureCont02  .contTitle{margin-bottom:29px;} 
.testprocedureCont02 .requesterStep{padding:95px 0 100px;}
.testprocedureCont02 .centerStep{padding:95px 0 100px;}
.testprocedureCont02 .testprocedureStep{display:flex;flex-wrap:wrap;}
.testprocedureCont02 .testprocedureStep li{width:calc((100% - 39px) / 4);min-height:200px;word-break:keep-all;border:1px solid #ddd;padding:38px 29px 38px 38px;border-radius:10px;background:#fff;margin:7px 13px 7px 0;letter-spacing:-0.02em;}
.testprocedureCont02 .testprocedureStep li:nth-child(4n){margin-right:0;}
.testprocedureCont02 .testprocedureStep li dl dt{font-size:2rem;font-weight:700;color:#111;margin-bottom:22px;display:flex;}
.testprocedureCont02 .testprocedureStep li dl dt span{margin-right:5px;flex-shrink:0;}
.testprocedureCont02 .testprocedureStep li dl dd{line-height:1.556;color:#555;}
.testprocedureCont02 .grayBox.dotList{padding:58px 0 60px;margin-top:90px;}


@media all and (max-width:1800px) {
/* 센터소개 > 인사말 */
.greetings{background-size:40% auto;}

}

@media all and (max-width:1440px) {
/* Sub Common */
.br_none{display:none;}

 /* 문의하기  > 시험절차 */
.testprocedureCont02 .testprocedureStep li{padding:2.7% 2%;}

}



@media all and (max-width:1279px) {
/* List */
.dotList li:before{top:8px;}
.dotList li:nth-child(n+2){margin-top:10px;}

/* 센터소개 > 인사말 */
.greetingsBox .greetingsTitle{width:500px;flex-shrink:0;}
.greetingsBox .greetingsText{width:calc(100% - 500px);}


/* 센터소개 > 오시는길 */
.mapBox .mapCont > ul > li{display:block;}

/* 연구분야 > P&K 건강기능식품 */
.functionalfoodList ol li{height:auto;padding:50px 0;}
.functionalfoodList ol li:nth-child(n+2){margin-top:0;}
.functionalfoodList ol li .leftCont dl dt{margin:20px 0;}
.functionalfoodList ol li .leftCont .imgBox{width:100px;}
.functionalfoodList ol li .leftCont .num{font-size:27rem;}
.functionalfoodList ol li .rightCont{width:50%;right:-20px;}
.functionalfoodList ol li:nth-child(2n) .leftCont{padding-left:3%;margin-left:0;}
.functionalfoodList ol li:nth-child(2n) .rightCont{left:-20px;}

.functionalfoodList ol li:nth-child(2) .leftCont .num{left:200px;}

/* 연구분야 공통 */
.flexDesign .flexDesignCont .contList > li ul li:before{top:8px;}


}

@media all and (max-width:979px) {
/* 센터소개 > 인사말 */
.greetingsBox{display:block;}
.greetingsBox .greetingsTitle{width:100%;}
.greetingsBox .greetingsTitle dd br{display:none;}
.greetingsBox .greetingsText{width:100%;margin-top: 50px;}

/* 센터소개 > 비전 */
.visionValue ul li{width:50%;padding:0 10px;}
.visionValue ul li dl dt img{width:140px;}
.visionValue ul li dl dd br{display:none;}

.bestPartner .circleTarget{width:400px;height:400px;}

/* 센터소개 > 오시는길 */
.mapBox{display:block;}
.mapBox .mapCont{width:100%;margin:35px 0 0}
.mapBox .mapCont > ul > li{display:flex;}
.mapBox .mapCont > ul > li > .imgBox{margin-right:14px;}
.mapBox .mapCont > ul > li dl dd > br{display:block;}
.mapBox .root_daum_roughmap_landing{width:100%;}
.root_daum_roughmap .wrap_map{height:380px !important;}

/* 연구분야 > P&K 건강기능식품 */
.functionalfoodList ol li{display:block;}
.functionalfoodList ol li:first-child{padding-top:0;}
.functionalfoodList ol li .leftCont{width:85%;margin:0 auto !important;}
.functionalfoodList ol li .rightCont{width:calc(100% + 20px);display:flex;justify-content:flex-end;margin-top:50px;right:0;}

/* 연구분야 공통 */
.flexDesign{display:block;}
.flexDesign .flexDesignTitle{width:100%;}
.flexDesign .flexDesignTitle br{display:none;}
.flexDesign .flexDesignCont{padding-top:30px;}
}

@media all and (max-width:767px) {

.supTitle{margin-bottom:11px;}

/* List */
.dotList li:before{top:}

/* tabDesign */
.tabDesign{margin:0 0 40px;}
.tabDesign li{margin:0 15px;}
.tabDesign li:nth-child(n+2):after{left:-15px;}

/* 비전 + 연구분야 */
.topBanner{height:220px;}
.topBanner h4{font-size:4.2rem;}


/* 센터소개 > 인사말 */
.greetings{padding-bottom:75px;}
.greetingsBox .greetingsTitle dd{margin-top:10px;}
.greetingsBox .greetingsText{margin-top:25px;}
.greetingsBox .greetingsText .greetingsSignature > .imgBox{margin-left:16.5px;}
.greetingsBox .greetingsText .greetingsSignature > .imgBox img{width:180px;}

/* 센터소개 > 비전 */
.visionValue{padding:57.5px 0;}
.visionValue ul{margin-top:38px;}
.visionValue ul li{}
.visionValue ul li dl dd{margin-top:16.5px;}
.visionValue ul li dl dd .blueText{margin-bottom:9px;}


.bestPartner{padding:63px 0 65px;}
.bestPartner .circleTarget{width:350px;height:350px;margin:85px auto 0;}
.bestPartner .circleTarget:before{width:1px;height:100px;left:50%;top:-60px;}
.bestPartner .circleTarget .supTitle{margin-bottom:6px;}
.mottoCreado .grayImgBox{padding:60px 0;}

/* 센터소개 > 오시는길 */
.mapBox + .mapBox{margin-top:75px;}
.mapBox .wrap_map{height:350px !important;}
.mapBox .mapCont{margin-top:27.5px;}
.mapBox .mapCont .mapTitle{margin-bottom:13px;}
.mapBox .mapCont > ul > li{width:100%;}
.mapBox .mapCont > ul > li:nth-child(2){border-top:1px solid #e5e5e5;}
.mapBox .mapCont > ul > li > .imgBox{width:75px;}
.mapBox .mapCont > ul > li dl{padding-top:15px;}
.mapBox .mapCont > ul > li dl dt{margin-bottom:5px;}
.mapBox .mapCont > ul > li dl dd ul{margin-top:10px;}
.mapBox .mapCont > ul > li dl dd ul li > span{width:70px;height:32px;line-height:32px;margin-right:10px;}
.mapBox .mapCont > ul > li dl dd ul li:nth-child(n+2){margin-top:10px;}

/* 연구분야 > P&K 건강기능식품 */
.functionalfoodList{margin-top:75px;}
.functionalfoodList ol li .leftCont{width:100%;}
.functionalfoodList ol li .leftCont .imgBox{width:80px;}
.functionalfoodList ol li .leftCont dl dt{margin:15px 0;font-size:4rem;}
.functionalfoodList ol li .leftCont dl dd{font-size:2rem;}
.functionalfoodList ol li .leftCont .num{font-size:22rem;left:145px;}
.functionalfoodList ol li .leftCont .imgBox img{box-shadow:0 0 20px 4px rgba(13,39,73,.12);}
.functionalfoodList ol li .rightCont{margin-top:25px;}
.functionalfoodList ol li:nth-child(2n) .leftCont{padding-left:0;}
.functionalfoodList ol li:nth-child(2) .leftCont .num{left:130px;}
.functionalfoodList ol li:nth-child(3) .leftCont .num{left:120px;}

/* 연구분야 공통 */
.flexDesign + .flexDesign{margin-top:60px;}
.flexDesign .flexDesignCont{padding-top:15px;}
.flexDesign .flexDesignCont .imgList{margin-bottom:19px;}
.flexDesign .flexDesignCont .imgList li:nth-child(n+2){margin-top:15px;}
.flexDesign .flexDesignCont .imgList li p{margin-top:9px;}
.flexDesign .flexDesignCont .contList > li{display:block;padding:15px 5px;}
.flexDesign .flexDesignCont .contList > li ul{margin:10px 0 0;}
.flexDesign .flexDesignCont .safeText{margin-top:15px;}
.flexDesign .flexDesignCont .safeText span{width:100px;height:34px;line-height:34px;margin-right:10px;}
.flexDesign .flexDesignCont .contList.col03 > li{width:50%;}
.flexDesign .flexDesignCont .contList.col03 > li:nth-child(3){border-top:1px solid #e5e5e5;}


/* 문의하기  > 시험절차 */
.testprocedureCont01 .grayImgBox{padding:30px 20px;}
.testprocedureCont02 .contTitle{margin-bottom:14.5px;}
.testprocedureCont02 .requesterStep{padding:47.5px 0 50px;}
.testprocedureCont02 .centerStep{padding:47.5px 0 50px;}
.testprocedureCont02 .testprocedureStep li{width:49%;margin:5px 2% 5px 0;min-height:150px;padding:15px;}
.testprocedureCont02 .testprocedureStep li:nth-child(2n){margin-right:0;}
.testprocedureCont02 .testprocedureStep li dl dt{margin-bottom:11px;}
.testprocedureCont02 .grayBox.dotList{padding:29px 0 30px;margin-top:45px;}

}

@media all and (max-width:501px) {
/* 센터소개 > 인사말 */
.greetingsBox .greetingsTitle dd{font-size:3.8rem;}
.greetingsBox .greetingsText .greetingsSignature > .imgBox img{width:120px;}

/* 센터소개 > 비전 */
.visionValue ul li dl dt img{width:120px;}
.bestPartner .circleTarget{width:265px;height:265px;}
.bestPartner .circleTarget:before{height:90px;top:-55px;}

/* 센터소개 > 오시는길 */
.mapBox .wrap_map{height:300px !important;}



}

@media all and (max-width:380px) {
.functionalfoodList ol li .leftCont dl dd br{display:none;}
}