@charset "utf-8";

#main {margin-top:120px;}
#main .br {display:block;}

	@media screen and (max-width:1439px){
		#main .br {display:inline;}
	}

	@media screen and (max-width:1024px){
		#main {margin-top:90px;}
	}

	@media screen and (max-width:699px){
		#main {margin-top:70px;}
	}


#main .more-btn {display:flex; justify-content: space-between; align-items: center; color:#fff; text-transform:uppercase; width:200px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.3); text-align:center; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;}
#main .more-btn span.bul {position:relative; display:block; background:#fff;transition:all .5s;width:1px;height:15px;margin:0; right:7px;}
#main .more-btn span.bul:after {content:"";display:block;position:absolute;top:0;width:15px;height:1px;margin:7px 0 0 -7px;background:#fff;}
#main .more-btn:hover span.bul {transition:all .5s;width:2px; transform:translateY(0) rotate(180deg);}

	@media screen and (max-width:799px){
		#main .more-btn {width:150px;}
	}


/* ******************  메인 비주얼 ********************** */
#mainVisual {position:relative; height:calc(90vh - 120px); margin-bottom:140px;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual .mainVisualWrap, 
#mainVisual .mainVisualCon, 
#mainVisual .slick-list,  
#mainVisual .slick-track, 
.item{
	height:100%;
}

.mainVisualWrap {position:relative; z-index:2;}

/* 메인 비주얼 ::이미지 */
.item {position:relative; border-radius:20px; overflow:hidden;}
.item .img{
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform:scale(1.1,1.1);
    -o-transform:scale(1.1,1.1); 
    -moz-transform:scale(1.1,1.1); 
    -webkit-transform:scale(1.1,1.1); 
     transform:scale(1.1,1.1);
	-webkit-transition:transform 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}

/* 메인 비주얼 ::텍스트 */
.item .text_box {position:absolute; display:flex; align-items: center; top:0; width:100%; height:100%; padding:0 11.5% 0 7.5%;}
.item .text_box .title {display:flex; flex-direction: column;}
.item .text_box .title .medishineLogo, 
.item .text_box .title h3,
.item .text_box .title p,
.item .text_box .title ul.dotUl,
.item .text_box .main-visual-more-btn{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform:translateX(-50px); 
    -o-transform:translateX(-50px); 
    -moz-transform:translateX(-50px);
    -webkit-transform:translateX(-50px); 
     transform:translateX(-50px);
	-webkit-transition:opacity 0.7s, transform 0.7s;
	-moz-transition:opacity 0.7s, transform 0.7s;
	-o-transition:opacity 0.7s, transform 0.7s;
	-ms-transition:opacity 0.7s, transform 0.7s;
	transition:opacity 0.7s, transform 0.7s;
}

