@charset "UTF-8";
@font-face {
  font-family: montHeavy;
  src: url('fonts/Mont-HeavyDEMO.eot') format('embedded opentype'), url('fonts/Mont-HeavyDEMO.woff') format('woff');
}
@font-face {
  font-family: montLight;
  src: url('fonts/Mont-ExtraLightDEMO.eot') format('embedded opentype'), url('fonts/Mont-ExtraLightDEMO.woff') format('woff');
}
@font-face {
  font-family: NanumS;
  font-weight: normal;
  src: url('fonts/NanumSquareOTFReqular.woff') format('woff');
}
@font-face {
  font-family: NanumS;
  font-weight: light;
  src: url('fonts/NanumSquareOTFLight.woff') format('woff');
}
@font-face {
  font-family: NanumS;
  font-weight: bold;
  src: url('fonts/NanumSquareOTFBold.woff') format('woff');
}
@font-face {
  font-family: NanumS;
  font-weight: 900;
  src: url('fonts/NanumSquareOTFExtraBold.woff') format('woff');
}

/* animation */
@-webkit-keyframes arrowAni {
  from {transform: translateX(0);}
  to {transform: translateX(10px);}
}
@keyframes arrowAni {
  from {transform: translateX(0);}
  to {transform: translateX(10px);}
}
/* 리셋 */
* {margin: 0; padding: 0; box-sizing: border-box;}
ul, ol {list-style: none;}
a {text-decoration: none;}
h1 {margin: 0;}
img {border: none;}
html {font-size: 0.625em;}
button {border:none; background:none;}
button:focus {outline: none;}
input, textarea {outline: none; width: 100%;-webkit-appearance: none;  -webkit-border-radius: 0;}
body {font-family: 'Montserrat', 'NanumS', sans-serif; font-weight: 300; line-height: 1; color: #252525; min-width: 320px; }
body::-webkit-scrollbar {display: none;}
.blind {position: absolute; left: -9999px; top: -9999px;}
.clear:after {content: ""; display: block; clear: both;}
.pc {display: none;}
.noDrag {
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.parentHtml {
  height: 100%; overflow: hidden;
}
/* iframe */
.iframeWrapper {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  -webkit-overflow-scrolling: touch !important;
}
iframe {
  width: 100%; height: 100%;
}
#iframeDetail {
  display: none;
}
/* loading */
.loading {
  position: fixed; left: 0; top: 0; z-index: 2;
  width: 100%; height: 100%;
  background: rgba(255,255,255,.6)
}
.loading img {
  position: fixed; left: 50%; top: 50%;
  width: 90px; height: 90px; margin-left: -45px; margin-top: -65px;
}
/* 모바일 */
/* header */
header {
  position: fixed; left: 0; top: 0; z-index: 1;
  width: 100%; height: 72px; background: #fff;
}
h1 {
  position: relative; z-index: 3;
  width: 80px; margin-top: 18px; margin-left: 4.267%;
}
h1 a {
  display: block;
}
h1 a img {
  width: 100%;
}
.menuBtn {
  position: absolute; right: 3.2%; top: 12px;
  width: 48px; height: 48px;
}
.menuBtn span {
  display: block; width: 16px; height: 4px; margin: 0 auto;
  background: #F4C53A;
  text-indent: -9999px;
}
.menuBtn span:first-child {
  margin-bottom: 4px;
}
/* nav */
body.on {
  overflow-y: hidden;
}
nav {
  display: none;
  position: fixed; left: 0; top: 0; z-index: 2;
  width: 100%; height: 100%; padding-top: 204px;
  background: #fff; overflow-y: auto;
}
nav .cancelBtn {
  position: absolute;
  width: 48px; height: 48px; right: 3.2%; top: 12px;
}
nav ul {
  position: absolute; top: 50%;
  width: 100%; margin-top: -231px;
  text-align: center;
}
nav ul a {
  display: block; color: #252525;
  padding: 28px 0; line-height: 25px;
  font-size: 2.8rem;font-family: montLight, sans-serif; text-transform: uppercase;
}
nav ul .mobile {
  display: block; padding-top: 22px;
}
nav ul .mobile button {
  position: relative; cursor: pointer;
  padding: 25px; color: #252525; line-height: 25px;
  font-size: 2.8rem;font-family: montLight, sans-serif; text-transform: uppercase;
}
nav ul .mobile button:first-child:after {
  position: absolute; content: ""; right: 0; top: 50%;
  display: block; width: 1px; height: 20px; margin-top: -10px;
  background: #979797;
}
nav ul .mobile button.on {
  color: #FEC300; font-family: montHeavy, sans-serif;
}
textarea {
  width: 100%;
}
/* content */
section {
  width: 100%; margin-top: 72px;
}
/* who we are */
.whoWeAre {
  width: 100%; padding-top: 20px; padding-bottom: 80px;
}
.whoWeAre .holichIllust {
  width: 87.467%; margin-left: 12.533%;
}
.whoWeAre svg {
  width: 100%; height: 100%;
}
.whoWeAre .contentInner div:nth-child(2) {
  width: 77.778%; margin: 40px auto 0;
}
.whoWeAre .contentInner div:nth-child(2) h3 {
  margin-bottom: 34px;
  font-size: 3.6rem; font-family: montHeavy, sans-serif; line-height: 40px;
}
.whoWeAre .contentInner div:nth-child(2) p {
  font-size: 1.4rem; line-height: 1.429;
}
.whoWeAre .contentInner div:nth-child(2) p span {
  display: block;
}
.whoWeAre .contentInner div:nth-child(2) p .langKo {
  word-break: keep-all;
}
/* what we do */
.whatWeDo {
  width: 100%; padding: 80px 0;
  background: #FAFAFA;
}
.whatWeDo .contentInner {
  position: relative;
  width: 77.778%; margin: 0 auto;
}
.gearWheelImage {
  position: absolute; left: 20px; top: 312px;
}
.whatWeDo .introduction {
  margin-bottom: 60px;
}
.whatWeDo .introduction div {
  display: block; font-size: 3.6rem; font-family: montHeavy, NanumS,sans-serif; line-height: 40px; font-weight: bold;
}
.whatWeDo .introduction div .langKo {
  font-size: 2.8rem; word-break: keep-all;
}
.yellowText {
  color: #FEC300;
}
.service div div{
  margin-bottom: 30px;
}
.service > div {
  position: relative; z-index: 1;
}
.service > div:last-of-type div:last-of-type {
  margin-bottom: 0;
}
.service div h4 {
  margin-bottom: 12px;
  font-size: 1.6rem; font-family: montHeavy, NanumS,sans-serif; line-height: 20px;
}
.service div p {
  font-size: 1.2rem; line-height: 20px;
}
.service div p .langKo {
  word-break: keep-all;
}
/* clients */
.clients {
  position: relative;
  width: 100%; padding: 80px 0; overflow: hidden;
}
.clients .contentInner {
  width: 83.333%; margin: 0 auto;
}
.shapeImage {
  position: absolute; left: 50%; top: 80px;  z-index: -1;
  width: 580px;margin-left: -225px;
}
.manImage {
  width: 110px;
}
.clients h4 {
  color: #F4C53A;
  font-size: 2rem; font-family: montHeavy, NanumS, sans-serif; line-height: 24px;
}
.clients h4 .langKo {
  font-size: 1.8rem; margin-top: 50px;
}
.clients p {
  font-size: 1.2rem; line-height: 16px;
}
.clients .application {
  position: relative;
  margin-bottom: 85px; text-align: center;
}
.clients .application div:nth-of-type(1) {
  display: inline-block; vertical-align: top;
}
.clients .application h4 {
  display: inline-block; padding-top: 16px; margin-bottom: 30px;
  letter-spacing: -0.1; text-align: left;
}
.clients .application h4 span {
  display: block;
}
.clients .application h4 .langKo span {
  color: #252525;
}
.clients .application div:nth-of-type(2) {
  position: relative;
  clear: both;
}
.clients .application p {
  /* position: absolute; left: 50%; top: 0; */
  /* width: 150px;margin-top: 30px; margin-left: -150px; */
  display: inline-block; width: calc(100% - 120px); margin-top: 10px;
  text-align: left;
}
.clients .application p .langKo {
  line-height: 18px; word-break: keep-all;
}
.clients .application div:nth-of-type(2) svg {
  width: 110px; vertical-align: top;
}
.clients .doorlock,
.clients .access,
.clients .mimiclinic,
.clients .galleryan,
.clients .yurimsolution,
.clients .myconect {
  margin-bottom: 70px;
}
.clients .doorlock h4,
.clients .access h4,
.clients .mimiclinic h4,
.clients .galleryan h4,
.clients .yurimsolution h4,
.clients .myconect h4 {
  margin-bottom: 20px;
}
.clients .doorlock div div,
.clients .access div div,
.clients .mimiclinic div div,
.clients .galleryan div div,
.clients .yurimsolution div div,
.clients .myconect div div {
  position: relative;
  float: left;
}
.clients .doorlock div div:first-child,
.clients .access div div:first-child,
.clients .mimiclinic div div:first-child,
.clients .galleryan div div:first-child,
.clients .yurimsolution div div:first-child,
.clients .myconect div div:first-child {
  width: 150px;
  padding-top: 10px; padding-left: 16px;
}
.clients .doorlock div div img,
.clients .access div div img,
.clients .mimiclinic div div img,
.clients .galleryan div div img,
.clients .yurimsolution div div img,
.clients .myconect div div img {
  width: 100px;
}
.clients .doorlock div div:nth-child(2),
.clients .access div div:nth-child(2),
.clients .mimiclinic div div:nth-child(2),
.clients .galleryan div div:nth-child(2),
.clients .yurimsolution div div:nth-child(2),
.clients .myconect div div:nth-child(2) {
  width: calc(100% - 150px);
}
.clients .doorlock div div p,
.clients .access div div p,
.clients .mimiclinic div div p,
.clients .galleryan div div p,
.clients .yurimsolution div div p,
.clients .myconect div div p {
  font-size: 1.2rem; line-height: 20px; margin-bottom: 10px;
}
.clients .doorlock div div p .langKo,
.clients .access div div p .langKo,
.clients .mimiclinic div div p .langKo,
.clients .galleryan div div p .langKo,
.clients .yurimsolution div div p .langKo,
.clients .myconect div div p .langKo {
  word-break: keep-all;
}
.clients .doorlock div div > button,
.clients .access div div > button,
.clients .mimiclinic div div > button,
.clients .galleryan div div > button,
.clients .yurimsolution div div > button,
.clients .myconect div div > button  {
  display: inline-block;
  font-size: 1.4rem; font-family: montHeavy, sans-serif; line-height: 16px; vertical-align: middle;
  cursor: pointer; color: #000;
}
.clients .doorlock div div > button img,
.clients .access div div > button img,
.clients .mimiclinic div div > button img,
.clients .galleryan div div > button img,
.clients .yurimsolution div div > button img,
.clients .myconect div div > button img {
  width: 7px; margin-left: 5px; 
}
/* products */
.products {
  padding: 80px 0;
  background: #FAFAFA; overflow: hidden;
}
.products h4 {
  margin-bottom: 24px;
  font-size: 2rem; font-family: montHeavy,sans-serif; line-height: 20px;
}
.products p {
  font-size: 1.2rem;line-height: 20px; letter-spacing: -0.1;
}
.holychannel {
  width: 83.333%; margin-left: 10.667%; margin-bottom: 60px;
  text-align: right;
}
.holychannel > div:first-child {
  position: relative;
  padding-right: 8px;margin-bottom: 30px; text-align: right;
}
.holychannel .phone {
  position: absolute; right: -20px; top: 0;
}
.holychannel .phone img {
  width: 155px;
}
.holychannel .phoneView {
  position: absolute; right: 15px; top: 90px;
  width: 93px; height: 102px; overflow: hidden;
}
.holychannel .phoneView img {
  width: 240px; position: absolute; right: 0; top: 0;
}
.holychannel .phone .dotNav {
  position: absolute; left: 83px; bottom: 50px;
  text-align: center;
}
.holychannel .phone .dotNav li {
  display: inline-block;
  width: 1px; height: 1px; margin: 0 1px;
  background: #ABABAB;
  transform: rotate(45deg);
}
.holychannel .phone .dotNav li:nth-child(3){
  background: #720000;
}
.holychannel > div:first-child > img {
  width: 240px; margin-top: 90px; margin-bottom: 68px;
}
.holychannel > div:nth-child(2) {
  padding-right: 20px; display: inline-block;
}
.holychannel > div:nth-child(2) p {
  width: 100%;display: inline-block;
}
.holychannel > div:nth-child(2) p .langKo {
  word-break: keep-all;
}
.holychannel > div:nth-child(2) p span {
  display: block;
}
.holychannel > div:nth-child(2) div {
  margin-top: 40px;
}
.holychannel > div:nth-child(2) div button {
  cursor: pointer; color: #000;
  font-size: 1.2rem; line-height: 20px; font-weight: 300; vertical-align: middle;
}
.holychannel > div:nth-child(2) div button img {
  width: 4px; margin-left: 8px;
}
.dispenser {
  width: 83.333%; margin-left: 7.467%; margin-bottom: 60px;
}
.dispenser div:first-child {
  margin-bottom: 40px;
}
.dispenser div:nth-child(2) {
  padding-left: 12px;
}
.dispenser div:nth-child(2) span {
  display: block;
}
.dispenser div:nth-child(2) p .langKo {
  word-break:keep-all;
}
.dispenser div:nth-child(2) div {
  margin-top: 30px;
}
.dispenser div:nth-child(2) div button {
  cursor: pointer;color: #000;
  font-size: 1.2rem; line-height: 20px;font-weight: 300;vertical-align: middle;
}
.dispenser > div:nth-child(2) div button img {
  width: 4px; margin-left: 8px;
}
.bluetena {
  width: 83.333%; margin-left: 10.667%; margin-bottom: 60px;
  text-align: right;
}
.bluetena > div:first-child {
  position: relative;
  text-align: right;
  display: flex;
  width: 252px; margin: 0 0 40px auto;
}
.bluetena > div:first-child img {
  width: 50%;
}
.bluetena > div:nth-child(2) {
  padding-right: 20px; display: inline-block;
}
.bluetena > div:nth-child(2) p {
  width: 100%;display: inline-block;
}
.bluetena > div:nth-child(2) p .langKo {
  word-break: keep-all;
}
.bluetena > div:nth-child(2) p span {
  display: block;
}
.bluetena > div:nth-child(2) div {
  margin-top: 40px;
}
.bluetena > div:nth-child(2) div button {
  cursor: pointer; color: #000;
  font-size: 1.2rem; line-height: 20px; font-weight: 300; vertical-align: middle;
}
.bluetena > div:nth-child(2) div button img {
  width: 4px; margin-left: 8px;
}
.cozythere {
  width: 83.333%; margin-left: 7.467%; margin-bottom: 60px;
}
.cozythere div:first-child {
  width: 298px;
  margin-bottom: 40px;
}
.cozythere > div:first-child img {
  width: 100%;
}
.cozythere div:nth-child(2) {
  padding-left: 12px;
}
.cozythere div:nth-child(2) span {
  display: block;
}
.cozythere div:nth-child(2) p .langKo {
  word-break:keep-all;
}
.cozythere div:nth-child(2) div {
  margin-top: 30px;
}
.cozythere div:nth-child(2) div button {
  cursor: pointer;color: #000;
  font-size: 1.2rem; line-height: 20px;font-weight: 300;vertical-align: middle;
}
.cozythere > div:nth-child(2) div button img {
  width: 4px; margin-left: 8px;
}
/* contact */
.contact {
  padding: 80px 0; text-align: center;
}
.office {
  margin-bottom: 75px;
}
.office h4 {
  margin-bottom: 24px;
  font-size: 2rem; font-family: montHeavy,sans-serif;
}
.office div {
  margin-bottom: 21px;
}
.office address {
  font-size: 1.2rem; font-weight: 500; font-style: normal; line-height: 15px;
}
.office address .langKo {
  font-weight: normal;
}
.office address span {
  display: block;
}
.getInTuchForm h4 {
  margin-bottom: 20px;
  font-size: 2rem; font-family: montHeavy, sans-serif;
}
.getInTuchForm h4 .langKo {
  font-family: NanumS, sans-serif; font-size: 1.8rem;
}
.getInTuchForm > div {
  width: 83.333%; margin: 0 auto;
}
.getInTuchForm div input {
  width: 100%; height: 48px; margin-bottom: 16px; padding: 17px 12px; border: 1px solid #F4C53A;
  font-size: 1.2rem; font-weight: 300; line-height: 15px; color: #252525; background: #fff;
}
.getInTuchForm div input::placeholder {
  color: #CACACA;
}
.getInTuchForm div input::-webkit-input-placeholder {
  color: #CACACA;
}
.getInTuchForm div input:-ms-input-placeholder {
  color: #CACACA;
}
.getInTuchForm div textarea {
  width: 100%; height: 120px; margin-bottom: 16px; padding: 17px 12px; border: 1px solid #F4C53A; resize: none; font-weight: 300;
  font-size: 1.2rem; line-height: 15px; color: #252525; background: #fff;
}
.getInTuchForm div textarea::placeholder {
  color: #CACACA;
}
.getInTuchForm div textarea::-webkit-input-placeholder {
  color: #CACACA;
}
.getInTuchForm div textarea:-ms-input-placeholder {
  color: #CACACA;
}
.getInTuchForm div div {
  position: relative; margin-bottom: 57px;
}
.getInTuchForm .fileName_txt {
  position: relative;
  width: 160px;
}
.getInTuchForm .fileName_txt input {
  height: 36px; border-top: none; border-left: none; border-right: none;
}
.getInTuchForm .fileName_txt span {
  position: absolute; right: 0; top: 44px;
  color: #CACACA; font-size: 0.8rem; line-height: 10px;
}
.getInTuchForm div div label {
  position: absolute; right: 0; top: 0;
  display: block;
  width: 88px; height: 36px; border: 1px solid #F4C53A; border-radius: 18px;
  color: #F4C53A; font-size: 1.2rem; line-height: 36px; font-weight: normal;
}
.getInTuchForm input[type="button"] {
  width: 100%; height: 48px;
  background: #F4C53A; color: #fff; font-size: 1.6rem; font-family: montHeavy,sans-serif; line-height: 15px;
  cursor: pointer; font-weight: bold;
}
/* footer */
footer {
  width: 100%; padding: 16px 0 20px;
  background: #252525; text-align: center;
}
.copyright {
  color: #666; font-size: 0.8rem;font-family: montHeavy,sans-serif; line-height: 12px;
}
/* 360분기 */
@media screen and (min-width: 360px){
  .manImage {
    width: 140px;
  }
  .clients .application p {
    width: 150px;margin-top: 30px;
  }
  .clients .application div:nth-of-type(2) svg {
    width: 140px;
  }
  /* products */
  .holychannel .phone {
    right: -10px;
  }
  .holychannel .phone img {
    width: 170px;
  }
  .holychannel .phoneView {
    top: 95px;
    width: 104px;
  }
  .holychannel .phoneView img {
    width: 266px;
  }
  .holychannel .phone .dotNav {
    left: 89px; bottom: 50px;
  }
  .holychannel .phone .dotNav li {
    width: 2px; height: 2px;
  }
  .holychannel > div:first-child > img {
    width: 266px; margin-top: 95px;
  }
  .dispenser div:nth-child(2) {
    width: 311px;
  }
  .cozythere div:nth-child(2) {
    width: 311px;
  }
  /* contact */
  .getInTuchForm > div {
    width: 300px;
  }
  .getInTuchForm .fileName_txt {
    position: relative;
    width: 200px;
  }
}
/* 768분기 */
@media screen and (min-width: 768px){
  .clients .mobile {
    display: none;
  }
  .clients .pc {
    display: block;
  }
  .clients .application div {
    text-align: left;
  }
  .clients .application div:nth-of-type(1) {
    position: relative;
    width: 307px; float: left; margin-left: calc(50% - 307px)
  }
  .clients .application div:nth-of-type(1) .shapeImage {
    position: static;
    width: 100%; margin-left: 0;
  }
  .clients .application h4 {
    float: left;
    width: 50%; padding-top: 0;
  }
  .clients .application h4 .langKo {
    margin-top: 0;
  }
  .clients .application h4 span span {
    display: inline;
  }
  .clients .application div:nth-of-type(2) {
    clear: none; float: left; width: 216px; margin-left: 30px;
  }
  .clients .application p {
    width: auto; margin-top: 0;
  }
  .clients .doorlock,
  .clients .access,
  .clients .mimiclinic,
  .clients .galleryan,
  .clients .yurimsolution,
  .clients .myconect {
    float: left;
    width: 49%; text-align: center;
  }
  .clients .doorlock,
  .clients .mimiclinic,
  .clients .yurimsolution {
    margin-right: 2%;
  }
  .clients .doorlock,
  .clients .mimiclinic,
  .clients .yurimsolution {
    margin-bottom: 120px;
  }
  .clients .doorlock h4,
  .clients .access h4,
  .clients .mimiclinic h4,
  .clients .galleryan h4,
  .clients .yurimsolution h4,
  .clients .myconect h4 {
    margin-bottom: 20px;text-align: left;
    /* display: inline-block; width: 170px; */
  }

  /* .clients .doorlock h4 span,
  .clients .access h4 span
  .clients .mimiclinic h4 span
  .clients .galleryan h4 span
  .clients .yurimsolution h4 span
  .clients .myconect h4 span {
    display: block;
  } */
  .clients .doorlock div div:first-child,
  .clients .access div div:first-child,
  .clients .mimiclinic div div:first-child,
  .clients .galleryan div div:first-child,
  .clients .yurimsolution div div:first-child,
  .clients .myconect div div:first-child {
    padding-left: 0;
  }
  .clients .doorlock div div:nth-child(2),
  .clients .access div div:nth-child(2),
  .clients .mimiclinic div div:nth-child(2),
  .clients .galleryan div div:nth-child(2),
  .clients .yurimsolution div div:nth-child(2),
  .clients .myconect div div:nth-child(2) {
    text-align: left;
  }
  .clients .doorlock div div p,
  .clients .access div div p,
  .clients .mimiclinic div div p,
  .clients .galleryan div div p,
  .clients .yurimsolution div div p,
  .clients .myconect div div p {
    width: 90%;
  }
  .clients .doorlock div div p .mobile,
  .clients .access div div p .mobile,
  .clients .mimiclinic div div p .mobile,
  .clients .galleryan div div p .mobile,
  .clients .yurimsolution div div p .mobile,
  .clients .myconect div div p .mobile {
    display: inline;
  }
  .clients .doorlock div div p .pc,
  .clients .access div div p .pc,
  .clients .mimiclinic div div p .pc,
  .clients .galleryan div div p .pc,
  .clients .yurimsolution div div p .pc,
  .clients .myconect div div p .pc {
    display: none;
  }

  .holychannel > div:nth-child(2) div a {
    margin-left: 10px;
  }
  .holychannel > div:nth-child(2){
    width: 420px;
  }
  .dispenser div:nth-child(2) {
    width: 412px;
  }
  .bluetena > div:nth-child(2) div a {
    margin-left: 10px;
  }
  .bluetena > div:nth-child(2){
    width: 420px;
  }
  .cozythere div:nth-child(2) {
    width: 412px;
  }
}
/* 1024분기 */
@media screen and (min-width: 1024px){
  .mobile {
    display: none;
  }
  .pc {
    display: block;
  }
  /* header */
  header {
    -webkit-box-shadow: 0 2px 8px 1px #ddd;
    box-shadow: 0 2px 8px 1px #ddd;
  }
  /* nav */
  nav {
    position: absolute; left: auto; right: 4.267%; top: 18px;
    display: block !important;
    width: auto; height: auto; padding-top: 0; background: none; overflow-y: visible;
  }
  nav ul {
    position: static; width: auto; margin-top: 0;
  }
  nav ul li {
    position: relative;
    float: left;
  }
  nav ul a {
    font-size: 1.4rem; padding: 12px; line-height: 15px;
  }
  nav ul li:nth-last-child(2) a {
    padding-right: 23px;
  }
  nav ul li:nth-last-child(2):before {
    content: ""; position: absolute; right: 0; top: 50%;
    width: 1px; height: 15px; background: #F4C53A; margin-top: -8px;
  }
  nav ul .mobile {
    display: none;
  }
  nav ul .pc a {
    padding-right: 23px; padding-left: 23px;
    background: url('../img/arrow_bottom.svg') no-repeat;
    background-position: right center; background-size: 8px 5px;
  }
  nav ul .pc div {
    position: relative;
    display: none; padding-top: 10px; background: #fff;
    box-shadow: 0 4px 5px 1px rgba(221,221,221,1);
  }
  nav ul .pc div.on {
    display: block;
  }
  nav ul .pc div:after {
    position: absolute; left: 50%; top: 5px;
    content: ""; display: block; width: 40px; height: 1px; background: #eee; margin-left: -20px;
  }
  nav ul .pc button {
    cursor: pointer; display: block;
    font-size: 1.4rem; padding: 20px 23px; line-height: 15px;font-family: montLight, sans-serif;
  }

  /* content */
  /* who we are */
  .whoWeAre {
    padding-bottom: 0; 
  }
  .whoWeAre .contentInner {
    position: relative;
    width: 74.667%; margin: 50px auto 0;
  }
  .whoWeAre .holichIllust {
    position: absolute; right: 0; bottom: 0;
    width: 50%; margin-left: 0;
  }
  .whoWeAre .contentInner div:nth-child(2) {
    width: 50%; margin: 0; padding-top: 56px;
  }
  .whoWeAre .contentInner div:nth-child(2) h3 span {
    display: block;
  }
  .whoWeAre .contentInner div:nth-child(2) h3 .langKo {
    font-size: 1.6rem;
  }
  .whoWeAre .contentInner div:nth-child(2) p {
    width: 73.333%; margin-bottom: 72px;
  }
  .whoWeAre .contentInner div:nth-child(2) a {
    position: relative; margin-bottom: 126px;
    display: inline-block; width: 154px; height: 48px; padding-top: 25px; color: #252525;
    font-size: 2rem; font-family: montHeavy, sans-serif;
  }
  .whoWeAre .contentInner div:nth-child(2) a img {
    position: absolute; right: 0; top: 0; width: 22px; height: 100%;
  }
  /* what we do */
  .gearWheelImage {
    left: -80px; top: 250px;
    width: 253px;
  }
  .computerImage {
    position: absolute; right: -80px; bottom: -120px;
    width: 300px;
  }
  .whatWeDo .introduction div .langKo {
    font-size: 3.6rem; line-height: 50px;
  }
  .service div div {
    float: left; margin-right: 8.653%;
    width: 27.382%;
  }
  .service > div div:nth-child(3n){
    margin-right: 0;
  }
  .service > div:last-of-type div:nth-last-of-type(2){
    margin-bottom: 0;
  }
  /* clients */
  .clients .contentInner {
    width: 74.667%; margin: 0 auto;
  }
  .clients .doorlock div div p .mobile,
  .clients .access div div p .mobile,
  .clients .mimiclinic div div p .mobile,
  .clients .galleryan div div p .mobile,
  .clients .yurimsolution div div p .mobile,
  .clients .myconect div div p .mobile {
    display: none;
  }
  .clients .doorlock div div p .pc,
  .clients .access div div p .pc,
  .clients .mimiclinic div div p .pc,
  .clients .galleryan div div p .pc,
  .clients .yurimsolution div div p .pc,
  .clients .myconect div div p .pc {
    display: inline;
  }
  /* products */
  .holychannel {
    position: relative;
    margin: 0 auto 30px; text-align: left;
  }
  .holychannel > div:first-child {
    position: absolute; right: 20px; top: 0;
  }
  .holychannel > div:nth-child(2) {
    width: 55%; margin-left: calc(45% - 315px); text-align: right; padding-right: 0;
  }
  .holychannel > div:nth-child(2) p {
    width: auto; padding-right: 10.542%;
  }
  .holychannel > div:nth-child(2) p span:last-child {
    display: inline;
  }
  .holychannel > div:nth-child(2) div {
    padding-right: 10.542%;
  }
  .holychannel > div:nth-child(2) div a {
    margin-left: 15px;
  }
  .dispenser {
    position: relative;
    margin: 0 auto 30px;
  }
  .dispenser div:first-child {
    position: absolute; left: 0; top: 0;
  }
  .dispenser div:nth-child(2) {
    width: 55%; margin-left: 181px;
  }
  .dispenser div:nth-child(2) p {
    padding-left: 10.542%;
  }
  .dispenser div:nth-child(2) div {
    text-align: right; margin-right: 10px;
  }
  .bluetena {
    position: relative;
    margin: 0 auto 80px; text-align: left;
  }
  .bluetena > div:first-child {
    position: absolute; right: 20px;
    /* width: 475px; right: -100px;
    display: flex; */
  }
  .bluetena > div:nth-child(2) {
    width: 55%; margin-left: calc(45% - 315px); text-align: right; padding-right: 0;
  }
  .bluetena > div:nth-child(2) p {
    width: auto; padding-right: 10.542%;
  }
  .bluetena > div:nth-child(2) p span:last-child {
    display: inline;
  }
  .bluetena > div:nth-child(2) div {
    padding-right: 10.542%;
  }
  .bluetena > div:nth-child(2) div a {
    margin-left: 15px;
  }
  .cozythere {
    position: relative;
    margin: 0 auto 120px;
  }
  .cozythere div:first-child {
    position: absolute; left: -60px; top: 0;
  }
  .cozythere div:nth-child(2) {
    width: 55%; margin-left: 181px;
  }
  .cozythere div:nth-child(2) p {
    padding-left: 10.542%;
  }
  .cozythere div:nth-child(2) div {
    text-align: right; margin-right: 10px;
  }
  /* contact */
  .contact {
    padding-bottom: 120px;
  }
  .contact h3 {
    margin-bottom: 80px;
    font-size: 3.6rem; line-height: 40px;
    color: #F4C53A; font-family: montHeavy, sans-serif;
  }
  .office {
    vertical-align: top;
    display: inline-block; margin-bottom: 0; margin-right: 100px;
  }
  .getInTuchForm {
    display: inline-block;
  }
  .getInTuchForm h4 {
    text-align: left;
  }
  /* footer */
  .copyright span {
    display: inline;
  }
}
/* 1280분기 */
@media screen and (min-width:1280px){
  /* header */
  header {
    height: 118px;
  }
  .headerInner {
    position: relative;
    width: 1080px; margin: 0 auto;
  }
  h1 {
    width: 119px; margin-top: 41px; margin-left: 0;
  }
  /* nav */
  nav {
    right: 0; top: 19px;
  }
  nav ul a {
    font-size: 1.6rem;
  }
  /* content */
  section {
    margin-top: 118px;
  }
  /* who we are */
  .whoWeAre {
    padding-top: 101px;
  }
  .whoWeAre .contentInner {
    width: 1080px; margin-top: 0;
  }
  .whoWeAre .holichIllust {
    width: 626px; right: -92px;
  }
  .whoWeAre .contentInner div:nth-child(2) {
    width: auto; padding-top: 85px; margin-left: 85px;
  }
  .whoWeAre .contentInner div:nth-child(2) h3 {
    margin-bottom: 80px;
    font-size: 6.4rem; line-height: 64px;
  }
  .whoWeAre .contentInner div:nth-child(2) h3 .langKo {
    font-size: 2.4rem;
  }
  .whoWeAre .contentInner div:nth-child(2) p {
    width: 396px;
    font-size: 2rem; line-height: 32px;
  }
  /* what we do */
  .gearWheelImage {
    left: -46px; top: 510px;
    width: 330px;
  }
  .computerImage {
    position: absolute; right: -70px; bottom: -162px;
    width: 400px;
  }
  .whatWeDo {
    padding: 156px 0 202px; overflow: hidden;
  }
  .whatWeDo .contentInner {
    width: 1080px; padding-left: 83px; padding-right: 83px;
  }
  .whatWeDo .introduction {
    margin-bottom: 104px;
  }
  .whatWeDo .introduction div {
    font-size: 5.6rem; line-height: 64px;
  }
  .whatWeDo .introduction div .langKo {
    font-size: 4.4rem; line-height: 70px;
  }
  .service div div {
    margin-bottom: 80px;
    width: 250px; margin-right: 79px;
  }
  .service div h4 {
    font-size: 2.4rem; line-height: 36px; margin-bottom: 32px;
  }
  .service div p {
    font-size: 1.6rem; line-height: 24px;
  }
  /* clients */
  .clients {
    padding: 147px 0 165px;
  }
  .clients .contentInner {
    width: 1080px;
  }
  .clients .application {
    margin-bottom: 80px;
  }
  .clients .application div:nth-of-type(1) {
    width: 593px; margin-left: -44px;
  }
  .clients .application h4 {
    width: auto;
    font-size: 4.8rem; line-height: 56px;
  }
  .clients .application h4 .langKo {
    font-size: 3.6rem;
  }
  .clients .application div:nth-of-type(2) {
    width: 398px; margin-left: 67px;
  }
  .clients .application div:nth-of-type(2) p {
    font-size: 2.4rem; line-height: 36px;
  }
  .clients .application p .langKo {
    font-size: 2.2rem;
  }
  .clients .doorlock h4,
  .clients .access h4,
  .clients .mimiclinic h4,
  .clients .galleryan h4,
  .clients .yurimsolution h4,
  .clients .myconect h4 {
    margin-bottom: 30px;
    font-size: 2.4rem; line-height: 28px;
    /* width: 243px;  */
  }
  .clients .doorlock h4 .langKo,
  .clients .access h4 .langKo,
  .clients .mimiclinic h4 .langKo,
  .clients .galleryan h4 .langKo,
  .clients .yurimsolution h4 .langKo,
  .clients .myconect h4 .langKo {
    font-size: 2rem;
  }
  .clients .doorlock div div:first-child,
  .clients .access div div:first-child,
  .clients .mimiclinic div div:first-child,
  .clients .galleryan div div:first-child,
  .clients .yurimsolution div div:first-child,
  .clients .myconect div div:first-child {
    width: 40%; padding-top: 22px; padding-left: 20px; text-align: left;
  }
  .clients .doorlock div div img,
  .clients .access div div img,
  .clients .mimiclinic div div img,
  .clients .galleryan div div img,
  .clients .myconect div div img {
    width: 148px;
  }
  .clients .yurimsolution div div img {
    width: 138px;
  }
  .clients .doorlock div div:nth-child(2),
  .clients .access div div:nth-child(2),
  .clients .mimiclinic div div:nth-child(2),
  .clients .galleryan div div:nth-child(2),
  .clients .yurimsolution div div:nth-child(2),
  .clients .myconect div div:nth-child(2) {
    width: 60%;
  }
  .clients .doorlock div div p,
  .clients .access div div p,
  .clients .mimiclinic div div p,
  .clients .galleryan div div p,
  .clients .yurimsolution div div p,
  .clients .myconect div div p {
    width: 250px;height: auto; margin-bottom: 20px; font-size: 1.6rem; line-height: 24px;
  }
  .clients .doorlock div div > button,
  .clients .access div div > button,
  .clients .mimiclinic div div > button,
  .clients .galleryan div div > button,
  .clients .yurimsolution div div > button,
  .clients .myconect div div > button {
    font-size: 1.6rem;
  }
  .clients .doorlock div div > button img,
  .clients .access div div > button img,
  .clients .mimiclinic div div > button img,
  .clients .galleryan div div > button img,
  .clients .yurimsolution div div > button img,
  .clients .myconect div div > button img {
    width: 8px; left: 8px;
  }
  /* product */
  .products {
    padding: 171px 0 156px; overflow: hidden;
  }
  .products .contentInner {
    width: 1080px; margin: 0 auto;
  }
  .products h4 {
    margin-bottom: 50px;
    font-size: 3.6rem; line-height: 40px;
  }
  .products p {
    font-size: 2rem; line-height: 32px;
  }
  .holychannel {
    width: auto; margin: 0 0 100px;
  }
  .holychannel > div:first-child {
    width: 450px; right: -50px; top: 15px;
  }
  .holychannel .phone {
    right: -25px;
  }
  .holychannel .phone img {
    width: 296px;
  }
  .holychannel .phoneView {
    right: 25px; top: 165px;
    width: 183px; height: 200px;
  }
  .holychannel .phoneView img {
    width: 450px;
  }
  .holychannel .phone .dotNav {
    left: 162px; bottom: 81px;
  }
  .holychannel .phone .dotNav li {
    width: 4px; height: 4px; margin: 0 2px;
  }
  .holychannel > div:first-child > img {
    width: 450px; margin-top: 165px;
  }
  .holychannel > div:nth-child(2) {
    width: 664px; margin-left: 33px;
  }
  .holychannel > div:nth-child(2) p {
    padding-right: 70px;
  }
  .holychannel > div:nth-child(2) div {
    margin-top: 80px;
  }
  .holychannel > div:nth-child(2) div button {
    font-size: 1.8rem; line-height: 22px;
  }
  .holychannel > div:nth-child(2) div button img {
    width: 6px; margin-left: 10px;
  }
  .dispenser {
    width: auto; margin: 0 0 100px;
  }
  .dispenser div:first-child {
    width: 566px;
  }
  .dispenser div:first-child img {
    width: 100%;
  }
  .dispenser div:nth-child(2) {
    width: 673px; margin-left: 347px;
  }
  .dispenser div:nth-child(2) p {
    padding-left: 70px;
  }
  .dispenser div:nth-child(2) div {
    margin-top: 80px; margin-right: 50px;
  }
  .dispenser div:nth-child(2) div button {
    font-size: 1.8rem; line-height: 22px;
  }
  .dispenser > div:nth-child(2) div button img {
    width: 6px; margin-left: 10px;
  }
  .bluetena {
    width: auto; margin: 0 0 160px;
  }
  .bluetena > div:first-child {
    width: 475px; right: -100px;
    display: flex;
  }
  .bluetena > div:nth-child(2) {
    width: 664px; margin-left: 33px;
  }
  .bluetena > div:nth-child(2) p {
    padding-right: 70px;
  }
  .bluetena > div:nth-child(2) div {
    margin-top: 80px;
  }
  .bluetena > div:nth-child(2) div button {
    font-size: 1.8rem; line-height: 22px;
  }
  .bluetena > div:nth-child(2) div button img {
    width: 6px; margin-left: 10px;
  }
  .cozythere {
    width: auto; margin: 0 0 170px;
  }
  .cozythere div:first-child {
    width: 530px;
    position: absolute; left: -100px; top: 0;
  }
  .cozythere div:first-child img {
    width: 100%;
  }
  .cozythere div:nth-child(2) {
    width: 673px; margin-left: 347px;
  }
  .cozythere div:nth-child(2) p {
    padding-left: 70px;
  }
  .cozythere div:nth-child(2) div {
    margin-top: 80px; margin-right: 50px;
  }
  .cozythere div:nth-child(2) div button {
    font-size: 1.8rem; line-height: 22px;
  }
  .cozythere > div:nth-child(2) div button img {
    width: 6px; margin-left: 10px;
  }
  /* contact */
  .contact {
    padding: 156px 0;
  }
  .contact h3 {
    margin-bottom: 158px;
    font-size: 5.6rem; line-height: 40px;
  }
  .office {
    margin-right: 144px;
  }
  .office h4 {
    margin-bottom: 38px;
    font-size: 2.8rem;
  }
  .office div {
    width: 318px; margin-bottom: 61px;
  }
  .office div img {
    width: 100%;
  }
  .office address {
    font-size: 1.6rem; line-height: 19px;
  }
  .getInTuchForm h4 {
    margin-bottom: 18px;
    font-size: 2.8rem;
  }
  .getInTuchForm h4 .langKo {
    font-family: NanumS, sans-serif; font-size: 2.2rem;
  }
  .getInTuchForm div {
    width: 450px;
  }
  .getInTuchForm div input {
    height: 56px; margin-bottom: 20px; padding: 16px 20px;
    font-size: 2rem; line-height: 24px;
  }
  .getInTuchForm div textarea {
    height: 180px; margin-bottom: 20px; padding: 15px 20px;
    font-size: 2rem; line-height: 24px;
  }
  .getInTuchForm .fileName_txt {
    width: 302px;
  }
  .getInTuchForm .fileName_txt input {
    height: 44px;
  }
  .getInTuchForm .fileName_txt span {
    top: 52px;
    font-size: 1.2rem; line-height: 15px;
  }
  .getInTuchForm div div label {
    width: 128px; height: 44px; border-radius: 22px;
    font-size: 1.8rem; line-height: 44px;
  }
  .getInTuchForm input[type="button"] {
    height: 56px; font-size: 2rem;
  }
  /* footer */
  footer {
    padding: 48px 0;
  }
  .copyright {
    font-size: 1.2rem;
  }
}
@media screen and (min-width:1440px){
  .computerImage {
    position: absolute; right: -197px; bottom: -162px;
    width: 480px;
  }
  .holychannel > div:first-child {
    width: 510px; right: -90px;
  }
  .holychannel > div:nth-child(2) {
    margin-left: 63px;
  }
  .bluetena > div:first-child {
    width: 475px; right: -150px;
    display: flex;
  }
  .bluetena > div:nth-child(2) {
    margin-left: 63px;
  }
}