@charset "utf-8";

@import url('https://fonts.cdnfonts.com/css/samsungone');
@import url('https://fonts.cdnfonts.com/css/samsung-sharp-sans');
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset{border:0 none;}
img{border:0 none;vertical-align:top;}
dl,ul,ol,nav-menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none}
input,select,textarea,button {vertical-align: middle}
input, select, option, textarea {font-family: 'Pretendard-Regular'; font-weight: 400;}
button {background:none; cursor: pointer; font-family: 'Pretendard-Regular'; cursor:pointer; outline: none;}
body {background: #fff;}
body,th,td,input,select,textarea,button {font-family: 'Pretendard-Regular'; font-size: 14px; color: #111; font-weight: 400;}
a {color: #111; text-decoration:none}
address,caption,cite,code,dfn,var {font-style:normal; font-weight:normal}
em{font-style:normal;}
.hidden{visibility:hidden;}


/*** 폰트(PC) ***/
.font-nav {font-size: 16px;}
.font-main {font-size: 100px; line-height: 90px;font-weight: bold;}
.font-title1 {font-size: 60px;}
.font-title2 {font-size: 25px;}
.font-title3 {font-size: 18px; line-height: 25px;}
.font-about-title {font-size: 24px;}
.font-about-txt {font-size: 17px; line-height: 25px;}
.font-about {font-size: 18px; padding-top: 10px; }
.font-footer {font-size: 14px;}
.font-footer-title {font-size: 16px;}
.font-copyright {font-size: 13px;}
/* work */
.section#work .content .tabWrap {font-size: 15px;}
.section#work .content .tabList .item .itemTxt .tit {font-size: 18px;}
.section#work .content .tabList .item .itemTxt .txt {font-size: 14px; color: #222; line-height: 20px;}
.section#work .content .tabList .item .itemTxt .btn a {font-size: 15px;}


/*** layout ***/
#wrap {position: relative; overflow-y: auto; width: 100%; height: 100%; min-height: 100vh; background: #fff;}
.container {width: 100%; height: 100%;}
.inner {max-width: 1300px; width: 100%; margin: 0 auto; box-sizing: border-box;}

.pc {display: block;}
.mo {display: none;}

/* 공통 */
img {max-width: 100%;}
input {background: transparent; border: none; outline: none;}
button {background: transparent; border: none; outline: none;}

/* header */
#header {position: fixed; left: 0; top: 0; width: 100%; height: 118px; background: #fff; box-sizing: border-box; z-index: 999;}
#header .inner {overflow: hidden; position: relative; display: flex; align-items: center; padding: 50px 10px;}
#header .logo {float: left; max-width: 232px;}
/* nav */
#header #nav {float: left; font-family: 'Samsung Sharp Sans', sans-serif; font-weight: bold;}
#nav .inner {}
#nav ul {overflow: hidden;}
#nav li {float: left; margin-left: 33px; margin-top: 2px;}


/* content */
.section {}
.section .inner {position: relative; height: 100%; padding: 90px 10px 95px; text-align: center; box-sizing: border-box;}
.section#main {height: 900px; margin-top: 118px; background: url('../images/main_bg.jpg') center no-repeat; background-size: cover;}

.section#about {background: #f7f7f7;}
.section#banner {background: #ffe562;}
.section#work {}

.section#main .inner,
.section#banner .inner {padding: 0;}

.section .title {display: inline-block; padding-bottom: 65px; font-weight: 400; color: #111;}
.section .title span {font-weight: bold;}
.section .title p:first-child {font-family: 'Samsung Sharp Sans', sans-serif;}

.section#main .title {position: absolute; left: 50%; top: 50.4%; padding-bottom: 0; transform: translate(-50%, -50%); font-family: 'Samsung Sharp Sans', sans-serif; font-weight: bold; color: #fff; z-index: 99;}
.section#main img.pc {display: none;}

.section#about .content {overflow: hidden;}
.section#about .content>.contBox {float: left; width: 33.333%; padding: 0 2%; box-sizing: border-box;}
.section#about .content .contImg {margin-bottom: 30px;}
.section#about .content dl {max-width: 327px; width: 100%; margin: 0 auto; text-align: left; word-break: keep-all; box-sizing: border-box;}
.section#about .content dt {display: inline-block; margin-bottom: 5px; font-weight: bold;}
.section#about .content>.contBox:first-child dl {padding: 0 6%;}
.section#about .content>.contBox:last-child dl {padding: 0 4%;}

.section#work .inner {padding-bottom: 38px;}
.section#work .content .tabWrap {margin-bottom: 40px;}
.section#work .content .tabWrap ul {overflow: hidden;}
.section#work .content .tabWrap li {float: left; max-width: 170px; min-width: 130px; width: 13%; margin-right: 10px; margin-bottom: 10px; background: #fff;
  border: 1px solid #111; border-radius: 30px;}
.section#work .content .tabWrap li:last-child {margin-right: 0;}
.section#work .content .tabWrap li.active {background: #111;}
.section#work .content .tabWrap li.active a {color: #fff;}
.section#work .content .tabWrap li a {display: block; width: 100%; height: 100%; max-height: 48px; padding: 9%; box-sizing: border-box;}
.section#work .content .tabList {margin-left: -.94%; margin-right: -.94%;}
.section#work .content .tabList .item {display: none; width: 33.333%; padding: 0 .94% 30px; box-sizing: border-box;}
.section#work .content .tabList .item.on {display: block;}
.section#work .content .tabList .item .itemImg {}
.section#work .content .tabList .item .itemImg img {max-width: 410px; width: 100%;}
.section#work .content .tabList .item .itemTxt {padding: 27px 10px; text-align: left;}
.section#work .content .tabList .item .itemTxt .tit {margin-bottom: 5px;}
.section#work .content .tabList .item .itemTxt .txt {}
.section#work .content .tabList .item .itemTxt .btn {overflow: hidden; padding-top: 17px; margin-left: -1.2%; margin-right: -1.2%; text-align: center;}
.section#work .content .tabList .item .itemTxt .btn a {float: left; width: 47.6%; max-height: 50px; padding: 3.632%; margin: 0 1.2%; border: 1px solid #111; background: #fff; color: #111;font-size: 14px;
border-radius: 30px; font-family: 'SamsungOne', sans-serif; letter-spacing: .1rem; box-sizing: border-box;}
.section#work .content .tabList .item .itemTxt .btn a:last-child {background: #fff; color: #111;font-size: 14px;}

#footer {background: #2c2e33 url('../images/footer_bg.jpg') center no-repeat; background-size: cover; color: #fff;}
#footer .inner {padding: 50px 10px;}
#footer .inquiry {overflow: hidden; margin: 29px 0 19px; padding: 34px 10px 12px; border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5);}
#footer .inquiry .inBox {float: left; margin-right: 76px; margin-bottom: 20px;}
#footer .inquiry .inBox:last-child {margin-right: 0;}
#footer .inquiry ul {padding-left: 29px; background: url('../images/footer_icon.png') left top no-repeat;}
#footer .inquiry ul li {height: 24px; margin-bottom: 6px; line-height: 24px;}
#footer .inquiry ul li:last-child {margin-top: 7px; margin-bottom: 0;}
#footer .inquiry dt {margin-bottom: 8px;}
#footer .inquiry dd {margin-bottom: 6px;}
#footer .inquiry a {color: #fff;}
#footer .inquiry + p {display: inline-block;}


@media (max-width: 1300px) {
  .section#main {padding-bottom: 0;}
  .section#main img.pc {display: block;}
  .section#about .content>.contBox dl br {display: none;}
}
@media (max-width: 720px) {
  /*** 폰트(MO) ***/
  .font-nav {font-size: 22px;}
  .font-main {font-size: 100px; line-height: 83px;}
  .font-title1 {font-size: 60px;}
  .font-title2 {font-size: 27px;}
  .font-title3 {font-size: 24px;line-height: 40px;}
  .font-about-title {font-size: 36px;}
  .font-about-txt {font-size: 26px;}
  .font-about {font-size: 22px; padding-top: 10px; }
  .font-footer {font-size: 20px;}
  .font-footer-title {font-size: 24px;}
  .font-copyright {font-size: 18px;}
  /* work */
  .section#work .content .tabWrap {font-size: 21px;}
  .section#work .content .tabList .item .itemTxt .tit {font-size: 24px;}
  .section#work .content .tabList .item .itemTxt .txt {font-size: 20px; line-height: 24px;}
  .section#work .content .tabList .item .itemTxt .btn a {font-size: 22px;}


  /*** layout ***/
  .pc {display: none !important;}
  .mo {display: block !important;}

  #header {height: 127px;}
  #header .inner {padding: 30px;}
  #header .logo {margin-left: 10px;}
  #nav li {margin-left: 50px;}

  .section .inner {padding: 90px 30px 95px;}
  .section .title {padding-bottom: 40px;}
  .section#main {height: auto; margin-top: 127px;}
  .section#main .title {top: 38.9%;}
  .section#about .content>.contBox {width: 100%; margin-bottom: 65px;}
  .section#about .content>.contBox:last-child {margin-bottom: 0;}
  .section#about .content dl {max-width: 100%; padding: 0 !important; text-align: center; vertical-align: top;}
  .section#about .content dd {width: 80%; margin: 0 auto; line-height: 45px;}
  .section#about .content>.contBox dl br {display: block;}
  .section#work .inner {padding-bottom: 50px;}
  .section#work .content .tabWrap {padding: 0 7px; margin-bottom: 20px;}
  .section#work .content .tabWrap li {max-width: inherit; width: calc(33.333% - 10px);}
  .section#work .content .tabWrap li:nth-child(3n) {margin-right: 0;}
  .section#work .content .tabWrap li a {max-height: 56px; padding: 0;  line-height: 56px;}
  .section#work .content .tabList {margin-left: -10px; margin-right: -10px;}
  .section#work .content .tabList .item {width: 50%; padding: 0 10px 25px;}
  .section#work .content .tabList .item .itemTxt {padding: 20px 8px;}
  .section#work .content .tabList .item .itemTxt .btn {padding-top: 15px;}
  .section#work .content .tabList .item .itemTxt .btn a {background: #111; color: #fff;}
  .section#work .content .tabList .item .itemTxt .btn a:last-child {background: #fff; color: #111;}

  #footer .inner {padding: 60px 30px 55px;}
  #footer .inquiry {margin: 20px 0 15px; padding: 34px 0 13px;}
  #footer .inquiry .inBox {margin-right: 0;}
  #footer .inquiry ul {padding-left: 40px; background: url('../images/mo/footer_icon.png') left top no-repeat;}
  #footer .inquiry ul li {height: 29px; margin-bottom: 6px; line-height: 29px;}
  #footer .inquiry ul li:last-child {margin-top: 8px; margin-bottom: 0;}
  #footer .inquiry dl {padding: 0 8px;}
  #footer .inquiry dt {margin-bottom: 11px;}
  #footer .inquiry dd {margin-bottom: 8px;}
}