@charset "utf-8";

/* Reset */
html,body {width:100%;height:100%;font-size:16px;color:#000;line-height:1;-webkit-text-size-adjust:none;}

body,div,form,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,em,p,span,textarea,pre,label,fieldset,th,td,button,a,input,select,hr, figure {margin:0;padding:0;font-family:ns,Arial,sans-serif;word-break:break-all;vertical-align:top;}

/*common*/
#wrap {width: 100%;overflow:hidden;}
img {max-width:100%;}

.projects .innerWrap {position:relative;max-width:1350px;margin:0 auto;}
.projectsView {width:100%;height:817px;}
.projectsView .innerWrap {padding-top:230px;}
.projectsView .conTit {font-size:105px;font-weight:bold;line-height:1.14;letter-spacing:-6.3px;color:#202020;}
.projectsView .conTit .sTit{opacity:0;transform:translateY(5px);}
.projectsView .bigTit{opacity:0;transform:translateY(10px);}
.projectsView .conTit .sTit {box-sizing:border-box;display:block;overflow:hidden;padding-left:10px;margin-bottom:10px;font-size:19px;font-weight:500;line-height:1.47;letter-spacing:0;color:#000000;}
.projectsView .bigTit {display:block;}
.projectsView .bigTit span {display:block;overflow: hidden;}
.projectsView .conTxt {margin-top:110px;opacity:0;}
.projectsView .conTxt {font-size:17px;line-height:1.76;letter-spacing:-0.43px;color:#616161;font-weight: 300;}
.projectsView .conTit,
.projectsView .conTxt {max-width:670px;}
.projectsView .imgWrap {position:absolute;top:233px;right:0;padding-right:120px;transform:translateX(40%);opacity:0;}
.projectsView .imgWrap .inner {position:relative;width:330px;height:635px;overflow:hidden;margin-top:10px;border-radius:35px; box-shadow: -20px 20px 40px 0 rgba(0, 0, 0, 0.28);background:url(images/img_intro@3x.optimized.webp) no-repeat;background-size:100%;}
.projectsView .imgWrap:after{content:'MOBILE APP';display:block;position:absolute;top:0;right:0;font-size:13px;font-weight:300;}
.projectsView .imgWrap .inner .icon{position:absolute;top:278px;left:45px;width:241px;height:222px;}


.projectsInfo {box-sizing:border-box;padding:178px 0 210px 0;background-image: linear-gradient(158deg, #f8ebef 15%, #d1d5f3 136%);}
.projectsInfo .tit {font-size:20px;font-weight:300;letter-spacing: -0.2px;color:#f54f7e;}
.projectsInfo .subTxt {opacity:0;transform:translateY(10px);}
.projectsInfo .infoContent {position:relative;width:1272px;height:394px;margin:60px auto 0;}
.projectsInfo .infoContent .item {position:absolute;transform:translateX(40px);opacity:0;}
.projectsInfo .infoContent .item:nth-child(2) {left:439px;}
.projectsInfo .infoContent .item:nth-child(3) {left:878px;}
.projectsInfo .infoContent .item .txt{box-sizing:border-box;display:table-cell;width:394px;height:394px;vertical-align:middle;text-align:center;border: solid 1px #f54f7e;border-radius:197px;font-size:17px;line-height: 1.76;letter-spacing: -0.43px;}
.projectsInfo .infoContent .item .txt em{background:#f54f7e;color:#fff;padding:0 5px}
.projectsInfo .infoContent + .tit {margin-top:230px;}
.infoContent02 {margin-top:32px;font-size: 95px;font-weight: 300;line-height: 1.58;letter-spacing: -8.55px;color: #000000;}
.infoContent02 > li {overflow:hidden;transform:translateY(20px);position: relative;}
.infoContent02 > li [class*="txt"] {float:left;width:50%;overflow: hidden;opacity:0;}
.infoContent02 > li .txt01 {transform: translateX(20%);}
.infoContent02 > li .txt02 {transform: translateX(-20%);}
.infoContent02 > li .txt02 {position:relative;float:right;text-align:right;}
.infoContent02 > li .bar {position:absolute;top:50%;left:50%;margin-left:-85px;width:170px;height:2px;overflow:hidden}
.infoContent02 > li .bar span{opacity:0;position:absolute;width:100%;height:2px;background:#89848c;left:0;right:0;transform:scale(0);}
.infoContent02 .txt02 {font-weight:700;}

.projectsPointWrap {background-color:#f54f7e;}
.projectsPointWrap .innerWrap {position:relative;max-width:996px;margin:0 auto;top:-92px;padding-bottom:30px;}
.projectsPointWrap .innerWrap .tit {font-size:30px;font-weight:700;letter-spacing:-1.5px;color:#ffffff;}
.projectsPointWrap .innerWrap .subTxt {margin-top:15px;font-size:17px;line-height:1.76;letter-spacing:-0.85px;color: #ffffff;}
.projectsPointWrap .innerWrap [class*="row"] {position:relative;width:838px;height:700px;margin:0 auto;}
.projectsPointWrap .innerWrap [class*="row"] img {max-width:362px;border-radius:35px;box-shadow: -20px 20px 40px 0 rgba(0, 0, 0, 0.16);}
.projectsPointWrap .innerWrap [class*="row"] [class*="item"] {position:absolute;}
.projectsPointWrap .innerWrap [class*="row"] [class*="item"] img {transform:translateY(100px);}
.projectsPointWrap .innerWrap .itemTxt {max-width:365px;opacity:0;transform:translateY(100px);}
.projectsPointWrap .innerWrap .item01 {top:0;left:0}
.projectsPointWrap .innerWrap .item02 {top:0;right:0}
.projectsPointWrap .innerWrap .row01 {height:934px;}
.projectsPointWrap .innerWrap .row01 .item02 {margin-top:193px;}
.projectsPointWrap .innerWrap .row01 .itemTxt {bottom:0;}

.projectsPointWrap .innerWrap .row02 {margin-top:230px;height:730px;}
.projectsPointWrap .innerWrap .row02 .item02 {margin-top:193px;}
.projectsPointWrap .innerWrap .row02 .itemTxt {top:0;right:-50px;max-width:441px;}
.projectsPointWrap .innerWrap .row02 .itemInner img {max-width:996px;border-radius:0;box-shadow:none;transform:translateX(150px) translateY(0px);opacity:0;}
.projectsPointWrap .innerWrap .row02 .itemInner {top:322px;left:-116px;}

.projectsPointWrap .innerWrap .row03 {margin-top:230px;height:972px;}
.projectsPointWrap .innerWrap .row03 .item01 {top:242px;}
.projectsPointWrap .innerWrap .row03 .itemTxt {top:0;}




/************************** 
    @media query
***************************/
/* 태플릿 버전 */
@media screen and (max-width:1500px) {
    img {max-width:100%;}
    .projects .innerWrap {max-width:100%;padding:0 75px;}
    .projectsView .innerWrap {padding-top:230px;}
    .projectsView .conTit, .projectsView .conTxt {max-width:50%;}
    .projectsView .imgWrap {right:100px;}
}
@media screen and (max-width:1365px) {
    .projectsView .imgWrap {padding-right:0}
    .projectsView .imgWrap:after {display:none;}
    .projectsView .conTit, .projectsView .conTxt {max-width:60%;}

    .projectsInfo .infoContent {width:100%;height:340px;}
    .projectsInfo .infoContent .item:nth-child(2) {left:370px;}
    .projectsInfo .infoContent .item:nth-child(3) {left:740px;}
    .projectsInfo .infoContent .item .txt{width:340px;height:340px;border-radius:170px;}
    .infoContent02{font-size:75px;}
}

@media screen and (max-width:1240px) {
    .projectsInfo .infoContent {width:100%;height:250px;}
    .projectsInfo .infoContent .item:nth-child(2) {left:280px;}
    .projectsInfo .infoContent .item:nth-child(3) {left:560px;}
    .projectsInfo .infoContent .item .txt{width:250px;height:250px;border-radius:125px;font-size:15px;}
    .projectsInfo .infoContent .item .txt br {display:none;}
    .projectsInfo .infoContent .item .txt .mBr {display:block;}
    .infoContent02{font-size:42px;letter-spacing:-3px}
}

@media screen and (max-width:1040px) {
    .projectsView {height:auto;padding-bottom:80px;}
    .projectsView .conTit, .projectsView .conTxt {max-width:100%;}
    .projectsView .imgWrap {opacity:0}
    .projectsView .imgWrap {position:relative;top:0;right:initial;margin:50px 0;text-align:center;transform:translateX(0%) translateY(15px);}
    .projectsView .imgWrap .inner {margin:0 auto;}
    .projectsView .conTxt {margin-top:0;}
  
}
@media screen and (max-width:980px) {
    .projectsInfo .infoContent {height:auto;}
    .projectsInfo .infoContent .item {position:relative;left:0 !important;width:250px;margin:0 auto;}
    .projectsInfo .infoContent .item + .item {margin-top:-30px;}
    .projectsInfo .infoContent + .tit {margin-top:60px;}
    .projectsPointWrap .innerWrap [class*="row"] {width:100%;}
    .projectsPointWrap .innerWrap [class*="row"] img {max-width:280px;border-radius: 25px;}
    .projectsPointWrap .innerWrap .row01 {height:765px;}
    .projectsPointWrap .innerWrap .itemTxt {max-width:318px !important;}
    .projectsPointWrap .innerWrap .row02 {margin-top:150px;height:565px;}
    .projectsPointWrap .innerWrap .row02 .itemTxt {right:0;}
    .projectsPointWrap .innerWrap .row02 .itemInner {top:245px;left:-99px}
    .projectsPointWrap .innerWrap .row02 .itemInner img {max-width:800px;}
    .projectsPointWrap .innerWrap .row03  {margin-top:150px;height:807px;}
}

/* 모바일 버전 */
@media screen and (max-width:767px) {
    .projects .innerWrap {padding:0 30px;}
    .projectsView{padding-bottom:50px}
    .projectsView .innerWrap {padding-top:100px;}
    .projectsView .imgWrap .inner {width:200px;height:385px;}
    .projectsView .conTit {font-size:49px;text-align:center;}
    .projectsView .conTit .sTit {padding-left:0;font-size:13px;text-align:center;}
    .projectsView .conTxt {font-size:15px;}
    .projectsView .imgWrap .inner {border-radius:20px;}
    .projectsView .imgWrap .inner .icon {width:145px;height:auto;top:167px;left:27px;}
    .projectsInfo {padding:55px 0;}
    .projectsInfo .infoContent {margin-top:30px;}
    .projectsInfo .infoContent .item {transform:translateX(0);}
    .infoContent02 {max-width:360px;margin:30px auto 0;}
    .infoContent02 > li [class*="txt"] {float:none;display:block;width:100%;}
    .infoContent02 > li .txt02:before {left:0;width:45px;}
    .projectsPointWrap {padding-bottom:100px;}
    .projectsPointWrap .innerWrap {top:0;padding-top:70px;max-width:360px;}
    .projectsPointWrap .innerWrap [class*="row"] img {max-width:140px;border-radius:12px;}
    
    .projectsPointWrap .innerWrap .tit {font-size:17px;font-weight:700;letter-spacing:-0.85px;}
    .projectsPointWrap .innerWrap .subTxt {margin-top:10px;font-size:15px;line-height:1.73;letter-spacing:-0.75px;}

    .projectsPointWrap .innerWrap .row01 .item02 {margin-top:68px;}
    .projectsPointWrap .innerWrap [class*="row"] {height:auto !important;}
    .projectsPointWrap .innerWrap .imgWrap {position:relative;}
    .projectsPointWrap .innerWrap .itemTxt {position:relative !important;margin-top:40px;transform: translateY(40px);}
    .projectsPointWrap .innerWrap .row01 .imgWrap{height:286px}
    .projectsPointWrap .innerWrap .row01 .itemTxt {margin-top:60px;}
    .projectsPointWrap .innerWrap .row02 .imgWrap{height:285px}
    .projectsPointWrap .innerWrap .row03 .imgWrap{height:378px}
    .projectsPointWrap .innerWrap .row02 {margin-top:70px;height:340px;}
    .projectsPointWrap .innerWrap .row02 .itemTxt {top:initial;bottom:0}
    .projectsPointWrap .innerWrap .row02 .itemInner {top:126px;left:-42px;}
    .projectsPointWrap .innerWrap .row02 .itemInner img {max-width:370px;}
    .projectsPointWrap .innerWrap .row03 .itemTxt {top:initial;bottom:0}
    .projectsPointWrap .innerWrap .row03  {margin-top:70px;height:807px;}
    .projectsPointWrap .innerWrap .row03 .item01 {top:93px;}

    .infoContent02 > li .txt01 {transform: translateX(0);opacity:1;}
    .infoContent02 > li .txt02 {transform: translateX(0);opacity:1;}
    .infoContent02 > li .bar {display:none}
    .infoContent02 > li .txt02:before {content:'';display:block;position:absolute;top:50%;left:0;width:45px;height:2px;background:#89848c;}


}