@import url('reset.css');


@font-face {
    font-family: 'SUIT-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MaruBuri-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#wrap { width: 100%; background-color: #fff; }

#header_wrap { width: 100%; }
#contents_wrap_1 { width: 100%; margin-top: 100px;}
#contents_wrap_2 { width: 100%; margin-top: 150px;}
#contents_wrap_3 { width: 100%; }
#contents_wrap_4 { 
    width: 100%; 
    height: 650px; 
    margin-top: 150px;
    background: url("../images/bottom_banner_1920__.jpg") center center fixed;
    background-size: cover;
}
#footer_wrap { width: 100%; background-color: rgb(97, 97, 97); }




#header { position: absolute; width: 100%; text-align: center; z-index: 9999; background-color: rgba(20, 33, 53, 0.575);}
#header h1 { float: left; width: 30%; height: 100px; padding-top: 30px; padding-left: 80px;  box-sizing: border-box;}

nav {float: left; width: 65%; height: 100px; }
nav ul.gnb { float: right; margin-top: 50px;}
nav ul.gnb li { float: left; padding: 0 30px;}
nav ul.gnb li a { font-size: 16px; font-weight: 200; color: rgba(255, 255, 255, 0.452);}
nav ul.gnb li a:hover { color: rgb(219, 70, 25);}




/* 이미지슬라이드 */
#banner { 
    position: relative; 
    width: 100%;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
#banner img { max-width: 100%; height: auto; }

.img_text { 
    position: absolute; 
    top: 24%; 
    left: 58%; 
    color: #bdbcbb;
    font-family: 'MaruBuri-Regular';
    font-size: 40px;
    text-align: center;
    padding-top: 50px;
}

.img_text span.it_2 { font-size: 70px; line-height: 150px;
    color: rgb(175, 124, 66)}
