/* BASIC css start */
.section {
  width: 1000px;
  margin: 10px auto 0px auto;
}

.section__subject {
  width: 100%;
  height: 100px;
}
.section__subject .section__subject-btn {
  float: left;
  width: 33.333%;
  height: 92px;
  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 {
  height: 100px;
  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: 45px;
  height: 45px;
}
.section__subject-btn .subject-btn-img1 {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/btn_img-boots-on.png)
    no-repeat;
  background-size: 100%;
}
.section__subject-btn .subject-btn-img2 {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/btn_img-gloves-off.png)
    no-repeat;
  background-size: 100%;
}
.section__subject-btn .subject-btn-img3 {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/btn_img-bag-off.png)
    no-repeat;
  background-size: 100%;
}
.section__subject-btn .subject-btn-txt {
  margin-left: 10px;
  font-size: 19px;
}
.section__main {
  width: 100%;
  height: 750px;
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID_in1.jpg)
    no-repeat;
  background-size: 100%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section__main .main-subTitle {
  font-size: 25px;
  margin-top: 112px;
}
.section__main .main-mainLogo {
  width: 330px;
  height: 80px;
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/title_boot-id-white.png)
    no-repeat;
  background-size: 100%;
  margin-top: 8px;
}
.section__main .main-text {
  font-size: 17px;
  line-height: 22px;
  margin-top: 20px;
}

.section__videoBg {
  width: 1000px;
  height: 608px;
  position: relative;
}
.videoBoxBg {
  width: 940px;
  height: 528px;
  position: absolute;
  top: 80px;
  left: 30px;
}
.videoBoxBg .videoBox {
  width: 940px;
  height: 528px;
}
.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: 100px 10px 0px 30px;
}
.section__process .section__process-in {
  float: left;
  margin-right: 20px;
  width: 300px;
  height: 330px;
}
.section__process-in .process-in-img {
  width: 300px;
  height: 262px;
}
.section__process-in .process-in-img1 {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID%2Dprocess%2Dimg1.jpg)
    no-repeat;
}
.section__process-in .process-in-img2 {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID%2Dprocess%2Dimg2.jpg)
    no-repeat;
}
.section__process-in .process-in-img3 {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID%2Dprocess%2Dimg3.jpg)
    no-repeat;
}
.section__process-in .process-in-txt {
  width: 300px;
  height: 68px;
  line-height: 68px;
  background: #202020;
  color: #fff;
  font-size: 17px;
  text-align: center;
}
/* 자수 프로세스 */

.jasuBasic__area {
  padding: 120px 70px 115px 70px;
}
.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: 860px;
  position: relative;
  color:#202020;
}
.jasuBasic__area-title .area-title-logo {
  width: 90px;
  height: 22px;
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/title_boot%2Did%2Dblack.png)
    no-repeat;
  background-size: 100%;
}
.jasuBasic__area-title.white .area-title-logo {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/title_boot%2Did%2Dwhite.png)
    no-repeat;
  background-size: 100%;
}
.jasuBasic__area-title .area-title-tit {
  margin-top: 13px;
  line-height: 36px;
  font-size: 32px;
  font-weight: bold;
}
.jasuBasic__area-title .area-title-txt {
  line-height: 23px;
  font-size: 18px;
  margin-top: 5px;
}
.jasuBasic__area-title.white .area-title-txt {
  color: #bcbcbc;
}
.jasuBasic__area-title.white div {
  color: #fff;
}
.area-title-btn {
  display: block;
  padding: 0px 30px 0px 32px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #333333;
  color: #fff;
  position: absolute;
  right: 0px;
  bottom: 4px;
}
.jasuBasic__area-title.white .area-title-btn {
  background: #e1e1e1;
  background: linear-gradient(#ececec, #bdbdbd);
  color: #202020;
}
/* 반복틀 공통 */

.jasuBasic__area .jasu-system {
  margin-top: 36px;
  width: 860px;
}
.jasu-system .jasu-system-inner {
  width: 860px;
}
.jasu-system .jasu-system-inner-img {
  width: 420px;
  height: 430px;
}
.jasu-system .jasu-system-inner-img1 {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID-system-img1.jpg)
    no-repeat;
  margin-right: 20px;
  float: left;
}
.jasu-system .jasu-system-inner-img2 {
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID-system-img2.jpg)
    no-repeat;
  float: right;
}
.jasu-system .jasu-system-inner-txt {
  margin-top: 16px;
  font-size: 18px;
  line-height: 23px;
}
/* 자수시스템 */
.jasu-gallery {
  width: 860px;
  height: 660px;
  margin-top: 36px;
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID_finished.jpg)
    no-repeat;
}
/* 자수갤러리 */

