@charset "euc-kr";
/*webfont*/

 /*reset*/
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
     display: block;
 }
 body {
     line-height: 1;
 }
 ol, ul {
     list-style: none;
 } 
 blockquote, q {
     quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
     content: '';
     content: none;
 }
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Noto+Sans:wght@400;700&family=Roboto:wght@300;400;500;700;900&display=swap');

 * {
     box-sizing:border-box;
 }
 a {    
    color:#fff;    
    text-decoration:none;
}
button {
    cursor:pointer;
}
html {
    font-size:10px; 
}
body {
    color:#666666;     
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    font-size : 1.6rem;
}
::-webkit-scrollbar { 
    width:10px;
    background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
        height: 17%;
        background-color: rgba(51, 63, 112, 0.5);
      
}
::-webkit-scrollbar-track{
        background-color: rgba(255,255,255,1);
}

#section1 {
    width: 100%;
    height: 100vh;
}
.img_bg {
    width: 100%;
    height: 100vh;
    align-items: center;
    background:url(../images/sub_img1.jpg) no-repeat center center;
    background-size:cover;  
    transform: scale(1.02);
    animation:scale 1s ease-in 1s forwards; 
     
}
.img_bg_contact {
    width: 100%;
    height: 100vh;
    align-items: center;
    background:url(../images/sub_img2.jpg) no-repeat center center;
    background-size:cover;  
    animation:scale 1s ease-in 1s forwards;   
    transform: scale(1.02);
}
@keyframes scale {
	0% {
		transform:scale(1.02);		
	}
	100% {
		transform:scale(1);
	}
}
.text_area {
    position: relative;
	display: flex;
    justify-content: space-between;
	align-items: center;
	width:100%;
	height: 100vh;
	max-width:1400px;
    /* padding:0 32px; */
	margin:0 auto;
	color:#fff;     
}
.title {   
    font-size:5.6rem;
    font-family:'Roboto', sans-serif ;
    font-weight: 700;
    color:#fff;  
    text-align: left;    
}
.subtitle {	
    position: absolute;
    margin-top: 200px;
	line-height: 1.5;     
}
.sub_wrap {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin:0 auto;
    padding:30px 0 30px;
    /* padding-right: 50px; */
}
.sub_wrap2 {
    width: 100%;
    max-width: 1400px;
    margin:0 auto;
    padding:100px 32px;  
    text-align: center;  
}

