@charset "utf-8";


.mobile_only{display:none;}

/* 1.6 Loader */
.loader{position:fixed;overflow:hidden;z-index:100;left:0;top:0;width:100%;height:100%;background:#fff;color:#fff;text-align:center;}
.loader .ani-loader{display:inline-block;width:150px;}


html, body, #header, .page-container, #footer{width:100%;min-width:1200px !important;}

@media screen and (max-width:720px) {
	.page-container{min-height:1900px;overflow:hidden;position:relative;}
	.page-container section{width:100% !important;padding-left:30px;padding-right:30px;}
}

/*-------------------------------------------------------------------------------
	Header
-------------------------------------------------------------------------------*/
#header{position:absolute;top:0;left:0;z-index:99;width:100%;height:100px;background:#fff;border-bottom:1px solid rgba(0,0,0,0.1);}
#header .header-container{width:100%;display:flex;align-items:center;justify-content:center;height:100%;font-size:21px;font-weight:400;}
#header #header-logo{font-size:0;}
#header #header-logo .logo{font-size:26px;color:#101010;display:inline-block;}
#header:not(.fixed-transparent) #header-logo .logo:hover .code{color:#285DE3}
#header #nav{margin-left:auto;font-family:'Noto Sans KR', sans-serif}
#header #nav ul{display:flex;align-items:center;justify-content:center;margin:0;}
#header #nav ul li{position:relative;margin-left:15px}
#header #nav ul li a{display:inline-flex;align-items:center;justify-content:center;height:46px;background:#255DE5;border-radius:7px;color:#fff;font-size:15px;padding:0 15px;min-width:120px;transition:all .2s ease-in-out;}
#header #nav ul li a:hover{background:#1a4abe;}

#header #nav ul > li.on > a{background:#fff;color:#000;}

#header a{color:inherit;}
#header a:hover{text-decoration:none;}

#header.scroll-fixed{position:fixed;top:-100px;left:0;width:100%;height:60px;box-shadow:0 7px 10px rgba(0,0,0,0.03);}
#header.scroll-fixed #header-logo .logo{font-size:22px;}
#header.scroll-fixed #nav ul li a{font-size:14px;height:40px;}

#headerSpace{height:100px;}
#header.scroll-fixed + #headerSpace{}

/* ------------------------------------------------------------------------------- */
/*  10. Footer
/* ------------------------------------------------------------------------------- */

#footer{position:relative;padding:40px 0;border-top:1px solid rgba(0,0,0,0.1);}
#footer .footer-container{font-size:14px;font-weight:300;font-family:'Noto Sans KR', sans-serif;line-height:1.5em;width:100%;display:flex;align-items:center;justify-content:center;}
#footer .footer-container .footerCon{flex:1;}
#footer .footer-container .footerNav{margin-left:auto;}
#footer .footer-container .footerNav a:not(:first-child):before{content:'';width:1px;height:10px;background:rgba(0,0,0,0.4);margin:0 10px;display:inline-block;}
#footer .footer-container .footerNav a:hover{text-decoration:underline;}


.header-container, .footer-container{padding:0 60px;}



/* ------------------------------------------------------------------------------- */
/*  page-container
/* ------------------------------------------------------------------------------- */

/*.page-container{font-size:18px;line-height:1.65;min-height:1500px;min-width:1200px;padding-bottom:200px;word-break:keep-all;}*/
.page-container{position:relative;font-size:16px;line-height:1.65;/*min-height:1500px;*/min-width:1200px;word-break:keep-all;}
.page-container > *{margin-left:auto;margin-right:auto;text-align:center;}
.page-container p{word-break:keep-all;}
.page-container .relative{position:relative;}

.page-container .flex{display:flex;align-items:center;justify-content:center;}
.page-container .flex.column{flex-direction:column;}
.page-container .flex.between{justify-content:space-between;}
.page-container .flex1{flex:1;}
.page-container .flex-top{justify-content:flex-start;}
.page-container .flex-bottom{justify-content:flex-end;}
.page-container .flex-left{align-items:flex-start;}
.page-container .flex-right{align-items:flex-end;}
.page-container .stretch{align-items:stretch;}



/* ------------------------------------------------------------------------------- */
/*  #mainpage
/* ------------------------------------------------------------------------------- */
#mainpage{overflow:hidden;z-index:2;}
#mainpage .main-wrap {position:absolute;width:100%;height:100%;z-index:2;-webkit-transform-style: preserve-3d;transform-style:preserve-3d;transition: ease-out 0.2s;transform-origin:center;}
#mainpage .imageHolder {position:absolute;overflow:hidden;width:100%;height:100%;}
#mainpage .imageHolder img, #mainpage .imageHolder .btn, #mainpage .imageHolder [class*='ani-']{position: absolute;transform:scale(1)}
#mainpage .object01 {transform: translateZ(-1000px);}
#mainpage .object02 {transform: translateZ(-910px);}
#mainpage .object03 {transform: translateZ(-850px);}
#mainpage .object04 {transform: translateZ(-720px);}
#mainpage .object05 {transform: translateZ(-400px);}
#mainpage .object06 {transform: translateZ(350px);}
#mainpage .object07 {transform: translateZ(-200px);}
#mainpage .object08 {transform: translateZ(650px);}
#mainpage .object09 {transform: translateZ(500px);}

#mainpage .object10 {transform: translateZ(150px);}
#mainpage .object11 {transform: translateZ(200px);}
#mainpage .object12 {transform: translateZ(250px);}
#mainpage .object13 {transform: translateZ(330px);}
#mainpage .object14 {transform: translateZ(390px);}
#mainpage .object15 {transform: translateZ(450px);}
#mainpage .object16 {transform: translateZ(520px);}
#mainpage .object17 {transform: translateZ(600px);}
#mainpage .object18 {transform: translateZ(830px);}



#mainpage .object01 img{left:5%;top:16%;}
#mainpage .object02 img{left:-1%;top:40%;}
#mainpage .object03 img{left:22%;top:10%;}
#mainpage .object04 img{right:-1%;top:50%;}
#mainpage .object05 img{right:22%;top:20%;}
/*#mainpage .object06 img{left:24%;top:53%;}*/
#mainpage .object06 .ani-object06{left:14%;top:43%;}
#mainpage .object07 img{right:13%;top:43%;}
/*#mainpage .object08 img{right:20%;top:70%;}*/
#mainpage .object08 .ani-object08{right:19%;top:67%;}
#mainpage .object09 .ani-logo{width:660px;position:absolute;left:50%;top:20px;margin-left:-330px;}

#mainpage .object10 img{left:50%;bottom:19px;margin-left:-530px;}
/*#mainpage .object11 img{left:50%;bottom:48px;margin-left:-540px;}*/
#mainpage .object11 .ani-object11{left:50%;bottom:40px;margin-left:-730px;}
/*#mainpage .object12 img{left:50%;bottom:37px;margin-left:-440px;}*/
#mainpage .object12 .ani-object12{left:50%;bottom:7px;margin-left:-490px;}
#mainpage .object13 img{left:50%;bottom:39px;margin-left:-74px;}
#mainpage .object14 img{left:50%;bottom:45px;margin-left:-239px;}
#mainpage .object15 img{left:50%;bottom:35px;margin-left:110px;}
#mainpage .object16 img{left:50%;bottom:35px;margin-left:-80px;}
#mainpage .object17 img{left:50%;bottom:25px;margin-left:-330px;}

#mainpage .btn.portfolio{left:50%;bottom:420px;margin-left:-640px;font-size:20px;font-weight:bold;height:60px;font-family:'NanumSquare', sans-serif;}
#mainpage .btn.contact{right:50%;bottom:280px;margin-right:-550px;font-size:20px;font-weight:bold;height:60px;font-family:'NanumSquare', sans-serif;}
#mainpage .btn.portfolio:before{content:'\e47b';font-family:'newfont';margin-right:10px;font-weight:normal}
#mainpage .btn.contact:before{content:'\e451';font-family:'newfont';margin-right:5px;font-weight:normal}
#mainpage .btn:after{content:'\e04c';font-family:'newfont';margin-left:10px;font-weight:normal;font-size:0.8em;transition:all .2s ease-in-out;}
#mainpage .btn{transition:all 0.3s cubic-bezier(0.5,0,0,1.25);}
#mainpage .btn:hover{transform:scale(1.15);}


.main-wrap.blur .imageHolder:not(.object18){filter:blur(2px);}




/* ------------------------------------------------------------------------------- */
/*  portfolio
/* ------------------------------------------------------------------------------- */

#portfolio{padding:50px 0;}
	.portfolio-nav{position:fixed;top:150px;left:50px;z-index:9;font-family: 'Roboto', sans-serif;font-weight:bold;text-align:left;}
	.portfolio-nav ul{display:flex;align-items:flex-start;flex-direction:column;}
	.portfolio-nav li{font-size:150px;line-height:1.05em;}
	.portfolio-nav li span{display:inline-block;cursor:pointer;transition:all .3s ease-in-out;}
	.portfolio-nav li:not(.active):not(:hover) span{color:rgba(19,19,19,0);-webkit-text-stroke: calc(.005em + 1px) #000;}
	.portfolio-nav li.active{color:#285DE3}
	.portfolio-nav li:not(.active):hover span{transform:scale(0.9);}

	.portfolioContainer{}
	.portfolioContainer ul{display:inline-block;}
	.portfolioContainer ul:after{display:block;visibility:hidden;clear:both;content:""}
	.portfolioContainer ul li{position:relative;float:left;display:flex;align-items:center;justify-content:center;}
	.portfolioContainer ul li .tag{position:absolute;top:20px;z-index:9;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;height:30px;border-radius:20px;background:rgba(240,17,17,0.8);color:#fff;
		font-size:13px;font-weight:500;font-family:'Noto Sans KR', sans-serif;transition:all .2s ease-in-out;opacity:0;}
		.portfolioContainer ul li:hover .tag{opacity:1;top:10px;}
	.portfolioContainer ul li a{display:block;position:relative;width:355px; padding:10px;}
	.portfolioContainer ul li a:before{content:'';position:absolute;top:0;left:0;z-index:6;width:100%;height:100%;border:10px solid #fff;transition:all 0.3s cubic-bezier(0.5,0,0,1.25);}
	.portfolioContainer ul li a:hover:before{border-width:24px;}
	.portfolioContainer ul li a .thumb{position:relative;overflow:hidden;width:100%; padding-bottom:161%;}
	.portfolioContainer ul li a .thumb img{position:absolute; left:0; top:0; max-width:fit-content; height:100%; transition:all .4s ease-in-out;}
	.portfolioContainer ul li a .thumb.center img {left:calc(50% - 270px);}
	.portfolioContainer ul li a:hover .thumb img{transform:scale(1.1);}
	.portfolioContainer ul li:nth-child(4n + 1){clear:both;}

	.portfolioContainer ul li .hover{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;opacity:0;transition:all .2s ease-in-out;}
	.portfolioContainer ul li a:hover .hover{opacity:1;}
	.portfolioContainer ul li .hover.text{background:rgba(49,102,255,0.9);color:#fff;padding:60px 40px;display:flex;text-align:left;flex-direction:column;transition:all .35s ease-in-out;}
	.portfolioContainer ul li .hover.text .sibject{margin-bottom:5px;font-size:22px;font-weight:600;}
	.portfolioContainer ul li .hover.text .content{margin-top:5px;font-size:16px;font-weight:400;}
	.portfolioContainer ul li .hover.text .info{margin-top:5px;font-size:14px;font-weight:300;opacity:0.7;}

	.portfolioContainer ul li .hover.video{overflow:hidden;}
	.portfolioContainer ul li .hover.video video{max-height:100%;position:absolute;top:0;left:50%;}

	.portfolioContainer ul li .hover.slide{overflow:hidden;}
	.portfolioContainer ul li .hover.slide .swiper-container{position:relative;width:100%;margin:0 auto;}
	.portfolioContainer ul li .hover.slide .swiper-container::focus{cursor:move;}
	.portfolioContainer ul li .hover.slide .swiper-slide{position:relative;top:0;padding:0;margin:0 auto;font-size:0;}
	.portfolioContainer ul li .hover.slide .swiper-slide img{margin:0 auto;width:100%;font-size:0;display:block;}


	@media all and (max-width:1419px){
		.portfolioContainer ul li:nth-child(4n + 1){clear:none;}
		.portfolioContainer ul li:nth-child(3n + 1){clear:both;}
	}
	



/* ------------------------------------------------------------------------------- */
/*  portfolio-view
/* ------------------------------------------------------------------------------- */

#header.fixed-transparent{height:80px;background:transparent;border:0;}
#header.fixed-transparent.scroll-fixed{height:60px;background:rgba(255,255,255,0.95);border-bottom:1px solid rgba(0,0,0,0.1);}
#header.fixed-transparent.scroll-fixed #header-logo .logo:hover .code{color:#285DE3}
#header.fixed-transparent:not(.scroll-fixed) #header-logo .logo{color:#fff;}
#header.fixed-transparent + #headerSpace{display:none;height:0;}

#portfolio-view{}
#portfolio-view .block.view-header{position:relative;padding:0;}
#portfolio-view .block.view-header .con{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;}
#portfolio-view .block.view-header .cover{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#0A1474;opacity:0.9}
#portfolio-view .block.view-header > img {width:100%;}
#portfolio-view .block.view-header > img.origin_size {width:auto; max-width:1200px;}

#portfolio-view .block.view-header .view22_bg {
	background: linear-gradient(180deg, rgba(42,35,30,1) 0%, rgba(42,35,30,1) 59.68%, rgba(250,246,243,1) 59.68%, rgba(250,246,243,1) 82.6%,rgba(255,255,255,1) 82.6%,rgba(255,255,255,1) 100%);
}

#portfolio-view .block{position:relative;padding:110px 0;font-size:18px;font-weight:400;}
#portfolio-view .block .con{margin-left:auto;margin-right:auto;}
#portfolio-view .light{color:#fff;}

#portfolio-view .gotoSite{position:absolute;top:110px;left:230px;display:inline-block;writing-mode:vertical-rl;font-family:'Roboto', sans-serif;padding:3px 0;font-size:20px;line-height:1em;color:var(--mainColor);transition:all .2s ease-in-out;}
#portfolio-view .gotoSite:before{content:'';position:absolute;top:0;left:0;width:1px;height:100%;background:#2A62E1;transition:all 0.2s cubic-bezier(0.5,0,0,1.25);z-index:-1}
#portfolio-view .gotoSite:hover{color:#fff;}
#portfolio-view .gotoSite:hover:before{width:100%;}

#portfolio-view .return{margin-top:60px;font-family:'Roboto', sans-serif;padding:0 25px;height:52px;font-size:21px;color:#fff;background:var(--mainColor);border-radius:40px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;}
#portfolio-view .return:before{content:'\e416';font-family:'newfont';font-size:17px;margin-right:10px;}
#portfolio-view .return:hover{background:#292b33}

#portfolio-view .light .return{color:#fff;background:transparent;border:2px solid #fff;}
#portfolio-view .light .return:hover{background:#fff;color:#333333}







/* ------------------------------------------------------------------------------- */
/*  write
/* ------------------------------------------------------------------------------- */
#write{position:relative;margin:0 auto;max-width:1400px;text-align:left;margin-bottom:120px;}
#write .visual-img{position:absolute;top:0;z-index:-1;width:100%;height:100%;z-index:2;-webkit-transform-style: preserve-3d;transform-style:preserve-3d;transition: ease-out 0.2s;transform-origin:center;}
#write .visual-img .imageHolder{transform: translateZ(600px);}
#write .visual-img .ani-contact{position:absolute;top:-60px;right:-130px;z-index:-1;width:660px;}
#write .btn{z-index:3;}

#write .write-title{margin-top:120px;margin-bottom:60px;position:relative;z-index:3;}

.wr-wrap{position:relative;margin-top:0;margin-bottom:50px;z-index:3}
.wr-wrap .wr-row{display:flex;align-items:center;align-items:stretch;}
.wr-wrap .wr-list{position:relative;width:100%;text-align:left;}
.wr-wrap .wr-list:not(first-child){margin-top:45px;}
.wr-wrap .flex-row{display:flex;align-items:center;justify-content:center;}
.wr-wrap .flex-row + .flex-row{margin-top:30px;}

.wr-wrap .wr-head{font-size:19px;font-weight:500;font-family:'NanumSquare', sans-serif;text-align:left;display:block;margin-bottom:20px;}
.wr-wrap .wr-list-con{flex:1;text-align:left;position:relative;}
.wr-wrap .wr-list-con + .wr-list-con{margin-left:40px;}
.wr-wrap .wr-list-con:after{display:block;visibility:hidden;clear:both;content:""}
.wr-wrap .wr-list-con.flex{display:inline-flex;align-items:center;justify-content:flex-start;}
.wr-wrap .wr-list-con .label{font-size:17px;font-weight:400;font-family:'NanumSquare', sans-serif;text-align:left;display:block;margin-bottom:6px;}
.wr-wrap .wr-list-con .label.required:after{content:'*';color:#255DE5}
.wr-wrap .wr-list-con textarea{font-size:18px;}

.wr-wrap .wr-list-con label.checkbox-btn{float:left;margin-right:15px;margin-bottom:20px;}
.wr-wrap .wr-list-con label.checkbox-btn:nth-child(6n){margin-right:0;}
.wr-wrap .wr-list-con label.checkbox-btn:nth-child(6n + 1){clear:both;}

.label100 .wr-list-label{width:100px;} .label110 .wr-list-label{width:110px;} .label120 .wr-list-label{width:120px;} .label130 .wr-list-label{width:130px;} .label140 .wr-list-label{width:140px;} .label150 .wr-list-label{width:150px;}
.label160 .wr-list-label{width:160px;} .label170 .wr-list-label{width:170px;} .label180 .wr-list-label{width:180px;} .label190 .wr-list-label{width:190px;} .label200 .wr-list-label{width:200px;}
.label210 .wr-list-label{width:210px;} .label220 .wr-list-label{width:220px;} .label230 .wr-list-label{width:230px;} .label240 .wr-list-label{width:240px;} .label250 .wr-list-label{width:250px;}
.label260 .wr-list-label{width:260px;} .label270 .wr-list-label{width:270px;} .label280 .wr-list-label{width:280px;} .label290 .wr-list-label{width:290px;} .label300 .wr-list-label{width:300px;}

.btnSet{display:flex;align-items:center;justify-content:center;margin-top:50px;text-align:center;}







/* ------------------------------------------------------------------------------- */
/*  LAYER POPUP
/* ------------------------------------------------------------------------------- */
* {transition:filter;}
.mfp-bg.my-mfp-popup {background: rgba(0,0,0,0.8);}
.mfp-wrap:not(.my-mfp-popup) ~ *:not(.nicescroll-rails) {filter:blur(3px);}
.mfp-wrap .mfp-container{padding:0 30px;}
.mfp-wrap .mfp-content{position:relative;margin:0;width:auto;max-width:100%;}
button.mfp-close{position:fixed;right:50px;top:30px;z-index:999;text-align:center;width:50px;height:50px;font-size:0px;opacity:0.7;transition:all .2s ease-in-out;}
button.mfp-close:before{position:absolute;right:0;top:20px;content:'';display:inline-block;width:50px;height:1px;background:#fff;transform:rotate(45deg);}
button.mfp-close:after{position:absolute;right:0;top:20px;content:'';display:inline-block;width:50px;height:1px;background:#fff;transform:rotate(-45deg);}
/*button.mfp-close:before{content:'\e014';font-family:'newfont';font-size:44px;font-weight:normal;color:#fff;transform:rotate(45deg);}*/
button.mfp-close:hover, .button.mfp-close:focus{opacity:1;}
.mfp-container .mfp-arrow{position:fixed;opacity:0.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent;transition:all .15s ease-in-out;}
.mfp-container .mfp-arrow.mfp-arrow-left{left:0;}
.mfp-container .mfp-arrow.mfp-arrow-right{right:0;}
.mfp-container .mfp-arrow:active{margin-top:-53px;}
.mfp-container .mfp-arrow:hover{opacity:1;}
.mfp-container .mfp-arrow:before{content:'';font-family:'newfont';font-size:54px;color:#fff;display:inline-block;transition:all 0.4s cubic-bezier(0.1, 0.25, 0, 1.8);text-shadow:0 4px 2px rgba(0,0,0,0.2);}
.mfp-container .mfp-arrow.mfp-arrow-left:before{content:'\e00f';margin-left:-10px;}
.mfp-container .mfp-arrow.mfp-arrow-right:before{content:'\e010';margin-right:-10px;}
.mfp-container .mfp-arrow.mfp-arrow-left:hover:before{margin-left:-25px;}
.mfp-container .mfp-arrow.mfp-arrow-right:hover:before{margin-right:-25px;}

.layerPopup{margin:90px auto;width:auto;border-radius:3px;overflow:hidden;font-family:'NanumSquare', sans-serif;}
.layerPopup .popContainer{position:relative;font-size:17px;line-height:1.5em;background:#fff;border-radius:4px;}

.layerPopup .pop-header{position:relative;}
.layerPopup .pop-header .cover{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#0A1474;opacity:0.9}
.layerPopup .pop-header .phCon{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#fff;}
.layerPopup .pop-header .phCon .subject{font-size:44px;font-family:'Black Han Sans';}
.layerPopup .pop-header .subject + .con{margin-top:15px;}
.layerPopup .pop-header .subject + .con:before{content:'';display:block;width:1px;height:40px;background:rgba(255,255,255,0.7);margin:0 auto;margin-bottom:20px;}

.layerPopup .pop-body{padding:40px;}
.layerPopup .pop-body .pbCon .subject{position:relative;z-index:3;font-family:'NanumSquare', sans-serif;font-size:25px;font-weight:600;line-height:1.2em;}
.layerPopup .pop-body .pbCon .con{position:relative;z-index:3;}
.layerPopup .pop-body .pbCon .subject + * {margin-top:20px;}
.layerPopup .pop-body .pbCon + * {margin-top:20px;}