@charset "UTF-8";
@import "_reset.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&family=Roboto:wght@400;500&display=swap');
.wrap {overflow:hidden;max-width:1023px;margin:0 auto;font-family:'Roboto','Noto Sans KR','맑은 고딕';line-height:1.4}
.section {position:relative;height:auto !important}
.section--last {padding-bottom:80px}
/*intro*/
.intro__wrap {position:relative;height:100vh;background:#000;}
.intro__bg {position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/bg_main.jpg) no-repeat center 50%;background-size:cover;opacity:0.2;transition:all 0.6s ease-out 0.5s}
.intro__info {position:absolute;bottom:0px;left:0;width:100%;color:#fff;text-align:center;}
.kakao .intro__info {bottom:100px}
.intro__title {font-size:20px;font-weight:500;letter-spacing:4px;opacity:0;line-height:1.2;transition:all 0.3s ease-out 1s}
.intro__subtitle {margin-top:0px;font-size:14px;font-weight:400;opacity:0;transition:all 0.3s ease-out 1.2s}
.intro__date {font-size:34px;opacity:0;transition:all 0.3s ease-out 1.4s}
.intro__date p {font-size:14px;font-weight:500}
.intro__date span {font-size:20px;font-weight:500;letter-spacing:2px;}
.intro__bar {width:1px;height:50px;margin:15px auto;background:#fff;opacity:0.3}
.active .intro__bg {opacity:1}
.active .intro__title {opacity:1}
.active .intro__subtitle {opacity:1}
.active .intro__date {opacity:1}

.link-area {
	position: absolute;
	/*background-color: rgba(255, 255, 255, 0.5); /* 선택 사항: 가시성을 위해 투명 배경 추가 */
	cursor: pointer;
}
.link1 {
	top: 20%; /* 이미지 상단에서 10% 지점 */
	left: 0%; /* 이미지 왼쪽에서 10% 지점 */
	width: 100%; /* 이미지 너비의 40% */
	height: 50%; /* 이미지 높이의 60% */
}

/*video*/
.video video {width:100%}
/*service*/
.section--service {background:url(../images/bg_service.jpg) no-repeat center top;background-size:cover}
.service {padding:60px 0}
.service__wrap {margin-top:10px}
.service__title {padding:0 20px;font-size:24px;font-weight:400;color:#fff;text-align:center}
.service__title strong {display:block;font-size:28px;color:#fff}
.service__slider {padding:0 30px}
.service__slider .swiper-slide {opacity:0.8;transition:all 0.3s ease-out;text-align:center}
.service__slider .swiper-slide img {height:60vh}
.service__slider .swiper-slide-active {opacity:1}
/*con*/
.con {position:relative}
.con__slider {overflow:hidden}
.con__slider video {width:100%}
.con__slider .swiper-slide {overflow:hidden}
.btn-play {display:none;position:absolute;top:50%;left:50%;width:60px;height:60px;margin-top:-30px;margin-left:-30px;background:url(../images/btn_play.png) no-repeat 50% 50%;text-indent:-9999px;z-index:10;cursor:pointer}
.con__box.active:before {content:none}
.con__box.active .btn-play {display:none}
.con__nav {position:absolute;top:50%;margin-top:-16px;cursor:pointer;z-index:10}
.con__nav img {height:32px}
.con__prev {left:10px}
.con__next {right:10px}
/*brand*/
.brand__swiper {overflow:hidden}
.brand__image {height:auto}
.brand__wrap {overflow:hidden;padding:30px}
.btn-kakao {position:fixed;display:block;bottom:0;left:0;width:100%;background:#f8e600;z-index:5;text-align:center}
.swiper-pagination-bullets {display:flex;position:relative;width:100%;margin-top:20px;background:#e9e9e9;z-index:5}
.swiper-pagination-bullet {display:block;flex-grow:1;width:auto;height:2px;margin:0 !important;border-radius:0;background:none}
.swiper-pagination-bullet-active {background:#003053}
.isPc {display:none}
@media screen and (min-width:1024px) {
	.isPc {display:block}
	.isMobile {display:none}
	.wrap {max-width:100%}
	.section {height:100vh !important}
	.swiper-pagination-bullets {margin-top:20px}
	.intro__bg {background:url(../images/bg_main_pc.jpg) no-repeat center -40px;background-size:cover}
	.intro__info {bottom:120px}
	.intro__title {font-size:38px}
	.intro__subtitle {margin-top:50px;font-size:32px}
	.intro__date {font-size:32px}
	.intro__date p {margin:5px 0;font-size:18px}
	.intro__date span {font-size:22px}
	.intro__bar {height:60px;margin:30px auto}
	.section--service {background:url(../images/bg_service_pc.jpg) no-repeat center top;background-size:cover}
	.service__wrap {width:550px;margin:0 auto}
	.service__title {margin:0 auto;margin-bottom:10px;padding:0;text-align:center}
	.service__slider .swiper-slide {width:auto;opacity:0.6}
	.service__slider .swiper-slide img {height:720px}
	.service__slider .swiper-slide-active {opacity:1}
	.video {height:calc(100vh - 60px);text-align:center}
	.video video {display:inline-block;max-width:auto;height:100%}
	.brand__image {height:562px;background-position:center top;background-repeat:no-repeat;background-size:auto 562px}
	.brand__image--1 {background-image:url(../images/img_incellderm_pc.jpg)}
	.brand__image--2 {background-image:url(../images/img_botalab_pc.jpg)}
	.brand__image--3 {background-image:url(../images/img_lifening_pc.jpg)}
	.brand__wrap {max-width:1130px;margin:0 auto;padding:0;margin-top:30px}
	.btn-kakao img {height:60px}
	.box {display:flex;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center}
	.box__wrap {min-width:0;flex-grow:1}
	.con__box {position:relative;height:calc(100vh - 60px);text-align:center;background:#000}
	.con__box:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:5}
	.con video {display:inline-block;width:auto;height:100%}
	.con__nav {margin-top:-21px}
	.con__nav img {height:42px}
	.con__prev {left:20px}
	.con__next {right:20px}
	.btn-play {display:block}

	.link-area {
		position: absolute;
		/*background-color: rgba(144, 93, 198, 0.5); /* 선택 사항: 가시성을 위해 투명 배경 추가 */
		cursor: pointer;
	}
	.link1 {
		top: 40%; /* 이미지 상단에서 10% 지점 */
		left: 0%; /* 이미지 왼쪽에서 10% 지점 */
		width: 100%; /* 이미지 너비의 40% */
		height: 40%; /* 이미지 높이의 60% */
	}
}