@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR:300,400,500,600,700&display=swap&subset=korean');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap');

@font-face { 
    font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; 
}
@font-face { 
    font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; 
}
@font-face { 
    font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; 
}

/*
font-family : 'Noto Serif KR', serif;
font-family : 'Noto Sans KR', sans-serif;
font-family : 'NanumSquare', sans-serif;
font-family : 'GmarketSansLight', sans-serif;
font-family : 'GmarketSansMedium', sans-serif;
font-family : 'GmarketSansBold', sans-serif;
*/


* { margin: 0; padding: 0;}
html,body { width: 100%; height: 100%; min-width: 1180px;}
ul,li {list-style: none;}
a {text-decoration: none; color: inherit;}
p, span, h1, h2, h3, h4, h5, h6, a, li { font-family : 'Noto Sans KR', sans-serif; }
.mob {display: none;}
.pc {display: block;}
#header {min-width: 1180px;}

#wrap {width: 100%;}
#header {width: 100%; position: absolute; left: 0; top: 0; margin: 0px auto; height: 80px; z-index: 10; background: rgba(0,0,0,0.5);}
#header_inner{width:100%; max-width: 1200px; margin: 0px auto; padding-top: 20px; font-size: 0px;}
#header_logo {width: 12%;  display: inline-block; vertical-align: top;}
#header_logo img {max-width: 130px;}
#nav {width: 64%;  margin-left: 7%; margin-right: 7%; display: inline-block; vertical-align: top; font-size: 0px; padding-top: 15px; text-align: center;}
#nav li {cursor: pointer; display: inline-block; width:16.6%; font-size : 18px; letter-spacing : 0.8px; text-transform : uppercase; color : #fff; transform: skewX(-0.3deg);}
#nav li.on {font-weight: 800; color : #235744;}
#nav li:last-child {padding-right: 0px;}
#right_header {font-size: 0px;  width: 10%; display: inline-block; vertical-align: top; text-align: right; margin-top: 10px;}


#login {width: 100%; box-sizing: border-box; display: inline-block; text-align: center; cursor: pointer; vertical-align: top; padding: 5px 0px; border-radius: 5px;}
#login li {display: inline-block; position: relative; text-align: center; font-weight: bold; font-size: 15px; text-transform: uppercase; color: #fff; transform: skewX(-0.3deg); line-height: 20px; width: 50%; background: #e31213;}

#login li:nth-child(1) {background: #fff !important; color: #e31213 !important;}

/***************body*************/
/*****index****/
.container {width: 1200px; margin: 0 auto;}

.m_1 {width: 100%; background-image:url(/img/m1-1.png); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh;}
.m_1_img_box {width:800px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}


