@charset "utf-8";
@import url("portfolio_com.css");

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Cera Pro';
    src: local('Cera Pro Regular Italic'), local('Cera-Pro-Regular-Italic'),
        url('./font/CeraPro-RegularItalic.woff2') format('woff2'),
        url('./font/CeraPro-RegularItalic.woff') format('woff'),
        url('./font/CeraPro-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }


/* s : ��Ÿ�ý��� */

.work_cont .format-01 .sec-conts ul.intro li .conts a {color: inherit; }

.portfolio-07 {
	--neo: 'anumSquareNeo';
	--neo-bold:'NanumSquareNeoBold';
	--neo-xbold:'NanumSquareNeoExtraBold';

	--green:#08483C;

	line-height: 1.5;
	color: #08483C;

	--gap-240:240px;
}

@media screen and (max-width:1280px) {
	.portfolio-07 {
		--gap-240:120px;
	}
}
@media screen and (max-width:768px) {
	.portfolio-07 {
		--gap-240:80px;
	}
}

.rb-section {background:#F6F5EF !important;}

.portfolio-07 .mt40 {margin-top: var(--gap-40);}
.portfolio-07 .pos-r {position: relative;}

.portfolio-07 .ani-trigger {position: absolute;}
.portfolio-07 .ani-init {opacity: 0; transform: translateY(50%); transition-duration: 1s;}
.portfolio-07 .delay1 {transition-delay: 0.3s;}
.portfolio-07 .delay2 {transition-delay: 0.5s;}
.portfolio-07 .delay3 {transition-delay: 0.7s;}

.portfolio-07 .img-box img {max-width: 100%;}
.portfolio-07 .sec-conts .inner {max-width: 1440px; width: 95%; margin: auto;}
.portfolio-07 .sec-conts .head-box {color: var(--green); margin-bottom: var(--gap-80);}
.portfolio-07 .sec-conts .head-box .sub {font-family: var(--neo-xbold); font-size: var(--font-20); margin-bottom: var(--gap-40);}
.portfolio-07 .sec-conts .head-box .tit {font-family: var(--neo-xbold); font-size: 50px;}
.portfolio-07 .sec-conts .head-box p {font-family: var(--neo-bold); font-size: var(--font-18); }

.portfolio-07 .pink {background: #FFDECC; }
.portfolio-07 .brow {background: #4C2A00; }
.portfolio-07 .yell {background: #F8E6C3; }
.portfolio-07 .gree {background: #E6E9BF; }
.portfolio-07 .dgre {background: #08483C; }
.portfolio-07 .white {background: #FFF; }
.portfolio-07 .gray {background: #F6F5EF; }

@media screen and (max-width:1260px) {
	.portfolio-07 .sec-conts .head-box .tit {font-size: 40px;}
}
@media screen and (max-width:768px){
	.portfolio-07 .sec-conts .inner {width: 100%;}
	.portfolio-07 .sec-conts .head-box {margin-bottom: 60px;}
	.portfolio-07 .sec-conts .head-box .tit {font-size: 28px;}
	.portfolio-07 .sec-conts .head-box .sub {margin-bottom: 18px; font-size: 16px;}
}
@media screen and (max-width:480px){
	.portfolio-07 .sec-conts .head-box {margin-bottom: 40px;}
	.portfolio-07 .sec-conts .head-box .tit {font-size: 20px;}
	
}

@keyframes objAni1 {
	0% {transform: translate3d(0, 0, 0);}
	50% {transform: translate3d(-5px, 15px, 0);}
	0% {transform: translate3d(0, 0, 0);}
}
@keyframes objAni2 {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes objAni3 {
	0% {transform: translate3d(0, 0, 0);}
	50% {transform: translate3d(5px, -15px, 0);}
	0% {transform: translate3d(0, 0, 0);}
}
@keyframes objAni4 {
	0% {transform: translate3d(0, 0, 0);}
	50% {transform: translate3d(-5px, -15px, 0);}
	0% {transform: translate3d(0, 0, 0);}
}

.portfolio-07 .sec-1 {color: #000;}

.portfolio-07 .sec-2 {background-color:#F6F5EF; padding: var(--gap-40); padding-bottom: var(--gap-240);}
.portfolio-07 .sec-2 .title-box {border-radius: 24px; overflow: hidden; position: relative; }
.portfolio-07 .sec-2 .title-box .bg-box {font-size: 0;}
.portfolio-07 .sec-2 .title-box .bg-box img {width: 100%;}
.portfolio-07 .sec-2 .title-box .txt-box {position: absolute; left: 0; top: 0; padding: 120px 140px; color: #fff; font-size: calc(var(--font-30)*2); font-weight: 700; font-family: var(--neo-bold); text-align: left;}

.portfolio-07 .sec-2 .cont-box1 {margin-top: var(--gap-240); position: relative;}
.portfolio-07 .sec-2 .cont-box1 .body-box .text-box {padding: 0 var(--gap-80); width: 50%; margin-left: auto; text-align: left;}
.portfolio-07 .sec-2 .cont-box1 .body-box p {color: var(--green); font-family: var(--neo-bold); font-size: var(--font-18); line-height: 1.6;} 
.portfolio-07 .sec-2 .cont-box1 .body-box p + p {margin-top: var(--gap-40);}
.portfolio-07 .sec-2 .cont-box1 .img-box {margin-top: var(--gap-80); text-align: center; font-size: 0;}

.portfolio-07 .sec-2 .cont-box1 .sparkle span {position: absolute; font-size: 0; }
.portfolio-07 .sec-2 .cont-box1 .sparkle span.icon1 {left: 10%; top: 21%; animation: objAni2 10s ease-in-out infinite both;}
.portfolio-07 .sec-2 .cont-box1 .sparkle span.icon2 {left: 15%; top: 89%; animation: objAni4 8s ease-in-out infinite both;}
.portfolio-07 .sec-2 .cont-box1 .sparkle span.icon3 {left: 19%; top: 37%; animation: objAni1 5s ease-in-out infinite both;}
.portfolio-07 .sec-2 .cont-box1 .sparkle span.icon4 {top: 95%; left: 85%; animation: objAni3 5s ease-in-out infinite both;}
.portfolio-07 .sec-2 .cont-box1 .sparkle span.icon5 {left: 2%; top: 60%; animation: objAni3 5s ease-in-out infinite both;}
.portfolio-07 .sec-2 .cont-box1 .sparkle span.icon6 {left: 92%; top: 50%; animation: objAni2 12s linear infinite both;}

.portfolio-07 .sec-2 .cont-box2 {margin-top: calc(var(--gap-240)*1.25); padding: 0 var(--gap-80);}
.portfolio-07 .sec-2 .cont-box2 .head-box {text-align: left;}
.portfolio-07 .sec-2 .cont-box2 .body-box {display: flex; gap: 20px; flex-wrap:wrap;}
.portfolio-07 .sec-2 .cont-box2 .body-box .item {width: calc(50% - 10px); border-radius: var(--gap-32); overflow: hidden; padding: 30px;} 
.portfolio-07 .sec-2 .cont-box2 .body-box .item .icon-box {background: #F9F6EE; border-radius: 50%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-left: auto;}
.portfolio-07 .sec-2 .cont-box2 .body-box .item .txt-box {padding: 20px; margin-top: var(--gap-16); color: var(--green); text-align: left;}
.portfolio-07 .sec-2 .cont-box2 .body-box .item .txt-box .tit {font-family: var(--neo-xbold); font-size: var(--font-30); ;}
.portfolio-07 .sec-2 .cont-box2 .body-box .item .txt-box .txt {font-family: var(--neo-bold); font-size: var(--font-20); margin-top: var(--gap-32); }

.portfolio-07 .sec-2 .cont-box1:has(.ani-trigger.aos-animate) .ani-init {opacity: 1; transform: translateY(0);}
.portfolio-07 .sec-2 .body-box:has(.ani-trigger.aos-animate) .ani-init {opacity: 1; transform: translateY(0);}

@media screen and (max-width:1480px) {
	.portfolio-07 .sec-2 .title-box .txt-box {padding: 60px 80px;}
	.portfolio-07 .sec-2 .cont-box1 .body-box .text-box {padding: 0 var(--gap-40);}
}
@media screen and (max-width:1260px){
	.portfolio-07 .sec-2 .title-box .txt-box {font-size: 40px;}
	.portfolio-07 .sec-2 .cont-box1 .body-box .text-box {padding: 0;}
	.portfolio-07 .sec-2 .cont-box2 {padding: 0;}
	.portfolio-07 .sec-2 .cont-box2 .body-box .item .icon-box {width: 60px; height: 60px;}
	.portfolio-07 .sec-2 .cont-box2 .body-box .item .txt-box {padding: 8px;}
}
@media screen and (max-width:768px) {
	.portfolio-07 .sec-2 .title-box .txt-box {padding: 40px; font-size: 32px;}
	.portfolio-07 .sec-2 .cont-box1 .body-box .text-box {width: 70%;}

	.portfolio-07 .sec-2 .cont-box2 .body-box .item {padding: 24px;}
	.portfolio-07 .sec-2 .cont-box2 .body-box .item .icon-box {width: 42px; height: 42px;}
	.portfolio-07 .sec-2 .cont-box2 .body-box .item .icon-box img {width: 60%;}
	.portfolio-07 .sec-2 .cont-box2 .body-box .item .txt-box .tit {font-size: 20px;}
	.portfolio-07 .sec-2 .cont-box2 .body-box .item .txt-box .txt {font-size: 16px;}
	.portfolio-07 .sec-2 .cont-box2 .body-box .item .txt-box .txt br {display: none;}
}
@media screen and (max-width:480px){
	.portfolio-07 .sec-2 .title-box .txt-box {padding: 24px; font-size: 18px;}
	.portfolio-07 .sec-2 .cont-box1 .body-box .text-box {width: 95%; margin: auto; position: relative; z-index: 1;}

	.portfolio-07 .sec-2 .cont-box1 .sparkle {opacity: 0.3;}

	.portfolio-07 .sec-2 .cont-box2 .body-box .item {width: 100%;}
}


.portfolio-07 .sec-3 {padding: var(--gap-40); background: #fff;}
.portfolio-07 .sec-3 .top {display: flex; gap: var(--gap-40); margin-bottom: var(--gap-240);}
.portfolio-07 .sec-3 .top .item {width: 50%; border-radius: var(--gap-16); overflow: hidden; font-size: 0;}

.portfolio-07 .sec-3 .head {color: var(--green); text-align: left; margin-bottom: calc(var(--gap-240)*0.8);}
.portfolio-07 .sec-3 .head .title {font-family: "Poppins", sans-serif; font-weight: 500; font-size: 160px; line-height: 1.2; }
.portfolio-07 .sec-3 .head p {line-height: 1.6; width: 50%; margin-left: auto; margin-top: 80px; padding: 0 var(--gap-80); font-size: var(--font-20);}

.portfolio-07 .sec-3 .item-box {display: flex; gap: 30px; }
.portfolio-07 .sec-3 .item-box .item {border-radius: var(--gap-40); overflow: hidden; background: #ECEED9; flex: 1 1 0;}
.portfolio-07 .sec-3 .item-box .item .img-box {border-radius: var(--gap-40); overflow: hidden; font-size: 0;}
.portfolio-07 .sec-3 .item-box .item .txt-box {padding: 50px 40px 64px; color: var(--green); text-align: left;}
.portfolio-07 .sec-3 .item-box .item .txt-box .tit {font-size: var(--font-30); font-family: var(--neo-xbold); margin-bottom: 1em;}
.portfolio-07 .sec-3 .item-box .item .txt-box .txt {font-size: var(--font-18); font-family: var(--neo-bold); }

.portfolio-07 .sec-3 .head:has(.ani-trigger.aos-animate) .ani-init {opacity: 1; transform: translateY(0);}

@media screen and (max-width:1440px){
	.portfolio-07 .sec-3 .item-box .item .txt-box .txt br {display: none;}
}
@media screen and (max-width:1280px){
	.portfolio-07 .sec-3 .head .title {font-size: 100px;}
	.portfolio-07 .sec-3 .head p {padding: 0;}

	.portfolio-07 .sec-3 .item-box {flex-direction: column; align-items: center;}
	.portfolio-07 .sec-3 .item-box .item {flex: unset; max-width: 460px; transition-delay: 0s !important;}
	
}
@media screen and (max-width:768px){
	.portfolio-07 .sec-3 .head .title {font-size: 60px;}
	.portfolio-07 .sec-3 .head p {width: 70%;}
}
@media screen and (max-width:480px){
	.portfolio-07 .sec-3 .head .title {font-size: 46px;}
	.portfolio-07 .sec-3 .head p {width: 95%; margin: 40px auto 0;}
}


.portfolio-07 .sec-4 {padding: var(--gap-40); padding-top: calc(var(--gap-240) + var(--gap-40)); background: #fff;}
.portfolio-07 .sec-4 .top {border-radius: var(--gap-40); overflow: hidden; font-size: 0;}
.portfolio-07 .sec-4 .round {border-radius: var(--gap-40); overflow: hidden;}

.portfolio-07 .sec-4 .cont-box {margin: var(--gap-40) 0; display: flex; gap: var(--gap-40);}
.portfolio-07 .sec-4 .cont-box > div {width: 50%;}

.portfolio-07 .sec-4  .cont1 .left { padding: var(--gap-40); height: 640px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.portfolio-07 .sec-4  .cont1 .left .txt1 {font-family: var(--neo); font-size: var(--font-16);}
.portfolio-07 .sec-4  .cont1 .left .txt1 span {font-size: var(--font-18); font-family: var(--neo-bold); }
.portfolio-07 .sec-4  .cont1 .left .txt2 {font-family: var(--neo-xbold); font-size: 160px;}
.portfolio-07 .sec-4  .cont1 .right {display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); height: fit-content;}
.portfolio-07 .sec-4  .cont1 .right .item {border-radius: var(--gap-16); overflow: hidden; padding: 20px; height: 200px; text-align: left;}
.portfolio-07 .sec-4  .cont1 .right .item .tit {color: #333; background: #fff; border-radius: 8px; padding: 10px; line-height: 1; font-size: var(--font-16); font-family: var(--neo-bold); display: inline-block;  }

.portfolio-07 .sec-4  .cont2 .left {display: flex; flex-direction: column;}
.portfolio-07 .sec-4  .cont2 .left .icon-box {background: radial-gradient(#002720, #08483C); display: flex; justify-content: space-between; align-items: center; gap: 36px; padding: 0 10%; margin-bottom: var(--gap-40); height: 100%;}
.portfolio-07 .sec-4  .cont2 .left .illust {flex-shrink: 0;}

@media screen and (max-width:1440px) {
	.portfolio-07 .sec-4 .cont1 .left {height: 480px;}
	.portfolio-07 .sec-4 .cont1 .left .txt2 {font-size: 100px;}
	.portfolio-07 .sec-4 .cont1 .right .item {height: 140px;}
}
@media screen and (max-width:1260px){
	.portfolio-07 .sec-4 .cont-box {flex-direction: column;}
	.portfolio-07 .sec-4 .cont-box > div {width: 100%;}
	.portfolio-07 .sec-4 .cont2 .left .icon-box {height: 140px;}
}
@media screen and (max-width:768px){
	.portfolio-07 .sec-4 .cont1 .left {height: 320px;}
	.portfolio-07 .sec-4 .cont1 .left .txt2 {font-size: 60px;}
}
@media screen and (max-width:768px){
	.portfolio-07 .sec-4 .cont1 .left {height: 280px;}
	.portfolio-07 .sec-4 .cont1 .right {grid-template-columns: repeat(2, 1fr);}

	.portfolio-07 .sec-4 .cont2 .left .icon-box {gap: 16px; padding: 0 8%;}
}

.portfolio-07 .sec-5 {padding: var(--gap-240) var(--gap-40) var(--gap-40);}
.portfolio-07 .sec-5 .head-box {display: flex; margin-bottom: calc(var(--gap-240)*0.5); justify-content: space-between; }
.portfolio-07 .sec-5 .head-box .sub {font-family: 'NanumSquareNeoHeavy'; margin-bottom: 0; padding-left: var(--gap-80);}
.portfolio-07 .sec-5 .head-box p {width: 50%; text-align: left;}
.portfolio-07 .sec-5 .btm {display: flex; gap: var(--gap-40); margin-top: 100px;}
.portfolio-07 .sec-5 .btm > div {border-radius: 16px; overflow: hidden; font-size: 0; width: 50%;}

.portfolio-07 .sec-5 .btm .box1 {display: flex; align-items: center; justify-content: center;}
.portfolio-07 .sec-5 .btm .box2 {display: flex; align-items: center; gap: var(--gap-40); justify-content: space-between; padding: 100px 80px; }

@media screen and (max-width:1024px){
	.portfolio-07 .sec-5 .head-box {flex-direction: column; align-items: start;}
	.portfolio-07 .sec-5 .head-box .sub {padding-left: 5%; margin-bottom: var(--gap-40);}
	.portfolio-07 .sec-5 .head-box p {width: 95%; margin-left: auto;}
	.portfolio-07 .sec-5 .btm {flex-direction: column;}
	.portfolio-07 .sec-5 .btm > div {padding: var(--gap-40); width: 100%;}
}
@media screen and (max-width:768px){
	.portfolio-07 .sec-5 .btm .box2 {padding: 60px 40px;}
}


.portfolio-07 .sec-6 {padding: var(--gap-240) var(--gap-40) calc(var(--gap-40) * 5); overflow: hidden; background-color: var(--green); background-image: url(/img/portfolio/007/sec6_bg.jpg); background-position: center; background-size: cover; }

.portfolio-07 .sec-6 .head-box {padding: 140px 90px; color: #E6E9BF; margin-bottom: 0;}
.portfolio-07 .sec-6 .head-box .sub {font-family: 'NanumSquareNeoHeavy';}

.portfolio-07 .sec-6 .cont1 .mo {display: none; }
.portfolio-07 .sec-6 .cont1 .inner {display: flex;}
.portfolio-07 .sec-6 .cont1 .head-box {text-align: left; padding-left: 150px; width: 100%;}
.portfolio-07 .sec-6 .cont1 .inner > div {width: 50%;}
.portfolio-07 .sec-6 .cont1 .right {display: flex; flex-direction: column; align-items: flex-end; }
.portfolio-07 .sec-6 .cont1 span {display: inline-block; max-width: 780px; width: 110%;}
.portfolio-07 .sec-6 .cont2 {font-size: 120px; color: #E6E9BF; line-height: 1; text-align: center; display: flex; justify-content: center; gap: 0.2em; opacity: 0.3; margin: calc(var(--gap-240)*0.8) 0 calc(var(--gap-240)*0.5);}
.portfolio-07 .sec-6 .cont2 span {display: inline-block; width: fit-content; white-space: nowrap; flex-shrink: 0;}
.portfolio-07 .sec-6 .cont2 span.line {/*-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #E6E9BF; */color: var(--green); text-shadow: -1px 0px #E6E9BF, 0px 1px #E6E9BF, 1px 0px #E6E9BF, 0px -1px #E6E9BF; }
.portfolio-07 .sec-6 .cont3 .mo {display: none;}
.portfolio-07 .sec-6 .cont3 .inner {display: flex; gap: var(--gap-40);}
.portfolio-07 .sec-6 .cont3 .inner > div {width: 50%;}
.portfolio-07 .sec-6 .cont3 .head-box {text-align: right;}
.portfolio-07 .sec-6 .cont4 {display: flex; gap: var(--gap-40); margin-top: calc(var(--gap-240) + var(--gap-40));}
.portfolio-07 .sec-6 .cont4 > div {border-radius: var(--gap-40); overflow: hidden; width: 50%; position:relative;}
.portfolio-07 .sec-6 .cont4 .img-box {aspect-ratio:1;}
.portfolio-07 .sec-6 .cont4 .img-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}

@media screen and (max-width:1260px){
	.portfolio-07 .sec-6 .head-box {padding: 60px 40px;}
	.portfolio-07 .sec-6 .head-box p br {display: none;}
	.portfolio-07 .sec-6 .cont1 .head-box {padding-left: 80px;}
}
@media screen and (max-width:768px){
	.portfolio-07 .sec-6 .cont1 .head-box {display: none;}
	.portfolio-07 .sec-6 .cont1 .mo.head-box {display: block; padding: 40px 2.5%;}
	.portfolio-07 .sec-6 .cont1 .left span {margin-top: 20%;}

	.portfolio-07 .sec-6 .cont2 {font-size: 60px;}

	.portfolio-07 .sec-6 .cont3 .head-box {display: none;}
	.portfolio-07 .sec-6 .cont3 .mo.head-box {display: block; padding: 40px 2.5%; text-align: left;}
	.portfolio-07 .sec-6 .cont3 .right .img-box {margin-top: 20%;}
}













.portfolio-07 .sec-7 {background:#F1F6FB;}
.portfolio-07 .sec-7 .img-slide {width:100%; margin-top:calc(var(--gap-80) * 2);}
.portfolio-07 .sec-7 .img-slide .img-slide-wrap .img-list li {width:auto;}
.portfolio-07 .sec-7 .img-slide .img-slide-wrap .img-list li .img-box {width:1120px;}
.portfolio-07 .sec-7 .img-slide .img-slide-wrap .img-list li .img-box span {display:block; width:100%; height:0; padding-bottom:calc(640 / 1120 * 100%); position:relative; overflow:hidden;}
.portfolio-07 .sec-7 .img-slide .img-slide-wrap .img-list li .img-box span img {max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.portfolio-07 .sec-7 .swiper-wrapper{transition-timing-function: linear;}

@media screen and (max-width:1280px) {
	.portfolio-07 .sec-7 .img-slide .img-slide-wrap .img-list li .img-box {width:800px;}
}

@media screen and (max-width:768px) {
	.portfolio-07 .sec-7 .br {display:inline-block;}
	.portfolio-07 .sec-7 .img-slide .img-slide-wrap .img-list li .img-box {width:550px;}
}

@media screen and (max-width:480px) {
	.portfolio-07 .sec-7 .img-slide .img-slide-wrap .img-list li .img-box {width:320px;}
}


/* e : ��Ÿ�ý��� */