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

body {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  transition: all 1s;
  background: var(--p, #FFF);
}
body.on {
  background: #f9f9f7;
}
img{
	width: 100%;
}
.wrapper {
  max-width: 1920px;
  min-width: 1280px;
  margin: 0 auto;
}

.con-inner{
	background: #FFF;
	overflow: hidden;
}
.con-15 .con-inner{
	overflow: unset;
}
.con-inner.black{
	background: #121212;
}
.con-innerWidth{
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 0 40px;
}
.con-title{}
.con-title span{
	display: block;
	padding: 0 0 16px;
}
.con-title h4{
	word-break: keep-all;
}
.con-content{}
.con-content p{
	word-break: keep-all;
}





.text-label{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #C532A6;
}
.text-title{
	font-family: Pretendard;
	font-weight: 600;
	font-size: 44px;
	line-height: 57.2px;
	color: #121212;
}
.text-title.white{
	color: #FFF;
}
.text-subtitle{
	font-family: Pretendard;
	font-weight: 400;
	font-size: 16px;
	line-height: 25.6px;
	color: #787878;
}
.text-content{
	font-family: Pretendard;
	font-weight: 400;
	font-size: 16px;
	line-height: 25.6px;
	color: #121212;
}
/**************************
	con-1
***************************/
.con-1{
	height: 1080px;
	background: #FFF url('../assets/img_con1_1.png') no-repeat center / cover;
	position: relative;
}
.con-1 .con-img{
	position: absolute;
	display: flex;
	width: 100%;
	height: 60%;
	align-items: center;
	justify-content: center;
}
.con-1 .con-text{
	position: absolute;
	padding: 40px;
	display: grid;
	align-items: flex-start;
	grid-template-columns: 430px 1fr 1fr;
	gap: 20px;
}
.con-1 .con-text > div:nth-child(3){
	text-align: right;
}
.con-1 .con-text strong{
	display: block;
	font-family: Roboto;
	font-weight: 700;
	font-size: 16px;
	line-height: 16px;
	color: #FFF;
	margin-bottom: 12px;
}
.con-1 .con-text span{
	display: block;
	font-family: Roboto;
	font-weight: 400;
	font-size: 14px;
	line-height: 25.2px;
	color: #FFF;
}
.con-1 .main-logo-svg path{
	transition: fill-opacity 0.8s ease-in-out;
}

/**************************
	con-2
***************************/
.con-2{
	
}
.con-2 .con-inner{
	padding: 152px 40px;
}
.con-2 .con-info{
	display: grid;
	align-content: flex-start;
	grid-template-columns: 1fr 1fr;
}

.con-2 .con-info .con-content{
	padding: 42px 0 0;
}




/**************************
	con-3
***************************/
.con-3{}
.con-3 .con-inner{
	padding: 136px 0 60px;
}
.con-3 .con-info{
	padding: 0 0 92px;
}
.con-3 .con-content-wrap{
	position: relative;
}
.con-3 .con-content-wrap::before{
	content: "";
	display: inline-block;
	width: 100%;
	height: 1px;
	background: url("../assets/img_con3_line.png") no-repeat center / 100%;
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 9;
}
.con-3 .con-content{
	display: flex;
	align-content: flex-start;
	justify-content: space-evenly;
}
.con-3 .con-process{
	flex: 1 0 0;
}
.con-3 .con-process span{
	display: inline-flex;
	font-family: Pretendard;
	font-weight: 400;
	font-size: 16px;
	line-height: 22.4px;
	color: #E84CC7;
	border-radius: 99px;
	border: 1px solid #C532A6;
	background: #121212;
	height: 40px;
	padding: 0 18px;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 10;
}
.con-3 .con-process span.empty{
	border: unset;
}
.con-3 .con-process h5{
	margin-top: 36px;
	margin-bottom: 4px;
	font-family: Pretendard;
	font-weight: 500;
	font-size: 16px;
	line-height: 22.4px;
	color: #FFF;
}
.con-3 .con-process dl{
	margin-top: 28px; 
}
.con-3 .con-process dt{
	font-family: Pretendard;
	font-weight: 400;
	font-size: 15px;
	line-height: 21px;
	color: #B6B6B6;
	margin-bottom: 5px;
}
.con-3 .con-process dd{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 15px;
	line-height: 24px;
	color: #737373;
	padding-left: 20px;
	position: relative;
}
.con-3 .con-process dd::before{
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #737373;
	position: absolute;
	top: 11px;
	left: 9px;
}

/**************************
	con-4
***************************/
.con-4{}
.con-4 .con-inner{
	background: #121212 url('../assets/img_con4_1.png') no-repeat center / cover;
}
.con-4 .con-info{
	padding: 250px 0 96px;
}
.con-4 .con-title{
	text-align: center;
}
.con-4 .con-title .text-content{
	color: #787878;
	margin-top: 16px;
}
.con-4 .con-interview{
	padding: 0 0 226px;
	text-align: center;
}
.con-4 .con-interview h6{
	padding: 0 0 24px;
}
.con-4 .con-interview h6 span{
	font-family: Pretendard;
	font-weight: 400;
	font-size: 14px;
	line-height: 16.8px;
	color: #FFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 37px;
	padding: 0 16px;
	background: #C532A6;
	border-radius: 56px;
}
.con-4 .con-interview ul{
	width: 1240px;
	border-radius: 300px;
	display: inline-block;
	font-size: 0;
	margin: 0 -20px;
	border: 1px solid #3F3F3F;
	padding: 16px 0;
}
.con-4 .con-interview ul li{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 30px;
	width: 390px;
	height: 390px;
	border-radius: 50%;
	background: #121212;
	margin: 0 10px;
}
.con-4 .con-interview ul li strong{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 14px;
	line-height: 19.6px;
	color: #787878;
}
.con-4 .con-interview ul li span{
	font-family: Pretendard;
	font-weight: 400;
	font-size: 18px;
	line-height: 25.2px;
	text-align: center;
	color: #EEEEEE;
}
.con-4 .con-interview ul li span b{
	color: #E84CC7;
}



	/**************************
        con-5
    ***************************/
.con-5{}
.con-5 .con-inner{
	height: 1024px;
	background: #FFF;
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.con-5 .con-inner > div {
	flex: 1 0 0;
	width: 50%;
	position: relative;
}
.con-5 .con-inner > div.con-right{
	min-width: 700px;
}
.con-5 .con-inner .con-left{}
.con-5 .con-inner .con-left .winix-5-bg{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.con-5 .con-inner .con-left .con-5-logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	stroke-width: 2;
	transition: stroke-dashoffset 1s ease-in-out, fill-opacity 0.5s ease-in-out;
}
.con-5 .con-inner .con-right{
	background: #181818;
}
.con-5 .con-inner .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-inner .con-right h6{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #C532A6;
}
.con-5 .con-inner .con-right ul{
	width: 640px;
	display: flex;
	flex-direction: column;
	gap: 50px;
}
.con-5 .con-inner .con-right ul li{
	display: flex;
	align-items: center;
	border: 1px solid #616161;
	background: #242424;
	border-radius: 16px;
	padding: 24px 0;
	position: relative;
}
.con-5 .con-inner .con-right ul li strong{
	flex-shrink: 0;
	width: 122px;
	padding: 0 44px;
}
.con-5 .con-inner .con-right ul li strong small{
	display: inline-flex;
	width: 26px;
	height: 26px;
	background: #C532A6;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-family: Pretendard;
	font-weight: 400;
	font-size: 14px;
	line-height: 16.8px;
	color: #FFF;
}
.con-5 .con-inner .con-right ul li span{
	flex: 1 0 0;
	max-width: 400px;
	display: block;
	text-align: center;
	font-family: Pretendard;
	font-weight: 400;
	font-size: 18px;
	line-height: 25.2px;
	text-align: center;
	color: #EEE;
}
.con-5 .con-inner .con-right ul li:last-child{
	border: 1px solid #FFF;
	background: #FFF;
}
.con-5 .con-inner .con-right ul li:last-child span{
	max-width: 100%;
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
	color: #121212;
}
.con-5 .con-inner .con-right ul li:last-child span b{
	font-weight: 600;
	color: #C532A6;
}
.con-5 .con-inner .con-right ul li:not(:last-child)::after{
	content: "";
	display: inline-block;
	width: 8px;
	height: 44px;
	background: url("../assets/img_con5_arrow.png") no-repeat center / 100%;
	position: absolute;
	bottom: -44px;
	left: calc(50% -  8px);
	
}


/**************************
	con-6
***************************/
.con-6{}
.con-6 .con-inner{
	padding: 154px 0 170px;
}
.con-6 .con-inner .con-innerWidth{
	max-width: 1480px;
}
.con-6 .con-title span {
	padding: 0 0 30px;
}
.con-6 .text-content {
	color: #787878;
	padding: 16px 0 0;
}
.con-6 .con-content{
	display: grid;
	grid-template-columns: 440px 440px 767px;
	align-items: start;
	gap: 60px;
	max-width: 1480px;
	width: 100%;
	margin: 0 auto;
	padding: 100px 40px;
	overflow: visible;
}
.con-6 .con-content > div{
	background: #202020 url('../assets/img_con6_bg.png') no-repeat center / cover;
	min-height: 472px;
	box-sizing: border-box;
	border-radius: 16px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.con-6 .con-content > div:nth-child(1){

}
.con-6 .con-content > div:nth-child(2){

}
.con-6 .con-content > div:nth-child(3) {
	position: relative;
}
.con-6 .con-content > div:nth-child(3)::after{
	content: "";
	display: inline-block;
	width: 353px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: url('../assets/img_con6_shadow.png') no-repeat center / 100% 100%;
}
.con-6 .con-content > div span{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 16px;
	line-height: 140%;
	text-align: center;
	color: #787878;
}
.con-6 .con-content > div h4{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 24px;
	line-height: 140%;
	color: #FFF;
	padding: 140px 0 0;
}
.con-6 .con-content > div h4 b{
	color: #E84CC7;
}
.con-6 .con-content > div ul{
	padding: 74px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.con-6 .con-content > div ul li{
	display: flex;
	height: 38px;
	padding: 0 16px;
	align-items: center;
	justify-content: center;
	border: 1px solid #686868;
	border-radius: 77px;
	font-family: Pretendard;
	font-weight: 500;
	font-size: 14px;
	line-height: 140%;
	text-align: center;
	color: #FFF;
}
.con-6 .con-content > div .con-img{
	padding: 62px 0 0;
}
.con-6 .con-content > div .con-img > div{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 0 0;
}
.con-6 .con-content > div .con-img > div img{
	display: inline-block;
	object-fit: cover;
	width: 243px;
	height: 135px;
	border-radius: 6px;
}
/**************************
	con-7
***************************/
.con-7{}
.con-7 .con-inner{
	padding: 317px 60px;
	background: url("../assets/img_con7_1.png") no-repeat top center / 100% 1280px;
}
.con-7 .con-project{
	width: 100%;
	border-radius: 34px;
	background: #FFF;
	padding: 128px 40px;
}
.con-7 .con-project-inner{
	display: block;
	max-width: 1290px;
	width: 100%;
	margin: 0 auto;
}
.con-7 .con-info{
	text-align: center;
}
.con-7 .con-strategy{
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 20px;
	padding: 120px 0 160px;
}
.con-7 .con-strategy > div{
	flex: 1 0 0;
	width: 390px;
	height: 390px;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0px 1.76px 60px 0px #0000000F;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.con-7 .con-design-concept{
	text-align: center;
}
.con-7 .con-design-concept h4{
	font-family: Pretendard;
	font-weight: 600;
	font-size: 24px;
	line-height: 33.6px;
	color: #C532A6;
}
.con-7 .con-design-concept > div{
	padding: 42px 0;
}
.con-7 .con-design-concept > div h5{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 50px;
	line-height: 70px;
	text-align: center;
	color: #000;
	padding: 0 0 12px;
}
.con-7 .con-design-concept > div p{
	font-family: Pretendard;
	font-weight: 400;
	font-size: 16px;
	line-height: 25.6px;
	text-align: center;
	color: #787878;
}
.con-7 .con-strategy > div{}
.con-7 .con-strategy > div strong{
	display: inline-flex;
	padding: 10px 16px;
	align-items: center;
	gap: 4px;
	font-family: Pretendard;
	font-weight: 600;
	font-size: 14px;
	line-height: 19.6px;
	color: #FFF;
	background: #C532A6;
	border-radius: 56px;
}
.con-7 .con-strategy > div strong b{
	display: inline-block;
	width: 20px;
	text-align: center;
	height: 20px;
	border-radius: 50%;
	background: #FFF;
	font-family: Pretendard;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: #C532A6;
}
.con-7 .con-strategy > div h6{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	color: #121212;
	padding: 40px 0 0;
}
.con-7 .con-strategy > div h6 b{
	color: #C532A6;

}




/**************************
	con-8
***************************/
.con-8{}
.con-8 .con-inner{
	padding: 0 40px;
}
.con-8 .con-inner > h3{
	font-family: Pretendard;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #C532A6;
	padding: 0 14px 20px;
}
.con-8 .con-element{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.con-8 .con-element > div{
	width: 33.333%;
}
.con-8 .con-element > div img{}





/**************************
	con-9
***************************/

.con-9 .con-component{
	width: 1920px;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 460px 496px 1fr;
	position: relative;
}
.con-9 .con-component::after{
	content: "";
	display: inline-block;
	width: 100%;
	height: 664px;
	background: url("../assets/img_con9_bg.png") no-repeat center / cover;
	position: absolute;
	bottom: 0;
	left: 0;
}
.con-9 .con-column{

}
.con-9 .con-2nd {
	display: grid;
	grid-template-columns: 500px 1fr;
}
.con-9 .con-img {
	display: inline-block;
	width: 100%;
}



/**************************
	con-10
***************************/
.con-10{}
.con-10 .con-inner{}
.con-10 .con-title{
	padding: 178px 0 80px;
	text-align: center;
}
.con-10 .con-title span{padding: 0 0 30px;}
.con-10 .con-title h4{}
.con-10 .con-title p{}

.con-10 .img_con1{
	width: 100%;
	object-position: center;
	height: 348px;
	display: inline-block;
	object-fit: cover;
}
.con-10 .img_con2{
	margin-top: -304px;
	height: 727px;
	width: 100%;
	object-position: center;
	display: inline-block;
	object-fit: contain;
}



/**************************
	con-11
***************************/
.con-11{}
.con-11 .con-inner{
	background: #121212;
	margin-top: -326px;
	padding: 508px 0 0;
}
.con-11 .con-11-1{
	max-width: 1448px;
	min-width: 1200px;
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	margin: -462px auto 268px;
}
.con-11 .con-11-1 > div{
	display: inline-block;
}
.con-11 .con-11-1 > div:nth-child(2){
	padding: 380px 0 36px;
}
.con-11 .con-11-1 > div:nth-child(3){
	position: absolute;
	bottom: 0;
	left: 32px;
}
.con-11 .con-11-1 > div:nth-child(4){
	position: absolute;
	bottom: 0;
	left: 300px;
}
.con-11 .img_con1{
	width: 100%;
	object-position: center;
	display: inline-block;
	object-fit: contain;
	height: 671px;
}
.con-11 .img_con2{
	width: 723px;
}
.con-11 .img_con3{
	width: 720px;
}
.con-11 .img_con4{
	width: 260px;
}

.con-11 .con-11-2{
	max-width: 1448px;
	min-width: 1200px;
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 100px;
	position: relative;
	margin: 0 auto;
	z-index: 12;
}


.con-11 .img_con5{
	width: 260px;
}


.con-11 .con-11-3{
	display: inline-block;
	width: 1920px;
	height: 980px;
	position: relative;
	margin-top: -240px;
	z-index: 10;
}
.con-11 .con-11-3 > div{
	position: absolute;
	top: 0;
}
.con-11 .con-11-3 > div:nth-child(1){
	top: 18px;
	left: 0;
}
.con-11 .con-11-3 > div:nth-child(2){
	right: 724px;
}
.con-11 .con-11-3 > div:nth-child(3){
	top: 18px;
	right: 254px;
}
.con-11 .con-11-3 > div:nth-child(4){
	right: 0;
}
.con-11 .img_con6{
	 width: 919px;
}
.con-11 .img_con7{
	width: 380px;
}
.con-11 .img_con8{
	width: 466px;
}
.con-11 .img_con9{
	width: 430px;
}
.con-11 .img_con10{
	width: 232px;
}
.con-11 .con-text{

}
.con-11 .con-text h5{
	font-weight: 600;
	font-size: 30px;
	line-height: 130%;
	color: #FFF;
	padding: 12px 0 16px;
}
.con-11 .con-text h6{
	font-weight: 400;
	font-size: 16px;
	line-height: 160%;
	color: #787878;
}


.wGrid{
	position: relative;
}
/**************************
	con-13
***************************/
.con-13{

}
.con-13 .con-inner{
	background: #F9F9F9;
	padding: 200px 0 500px;
}
.con-13 .con-title{
	width: 868px;
	margin: 0 auto;
	padding: 0 0 76px;
}
.con-13 .con-img{
	position: relative;
	height: 1381px;
	width: 912px;
	margin: 0 auto;
}
.con-13 .con-img .img_con1{
	width: 485px;
	position: absolute;
	top: 0;
	left: -20px;
	transform: translateX(-100%);
}
.con-13 .con-img .img_con2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.con-13 .con-img .img_con3{
	width: 489px;
	position: absolute;
	top: 0;
	right: -20px;
	transform: translateX(100%);
}
.con-13 .con-img .img_con4{
	width: 386px;
	position: absolute;
	bottom: -94px;
	left: 14px;
	transform: translateX(-100%);
}
.con-13 .con-img .img_con5{
	width: 386px;
	position: absolute;
	bottom: 224px;
	right: 80px;
	transform: translate(50%, 100%);
}


/**************************
	con-14
***************************/
.con-14{

}
.con-14 .con-inner{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
	padding: 210px 0 338px;
}
.con-14 .con-title .text-title{
	font-size: 40px;
}
.con-14 .con-img1{
	width: 660px;
}
.con-14 .con-img2{
	width: 660px;
}


/**************************
	con-15
***************************/
.con-15{
	background: #F9F9F9 url('/portfolio/winix/pc/assets/img_con15_bg.png') no-repeat center / 100% 428px;
}
.con-15 .con-inner{
	max-width: 1025px;
	width: 100%;
	margin: 0 auto;
	padding: 204px 0;
	background: #F9F9F9;
}
.con-15 .con-title{
	text-align: center;
	padding: 0 0 66px;
}

.con-15 .con-title h4{
	padding: 14px 0 16px;
}
.con-15 .con-img {
	position: relative;
	height: 859px;
}

.con-15 .img_con1 {
	position: sticky;
	top: 120px;
	z-index: 9;
}

.con-15 .img_con2 {
	position: absolute;
	top: 0;
	left: 0;
}



/**************************
	con-16
***************************/
.con-16{}
.con-16 .con-inner{
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 130px 0 0;
}

.con-16 .con-inner::after{
	content: "";
	display: inline-block;
	width: 100%;
	height: 1963px;
	background: url('/portfolio/winix/pc/assets/img_con16_bg.png') no-repeat bottom center / 100%;
	position: absolute;
	left: 0;
	bottom: -791px;
	z-index: 9;
}
.con-16 .con-list{
	display: grid;
	grid-template-columns: 1fr 560px 560px 560px 1fr;
}
.con-16 .con-list ul{
}
.con-16 .con-list ul:nth-child(1){}
.con-16 .con-list ul:nth-child(2){margin-top: 135px;}
.con-16 .con-list ul:nth-child(3){margin-top: 209px;}
.con-16 .con-list ul:nth-child(4){margin-top: 27px;}
.con-16 .con-list ul:nth-child(5){margin-top: 190px;}
.con-16 .con-list ul li{
	display: inline-block;
	width: 100%;
}





/**************************
	con-17
***************************/
.con-17{
	position: relative;
	z-index: 99;
}
.con-17 .con-inner{
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	padding: 0 60px;
}

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

.con-footer{
	background: #FFF;
	position: relative;
	z-index: 99;
}
.con-footer .con-member{
	width: 100%;
	padding: 64px 112px 102px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	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;
}