@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;
}


#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;}
#footer_wrap { width: 100%; margin-top: 150px; border-top: 2px solid #ccc;}




#header { position: relative; width: 1200px; margin: 0 auto;}
#header h1 { float: left; width: 30%; height: 150px; padding-top: 55px; box-sizing: border-box;}

nav {float: left; width: 70%; height: 150px; }
nav ul.gnb { float: right; margin-top: 100px;}
nav ul.gnb li { float: left; padding: 0 30px;}
nav ul.gnb li a { font-size: 18px; font-weight: 500; color: #000;}
nav ul.gnb li a:hover { color: rgb(185, 12, 12);}



/* nav { width: 100%; height: 60px; background: crimson;}
nav ul.gnb { width: 1200px; margin: 0 auto; }
nav ul.gnb li { 
    float: left; 
    width: 20%; 
    height: 60px; 
    text-align: center; 
    background: crimson;
    line-height: 60px;
}
nav ul.gnb li a { color: #fff; font-size: 20px; display: block;}
nav ul.gnb li a:hover { color: yellow; background: #000; transition: 0.7s;} */


.top_menu { position: absolute; top: 10px; right: 0; }
.top_menu li { float: left; padding: 0 10px;}
.top_menu li.line { font-size: 14px; color: #999; }
.top_menu li a { font-size: 14px; color: #999;}
.top_menu li a:hover { color: rgb(185, 12, 12); }



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

.img_text { 
    position: absolute; 
    top: 24%; 
    left: 65%; 
    color: #fff;
    font-family: 'SUIT-Medium';
    font-size: 2.5vw;
    line-height: 5vw;
}

.img_text span.it_2 { font-size: 4.5vw; }
.img_text span.it_3 { font-size: 3vw; color: #616055; margin-left: 10px; }
.img_text span.it_4 { font-size: 3vw; color: #646362;}







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

.icon { float: left; width: 8%; margin-left: 10%; text-align: center;}
.icon img { max-width: 100%; height: auto; }
.icon a:hover img{ opacity: 0.5; transform: scale(1.5);}
.icon_title { font-size: 18px; padding-top: 8px; color: #000;}

.icon *{ transition: all 1s ease; }



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

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

.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  { float: left; width: 380px; margin-right: 30px;}
.box_image_b  { float: right; width: 380px;}
.box_c  { float: left; width: 700px; margin-right: 30px;}


.box_1_text { text-align: center; 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;}


#banner_bottom { 
    width: 100%; 
    height: 400px;
    background: url("../images/bottom_img_.jpg")no-repeat center center fixed;
    background-size: cover;
    margin-top: 150px;
 }

.b_b_text { 
    width: 100%; 
    text-align: center; 
    color: rgb(214, 4, 4); 
    font-size: 65px; 
    font-weight: 600;
    padding-top: 150px;
}

.b_b_text_2 { 
    width: 100%; 
    text-align: center; 
    color: rgb(255, 100, 100); 
    font-size: 18px; 
    font-weight: 300;
    padding-top: 30px;
}

.box_2 { float: left; width: 380px; margin-right: 30px; background: #000;}
.box_2-1 { float: right; width: 380px; }

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

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



.box_3 { position: relative; float: left; width: 590px; margin-right: 20px; overflow: hidden; background: #000;}
.box_3-1 { position: relative; float: left; width: 285px; margin:0 20px 20px 0; overflow: hidden; background: #000;}
.box_3-2 { position: relative; float: left; width: 285px; margin:0 0 20px 0; overflow: hidden; background: #000;}
.box_3-3 { position: relative; float: left; width: 285px; margin-right: 20px; overflow: hidden; background: #000;}
.box_3-4 { position: relative; float: left; width: 285px; overflow: hidden; background: #000;}


.box_3 a:hover img { opacity: 0.7; transform: scale(1.5); }
.box_3-1 a:hover img { opacity: 0.7; transform: scale(1.5); }
.box_3-2 a:hover img { opacity: 0.7; transform: scale(1.5); }
.box_3-3 a:hover img { opacity: 0.7; transform: scale(1.5); }
.box_3-4 a:hover img { opacity: 0.7; transform: scale(1.5); }


.box_3 * { transition: all 1s ease; }
.box_3-1 * { transition: all 1s ease; }
.box_3-2 * { transition: all 1s ease; }
.box_3-3 * { transition: all 1s ease; }
.box_3-4 * { transition: all 1s ease; }

.store_name { 
    position: absolute; 
    bottom: 0;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 0;
    color: #fff;
    font-size: 20px;
    opacity: 0;
}

.box_3:hover .store_name { opacity: 1; }
.box_3-1:hover .store_name { opacity: 1; }
.box_3-2:hover .store_name { opacity: 1; }
.box_3-3:hover .store_name { opacity: 1; }
.box_3-4:hover .store_name { opacity: 1; }


.box_4 { float: left; width: 380px; height: 300px; border: 1px solid #bbb; box-sizing: border-box; padding: 30px 40px;}

.notice_title { font-size: 30px; color: #000; font-weight: 500; margin-bottom: 25px;}

.notice_list li { padding: 0 0 12px 0; }
.notice_list li a { font-size: 18px; }


.n_more { position: absolute; top: 10px; right: 10px; }

.n_more i { font-size: 24px; color: orange;}
.n_more i:hover { color: rgb(66, 45, 6);}




#banner_bottom_02 { 
    width: 100%; 
    height: 400px;
    background: url("../images/bottom_banner_black.jpg")no-repeat center center fixed;
    background-size: cover;
    margin-top: 100px;
 }

.b_b_text02 { 
    width: 100%; 
    text-align: center; 
    color: rgba(255, 255, 255, 0.753); 
    font-size: 65px; 
    font-weight: 600;
    padding-top: 150px;
}

.b_b_text_02_ { 
    width: 100%; 
    text-align: center; 
    color: rgb(179, 179, 179); 
    font-size: 25px; 
    font-weight: 400;
    padding-top: 30px;
    border-bottom: #000;
}

.b_b_text_03_ { 
    text-align: center; 
    color: rgb(179, 179, 179); 
    font-size: 15px; 
    font-weight: 10;
    padding-top: 10px;
}

.b_b_text_04_ { 
    width: 100%; 
    text-align: center; 
    color: rgb(179, 179, 179); 
    font-size: 20px; 
    font-weight: 250;
    padding-top: 3px; 
}
    


#footer { width: 1200px; height: 250px; margin: 0 auto;}

.f_logo { float: left; width: 30%; padding: 60px 0px 0px 0px;}

.copy { float: left; padding-top: 60px; font-size: 16px; line-height: 28px;}

.sns { float: right; }
.sns li { float: left; padding: 60px 0 0 20px;}

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