@charset "utf-8";
/* ********************************************************************
 * name : (주)메디파이
 * filename : layout.css
 * description : 전체 레이아웃 css 
 * date : 2024-01-22
********************************************************************* */

#wrap {position: relative;min-width: 320px;width: 100%;height: 100%;z-index: 300;overflow: hidden;}

/* === 헤더 === */
#header {position:absolute;min-width: 320px;width: 100%;z-index: 100;transition: all 0.4s;background: /*#ffffff14*/linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 8%) 100%);margin:1em 0;}
.headBg{background: linear-gradient(360deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 25%) 100%);width: 100%;position: absolute;top: 0;height: 100px;z-index: 1;}
#headBox{position: relative;}
#header .logo {position: absolute;top: 25px;z-index: 100;width: 180px;height: 33px;left: 4%;}
#header .logo .logoColor2{display:block;}
#header .logo .logoColor1{display:none;}

.mainSlide #header{margin:0;}
.mainSlide .logoColor1{display:block !important;}
.mainSlide .logoColor2{display:none !important;}

.headerOn,
.bgOn{transform: translate(0%, 0%);}
.headerOff,
.bgOff{transform: translate(0%, -100%);}
.headerOn .mGnb .list_wrap,
.headerOn .mGnb{height:100vh;}
.headerOff .mGnb .list_wrap,
.headerOff .mGnb{height:100%;display:none;}
 
 .hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
/* === pc메뉴 === */
#gnbBox{position: relative;text-align: right;width: 100%;z-index: 99;right: 7%;}
#gnbBox > ul{display: inline-block;}
#gnbBox > ul > li{position:relative; float:left; word-break:keep-all;}
#gnbBox > ul > li > a{position:relative; z-index:100;display:block;text-transform:uppercase;margin-top:10px;line-height:57px;padding:0 40px;text-align:center;letter-spacing: -0.05em;color:#151515; font-size:17px;font-weight:600; -webkit-transition:all 0.5s;transition:all 0.5s;}
#gnbBox > ul > li > a:hover,
#gnbBox > ul > li > a:focus,
#gnbBox > ul > li.on > a{color:#55cdff;}