.sub_wrap h2 {    
    font-size:3.2rem;
    font-family:'Montserrat', sans-serif ;
    font-weight: 700;
    color:#000;
    margin-top: 100px;
    margin-bottom: 10px;
}
.sub_desc01 {
    font-size:1.4rem;
    font-family:'Montserrat', sans-serif ;
    color:#525252;
    margin-bottom: 30px;
}
.product_wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    width:100%;	
	max-width:1400px;
	margin:0 auto;   
}
.sub_desc02 {
    color:#666666;     
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    font-size : 1.6rem;
    font-weight: 600;
}
.product_wrap ul li {   
    margin-bottom: 36px;
}
.product_wrap ul li img{   
    margin-bottom: 15px;
}
.product_wrap ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 100px;
}
.product_wrap ul li {
    width: 20.9580%;
    text-align: center;
}
.low_content {
    width: 100%;
    height: 350px;
    background:url(../images/low_img1.png) no-repeat center center;
    background-size:100% 350px;  
    margin-top: 120px;
}
.low_content2 {
    width: 100%;
    height: 350px;
    background:url(../images/low_img2.png) no-repeat center center;
    background-size:100% 350px;  
    text-align: center;
    margin-top: 120px;
}
.low_content {
    text-align: center;    
}
.desc_subt {
    font-size:3rem;
    color:#fff;
    font-family: 'Noto Sans KR', 'Roboto';
    font-weight:500;
    padding: 80px 0 50px 0;
}
.desc03 {
    font-size:1.6rem;
    font-family: 'Noto Sans KR', 'Roboto';
    font-weight:300;   
    line-height: 1.8;
    color:#fff;
    text-align: center;   
}
.btn_white {
    font-size:1.6rem;
    font-family: 'Noto Sans KR', 'Roboto';
    color:#fff;
    background-color: rgba(0,0,0,0);
    border:1px solid #fff;
    padding: 10px 20px;
    margin-top: 30px;
    text-align: center;    
}
.btn_white:hover{
    background-color: #222;
    border:1px solid #222;
    color:#fff;
    transition: all 1s;
}
footer {    
    background-color: #F1F1F1;
}
.footer_wrap {
    width: 100%;
    height: 100px;
    max-width: 1400px;
    padding:0 32px;
    margin:0 auto;
}
.footer_wrap ul {
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.desc06 {
    font-size:1.2rem;
    color:#888;
    text-align:right;
}
.footer_wrap ul li:nth-child(1) {
    width:65.5815%;
}
.btn_top {
	cursor: pointer;
}
.logo_foot_wrap {
    display: none;
}
/* contact us */
input.form_input {
    width: 100%;
    height: 34px;
    border:1px solid #f1f1f1;    
    padding:0 10px;  
    color:#000814;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    font-size : 1.4rem;   
    outline:none;   
    -webkit-appearance:none;
    -webkit-border-radius:0;
}
input:focus {
    border:1px solid #333F70;
}
input:disabled {
    background-color:#f1f1f1;
}
input::placeholder {
    color:#888;
}
textarea {
    width: 100%;
    height: 122px;
    border:1px solid #f2f2f2;
    color:#000814;
    font-family: 'Nanum Gothic', sans-serif;
    font-size : 1.4rem;  
    line-height: 1.5;
    padding:10px;
    outline:none;    
    resize:none;
}
textarea:focus {
    border:1px solid #333F70;
}
textarea:disabled {
    background-color:#f1f1f1;
}
textarea::placeholder {
    color:#888;
}

.contact_form {    
    width: 100%;
    margin-top: 50px; 
    border-top:1px solid #53585a;  
    border-bottom:1px solid #53585a;  
    
    
}
.contact_form tr {
    border-bottom:1px solid #eee;    
}
.contact_form tr td {
    padding: 13px 26px;
    width: 82%;    
    
}
.contact_form tr th {
    text-align: right;
    border-right:1px solid #53585a;
    font-weight: 700;
    padding-right:37px;
    width: 18%;
    
}
.required th label,
.required th span {
    position: relative;
}
.required th label:before,
.required th span:before {
    content:'*';
    position: absolute;
    top:0;
    left:-20px;
    color:#FF4500;  
    font-size: 2.4rem;
    font-weight: 300;
}
.contact_form tr th.vertical_top {
    vertical-align: top;
    padding-top: 21px;
}
.btn_gray {
    font-size:1.4rem;
    font-family: 'Noto Sans KR', 'Roboto';  
    background-color: #222;
    border:1px solid #222;
    color:#fff;
    padding: 10px 20px;
    margin-top: 30px;    
    text-align: center;    
}
.btn_area {
    width: 100%;
    margin-top: -1px;
    text-align: center;
    border-top: 1px solid #53585a;
    margin-bottom: 100px;
}
.sub_wrap {
    position: relative;
}

/* modal_popup시작 */
.modal_container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color:rgba(0, 0, 0, 0.6);
    z-index: 500;
  }
  .modal_conts {  
    position: absolute;
    top: 30%;
    left: 50%;
    padding:40px;
    background-color:#fff;
    border-radius:20px;     
    border:1px solid #f1f1f1;
    transform: translate(-50%, -50%);
  }
  .modal_img {
      width: 100%;      
  }
  .modal_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .thumb img {
      width: 93%;
      cursor: pointer;
  }
  .modal_title {
    
    margin-bottom: 30px;
    font-size:2rem;
    font-weight: 600;
    color:#373944;
  }
  .close {
    position: absolute;
    top: 50px;
    right: 50px;
    color:#000;
    cursor: pointer;
  }
  .modal_photo {
    display: flex;
    padding:10px 0 0 0;
  }
  .modal_photo span {
      font-size: 1.6rem;
      color:#AFAFAF;
      padding-right: 20px;
  }
  .modal_photo p {
    font-size: 1.6rem;
    color:#373944;
    font-weight: 600;
}
.modal_photo .price_c {
    color:#FF0000;
}
.pro_more {
    width: 96%;
    cursor: pointer;
}
.modal_container2 {    
    position: absolute;   
    display: none;  
    justify-content: center;
    align-items: bottom;  
    left:0;
    right:0;
    bottom:0;
      
  }
  .modal_contents2 {
    position: relative;
    position: absolute;
    top:30vh;
    width: 26%;
    height: 280px;
    padding:30px;
    background-color:rgba(255,255,255,1);
    border:1px solid #ccc;
    border-radius:20px;    
  }
  .close {
    position: absolute;
    top:40px;
    right:30px;
    cursor:pointer;
    z-index: 100;
  }
