@charset "UTF-8";
/* 공통 */
section{height:100vh}
.inner{position: relative;height:100%;margin: auto;padding: 0 40px;}
.intro .inner,
.info .inner,
.contact .inner{display: flex;align-items: center;justify-content: center;height: 100%;}
.reveal {position: relative;transform: translateY(150px);opacity: 0;transition: 2s all ease;}
.reveal.active{transform: translateY(0);opacity: 1;}
.top_txt{text-align: center;}
.top_txt *{word-break: keep-all;}
h3{font-family: "Montserrat", sans-serif;font-size: 72px;position: relative;}
h3:after{content:'';border-radius: 100%;width: 50px;height: 50px;background: rgba(0, 95, 254, 0.1);position: absolute; right: 0;z-index: -1;}
/* 공통 끝 */

/* Intro */
.intro .text_box{text-align: center;}
h2{font-family: "Montserrat", sans-serif;font-weight: 900;font-size: 180px;line-height: 150px;}
h2 span{display: inline-block;vertical-align: middle;}
h2 .slash{font-weight: 800;font-size: 130px;}
.intro p{font-weight: 300;font-size: 24px;letter-spacing: -.4px;line-height: 44px;color: #5e5e5e;margin-top: 50px;word-break: keep-all;}
.intro p span{display:block;}
.intro marquee {font-family: "Montserrat", sans-serif;font-weight: 900;font-size: 300px;position: absolute;top:50%;transform: translateY(-50%);margin-top: -165px;color: #ddd;opacity: 0.3;z-index: -1;}
.scroll_btn *{display: block;}
.scroll_btn{text-align: center;position: absolute;bottom: 60px;}
.scroll_btn:before{content:'';display: block;background:url(images/main/scroll_down.gif) center center no-repeat;border-radius: 100%;background-size: 35px auto;border: 2px solid #333;width: 70px;height: 70px;opacity: .7;}
.scroll_btn:hover{bottom: 70px;transition:all 0.3s}
.scroll_btn span{font-weight: 500;font-size: 20px;color: #222;letter-spacing: -.4px;padding-top: 10px;}

/* Info */
.info .inner{max-width: 1296px;}
.porfile-img{position: relative;}
.porfile-img:before,
.porfile-img:after{content:'';border-radius: 100%;position: absolute;z-index: -1;}
.porfile-img:before{background: #e5efff;width: 140px;height: 140px;top: 100px;right: 0;}
.porfile-img:after{background: #2c68c7;width: 200px;height: 200px; bottom: 0; left: 0;}
.porfile-img img{display:block;width: 630px;}
.info strong{font-size: 40px;display: block;margin-bottom: 40px; word-break: keep-all;}
.info strong span{font-family: "Montserrat", sans-serif; font-weight: 800;letter-spacing: -.6px;padding-right: 10px;}
.info .text_box{padding-left: 100px;}
.info .text_box p{font-size: 18px;line-height: 36px; word-break: keep-all;}
.info .text_box p + p{margin-top: 30px;}
.info .text_box p span{display: block;}
.info .more_btn {display: inline-block;border-radius: 30px;border: 2px solid #005ffe;font-family: "Montserrat", sans-serif;font-weight: 600;font-size: 22px;letter-spacing: -.4px;color: #005ffe;padding: 8px 20px;margin-top: 30px;}
.info .more_btn span{padding-right: 5px;}
.info .more_btn i{font-size: 18px;color: #005ffe;}
.info .more_btn:hover{background: #005ffe;color:#fff;transition:all 0.3s}
.info .more_btn:hover i{transform: scaleX(-1);color:#fff;transition:all 0.3s}

/* Project1 */
.project1{background: #111;}
.project1 .inner{display: block;position: relative;overflow: hidden;padding-top: 100px;}
.project1 .wrap{position: absolute;top: 50%;transform: translateY(-50%);width: calc(100% - 80px);}
.project1 h3{display: inline-block;color:#fff;}
.project1 h3:after{width: 46px;height: 46px;background: #005ffe;top: -3px;right: -22px;}
.project1 .con_txt{font-size: 18px;font-weight: 300;letter-spacing: .2px;line-height: 34px;color:#fff;padding-top: 25px;}
.project1 .con_txt span{display:block;}
.project1 .swiper{margin-top: 100px;}
.project1 li.swiper-slide{border-radius: 23px;width: 700px !important;/* height: 520px; */height: calc(53vh - 18px);overflow: hidden;}
.project1 li.swiper-slide > a{position: relative;display: block;}
.project1 li.swiper-slide .link{height: 286px;z-index: 2;}
.project1 .thumb{position: relative;display: block;overflow: hidden;}
.project1 .thumb:before{position: absolute; left: 0;top: 0;width: 100%;height: 100%;content: "";background: rgba(0, 0, 0, 0.2);transition: opacity 0.4s; z-index: 1;}
.project1 img{width:100%;}
.project1 .view{opacity: 0;width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 100%;background: rgba(0, 95, 254, 0.4);margin-top: 15px;transition: 0.4s; transition-property: transform, opacity;z-index: 10;}
.project1 a:hover .view{opacity: 1;}
.project1 .view i{display: flex;align-items: center;justify-content: center; height: 100%;font-size: 50px;color:#cdcdcd;}
.project1 .link:hover .view{display:block;}
.project1 .text_box{background: rgba(0, 0, 0, 0.7);position: absolute;bottom: -1px;padding: 30px 40px 50px;z-index: 10;}
.project1 dt{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;padding-bottom: 14px;font-size: 30px;font-weight: 700;letter-spacing: -.4px;color: #fff;}
.project1 dd.txt{font-size: 20px;letter-spacing: -.4px;line-height: 30px;color: #cdcdcd;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;word-break: keep-all;}
.project1 dd.date{font-size: 15px;padding-top: 12px;color:#fff;}
.project1 dd.stack{font-size: 15px;color:#fff;}
.project1 dd.stack span{font-weight: 500;padding-right: 10px;}

.project1 .more dd.txt{display: block;}
.project1 .more_btn{position: absolute;left: 50%;transform: translateX(-50%);bottom:10px;}
.project1 .more_btn i{font-size: 26px;color:#fff;transition: transform 0.3s;}
.project1 .on i{transform: rotate(-180deg);transition: transform 0.3s;}
.project1 .add_btn{font-size: 20px;font-weight: 500;color: #fff;}
.project1 .add_btn:hover{text-decoration: underline;}
.popWrap.detail .popcont{width:100%;}
.popWrap.detail .boxwrap > div{width: calc(100% - 100px);}
.popWrap.detail .info_con_box .box{padding: 20px;}
.popWrap.detail .info_con_box{width: calc(100% - 20px);height: calc(100% - 20px);padding-top: 20px;}
.popWrap.detail .url_list{text-align: center;}
.popWrap.detail .url_list li {padding: 15px 0;}
.popWrap.detail .url_list a{font-size: 20px;line-height: 24px;}
.popWrap.detail .url_list a:hover{text-decoration: underline;}


/* Project2 */
.project2{background: #f0f0f0;height: auto;}
.project2 .top_txt{max-width: 448px;width: 100%;position: absolute; top: 113px;left: auto;text-align: left;}
.project2 h3{font-size: 63px;}
.project2 h3:after{width: 50px;height: 50px;background: rgba(0, 95, 254, 0.1);right: 0;}
.project2 .top_txt p{font-size: 20px; line-height: 36px; letter-spacing: -.6px;color: #555;padding-top: 12px;}
.project2 .top_txt span{display:block;}
.project2 .inner{max-width: 1296px;padding: 130px 40px 100px;}
.project2 ul{display: inline-block; width: calc(50% - 45px);vertical-align: top;}
.project2 ul.ul1{padding-top: 270px;}
.project2 ul + ul{margin-left: 85px;}
.project2 li{border-bottom:1px solid #ddd;padding: 80px 0;}
.project2 li:first-child{padding-top:0;}
.project2 li:last-child{border-bottom:none;}
.project2 .text_box{padding-bottom: 30px;word-break: keep-all;}
.project2 strong{font-size: 24px;font-weight: 500;line-height: 26px;letter-spacing: -.4px;display: block;margin-bottom: 18px;}
.project2 li p{display: inline;border-bottom: 1px solid transparent;font-size: 17px;letter-spacing: -.4px;color: #444;}
.project2 a:hover p{border-bottom-color: #191919;transition: border .3s;}
.project2 .thumb{display: block;border-radius: 20px;box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09);height: 295px;overflow: hidden;}
.project2 a:hover .thumb{ -webkit-transition: all .3s ease;transition: all .3s ease;-webkit-transform: translateY(-5px);transform: translateY(-5px);-ms-transform: translateY(-5px);box-shadow: 4px 12px 20px 6px rgba(0,0,0,.18)}
.project2 .thumb.mob{height: 660px;}
.project2 .thumb img{display: block;width: 100%;min-height: 100%;}
.project2 .thumb.mob img{object-fit: cover;}

/* contact */
.contact .inner{max-width: 1296px;}
.contact .text_box{text-align: center;}
.contact p{font-size: 20px;line-height: 43px;color:#666;margin-top: 65px;}
.contact p span{display: block;}
.mail_form{position: relative;display: inline-block;}
.mail_form:after{content: '';background:#222;display:block;width:100%;height:8px;transform: scaleX(0);  transform-origin:  0% 50%;  transition: transform 250ms ease-in-out;}
.mail_form.hover:after{content:'';transform: scaleX(1);}
.mail_form button {border:none;background: none;font-family: "Montserrat", sans-serif;font-size: 93px;font-weight: 700;letter-spacing: -1px;color:#333;position: relative;padding: 0;text-align: left;cursor: pointer;z-index: 1;
-webkit-backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition: border-color 0.3s, background-color 0.3s;
transition: border-color 0.3s, background-color 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);vertical-align: middle;overflow: hidden;}
.mail_form button*:before,
.mail_form button*:after{box-sizing: border-box;}
.mail_form button:focus {outline: none;}
.mail_form button::after {content: attr(data-text);box-sizing: border-box;position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;color:#111;-webkit-transform: translate3d(0, 25%, 0);transform: translate3d(0, 25%, 0);  }
.mail_form button > span {position: relative;display: block;vertical-align: middle;}
.mail_form button::after,
.mail_form button > span {padding: 12px 0;-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;transition: transform 0.3s, opacity 0.3s;-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);  }
.mail_form.hover button::after {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.mail_form.hover button > span {opacity: 0;-webkit-transform: translate3d(0, -25%, 0);transform: translate3d(0, -25%, 0);}

/* project2 popup */
.popWrap{width: 100%;position: fixed;top: 0;left: 0;height: 100vh;z-index: -1;opacity: 0;transition: opacity 0.4s;word-break: keep-all;}
.popWrap.on{opacity: 1;z-index:100;}

.overlay:after{content:'';width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.6);z-index: 99;}
.boxwrap{position: relative;width: 90%; max-width: 1390px;line-height: 1.2; height: 85vh; top: 50vh; left: 50%; transform: translate(-50%, -50%);display: flex;align-items: flex-start;}
.close_btn {display:block;position: absolute;top: 0;right: 0;}
.close_btn span{display: flex;align-items: center;justify-content: center;border-radius: 100%;background: #222;width: 64px;height: 64px;}
.close_btn i{font-size: 30px;color:#fff;transition-duration: 0.4s;}
.close_btn.hover i{transform: scaleX(-1);}
.close_btn em{font-size: 18px;font-weight: 500;display:block;color: #fff;text-align: center;margin-top: 10px;}
.boxwrap > div{height:100%;}
.popcont{display:none;border: 1px solid #fff;border-radius: 15px;width: calc(100% - 84px);height: 100%;background: #fff;box-sizing: border-box; overflow: hidden;}
.popcont.on{display: block;}
.popcont img{border: 1px solid #eee;width:100%;}
.popcont > div{display: inline-block;height: 100%;vertical-align: top;}
.info_con_box{width: calc(900 / 1310 * 100%);float:left;}
.info_txt_box{border-left: 1px solid #dddddd;background: #f7f7f7;float:right;width: calc(410 / 1310 * 100%);padding:20px 30px;}
.info_con_box .box{max-width: 100%;height:100%;padding: 60px 40px;overflow: auto;}
.info_con_box h5{font-size: 40px;letter-spacing: -1px;text-align: center;}
.info_con_box p{font-size:18px;font-weight: 300;line-height: 32px;margin-top: 20px;text-align: center;margin-bottom: 40px;}
.info_con_box p span{display:block;}
.info_con_box .img{margin-top: 60px;}
.info_txt_box .etc{ margin: 17px 0;}
.info_txt_box span{display: inline-block;border-radius: 16px;background: #eaeaea; padding: 4px 12px;font-size: 15px;margin: 3px;color: #666;}
.info_txt_box h5{font-size: 30px;font-weight: 600;border-bottom:1px solid #ddd;padding:15px 0;}
.info_txt_box dl + dl{margin-top: 14px;}
.info_txt_box dt,
.info_txt_box dd{display: inline-block;color: #343434;vertical-align: middle;}
.info_txt_box dt{font-weight: 700;font-size: 20px;letter-spacing: -.4px;padding-right: 5px;}
.info_txt_box dd{ font-weight: 400;font-size: 18px;letter-spacing: -.2px;}

@media only screen and (max-width:1400px){
	.mail_form button{font-size: 80px;}
}
@media only screen and (max-width:1280px){
	.porfile-img img{width: 495px;}
	.porfile-img:before{width: 126px;height: 126px;top: 70px;}
	.porfile-img:after{width: 180px;height: 180px; bottom: -40px}
	.info .text_box{padding-left: 50px;}
	.project1 li.swiper-slide{height: calc(54vh - 18px);}
	.project1 .text_box{padding: 30px 40px;}
	.project1 dt{font-size: 26px;padding-bottom: 10px;}
	.project1 dd.txt{font-size: 18px;}
	.mail_form button {font-size: 65px;}
	.info_con_box h5 {font-size: 36px;}
	.info_con_box p{font-size: 17px;line-height: 30px;}
	.info_txt_box{padding: 20px 22px;}
	.info_txt_box span{font-size: 14px;}
	.info_txt_box dt{font-size: 18px;}
	.info_txt_box dd{font-size: 16px;}
}

@media only screen and (max-width:1023px){
	h2{font-size: 120px;line-height: 110px;}
	h2 .slash{font-size: 88px;}
	h3{font-size: 63px;}
	.intro p{font-size: 20px;line-height: 38px;letter-spacing: -.2px;margin-top: 30px;}
	.intro marquee{font-size: 134px;margin-top: -100px;}
	.scroll_btn:before{background-size: 30px auto;width: 60px;height: 60px;}
	.scroll_btn span{font-size: 18px;}
	.info{display: flex;}
	.info .inner{display:block;height: auto;}
	.porfile-img{width:430px;margin: auto;}
	.porfile-img:before{width: 90px;height: 90px; top: 100px;right: -30px;}
	.porfile-img:after{width: 150px;height: 150px;bottom: -20px;left: -28px;}
	.porfile-img img{width: 430px;}
	.info .text_box{ padding-top: 80px; padding-left: 0;}
	.info strong{font-size: 30px;}
	.info .text_box p{font-size: 17px;line-height: 32px;}
	.info .text_box p + p{margin-top: 20px;}
	.info .more_btn{font-size: 18px;margin-top: 40px;}
	.project2 .top_txt{max-width: 363px;}
	.project2 .top_txt span{display: inline;}
	.project1 .con_txt{font-size: 16px;letter-spacing: .6px;line-height: 30px;padding-top: 20px;}
	.project1 h3:after{width: 34px;height: 34px;top: 0;right: -12px;}
	.project1 li.swiper-slide{height:480px;}
	.project1 dt{font-size: 25px;}
	.project1 dd{font-size: 18px;letter-spacing: -.2px;}
	.popWrap.detail .boxwrap > div{width:100%;}
	.popWrap.detail .url_list li {padding: 10px 0;}
	.popWrap.detail .url_list a{font-size: 18px;line-height: 20px;}

	.project2 .top_txt p {font-size: 18px;line-height: 32px;letter-spacing: -.3px;}
	.project2 strong{font-size: 22px;margin-bottom: 16px;}
	.project2 li p{font-size: 16px;letter-spacing: -.2px;}
	
	.popcont.on{display: block;}
	.popcont{width: 100%;border-radius: 6px;overflow:auto;}
	.popcont > div{height:auto;float:none;}
	.close_btn{top: -68px;right: auto;left: 50%;transform: translateX(-50%);z-index: 1;}
	.close_btn span{width: 50px;height: 50px;}
	.close_btn em{display: none;}
	.close_btn i{font-size: 22px;}
	.boxwrap{height: calc(85vh - 70px);}
	.popcont::-webkit-scrollbar{width: 8px;background-color: #eee; border-radius: 35px;}
	.popcont::-webkit-scrollbar-thumb{background-clip:padding-box; width: 8px;background-color: #333; border-radius: 35px;}
	.info_con_box{width:100%;}
	.info_txt_box{width:100%;margin-bottom: 30px;border-left: none;}
	.info_con_box h5{font-size: 30px;}
	.info_con_box p{margin-bottom: 30px;font-size: 16px; line-height: 28px;}

	.mail_form button {font-size: 50px;}
	.contact p{font-size: 18px;line-height: 38px;margin-top: 40px;}
}
@media only screen and (max-width:767px){
	section{display: none !important;height: calc(100vh - 52px);}
	section.on{display:block !important;}
	section.info.on{display:flex !important;}
	.inner{padding: 0 20px;}
	.reveal{opacity: 1;transform: initial;}
	h2{font-size: 70px;line-height: 76px;}
	h2 .slash{font-size: 50px;}
	.intro p{font-size: 18px;line-height: 30px;}
	.intro marquee{font-size: 60px;margin-top: -80px;}
	.scroll_btn span{font-size: 17px;}
	.scroll_btn:before{background-size: 25px auto;width: 52px; height: 52px;}
	.porfile-img:before{width: 70px;height: 70px; top: 32px;right: 30px;}
	.porfile-img:after{width: 110px;height: 110px;bottom: -6px; left: -10px;}
	.porfile-img,
	.porfile-img img{width: 340px;}
	.project1 .wrap{width: calc(100% - 40px);}
	.project1 h3{font-size: 40px;}
	.project1 h3:after{width: 20px;height: 20px;right: -8px;}
	.project1 .con_txt span{display: inline;}
	.project1 .swiper{margin-top:60px;}
	.project1 li.swiper-slide{width:100% !important;height: 390px;}
	.project1 li.hover{margin-top:0;}
	.project1 .text_box{padding: 30px 20px 40px;}
	.project1 dt{font-size: 20px;}
	.project1 .add_btn{font-size: 16px;}
	.project1 dd.txt{font-size: 16px;line-height: 25px;}
	.project1 dd.date{font-size: 14px;}
	.project1 .more_btn i{font-size: 22px;}
	.project2 .top_txt{position: static;}
	.project2 h3{font-size: 30px;}
	.project2 .top_txt p{font-size: 16px;line-height: 26px;}
	.project2 ul{width:100%;}
	.project2 ul + ul{margin-left: 0;padding-top: 50px;}
	.project2 ul.ul1{padding-top: 50px;}
	.project2 li{border-bottom: 1px solid #ddd;padding: 50px 0;}
	.project2 .ul1 li:last-child{border-bottom: 1px solid #ddd;}
	.project2 .thumb{border-radius: 13px;height: 230px;}
	.project2 .thumb.mob{height: 520px;}
	.popWrap.detail .info_con_box{width: calc(100% - 10px);}
	.info_con_box .box{padding: 30px 20px;}
	.info_con_box h5{font-size: 24px;letter-spacing: -.4px;}
	.info_con_box p span{display:inline;}
	.info_txt_box h5{font-size: 22px; padding: 0 0 14px;}
	.info_txt_box dt {font-size: 16px;}

	.mail_form button{font-size: 30px;}
	.mail_form.hover:after{content:'';transform: scaleX(0);}
	.mail_form.hover button::after {opacity: 0;}
	.mail_form.hover button > span {opacity: 1;}
	.contact p{font-size: 16px;line-height: 30px; margin-top: 30px;}
	.contact p span{display: inline;}
}
@media only screen and (max-width:480px){
	h2{font-size: 40px;line-height: 42px;}
	h2 .slash{font-size: 30px;}
	.intro p{font-size: 16px;line-height: 26px;}
	.intro p span{display: inline;}
	.intro marquee{font-size: 45px;margin-top: -92px;}
	.scroll_btn{bottom: 30px;}
	.scroll_btn:before{background-size: 22px auto;width: 45px;height: 45px;}
	.scroll_btn:hover{bottom: 30px;}
	.scroll_btn span{font-size: 15px;}
	.porfile-img{width: 240px;}
	.porfile-img img{width: 240px;}
	.porfile-img:before{width: 55px;height: 55px;top: 30px;right: 20px}
	.porfile-img:after{width: 90px;height: 90px; bottom: -8px;}
	.info .inner{padding-top: 96px;}
	.info .text_box{padding-top: 30px;}
	.info strong{font-size: 19px;margin-bottom: 12px;}
	.info strong span{padding-right: 6px;}
	.info .text_box p{font-size: 14px;line-height: 24px;}
	.info .text_box p + p{margin-top: 16px;}
	.info .more_btn{font-size: 16px;padding: 5px 16px;margin-top: 30px;float: right;}
	.info .more_btn i{font-size: 15px;}
	.project1 h3{font-size: 28px;}
	.project1 h3:after{width: 14px;height: 14px;}
	.project1 .con_txt{font-size: 14px;line-height: 24px;padding-top: 15px;}
	.project1 .swiper{margin-top: 40px;}
	.project1 li.swiper-slide{ border-radius: 13px;height: 300px;}
	.project1 .text_box{padding: 20px 16px 30px;}
	.project1 dt{font-size: 18px;padding-bottom: 10px;}
	.project1 dd.txt{font-size: 14px;line-height: 23px;}
	.project1 dd.date{font-size: 13px;padding-top: 6px;}
	.project1 .more_btn{bottom:10px;}
	.project1 .more_btn i{font-size: 16px;}
	.project2 .inner{padding: 130px 20px 30px;}
	.project2 .top_txt p{font-size: 15px;line-height: 24px;}
	.project2 ul + ul{padding-top: 30px;}
	.project2 li{padding: 40px 0;}
	.project2 .thumb{height:auto;}
	.project2 strong{font-size: 18px; margin-bottom: 10px;}
	.project2 li p{font-size: 15px;}
	.project2 h3{font-size: 24px;}
	.boxwrap{top:53vh}
	.info_con_box h5{font-size: 20px;line-height: 32px;}
	.info_con_box p {font-size: 14px;line-height: 24px; margin-top: 16px;}
	.mail_form button{font-size: 24px;letter-spacing: -.2px;}
	.contact p {font-size: 15px;line-height: 28px;margin-top: 12px;margin-bottom: 0;}
	.info_con_box .img{margin-top:40px;}
	.info_txt_box h5{font-size:18px;}
	.info_txt_box{padding:20px;}
	.info_txt_box .etc {margin: 10px 0;}
	.info_txt_box span {font-size: 13px;}
	.info_txt_box dl + dl {margin-top: 8px;}
	.info_txt_box dt{font-size: 15px;}
	.info_txt_box dd{font-size: 14px;}
}

@media only screen and (max-width:380px){
	.intro marquee{margin-top: -108px;}
	.project1 .wrap{margin-top: 40px;}
	.project2 h3{font-size: 22px;}
	.project2 .top_txt p{font-size: 14px;}
	.project2 li p{font-size: 14px;}
}