.img_text span.it_3 { font-size: 20px; color: #bdbcbb; margin-left: 10px;  margin-top: 120px; }
.img_text span.it_4 { border-top:1px solid rgb(175, 124, 66); font-size: 13px; color: #bdbcbb; }
.img_text span.it_5 { font-size: 13px; color: #bdbcbb; }




#contents_1 { position: relative; width: 1200px; margin: 0 auto; }

#contents_2 { position: relative; margin: 0 auto; background-color: antiquewhite; }
#contents_3 { position: relative; width: 100%; margin: 0 auto; }

.q_title { 
    width: 100%; 
    text-align: center;
    font-size: 65px;
    color: #000;
    font-weight: 600;
    margin-bottom: 35px;
    letter-spacing: -2px;
    font-family: 'MaruBuri-Regular';
}
.q_title span { font-weight: 400; }

.q_text { 
    width: 100%; 
    text-align: center; 
    font-size: 22px;
    color: #9c8151;
    margin-bottom: 70px;
    font-family: 'MaruBuri-Regular'; 
}


.more { position: absolute; top: 115px; right: 5px; }
.more a { 
    background: #555; 
    color: #fff; 
    font-size: 12px; 
    padding: 3px 7px 5px 7px; 
    border-radius: 3px;
}
.more a:hover { background: #000; }



.box_1 { float: left; width: 285px; margin-right: 20px;}
.box_1-1 { float: right; width: 285px;}


.box_1 a:hover img { opacity: 0.7; transform: scale(1.2);}
.box_1-1 a:hover { opacity: 0.7; }


.box_image { overflow: hidden; }
.box_image a:hover img { opacity: 0.7; transform: scale(1.5);}
.box_image * { transition: all 1s ease; }



.box_b  { position:relative; width: 1200px; margin: 0 auto; }
.box_image_b { float: left; width: 380px; margin-right: 30px; margin-bottom: 80px;}
.box_text_b { float: left; width: 600px; padding: 100px 30px 0px 150px; text-align: justify; font-family: 'MaruBuri-Regular'; 
    font-size: 35px; font-weight: 600; line-height:50px;
    color: rgb(175, 124, 66); letter-spacing: -1px; }
.box_text_d { float: left; width: 600px; padding: 10px 30px 0px 150px; text-align: justify; font-family: 'MaruBuri-Regular'; 
    font-size: 16px; font-weight: 300; line-height: 30px;
    color: rgb(83, 83, 83); letter-spacing: -1px; }

.box_image_b1 { float: left; height: auto; margin-right: 10px; margin-bottom: 50px; margin-top: 188px;}
.box_image_b2 { float: left; height: auto; margin-right: 10px; margin-bottom: 50px; margin-top: 305px;}
.box_image_b3 { float: right; height: auto; margin-right: 0px; margin-bottom: 50px; margin-top: 50px;} 
.box_text_b1 {  position:absolute; top : 0px; left : 0px; width: 650px; margin: 50px 0px ; text-align: justify; font-family: 'MaruBuri-Regular'; 
    font-size: 30px; font-weight: 600; color: rgb(175, 124, 66); letter-spacing: -1px; }   
.q_text_1 { 
    position:absolute; top: 100px; left : 0px; 
    float: left; 
    width: 100%; 
    text-align: left; 
    font-size: 15px;
    color: rgb(83, 83, 83);
    margin-bottom: 0px;
    font-family: 'MaruBuri-Regular'; 
}    

.more1 { float: left; margin-top:500px; }
.more1 a { 
    background: #555; 
    color: #fff; 
    font-size: 12px; 
    padding: 3px 20px 5px 20px; 
    border-radius: 3px;
}
.more1 a:hover { background: #000; }


    
.box_2 { float: left; width: 33.33333%; }
.box_2-1 { float: right; width: 33.33333%; }

.box_2 img { width: 100%; max-width: 100%; height: auto; }
.box_2-1 img { width: 100%; max-width: 100%; height: auto;  }

.box_2 a:hover { opacity: 0.7; transition: 0.5s;}
.box_2-1 a:hover { opacity: 0.7; transition: 0.5s; }



.box_1_text { text-align: left; font-size: 20px; color: #000; padding-top: 25px;}
.box_1_text span { color: rgb(109, 109, 109); font-family: 'GmarketSansBold'; padding-left: 10px;}

.box_d  { float: left; width: 700px; margin-right: 30px;}
.box_d_text {  float: left; font-size: 20px; color: #000; padding-top: 50px;}
.box_d_text span { color: rgb(109, 109, 109); font-family: 'GmarketSansBold'; padding-left: 10px;}


.box_e  { float: left; position:relative; width: 600px; margin: 0 auto; }
.box_f  { float: left; position:relative; width: 585px; margin-left: 15px; }


.more2 { position: absolute; top:0px; right:0; }
.more2 a { 
    background: #555; 
    color: #fff; 
    font-size: 12px; 
    padding: 3px 20px 5px 20px; 
    border-radius: 3px;
}
.more2 a:hover { background: #000; }

.box_image_e  { margin:40px 0 30px 0;  overflow: hidden }
.box_image_f  { margin:40px 0 30px 0;  overflow: hidden }

.box_image_e a:hover img { opacity: 0.7; transform: scale(1.2);}
.box_image_e * { transition: all 0.3s ease; }
.box_image_f a:hover img { opacity: 0.7; transform: scale(1.2);}
.box_image_f * { transition: all 0.3s ease; }


.box_2_text { border-left:1px solid rgb(58, 58, 58); float:left; width: 360px; text-align: left; 
    font-size: 20px; color: #000; padding-top: 0px; padding-left: 20px; }
.box_3_text { float:right; width: 180px; text-align: right; font-size: 18px; padding-top: 0px; 
    padding-right: 20px; }
.box_4_text { border-left:1px solid rgb(58, 58, 58); width: 360px; text-align: left; font-size: 22px; font-weight:600; color: #000; 
    padding-top: 8px; padding-left: 20px; }


    

.banner_bottom { 
    position: relative; 
    width: 100%;
    height: 700px;
    background: url("../images/bottom_banner_1920_.jpg") center center fixed ;
}

.b_b_text { 
    width: 100%; 
    text-align: center; 
    color: rgb(90, 88, 88); 
    font-size: 50px; 
    font-weight: 400;
    padding-top: 100px;
}

.b_b_text2{ 
    text-align: center; 
    color:rgb(90, 88, 88); 
    font-size: 15px; 
    font-weight: 10;
    padding-top: 30px;
}

.b_b_text3 { 
    width: 100%; 
    text-align: center; 
    color: rgb(90, 88, 88); 
    font-size: 28px; 
    font-weight: 600;
    padding-top: 3px; 
}
    


#footer { width: 1200px; height: 240px; margin: 0 auto; background-color: rgb(97, 97, 97);}

.f_logo { float: left; width: 30%; padding: 50px 0px 0px 0px; color: rgb(233, 233, 233); }

.copy { float: left; width: 50%; padding-top: 70px; font-size: 14px; line-height: 28px; color: rgb(165, 164, 164);; }

.sns { float: right; width: 20%;}
.sns li { float: left; padding: 70px 0 0 20px; color: rgb(233, 233, 233);}

.sns li a i { font-size: 40px; color: #888;}
.sns li a:hover i { color: #000;}