@charset "utf-8";
/* SIR 지운아빠 */

@font-face {
  font-family: godoM;
  src:url(/theme/basic/font/GodoM.ttf) format('truetype'),
      url(/theme/basic/font/GodoM.eot) format('embedded-opentype'),
      url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
}
@font-face {
  font-family: godoB;
  src:url(/theme/basic/font/GodoB.ttf) format('truetype'),
      url(/theme/basic/font/GodoB.eot) format('embedded-opentype'),
      url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff');
}

@font-face {
  font-family: CODELight;
  src:url(/theme/basic/font/CODELight.otf) format('truetype'),
      url(/theme/basic/font/CODELight.eot) format('embedded-opentype'),
      url(/theme/basic/font/source-code-light.woff) format('woff');
}
@font-face {
  font-family: CODEBold;
  src:url(/theme/basic/font/CODEBold.otf) format('truetype'),
      url(/theme/basic/font/CODEBold.eot) format('embedded-opentype'),
      url(/theme/basic/font/source-code-bold.woff) format('woff');
}

@font-face {
  font-family: notoM;
  src:url(/theme/basic/font/NotoSans-Medium.eot) format('embedded-opentype'),
      url(/theme/basic/font/NotoSans-Medium.woff) format('woff');
}

@font-face {
  font-family: notoB;
  src:url(/theme/basic/font/NotoSans-Bold.eot) format('embedded-opentype'),
      url(/theme/basic/font/NotoSans-Bold.woff) format('woff');
}

@font-face {
  font-family: notoR;
  src:url(/theme/basic/font/NotoSans-Regular.eot) format('embedded-opentype'),
      url(/theme/basic/font/NotoSans-Regular.woff) format('woff');
}

@font-face {
  font-family: nanumBarunGothic;
  src:url(/theme/basic/font/NanumBarunGothic.ttf) format('truetype'),
      url(/theme/basic/font/NanumBarunGothic.woff) format('woff');
}

@font-face {
  font-family: nanumBarunGothicUL;
  src:url(/theme/basic/font/NanumBarunGothicUltraLight.ttf) format('truetype'),
      url(/theme/basic/font/NanumBarunGothicUltraLight.woff) format('woff');
}


@font-face {
  font-family: nanumBarunGothicB;
  src:url(/theme/basic/font/NanumBarunGothicBold.ttf) format('truetype'),
      url(/theme/basic/font/NanumBarunGothicBold.woff) format('woff');
}


@font-face {
  font-family: nanumBarunGothicL;
  src:url(/theme/basic/font/NanumBarunGothicLight.ttf) format('truetype'),
      url(/theme/basic/font/NanumBarunGothicLight.woff) format('woff');
}


/* 초기화 */
html {overflow-y:hidden;}
body {margin:0;padding:0;}
html, img {margin:0;padding:0;border:0}
a {text-decoration: none;font-size: 16px;color:#FFFFFF;}

@media screen and (max-width:1700px) {
  #tag_page1_text1 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page1_text2 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page1_btn {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text1 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text2 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text3 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text1_1 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text1_2 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text2_1 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text2_2 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text3_1 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text3_2 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text4_1 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text4_2 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text5_1 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_text5_2 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_content {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page2_btn {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page3_text {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page3_img {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page3_btn {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: center;
  }

  #tag_page4_content {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: bottom;
  }

  #tag_page4_content2 {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: top;
  }
}

#tag_page1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: url('../img/product_tag_background.jpg') center no-repeat;
  background-size: cover;
}

#tag_page1_text1 {
  position: absolute;
  height: 100px;
  width: 100%;
  left: 0;
  text-align: center;
  top: calc(50% - 50px - 105px);
  font-size: 80px;
  color:#FFFFFF;
  font-family: notoM;
}

#tag_page1_text2 {
  position: absolute;
  height: 18px;
  width: 100%;
  left: 0;
  text-align: center;
  top: calc(50% - 50px - 105px + 100px + 22px);
  font-size: 18px;
  color:#FFFFFF;
  font-family: notoR;
}

#tag_page1_btn {
  position: absolute;
  width: 54px;
  height: 35px;
  left:calc(50% - 27px);
  bottom: calc(46px);
  background: url('../img/product_next_button.png') center no-repeat;
  cursor: pointer;
}

#tag_page2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top:100%;
  left:0;
  background: url('../img/product_tag_background2.jpg') center no-repeat;
  background-size: cover;
}

#tag_page2_text1 {
  position: absolute;
  width: 100%;
  height: 26px;
  left:0;
  text-align: center;
  top:calc(50% - 13px - 235px);
  font-size: 30px;
  color:#FFFFFF;
  font-family: notoR;
}

.tag_page2_text2 {
  position: absolute;
  width: 100%;
  height: 60px;
  left:0;
  text-align: center;
  top:calc(50% - 13px - 235px + 26px + 35px);
  font-size: 60px;
  color: #FFFFFF;
  font-family: notoM;
}

.tag_page2_text3 {
  position: absolute;
  width: 100%;
  height: 62px;
  text-align: center;
  left:0;
  top:calc(50% - 13px - 235px + 26px + 35px + 60px + 60px);
  font-size: 22px;
  font-family: notoR;
  color:#FFFFFF;
  line-height: 30px;
}

