@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* Web font */
@font-face {
font-family: 'NTS';
font-style: normal;
font-weight: 400;
src: url(/resources/font/NotoSans-Regular.eot);
src: url(/resources/font/NotoSans-Regular.woff) format('woff');
}

@font-face {
font-family: 'NTS';
font-style: normal;
font-weight: 500;
src: url(/resources/font/NotoSans-Medium.eot);
src: url(/resources/font/NotoSans-Medium.woff) format('woff');
}

@font-face {
font-family: 'NTS';
font-style: normal;
font-weight: 700;
src: url(/resources/font/NotoSans-Bold.eot);
src: url(/resources/font/NotoSans-Bold.woff) format('woff');
}

@font-face {
font-family: 'NBG';
font-style: normal;
font-weight: 400;
src: url(/resources/font/NanumBarunGothic.eot);
src: url(/resources/font/NanumBarunGothic.woff) format('woff');
}

@font-face {
font-family: 'NSEB';
font-style: normal;
font-weight: 800;
src: url(/resources/font/NanumSquareEB.eot);
src: url(/resources/font/NanumSquareEB.woff) format('woff');
}

@font-face {
font-family: 'NSEB';
font-style: normal;
font-weight: 800;
src: url(/resources/font/NanumSquareEB.eot);
src: url(/resources/font/NanumSquareEB.woff) format('woff');
}
@font-face {
font-family: 'Gmarket Sans'; font-style: normal; font-weight: 300;
src:url('/resources/font/GmarketSans/GmarketSansLight.eot');
src:url('/resources/font/GmarketSans/GmarketSansLight.eot?#iefix')	format('embedded-opentype');
src: local('/resources/font/Gmarket Sans Light'), local('GmarketSans-Light'),	
url('/resources/font/GmarketSans/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/resources/font/GmarketSans/GmarketSansLight.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('/resources/font/GmarketSans/GmarketSansLight.svg#GmarketSansLight') format('svg');
}
@font-face {
font-family: 'Gmarket Sans'; font-style: normal; font-weight: 500;
src:url('/resources/font/GmarketSans/GmarketSansMedium.eot');
src:url('/resources/font/GmarketSans/GmarketSansMedium.eot?#iefix')	format('embedded-opentype');
src: local('/resources/font/Gmarket Sans Medium'), local('GmarketSans-Medium'),
url('/resources/font/GmarketSans/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/resources/font/GmarketSans/GmarketSansMedium.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('/resources/font/GmarketSans/GmarketSansMedium.svg#GmarketSansMedium') format('svg');
}
@font-face {
font-family: 'Gmarket Sans'; font-style: normal; font-weight: 700;
src:url('/resources/font/GmarketSans/GmarketSansBold.eot');
src:url('/resources/font/GmarketSans/GmarketSansBold.eot?#iefix')	format('embedded-opentype');
src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
url('/resources/font/GmarketSans/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/resources/font/GmarketSans/GmarketSansBold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('/resources/font/GmarketSans/GmarketSansBold.svg#GmarketSansBold') format('svg');
}
/* css Reset */
html{/*-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%*/-webkit-text-size-adjust:none; overflow-X:hidden; overflow-y:auto;}
header, footer, main, section, article, nav, aside{display:block;box-sizing:border-box;}
*::before, *::after{-webkit-box-sizing:inherit; box-sizing:inherit; image-rendering: -webkit-optimize-contrast;}
body,input,textarea,button,select,table,h1,h2,h3,h4,h5,h6{font-family:'Gmarket Sans', 'Noto Sans KR', 'Nanum Gothic','돋움','dotum', Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;color:#7f7f7f;}
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,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,form,fieldset,legend,button,input,select,optgroup,textarea,label,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,strong{margin:0; padding:0; box-sizing:border-box; letter-spacing:-1px;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
mark{background-color:#ff0;color:#000}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
figure{margin:1em 40px}
pre{font-family:monospace, monospace;font-size:1em}template{display:none}[hidden]{display:none}progress{display:inline-block;vertical-align:baseline}summary{display:list-item}
ol,ul{list-style:none}
dt,dd{display:block}
caption,legend{overflow:hidden;font-size:0;line-height:0}
canvas{display:inline-block}
img{max-width:100%;border-style:none;vertical-align:top; image-rendering: -webkit-optimize-contrast;}
fieldset,img{border:none}
button,input{overflow:visible}
button,select{text-transform:none}
input,button,select{vertical-align:top}
input,button,select,textarea{font-size:inherit;box-sizing:border-box;}
/*input[disabled],input[readonly]{cursor:not-allowed;background-color:#eaeaea;}*/
button,[type="button"],[type="reset"],[type="submit"]{border:0 none;background:none;cursor:pointer;-webkit-appearance:button}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
/*[type="checkbox"],[type="radio"]{}*/
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;margin:0;font-family:inherit;font-size:inherit;color:inherit;}
select::-ms-expand {display:none;}
textarea{display:block;overflow:auto;resize:vertical;}
address,em,i{font-style:normal}
a {text-decoration:none; color:inherit;}
hr{box-sizing:content-box;height:0;overflow:visible;margin:0;padding:0;border:0}
li{list-style: none;}
span{font-size: inherit; font-weight: bold; color: #393939;}


html,body,#wrap {width:100%;height:100%;}
#wrap{overflow: hidden;overflow-y:auto; position: relative;}

/* 오른쪽 상단 한중일 */
#wrap .header_txt{position:absolute;top:-120px;right:0;padding-right:20px;}
.header_txt li{ display:inline-block;font-size: 15px; }
.header_txt li + li::before{ content: ''; width: 1px;height: 12px;display: inline-block;vertical-align: -1px;background: #ccc; margin: 0 10px 0 10px;}
.txt_box{width: 100%; text-align: center;font-size:50px; margin-bottom:95px; color: #393939;}
.txt_box .txt{display: inline-block;}
.txt_box .txt_txt{display: inline-block;}
.txt_box span {font-weight:900; }


/* 가운데 박스 */
.wrap_inner{ max-width: 1613px; width: calc(100% - 40px); height: 500px; max-height:100%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;}
.box_border{ width: 100%; height: 342px; max-height:100%; display: flex; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; justify-content: space-between; -ms-justify-content:space-between; -webkit-justify-content:space-between; padding: 0 10px;  }
.box_list{display:block; width: calc(16.666% - 12px); height: 344px; max-height:100%;  border-radius: 10px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25); overflow: hidden; background-color: #fff;  }
.box_list .bg_img{background-repeat: no-repeat; background-size: cover; background-position:center; border-radius: 0% 0% 50% 50% / 0% 0% 25% 25% ; margin-left: -5%; position: relative; overflow: hidden; height:210px; width:110%;}
.box_list .bg_img::before{transition:0.2s ease; content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65) url("../images/logo.png") center 50%; background-repeat: no-repeat; opacity:0;}
.box_list:hover .bg_img::before{opacity:1;}
.box_list.list_food .bg_img{ background-image: url("../images/pood5.png"); }
.box_list.list_portal .bg_img{ background-image: url("../images/pood1.png");}
.box_list.list_market .bg_img{ background-image:url("../images/pood2.png"); }
.box_list.list_biz .bg_img{ background-image:url("../images/pood6.png"); }
.box_list.list_sauce .bg_img{ background-image: url("../images/pood3.png"); background-position: left -10px center;}
.box_list.list_senior .bg_img{ background-image: url("../images/pood4.png"); }


.box_list:last-child {margin-bottom:0;}
.right_txt {margin-top: 25px;}
.list_txt{ text-align: center; font-weight: bold; font-size: 20px; line-height:34px; margin-bottom: 0; color: #393939; }
.list_txt1{ text-align: center; font-size: 16px;   font-weight: 500; color: #7d7d7d;}

/* footer */
.footer{ width: 100%; height: calc(50% - 212px); background-color: #8bc53f; position: absolute; bottom: 0;}
.footer .footer_warp {margin-top:100px;}
.footer_warp .footer_txt{ text-align: center; color: white; font-size: 14px;text-shadow: 0 0 5px rgb(0, 0, 0, 0.5);}
.footer_txt p{  margin-top: 0;}

@media all and (max-width:1480px){
	.list_txt{font-size:18px; line-height:1.5;}
}

@media all and (max-width:1300px){
    .box_border{height: 325px;}
    .right_txt{margin-top:20px;}
    .txt_box{font-size: 42px; margin-bottom:85px;}
	.list_txt{line-height:1.4;}
    .box_list .bg_img{height:195px;}
    .footer{height: calc(50% - 170px);}

}
@media all and (max-width:1200px){
    html, body, #wrap{min-height: 100%; height: auto;}
    #wrap{overflow-y: hidden;}
    .wrap_inner{height: auto; position: static; transform: translate(0, 0); width: 100%; padding: 0 20px;}
    .box_border{flex-wrap: wrap; height: auto;}

    #wrap .header_txt {margin:30px 0 50px 0;width:100%;text-align:right;overflow:hidden; position: static;}
    

    .txt_box .txt,
    .txt_box .txt_txt{display: block;}

    .box_list{width: calc(33.333% - 12px); height: 334px;}
	.list_txt{line-height:1.9;}
	.list_txt1{margin-top:10px;}
    .box_list:nth-child(n + 4){margin-top: 15px;}
    .footer {padding:50px 0;height:auto; position: static; margin-top: 80px;}
    .footer .footer_warp{margin-top: 30px;}
}
@media all and (max-width:880px){
    
    #wrap .header_txt,
    .footer {margin-top:50px;}

    
    .wrap_inner {height:auto;max-height:none; transform:none;margin-top:85px;}
    .txt_box {font-size: 30px;margin-bottom:40px;}
    
    .box_border{max-width: 760px; width: 100%; height: auto; display: block; margin: 0 auto; }
    .box_list { max-width: unset; max-width: none; width: 100%; height: 120px; display: block; margin-bottom: 20px; }
    .box_list::after{content: ''; clear: both; display: block;}
    .box_list .bg_img {width:200px;height:calc(100% + 20px);display:inline-block;margin-top:-10px;border-radius: 0% 15% 15% 0% / 0% 50% 50% 0% ;}
    .box_list .bg_img:hover::before{content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65) url("../images/logo.png") 65% center; background-repeat: no-repeat; }
    .box_list:nth-child(5) .bg_img {background-position: left -10px center;}
    .box_list:last-child .bg_img{background-position: top 2px center;}
    .right_txt{display:inline-block;vertical-align: top;width:calc(100% - 210px); margin-top:25px;}
    .list_txt1{margin-top: 10px;font-size:14px;line-height:16px;}

    
    .footer address {margin-bottom:10px;}
    .footer .footer_warp {margin:0; padding: 0 20px;}
}
@media all and (max-width:768px){
    .wrap_inner {margin-top:40px;}
    .box_list .bg_img:hover::before{background: rgba(0, 0, 0, 0.65) url("../images/logo.png") 60% center; background-repeat: no-repeat;}
}
@media all and (max-width:600px){
    .txt, .txt_txt{font-size: 28px; }
    .header_txt li{font-size: 13px;}
    .box_border{padding:0;}
    .box_list .bg_img {min-width:150px; width:40%;}
    .box_list .right_txt {width:calc(100% - 200px);}
    .box_list .right_txt .list_txt1 {font-size:12px;}

}
@media all and (max-width:500px){
    #wrap .header_txt{padding-right:0;}
    .box_list .bg_img {min-width:145px; max-width:160px;}
    .box_list .right_txt {width:calc(100% - 145px);}
    .txt, .txt_txt{  font-size: 26px; }
    .list_txt{ font-size: 17px;}
    .list_txt1{font-size: 13px;}
    .header_txt li,
    .footer_warp .footer_txt {font-size: 13px;}
    .footer_warp .footer_txt p {font-size: 12px;}
}
@media all and (max-width:365px){
    .header_txt li{ font-size: 11px;}
    .txt_box .txt_txt {font-size:20px;}
    .list_txt{ font-size: 14px; }
    .list_txt1{font-size: 11px;}

	.box_list .bg_img{min-width:130px;}
	.box_list .right_txt {width:calc(100% - 130px);}

}
@media all and (max-width:315px){
	.list_txt{ line-height:1.4;}
}