@charset "UTF-8";

/* 메인비주얼 */
#mainVisual{position:relative;}
#mainVisual #mainVisuSld .sliderLi{background-size:cover; background-position:center center; background-repeat:no-repeat; /*height:calc(100vh - 80px);*/ height:800px;}
#mainVisual #mainVisuTxtSld{position:absolute; left:50%; top:27vh; bottom:5%; width:50%; margin-left:-750px; z-index:999;}
#mainVisual .mainVisuTxt{}
#mainVisual .mainVisuTxt .st1{font-weight:700; font-size:88px; display:block; line-height:1; text-transform: uppercase; margin-bottom:2.5rem;}
#mainVisual .mainVisuTxt p{font-size:24px; line-height:1.3;}
#mainVisual .mainVisuTxt p img{vertical-align:middle;}
#mainVisual .mainVisuTxt p + p{margin-top:0.2em;}
#mainVisual .mainVisuTxt a{position:relative; width:160px; height:50px; padding:0 20px; font-size:16px; font-weight:400; border:1px solid #fff; background:transparent; color:#fff; line-height:50px; border-radius:30px; transition:all .2s; margin-top:2.5rem;}
#mainVisual .mainVisuTxt a:before{position:absolute; content:""; width:2px; height:12px; background:#fff; right:25px; top:50%; margin-top:-6px; transition:all .2s;}
#mainVisual .mainVisuTxt a:after{position:absolute; content:""; width:12px; height:2px; background:#fff; right:20px; top:50%; margin-top:-1px; transition:all .2s;}
#mainVisual .mainVisuTxt a:hover{color:#4196d7; background:#fff; border-color:#fff;}
#mainVisual .mainVisuTxt a:hover:before,
#mainVisual .mainVisuTxt a:hover:after{background:#4196d7;}
#mainVisual #mainVisuTxtSld .slick-dots{font-size:0; margin-top:40px;}
#mainVisual #mainVisuTxtSld .slick-dots li{display:inline-block; margin-right:8px;}
#mainVisual #mainVisuTxtSld .slick-dots li button{overflow:hidden; text-indent:-9999px; width:10px; height:10px; border:1px solid #fff; border-radius:50%;}
#mainVisual #mainVisuTxtSld .slick-dots li.slick-active button{background:#fff;}

