.conCenter{max-width: 1680px; margin:auto; width:100%; height:auto;}
.section{box-sizing: border-box; padding: 14rem 22rem 7rem 10rem; _background:#aaa; width:100%; height:100vh;}
.dummy{position: fixed; width:20rem; right:0; height:100vh; background:#f2ede9; top:0; z-index:-1;}
.outsourcing{background:#c79aa054;}
.dummy h4{top: 57%; position: absolute; transform: rotate(90deg); color: #fff; font-size: 9rem; _left: -16rem;}
.section div.inner{box-sizing:border-box; padding:3rem; float: left;}
.section .display{width:60%; height:auto;}
.section div.inner.desc{padding-left:0;width:40%; height:100%; padding-top:0;}

.section p{font-size: 0.9rem; display:inline-block;}
.content{padding-right:2rem; padding-left:6rem;}


/* HEADER */
header{width:100%; height:auto; position:fixed; z-index:3; opacity:0;}
.head{width:100%; height:auto; display:flex; align-items: center; }
.head li{font-family: 'Josefin Sans', sans-serif; padding:3rem 0;}
.head li.left{float:left; width:8%;}
.head li.left a.home{display:none;}

.head li.middleLine{width:84%; float:left;}
.head li.middleLine span.line{width:100%; height:1px; background:#2C282A; display:block;}

.head li.right{float:right; display:flex; align-items: center; width:5%; padding-left:3%; transition: all 0.4s;}
.head li.right.active{position: relative;  top:3.5rem; right:10rem; transform:rotate(-90deg); }
.head li.right.active a.menuBar{display:none;}
.head li.right a{display:inline-block; color:#2C282A;}
.head li.right a.menu{float:left;}
.head li.right a.menuBar{width:1.4rem; float: right; padding-left: 12%;}
.head li.right a>span{ display:block; width:1.4rem; height:2px; background:#2C282A; float:right;}
.head li.right a>span.middle{margin:4px 0;}

.menuDepth{font-family: 'Josefin Sans', sans-serif; position: fixed; width:20rem; right:-20rem; height:100vh; background:#f2ede9; top:0; z-index:1; box-sizing: border-box; padding: 3rem;}
.menuDepth a{font-size:1.2rem; color:#fff; padding:1rem; display:block; border-bottom:1px dotted #fff; font-weight:bold;}
.menuDepth a.active, .menuDepth a:hover{color:#2C282A;}

/* SECTION DISPLAY  */
.display{width:710px; height:600px; overflow:hidden;}
.display .monitor{width:100%; height:564px; background:url(../img/imac.png) no-repeat center center; background-size: contain; position: relative; top:-50px;}
.display .monitor .main{width:600px; height:342px; background:#111; position: relative; top:4%; left:50%; transform:translateX(-50%); overflow: hidden;}
.display .monitor .main img.fullImg{width:116%; position:absolute; left:50%; transform:translateX(-50%); }
.display .monitor .main img.oneImg{width:100%; position: absolute; top:50%; transform:translateY(-50%); }

.display .monitor.mobile{background: url(../img/app.png)no-repeat center center; background-size: contain;}


/* POPUP */
.pop a.popupView{font-family: 'Raleway', sans-serif; float: right; font-weight: 600; cursor: pointer; padding-right: 1rem; animation: twinkle 1.2s  infinite; font-size:0.9rem; padding-top:0.3rem;}

@keyframes twinkle{0% {color:#111;} 100%{ color:#fff;}}

.popup{display:none; position:fixed; width:100vw; height:100vh; background:rgba(0,0,0,0.55); top:0; left:0;box-sizing: border-box; _padding: 7.5rem 28rem 7.5rem 7.5rem; z-index:9999999999!important;}
.popup .popmenu{position: absolute; left:50%; top:50%; transform:translate(-50%, -50%);  text-align:center;}
/* popup imac */
.popup .popmenu .imac{display:none; width:2100px; height:913px; background:url(../img/imacBlack.png) no-repeat ; background-size: contain; z-index:1; position: relative; top:2rem; left:50%; transform:translateX(-25%);}
.popup .popmenu .imac .view{width:970px; height:548px; overflow:hidden; position:absolute; background:#111; left:39px; top:39px;}
.popup .popmenu .imac iframe{width:100vw; height:116vh; z-index:9999999!important; 
  -moz-transform: scale(0.505);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.505);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.505);
  -webkit-transform-origin: 0 0;}

  /* popup tablet  */
.popup .popmenu .tablet{display:none; width:666px; height:887px; background:url(../img/ipad.png) no-repeat ; background-size: contain; z-index:1; position: relative; top:1rem;left:50%; transform:translateX(-50%); }
.popup .popmenu .tablet .view{width:584px; height:739px; overflow:hidden; position:absolute; background:#111; left:39px; top:39px;}
.popup .popmenu .tablet  .view iframe{width:100vw; height:283.5vh; z-index:9999999!important; 
    zoom:0.609;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    }

/* popup phone */
.popup .popmenu .phone{display:none; width:860px; height:893px; background:url(../img/iphone.png) no-repeat ; background-size: contain;  position: relative; top:0; left:50%; transform:translateX(-25%);}
.popup .popmenu .phone .view{width:384px; height:820px; overflow:hidden; position:absolute; background:#111; left:39px; top:39px; border-radius: 2rem;}
.popup .popmenu .phone .view iframe{width:100%; height:88%; z-index:9999999!important; position: relative; top:25px; 
    _zoom:0.567;
    /* -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    overflow:auto; */
} 


/* display  */
/* .display .imac{position: relative; width:710px; height:600px; overflow:hidden;}
.display .imac .screen{width:100%; height:100%; background:url(../img/imac.png) no-repeat ; background-size: contain; z-index:1; position: relative;}
.display .imac .screen .view{position: relative; width:638px; height:363px; overflow:hidden; top:27px; left:26px; padding:0; overflow:hidden;}
.display .imac .screen .view iframe{width:100vw; height:116.2vh; border:0; outline:0;}
.display .imac .screen .view iframe{
    -moz-transform: scale(0.3325);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.3325);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.3325);
    -webkit-transform-origin: 0 0;
    
} */

/* 
.popmenu .imac{position: relative; width:1500px; overflow:hidden;}
.popmenu .imac .screen{width:100%; height:100%; background:url(../img/imac.png) no-repeat ; background-size: contain; z-index:1; position: relative;}
.popmenu .imac .screen .view{position: relative; width:638px; height:363px; overflow:hidden; top:27px; left:26px; padding:0; overflow:hidden;}
.popmenu .imac .screen .view iframe{width:100vw; height:116.2vh; border:0; outline:0;}
.popmenu .imac .screen .view iframe{
    -moz-transform: scale(0.3325);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.3325);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.3325);
    -webkit-transform-origin: 0 0;
} */

/* .display .imac{position: relative; width:710px; height:600px; overflow:hidden;}
.display .imac .screen{width:100%; height:100%; background:url(../img/imac.png) no-repeat ; background-size: contain; z-index:1; position: relative;}
.display .imac .screen .view{background:#E7E2CF; position: relative; width:638px; height:361px; overflow:hidden; top:27px; left:26px; padding:0; overflow:hidden;}
.display .imac .screen .view iframe{width:100vw; height:100%; border:0; outline:0;} */


/* 11 */
/* .display .tablet{position: relative; width:710px; height:600px; overflow:hidden; _display:none;}
.display .tablet .screen.tab{width:100%; height:100%; background:url(../img/ipad.png) no-repeat center; background-size: contain; z-index:1;}
.display .tablet .screen.tab .view{background:#E7E2CF; position: relative; width:372px; height:491px; overflow:hidden; top:55px; left:170px;  padding:0; overflow:hidden;}
.display .tablet .screen.tab .view iframe{width:100vw; height:270vh;  border:0; outline:0;} */

/* .display .tablet .screen.tab .view iframe{ 
    zoom:0.388;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    overflow:auto;
    
    
} */

/* 22
.display .phone{ width:710px; height:600px; overflow:hidden;}
.display .phone .screen{width:115%; height:100%; background:url(../img/iphone.png) no-repeat center; background-size: contain; z-index:999999!important; position: relative;}
.display .phone .screen .view{background:#E7E2CF; position: absolute; width:260px; height:549px; overflow:hidden; top:28px; left:277px;z-index:-999999999; padding:0; border-radius: 1.4rem;}
.display .phone .screen .view iframe{width:100vw; height:418vh; border:0; outline:0;} */

/* .display .phone .screen .view iframe{
    zoom:0.35;
    -moz-transform: scale(0.4);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.4);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.4);
    -webkit-transform-origin: 0 0;
}

.renewal .display .phone .screen .view iframe{
    background:#fff;
    
    height:428vh;
    overflow: hidden;
    zoom:0.19;
    -moz-transform: scale(0.72);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.72);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.72);
    -webkit-transform-origin: 0 0;
} */



.title .subTitle{font-family: 'Josefin Sans', sans-serif;}
.title .mainTitle{font-family: 'Playfair Display SC', serif; font-size:3rem;}

.text, .sub{font-family: 'Noto Sans KR', sans-serif;}

.text{padding:2rem 0;}
.sub{padding: 1rem 0; border-bottom:1px solid #2C282A;}
.site{padding:1rem 0; display:block;}
.site a{display:inline-block; font-family: 'Noto Sans KR', sans-serif; _padding: 1rem 0;}
.site a.proposal{float:right; box-sizing: border-box; padding:0.2rem 0.7rem; border:1px solid #111; color:#fff; background:#2C282A; transition:all 0.4s; width:7rem; text-align: center;}
/* .site a.proposal:hover{color:#111; background:#fff;} */
.sub h2{padding-bottom:0.5rem; font-size:1.1rem;}
.desc>a{display:inline-block; font-family: 'Noto Sans KR', sans-serif; padding: 1rem 0;}
.desc>a>span, .site a>span{display:inline-block;}
.desc>a>span::before, .site a>span::before{width:20px; height:1px; background:#2C282A; vertical-align: middle; display:inline-block; content:''; position: relative; left: 7px; top: -1px; transition:all 0.4s;}
.desc>a:hover span::before, .site a:hover span::before{width:40px; }

/* .button{position: relative; top:10%; left:83.4%;}
.button button{background:#E7E2CF; border:1px solid #2C282A; padding:0.5rem 1rem; outline:0; cursor: pointer; width: 6rem; display:block;}

.close{color:#fff; padding-left:1rem; font-family: 'Raleway', sans-serif; position: relative; top:-6.3rem; left: 7rem; font-weight:600;}
.button button.on, .button button:hover{background:#2c282a; color:#fff;}

/* UI SECTION  */
/* .ui .display .imac .screen{width:100%; height:100%; background:url(../img/imac.png) no-repeat ; background-size: contain; z-index:1;}  */

/* loading  */
.loading-wrap{
  width:100%;
  height:100vh;
  background:#2C282A;
  z-index: 999999!important;
}
.loading-wrap.hide{
  display:none;
}
.loading{
  width:100%;
  height:100vh;
  position:relative;
}


.letter-holder{position: absolute; top: 50%;   left: 50%; transform: translate(-50%, -50%); font-size: 3rem; font-family: 'Playfair Display SC', serif; color:#DB4131;}
.letter-holder .letter {
  animation-name: loadingF;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: linear;
  display: inline-block;
  padding:0 0.2rem;
  font-weight: 700;
}

.l-1 {
  animation-delay: 0.2s;
}
.l-2 {
  animation-delay: 0.3s;
}
.l-3 {
  animation-delay: 0.4s;
}
.l-4 {
  animation-delay: 0.55s;
}
.l-5 {
  animation-delay: 0.6s;
}
.l-6 {
  animation-delay: 0.8s;
}
.l-7 {
  animation-delay: 1;
}
.l-8 {
  animation-delay: 1.2s;
}
.l-9 {
  animation-delay: 1.44s;
}
.l-10 {
  animation-delay: 1.56s;
}
.l-11 {
  animation-delay: 1.6s;
}
.l-12 {
  animation-delay: 1.7s;
}

.l-13 {
  animation-delay: 1.8s;
}
.l-14 {
  animation-delay: 1.9s;
}


@keyframes loadingF {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#fullpage{display:none;}