/*plz111*/
body,html{margin:0; padding:0; scroll-behavior:smooth;}

/*공통*/
.inner {width:100%; max-width:1400px; padding:0 20px; margin:0 auto;}
.pbr {display:inline-block;}
.mbr {display:block;}

@media all and (min-width:1200px) {
  .pbr {display:block;}
  .mbr {display:inline-block;}
}


/*nav*/
nav {position:fixed; width:100%; background:#fff; z-index:1000; -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.08); -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.08); box-shadow:0 0 10px 0 rgba(0,0,0,0.08);}
nav .inner {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; padding:0;}
nav .logo {padding:10px 20px; overflow:hidden;}
nav .logo img {width:auto; height:30px; transition:0.3s;}
nav ul {width:100%; display:flex; align-items:center; justify-content:center; padding:10px 20px; gap:0 2em;}
nav ul li {font-weight:600; display:flex; align-items:center; justify-content:center; text-align:center;}

@media all and (min-width:768px) {
  nav {height:100px; transition:0.3s;}
  body.scroll nav {height:70px;}
  nav .inner {flex-wrap:nowrap; justify-content:space-between; height:100%;}
  nav .logo {flex-shrink:0;}
  nav .logo img {height:50px;}
  body.scroll nav .logo img {height:40px;}
  nav ul {justify-content:flex-end;}
  nav ul li {font-size:18px;}
}

@media all and (min-width:1200px) {
  nav ul {gap:0 3em;}
  nav ul li {font-size:20px;}
}


/*메인*/
#main {overflow:hidden; padding:120px 0 0; background:url('/img/visbg.jpg') no-repeat center center / cover;}
#main .inner {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 0;}

#main .txt {width:100%; text-align:center; color:#fff;}
#main .txt .t01 {color:#dc3018; font-weight:600; margin:0 0 10px; font-size:0.9em; line-height:1.2;}
#main .txt .t02 {font-weight:700; font-size:1.5em; margin:0 0 10px;}

#main .control {display:flex; align-items:center; justify-content:center; gap:10px; z-index:2; margin:40px 0 0;}
#main .control .prev,
#main .control .next {cursor:pointer; background:none; border:none; color:#fff; display:flex; align-items:center; justify-content:center; width:20px; height:20px;}
#main .control .pager {display:flex; gap:10px; width:calc(100% - 60px); max-width:200px;}
#main .control .dot {flex:1; height:2px; background:#fff; opacity:0.2; cursor:pointer;}
#main .control .dot.active {opacity:1;}

.slider {position:relative; width:100%; height:320px;}
.slide {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 1s ease; display:flex; align-items:center; justify-content:center;}
.slide.active {opacity:1; z-index:1;}
.slide img {width:100%; max-width:480px; display:block; margin:0 auto; border-radius:16px;}

#main .cs {width:100%; background:rgba(220,48,24,0.9); color:#fff; padding:20px 0; height:100px; border-radius:16px 16px 0 0;}
#main .cs .inner {height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px 0;}
#main .cs h5 {font-weight:700; font-size:1.25em; margin:0;}
#main .cs p {display:none; margin:0 0 0 1em; font-size:0.9em;}
#main .cs dl {display:grid; grid-template-columns:auto auto; align-items:center; gap:0 1em; margin:0 0 0 auto;}
#main .cs dt {font-weight:600;}
#main .cs dd:nth-last-of-type(2) {font-size:1.25em; font-weight:600;}

@media all and (min-width:768px) {
  #main {padding:140px 0 0;}

  #main .txt {width:50%; text-align:left;}
  #main .txt .t01 {font-size:1em;}
  #main .txt .t02 {font-size:2em;}
  #main .txt .t03 {margin:0 0 20px;}

  #main .control {justify-content:flex-start;}

  .slider {width:40%; height:400px;}
  .slide img {max-width:100%;}

  #main .cs .inner {padding:0 60px;}
  #main .cs h5 {font-size:1.75em;}
  #main .cs p {display:block; opacity:0.9;}
  #main .cs dl {grid-template-columns:auto auto auto auto;}
  #main .cs dd:nth-last-of-type(2) {font-size:1.5em;}
}

@media all and (min-width:1200px) {
  #main .txt .t02 {font-size:2.5em; margin:0 0 20px;}
  #main .txt .t03 {font-size:1.1em;}
}


/*메인 - 공통*/
.sectit {margin-bottom:20px;}
.sectit p {color:#dc3018; font-weight:600; text-transform:uppercase;}
.sectit h5 {font-weight:600; font-size:1.5em;}


/*인사말*/
section.greet {padding:40px 0;}


/*제품안내*/
section.biz {padding:40px 0;}
section.biz .prdt ul {display:grid; grid-template-columns:1fr; gap:20px; margin:40px 0 0;}
section.biz .prdt ul li {border-radius:16px; padding:20px; background:#fff; -webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); box-shadow:0 0 20px 0 rgba(0,0,0,0.1);}
section.biz .prdt ul li img {display:block;}
section.biz .prdt ul li em {font-size:0.9em; background:#dc3018; color:#fff; display:inline-flex; padding:0 0.4em; border-radius:4px; margin:10px 0;}
section.biz .prdt ul li h5 {font-size:1.25em; font-weight:600; margin:0 0 20px;}
section.biz .prdt ul li p {color:#666;}

@media all and (min-width:768px) {
  section.biz .prdt ul {grid-template-columns:1fr 1fr 1fr;}
  section.biz .prdt ul li h5 {font-size:1.5em;}
}

@media all and (min-width:1200px) {
  section.biz .prdt ul li {padding:30px;}
}


/*문의하기*/
section.cs {padding:40px 0;}


/*위치안내*/
section.loc {padding:40px 0 0;}
section.loc .mapbox {width:100%; overflow:hidden;}
section.loc .mapbox .cont {display:none;}
section.loc .mapbox .map_border {display:none;}
section.loc .mapbox .wrap_controllers {display:none;}

@media all and (min-width:768px) {
}

@media all and (min-width:1200px) {
}


/*footer*/
footer {background:#404040; color:#ddd; padding:40px 20px; position:relative;}
footer h5 {font-size:1.25em; font-weight:700; margin:0 0 20px;}
footer ul li {display:flex; align-items:center;}
footer ul li em {width:5em; font-weight:700;}
footer .copy {margin:20px 0 0; font-size:0.9em; color:#aaa;}
footer #scrollTopBtn {position:fixed; right:20px; bottom:20px; display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:100%; color:#fff; border:0; background:#dc3018; z-index:1000;}
footer #scrollTopBtn:after {font-family:'Material Symbols Outlined'; content:'arrow_upward'; font-size:1.25em;}