/* 메인 공통 */
#mainContents article{padding-bottom:180px;}
#mainContents h3.artTitle{position: relative; display: inline-block;font-size:36px;font-weight:700; color:#222;text-align: left; padding-bottom:1em;}
.artTitle-top {display: flex; align-items: center; justify-content: space-between;/*padding-bottom:1em;*/}
.artTitle-right {font-size:22px; color:#666; padding-bottom: 1em;}
.artTitle-wrap .wrapper{}
/* #mainContents h2.artTitle:before{position:absolute; content:""; top:35px; left:-50px; display: block; width:30px; height:2px; background:#0073c2;} */
/* #mainContents h2.artTitle:after{position:absolute; content:"";top:35px; right:-50px; display: block; width:30px; height:2px; background:#0073c2;} */
/* #mainContents h2.artTitle:before{position:absolute; content:""; left:0; top:0; margin-left:-25px; margin-top:5px; width:19px; height:16px; background:url("/design/default/img/main/title_ico.png") no-repeat center center;} */
#mainContents .secTitle{position:relative; margin-bottom:1em;}
#mainContents .secTitle h4{font-size:24px; font-weight:700;}
#mainContents .secTitle a.more{position:absolute; right:0; top:0; width:120px; height:36px; line-height:34px; border:1px solid #ddd; border-radius:18px; font-size:15px; color:#666; transition:all .2s; padding:0 16px;}
#mainContents .secTitle a.more:before{position:absolute; content:""; width:12px; height:2px; background:#999; right:16px; top:50%; margin-top:-1px; transition:all .2s;}
#mainContents .secTitle a.more:after{position:absolute; content:""; width:2px; height:12px; background:#999; right:21px; top:50%; margin-top:-6px; transition:all .2s;}
#mainContents .secTitle a.more:hover{background:var(--main-color); color:#fff; border-color:var(--main-color);}
#mainContents .secTitle a.more:hover:before,
#mainContents .secTitle a.more:hover:after{background:#fff;}

/* section-1 */
.section-1 .wrapper {display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 180px;}

/* vision 사업 성과 지표 현황 */
article.vision{width: 48%; }
article.vision .artDesc {height:390px;background:#0A0E3D url(../img/main/bg-vision.png) no-repeat center/cover;border-radius: var(--border-radius-large); color: #fff; padding: 90px; }
article.vision .artDesc .item-wrap {display: flex;  flex-flow: column; gap: 1.5rem 0;}
article.vision .artDesc .item-wrap .item{display: flex; justify-content: space-between; align-items:Center; font-size:24px; position:relative; padding-left: 50px; }
article.vision .artDesc .item-wrap .item:before{position: absolute; top:6px; left:0; content:'';background:url(../img/main/icon_vision1.png) no-repeat 0 0/auto; width:40px; height:40px; }
article.vision .artDesc .item-wrap .item:nth-child(2):before{background-image:url(../img/main/icon_vision2.png)}
article.vision .artDesc .item-wrap .item:nth-child(3):before{background-image:url(../img/main/icon_vision3.png)}
article.vision .artDesc .item-wrap .item .st1{ font-weight:600; }
article.vision .artDesc .item-wrap .item .st2{}
article.vision .artDesc .item-wrap .item .st2 strong{ font-size:52px; font-weight: 700; margin-right:1rem; line-height:1;}

/* apply 참여 의향서 신청 */
article.apply{width:48%;  }
article.apply .artDesc {height:390px; background:#0A0E3D url(../img/main/bg-apply.png) no-repeat center/cover; border-radius: var(--border-radius-large); padding: 90px; color: #fff; text-align: center;  word-break: keep-all}
article.apply .artDesc span.clr--main {font-size: 28px; font-weight: bold; display: block; margin-bottom: 10px;}
article.apply .artDesc p {font-size:21px; margin-bottom: 30px;}
article.apply .artDesc a.btn {display:inline-block; background:#fff; color:var(--text-color); font-size:16px; width:100%; max-width: 236px; height:50px; border-radius:30px; line-height:50px; font-weight:700;}
article.apply .artDesc a.btn:hover{background:var(--main-color); color:#fff;  transition:all .2s;}

/* solution 디지털 솔루션 */
article.solution{width: 100%; border-radius: var(--border-radius-large); background:#F2F5FA; padding: 100px 0;}
.solution-list {display: flex; justify-content: space-between; gap: 0 20px; }
.solution-list li {width:25%; height:560px; border-radius:var(--border-radius-large);overflow:hidden; position: relative; transition: 0.4s all cubic-bezier(0.075, 0.82, 0.165, 1); background:rgba(0,0,0,0.5) url("../img/main/bg-solution-1.png") no-repeat 86% 50%/cover; background-blend-mode: overlay;}
.solution-list li:after {position: absolute; bottom:20px; left:50%; transform:translateX(-50%);content:''; background:url(../img/main/icon-solution-more.png) no-repeat 0 0/auto; width:54px; height:54px;}
.solution-list li a {width: 100%; height: 100%;;}
.solution-list li .txtbox {position:relative;}
.solution-list li .st1{position:absolute; top:0; right:0; transform-origin:100% 100%; transform: translateX(-52px) rotate(-90deg);font-weight: 700; font-size:32px; color:#fff; white-space: nowrap; text-align: right;}
/* .solution-list li .st1{transform-origin:100% 100%; transform: translateX(-52px) rotate(-90deg);font-weight: 700; font-size:32px; color:#fff; white-space: nowrap; text-align: right;} */
.solution-list li .st2{font-weight:400; color:#fff; font-size:20px; word-wrap:break-word;opacity:0;}
.solution-list li:nth-child(1){background-image:url("../img/main/bg-solution-1.png");}
.solution-list li:nth-child(2){background-image:url("../img/main/bg-solution-2.png");}
.solution-list li:nth-child(3){background-image:url("../img/main/bg-solution-3.png");}
.solution-list li:nth-child(4){background-image:url("../img/main/bg-solution-4-re.png");}
.solution-list li:nth-child(3) .st1 {top:-60px; right:-30px}

.solution-list li.inactive {width:150px;}
.solution-list li.active {width:calc(100% - 510px); position: relative;}
.solution-list li.active:after {opacity:0;}
.solution-list li.active .txtbox {position:absolute; bottom:0; left:0; width: 100%; padding: 60px 30px 60px 60px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
.solution-list li.active .st1{transform: rotate(0deg); text-align: initial; position:unset;}
.solution-list li.active .st1 br {display: none;}
.solution-list li.active .st2{opacity:1; }


/* board */
.section-3 .wrapper{display: flex; justify-content: space-between; padding-top:180px}
#mainContents article.mainboard {width:52%;}
#mainContents article.mainboard .tablist{display: flex; gap:0 40px; margin-bottom:38px;}
#mainContents article.mainboard .tablist li{font-size:32px; font-weight: 700; color: #cacaca;}
#mainContents article.mainboard .tablist li button {font-size: inherit; font-weight: inherit; color: inherit; transition: 0.3s all ease-in;}
#mainContents article.mainboard .tabcont .tabcont-item{display:none;padding-right:30px;}
#mainContents article.mainboard .tabcont .tabcont-item .secTitle {margin:0;}
#mainContents article.mainboard .tabcont .tabcont-item .secTitle a.more {top:-60px;}
#mainContents article.mainboard .tabcont .tabcont-item li{border-bottom:1px solid #eaeaea; padding:1.9em 0;}
#mainContents article.mainboard .tabcont .tabcont-item li:first-child{border-top:1px solid #eaeaea;}
#mainContents article.mainboard .tabcont .tabcont-item li a{float:left; position:relative; display:block; width:calc(100% - 100px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; transition:all .2s;}
#mainContents article.mainboard .tabcont .tabcont-item li a i.new{display:inline-block; vertical-align:middle; width:16px; height:16px; border-radius:3px; line-height:16px; background:var(--main-color); color:#fff; font-size:12px; font-weight:700; text-align:center; font-style:normal;}
#mainContents article.mainboard .tabcont .tabcont-item li time{display:block; float:right; width:100px; text-align:right; font-size:15px; color:#999; transition:all .2s;}
#mainContents article.mainboard .tabcont .tabcont-item li a:hover,
#mainContents article.mainboard .tabcont .tabcont-item li a:hover + time{color:var(--main-color);}

#mainContents article.mainboard .tablist li.active{color:#333; position: relative;font-size:36px;}
#mainContents article.mainboard .tablist li.active:before {position: absolute; top:-15px; left:6px; width:12px; height:12px; background:var(--main-color); border-radius: 100%; content:'';;}
#mainContents article.mainboard .tabcont .tabcont-item.active{display:block;}

/* video */
article.video {}
article.video .iframe-wrap {width:640px; height:360px; border-radius:var(--border-radius-large); overflow: hidden;}
article.video iframe {width: 100%; height: 100%;}

/* 협력 의료 기관 */
.section-4 {background:#0A0E3D url(../img/main/bg-participate.png) no-repeat 0 0/cover;}
article.participate { padding: 100px 0; }
#mainContents article.participate h3.artTitle {color:#fff;}
article.participate .item-list {}
article.participate .item-list .item {width: 468px; height:300px; border-radius:var(--border-radius-large); overflow:hidden; position: relative;}
article.participate .item-list .item a {width: 100%; height: 100%;;}
article.participate .item-list .item .img {width:100%; height:100%; position: relative; background: linear-gradient(135deg, #233ebf, #721ad6);}
/* article.participate .item-list .item .img:after{position: absolute; bottom:0; left:0; content:'';width:100%; height:80%; background:linear-gradient(rgba(0,0,0,0),rgba(0, 0, 0, 0.5))} */
article.participate .item-list .item .img img{object-fit: cover; width: 100%; height: 100%; object-position: center;}
article.participate .item-list .item .txt {position:absolute; width:100%; bottom:0; left:0; padding: 0.5em 0.5em 1em 1em; font-size: 30px; font-weight: 700; color:#fff; background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.6))}

article.participate .slick-track{ margin: 0 -10px; }
article.participate .slick-slide {margin: 0 10px;}
article.participate .custom-control {display: flex; align-items: center; justify-content: center; column-gap: 20px; margin-top:20px;}
article.participate .custom-dots {display: flex; justify-content: center; column-gap: 20px;}
article.participate .custom-dots li{}
article.participate .custom-dots button{font-size:0; width: 10px; height:10px; border-radius:100%; background:#fff; vertical-align: middle;}
article.participate .custom-dots li.active button{background:var(--main-color); }
article.participate .custom-arrow {color:#fff; background:url(../img/main/icon-slider-arrow.png) no-repeat 0 0/auto; width:20px; height:20px; font-size:0; }
article.participate .custom-prev {}
article.participate .custom-next {transform: rotate(180deg);}

/* 바로가기링크 */
.section-5 {background:#373E4C url(../img/main/bg-links.png) no-repeat 0 0/cover; height: 130px; display: flex; align-items: center;}
.section-5 .links a {display: inline-block;}
.section-5 .links a p {display: inline-block; margin-right:1rem;color:#fff; font-size: 26px; font-weight: 600;}
.section-5 .links a img{transition: 0.2s all linear;}
.section-5 .links a:hover img{transform: translateX(20px);}

/* 유관기관 */
.section-6 {background:#f1f1f1; height: 160px; display: flex; align-items: center;}
.section-6 .sponsor {display: flex; justify-content: center; align-items: center;column-gap: 1rem;}



/* **************************** 
  반응형 
**************************** */
@media(max-width:1600px){
	#mainVisual #mainVisuTxtSld{left:3%; margin-left:0; width:94%;}
	#mainVisual #mainVisuSld .sliderLi{height:860px;}

  /* section-1 */
  article.vision .artDesc,
  article.apply .artDesc {padding: 90px 4%;}
  article.apply .artDesc br {display: none;}
}

@media(max-width:1200px){
	#mainVisual .mainVisuTxt p{font-size:26px;}
	#mainVisual .mainVisuTxt p strong{font-size:50px;}

	#mainContents article{padding-bottom:80px;}
	#mainContents h2.artTitle{font-size:48px;}

  
  /* section-1 */
  .section-1 .wrapper {padding-top:100px;}

  article.vision,
  article.apply {width: 100%}
  article.vision .artDesc,
  article.apply .artDesc {padding:60px 5%; height:auto; }
  article.vision .artDesc .item-wrap .item {font-size:20px; }
  article.vision .artDesc .item-wrap .item .st2 strong {font-size: 32px; margin-right:0.1em}

  article.apply .artDesc p {font-size:18px}

  /*  */
  .solution-list li.active .txtbox {padding: 30px;}
  .solution-list li .st2 {font-size: 16px; word-break: keep-all;}

  /* section 3 */
  .section-3 .wrapper {flex-wrap: wrap;}
  
  #mainContents article.mainboard {width: 100%;}
  #mainContents article.mainboard .tablist {margin-bottom:30px; gap:0 4%;}
  #mainContents article.mainboard .tabcont .tabcont-item li {padding: 1em 0;}
  #mainContents article.mainboard .tablist li {}
  #mainContents article.mainboard .tablist li.active {font-size: 32px;}

  article.video {width: 100%;}
  article.video .iframe-wrap { position:relative; width:100%; height:0; padding-bottom:56.25%;}
  article.video .iframe-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%;}

  /*  */
  .section-6 .sponsor .slick-slide {height:80px; display: flex; align-items: center; margin:0 10px;}
}

@media(max-width:1024px){
  /* mainvisual */
	#mainVisual #mainVisuTxtSld{top:120px;}
	#mainVisual #mainVisuSld .sliderLi{height:600px;}
  #mainVisual .mainVisuTxt .st1 {font-size:42px;}
  #mainVisual .mainVisuTxt p {font-size:20px;}

	#mainContents h3.artTitle{font-size:36px;}
	#mainContents .secTitle h4{font-size:22px;}




}

@media(max-width:960px){
}

@media(max-width:768px){
	#mainContents article{padding-bottom:60px;}
	#mainContents h3.artTitle{font-size:32px;}
	#mainContents h3.artTitle:before{margin-left:-5px;}
    article.apply .artDesc span.clr--main {font-size: 24px;}    

  #mainContents .secTitle a.more {width:36px; height:36px; border-radius: 100%; font-size: 0; padding: 0; }
  #mainContents .secTitle a.more:before {right:11px;}
  #mainContents .secTitle a.more:after {right: 16px;}
  #mainContents article.mainboard .tabcont .tabcont-item .secTitle a.more {top:-70px;}

  /*  */
  .solution-list {gap: 10px 0; flex-wrap: wrap; }
  .solution-list li {width:100%;height:150px;}
  .solution-list li .st1 {right:auto; left:0; transform: translate(0) rotate(0); text-align: initial; padding:20px; font-size:24px; }
  .solution-list li:nth-child(3) .st1 {top:0; right:auto;}
  .solution-list li:after {left:auto; transform: translate(0); right:20px;}


}


@media(max-width:640px){
	/* mainvisual */
  #mainVisual #mainVisuSld .sliderLi{height:500px;}
	#mainVisual #mainVisuTxtSld{top:120px;}
	#mainVisual .mainVisuTxt a{font-size:15px; width:140px; height:36px; line-height:34px;}
	#mainVisual #mainVisuTxtSld .slick-dots{margin-top:30px;}
  
  #mainVisual .mainVisuTxt .st1 {font-size:32px; margin-bottom:1rem;}
	#mainVisual .mainVisuTxt p{font-size:18px; text-shadow:0 0 5px rgba(0,0,0,0.2);}
	#mainVisual .mainVisuTxt p strong{font-size:42px;}




}


@media(max-width:560px){
}


@media(max-width:480px){
	#mainVisual #mainVisuSld .sliderLi{height:450px;}
	#mainVisual #mainVisuTxtSld{}
	#mainVisual .mainVisuTxt .st1 {font-size:28px;}
  #mainVisual .mainVisuTxt p{}

	#mainContents article{padding-bottom:40px;}
	#mainContents h3.artTitle{font-size:32px;}
	#mainContents .secTitle h4{font-size:20px;}
	#mainContents .secTitle a.more{font-size:0}

  /* section 1 */
  article.vision .artDesc .item-wrap .item {flex-wrap:wrap;}
  article.vision .artDesc .item-wrap .item .st1 {width: 100%;}
  article.vision .artDesc .item-wrap .item .st2 {width: 100%;}

  /*  */
  article.solution {padding-top:40px;}
  #mainContents article.solution h3.artTitle {font-size:32px;}

  /*  */
  .section-3 .wrapper {padding-top:40px;}
  #mainContents article.mainboard .tablist li {font-size:20px;}
  #mainContents article.mainboard .tablist li.active {font-size:22px;}
  #mainContents article.mainboard .tabcont .tabcont-item {padding-right:0;}
  #mainContents article.mainboard .tabcont .tabcont-item li a {width:100%;}
  #mainContents article.mainboard .tabcont .tabcont-item li time {width: 100%; text-align: initial; font-size:13px;}
  
  /*  */
  article.participate {padding-top:40px;}

  /*  */
  .section-5 {height:auto; padding: 2.5em 1em;}
  .section-5 .links a {display: block;}
  .section-5 .links a p {font-size:18px; width:100%;}
  .section-5 .links a img {height:20px;}

  /*  */
  .section-6 {height:auto; padding:1em; }
  .section-6 .sponsor .slick-slide {height:60px; display: flex; align-items: center; }


}


@media(max-width:420px){

}