@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




/****mainbanner*******/
/****#mainbanner{
  width: 100%;
  margin: 0 auto;
  background-color: #fff1f1;
}

.wrap_mainbanner{
  width: 100%;
  height: 100vh;
  padding: 0 50px;
  box-sizing: border-box;
  position: relative;
}

.BAnner_textBox{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 50%;
  margin-left: 50px;
}

.wrap_mainbanner::after{
  display: block;
  content: "";
  clear: both;
}

.BannerIMG{
  width: 50%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-40%);
  animation: compare 2s infinite alternate;
  animation-timing-function:ease-in-out;
}


.BannerIMG img{
  width: 100%;
}

@-webkit-keyframes compare{
  from{
    top: 40%;
  }
  to{
    top: 50%;
  }
}



.first_banner_txt{
  font-size: 80px;
  font-family: 'yg-jalnan';
  background: linear-gradient(to right top, #861657, #ffa69e);
  color: transparent;
  -webkit-background-clip: text;
  font-weight: 900;
}

.second_banner_txt {
  font-size: 24px;
  margin-top: 20px;
}****/

#MaB{
  width: 100%;


}
.BIMG{
  width: 100%;
  height: 850px;
  background-image: url('../img/MainBanner.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
}

.BIMG >img{
  width: 100%;
}

.B_textB{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-attachment: fixed;
}

.Tit_Bann{
  color: #999;
  font-family: 'NanumSquare', sans-serif;
  font-size: 24px;
  transform: skew(-0.03deg);
  text-align: center;
}

.Second_Tit_Bann{
  text-align: center;
  margin-top: 20px;
  color: #fff;
  font-family: 'NanumSquare', sans-serif;
  font-size: 36px;
  transform: skew(-0.03deg);
  line-height: 50px;
  font-weight: 400;
}

.Second_Tit_Bann >span{
  display: inline-block;
  margin-left: 10px;
  color: #e2964b;
  font-family: 'NanumSquare', sans-serif;
  font-size: 35px;
  transform: skew(-0.03deg);
  font-weight: 800;
}


/**********/

/*****about**********************************************************/

/****New**/

.section_common{
  width: 100%;
  margin: 0 auto;
  padding-top: 150px;
}
.wrap_aboutME{
  width: 1180px;
  margin: 0 auto;
}

.Tit_MEnu{
  color: #fff;
  font-size: 36px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  position: relative;
}

.txt_about{
  text-align: center;
  margin-bottom: 110px;
}

.txt_about::after{
  display: block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: #fff;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
}


.Lf_about{
  display: inline-block;
  vertical-align: top;
  width: 34%;
}
.picture_Img{
  width: 400px;
  border-radius: 30px;
  position: relative;
  z-index: 3;
}

.picture_Img >img{
  width: 100%;
  border-radius: 30px;
}

.picture_Img::before{
  display: block;
  content: "";
  width: 100%;
  height: 354px;
  position: absolute;
  top: -10%;
  left: -10%;
  z-index: -1;
  border: 3px solid transparent;
  border-radius: 30px;
  background-image: linear-gradient(#222, #222), linear-gradient(to right, #fff, #6c6c6c);
  background-origin: border-box;
  background-clip: content-box, border-box;
  margin: 10px;
}

.hashTag{
  width: 100%;
  margin-top: 20px;
  font-size: 16px;
  color: #fff;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.003deg);
}

.hashTag >span{
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin-left: 10px;
}

.hashTag >span:first-child{
  margin-left: 0;
}


.Rf_about{
  display: inline-block;
  vertical-align: top;
  width: 62%;
  padding-left: 40px;
}

.M_T_about{
  font-family: 'Poppins', sans-serif;
  color: #fff;
  font-size: 30px;
}



.Ab_btn{
  display: inline-block;
  vertical-align: middle;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  box-sizing: border-box;
  border: solid 3px #e5e5e5;
  position: relative;
}

.Ab_btn:hover{
  border: solid 3px #e2964b;
}

.Ab_btn:hover >span{
  border-top: solid 3px #e2964b;
  border-right: solid 3px #e2964b;
}

.Ab_btn >span{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: solid 3px #e5e5e5;
  border-right: solid 3px #e5e5e5;
  margin-left: -2px;
}

.AB_text{
  display: inline-block;
  width: 90%;
  margin-left: 20px;
}



.car_txt{
  vertical-align: top;
  margin-top: 10px;
}

.carList{
  margin-top: 20px;
  width: 100%;
}

.carList >li{
  list-style: inside;
  line-height: 28px;
}

.carList >li::marker{
  display: inline-block;
  vertical-align: middle;
  color: #e5e5e5;
}

.carList >li >p{
  display: inline-block;
  vertical-align: middle;
  width: 95%;
  font-size: 16px;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
  color: #e5e5e5;
}

.date_text{
  font-size: 18px;
  color: #e5e5e5;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);

}

.date_text >span{
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  font-size: 18px;
  color: #e5e5e5;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
}

.License{
  margin-top: 60px;
}

.rf_list{
  margin-top: 40px;
}

.rf_list >li{
  margin-top: 20px;
}

.rf_list >li:first-child{
  margin-top: 0;
}


.licenseOver{
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0,0.6);
  z-index: 9999;
  display: none;
}
.licensePopup{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 99999;
  background-color: transparent;
  display: none;
}

.Webdesign_license{
  width: 500px;
}

.poto_license{
  width: 400px;
}

.WebdesignIMg{
  width: 100%;
}

.WebdesignIMg img{
  width: 100%;
}

.close_W{
  width: 25px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.poto_license .WebdesignIMg{
  margin-top: 50px;
}

.close_W img{
  width: 100%;
}




/*******/


.wrap_skill{
  width: 1180px;
  margin: 0 auto;
}


.txt_SKILLS{
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-top: 50px;
}

.txt_SKILLS::after{
  display: block;
  content: "";
  width: 100px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 44%;
  transform: translateY(-50%);
}


.skillLi{
  display: inline-block;
  vertical-align: top;
  width: 74.5%;
}

.skill_list{
  width: 100%;
}

.skill_list >li{
  display: inline-block;
  vertical-align: top;
  padding: 50px 0;
  width: 48%;
  margin-left: 20px;
  border: 1px solid #666;
}

.skill_list >li:first-child{
  margin-left: 0;
}

.skillNM{
  margin: 0 auto;
}

.skillNM >li{
  display: inline-block;
  vertical-align: middle;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  margin-left: 10px;

}


.skillNM >li:first-child{
  margin-left: 0;
}
.skillNM >li >p{
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

.de_sk{
  width: 33%;
}

.de_sk >li{
    padding: 15px 0;
}


.pub_sk >li{
    padding: 20px 0;
}

.pub_sk{
  width: 69%;
}

.de_sk >li >p{
  font-size: 24px;
}

.pub_sk{
  font-size: 16px;
}

.pub_sk >li >p{
  color: #fff;
}

.ps_color{
  color: #00abff;
}

.ai_color{
  color: #ffb400;
}

/* tit_skills */
.tit_skills{
  text-align: center;
  margin-top: 50px;
  font-size: 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

.op_skills{
  text-align: center;
  margin-top: 50px;
  font-size: 16px;
  line-height: 28px;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
}



.tit_skills{
  text-align: center;
  margin-top: 50px;
  font-size: 24px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

.op_skills{
  text-align: center;
  margin-top: 40px;
  font-size: 16px;
  color: #fff;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
  line-height: 26px;
}

/********/


/*****************/

/* 스크롤바 설정*/
.scrollBar::-webkit-scrollbar{
  width: 8px;
}
/* 스크롤바 막대 설정*/
.scrollBar::-webkit-scrollbar-thumb{
  height: 3%;
  background-color: rgb(34, 34, 34, 0.6);
  border-radius: 10px;
}
/* 스크롤바 뒷 배경 설정*/
.scrollBar::-webkit-scrollbar-track{
  background-color: rgb(102, 102, 102,0.3);
}


/*********main portfolio************/
/******************************/
/******************************/

#portfolio{
  width: 100%;
  margin: 30px auto 0;
  padding: 120px 0;
}

.wrap_portfolio{
  width: 1180px;
  margin:  0 auto;
}



.tab_line{
  width: 100%;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  margin-top: 80px;
}
.portTab{
  width: 300px;
  margin: 0 auto;
}


.portTab >li{
  display: inline-block;
  vertical-align: middle;
  width: 45%;
  margin-left: 20px;
}

.portTab >li:first-child{
  margin-left: 0;
}

.portTab >li.tApON{
  border-bottom: 1px solid #adadad;

}

.portTab >li >a{
  display: block;
  font-size: 18px;
  text-align: center;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
  color: #fff;
  line-height: 50px;
}

.wrap_portfolio{
  margin: 80px auto 0;
}

.protCommon{


}

.portTit{
  text-align: center;
  font-size: 24px;
  color: #666;
  margin: 0 auto 80px;
  line-height: 38px;
}

.IndividuumProt{
  display: none;
}

.protList{
  width: 100%;
  margin: 0 auto;
}

.protList >li{
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  width: 31.33%;
  position: relative;
  margin-top: 30px;
}

.protList >li:nth-child(n+1):nth-child(-n+3){
  margin-top: 0;
}

.protList >li:first-child{
  margin-left: 0;
}

.protList >li:nth-child(3n+1){
  margin-left: 0;
}

.port_Txtbox{
  width: 100%;
  margin-top: 20px;
}

.prot_tit{
  font-size: 18px;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
  color: #ccc;
  display: inline-block;
  vertical-align: bottom;
}

.date_tit{
  display: inline-block;
  vertical-align: bottom;
  font-size: 14px;
  margin:10px 0 0 15px;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
  color: #999;
}

.date2{
  font-size: 16px;
  margin-top: 10px;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
  color: #999;
}

.Port_way{
  font-size: 16px;
  margin-top: 20px;
  font-family: 'NanumSquare', sans-serif;
  transform: skew(-0.03deg);
  color: #999;
  line-height: 28px;
}

.portIMG{
  width: 100%;
  box-sizing: border-box;
}

.portIMG >img{
  width: 100%;
}

.protList >li:hover .shortcut{
   opacity: 1;
}

.CompanyList .shortcut{
  height: 24.9vh;
}

.shortcut{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 233px;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transition: 0.3s;
}

.shortcut >a{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: block;
  width: 40%;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  border-radius: 10px;
  line-height: 45px;
}

.sh_Li{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  margin: 0 auto;
}

.sh_Li >li{
  display: inline-block;
  vertical-align: middle;
  width: 46%;
  margin-left: 15px;
}

.sh_Li >li:first-child{
  margin-left: 0;
}

.sh_Li >li >span{
  display: block;
  background-color: #444;
  color: #e5e5e5;
  font-size: 16px;
  line-height: 45px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
}

.sh_Li >li >a{
  display: block;

  font-size: 16px;
  line-height: 45px;
  text-align: center;
  border-radius: 10px;
}



/*****/
.DesOFF{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  z-index: 999;
}

.Des{
  display: none;
  position: fixed;
  width: 100%;
  padding: 150px 50px;
  box-sizing: border-box;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 9999;
}

.Des .close_W{
  top: 10%;
  right: 3%;
}



.DesG{
  width: 100%;
}

.DesG >li{
  display: inline-block;
  vertical-align: top;
  margin-left: 50px;
  width: 47%;

}

.DesG >li:first-child{
  margin-left: 0;
}

.DesG >li:last-child .DEGINGIMG{
  height: 650px;
  overflow-y: scroll;
}

.DesG >li >p{
  font-size: 30px;
  text-align: center;
  color: #fff;
}

.DEGINGIMG{
  width: 100%;
  margin: 80px auto 0;
}

.DEGINGIMG img{
  width: 100%;
}



/***nch 스크롤 설정***/
.nchAB >li:first-child .DEGINGIMG{
  height: 650px;
  overflow-y: scroll;
}


/* 스크롤바 설정*/
.nchAB >li  .DEGINGIMG::-webkit-scrollbar{
  width: 8px;
}
/* 스크롤바 막대 설정*/
.nchAB >li .DEGINGIMG::-webkit-scrollbar-thumb{
  height: 3%;
  background-color: rgba(68, 68, 68,0.6);
  border-radius: 10px;
}
/* 스크롤바 뒷 배경 설정*/
.nchAB >li .DEGINGIMG::-webkit-scrollbar-track{
  background-color: rgb(102, 102, 102,0.3);
}


/*****/



/*****/

/* 스크롤바 설정*/
.DesG >li:last-child .DEGINGIMG::-webkit-scrollbar{
  width: 8px;
}
/* 스크롤바 막대 설정*/
.DesG >li:last-child .DEGINGIMG::-webkit-scrollbar-thumb{
  height: 3%;
  background-color: rgba(68, 68, 68,0.6);
  border-radius: 10px;
}
/* 스크롤바 뒷 배경 설정*/
.DesG >li:last-child .DEGINGIMG::-webkit-scrollbar-track{
  background-color: rgb(102, 102, 102,0.3);
}


/*****/

.short_color01{
  color: #e5e5e5;
  background: linear-gradient(45deg, #c82090, #974ef8);
}

.short_color02{
  color: #e5e5e5;
  background-color: #000;
  box-shadow: 0 0 7px 2px #3b3939 ;
}


.short_color03{
  color: #fff;
  background-color: #f58431;
}

.short_color04{
  color: #e5e5e5;
  background-color: #031a3f;
  box-shadow: 0 0 7px 2px #233146;
}

.short_color05{
  color: #fff;
  background-color: #70917c;
}

.short_color06{
  color: #fff;
  background-color: #3853a0;
}

.short_color07{
  color: #222;
  background-color: #c2eec1;
}



.short_color08{
  color: #fff;
  background-color: #ff8000;
}

.short_color09{
  color: #fff;
  background-color: #ee4a44;
}


.short_color001{
  color: #fff;
  background-color: #f9a94a;
}

.short_color002{
  color: #fff;
  background-color: #6043f6;
}


.short_color003{
  background-color: #0b5fa2;
  color: #fff;
}

.short_color004{
  background-color: #1b932a;
  color: #fff;
}

.short_color005{
  background-color: #222;
  color: #fff;
}

.deS_txt.coO{
  background-color: #305470;
  color: #fff;
}

.deS_txt.coO1{
  background-color: #0e4915;
  color: #fff;
}
/***홈으로 돌아가기*****/
#sub_header{
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}

.wrap_subheader{
  width: 1180px;
  margin: 0 auto;
}

.home{
  width: 100%;
  margin: 0 auto;
}

.home::after{
  display: block;
  content: "";
  clear: both;
}

.home >h1{
  float: left;
}

.home >h1 >a{
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.home_List{
  width: 25px;
}

.home >h1 >a >img{
  width: 100%;
}


/* pton */
.ptonList{
  width: 100%;
  margin: 80px auto 0;
}

.ptonList >li{

}

.ptonIMG {
  width: 100%;
}

.ptonIMG >img{
  width: 100%;
}



































































.Body{
  background-color: #222;
}