.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: 30px;
  color: #464646;
  margin-top: 10px;
}
.jasuBasic__area .box-area.firstBox {
  margin-top: 40px;
}
.jasuBasic__area .box-area.white {
  color: #ececec;
  border: 1px solid #d9d9d9;
}
.box-area .box-area-tit {
  font-size: 20px;
  line-height: 22px;
  font-weight: bold;
}
.box-area .box-area-txt {
  font-size: 16px;
  line-height: 22px;
  padding-left: 12px;
  margin-top: 12px;
}
/* 박스공통 */

.box-area-textNum {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #686868;
  background: #fafafa;
  margin-top: 10px;
}
.box-area-textNum ul li {
  float: left;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #888888;
  text-align: center;
  font-weight: bold;

  margin-right: 4px;
}
.box-area-textNum-txt {
  font-size: 16px;
}
/* 글자수 */

.box-area .box-area-inner {
  margin-top: 12px;
}
.box-area-inner .box-area-inner-bg1 {
  width: 798px;
  height: 150px;
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID%2Dbox%2Dimg1.jpg)
    no-repeat;
  position: relative;
}
.box-area-inner-bg1 span {
  display: inline-block;
  position: absolute;
}
.box-area-inner-bg1 .black {
  font-size: 19px;
  font-weight: bold;
  color: #3e3e3e;
}
.box-area-inner-bg1 .gray {
  font-size: 17px;
  font-weight: bold;
  color: #777777;
}
.box-area-inner-bg1 .area-inner-text1 {
  top: 50px;
  left: 49px;
  transform: rotate(-26deg);
}
.box-area-inner-bg1 .area-inner-text2 {
  top: 54px;
  left: 152px;
  transform: rotate(18deg);
}
.box-area-inner-bg1 .area-inner-text3 {
  top: 101px;
  left: 209px;
  transform: rotate(-12deg);
}
.box-area-inner-bg1 .area-inner-text4 {
  top: 68px;
  left: 481px;
}
.box-area-inner-bg1 .area-inner-text5 {
  top: 68px;
  left: 586px;
}
.box-area-inner-bg1 .area-inner-text6 {
  top: 68px;
  left: 676px;
}
.box-area-inner .box-area-inner-bg2 {
  width: 798px;
  height: 115px;
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/PC_bootsID%2Dbox%2Dimg2.jpg)
    no-repeat;
  position: relative;
}
.box-area-inner-bg2 ul {
  width: 770px;
  height: 20px;
  position: absolute;
  top: 77px;
  left: 15px;
}
.box-area-inner-bg2 ul li {
  float: left;
  width: 74px;
  height: 20px;
  line-height: 20px;
  margin-right: 3px;
  font-size: 15px;
  color: #707070;
  text-align: center;
}
/* 자수 신청 안내 */

.section__note {
  background: #fafafa;
  color: #464646;
  padding: 120px 176px 136px 165px;
  position: relative;
}
.section__note .section__note-tit {
  font-size: 20px;
  font-weight: bold;
}
.section__note .section__note-txt {
  font-size: 16px;
  line-height: 30px;
  margin-top: 20px;
}
.section__note .section__note-txt span {
  color: #de1111;
}
.section__note .section__note-icon {
  width: 77px;
  height: 65px;
  position: absolute;
  top: 120px;
  left: 75px;
  background: url(http://winv007.img18.kr/newMobile/planningImg/bootsID/matters.png)
    no-repeat;
  background-size: 100%;
}
/* 자수 주의사항 */
/* BASIC css end */