.item .text_box .title .medishineLogo {margin-bottom:40px;}
.item .text_box .title h3 {display:block; font-size:50px; font-weight:300; line-height:100%; color:#fff; letter-spacing:-0.03em; word-break:keep-all; }
.item .text_box .title h3 b {font-weight:600;}
.item .text_box .title h3 .dot {display:inline-block; font-weight:600;}
.item .text_box .title h3 .dot:before {position:relative; display:block; width:6px; height:6px; background:#fff; border-radius:50%; margin:0 auto; content:'';}

.item .text_box .main-visual-more-btn {display:none !important; margin-top:100px; font-size:16px; font-weight:400px;}
.item .text_box .image {display:flex; flex-direction: column; align-items:center;}
.item .text_box .image img {max-width:100%;}
.item .text_box .image .explain {font-size:16px; color:#fff; text-align:center;}

.item.main01 .text_box .title {margin-bottom:100px;}

.item.main02 .text_box {justify-content: space-between;}
.item.main02 .text_box .title h3 em {font-style:normal; font-size:35px; font-weight:300; display:block; line-height:120%; margin-bottom:10px;}
.item.main02 .text_box .title h3 em b {color:#1aa5ff; font-weight:600;}
.item.main02 .text_box .title h3 > b {font-size:65px;}
.item.main02 .text_box .title > p {font-size:22px; font-weight:300; color:#fff; line-height:140%; margin-top:40px; word-break:keep-all;}

.item.main03 .text_box {justify-content: space-between;}
.item.main03 .text_box .title h3 {font-weight:600;}
.item.main03 .text_box .title > p {font-size:32px; font-weight:300; letter-spacing:-0.05em; color:#fff; margin-top:15px;}
.item.main03 .text_box .title > p > b {font-wieght:600;}
.item.main03 .text_box .title > ul.dotUl {margin-top:30px; color:#fff; margin-left:10px;}
.item.main03 .text_box .title > ul.dotUl > li {position:relative; font-size:22px; font-weight:300; line-height:140%; opacity:0.8; }
.item.main03 .text_box .title > ul.dotUl > li:before {position:absolute; display:block; top:0; margin-left:-8px; content:'·';}

	@media screen and (max-width:1799px){
		.item .text_box .title h3 {font-size:50px;}
		.item.main02 .text_box .title {width:65%;}
		.item.main02 .text_box .title h3 em {font-size:33px;}
		.item.main02 .text_box .title h3 > b {font-size:63px;}
		.item.main02 .text_box .title > p {font-size:20px;}
		.item.main02 .text_box .image {width:35%;}

		.item.main03 .text_box .title > p {font-size:30px;}
		.item.main03 .text_box .title > ul.dotUl > li {font-size:20px;}
	}

	@media screen and (max-width:1439px){
		.item .text_box .title {margin-bottom:0;}
		.item .text_box .title h3 {font-size:260%;}

		.item.main02 .text_box {flex-direction: column; justify-content: center; padding-top:100px;}
		.item.main02 .text_box .title {width:100%;}
		.item.main02 .text_box .title h3 em {font-size:70%;}
		.item.main02 .text_box .title h3 em br {display:none;}
		.item.main02 .text_box .title h3 > b {font-size:140%;}
		.item.main02 .text_box .title > p {font-size:120%}
		.item.main02 .text_box .image {width:100%; align-items: flex-end; margin-top:-20px;}
		.item.main02 .text_box .image img {width:40%;}
		.item.main02 .text_box .image .explain {width:40%; font-size:100%;}

		
		.item.main03 .text_box .title > p {font-size:150%;}
		.item.main03 .text_box .title > ul.dotUl > li {font-size:130%;}
	}

	@media screen and (max-width:1024px){
		.item .text_box .title h3 {font-size:220%;}
		.item .text_box .title h3 em {line-height:100%;}

		.item.main01 .text_box {align-items: flex-start; margin-top:120px;}

		.item.main02 .text_box .title h3 > b {font-size:120%;}
		.item.main02 .text_box .title > p {font-size:110%}
		
		.item.main02 .text_box .image img {width:50%;}
		.item.main02 .text_box .image .explain {width:50%;}

		.item.main03 .text_box .title > p {font-size:140%;}
		.item.main03 .text_box .title > ul.dotUl > li {font-size:120%;}
	}

	@media screen and (max-width:699px){ 
		.item .text_box {padding:0 7.5%;}
		.item .text_box .title h3 {font-size:160%;}
		.item .text_box .title h3 .dot {line-height:140%;}
		
		.item.main01 .text_box .title {padding-bottom:0;}

		.item.main02 .text_box .title h3 {font-size:180%;}
		.item.main02 .text_box .title h3 > b {font-size:120%;}
		.item.main02 .text_box .title > p {font-size:100%}
		.item.main02 .text_box .image {align-items: center;}
		.item.main02 .text_box .image img {width:70%;}
		.item.main02 .text_box .image .explain {width:100%; font-size:90%;}

		.item.main03 .text_box .title > p {font-size:130%;}
		.item.main03 .text_box .title > ul.dotUl > li {font-size:110%;}
	}

	@media screen and (max-width:499px){
		.item .text_box .title h3 {font-size:140%;}
		.item .text_box .title h3 .dot:before { width:4px; height:4px;}
		.item .text_box .title h3 br {display:none;}

		.item.main02 .text_box .title h3 {font-size:160%;}
		.item.main02 .text_box .title h3 > b {font-size:110%;}
		.item.main02 .text_box .title h3 em .dot:before {width:4px; height:4px;}
		.item.main02 .text_box .title > p {font-size:90%; margin-top:20px;}


		.item.main03 .text_box .title > p {font-size:110%;}
		.item.main03 .text_box .title > ul.dotUl > li {font-size:90%;}
	}


/* 메인 비주얼 ::active효과 */
.item.active-item .img{
	-ms-transform:scale(1.0,1.0) rotate(0.0001deg);
    -o-transform:scale(1.0,1.0) rotate(0.0001deg);
    -moz-transform:scale(1.0,1.0) rotate(0.0001deg);
    -webkit-transform:scale(1.0,1.0) rotate(0.0001deg);
     transform:scale(1.0,1.0) rotate(0.0001deg);
}
.item.active-item .title .medishineLogo, 
.item.active-item .title h3,
.item.active-item .title p,
.item.active-item .title ul.dotUl,
.item.active-item .main-visual-more-btn{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform:translateX(0px); 
    -o-transform:translateX(0px); 
    -moz-transform:translateX(0px);
    -webkit-transform:translateX(0px); 
     transform:translateX(0px);
}	


#mainVisual .slick-arrow {position:absolute; bottom:-41px; width:7px; height:12px; background-color:inherit; background-repeat:no-repeat; background-position:center; cursor:pointer; border:0; cursor:pointer; z-index:9999; font-size:0;}

#mainVisual .slick-arrow.slick-prev {left:calc(50% - 50px); background-image:url('../img/main/prevBtn.png');}
#mainVisual .slick-arrow.slick-next {right:calc(50% - 50px); background-image:url('../img/main/nextBtn.png');}

#mainVisual .slick-dots {display:flex !important; align-items: center; justify-content: center; position:absolute; width:100%; bottom:-40px; z-index:1099;}
#mainVisual .slick-dots li {display:inline-block; margin:0 7.5px;  font-size:0; }
#mainVisual .slick-dots li button {width:100%; width:10px; height:10px; overflow:hidden; border-radius:50%; border:1px solid #999; box-sizing:border-box; background:#fff;}
#mainVisual .slick-dots li.slick-active button {background:#104cb4; border:1px solid #104cb4;}


/*scroll icon */
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform:translateY(0);}
	40% {-webkit-transform:translateY(-30px);}
	60% {-webkit-transform:translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform:translateY(0);}
	40% {transform:translateY(-30px);}
	60% {transform:translateY(-15px);}
}
.scrollDown{width:100%; position:absolute; display:flex; justify-content: center; align-items: center; width:6.3%; height:100vh; z-index:9; top:0; left:0;}
.scrollDown.bounce {animation:bounce 2s infinite;}

	@media screen and (max-width:1024px){
		.scrollDown {display:none;}
	}


#mainContents {}
#mainContents .more-btn {margin-top:80px;}
#mainContents .titleBox {letter-spacing:-0.03em;}
#mainContents .titleBox h3 {font-size:45px; font-weight:700;}
#mainContents .titleBox p {font-size:18px; line-height:160%; word-break:keep-all;}

	@media screen and (max-width:1439px){
		#mainContents .titleBox h3 {font-size:240%;}
		#mainContents .titleBox p {font-size:105%}
	}

	@media screen and (max-width:1024px){
		#mainContents .titleBox h3 {font-size:220%;}
		#mainContents .titleBox p {font-size:100%}
	}

	@media screen and (max-width:799px){
		#mainContents .more-btn {margin-top:40px;}
		#mainContents .titleBox h3 {font-size:180%;}
		#mainContents .titleBox p {font-size:90%}
	}

	@media screen and (max-width:499px){
		#mainContents .more-btn {font-size:80%;}
		#mainContents .titleBox h3 {font-size:160%;}
	}


.mainStory {background:url('../img/main/mainStoryBg.jpg') center no-repeat; color:#fff; padding:180px 0; background-size:cover;}
.mainStory .container {display:flex;}
.mainStory .imageBox {display:flex; align-items: center; justify-content: center; width:50%; opacity:0;}
.mainStory.show .imageBox {animation:fadeInLeft 1s forwards; }
.mainStory .titleBox {width:50%; opacity:0;}
.mainStory.show .titleBox {animation:fadeIn 1s forwards; animation-delay:0.5s;}
.mainStory .titleBox h3 {margin-bottom:50px;}
.mainStory .titleBox p {margin-top:35px;}
.mainStory .titleBox p:first-child {margin-top:0;}

	@media screen and (max-width:1439px){
		.mainStory .imageBox {justify-content: flex-start; width:45%;}
		.mainStory .titleBox {width:55%;}
	}

	@media screen and (max-width:1024px){
		.mainStory {padding:120px 0;}
		.mainStory .imageBox img {max-width:80%;}
	}

	@media screen and (max-width:799px){
		.mainStory {padding:80px 0;}
		.mainStory .container {flex-direction: column;}
		.mainStory .imageBox {width:100%; text-align:center; margin-bottom:50px;}
		.mainStory .imageBox img {max-height:300px; margin:0 auto;}
		.mainStory .titleBox {width:100%;}
		.mainStory .titleBox h3 {margin-bottom:30px;}
		.mainStory .titleBox p {margin-top:15px;}
	}

	

.mainVideo {padding:150px 0; background:url('../img/main/mainVideoBg.jpg') center no-repeat; background-size:cover;}
.mainVideo .container {display:flex; align-items: center; margin:0 10% 0 6.3%; padding:0; width:85%; max-width:1600px; border-radius:20px; overflow:hidden; background:#fff;}
.mainVideo .videoBox {width:calc(100% - 480px); height:625px; background:#000; opacity:0;}
.mainVideo.show .videoBox {animation:fadeIn 1.5s forwards;}
.mainVideo .videoBox iframe {width:100%; height:100%;}
.mainVideo .titleBox {width:480px; padding:0 70px;}
.mainVideo .titleBox h3 {margin-bottom:20px; opacity:0;}
.mainVideo .titleBox h3:before {position:relative; display:block; width:33px; height:23px; background:url('../img/main/youtubeIcon.png'); content:'';}
.mainVideo .titleBox p {font-size:20px; opacity:0;}
.mainVideo .more-btn {color:#000 !important; border-bottom:1px solid rgba(0,0,0,0.4) !important; font-size:18px; font-weight:300; opacity:0;}
.mainVideo .more-btn span.bul {background:#000 !important;}
.mainVideo .more-btn span.bul:after {background:#000 !important;}
.mainVideo.show .titleBox h3 {animation:fadeInDown 1s forwards; animation-delay:0.5s;}
.mainVideo.show .titleBox p {animation:fadeInDown 1s forwards; animation-delay:0.6s;}
.mainVideo.show .titleBox .more-btn {animation:fadeInDown 1s forwards; animation-delay:0.7s;}

	@media screen and (max-width:1439px){
		.mainVideo {padding:100px 0;}
		.mainVideo .container {width:80%;}
		.mainVideo .videoBox {width:65%; height:485px;}
		.mainVideo .titleBox {width:35%; padding:0 5%;}
		.mainVideo .more-btn {font-size:105%}
	}

	@media screen and (max-width:1024px){
		.mainVideo {padding:80px 0;}
		.mainVideo .container {width:90%; margin: 0 5%}
		.mainVideo .videoBox {width:60%; height:425px;}
		.mainVideo .titleBox {width:40%;}
		.mainVideo .more-btn {font-size:100%;}
	}

	@media screen and (max-width:799px){
		.mainVideo .container {flex-direction: column;}
		.mainVideo .videoBox {width:100%; height:325px;}
		.mainVideo .titleBox {width:100%; padding:30px 5%;}
		.mainVideo .titleBox h3 {margin-bottom:10px;}
		.mainVideo .more-btn {font-size:90%;}
	}
	@media screen and (max-width:499px){
		.mainVideo {padding:60px 0;}
		.mainVideo .more-btn {font-size:80%;}
	}

.mainSBMED {padding:150px 0; background:url('../img/main/mainSBMEDBg.jpg') center no-repeat; background-size:cover;}
.mainSBMED .titleBox {width:100% !important; text-align:center; color:#fff !important; margin-bottom:100px;}
.mainSBMED.show .titleBox {animation:fadeIn 1s forwards;}
.mainSBMED .titleBox h3 {margin-bottom:15px !important;}
.mainSBMED .contentBox ul {display:flex;}
.mainSBMED .contentBox ul li {display:flex; justify-content: center; width:33.333%; text-align:center; font-size:24px; border-left:1px solid rgba(255,255,255,0.3); opacity:0;}
.mainSBMED.show .contentBox ul li {animation:fadeInDown 1s forwards;}
.mainSBMED.show .contentBox ul li:nth-child(1) {animation-delay:0.1s;}
.mainSBMED.show .contentBox ul li:nth-child(2) {animation-delay:0.3s;}
.mainSBMED.show .contentBox ul li:nth-child(3) {animation-delay:0.5s;}
.mainSBMED .contentBox ul li:first-child {border:0;}
.mainSBMED .contentBox ul li .icon {}
.mainSBMED .contentBox ul li .text {color:#fff; text-align:left; margin-left:40px;}
.mainSBMED .contentBox ul li .text .num {display:block; font-size:20px; color:rgba(255,255,255,0.6);}
.mainSBMED .contentBox ul li .text .num b {display:inline-block; font-size:65px; font-weight:700; color:#fff; margin-right:6px; font-family:'Montserrat', sans-serif;}

	@media screen and (max-width:1439px){
		.mainSBMED .contentBox ul li {font-size:120%;}
		.mainSBMED .contentBox ul li .text {margin-left:7%;}
		.mainSBMED .contentBox ul li .text .num {font-size:105%;}
		.mainSBMED .contentBox ul li .text .num b {font-size:290%;}
	}

	@media screen and (max-width:1024px){
		.mainSBMED {padding:100px 0;}
		.mainSBMED .titleBox {margin-bottom:70px;}
		.mainSBMED .contentBox ul li {flex-direction: column; justify-content: flex-start; align-items: center; font-size:100%; padding:20px 3%;}
		.mainSBMED .contentBox ul li .icon {width:100px;}
		.mainSBMED .contentBox ul li .icon img {max-width:100%;}
		.mainSBMED .contentBox ul li .text {margin-left:0; width:200px; text-align:center; margin-top:10px;}
		.mainSBMED .contentBox ul li .text .num {font-size:100%;}
		.mainSBMED .contentBox ul li .text .num b {margin-right:0;}
	}

	@media screen and (max-width:799px){
		.mainSBMED .titleBox {margin-bottom:40px;}
		.mainSBMED .contentBox ul {flex-direction: column;}
		.mainSBMED .contentBox ul li {width:100%; border-top:1px solid rgba(255,255,255,0.3); border-left:0; }
	}

	@media screen and (max-width:799px){
		.mainSBMED {padding:60px 0;}
		.mainSBMED .titleBox {margin-bottom:20px;}
	}

.mainNews {background:#f9f9f9; padding:120px 0;}
.mainNews .container {}
.mainNews .titleBox {width:100% !important; text-align:center; margin-bottom:80px;}
.mainNews.show .titleBox {animation:fadeInUp 1s forwards;}
.mainNews .titleBox h3 {margin-bottom:15px !important;}
.mainNews .titleBox p {color:rgba(51,51,51,0.8);}

.mainNews.show .boardBox .latestNews ul {animation:fadeInLeft 1s forwards; opacity:0;}

	@media screen and (max-width:1024px){
		.mainNews {padding:80px 0;}
		.mainNews .titleBox {margin-bottom:60px;}
	}

	@media screen and (max-width:799px){
		.mainNews .titleBox {margin-bottom:40px;}
	}

	@media screen and (max-width:499px){
		.mainNews {apdding:60px 0;}
		.mainNews .titleBox {margin-bottom:20px;}
	}

.sec-footer {margin-top:0 !important;}