/* modal_끝 */


@media screen and (max-width:1460px) {   
    .product_wrap ul {
        width: 100%;       
    }      
    .sub_wrap {
        width: 100%;
        padding:0 30px;
    }
}
@media screen and (max-width:1360px) { 
    #section1 {
        position: relative;
        height: 60vh;
    }
    .right {
        height: 60vh;
    }
    .img_bg_contact, .img_bg {
        height: 60vh;
    }
    .menu1, .menu2 {
        height: 30vh;
    }
    .text_area {
        height: 60vh;
    }
    .container2 {
        margin-right: 20px;
    }   
    .sub_wrap {
        width: 100%;
        padding:0 30px;
    }
    .modal_contents2 {              
        top:30%;
    }   
    .item1 {        
        height: 280px;
        margin-right: 20px;
    }
    .product_wrap ul li img {
        width: 95%;
    }
    .footer_wrap ul li:nth-child(1) {
        width: 56.5815%;
    }
}
@media screen and (max-width:1024px) { 
    .title {
        font-size:4.2rem;
    }
     .product_wrap ul li {
        justify-content: center;
        width: 30%;   
        height: 260px;   
        margin-top: 60px; 
    }
    .product_wrap ul li img {
        width: 100%;
    }
    .footer_wrap ul li:nth-child(1) {
        width: 46.5815%;
    }   
    .modal_conts {
        width: 85%;
    }
    .sub_wrap {
        width: 100%;
        padding:0 30px;
    }
}
@media screen and (max-width:928px) {    
    .right {
        right: 0;
    }
    .product_wrap ul li {
    margin-top: 20px; 
    }  
    .modal_conts {
        width: 72%;
    }
    .sub_wrap {
        padding:0 60px 0 60px;
    }
}
@media screen and (max-width:850px) {
    .product_wrap ul li {
        margin-top: 10px; 
    }  
    .modal_conts {
        width: 72%;
    }
    .sub_wrap {
        width: 100%;
        padding:0 30px;
    }
    .logo_foot_wrap {
        display: inline-block;
    }
    .footer_wrap {
        display: none;
    }   
    .footer_wrap_mobile {
        width: 100%;
        height: 100px;
        max-width: 1400px;
        padding:0 32px;
        margin:0 auto;
    }
    .footer_wrap_mobile ul {
        width: 100%;
        height: 100%;
        padding-top: 30px;
        text-align: center;        
    }
    .logo_text {
        font-size: 1.8rem;
        color:#000212;
        font-weight: 600;
        padding-bottom: 15px;
    }
    .logo_text2 {
        font-size: 1.2rem;
        color:#888;
    }
    .modal_contents2 {        
        width: 40%;      
        top:30%;
    }
 }