#tag_page2_text1_1 {
  display: block;
}
#tag_page2_text1_2 {
  display: block;
}

#tag_page2_text2_1 {
  display: none;
}
#tag_page2_text2_2 {
  display: none;
}

#tag_page2_text3_1 {
  display: none;
}
#tag_page2_text3_2 {
  display: none;
}

#tag_page2_text4_1 {
  display: none;
}
#tag_page2_text4_2 {
  display: none;
}

#tag_page2_text5_1 {
  display: none;
}
#tag_page2_text5_2 {
  display: none;
}

#tag_page2_line {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #999999;
  top:calc(50% - 13px - 235px + 26px + 35px + 60px + 60px + 62px + 64.5px + 80px);
}

#tag_page2_content {
  position: absolute;
  width: 631px;
  height: 130px;
  left: calc(50% - 315.5px);
  top: calc(50% - 13px - 235px + 26px + 35px + 60px + 60px + 62px + 80px);
}

.tag_page2_content_img {
  position: absolute;
  width: 130px;
  height: 130px;
  top: 0;
  background-image: url('../img/product_circle_n.png');
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 24px;
  font-family: notoR;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  display: table;
}
/*
.tag_page2_content_img:hover {
    background-image: url('../img/product_circle_p.png');
}
*/
.tag_page2_content_text {
  display: table-cell;
  vertical-align: middle;
}

#tag_page2_content_img1 {
  left: 0;
}

#tag_page2_content_img2 {
  left: 167px;
}

#tag_page2_content_img3 {
  left: 334px;
}

#tag_page2_content_img4 {
  left: 501px;
}

#tag_page2_btn {
  position: absolute;
  width: 54px;
  height: 35px;
  left:calc(50% - 27px);
  bottom: calc(46px);
  background: url('../img/product_next_button.png') center no-repeat;
  cursor: pointer;
}

#tag_page3 {
  position: absolute;
  width: 100%;
  height: 100%;
  top:200%;
  left:0;
}

#tag_page3_text {
  position: absolute;
  width: 100%;
  height: 60px;
  top: calc(50% - 30px - 223px);
  text-align: center;
  font-size: 48px;
  color: #333333;
  font-family: notoM;
}

#tag_page3_img {
  position: absolute;
  width: 920px;
  height: 358px;
  top: calc(50% - 179px);
  left: calc(50% - 460px);
  background: url('../img/card_img.png') center no-repeat;
}

#tag_page3_btn {
  position: absolute;
  width: 54px;
  height: 35px;
  left:calc(50% - 27px);
  bottom: calc(46px);
  background: url('../img/product_next_button2.png') center no-repeat;
  cursor: pointer;
}

#tag_page4 {
  position: absolute;
  width: 100%;
  height: 100%;
  top:300%;
  left:0;
}

#tag_page4_content {
  position: absolute;
  width: 1400px;
  height: 578px;
  top:calc(50% - 289px - 17px);
  left: calc(50% - 700px);
  background-color: #F7F7F7;
}

.tag_page4_contents {
  float: left;
  width: 466px;
  height: 289px;
}

.tag_page4_contents_margin {
  margin-left: 1px;
}

.tag_page4_contents_title {
  position: relative;
  width: 100%;
  text-align: center;
  height: 60px;
  top:125px;
  left:0;
  font-size: 42px;
  color:#333333;
  font-family: nanumBarunGothic;
}

.tag_page4_contents_memo {
  position: relative;
  width: 100%;
  text-align: center;
  height: 14px;
  top:150px;
  left:0;
  font-size: 15px;
  color:#333333;
  font-family: nanumBarunGothic;
}

.tag_page4_contents_title2 {
  position: relative;
  width: 100%;
  text-align: center;
  height: 60px;
  top:45px;
  left:0;
  font-size: 42px;
  color:#333333;
  font-family: nanumBarunGothic;
}

.tag_page4_contents_memo2 {
  position: relative;
  width: 100%;
  text-align: center;
  height: 14px;
  top:70px;
  left:0;
  font-size: 15px;
  color:#333333;
  font-family: nanumBarunGothic;
}

#tag_page4_contents_line1 {
  position: absolute;
  width: 1px;
  height: 420px;
  top: 79px;
  left: 466px;
  background-color: #dadada;
}

#tag_page4_contents_line2 {
  position: absolute;
  width: 1px;
  height: 420px;
  top: 79px;
  right: 466px;
  background-color: #dadada;
}

#tag_page4_content2 {
  position: absolute;
  width: 1400px;
  height: 84px;
  top:calc(50% - 289px - 17px + 578px);
  left: calc(50% - 700px);
  background-color: #333333;
}

#tag_page4_content2_img {
  position: absolute;
  width: 35px;
  height: 42px;
  left: 515px;
  top:21px;
  background: url('../img/product_download.png') center no-repeat;
}

#tag_page4_content2_text {
  position: absolute;
  width: 315px;
  height: 40px;
  top:22px;
  left: calc(515px + 35px + 26px);
  line-height: 40px;
  font-size: 28px;
  color:#FFFFFF;
  font-family: nanumBarunGothic;
}

#tag_page4_btn {
  position: absolute;
  width: 54px;
  height: 35px;
  left:calc(50% - 27px);
  bottom: calc(46px);
  background: url('../img/product_next_button2.png') center no-repeat;
  cursor: pointer;
}