@import url(../../../common/css/style.css);

body {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  transition: all 1s;
  background: var(--p, #000);
}
body.on {
  background: #f9f9f7;
}

.wrapper {
  max-width: 1920px;
  min-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
}

.ulthera-y-1{
	color: #DFB147;
}
.ulthera-y-2{
	color: #FFCA51;
}


.con-info h4{
	font-family: SUIT;
	font-size: 46px;
	font-weight: 700;
	line-height: 50.6px;
	color: #FFF;
	padding: 0 0 24px;
}
.con-info p{
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #FFF;
}
.con-info p strong{
	font-weight: 700;
}
.con-info h5{
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.8);
}


/**************************
	con-1
***************************/
.con-1{
  height: 800px;
  background-color: #FFF;
  background-image: url(../assets/img_con1_1.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  position: relative;
}
.con-1 .img-wrap{
	width: 100%;
	position: absolute;
	text-align: center;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.con-1 img{
	width: 939px;
}

.con-1 .tag-wrap{
	position: absolute;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding-bottom: 48px;
}
.con-1 .tag-inner{
	display: flex;
	flex-direction: column;
	gap: 14px;
	
}
.con-1 .tag-inner div{
	text-align: center;
}
.con-1 .tag-inner div span{
	display: inline-block;
	font-family: SUIT;
	font-size: 16px;
	font-weight: 400;
	line-height: 16px;
	color: #FFF;
	text-transform: uppercase;
}
.con-1 .tag-inner div:nth-child(2){
	display: flex;
	align-items: center;
	gap: 8px;
}
.con-1 .tag-inner div:nth-child(2) span{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	border-radius: 24px;
	padding: 0 12px;
	border: 1px solid #FFF;
}





/**************************
	con-2
***************************/

.con-2{
	padding: 194px 0 164px;
}
.con-2 .con-info{
	text-align: center
}
.con-2 .con-info h4{
	font-family: SUIT;
	font-size: 46px;
	font-weight: 700;
	line-height: 50.6px;
	color: #FFF;
	padding: 0 0 24px;
}
.con-2 .con-info p{
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #FFF;
}
.con-2 .con-info .ulthera-app-icon{
	width: calc(135px * 3);
}
.con-2 .con-info h5{
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.8);
}
.con-2 .con-app{
	position: relative;
	width: 100%;
	margin-top: 178px;
}
.con-2 .con-app img{
	display: inline-block;
	width: 100%;
	height: 838px;
	object-fit: cover;
}
.con-2 .con-app::before{
	content: "";
	width: 100%;
	height: 387px;
	position: absolute;
	top: -73px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
}
.con-2 .con-app::after{
	content: "";
	width: 100%;
	height: 387px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
}
.con-2 .con-info.goal{
	text-align: left;
	display: block;
	width: 1180px;
	margin: 40px auto 0;
}
.con-2 .con-info.goal p{
	color: rgba(255, 255, 255, 0.8);
}
.con-2 .con-info .ulthera-project-goal{
	margin-top: 80px;
	width: 1180px;
}







/**************************
	con-3
***************************/

.con-3{
	background: #FFCA51;
	padding: 40px 0;
	position: relative;
}
.con-3 .con-info{
	padding: 34px 0;
}
.con-3 .con-info .con-item{}
.con-3 .con-info .con-item h5{
	font-family: SUIT;
	font-size: 176px;
	font-weight: 400;
	line-height: 176px;
	text-align: left;
	color: #FFF;
	position: relative;
	height: 176px;
}
.con-3 .ulthera-mobile-device{
	position: absolute;
	top: 298px;
	left: 50%;
	transform: translateX(-50%);
	width: 603px;
}





/**************************
	con-4
***************************/

.con-4{
	background: #FFF;
	padding: 163px 0 285px;
}
.con-4 > .con-info{
	display: block;
	width: 1180px;
	margin: 0 auto;
	padding: 0 0 100px;
}
.con-4 .con-info h4{
	color: #000;
}
.con-4 .con-info h5{
	font-weight: 700;
	color: #000;
	padding: 0 0 12px;
}
.con-4 .con-info p{
	color: #000;
}

.con-4 .con-service-wrap{
	position: relative;
	text-align: center;
}
.con-4 .ulthera-strategy{
	width: 1126px;
	margin-top: 100px;
}
.con-4 .ulthera-strategy-laptop{
	width: 100%;
}
.con-4 .con-service{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 552px;
	background: url('../assets/img_con4_3.png') no-repeat center / cover;
	position: absolute;
	bottom: 0;
	left: 0;
}
.con-4 .con-service::after{
	content: "";
	display: inline-block;
	width: 100%;
	height: 552px;
	background: url('../assets/img_con4_3_1.png') no-repeat center / cover;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 11;
	opacity: 0.4;
}
.con-4 .con-service .con-inner{
	padding: 42px 0;
	display: flex;
	flex-direction: column;
	gap: 50px;
	position: relative;
	z-index: 16;
}
.con-4 .con-concept{
	display: inline-block;
	width: 100%;
	position: relative;
	text-align: center;
}
.con-4 .con-concept .ulthera-concept-backfilter{
	height: 981px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 13;
}
.con-4 .con-concept .ulthera-concept-bg{
	height: 488px;
	position: absolute;
	top: 104px;
	left: 0;
	z-index: 12;
}
.con-4 .con-concept .ulthera-concept-structure{
	margin-top: -284px;
	width: 986px;
	position: relative;
	z-index: 14;
}
.con-4 .con-concept-info{
	width: 1180px;
	display: flex;
	align-content: center;
	gap: 20px;
	margin: 0 auto;
}
.con-4 .con-concept-info > div{
	flex: 1 0 0;
	text-align: left;
	border-top: 5px solid #000;
	padding: 24px 0 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.con-4 .con-concept-info h5{
	font-family: SUIT;
	font-weight: 700;
	font-size: 40px;
	line-height: 56px;
	letter-spacing: 0%;
	color: #000;
}
.con-4 .con-concept-info p{
	font-family: SUIT;
	font-weight: 400;
	font-size: 16px;
	line-height: 28.8px;
	letter-spacing: 0%;
	color: #000;
}
.con-4 .con-concept-info p strong{
	font-weight: 700;
}




/**************************
	con-5
***************************/
.con-5{
	height: 1080px;
	background: #FFF;
	display: flex;
	align-items: stretch;
	justify-content: center
}
.con-5 > div{
	flex: 1 0 0;
	width: 50%;
	position: relative;
}
.con-5 .ulthera-ul-left{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.con-5 .con-left strong{
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-family: SUIT;
	font-weight: 400;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 0;
	color: #FFF;
}
.con-5 .ulthera-ul-right{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.con-5 .con-right > div{
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}
.con-5 .con-right h5{
	font-family: SUIT;
	font-weight: 700;
	font-size: 46px;
	line-height: 64.4px;
	letter-spacing: 0;
	text-align: center;
	color: #000;
}
.con-5 .con-right p{
	font-family: SUIT;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	color: #000;
}
/**************************
	con-6
***************************/

.con-6{
	background: #FFCA51;
	height: 1080px;
}
.con-6 .con-svg{
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}
.ulthera-mark path{
	stroke-dasharray: 0;
	stroke-dashoffset: 0;
	fill-opacity: 0; 
	transition: stroke-dashoffset 1s linear, fill-opacity 1s linear 1s;
}


/**************************
	con-7
***************************/
.con-7{
	padding: 278px 0 0;
	overflow: hidden;
}
.con-7 .con-info{
	width: 1180px;
	margin: 0 auto;
	padding: 0 0 724px;
	position: relative;
	z-index: 2;
}
.con-7 .con-info p{
	padding: 32px 0 0;
	color: rgba(255, 255, 255, 0.8);
}
.con-7 .con-img{
	background: #FFF;
	height: 1500px;
}
.con-7 .img-wrap{
	width: 1180px;
	margin: 0 auto;
	position: relative;
}
.con-7 .img-wrap > div:nth-child(1){
	position: relative;
	z-index: 2;
}
.con-7 .img-wrap > div:nth-child(2){
	position: relative;
	z-index: 2;
}
.con-7 .img-wrap > div:nth-child(3){
	position: relative;
	z-index: 2;
}
.con-7 img{
	position: absolute;
}
.con-7 .img_con1{
	top: -454px;
	left: -190px;
	z-index: 3;
}
.con-7 .img_con2{
	top: -250px;
	left: calc(50% - 176px);
	z-index: 4;
}
.con-7 .img_con3{
	top: -250px;
	right: -114px;;
	z-index: 4;
}
.con-7 .img_con4{
	top: 0px;
	left: calc(50% - 384px);
	z-index: 1;
}
/**************************
	con-8
***************************/
.con-8{
	position: relative;
	z-index: 10;
}
.con-8 .con-info{
	width: 1180px;
	margin: 0 auto;
	padding: 172px 0 202px;
}
.con-8 .con-info p{
	color: rgba(255, 255, 255, 0.8);
	padding: 32px 0 0;
}
.con-8 .img-wrap{
	min-width: 1320px;
	display: flex;
	align-content: center;
	justify-content: space-evenly;
	gap: 70px;
	padding: 0 80px;
	position: relative;
}
.con-8 .img-wrap > div{
	flex: 1 0 0;
	width: 100%;
	aspect-ratio: 295 / 630;
	position: relative;
	z-index: 2;
}
.con-8 .img-wrap > div [class^="img_con"]{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: inline-block;
	position: absolute;
	top: 0;

}
.con-8 .img-wrap > div:nth-child(4){
	z-index: 3;
}
.con-8 .img-wrap > div > div{
	width: 100%;
	aspect-ratio: 817 / 582;
	position: absolute;
	top: 50%;
	left: 50%;
}
.con-8 .img-wrap > div > div .sub_img_con4{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: inline-block;
	position: absolute;
	top: 0;
}
.con-8 .img-wrap .hover-mouse {
	position: fixed;
	width: 409px;
	height: 291px;
	background: url('../assets/img_con8_4_1.png') no-repeat center / 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	z-index: 13;
}
.con-8 .con-dashboard{
	width: 1180px;
	margin: 0 auto;
	padding: 220px 0 537px;
}
.con-8 .con-dashboard-title{
	display: grid;
	grid-template-columns: 60% 40%;
}
.con-8 .con-dashboard-title h4{
	font-family: SUIT;
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0%;
	color: #FFF;
}
.con-8 .con-dashboard-title p{
	font-family: SUIT;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0%;
	color: #FFF;
}
.con-8 .con-dashboard-title p strong{
	font-weight: 700;
}
.con-8 .con-dashboard-tablet{
	background: #FFF;
}
.con-8 .con-dashboard-tablet > div{
	width: 1180px;
	margin: 0 auto;
}
.con-8 .con-dashboard-tablet .img_con6{
	margin-top: -456px;
	margin-left: -80px;
}




/**************************
	con-9
***************************/
.con-9{
	background: #FFF;
	position: relative;
	z-index: 14;
}
.con-9 .con-head{
	display: grid;
	grid-template-columns: 50% 50%;
}
.con-9 .con-info{
	width: 1180px;
	margin: 30px auto 0;
}
.con-9 .con-info h4{
	color: #000;
}
.con-9 .con-info p{
	color: #000;
	padding: 32px 0 0;
}
.con-9 .img-wrap{
	height: 1855px;
	position: relative
}
.con-9 .img-top-wrap{
	text-align: center;
}
.con-9 .img_con1{
	width: 1515px;
	margin-top: -448px;
	margin-left: 58px;
	margin-bottom: -240px;
	position: relative;
	z-index: 11;
}
.con-9 .img_con2{
	width: 1515px;
	position: relative;
	margin-left: 58px;
	z-index: 11;
}
.con-9 .img_con3{
	height: 828px;
	margin-top: -602px;
	position: relative;
	z-index: 10;
}
.con-9 .img-bot-wrap{
	position: relative;
	height: 1855px;
}
.con-9 .img-bot-wrap .img_con4{
	width: 830px;
	margin-top: -8px;
}
.con-9 .img-bot-wrap .img-bot-inner{
	width: 1580px;
	height: 100%;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}
.con-9 .img-bot-wrap [class^="img_con"]{
	position: absolute;
}
.con-9 .img-bot-wrap .img-bot-inner .img_con5{
	width: 543px;
	top: 230px;
	left: 0;
	z-index: 13;
}
.con-9 .img-bot-wrap .img-bot-inner .img_con6{
	width: 543px;
	top: 230px;
	left: 390px;
	z-index: 13;
}
.con-9 .img-bot-wrap .img-bot-inner .img_con10{
	width: 543px;
	bottom: -24px;
	right: 204px;
	z-index: 13;
}
.con-9 .img-bot-wrap .img-bot-inner .img_con11{
	width: 543px;
	bottom: -452px;
	left: 426px;
	z-index: 13;
}

.con-9 .img-bot-wrap .img_con7{
	width: 240px;
	top: 584px;
	right: 490px;
	z-index: 10;
}
.con-9 .img-bot-wrap .img_con8{
	width: 240px;
	top: 660px;
	right: 312px;
	z-index: 11;
}
.con-9 .img-bot-wrap .img_con9{
	width: 240px;
	top: 502px;
	right: 0;
	z-index: 12;
}
/**************************
	con-10
***************************/
.con-10{
	background: #FFCA51;
	padding: 185px 0;
	position: relative;
	z-index: 15;
}
.con-10 .con-info{
	width: 1180px;
	margin: 0 auto;
	padding: 0 0 106px;
}
.con-10 .con-info h4{
	color: #000;
	padding: 0 0 16px;
}
.con-10 .con-info p{
	color: #000;
	padding: 40px 0 0;
}
.con-10 .img-top-wrap{
	width: 1180px;
	height: 1076px;
	margin: 0 auto;
	position: relative;
}
.con-10 .img-top-wrap [class^="img_con"]{
	position: absolute;
}
.con-10 .img-top-wrap .img_con1{
	width: 543px;
	top: 0;
	left: -250px;
	z-index: 10;
}
.con-10 .img-top-wrap .img_con2{
	width: 480px;
	top: 168px;
	left: 0px;
	z-index: 11;
}
.con-10 .img-top-wrap .img_con3{
	width: 606px;
	top: 0;
	left: 264px;
	z-index: 10;
}
.con-10 .img-top-wrap .img_con4{
	width: 400px;
	top: 468px;
	right: 120px;
	z-index: 11;
}
.con-10 .img-top-wrap .img_con5{
	width: 543px;
	top: 0;
	right: -132px;
	z-index: 10;
}
.con-10 .img-bot-wrap{
	text-align: center;
	position: relative;
}
.con-10 .img-bot-wrap .img_con6{
	width: 1702px;
	margin-bottom: -442px;
	margin-left: -130px;
	z-index: 11;
	position: relative;
}
.con-10 .img-bot-wrap .img_con7{
	width: 1422px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

/**************************
	con-11
***************************/
.con-11{
	height: 1410px;
	background: url("../assets/img_con11_1.png") no-repeat center / cover;
	position: relative;
}
.con-11 .con-wrap{
	display: inline-block;
	width: 1103px;
	height: 1100px;
	background: url("../assets/img_con11_2.png") no-repeat center / 1103px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.con-11 [class^="img_con"]{
	position: absolute;
}
.con-11 .img_con1{
	top:70px; 
	left: 184px;
	z-index: 11;
}
.con-11 .img_con2{
	top: 266px;
	left: 16px;
	z-index: 10;
}
.con-11 .img_con3{
	top: 385px;
	left: -6px;
	z-index: 10;
}
.con-11 .img_con4{
	top: 584px;
	left: -44px;
	z-index: 10;
}
.con-11 .img_con5{
	top: 684px;
	left: 48px;
	z-index: 11;
}
.con-11 .img_con6{
	top: 194px;
	left: 309px;
	z-index: 10;
}
.con-11 .img_con7{
	top: 732px;
	left: 352px;
	z-index: 10;
}
.con-11 .img_con8{
	top: 688px;
	left: 578px;
	z-index: 11;
}
.con-11 .img_con9{
	top: 166px;
	left: 700px;
	z-index: 11;
}
.con-11 .img_con10{
	top: 454px;
	left: 700px;
	z-index: 10;
}







/**************************
	con-footer
***************************/

.con-footer{
	background: #FFF;
	padding: 96px 0 118px;
}
.con-footer .con-info{
	width: 1180px;
	margin: 0 auto;
	padding: 0 180px;
}
.con-footer .con-info h2{
	font-family: SUIT;
	font-weight: 700;
	font-size: 36px;
	line-height: 39.6px;
	letter-spacing: 0%;
	text-align: center;
	color: #000;
}
.con-footer .con-info span{
	color: #FFCC00;
}
.con-footer .con-member{
	width: 1180px;
	margin: 0 auto;
	padding: 117px 180px 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 120px;
}
.con-footer .con-member > div{
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.con-footer .con-member dl{
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.con-footer .con-member dl dt{
	font-family: Pretendard;
	font-weight: 700;
	font-size: 26px;
	line-height: 39.94px;
	letter-spacing: -1.07px;
	color: #000;
	margin-bottom: 4px;
}
.con-footer .con-member dl dd{
	font-family: Pretendard;
	font-weight: 400;
	font-size: 21px;
	line-height: 33.41px;
	letter-spacing: -0.85px;
	color: #000;
}