.bg_box,
.main .cosmetic,
.main .contents .content .minors span::before,
.main .faq .block .content .top::before,
.main .app .mon_btn::before {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.main .cosmetic {
  background-image: url(../img/monitor/cosmetic_bg.png);
  letter-spacing: 0.1em;
  padding: 8% 0;
  padding-left: 6.6vw;
  padding-right: 36vw;
}

.main .cosmetic h2 {
  line-height: 1.429;
  margin-bottom: 6%;
}

.main .cosmetic p.f14 {
  line-height: 2;
}

.main .contents {
  margin-top: 6.59%;
}

.main .contents .content {
  letter-spacing: 0.1em;
  padding-top: 3.4%;
  margin-bottom: 8%;
  position: relative;
}

.main .contents .content h3.f32 {
  margin-bottom: 5.5%;
}

.main .contents .content p.f14 {
  line-height: 2;
}

.main .contents .content::before {
  position: absolute;
  content: '';
  background-color: #333333;
  height: 1px;
  width: 17vw;
  top: 0;
  left: 0;
}

.main .contents .content .part_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.main .contents .content .part_box .part {
  border: 1px solid #333333;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 47.87%;
  flex: 0 0 47.87%;
  margin-right: 4.257%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2.3% 0;
}

.main .contents .content .part_box .part .left {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 26.8%;
  flex: 0 0 26.8%;
  padding: 9% 0;
  padding-left: 3vw;
  border-right: 1px solid #333333;
}

.main .contents .content .part_box .part .right {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 73.2%;
  flex: 0 0 73.2%;
  padding-left: 1.4vw;
}

.main .contents .content .part_box .part .right .list li {
  line-height: 1.714;
  list-style: disc;
  list-style-position: inside;
}

.main .contents .content .part_box .part .right .list li:last-child {
  margin-bottom: 0;
}

.main .contents .content .part_box .part:nth-child(2n) {
  margin-right: 0;
}

.main .contents .content .part_box .part:nth-child(n + 3) {
  margin-top: 2.1%;
}

.main .contents .content .minors {
  display: block;
  text-align: center;
  border: 1px solid #333333;
  width: 25.54%;
  padding: 1.78% 0;
  padding-left: 2vw;
  margin-top: 3%;
}

.main .contents .content .minors span {
  position: relative;
}

.main .contents .content .minors span::before {
  position: absolute;
  content: '';
  background-image: url(../img/monitor/minors.png);
  width: 21px;
  height: 18px;
  top: 0;
  bottom: 0;
  left: -3vw;
  margin: auto;
}

.main .faq {
  background-color: #ab9f90;
  padding-top: 5.857%;
  padding-bottom: 6.589%;
}

.main .faq h2.mds {
  text-align: center;
  color: #fff;
}

.main .faq .block {
  margin-top: 4.6%;
}

.main .faq .block .content {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 2.13% 0;
  padding-left: 3.6vw;
  padding-right: 3.6vw;
  margin-bottom: 3.63%;
}

.main .faq .block .content .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.main .faq .block .content .top .icon {
  margin-right: 4%;
}

.main .faq .block .content .top::before {
  position: absolute;
  content: '';
  background-image: url(../img/common/under_arrow_w.svg);
  width: 21px;
  height: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 1vw;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.main .faq .block .content .top.on::before {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.main .faq .block .content .submenu {
  display: none;
  border-top: 1px solid #fff;
  margin-top: 1.6%;
  padding-top: 1.6%;
  padding-left: 8%;
}

.main .faq .block .content .submenu p.f14 {
  line-height: 1.714;
}

.main .faq .block .content:last-child {
  margin-bottom: 0;
}

.main .faq .block .content.down-to-top {
  opacity: 0.3;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.main .faq .block .content.down-to-top.scrollin {
  opacity: 1;
}

.main .app {
  margin-top: 6.589%;
}

.main .app .text {
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
  margin-top: 5.62%;
  margin-bottom: 5%;
}

.main .app .mon_btn {
  display: block;
  position: relative;
  border: 1px solid #aa9050;
  padding: 6.45% 0;
  padding-left: 4vw;
}

.main .app .mon_btn h2 {
  color: #aa9050;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.main .app .mon_btn h2 span {
  color: #797369;
  margin-left: 4%;
}

.main .app .mon_btn::before {
  position: absolute;
  content: '';
  background-image: url(../img/common/long_arrow.svg);
  width: 150px;
  height: 10px;
  top: 0;
  bottom: 0;
  right: 4vw;
  margin: auto;
}

.main .app .mon_btn:hover {
  background-color: #aa9050;
  opacity: 1;
}

.main .app .mon_btn:hover h2 {
  color: #fff;
}

.main .app .mon_btn:hover span {
  color: #fff;
}

.main .app .mon_btn:hover::before {
  background-image: url(../img/common/long_arrow_w.svg);
}

.footer .info {
  margin-top: 4.5%;
}

@media screen and (max-width: 1024px) {
  .main .cosmetic {
    padding-right: 15vw;
  }
}

@media screen and (max-width: 768px) {
  .main .contents .content .part_box .part {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 48.87%;
    flex: 0 0 48.87%;
    margin-right: 2.257%;
    padding: 2% 0;
  }
  .main .contents .content .part_box .part .left {
    padding: 13% 0;
    padding-left: 2vw;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 23.8%;
    flex: 0 0 23.8%;
  }
  .main .contents .content .part_box .part .right {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 76.2%;
    flex: 0 0 76.2%;
  }
  .main .contents .content {
    padding-top: 5%;
  }
  .main .contents .content h3.f32 {
    font-size: 20px;
  }
  .main .contents .content .minors {
    width: 30%;
    padding: 2.5% 0;
  }
  .main .contents .content .minors span::before {
    width: 20px;
    height: 17px;
    left: -4vw;
  }
  .main .faq .block .content {
    padding-top: 3%;
    padding-bottom: 3%;
  }
  .main .app .text {
    font-size: 15px;
  }
  .main .app .mon_btn {
    padding-top: 5%;
    padding-bottom: 5%;
  }
  .main .faq .block .content .top .f20 {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .main .cosmetic {
    padding: 10% 0;
    padding-left: 3vw;
    padding-right: 3vw;
    background-position: -360px;
  }
  .main .cosmetic h2 {
    font-size: 24px;
    margin-bottom: 6%;
  }
  .main .cosmetic p.f14 {
    line-height: 1.7;
  }
  .main .contents {
    margin-top: 12%;
  }
  .main .contents .content {
    padding-top: 8%;
    margin-bottom: 10%;
  }
  .main .contents .content::before {
    width: 30vw;
  }
  .main .contents .content h3.f32 {
    font-size: 18px;
  }
  .main .contents .content p.f14 {
    line-height: 1.7;
    margin-bottom: 6%;
    font-size: 13px;
  }
  .main .contents .content .part_box {
    display: block;
  }
  .main .contents .content .part_box .part {
    margin-right: 0;
    display: block;
    padding-top: 4%;
    padding-bottom: 4%;
  }
  .main .contents .content .part_box .part:nth-child(n + 2) {
    margin-top: 6%;
  }
  .main .contents .content .part_box .part .left {
    font-size: 14px;
    padding-top: 0;
    padding-bottom: 2.5%;
    margin-bottom: 2.5%;
    border-bottom: 1px solid #333333;
    border-right: transparent;
  }
  .main .contents .content .part_box .part .right {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    padding-left: 3vw;
  }
  .main .contents .content .part_box .part .right .list {
    font-size: 12px;
  }
  .main .contents .content .minors {
    width: 60%;
    padding: 4% 0;
    margin: 0 auto;
    font-size: 12px;
  }
  .main .contents .content .minors span::before {
    width: 15px;
    height: 13px;
    left: -8vw;
  }
  .main .faq {
    padding-top: 10%;
    padding-bottom: 10%;
  }
  .main .faq .block {
    margin-top: 8%;
  }
  .main .faq .block .content {
    padding-top: 5%;
    padding-bottom: 5%;
    padding-right: 8%;
    margin-bottom: 5%;
  }
  .main .faq .block .content .top .icon {
    font-size: 20px;
    margin-right: 3%;
  }
  .main .faq .block .content .top p.f20 {
    font-size: 14px;
    line-height: 1.5;
  }
  .main .faq .block .content .top::before {
    width: 15px;
    height: 8px;
    right: -5vw;
  }
  .main .faq .block .content .submenu p.f14 {
    font-size: 12px;
    line-height: 1.7;
  }
  .main .faq .block .content .submenu {
    margin-top: 3%;
    padding-top: 3%;
  }
  .main .app {
    margin-top: 12%;
  }
  .main .app .text {
    font-size: 14px;
    margin: 7% 0;
  }
  .main .app .mon_btn::before {
    width: 40px;
    background-position: right;
  }
  .main .app .mon_btn h2 {
    font-size: 21px;
  }
  .main .app .mon_btn h2 span {
    font-size: 12px;
  }
  .footer .info .btn_box {
    margin-top: 6%;
  }
}