@import url('https://webfontworld.github.io/Poppins/Poppins.css');
@import url('https://webfontworld.github.io/pretendard/Pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;700&display=swap');

.header {z-index:11;left:0;right:0;padding:29px 36px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;flex-direction:row;} 
.header .logo {width:131px;height:auto;display:inline-block;transition:width 400ms, height 400ms;}
.header .nav_btn.open span {display:block;width:32px;height:3px;margin:8px;background:#ffffff;transition:width 400ms;}
.header .nav_btn.open span:nth-child(2) {width:27px;}
.header .nav_btn.open:hover span:nth-child(2) {width:32px;}
.header .nav_btn.close {font-size:40px;color:#ffffff;}

.header.main-top-area {position:fixed;top:0;background:rgba(0,0,0,0);transition:all 400ms;}
.header.main-top-area.dark {background:rgba(0,0,0,0.2);}
.header.main-top-area.hide {transform:translateY(-100%)}
.header.main-menu-area {position:absolute;top:-4px;}

.nav_slide {position:fixed;z-index:1001;top:-0.052vw;left:0;right:0;height:0.052vw;background:#02132A;transition:height 500ms;transition-timing-function:ease-in-out;overflow:hidden;}
.nav_slide.open {height:calc(100vh + 0.052vw);}
.nav_slide nav {display:block;width:100%;height:100vh;text-align:center;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;flex-direction:column;}
.nav_slide nav ul li a {position:relative;margin:0.469vw 0;padding:0 1.042vw;font-size:4.166vw;font-weight:700;color:#ffffff;transform:scaleY(0.01);transition:all 600ms;transform-origin:center bottom;}
.nav_slide.open nav ul li a {transform:scaleY(1);}
.nav_slide nav ul li a:after {content:'';position:absolute;z-index:-1;top:50%;left:50%;width:1%;height:30%;transform:translate(-50%, -50%);background:#084C88;opacity:0;transition:all 400ms;}
.nav_slide nav ul li a:hover:after {width:100%;height:30%;opacity:1;}
.nav_slide nav ul li a:hover {transform:scale(1.1);}

.section.works {width:100%;background:#ffffff;}
.section.works .scene {position:relative;width:100%;padding:8vw 0 4vw;background:#ffffff;}
.section.works .work_slide .slide_nav {position:static;margin-top:1.2vw;}

.work_slide {margin:7.8vw 0 1.6vw 0;}
.work_slide .img_slide {padding-left:13.542vw;}
.work_slide .img_slide .item {display:block;}
.work_slide .img_slide .item > div {position:relative;width:33.333vw;height:33.333vw;color:#ffffff;background-repeat:no-repeat;background-size:100%;background-position:center;transition:all 400ms;
	display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;flex-direction:column;
	-webkit-mask: url(images/main/thumbnail_mask.png);
	-webkit-mask-size:140%;
	-webkit-mask-position:center;
	-webkit-mask-repeat:no-repeat;
	user-select:none;
}
.work_slide .img_slide .item > div:after {content:'';position:absolute;z-index:1;left:0;top:0;right:0;bottom:0;background:#1468B2;opacity:0;}
.work_slide .img_slide .item > div:hover,
.work_slide .img_slide .item > div.hover {background-size:128%;-webkit-mask-size:87%;}
.work_slide .img_slide .item > div:hover:after,
.work_slide .img_slide .item > div.hover:after {background:rgba(20,104,178,0.7);opacity:0.7;}
.work_slide .img_slide .item > div p {position:relative;z-index:2;padding-top:3.8vw;font-family:'Inter';font-size:2.083vw;font-weight:700;opacity:0;transition:opacity 400ms;}
.work_slide .img_slide .item > div span {position:relative;z-index:2;margin-top:1.25vw;padding:0.208vw 1.25vw;font-size:1.25vw;color:#ffffff;border:0.104vw solid #ffffff;border-radius:0.417vw;opacity:0;transition:opacity 400ms;}
.work_slide .img_slide .item > div:hover p, 
.work_slide .img_slide .item > div:hover span {opacity:1;}
.work_slide .img_slide .item > div.hover p, 
.work_slide .img_slide .item > div.hover span {opacity:1;}
.work_slide .txt_slide {position:relative !important;z-index:1;top:-4.844vw;overflow: hidden;white-space:nowrap;pointer-events:none;font-family:'Poppins','Pretendard', sans-serif;}
.work_slide .txt_slide .item {display:inline-block;font-size:10.417vw;padding-right:5.208vw;font-weight:700;color:#EFEFEF;user-select:none;}

.work_slide .slide_nav {position:relative;z-index:2;top:-11.094vw;padding-left:13.542vw;text-align:left;}
.work_slide .slide_nav .swiper-pagination-bullet {width:0.625vw;height:0.625vw;margin:0 0.24vw;border-radius:0.313vw;background:#CCCCCC;vertical-align:middle;opacity:1;transition:all 400ms;}
.work_slide .slide_nav .swiper-pagination-bullet.swiper-pagination-bullet-active {width:3.333vw;height:0.833vw;border-radius:0.417vw;background:#111111;}

footer {position:relative;z-index:2;padding:112px 0;background:#000000;color:#ffffff;}
footer .inner {width:1400px;margin:0 auto;}
footer .inner > div {display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:nowrap;flex-direction:row;}
footer .inner > div:first-child {padding-bottom:30px;border-bottom:1px solid #ffffff;line-height:1.5}
footer .inner > div:first-child p {font-size:28px;}
footer .inner > div .mailbtn {height:68px;margin-bottom:7px;padding:0 40px;line-height:69px;font-size:24px;color:#ffffff;border-radius:34px;background:linear-gradient(93.31deg, #1468B2 -22.66%, #A269FF 112.22%);}
footer .inner > div .mailbtn i {margin-right:8px}
footer .inner > div:last-child {padding-top:30px;line-height:1.9;font-size:16px;}
footer .inner > div:last-child p:last-child, 
footer .inner > div:last-child div:last-child {color:#999999;}

@media screen and (max-width:1500px) {
	footer {position:relative;z-index:2;padding:7.467vw 0;background:#000000;color:#ffffff;}
	footer .inner {width:93.333vw;margin:0 auto;}
	footer .inner > div {display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:nowrap;flex-direction:row;}
	footer .inner > div:first-child {padding-bottom:2vw;border-bottom:0.067vw solid #ffffff;line-height:1.5}
	footer .inner > div:first-child p {font-size:1.867vw;}
	footer .inner > div .mailbtn {height:4.533vw;margin-bottom:0.467vw;padding:0 2.667vw;line-height:4.6vw;font-size:1.6vw;color:#ffffff;border-radius:2.267vw;background:linear-gradient(93.31deg, #1468B2 -22.66%, #A269FF 112.22%);}
	footer .inner > div .mailbtn i {margin-right:0.533vw}
	footer .inner > div:last-child {padding-top:2vw;line-height:1.9;font-size:1.067vw;}
	footer .inner > div:last-child p:last-child, 
	footer .inner > div:last-child div:last-child {color:#999999;}
}

@media screen and (max-width:1280px) {
	.header {padding:20px 28px;}
	.header .logo {width:124px;}
}

@media screen and (max-width:1024px) {
	.header {padding:16px 24px;}
	.header .logo {width:118px;}
}

@media screen and (max-width:720px) {
	.header {padding:4.054vw 4.324vw;}
	.header .logo {width:21.622vw;height:auto;}
	.header .nav_btn.open span {width:6.486vw;height:0.541vw;margin:1.622vw;}
	.header .nav_btn.open span:nth-child(2) {width:5.135vw;}
	.header .nav_btn.open:hover span:nth-child(2) {width:6.486vw;}
	.header .nav_btn.close {font-size:7.027vw;color:#ffffff;}
	
	.nav_slide nav ul li a {font-size:12.221vw;margin:3vw 0;}
	
	.section.works {width:100%;background:#ffffff;}
	.section.works .scene {position:relative;width:100%;padding:24vw 5.556vw 12vw;background:#ffffff;}
	.section.works .work_slide {margin-top:4vw}
	.section.works .work_slide .slide_nav {position:static;margin-top:3vw;}
	
	.work_slide .img_slide {padding-left:0;width:150vw;}
	.work_slide .img_slide .item {width:75.676vw;margin:0;}
	.work_slide .img_slide .item > div {width:75.676vw;height:75.676vw;}
	.work_slide .img_slide .item > div p {font-size:5.135vw;padding-top:7.297vw;}
	.work_slide .img_slide .item > div span {margin-top:2.703vw;padding:0.541vw 3.243vw;font-size:3.243vw;color:#ffffff;border:0.27vw solid #ffffff;border-radius:1.081vw;}
	.work_slide .txt_slide {top:-2.568vw;margin:0 -5.405vw;}
	.work_slide .txt_slide .item {font-size:16.216vw;padding-right:13.514vw;}
	.work_slide .slide_nav {height:4vw;top:-14vw;padding-left:0;display:flex;align-items:center;flex-wrap:nowrap;}
	.work_slide .slide_nav .swiper-pagination-bullet {width:2.162vw;height:2.162vw;margin:0.811vw 0.541vw;border-radius:1.2vw;}
	.work_slide .slide_nav .swiper-pagination-bullet.swiper-pagination-bullet-active {width:10.811vw;height:3vw;margin:0 0.541vw;border-radius:1.5vw;}
	
	footer {padding:10.811vw 5.405vw;}
	footer .inner {width:100%;margin:0 auto;}
	footer .inner > div {display:block;}
	footer .inner > div:first-child {padding-bottom:6.486vw;}
	footer .inner > div:first-child p {font-size:5vw;}
	footer .inner > div:first-child p em {display:block;}
	footer .inner > div .mailbtn {margin-top:4.054vw;margin-bottom:0;padding:3.514vw 6.486vw;font-size:4.324vw;color:#ffffff;border-radius:8.108vw;background:linear-gradient(93.31deg, #1468B2 -22.66%, #A269FF 112.22%);}
	footer .inner > div .mailbtn i {margin-right:1.486vw}
	footer .inner > div:last-child {padding-top:6.486vw;line-height:1.6;font-size:3.784vw;}
	footer .inner > div:last-child p:last-child {margin-top:0.541vw;color:#999999;line-height:1.4;}
	footer .inner > div:last-child div:last-child {margin-top:2.162vw;color:#999999;line-height:1.6;}
	footer .inner > div span {display:block;}
}