/* BASIC css start */
.basiccateComent {
  height: 42px;
  line-height: 42px;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #ececec;
  font-size: 15px;
  font-weight: 500;
  font-size: 16px;
}
.basiccateComent h2 {
  width: 0;
  height: 0;
  overflow: hidden;
}
.basiccateComent span {
  color: #f40d08;
  font-weight: normal;
}
.basiccateComent > a {
  display: block;
  width: 80px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}
.basiccateComent > a > p {
  width: 21px;
  height: 21px;
  margin: 9.5px auto;
  border: 1px solid #ccc;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.basiccateComent > a > p > i {
  font-style: normal;
  font-size: 11px;
  line-height: 11px;
  color: #ccc;
}
/* 상단 카테고리 명 */

.section {
  width: 100%;
}
.section img {
  width: 100%;
}
.section__main {
  width: 100%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.section__main div {
  position: absolute;
}
.section__main .main-subTitle {
  font-size: 4vw;
  line-height: 4vw;
  font-weight: bold;
  margin-top: 11vw;
}
.section__main .main-mainLogo {
  width: 51%;
  margin-top: 16.2vw;
}
.section__main .main-text {
  font-size: 2.74vw;
  line-height: 4vw;
  font-weight: bold;
  margin-top: 31vw;
}

.section__subject {
  width: 100%;
  padding-top: 16.1vw;
  position: relative;
}
.section__subject-area-in {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.section__subject .section__subject-btn {
  float: left;
  width: 33.333%;
  height: 100%;
  padding: 20px 10px;
  background: #e0e4e9;
  color: #444649;
  border-right: 1px solid #cbcbcb;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.1s;
}
.section__subject .section__subject-btn:last-child {
  border-right: none;
}
.section__subject .section__subject-btn.btn-on {
  margin-top: 0px;
  background: #0f0f0f;
  color: #fafafa;
}
.section__subject .section__subject-btn.btn-off:hover {
  opacity: 0.85;
}
.section__subject-btn .subject-btn-img {
  width: 4em;
  height: 3.5em;
}
.section__subject-btn .subject-btn-txt {
  margin-left: 7px;
  font-size: 3vw;
  line-height: 4vw;
}
/* 구분 버튼 */

.section__video {
  width: 100%;
  padding-top: 58.5vw;
  position: relative;
}
.videoBoxBg {
  width: 94%;
  height: 87.4%;
  position: absolute;
  top: 12.6%;
  left: 2.9%;
}
.embedContainer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embedContainer iframe,
.embedContainer object,
.embedContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 동영상 '너비 100%' 기준 반응형으로 변경 */

.section__process {
  padding: 8.2vw 3vw 0px 3vw;
}
.section__process .section__process-in {
  float: left;
  margin-right: 1.26vw;
  width: 29.29vw;
}
.section__process .section__process-in:last-child {
  margin-right: 0px;
}
.section__process-in .process-in-img {
  width: 100%;
}
.section__process-in .process-in-txt {
  line-height: 5vw;
  background: #202020;
  color: #fff;
  font-size: 2.8vw;
  text-align: center;
  padding: 3vw 0px;
}
/* 자수 프로세스 */

.jasuBasic__area {
  padding: 18vw 2.9vw 17vw 2.9vw;
}
.jasuBasic__area.black {
  background: #1f1f1f;
}
.jasuBasic__area.black.pattern {
  background: -webkit-repeating-linear-gradient(
      #242424 1px,
      #242424 2px,
      transparent 2px,
      transparent 7px
    ),
    -webkit-repeating-linear-gradient(90deg, #242424 1px, #242424 2px, #1f1f1f
          2px, #1f1f1f 7px);
  background: repeating-linear-gradient(
      #242424 1px,
      #242424 2px,
      transparent 2px,
      transparent 7px
    ),
    repeating-linear-gradient(
      90deg,
      #242424 1px,
      #242424 2px,
      #1f1f1f 2px,
      #1f1f1f 7px
    );
}
.jasuBasic__area .jasuBasic__area-title {
  width: 100%;
  position: relative;
  color: #202020;
}
.jasuBasic__area .area-title-logo {
  width: 23.4%;
  margin-left: 1.5vw;
}
.jasuBasic__area-title .area-title-tit {
  line-height: 6vw;
  font-size: 5.2vw;
  font-weight: bold;
  margin: 1.5vw 0px 0px 1.5vw;
}
.jasuBasic__area-title .area-title-txt {
  line-height: 4.4vw;
  font-size: 3.4vw;
  margin: 1.5vw 0px 0px 1.5vw;
}
.jasuBasic__area-title.white .area-title-txt {
  color: #bcbcbc;
}
.jasuBasic__area-title.white div {
  color: #fff;
}
.area-title-btn {
  display: block;
  width: 80%;
  margin: 4.2vw auto 0px auto;
  font-size: 3.5vw;
  line-height: 4.1vw;
  padding: 2.5vw 0px;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #333333;
  color: #fff;
  font-weight: bold;
}
.area-title-btn.white {
  background: #e1e1e1;
  background: linear-gradient(#ececec, #bdbdbd);
  color: #202020;
}
/* 반복틀 공통 */

.jasuBasic__area .jasu-system {
  margin-top: 3.82vw;
  width: 100%;
}
.jasu-system .jasu-system-inner {
  width: 100%;
}
.jasu-system .jasu-system-inner-img {
  width: 44.25vw;
  float: left;
  margin-right: 2.127vw;
}
.jasu-system .jasu-system-inner-img:last-child {
  margin-right: 0px;
}
.jasu-system .jasu-system-inner-txt {
  line-height: 4.5vw;
  font-size: 3.1vw;
  margin: 3.82vw 0.2vw 0px 0.2vw;
}
/* 자수시스템 */
.jasu-gallery {
  width: 100%;
  margin-top: 3.82vw;
}
/* 자수갤러리 */

.jasuBasic__area .box-area {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ececec;
  padding: 5vw 3.17vw 4.65vw 3.17vw;
  color: #464646;
  margin-top: 3.5vw;
}
.jasuBasic__area .box-area.firstBox {
  margin-top: 4.5vw;
}
.jasuBasic__area .box-area.white {
  color: #ececec;
  border: 1px solid #d9d9d9;
}
.box-area .box-area-tit {
  font-size: 4vw;
  line-height: 6vw;
  font-weight: bold;
}
.box-area .box-area-txt {
  font-size: 2.7vw;
  line-height: 4vw;
  padding-left: 1.5vw;
  margin-top: 3vw;
}
/* 박스공통 */

.box-area-textNum {
  padding: 3vw;
  display: flex;
  flex-direction: column;
  color: #686868;
  background: #fafafa;
  margin-top: 2vw;
}
.box-area-textNum ul li {
  float: left;
  width: 8.3vw;
  height: 8.3vw;
  line-height: 8.3vw;
  border: 1px solid #888888;
  text-align: center;
  font-weight: bold;
  margin-right: 1vw;
  font-size: 4vw;
}
.box-area-textNum-txt {
  font-size: 2.7vw;
  line-height: 4vw;
  margin-top: 2vw;
}
/* 글자수 */

.box-area .box-area-inner {
  margin-top: 3.8vw;
  width: 100%;
  padding-top: 26.8vw;
  position: relative;
}
.box-area .box-area-inner.box-area-inner2 {
  padding-top: 33.1vw;
}
.box-area-inner .box-area-inner-bg1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.box-area-inner-bg-in1,
.box-area-inner-bg-in2 {
  width: 48%;
  position: relative;
  float: left;
  margin-right: 2%;
}
.box-area-inner-bg2 {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
/* 자수 신청 안내 */

.section__note {
  background: #fafafa;
  color: #464646;
  padding: 13.5vw 8vw 25vw 8vw;
  position: relative;
}
.section__note .section__note-tit {
  font-size: 4vw;
  line-height: 6vw;
  font-weight: bold;
  margin-top: 3vw;
}
.section__note .section__note-txt {
  font-size: 3vw;
  line-height: 5vw;
  margin-top: 3vw;
}
.section__note .section__note-txt span {
  color: #de1111;
}
.section__note .section__note-icon {
  width: 77px;
  height: 65px;
}
/* 자수 주의사항 */
/* BASIC css end */