@media screen and (max-width:780px) {  
    .title {
        text-align: center;
        padding:0;
    }
    .subtitle {
        width: 100%;
        text-align: left;
        left:0;
    }
    .modal_conts {
        width: 70%;
    }
    .sub_wrap {
        width: 100%;
        padding:0 30px;
    }
    .product_wrap ul li {
        margin-top: 0; 
    }
}
@media screen and (max-width:768px) { 
    .text_area {
        padding:0;
    }
    .title {
        text-align: center;
    }
    .subtitle {
        width: 100%;
        text-align: center;
    }
    .sub_wrap h2 {
        text-align: center;
    }
    .sub_desc01 {
        text-align: center;
        line-height: 2;
        padding:0 30px;
    }
    .product_wrap ul li {
        margin-top: -20px; 
    }  
    .modal_conts {
        width: 76%;
    }
    .sub_wrap {
        padding:0 60px;
    }
    
    .sub_desc02 {
        font-size:1.4rem;        
    }
    .sub_wrap p {
        padding-bottom: 20px;
    }    
    .footer_wrap ul li:nth-child(1) {
        width: 35.5815%;
    }  
    .btn_menu {
        display: inline-block;
        position:absolute;
        top:50px;
        right:20px;        
        width: 40px;
        height: 40x;
        cursor: pointer;
        transition: all 0.4s;
        z-index:1000;     
    }
    .btn_menu span {        
        position:absolute;
        top:0;
        left:0;
        width: 24px;
        height: 2px;
        background : #fff;
        transition: all 0.4s;
        z-index:1000;        
    }
    .btn_menu span:nth-child(1) {
        top:2px;
    }
    .btn_menu span:nth-child(2) {
        top:9px;
    }
    .btn_menu span:nth-child(3) {
        top:16px;
    }
    /* 햄버거 메뉴 x로 만들기 */
    .btn_menu.open span:nth-child(1) {
        top:7px;
        transform:rotate(45deg);
    }
    .btn_menu.open span:nth-child(2) {
        opacity:0;
    }
    .btn_menu.open span:nth-child(3) {
        top:7px;
        transform:rotate(-45deg);
    }
    .menu_all{
        display: inline-block;
        display: flex;      
        justify-content: center;       
        align-items: center;       
        position:absolute;
        top: 0;       
        left: -100%;
        width: 100%;
        height: 60vh;
        background-color: rgba(0,0,0,0.9);
        z-index:800;   
        transition: all 0.5s;    
    }
    .menu_all.menu_open {
        top:0;
        left:0;
        
    }
    .menu_01 {
        font-size:3rem;
        font-weight: 700;
        font-family: 'Montserrat';        
        color:#fff;
        line-height:2;
        margin:0 auto;
        cursor: pointer;
        z-index:1500;        
    }
    .contact_wrap {        
        font-size : 1.6rem;
    }
}

@media screen and (max-width:680px) { 
    .product_wrap ul li {
        margin-top: -40px; 
    }    
    .sub_wrap p {
        padding-bottom: 40px;
    }
    .contact_form tr th {
        display: none;
    }  
    .sub_wrap {
        padding:0 60px;
    }
    .sub_wrap p {
        padding-bottom: 40px;
    }
    .modal_contents2 {        
        width: 40%;      
        top:30%;
    }
 }

@media screen and (max-width:655px) { 
    .required th {
        display: none;
    }
    .sub_desc01 {
        font-size:1.2rem;
    }
    .product_wrap ul li {
        margin-top: -60px; 
        margin-bottom: 0;
    }
    .modal_conts {
        width: 76%;
    }    
    .sub_wrap p {
        padding-bottom: 60px;
    }
 }
 @media screen and (max-width:630px) {  
    .product_wrap ul {
        margin-top: 80px;
        margin-bottom: 0;
    }   
    .modal_conts {
        width: 76%;
    }    
    .sub_wrap p {
        padding-bottom: 60px;
    }
    #section2 p {
        padding:0;
        margin:0;
    }
}

@media screen and (max-width:580px) {
    .title {
        font-size:2.8rem;
        line-height: 1.5;
    }
    .subtitle {
        margin-top: 130px;
        font-size: 1.3rem;
    }   
    .modal_conts {
        width: 76%;
    }
    .sub_wrap {
        padding:0 30px;
    }
    .sub_wrap h2 {
        text-align: center;
    }
    .sub_desc01 {
        text-align: center;
        line-height: 1.8;
        padding:0 30px;
    }
    .product_wrap ul {
        margin-bottom: 0;
    }
}

@media screen and (max-width:500px) {
    .product_wrap ul li {
        width: 45%;
        margin-bottom: 60px;
    } 
    .sub_wrap {
        padding:0 30px;
    }
    .product_wrap ul li img {
        width: 100%;
    }  
    .product_wrap ul li:nth-child(8) {
        display: none;
    }   
    .modal_conts {
        width: 80%;
    }
    .modal_contents2 {        
        width: 60%;   
    }
    .modal_title {
        font-size:1.8rem;       
    }
}
@media screen and (max-width:400px) {
    #section1 {
        height: 50vh;
    }
    .sub_wrap h2 {
        padding-top: 100px;
    }   
    .product_wrap ul li {
        width: 45%;      
        margin-bottom: 20px;
    } 
    .sub_wrap {
        padding:0 30px;
    } 
    .modal_conts {
        width: 80%;
    }
    
    .modal_title {
        font-size:1.4rem;
        margin-top: 2px;
    }
    .modal_contents2 {        
        width: 70%;          
        
    }
}