.gnb > ul > li .gnb-2dep{position:absolute; top:calc(var(--header-height) - 20px);	left:50%;margin-left: -80px;z-index:99;width:160px;text-align:left;visibility:hidden;opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);}
.gnb > ul > li .gnb-2dep:before{content:"";position:absolute;top:0px;left:0px;right:0px;height:0;border-radius: 15px;background-color:#00a1e9; -webkit-transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);}
.gnb > ul > li .gnb-2dep ul{padding:15px 0px;}
.gnb > ul > li .gnb-2dep ul li{position:relative;padding:8px 10px;opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0s 0s;-moz-transition:all  0s 0s;-o-transition:all  0s 0s;-ms-transition:all  0s 0s;transition:all  0s 0s; }
.gnb > ul > li .gnb-2dep ul li a{display:block;color:#fff;font-size:16px;font-weight:400;text-align:center;line-height:1.4;opacity:0.8;filter:Alpha(opacity=80);}
.gnb > ul > li .gnb-2dep ul li a:hover{opacity:1.0;filter:Alpha(opacity=100);}
.gnb > ul > li .gnb-2dep ul li a img{display: block;width: 40px;margin: 0 auto;}

.gnb > ul > li .gnb-2dep.open{visibility:visible;opacity:1.0;filter:Alpha(opacity=100);}
.gnb > ul > li .gnb-2dep.open:before{height:100%;}
.gnb > ul > li .gnb-2dep.open ul li{opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;-ms-transition:all 0.8s;transition:all 0.8s;}
.gnb > ul > li .gnb-2dep.open ul li:nth-child(1){-webkit-transition-delay: 0.1s; transition-delay:0.1s;}
.gnb > ul > li .gnb-2dep.open ul li:nth-child(2){-webkit-transition-delay: 0.2s; transition-delay:0.2s;}
.gnb > ul > li .gnb-2dep.open ul li:nth-child(3){-webkit-transition-delay: 0.3s; transition-delay:0.3s;}
.gnb > ul > li .gnb-2dep.open ul li:nth-child(4){-webkit-transition-delay: 0.4s; transition-delay:0.4s;}

.mainSlide #gnbBox > ul > li > a{color:#fff;}
.mainSlide #header .bt_menu{right:calc(2.5% - 10px);position:absolute; top:22px;}
.mainSlide #header .bt_menu i{background: #fff;}

/* === 모바일메뉴 === */
.logoOn .mGlogo{background:url(../img/common/medipie_logo.svg) no-repeat;position: absolute;top: 25px;z-index: 110;width: 180px;height: 33px;left: 4%;}
#header .bt_menu {position:fixed; top:37px; right:4%; z-index:110; font-size:0;transition: all .5s;}
#header .bt_menu .lineBox{display: flex;flex-wrap: wrap;width: 20px;justify-content: space-between;}
#header .bt_menu i {display:block; width:8px; height:8px; background:#151515; margin-top:4px;position: relative;}
#header .bt_menu i:nth-child(1) {animation : menubar1 .75s forwards;}
#header .bt_menu i:nth-child(2) {animation : menubar2 .75s forwards;background: #00a1e9;}
#header .bt_menu i:nth-child(3) {animation : menubar3 .75s forwards;}
#header .bt_menu i:nth-child(4) {animation : menubar4 .75s forwards;}
#header .close i{width: 12px;height: 2px;}
#header .close i:nth-child(1) {animation :close-menubar1 0.75s forwards;background: #fff !important;}
#header .close i:nth-child(2) {animation :close-menubar2 0.75s forwards;background: #fff !important;}
#header .close i:nth-child(3) {animation :close-menubar3 0.75s forwards;background: #fff !important;}
#header .close i:nth-child(4) {animation :close-menubar4 0.75s forwards;background: #fff !important;}
.scroll .bt_menu{right: 0.7% !important;top: 15px !important;background: #fbfbfb2e;padding: 15px;/*border-radius: 50%;*/width: 25px;height: 25px;backdrop-filter: blur(5px);}
.scroll .bt_menu .lineBox{position: absolute;top: 13px;right: 18px;}
.scroll .close{background: none;}

.mGnb {display: none; position:fixed; top:0; left:0; width:100%; height:100%; background:#161616;z-index: 100;background:url(../img/common/menu_bg.jpg) no-repeat;background-size: cover;}
.mGnb .list_wrap {width: 100%;height: 100%;text-align: center;display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;}
.mGnb .list_wrap ul.dept1 {display:flex;width: 1350px;}
.mGnb .list_wrap ul.dept1 > li {width: 20%;}
.mGnb .list_wrap ul.dept1 > li > a {font-size:26px;color:#55cdff; border-bottom:1px solid #55cdff; padding-bottom:25px;font-weight: 600;}
.mGnb .list_wrap ul.dept1 > li > a:hover {color:#fff;}
.mGnb ul.dept2 {padding-top:40px;}
.mGnb ul.dept2 > li {width:100%; font-size:18px; font-weight:300; padding:10px 0; color:#fff;}
.mGnb ul.dept2 > li > a {color:#fff; font-weight: 100;}
.mGnb ul.dept2 > li > a:hover {text-decoration:underline; color:#fff;}
.mGnb ul.dept2 > li > a img{margin-right: 10px;}

.mGnb .bgBox{position: absolute;z-index: -2;height: 50vh;width: calc(100% - 15%);background: rgb(0 0 0 / 16%);backdrop-filter: blur(5px);border-radius: 15px;}

/* === 콘텐츠 === */
#container{position:relative;height:100%}
#container #content{position:relative;min-height:300px;}
#container #content::after{display:block;clear:both;content:''}

.subMargin{width: 100%;height: 20vh;}
.subWrap{max-width:1480px;margin: 0 auto 12em;}
.subWrap .subTitleBox{}
.subWrap .subTitleBox .location{display: flex;align-items: center;flex-direction: row;}
.subWrap .subTitleBox .location a{background: url(../img/common/home_icon.jpg) no-repeat center 1px;width:18px;height: 18px;display:inline-block;}
.subWrap .subTitleBox .location a i{}
.subWrap .subTitleBox .location span{font-weight: 500;letter-spacing: -0.03em;}
.subWrap .subTitleBox .location h1{color: #00a1e9;font-weight: 800;}
.subWrap .subTitleBox .location i{font-weight: 900;font-size: 10px;margin: 0 20px;}

.subWrap .subTitleBox .titleTxt{margin: 2em 0 3em;} 
.subWrap .subTitleBox .titleTxt strong{font-size: 72px;color: #212121;font-weight: 900;letter-spacing: -0.03em;}
.subWrap .subTitleBox .titleTxt strong span{font-size: 29px;letter-spacing: 0;vertical-align: 2px;margin: 30px;font-weight: 600;}
.subWrap .subTitleBox .titleTxt em{display: block;font-size: 24px;margin: 1em 0;}

.subWrap .subTitleBox .titleTxt strong span.youtubeTitle{line-height: 1.2;display: inline-block;}
.subWrap .subTitleBox .titleTxt strong span.youtubeTitle img{vertical-align: -4px;}

/* === 푸터 === */
.mainFooterBox{}
.footerline{border-top: 1px solid #dfdfdf;width:100%;position: relative;}
#footer{background: #fff;height: calc(32.7vh - 9vh);padding: 6vh 4% 3vh;position: relative;}
.f-inner{display: flex;justify-content: space-between;}
.f-inner .fLeft{}
.f-inner .fLeft img{}
.f-inner .fLeft address{margin-top: 3em;font-size: 15px;color: #7f7f7f;line-height: 1.6;}
.f-inner .fLeft address p{}
.f-inner .fLeft address ul{display: flex;}
.f-inner .fLeft address ul li{margin-right: 20px;position: relative;}
.f-inner .fLeft address ul li:after{content:'';position: absolute;width: 1px;height: 10px;background: #c1c1c1;top: 8px;right: -10px;}
.f-inner .fLeft address ul li:last-child:after{display: none;}
.f-inner .fLeft address ul li span{}
.f-inner .fRight{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;}
.f-inner .fRight .snsBox{margin-top: 1em;}
.f-inner .fRight .snsBox a{margin-left: 15px;}
.f-inner .fRight .snsBox a img{width: 25px;filter: invert(70%) sepia(0%) saturate(1995%) hue-rotate(316deg) brightness(104%) contrast(77%);}
.f-inner .fRight ul{display: flex;align-items: flex-end;}
.f-inner .fRight ul li{font-size: 17px;margin-left: 35px;}
.f-inner .fRight ul li a{color: #000;}
.f-inner .fRight ul li:nth-child(1){font-size:20px;font-weight: 600;}
#footer .copy{border-top: 1px solid #dfdfdf;margin-top: 2em;padding-top: 15px;text-align: right;color: #787878;}
#footer .copy span{}
#footer .copy span em{color: #9f9f9f;font-size: 14px;}
#footer .copy span em a{color: #9f9f9f;}

.topBtn {position: fixed;bottom: 15px;right: 15px;z-index: 10;display:none;width: 46px;height: 46px;background-color: #fff0;outline:none;text-align: center;color: #333;z-index: 10;border: 1px solid #808080;box-sizing: border-box;cursor:pointer;
	-webkit-transition: all 0.6s;-moz-transition: all 0.6s;-o-transition: all 0.6s;-ms-transition: all 0.6s;transition: all 0.6s -webkit-border-radius:50%;-moz-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;}
.topBtn i {display: inline-block;font-size: 19px;line-height: 46px;transition: all 0.3s;color: #808080;}
.topBtn:hover{background-color: #2856be;border: 1px solid #2856be;}
.topBtn:hover i {transform: translateY(-3px);color:var(--white-color);}

/* 애니효과 */
.ani{animation:ani-delay 1s ease 0s forwards;opacity:0;}

.delay1{animation-delay:0.1s;}
.delay2{animation-delay:0.3s;}
.delay3{animation-delay:0.5s;}
.delay4{animation-delay:0.8s;}
.delay5{animation-delay:1.1s;}
.delay6{animation-delay:1.4s;}
.delay7{animation-delay:1.6s;}

/*
===============================================
animation
===============================================
*/
	@keyframes menubar1 {
		0% {transform : translate(6px,6px) rotate(-45deg);} 
		100% {transform : translate(0,0) rotate(0);}
	}

	@keyframes menubar2 {
		0% {transform : translate(-6px,6px) rotate(-45deg);} 
		100% {transform : translate(0,0) rotate(0);}
	}

	@keyframes menubar3 {
		0% {transform : translate(6px,-6px) rotate(-45deg);} 
		100% {transform : translate(0,0) rotate(0);}
	}

	@keyframes menubar4 {
		0% {transform : translate(-6px,-6px) rotate(-45deg);} 
		100% {transform : translate(0,0) rotate(0);}
	}

	@keyframes close-menubar1 {
		0% {transform:translate(0,0) rotate(0);} 
		100% {transform: translate(-7px,6px) rotate(45deg);}
	}

	@keyframes close-menubar2 {
		0% {transform : translateY(0) rotate(0);} 
		100% {transform: translateY(0) rotate(-45deg);}
	}

	@keyframes close-menubar3 {
		0% {transform : translate(0,0) rotate(0);} 
		100% {transform: translate(-8px,2px) rotate(-45deg);}
	}

	@keyframes close-menubar4 {
		0% {transform:translate(0,0) rotate(0);} 
		100% {transform: translate(1px,-4px) rotate(45deg);}
	}

	@keyframes gnb-line {
		from {
			filter:Alpha(opacity=0);
			height:0;
		}
		to {
			filter:Alpha(opacity=100);
			height:100%;
		}
	}

	@keyframes ani-delay{
		0%{transform: translate3d(0, 80%, 0);opacity: 0;}
		100%{transform: translate3d(0, 0, 0);opacity: 1;}
	}

	@keyframes ani-delay1{
		0%{transform: translate3d(100%, 0, 0);opacity: 0;}
		100%{transform: translate3d(0, 0, 0);opacity: 1;}
	}

	@keyframes scrollDown {
		0% {
			opacity: 0.6;
			transform:  translateY(-5px);
		}
		50% {
			opacity: 1;
			transform: translateY(5px);
		}
		100% {
			opacity: 0.6;
			transform:  translateY(-5px);
		}
	}

	@keyframes shine {
	  from  {
		opacity: 0;
		transform: scale(0.9);
	  }
	  to  {
		opacity: 1;
		transform: scale(1);
	  }
	}

	@keyframes blur {
	  from  {
		opacity: 1;
	  }
	  to  {
		opacity: 0;
	  }
	}

	@keyframes move-forever {
	  0% {
	   transform: translate3d(-90px,0,0);
	  }
	  100% { 
		transform: translate3d(85px,0,0);
	  }
	}

	@keyframes txtAni {
	  0% {
		background-position-x: -1000%;
	  }
	  33% {
		background-position-x: 1000%;
	  }
	  66% {
		background-position-x: -1300%;
	  }
	  100% {
		background: linear-gradient(90deg, #000, #fff, #000)
		-webkit-background-clip: text;
		background-clip: text;
		background-position-x: initial;
		background-size: 100%;
	  }
	}

	@keyframes bgtxt1 {
		0%{transform:translate(0,0);}
		100%{transform:translate(0,20px);}
	}

	@keyframes bgtxt2 {
		0% {transform: rotate(-1deg);}
	  25% {transform: rotate(1deg);}
	  50% {transform: rotate(-2deg);}
	  75% {transform: rotate(2deg);}
	  100% {transform: rotate(0deg);}
	}

	@keyframes bgtxt3 {
	  0% {transform: rotate(1deg);}
	  25% {transform: rotate(-1deg);}
	  50% {transform: rotate(1.5deg);}
	  75% {transform: rotate(-1.5deg);}
	  100% {transform: rotate(0deg);}
	}

	@keyframes bgtxt4 {
	  0% {transform: rotate(15deg);}
	  100% {transform: rotate(30deg);}
	}

	@keyframes scroll-down{
		0%{
			opacity: 0;
			transform: rotate(45deg) translate(-20px, -20px);
		}
		50%{
			opacity: 1;
		}
		100%{
			opacity: 0;
			transform: rotate(45deg) translate(20px, 20px);
		}
	}

	@-webkit-keyframes hue {
	  from {
		-webkit-filter: hue-rotate(0deg);
	  }
	  to {
		-webkit-filter: hue-rotate(-360deg);
	  }
	}

	@keyframes lineDown{
		0%{top:-100%;}
		50%{top:0%;}
		100%{top:100%;}
	}

/*
===============================================
반응형 css
===============================================
*/

@media all and (min-width:2500px){
	#footer {height: calc(29.7vh - 9vh);}
}

@media all and (max-width:1600px){
	.subWrap {margin: 0 5% 8em;}
}

@media all and (max-width:1280px){
	#headBox{height: 100px;}
	#header .bt_menu i:nth-child(2){left:0 !important}
	#gnbBox{display:none;}
    .mGnb {max-width:100%; padding-top:0;}
	.mGnb .list_wrap ul.dept1 {max-width:240px; flex-direction:column; margin:0 auto;}
	.mGnb .list_wrap ul.dept1 > li {width:100%;}
	.mGnb .list_wrap ul.dept1 > li > a {display:block; border-bottom:none; padding:15px 0;font-size: 20px;}
	.mGnb ul.dept2 {display:none; padding-top:0;}

	.mainSlide #header .bt_menu {right: 4%;}
	.mainSlide .scroll #header .bt_menu {position: fixed;}
	.scroll .headerOff,
	.scroll .headerOn{transform: none;}
	.mainSlide .scroll #header .bt_menu i {background: #151515;}
	.scroll #header .bt_menu i:nth-child(2) {background: #00a1e9;}

	.subMargin {height: 18vh;}
	.subWrap .subTitleBox .titleTxt strong span {font-size: 1.75rem;}
	.subWrap .subTitleBox .titleTxt em {font-size: 1.35rem;}
	.subWrap .subTitleBox .titleTxt strong {font-size: 3.5rem;}
}

@media all and (max-width:1200px){
	.f-inner {flex-direction: column;align-items: flex-start;}
	#footer {height: 100%;padding: 6em 4% 4em;}
	.f-inner .fRight {flex-direction: row;margin-top: 20px;}
	.f-inner .fRight .snsBox a {margin-left: 0;margin-right: 15px;}
	#footer .copy {text-align: left;}
}

@media all and (max-width:1080px){
	.tBox .linkSns {position: inherit;bottom: 0;margin-top: 10px;}
	.tBox .linkSns a{margin-left: 0;margin-right: 10px;}
	.tBox address {margin: 3em 0 3em;}
	.tBox address span {margin-right: 0;display: block;margin-top: 10px;}
	.fBox .utill {text-align: left;margin-top: 20px;}
	.fBox .utill li {margin-left: 0;margin-right:50px;}
	.fBox {padding: 2em 0 5em;}
}

@media all and (max-width:920px){
	.f-inner .fRight ul li:nth-child(1) {font-size: 17px;}
}

@media all and (max-width:768px){
	.subMargin {height: 14vh;}
	#footer {padding: 5em 4% 5em;}
}

@media all and (max-width:640px){
	.mGnb ul.dept2 > li {font-size: 17px;}
	#header .logo{left:5%;top: 10px;}
	.mainSlide .logoOn .mGlogo,
	.mainSlide #header .logo{left:5%;top: 25px;}
	.logoOn .mGlogo,
	#header .logo img{width: 150px;}
	#header .bt_menu,
	.mainSlide #header .bt_menu {top: 20px;right:5%;}
	.scroll .bt_menu {top: 5px !important;}

	.tBox .ftxt {font-size: 35px;}
	.tBox .linkSns {margin-top: 20px;}

	.subTitle {padding: 1em 0;}
	.subTitle .titleBox {margin: 2em 0 1em;}
	.subTitle .titleBox h1 {font-size: 42px;}
	.subTitle .titleBox h1 em {font-size: 18px;}
	.sub_menu ul li {padding: 0;margin-right: 20px;}
	.sub_menu ul li a {font-size: 17px;font-weight: 500;}

	.f-inner .fLeft {text-align: center;width: 100%;}
	.f-inner .fLeft address p {width: 265px;margin: 0 auto;}
	.f-inner .fLeft address ul {flex-direction: column;margin-top: 10px;}
	.f-inner .fLeft address ul li:after{display:none;}
	.f-inner .fRight ul {align-items: center;}
	.f-inner .fRight {flex-direction: column;margin-top: 20px;align-items: center;width: 100%;}
	.f-inner .fRight ul li {margin-right: 15px;margin-left:0;font-size: 15px;}
	.f-inner .fRight ul li:nth-child(1){font-size: 15px;}
	.f-inner .fRight .snsBox {margin: 1em 0;}
	#footer .copy {text-align: center;}

	.subWrap {margin: 0 5% 5em;}
	.subMargin {height: 13vh;}
	.subWrap .subTitleBox .location i {margin: 0 10px;}
	.subWrap .subTitleBox .titleTxt {margin: 1em 0 3em;}
	.subWrap .subTitleBox .titleTxt em {font-size: 1.15rem;}
	.subWrap .subTitleBox .titleTxt strong {font-size: 3rem;}
	.subWrap .subTitleBox .titleTxt strong span {font-size: 1.15rem;margin-left: 15px;}
}

@media all and (max-width:550px){
	.fBox small {font-size: 14px;}
	.sub_menu ul li a:after{bottom:-2px;}
	#footer .copy span em {display: block;}

	.mNone{display:none !important;}
}