@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Josefin+Sans:wght@300;400;500;600&family=Noto+Sans+KR:wght@300;400;500&family=Playfair+Display+SC:wght@400;700;900&family=Raleway:wght@300;400;500;600;700&display=swap');

*{margin:0; padding:0;}
ol, ul{list-style:none;}
a{text-decoration:none; color:#111;}
html,body{font-family: 'DM Serif Display', serif;font-weight:300;  }

/* layout reset style */
.clear:after{display:block; content:''; clear:both;}
.center{max-width:1200px; width:100%; margin:auto; height:auto;}
.wrap{width:100%; height:100vh;}

/* ----------------------------------------- */

.scene {height: 100vh;overflow: hidden; background-attachment: fixed; background-size: cover;}
 

.scene.one{background-image: url(../img/mainBack.jpg);}
/* .scene.one{background-image: url(../img/32.jpg);} */
.scene.two{_background: #2C282A; background-image: url(../img/mainBack.jpg);}
/* .scene.two{_background: #2C282A; background-image: url(../img/32.jpg);} */
.scene.three{background:#fff;}
.scene.four{background: #2C282A;}

/* main section  */
.scene.one .main{width:100%; height:100%;}
.scene.one .main .mainLeft{float:left; width:50%; position: relative;}
.scene.one .main .mainLeft img{width:100%;}
.scene.one .main .mainLeft span{width:1px; height:100vh; background:#DB4131; position: absolute; top:0; left:23%;}
.scene.one .main .mainLeft .mainTxt{position:absolute; bottom:30%; left:30%;}

.scene.one .main .mainRight{position: relative; padding:9rem 7rem; box-sizing:border-box; }
/* .scene.one .main .mainRight img{width:82%; opacity:0.2; position: absolute;} */
.scene.one .main .mainRight .imgyh{background:url(../img/00ha.png) no-repeat center center; width: 100%; height: 100%; position: absolute; top:9%; opacity: 0.3; left: 2%;transform:scale(0.85);}
.rightText{position: absolute; color:#DB4131; width:55%; font-family: 'Raleway', sans-serif; display:block;     padding: 1rem;  box-sizing: border-box;}
.rightText h4{text-align:right;}
.webTitle{padding-top:350px;     font-size: 1.7rem;}
.webTitle span p{display:inline-block; opacity:0.85;}
.mainRight .mainline{display:block; width:150px; height:1px; color:#DB4131; position: absolute;}



.mainTxt h2{font-size:8rem; color:#DB4131; font-family: 'Josefin Sans', sans-serif; position: absolute; bottom:27%; right:-24%; transform:rotate(-90deg);}
.mainTxt .listBox{width:73%; height:620px; border:1px solid #DB4131;}
.mainTxt .list{position: absolute; bottom:10%; opacity:0.5;}
.mainTxt .list li{float:left; padding-right:20px;  font-family: 'Raleway', sans-serif; font-weight:600; font-size:1rem; color:#DB4131;}
.mainTxt .list li a{display:block;  padding-right:20px;  font-family: 'Raleway', sans-serif; font-weight:600; font-size:1.2rem; color:#DB4131;}
.scene.one .main .mainRight{float:right; width:50%; height:100%; background: #2C282A;}


/* skills section  */
.scene.two .skills{width:100%; height:100%;}
.scene.two .skills>div{padding:9rem 7rem; box-sizing:border-box;}
.scene.two .skills .skLeft{float:left; width:50%; height:100%; position: relative; background: #2C282A;}
.scene.two .skills .skRight{float:right; width:50%; height:100%; background:rgba(255, 253, 253, 0.3);}

.scene.two .skills .skLeft span{width:1px; height:100%; background:#DB4131; position: absolute; top:0; left:23%;}
.scene.two .skills .skLeft p{text-align: right; color: #2C282A;
  text-shadow: -1px 0#DB4131, 1px -1px 0#DB4131, -1px 1px 0#DB4131, 1px 1px 0#DB4131; display:block; font-size:6rem; line-height: 1.1;}

.scene.two .skills .skRight{font-family: 'Josefin Sans', sans-serif;}
.scene.two .skills .skRight>div{padding:40px 0; line-height: 2.6;}
.scene.two .skills .skRight h4{border-top: 2px solid #111; position: relative; padding-bottom:1.2rem;}
.scene.two .skills .skRight h4::before{content:''; width:50px; height:4px; display:inline-block; position: absolute; background:#111;}
.scene.two .skills .skRight p{font-weight: 400;}

.skRight .skill>div{float:left;}
  /* .skRight .skill .tag{width:20%;} */
.skRight .skill .progress{width:100%; _background:#ededed;}
.skRight .skill .progress>span{float:left; font-size:0.8rem; padding:12px 0;}
.skRight .skill .progress .tag{width:20%; font-weight: 400;}
.skRight .skill .progress .bar{width:80%;  _padding:28px 0; display:flex; align-items: center;}
.skRight .skill .progress .bar span{width:0; height:1px; background:#111; display:block;  _vertical-align:middle; float:left;}
/* .skRight .skill .progress .bar::after{display:inline-block;vertical-align: middle; width:98%; height:1px; content:''; background:#111;} */
.skRight .skill .progress .bar .counter{width:3%; float:left; margin-left:1rem;}

  /* project section  */
  .project{width:100%; height:100%;}
  .project_title{width:100%; height:auto; font-family: 'Josefin Sans', sans-serif; text-align:center;  padding:9rem 7rem; box-sizing:border-box;}
  .project_title h4{font-size:2rem; padding-bottom:1rem;}
  .project_title .sub_title a{font-weight: 400; padding:0 1rem;}
  .project_title .sub_title a:hover{color:#DB4131;}
  .project_title .sub_title .subInfo{padding-top:1rem; font-family: 'Raleway', sans-serif; color:#6666; }

  
  .project_main{width:50%; height:337px; margin:auto;}
  .project_main .mainSlide{width:50%; height:337px; margin:auto; position: relative; margin:auto;  _transition:all 0.2s; }
  .project_main .mainSlide>div{float:left; width:100%; _background:#ededed;  _position: absolute; }
  .project_main .mainSlide>div.n1{_background:#aaa; left:0;}
  .project_main .mainSlide>div.n2{_background:#bbb; left:100%;}
  .project_main .mainSlide>div.n3{_background:#ccc; left:200%;}
  .project_main .mainSlide>div.n4{_background:#ddd; left:-100%;}

.slideInner h4{ color: #fff;
    text-shadow: -1px 0#DB4131, 1px -1px 0#DB4131, -1px 1px 0#DB4131, 1px 1px 0#DB4131; font-size:9rem; font-family: 'DM Serif Display', serif; text-align: center; position: relative;}
.slideInner h4:hover, .slideInner h4.active{color:#DB4131;}
.slideInner .innerText{width:100%; text-align: center; color:#2C282A; display:none;}
.slideInner h4::before{display:inline-block; width:80px; height:1px; content:''; background:#DB4131; position: absolute; top:50%; left:0;}
.slideInner h4::after{display:inline-block; width:80px; height:1px; content:''; background:#DB4131; position: absolute; top:50%; right:0;}


/* .slideInner h4:hover,.slideInner h4.active{color:#928684;} */
.slideInner .innerText b{font-size:1.2rem; font-family: 'Raleway', sans-serif;}
.slideInner .innerText b::after{content: ''; width:37px; height:3px; background:#DB4131; display:block; margin: 0.4rem auto 1.5rem auto;}
.slideInner .innerText p{font-family: 'Noto Sans KR', sans-serif; font-size:0.9rem;}
.slideInner .innerText a{padding:0.5rem 1rem; background:#aaa; color:#fff; display:inline-block; font-family: 'Raleway', sans-serif; font-size:0.5rem; margin:1rem;}
.slideInner .innerText a:hover{background:#2C282A;}

.bottom_title{width:100%; height:auto; text-align:center; position: relative; bottom: -14%;
  font-size: 0.8rem;}
.bottom_title b{font-family: 'Josefin Sans', sans-serif; }

  /* contact section  */
.contact{width:100%; height:100%; padding:10rem 7rem 7rem 7rem; box-sizing:border-box;}
.contact>div{width:100%; height:100%; float:left; border-right:1px solid #DB4131; box-sizing: border-box;}
.contact .desc{width:43%; position: relative;}
.contact .desc_2{width:27.5%;}
.contact .desc_3{width:29.5%;}

.contact .desc h1{color: #2C282A;
    text-shadow: -1px 0#DB4131, 1px -1px 0#DB4131, -1px 1px 0#DB4131, 1px 1px 0#DB4131; display:block; font-size:6rem; line-height: 1.1; font-family: 'Playfair Display SC', serif; position:absolute; bottom:0; left:10%;}
.contact .desc img{position: absolute; opacity:0.05;}
.contact .desc img.left{bottom:48%;}
.contact .desc img.right{bottom:0%; right:-33px;}

.contact .desc_2{padding:0 3rem; color:#DB4131; font-family: 'Raleway', sans-serif;}  
.contact .desc_2 b{padding-bottom:1rem; display:block; font-size:1.3rem;}

.contact .desc_3{padding:0 0 0 3rem; color:#DB4131; font-family: 'Raleway', sans-serif; }
.contact .desc_3 b{font-family: 'Playfair Display SC', serif; font-size:3rem; display:block; padding-bottom:1rem;position: relative; top:-15px;}
.contact .desc_3>p{display:block; padding:2rem 0;}
.contact .desc_3 .contact_info{border-top:1px solid #DB4131;
  border-top:1px solid #DB4131; _padding:1rem 0; box-sizing:border-box;}
.contact .desc_3 .contact_info p{display:block; padding:1rem 0;  border-bottom:1px solid #DB4131;}  
.contact .desc_3 .contact_info p i{display:inline-block; padding-right:0.4rem;}
.contact .desc_3 .contact_info p.sendEmail{cursor: pointer;}


/* CONTACT OPINION */
.common{width:100%; height:auto; box-sizing: border-box; padding:8rem;}
.opinion h4{ font-family: 'Raleway', sans-serif; color:#2C282A; line-height: 1.8;}
.opinion form{padding-top:3rem;}
.opinion input{width:100%; height:auto; box-sizing: border-box; border:0; border-bottom:1px solid #111; padding:1rem; outline:0; font-family: 'Noto Sans KR', sans-serif;}
.opinion textarea{margin-top:2rem; width:100%; height:400px; resize: none;  box-sizing: border-box; border:0; border-bottom:1px solid #111; padding:1rem; outline:0; font-family: 'Noto Sans KR', sans-serif;}
.opinion textarea::placeholder, .opinion input::placeholder{font-family: 'Noto Sans KR', sans-serif;}
.opinion button{padding:0.5rem 3rem; background:#2C282A; color:#DB4131; outline:0; border:0; float: right; cursor: pointer;}
.opinion button a{color:#DB4131;}

.opinion button.submit{margin-left:0.6rem;}

.question_input{width:100%; height:auto; background:#fff;}
.question_input .qProduct, .question_input .qTitle{width:89.5%;}
.question_input .qMsg{width:100%; box-sizing: border-box; padding:1rem;}
.question_input .order.submit{margin-left:1rem;}

.question{width:100%; height:auto;}
.questBox{width:100%;}
.qList{width:100%; height:auto; border-top:1px solid #111; _border-bottom:1px solid #111; }
.qList .qContents{width:100%; padding:0.5rem 0; display:flex; align-items: center; background:#fff;}
.qList .qContents:not(:last-child){border-bottom:1px solid #111;}
.qList .qContents span{float:left; padding:0 0.5rem; box-sizing: border-box;text-align: center; display:block; font-family: 'Raleway', sans-serif;}
.qList .qContents span.num{width:5%;}
.qList .qContents span.pName{width:11%;}
.qList .qContents span.qEmail{width:30%;}
.qList .qContents span.qText{width:42%;}
.qList .qContents span.qDate{width:12%;}


.numbering{width:100%; text-align: center; padding:1rem 0; font-family: 'Raleway', sans-serif; cursor: pointer;}
.numbering span{padding:0 0.2rem;}
.page_number.on{color:#DB4131;}

.qbutton{width:100%; display:flex; justify-content: space-between;}
.search{box-sizing: border-box; padding:0.5rem; border:0; border-bottom:1px solid #111; outline:0;}
.search_input{box-sizing: border-box; padding:0.55rem; border:0; border-bottom:1px solid #111; outline:0;}
.sButton{box-sizing: border-box; padding:0.6rem; border:0; border-radius: 0; background:#111; color:#fff; outline: 0;}
.sButton i{color:#fff;}
.qbutton a{box-sizing: border-box; padding:0.55rem 2rem; color:#fff; background:#111;}




.send li.right a>span{position: relative;}
.send li.right a>span:nth-child(1){transform:rotate(45deg);}
.send li.right a>span:nth-child(2){transform:rotate(-45deg); top:-2px;}
.right .menu{cursor: default;}
.left{cursor: pointer;}


 header span.leftBox{display:none; width:8%; _position: absolute;}
 header span.leftBox a{width:8%; color:#ddd; padding:1rem 0; display:block; border-bottom:1px dotted #ddd; font-family: 'Josefin Sans', sans-serif; }
 header span.leftBox a:hover, header span.leftBox a.active{color:#111; border-bottom:1px dotted #111;}