@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css);

/* basic setting */
* { padding:0; margin:0; }
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0 }
body, input, textarea, select, button, table { font-size:14px;  font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Noto Sans', Helvetica, AppleGothic, Sans-serif; color:#333; }
html { overflow-y:visible; }
html, body { width:100%; height:100%; padding:0; margin:0; }
img, fieldset { border:0; }
ul, ol, li { list-style:none; }
em, address { font-style:normal; }
a { text-decoration:none; }
header, footer, nav, section, article, aside { display:block; }
img { max-width:100%; }

* {box-sizing:border-box; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-0.5px;}
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 {
	font-family: 'Noto Sans KR', sans-serif;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
		font-family: 'Noto Sans KR', sans-serif;
	line-height: 1.5;
	letter-spacing:-0.5px;
	background:#fff;
}
ol, ul , li {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {text-decoration:none;color:black;}

/*구조*/
.pc_view { display:inline-block;}
.mb_view { display:none; }

/*pc*/
.wrap { width:100%; margin:0 auto; text-align:center;  min-width:800px;}
/*.wrap img { max-width:100%; display:block; margin:0 auto; }*/

.fixed {position:fixed; bottom:0; left:0; width:100%; background-color:#222; height:auto;z-index:999;}
.fixed .fixed_in {width:100%; margin:0 auto;}

.db_box{width:1200px;margin:0 auto;height:160px; overflow:hidden;}
.db_box .info{width:36%; position:absolute;top:5%;left:23%;}
.info dl{margin-top:10px;}
.info dl:after {display:block;visibility:hidden;width:0;height:0;content:"";}
.info dd {width:75%;text-align:left;float:right;height:45px;line-height:45px;color:#fff;}
.info dt {width:17%;text-align:left;float:left;height:45px;line-height:45px; color:#fff;font-size:16px;}
.info dd input[type="text"] {width:100%;height:38px;}
.info dd input[type="text"].short {width:30%;}
.info dd input[type="tel"] {width:100%;height:38px;}
.info dd input[type="tel"].short {width:30%;}
.db_box .btn_submit{width:30%;position:absolute;top:13%;left:53%;}
.btn_submit img{width:50%;}

.apply {width:80%;position:absolute;top:65%;left:23%;}
.apply ul{margin-top:10px;}
.apply li {font-size:14px;color:#fff;padding:5px;float:left;padding-right:20px;}
.apply li a {color:#fc0000;}
.apply li input , .apply li a {vertical-align:middle;}
.apply .commennt {font-weight:bold;}

.instagram {width:100%;padding:100px 0;}
.instagram h3 {font-size:36px; color:#111;font-weight:700;}
/*.instagram p {font-size:24px;padding:50px 0;line-height:36px;color:#333;}*/
.instagram a {
	-webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	display: block;
	margin: 20px auto;
	max-width: 180px;
	text-decoration: none;
	border-radius: 4px;
	padding: 20px 30px;
}
.instagram a.button {
	color: rgba(0, 0, 0, 0.6);
	font-weight:700;
	box-shadow: rgba(0, 0, 0, 0.4) 0 0px 0px 2px inset;
}

.instagram a.button:hover {
	color: rgba(255, 255, 255, 0.85);
	font-weight:700;
	box-shadow: rgba(235, 0, 83, 0.7) 0 0px 0px 40px inset;
}

.instafeed{width:1200px;margin:0 auto;}
.instagram .instafeed > a {display:inline-block;margin: 20px auto;max-width: 350px; padding:0 5px;}

.footer {height:160px;}

@media all and (max-width:1200px){
.db_box .info{left:20%;}
.info dt {width:20%;}
.info dd input[type="text"].short {width:29%;}
.info dd input[type="tel"].short {width:29%;}
.db_box .btn_submit{width:50%;left:46%;top:11%;}
.apply {left:20%;}
.instafeed{width:100%;}
}

/*@media all and (max-width:1223px){
.db_box{height:150px;}
.db_box .info{width:50%;left:10%;}
.info dd input[type="text"].short {width:29%;}
.info dd input[type="tel"].short {width:29%;}
.db_box .btn_submit{left:50%;top:15%}
.apply {left:10%;}
.apply li {font-size:12px;padding-right:10px;}
}

@media all and (max-width:1136px){
.info dd input[type="text"] {width:97%;}
.info dd input[type="tel"] {width:97%;}
}*/

@media all and (max-width:1024px){
.db_box{height:200px;}
.info dt {font-size:14px;}
.info dd input[type="text"] {}
.info dd input[type="text"].short {}
.db_box .btn_submit{}
.apply {top:55%;}

.instagram .instafeed > a {max-width: 300px;}

.footer {height:200px;}
}

/*@media all and (max-width:980px){
.db_box .info{}
.apply {top:70%;width:80%;}
.apply li {font-size:11px;}
}

@media all and (max-width:800px){
.db_box .info{left:10%;}
.db_box .btn_submit{width:60%;left:48%;}
.apply {left:10%;}
.apply li {font-size:10px;}
.info dt {width:22%;}
}*/

/*모바일*/
@media screen and  (max-width: 768px) {
.pc_view { display:none; }
.mb_view { display:inline-block; }

.wrap { width:100%; margin:0 auto; text-align:center;  min-width:200px;  }
/*.wrap img { max-width:100%; display:block; margin:0 auto; }*/

.fixed {height:auto;}
.fixed .fixed_in {position:relative; width:100%; margin:0 auto; overflow:hidden;}

.db_box{height:180px;width:90%;}
.db_box .info{width:100%; position:absolute;top:5%;left:5%;margin:0 auto}
.info dl{margin-top:10px;}
.info dl:after {display:block;visibility:hidden;width:0;height:0;content:"";}
.info dd {width:70%;text-align:left;float:left;height:30px;line-height:30px;color:#fff;}
.info dt {width:25%;text-align:left;float:left;height:30px;line-height:30px; color:#fff;font-size:14px;}
.info dd input[type="text"] {width:95%;height:24px;}
.info dd input[type="text"].short {width:25%;}
.info dd input[type="tel"] {width:95%;height:24px;}
.info dd input[type="tel"].short {width:25%;}

.db_box .btn_submit{width:20%; position:absolute;top:48%;left:78%;}
.btn_submit img{width:85%;}

.apply {width:75%;position:absolute;top:50%;left:5%;}
.apply ul{margin-top:5px;}
.apply li {font-size:12px;color:#fff;padding:0;float:left;padding-right:10px;}
.apply li a {color:#fc0000;}
.apply li input , .apply li a {vertical-align:middle;}

.instagram {width:100%;padding:50px 0;}
.instagram h3 {font-size:36px; color:#111;font-weight:700;}
/*.instagram p {font-size:24px;padding:50px 0;line-height:36px;color:#333;}*/
.instagram a {
	-webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	display: block;
	margin: 20px auto;
	max-width: 180px;
	text-decoration: none;
	border-radius: 4px;
	padding: 20px 30px;
	border: 10px 20px #ccc solid;
}
.instagram a.button {
	color: rgba(0, 0, 0, 0.6);
	font-weight:400;
	box-shadow: rgba(0, 0, 0, 0.4) 0 0px 0px 2px inset;
}
.instagram a.button:hover {
	color: rgba(255, 255, 255, 0.85);
	font-weight:400;
	box-shadow: rgba(235, 0, 83, 0.7) 0 0px 0px 40px inset;
}

.instafeed{width:100%;margin:0 auto;}
.instagram .instafeed > a {display:inline-block;margin: 20px auto;max-width: 30%; padding:0 5px;}

.tel{position:fixed; top:46%; right:0; width:70px;;z-index:991;}

.footer {height:180px;}
}


@media all and (max-width:480px){
.info dt {font-size:12px;}
.apply li {font-size:10px;}
.db_box{height:150px;}
.db_box .info{}
.db_box .btn_submit{top:55%;left:78%;}
.apply {left:5%;width:75%;top:55%}
.footer {height:150px;}
}