.dilivery {width: 100%; padding: 60px 0; border-bottom: 1px solid #ccc;}
.dilivery_img {max-width: 400px; display: block; margin: 0 auto; margin-bottom: 40px; border: 3px solid red;}
div#dil_num {width: 88%; display: inline-block;}
input[type="dil"] {border: none; height: 50px; padding-left: 15px;}
.dil_box {max-width: 30px; display: inline-block; vertical-align: middle;}
.arrow {max-width: 50px; display: block; margin: 0 auto;}

.m_2 {padding: 80px 0; width: 100%; height: 600px;}

.m_2_img_box {display: inline-block; width: 48%; float: left;}
.m_2_img_box:first-child img {margin-bottom: 40px;}
.m_2_img_box:last-child {float: right; margin-top: 100px;}
.m_2_img_box:last-child img {margin-top: 40px;}
.m_2_img_text {width: 70%; margin: 0 auto;}
.m_2_img_text:first-child {width: 100%;}
.m_2_img_text p:first-child {font-size: 20px; color: #000;}
.m_2_img_text p {font-family : 'Noto Sans KR', sans-serif; font-size: 16px; color: #000; font-weight: 600;}


.m_3 {width: 100%; padding: 80px 0px 120px 0;}
.m_3_back {position: relative; width: 100%; z-index: -1;}
.m_3_back_img {width: 1300px; height: 110vh; background-image: url(/img/map.png); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top: 400px; left: 50%; transform: translate(-50%,-50%);}
.m_3_img img:first-child {max-width: 700px; margin: 0 auto; display: block; margin-bottom: 40px;}

.m_4 {width: 100%; height: 550px; padding: 80px 0;}
.m_4_text {max-width: 60px; display: block; margin: 0 auto; margin-bottom: 40px;}

.m_4_back {width: 100%; margin: 0 auto;}
.m_4_back li {float: left; width: 40%;}
.m_4_back li iframe {width: 100%; height: 400px;}
.m_4_back li:last-child {float: right; width: 60%;}
.m_4_back li:last-child img {height: 400px;}

/********contact*********/
.inq_box div {margin: 0 auto;}
.m_4_contact {position: relative;}
.inq_text {display: block; max-width: 260px; margin: 30px 0 15px 20px !important;}
.inq_text img {display: block; width: 100px;}


.m_5 {width: 100%; padding: 50px 0px 80px 0;}
.m_5_text {max-width: 150px; display: block; margin: 0 auto; margin-bottom: 10px;}
.m_5_ex {display: block; margin: 0 auto; max-width: 1400px;}
.m_5_ex img:last-child {display: none;}

.m_6 {width: 100%; height: 280px;}


/***************7/28 수정************/

table.m_table {
    width: 90%;
    margin: 0 auto;
}


/********footer********/
#footer {width:100%; background-color: #111111; position: relative;}
#f_inner {width: 100%; max-width: 1000px; margin: 0px auto; display: block; font-size: 16px; position: relative; padding: 30px 0px;}
#f_inner li {display: inline-block; color: #fff; vertical-align: top; height: 100px;}
#f_inner li:nth-child(1) img {max-width: 150px;}
#f_inner li:nth-child(1) {width: 20%; margin: 0 auto; text-align: center;}
#f_inner li:nth-child(2) {width: 53%}
#f_inner li:nth-child(2) p {width: 380px; margin: 0 auto;}
#f_inner li:nth-child(2) span {font-weight: 800;}
#f_inner li:nth-child(2) p:nth-child(1) {padding: 10px 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-bottom: 10px;}
#f_inner li:nth-child(3) {width: 20%}
#f_inner li:nth-child(3) p {width: 180px; margin: 0 auto; font-weight: 600;}
#f_inner li:nth-child(3) p:nth-child(2) {font-weight: 600; font-size: 24px; margin-top: 10px; margin-bottom: 10px;}


/********footer********/
#footer2 {width:100%; background-color: #111111; position: relative;}
#f_inner2 {width: 100%; max-width: 1000px; margin: 0px auto; display: block; font-size: 13px; position: relative; padding: 20px 0px;}
#f_inner2 li {display: inline-block; color: #fff; vertical-align: top; height: 100px;}
#f_inner2 li:nth-child(1) img {max-width: 150px;}
#f_inner2 li:nth-child(1) {width: 20%; margin: 0 auto; text-align: center;}
#f_inner2 li:nth-child(2) {width: 53%}
#f_inner2 li:nth-child(2) p {width: 380px; margin: 0 auto;}
#f_inner2 li:nth-child(2) span {font-weight: 800;}
#f_inner2 li:nth-child(2) p:nth-child(1) {padding: 10px 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-bottom: 10px;}
#f_inner2 li:nth-child(3) {width: 20%}
#f_inner2 li:nth-child(3) p {width: 180px; margin: 0 auto; font-weight: 600;}
#f_inner2 li:nth-child(3) p:nth-child(2) {font-weight: 600; font-size: 24px; margin-top: 10px; margin-bottom: 10px;}


/*
#f_inner {width: 100%; max-width: 1000px; margin: 0px auto; display: block; font-size: 0px; position: relative; padding: 30px 0px;}

#f_inner li {display: inline-block; vertical-align: top; padding-top: 10px;}
#f_inner li:nth-child(1) {width: 15%; padding-top: 0px;}
#f_inner li:nth-child(1) img {width: 90%; max-width: 100px; }
#f_inner li:nth-child(2) {width:25%;}
#f_inner li:nth-child(3) {width: 37%;}
#f_inner li:nth-child(4) {width: 23%;}


#f_inner li > p:nth-child(1) {font-family: 'NanumSquare', sans-serif; font-weight : bold;
  font-size : 15px; line-height : 27.29px; color : #FFFFFF; transform: skewX(-0.3deg);}
#f_inner li > p:nth-child(2) {font-family: 'NanumSquare', sans-serif; font-size : 13px; line-height : 19px; text-transform : uppercase;
  color : #FFFFFF; transform: skewX(-0.3deg);}
#f_inner li:nth-child(2) > p:nth-child(2) {font-size: 16px; line-height: 24px;}
#f_inner li:nth-child(2) > p:nth-child(3) {font-family: 'NanumSquare', sans-serif;   font-weight : 800; font-size : 20px; line-height : 23.59px; color : #FFFFFF;}
.f_bold {font-weight: bold;}
#f_inner li:nth-child(3) > p:nth-child(3) { font-family: 'NanumSquare', sans-serif; font-size : 14px; line-height : 28px; color : #FFFFFF; transform: skewX(-0.3deg);}
*/

#footer p.copy { font-family: 'NanumSquare', sans-serif; font-size : 14px; line-height : 22.59px; color : #FFFFFF; transform: skewX(-0.3deg); border-top: 1px solid #fff; padding: 20px 0px; text-align: center; }

#footer2 p.copy2 { font-family: 'NanumSquare', sans-serif; font-size : 14px; line-height : 22.59px; color : #FFFFFF; transform: skewX(-0.3deg); border-top: 1px solid #fff; padding: 20px 0px; text-align: center; }