@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

@font-face {
	font-family: 'Noto Sans L';
	font-style: normal;
	font-weight: 100;
	src: url('/font/notokr-light.eot');
	src: url('/font/notokr-light.eot?#iefix') format('embedded-opentype'),
			url('/font/notokr-light.woff2') format('woff2'),
			url('/font/notokr-light.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans R';
	font-style: normal;
	font-weight: 300;
	src: url('/font/notokr-regular.eot');
	src: url('/font/notokr-regular.eot?#iefix') format('embedded-opentype'),
			url('/font/notokr-regular.woff2') format('woff2'),
			url('/font/notokr-regular.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans M';
	font-style: normal;
	font-weight: 500;
	src: url('/font/notokr-medium.eot');
	src: url('/font/notokr-medium.eot?#iefix') format('embedded-opentype'),
			url('/font/notokr-medium.woff2') format('woff2'),
			url('/font/notokr-medium.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans B';
	font-style: normal;
	font-weight: 700;
	src: url('/font/notokr-bold.eot');
	src: url('/font/notokr-bold.eot?#iefix') format('embedded-opentype'),
			url('/font/notokr-bold.woff2') format('woff2'),
			url('/font/notokr-bold.woff') format('woff');
}
@font-face{
	font-family: 'TmonMonsori';
	font-style: normal;
	src: url('/font/TmonMonsori.woff') format("woff");
	src: url('/font/TMONBlack.ttf') format("truetype");
}
@font-face{
	font-family: 'TmonTium';
	font-style: normal;
	src: url('/font/TmonTium.woff') format("woff");
	src: url('/font/TMONTium.ttf') format("truetype");
}

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ========================================================================== HTML5 display definitions ========================================================================== */
/* Corrects `block` display not defined in IE 8/9. */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

/* Corrects `inline-block` display not defined in IE 8/9. */
audio, canvas, video { display: inline-block; }

/* Prevents modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/* Addresses styling for `hidden` attribute not present in IE 8/9. */
[hidden] { display: none; }

/* ========================================================================== Base ========================================================================== */
/* 1. Sets default font family to sans-serif. 2. Prevents iOS text size adjust after orientation change, without disabling user zoom. */

* { margin: 0; border: 0; padding: 0; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ }

/* Removes default margin. */
body { margin: 0; padding: 0; }

/* ========================================================================== Links ========================================================================== */
/* Addresses `outline` inconsistency between Chrome and other browsers. */

a, a:link, a:visited { color: #666; text-decoration: none; }

a:focus { outline: thin dotted; }

/* Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* ========================================================================== Typography ========================================================================== */
/* Addresses styling not present in IE 8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
b, strong { font-weight: bold; }

/* Addresses styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }

/* Addresses styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/* Corrects font family set oddly in Safari 5 and Chrome. */
code, kbd, pre, samp { font-family:  'Nanum Square',monospace, serif; font-size: 1em; }

/* Improves readability of pre-formatted text in all browsers. */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

/* Sets consistent quote types. */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }

/* Addresses inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/* Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* ========================================================================== Embedded content ========================================================================== */
/* Removes border when inside `a` element in IE 8/9. */
img { border: 0; }

/* Corrects overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }

/* ========================================================================== Figures ========================================================================== */
/* Addresses margin not present in IE 8/9 and Safari 5. */
figure { margin: 0; }

/* ========================================================================== Forms ========================================================================== */
/* Define consistent border, margin, and padding. */
fieldset { border: 0; margin: 0; padding: 0; }

/* 1. Corrects color not being inherited in IE 8/9. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/* 1. Corrects font family not being inherited in all browsers. 2. Corrects font size not being inherited in all browsers. 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome */
select { border: 1px solid #b7b7b7; }

button, input, select, textarea { resize: vertical; font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ }

label { vertical-align: middle; cursor: pointer; }

/* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
button, input { line-height: normal; }

/* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Corrects inability to style clickable `input` types in iOS. 3. Improves usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/* Re-set default cursor for disabled elements. */
button[disabled], input[disabled] { cursor: default; }

/* 1. Addresses box sizing set to `content-box` in IE 8/9. 2. Removes excess padding in IE 8/9. */
input[type="checkbox"], input[type="radio"] { width: 13px; height: 13px; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ vertical-align: middle; margin: 0 4px 0 0; }

/* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/* Removes inner padding and search cancel button in Safari 5 and Chrome on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* Removes inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 1. Removes default vertical scrollbar in IE 8/9. 2. Improves readability and alignment in all browsers. */
textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ }

/* ========================================================================== Tables ========================================================================== */
/* Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

hr { display: none; }

p { margin: 0; margin-bottom: 1em; padding: 0; font-size:0.9em;}

html { box-sizing:border-box; font-family: 'Nanum Square', 'Quicksand', sans-serif; letter-spacing:-0.03em; min-width:320px; }


/*common*/
.pc { display:block; width:100%; }
.mobile { display:none; }

#header { width:80%; height:80px; margin:0 auto; margin-top: 20px; box-sizing:border-box; }
#header .top-menu h1.site-logo { float: left; position: relative; margin: 0; }
#header .top-menu h1.site-logo a { letter-spacing: -0.01em; }
#header .top-menu h1.site-logo a > img{width:180px;}

#header .top-menu { *zoom: 1; }
#header .top-menu:before, #header .top-menu:after { content: " "; display: table; }
#header .top-menu:after { clear: both; }

#header .top-menu ul.gnb { float: right; padding: 0; margin:0; margin-top:30px; list-style: none; }
#header .top-menu ul.gnb li { display: inline-block; margin-left:3em; font-size: 1.25em; font-family: 'Noto Sans R'; }
#header .top-menu ul.gnb li:hover a, #header .top-menu ul.gnb li.active a {color:#455ec8;}

#menu_bar {width:100%; height:10px; background:#999; }
#menu_bar_mo {width:100%; height:10px; background:#999; display:none;}
#subpage_title {margin-top:5vh;}
#subpage_title h1 {margin:0; margin-bottom:5px; text-align:center; font-size:2.25em; font-family: 'Noto Sans M'; font-weight:normal; color:#333;}
.sub_bar {width:50px; height:5px; margin: 0 auto; background-color: #333;}

#content { width:80%; min-height:50vh; margin:5vh 10%; font-family: 'Noto Sans R'; }

/*sub COMPANY */
#content .company {content: " "; display: table; width:100%; }
#content .company:after { clear: both; }
#content .company > div {float:left; width:24.25%; height:400px; margin:0 1% 0 0; background:rgba(0,0,0,0.1); overflow: hidden;}

#content .company div .back > h2 {position:relative; top:0; margin:0 auto; padding:25%; text-align: center; font-size:10em; color:rgba(255,255,255,1); text-shadow:0 0 100px rgba(0,0,0,0.5); font-family:sans-serif; transition:all 1s}
#content .company div:hover .back > h2 {top:-100px; color:rgba(255,255,255,0); }
#content .company div .back > div {position:relative; bottom:-50px; color:#fff;}

#content .company div:hover .back > div {bottom:220px; text-align:center; transition:all 1s}
#content .company div .back > div > h3 {margin-bottom:10px; font-size:1.2em; text-align:center; font-weight: 900;}
#content .company div .back > div > h3 > span {font-size:0.8em; font-weight:400;}
#content .company div .back > div > p {text-align:justify; font-weight:400; line-height: 140%;}

#content .company div.back {padding:5% 10%; background:rgba(0,0,0,0.4); transition:all 1s}
#content .company div:hover .back {background:rgba(0,0,0,0.8)}
#content .company div.com01 {background:url(../images/company_img01.jpg); background-position:0% 30%; background-size:200%; transition:all 1s}
#content .company div.com01:hover {background-position:100% 50%; background-size:100%}
#content .company div.com02 {background:url(../images/company_img02.jpg); background-position:0% 30%; background-size:200%; transition:all 1s}
#content .company div.com02:hover {background-position:100% 50%; background-size:100%}
#content .company div.com03 {background:url(../images/company_img03.jpg); background-position:0% 30%; background-size:200%; transition:all 1s}
#content .company div.com03:hover {background-position:100% 50%; background-size:100%}
#content .company div.com04 {margin: 0; background:url(../images/company_img04.jpg); background-position:0% 30%; background-size:200%; transition:all 1s}
#content .company div.com04:hover {background-position:100% 50%; background-size:100%}

p.ex {font-size:0.8em; color:#aaa;}


/*sub HISTORY */
div.history {}
div.history:after {clear:both; display:block; content:''}
div.history h2 {float:left; width:15%; height:70px; padding: 20px 10% 10px 5%; border-top:1px dashed #ccc; margin:0; box-sizing:border-box; font:bold 43px "맑은 고딕"; letter-spacing:-3px; color:#333}
div.history h2 span {font-weight:normal; color:#aaa}
div.history ul {float:left; width:75%; padding:30px 40px; border-left:1px solid #ccc; border-top:1px dashed #ccc; box-sizing:border-box; list-style:none}
div.history ul li {line-height:220%; color:#666}
div.history ul li {font-size: 1em; line-height:130%; margin-bottom:5px;}
div.history ul li:before, div.history ul li:after { content: " "; display: table; }
div.history ul li:after { clear: both; }
div.history ul li h3 {float: left; width: 60px; text-align: center; margin: 0; display: block; padding: 0;}


/*sub ORGANIZATION */
div.organization {}
div.organization:after {clear:both; display:block; content:''}
div.organization h2 {width: 150px; height: 150px; margin: 0 auto; margin-bottom:20px; border-radius: 100%; text-align: center; vertical-align: middle; box-sizing: border-box; font-size: 3em; background:#333; color:#fff; display:flex; flex-direction:column; justify-content:center; }
div.organization ul {width:100%; list-style:none;}
div.organization ul:after {clear:both; display:block; content:''}
div.organization ul li {float:left; width:24%; margin-right:1%; padding:0;}
div.organization ul li:last-child {margin-right:0;}
div.organization ul li h3 {width:100%; height:60px; margin-bottom:15px; padding:15px 0; border-radius:50px; box-sizing: border-box; text-align:center; font-size:1.5em; background:#555; color:#fff;}
div.organization ul li p {width:90%; margin:0 auto; padding:0 5%; text-align:center; font-size:1em;}


/*sub PRODUCT */
#content .submn { display:block; text-align:center; }
#content .submn li { list-style-type:none; display:inline-block; font-size:1.8em; white-space:nowrap; font-family: 'Noto Sans R'; color:#666; cursor:pointer; margin:.35em .75em .45em .75em; }
#content .submn li:first-child { margin-left:0; }
#content .submn li:last-child { margin-right:0; }
#content .submn li.on,
#content .submn li:hover { color:#04a5db; }

#content .product .pimg { display:none; margin-top:40px; margin-bottom:50px; overflow:hidden; }
#content .product .pimg.block { display:block; }


/*sub PORTFOLIO */
ul.pofol_year {width:100%; list-style:none; margin-bottom:10px;}
ul.pofol_year:after {clear:both; display:block; content:''}
ul.pofol_year li {float:left; width:25%; overflow:hidden; border:0; border-right:none; box-sizing:border-box; text-align:center; transition:all 0.5s; background:#f9b9b9; }
ul.pofol_year li a {display:block; padding:0px; width:100%;  font-size:1em; line-height:2em; font-family: 'Noto Sans R'; color:#fff;}
ul.pofol_year li.active, ul.pofol_year li:hover {background:#F04F50}
ul.pofol_year li.active a, ul.pofol_year li:hover a {color:#fff}
ul.pofol_year {}
ul.pofol_year {}


/*footer*/
#footer {bottom:0; width:100%; padding:20px 10%; box-sizing:border-box; background:#333; color:#ddd; line-height:1.6em; }
#footer:before, #footer:after { content: " "; display: table; }
#footer:after { clear: both; }
#footer h1 {margin-top:0; font-size: 0.9em; font-weight:600;}
#footer p { width:100%; margin: 0; text-align: left; font-weight:400; font-size: 0.8em; }
#footer p a { color:#fff; } 

/*# sourceMappingURL=style.css.map */
@media screen and (max-width: 1400px) { 
	#header .top-menu ul.gnb li { margin-left:2.5em; font-size: 1.25em; }
	#content .submn li { font-size:1.4em; margin:.3em .65em .4em .65em; }
}

@media screen and (max-width: 1300px) { 
	#header .top-menu ul.gnb li { margin-left:2.5em; font-size: 1.25em; }
	#content .submn li { font-size:1.3em; cursor:pointer; margin:.25em .5em .35em .5em; }
}
@media screen and (max-width: 1200px) {
	#header .top-menu ul.gnb li { margin-left:2em; font-size: 1.25em; }
	#content .submn li { font-size:1.1em; cursor:pointer; margin:.15em .25em .2em .25em; }
}

@media screen and (max-width: 1080px) {
	#header { width:100%; }
	#header .top-menu { width:100%; margin:0 auto; }
	#header .top-menu h1.site-logo {float: none; text-align: center; padding-bottom:15px; }
	#header .top-menu ul.gnb {width:100%; margin:10px 0 20px; text-align:center;}
	#header .top-menu ul.gnb li {font-size:1.2em; }
	#header .top-menu ul.gnb li:first-child { margin-left:0; }
	#menu_bar {display:none;}
	#menu_bar_mo { display:block;}

	#content .submn li { font-size:1em; cursor:pointer; margin:.1em .15em .1em .15em; }

	#main {margin-top:40px;}

	#subpage_title {margin-top:8vh}
	#subpage_title h1 {font-size:1.6em;}
	.sub_bar {width:40px; height: 4px;}

	#content {width:95%; margin:4vh 2.5%;}
	#content .company > div {width:49%; margin:0 0.5% 10px 0.5%;}
	#content .company div .back > div, #content .company div:hover .back > div {bottom:50px;}
	#content .company div.com01, #content .company div.com02, #content .company div.com03, #content .company div.com04 {background-position:50% 50%;}
	#content .company div.back {background:rgba(0,0,0,0.7)}

	#content .company div .back > h2, #content .company div:hover .back > h2 {position:relative; top:0; margin:0 auto; padding:0 5% 15%; text-align: center; font-size:10em; color:rgba(255,255,255,1); text-shadow:0 0 100px rgba(0,0,0,0.5); font-family:sans-serif; transition:all 1s}
	#content .company div.com01:hover {background:url(../images/company_img01.jpg); background-size:200%; background-position:50% 50%; transition:all 1s}
	#content .company div.com02:hover {background:url(../images/company_img02.jpg); background-size:200%; background-position:50% 50%; transition:all 1s}
	#content .company div.com03:hover {background:url(../images/company_img03.jpg); background-size:200%; background-position:50% 50%; transition:all 1s}
	#content .company div.com04:hover {margin: 0; background:url(../images/company_img04.jpg); background-size:200%; background-position:50% 50%; transition:all 1s}

	#content .submn li { font-size:1.5em; margin:.35em .5em .45em .5em; }

	p.ex {display:none;}

	div.history h2 {width:100%; margin:0; border-top:0; padding:0 5%;}
	div.history ul {width:100%; padding:15px 0 15px 40px; border-bottom:1px dashed #ccc; border-left:0; margin-bottom: 30px;}
	div.history ul li {line-height:170%; font-size:1.2em}
	div.history ul li span {display:inline-block; width:20px; padding-right:12px; color:#333}

	div.organization ul li {width:42%; margin:0 4% 20px 4%;}
	div.organization ul li h3 {width:100%; margin:0 auto; font-size: 1.7em;}
	div.organization ul li p {padding:10px 5%; font-size:1.2em;}
}

@media screen and (max-width: 960px) {
	#content .submn { overflow:hidden; }
	#content .submn li { font-size:1.5em; border:1px solid #ddd; display:block; border-left:0; border-top:0; box-sizing:border-box; float:left; width:33.3333%; cursor:pointer; margin:0; padding:.25em 0em; }
	#content .submn li:nth-child(1),
	#content .submn li:nth-child(2),
	#content .submn li:nth-child(3) {border-top:1px solid #ddd; }
	#content .submn li:nth-child(3n-2) { border-left:1px solid #ddd; }
}
@media screen and (max-width: 768px) {
	#content {margin:3vh 2.5%}
	#header .top-menu ul.gnb { display:flex; justify-content:space-around; }
	#header .top-menu ul.gnb li { margin-left:0; font-size: 1em; }
	#content .submn li { font-size:1em; float:left; width:50%; cursor:pointer; margin:0; padding:.5em 0em; }
	#content .submn li:nth-child(1),
	#content .submn li:nth-child(2) {border-top:1px solid #ddd; }
	#content .submn li:nth-child(3) {border-top:0; }
	#content .submn li:nth-child(3n-2) { border-left:0; }
	#content .submn li:nth-child(2n-1) { border-left:1px solid #ddd; }
	
	.pc { display:none; }
	.mobile { display:block; }

	#content .product .pimg { display:none; justify-content:none; margin-top:40px; margin-bottom:50px; overflow:hidden; }
	#content .product .pimg.block { display:block; box-sizing:border-box; overflow:hidden; }
	#content .product .pimg img.mobile { margin:0; margin-bottom:2em; width:100%; display:block; }

}
@media screen and (max-width: 480px) {

	#header {width:100%; height:auto}	
	#header .top-menu ul.gnbx {margin: 0px; display:block; }
	#header .top-menu ul.gnbx li { float:left; box-sizing: border-box; width:33.3333%; margin:0; padding:0; border-bottom:1px solid #ccc; border-left:1px solid #ccc; }
	#header .top-menu ul.gnbx li a { display:block; padding:7px 0; }
/*	#header .top-menu ul.gnbx li:last-child { display:none; }*/
	#main {margin:0px}

	#subpage_title {margin-top:5vh}
	#content {margin:2vh 2.5%}
	#content .company div.com01, #content .company div.com02, #content .company div.com03, #content .company div.com04 {width:100%; margin:0 0 2%; }
	#content .company > div {height: 380px;}
	#content .company div.back {padding:0 10%}
	#content .company div .back > h2, #content .company div:hover .back > h2 {padding:15% 5% 15%;}

	div.history h2 {font-size: 2em}
	div.history ul {padding:15px 0; margin-bottom:10px}
	div.history ul li {font-size: 1em; line-height:130%; margin-bottom:5px;}
	div.history ul li h3 {width:40px;}
	div.history ul li h3.height {height:35px;}

	div.organization h2 {width: 120px; height:120px; padding:30px 0; margin-bottom:10px;}
	div.organization ul li {width: 48%; margin: 0 1% 10px 1%;}
	div.organization ul li h3 {height:50px; padding:12px 0; font-size:1.2em}
	div.organization ul li p {font-size:0.9em}

}

.tbList { width:100%; border-spacing:0; border-collapse:collapse; }
.tbList tr th,
.tbList tr td { padding:10px; border:1px solid #ddd; text-align:center; }
.tbList tr th { background:#f9f9f9; font-weight:normal; }
.tbList tr td.left { text-align:left; }

.tbWrite { width:100%; border-spacing:0; border-collapse:collapse; }
.tbWrite tr th,
.tbWrite tr td { padding:10px; border:1px solid #ddd; }
.tbWrite tr th { width:15%; background:#f9f9f9; font-weight:normal; }

.boxPage { margin-top:10px; display:block; text-align:center; }
.boxPage b,
.boxPage a { display:inline-block; width:32px; height:32px; line-height:32px; border:1px solid #ddd; text-align:center; text-decoration:none !important; cursor:pointer;}
.boxPage b { background:#333; border:1px solid #333; color:#fff; font-weight:normal; }

#main { background:#f9f9f9; overflow:hidden; display:block; width:100%; }

#mainImg { width:100%; height:450px; }
#mainImg .swiper-slide { width:auto; }
#mainImg .swiper-slide img { height:450px; }

#boxMbn { width:80%; max-width:1480px; margin:2em auto; overflow:hidden; }
#boxMbn .fleft { float:left; width:78%; }
#boxMbn .fright { float:right; width:22%; }
#boxMbn .fleft a { display:inline-block; width:15.6666%; margin-right:1%; margin-bottom:1%; font-size:0; background:#fff; border:1px solid #ddd; overflow:hidden; box-sizing:border-box; }
#boxMbn .fleft a div { display:block; width:100%; height:150px; box-sizing:border-box; }
#boxMbn .fleft a span { display:block; width:100%; background:#333; color:#fff; font-size:16px; text-align:center; padding:6px; line-height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box; font-family: 'Noto Sans R'; }
#boxMbn .fright .btntel { display:block; border:1px solid #ddd; background:#fff; padding:20px 0px 10px 0px; height:179px; box-sizing:border-box; }
#boxMbn .fright .btntel span { display:block; }
#boxMbn .fright .btntel .f1 { font-size:19px; color:#333; font-family: 'Noto Sans R'; text-align:center; margin-bottom:10px; }
#boxMbn .fright .btntel .f3 { font-size:38px; color:#f04f50; font-family: 'TmonMonsori'; text-align:center; margin-bottom:5px; }
#boxMbn .fright .btntel .f4 { font-size:16px; color:#333; font-family: 'Noto Sans R'; text-align:left; width:76%; margin:0 auto; line-height:150%; }
#boxMbn .fright .btntel .f5 { font-size:16px; color:#333; font-family: 'Noto Sans R'; text-align:left; width:76%; margin:0 auto; line-height:150%; }
#boxMbn .fright .btntel .f6 { font-size:16px; color:#666; font-family: 'Noto Sans L'; text-align:center; margin-top:0; margin-bottom:0; }
#boxMbn .fright .btntel button { background:#333; color:#fff; padding:15px 0px; display:block; margin:0 auto; width:74%; line-height:100%; }

@media screen and (max-width: 1480px) {
	#header { width:100%; }
	#header .top-menu { width:96%; margin:0 auto; }
	#boxMbn { width:96%; margin:2em auto; }
}
@media screen and (max-width: 1080px) {
	#header { margin:0; padding:1em 0em; }
	#header .top-menu { width:100%; margin:0 auto; }

	#boxMbn .fleft { float:left; width:100%; display:flex; justify-content:space-between; }
	#boxMbn .fright { float:right; width:100%; text-align:center; display:block; }
	#boxMbn .fright .inbox { display:block; width:600px; margin:0 auto; overflow:hidden; }
	#boxMbn .fleft a { display:inline-block; width:15.6666%; margin-right:0; margin-bottom:1%; font-size:0; background:#fff; border:1px solid #ddd; overflow:hidden; box-sizing:border-box; }
	#boxMbn .fleft a div { display:block; width:100%; height:150px; box-sizing:border-box; }
	#boxMbn .fleft a span { display:block; width:100%; background:#333; color:#fff; font-size:16px; text-align:center; padding:6px; line-height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box; font-family: 'Noto Sans R'; }
	#boxMbn .fright .btntel { display:block; border:1px solid #ddd; background:#fff; text-align:left; padding:20px 0px 10px 0px; height:90px; box-sizing:border-box; overflow:hidden; }
	#boxMbn .fright .btntel span { display:block; }
	#boxMbn .fright .btntel .f13 { float:left; }
	#boxMbn .fright .btntel .f1 { font-size:19px; color:#333; font-family: 'Noto Sans R'; float:left; text-align:left; line-height:42px; }
	#boxMbn .fright .btntel .f3 { font-size:42px; color:#f04f50; font-family: 'TmonMonsori'; float:left; text-align:left; padding-left:15px; margin-bottom:0; }
	#boxMbn .fright .btntel .f4 { float:left; font-size:17px; color:#333; font-family: 'Noto Sans R'; text-align:left; width:auto; margin:0 auto; line-height:140%; margin-left:20px; }
	#boxMbn .fright .btntel .f5 { font-size:16px; color:#333; font-family: 'Noto Sans R'; text-align:left; width:76%; margin:0 auto; line-height:150%; }
	#boxMbn .fright .btntel .f6 { font-size:16px; color:#666; font-family: 'Noto Sans L'; text-align:center; margin-top:0; margin-bottom:0; }
	#boxMbn .fright .btntel button { background:#333; color:#fff; padding:15px 0px; display:block; margin:0 auto; width:74%; line-height:100%; }
}
@media screen and (max-width: 960px) {
	#boxMbn { margin:1em auto; }
	#mainImg,
	#mainImg .swiper-wrapper { width:100%; height:auto; }
	#mainImg .swiper-slide { width:100%; }
	#mainImg .swiper-slide img { width:100%; height:auto; }

	#boxMbn .fleft { float:left; width:100%; display:block; }
	#boxMbn .fleft a { display:inline-block; width:32%; margin-right:2%; margin-bottom:1%; font-size:0; background:#fff; border:1px solid #ddd; overflow:hidden; box-sizing:border-box; }
	#boxMbn .fleft a:nth-child(3n) { margin-right:0; }
	#boxMbn .fleft a div { display:block; width:100%; height:150px; box-sizing:border-box; }
	#boxMbn .fleft a span { display:block; width:100%; background:#333; color:#fff; font-size:16px; text-align:center; padding:6px; line-height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box; font-family: 'Noto Sans R'; }
}
@media screen and (max-width: 640px) {
	#boxMbn .fleft a { display:inline-block; width:49%; margin-right:2%; margin-bottom:2%; }
	#boxMbn .fleft a:nth-child(3n) { margin-right:2%; }
	#boxMbn .fleft a:nth-child(2n) { margin-right:0; }

	#boxMbn .fright { float:right; width:100%; text-align:center; display:block; }
	#boxMbn .fright .inbox { display:block; width:96%; margin:0 auto; overflow:hidden; }
	#boxMbn .fright .btntel { display:block; border:1px solid #ddd; background:#fff; text-align:left; padding:20px 0px 10px 0px; height:90px; box-sizing:border-box; overflow:hidden; }
	#boxMbn .fright .btntel span { display:block; }
	#boxMbn .fright .btntel .f13 { float:left; }
	#boxMbn .fright .btntel .f1 { display:none; font-size:19px; color:#333; font-family: 'Noto Sans R'; float:left; text-align:left; line-height:36px; }
	#boxMbn .fright .btntel .f3 { font-size:36px; color:#f04f50; font-family: 'TmonMonsori'; float:left; text-align:left; padding-left:15px; margin-bottom:0; }
	#boxMbn .fright .btntel .f4 { float:left; font-size:15px; color:#333; font-family: 'Noto Sans R'; text-align:left; width:auto; margin:0 auto; line-height:140%; margin-left:20px; }
	#boxMbn .fright .btntel .f5 { font-size:14px; color:#333; font-family: 'Noto Sans R'; text-align:left; width:76%; margin:0 auto; line-height:150%; }
	#boxMbn .fright .btntel .f6 { font-size:14px; color:#666; font-family: 'Noto Sans L'; text-align:center; margin-top:0; margin-bottom:0; }
	#boxMbn .fright .btntel button { background:#333; color:#fff; padding:15px 0px; display:block; margin:0 auto; width:74%; line-height:100%; }
}
@media screen and (max-width: 500px) {
	#boxMbn .fright { float:right; width:100%; text-align:center; display:block; }
	#boxMbn .fright .inbox { display:block; width:100%; margin:0 auto; overflow:hidden; text-align:center; }
	#boxMbn .fright .btntel { display:block; width:100%; border:1px solid #ddd; background:#fff; text-align:center; padding:15px 0px 0px 0px; height:125px; box-sizing:border-box; overflow:hidden; }
	#boxMbn .fright .btntel span { display:block; }
	#boxMbn .fright .btntel .f13 { float:left; width:100%; display:block; }
	#boxMbn .fright .btntel .f1 { display:none; font-size:19px; color:#333; font-family: 'Noto Sans R'; float:center; text-align:center; line-height:36px; }
	#boxMbn .fright .btntel .f3 { font-size:36px; width:100%; color:#f04f50; font-family: 'TmonMonsori'; float:center; display:block; text-align:center; padding-left:0; margin-bottom:0; }
	#boxMbn .fright .btntel .f4 { float:left; display:block; width:100%; font-size:17px; color:#333; font-family: 'Noto Sans R'; text-align:center; width:100%; margin:0 auto; line-height:140%; margin-top:5px; margin-left:0; }
	#boxMbn .fright .btntel .f5 { font-size:14px; color:#333; font-family: 'Noto Sans R'; text-align:left; width:100%; margin:0 auto; line-height:150%; }
	#boxMbn .fright .btntel .f6 { font-size:14px; color:#666; font-family: 'Noto Sans L'; text-align:center; margin-top:0; margin-bottom:0; }
	#boxMbn .fright .btntel button { background:#333; color:#fff; padding:15px 0px; display:block; margin:0 auto; width:74%; line-height:100%; }
}