@charset "UTF-8";
/*@import url('../fonts/font.css');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
*{line-height: 140%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  letter-spacing: -3px;
    box-sizing: border-box;
}

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
  display: block;
  border: 0;
  *margin: 0;
  *padding: 0; 
}


/* html5 */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; 
}

fieldset, img, iframe {
  border: 0; 
}

img {
  vertical-align: top; 
}

ul, ol {
  list-style: none; 
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%; 
}

caption, legend {
  display: none; }

a:link, a:visited, a:active, a:hover {
  text-decoration: none;
  color: #000; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; 
}

button {
  outline: none;
  border: none;
  cursor: pointer;
  font-family: "Noto Sans KR", sans-serif;
}

input::-webkit-input-placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
textarea::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
textarea:-ms-input-placeholder {
  color: #ccc; 
}

input::placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
textarea:-ms-input-placeholder {
  color: #ccc; 
}



/* Skip Navigation */
.skipnavi {
  position: relative;
  margin: -1px 0 0 0;
  z-index: 100000; 
}

.skipnavi a {
  overflow: hidden;
  display: block;
  width: 1px;
  height: 1px;
  padding: 0;
  text-align: center;
  white-space: nowrap; 
}

.skipnavi a:hover, .skipnavi a:active, .skipnavi a:focus {
  width: auto;
  height: auto;
  margin: 1px 0 0 0;
  padding: 5px 10px;
  line-height: normal;
  background: #fff;
  font-size: inherit;
  color: #000;
  font-weight: bold; 
}

/* Text Style */
.text-left {
  text-align: left; 
}

.text-center {
  text-align: center; 
}

.text-right {
  text-align: right; 
}

/* Float Style */
.float-left {
  float: left; 
}

.float-right {
  float: right; 
}

.clear {
  clear: both; 
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; 
}

.clearfix:after {
  clear: both; 
}

/* blind */
.blind {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0; 
}


.hidden {
  display: none; 
}

.al {
  text-align: left; 
}

.ac {
  text-align: center; 
}

.ar {
  text-align: right; 
}

.vt {
  vertical-align: top; 
}
.origin-left {transform-origin: left center;}
.origin-right {transform-origin: right center;}
.origin-top {transform-origin: center top;}
.origin-bottom {transform-origin: center bottom;}

.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}


/* layout */
html, body {
  font-weight: 300;
  height: 100%;
  background-color: #fff;
  
}

#wrap {
  position: relative;
  width:100%;
  height: 100%;
color: #333132;
}

#header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: rgba(74, 6, 163, 0.9);
  z-index: 9;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
  
}
#container .content {
  position: relative;
  width: 100%;
  height: 100%;
}
#container .sec{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}
#container .sec.bg-gray{
    background-color: #f4f4f4;
}

#container .sec-wrap {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
}
#container .sec-wrap .inview{
  position: relative;
  text-align: center;
  width: 100%;
}
#container .sec-wrap .inview .trigger{
  position: absolute;
  display: block;
  top: 10%;
  width: 100%;
  height: calc(100% - 20%);
  box-sizing: border-box;
  z-index: -1;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { display:none; }
.swiper-pagination-bullet { width: 10px; height: 10px; margin:4px; background-color:#8f8f8f; vertical-align: middle; border-radius: 50%; opacity:1; }
.swiper-pagination-bullet-active { width: 24px; border-radius: 20px; background-color: #000; opacity:1; }

.swiper-button-next,
.swiper-button-prev { width: 48px; height: 48px; border-radius: 50%; -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);}
.swiper-button-prev {left: 13%;}
.swiper-button-next {right: 13%;}

@media screen and (max-width: 980px ) {
  #container{
/*    overflow: hidden*/
  }
  #container .sec{
    height: 100%;
    min-height:0;
  }
  #container .sec-wrap {
    width: 100%;
  }
  #container .sec.bg-gray{
    background-color: #fff;
    }
}

/* common */
.mobile-block{display: inline;}
.videoPlayer{height:100%; display: flex; width: 100%; height: 100%; justify-content: center; object-fit: cover; border-radius: 10px; overflow: hidden; position: relative;}
.videoPlayer video{object-fit:cover; object-position: top; width: 100%;}
.player{ border-radius: 10px; overflow: hidden; display: flex; position: relative;}
.row{max-width: 1600px; margin: auto; position: relative; box-sizing: border-box; display: flex;}
.row.flex-colum{flex-direction: column;}
.pc-view{display: flex; flex-direction: column;}
.mobile-view{display: none;  flex-direction: column; height: 100%; position: relative; width: 100%;}
b{font-weight: 400;}
strong{font-weight: 700;}
@media screen and (max-width: 980px ) {
    html, body {min-width: 360px;}    
    .row{width: 100%; flex-direction: column; flex-wrap: wrap;}
    .pc-view{display:none;}
    .mobile-view{display:flex;}
    #wrap {
      height: auto;
    }
    section .sec-wrap .inview .mobile-view{height: 100vh;}
}


.fc-red{color: #8c1b35;}
.fc-light-red{color: #990033;}
#container .index-section {}
#container .index-section .sec-wrap{height:900px; position: relative; align-items:center;}
#container .index-section .sec-wrap .row{display: block;}
#container .index-section .sec-wrap h1{font-size: 65px; color: #333; line-height: 75px;}
#container .index-section .sec-wrap h1 span{line-height: 75px;}
#container .index-section .sec-wrap p{font-size: 28px; margin-top: 30px;}
#container .index-section .sec-wrap .inview{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#container .index-section .videoPlayer{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; border-radius: 0;}
#container .index-section .videoPlayer video{object-position: bottom;}


@media screen and (max-width: 980px ) {
    #container .index-section .sec-wrap{height:100vh; position: relative; align-items:center;}
    #container .index-section .sec-wrap h1{font-size: 36px; color: #333; line-height: 42px; font-weight: 900;}
    #container .index-section .sec-wrap h1 span{line-height: 42px;}
    #container .index-section .sec-wrap p{font-size: 17px; font-weight: 500; margin-top: 15px;}
    #container .index-section .mobile-view{align-items: center; height: 100vh; justify-content: center;}
    #container .sec-wrap .inview{height: 100vh;}
}

.pc-view h2{font-size: 55px; font-weight: 700; position: relative; display: inline-block; width: auto;}
.pc-view h2 .line{position: absolute; height: 2px; width:calc(100% - 10px); background-color: #8c1b35; left: 5px; top: -15px;}
.pc-view p{font-size: 28px;}
.pc-view .from{font-size: 18px; color: #949598; opacity: 0.5;}


.pc-view.type-00 h2 span.line{width: 130px; left: 50%; margin-left: -65px;}
.pc-view.type-00 {padding: 120px 0 90px 0;}
.pc-view.type-00 h2 span{line-height: 65px;}
.pc-view.type-00 .image{position: relative; border-radius: 10px; overflow: hidden; display: flex; margin-top: 65px; text-align: center; justify-content: center;}
.pc-view.type-00 p.text{margin-top: 40px;}

.mobile-view.type-00 .row{align-items: flex-start;}
.mobile-view.type-00 h2 {text-align: left; margin-left: 40px;}
.mobile-view.type-00 h2 > div{line-height: 100%;}
.mobile-view.type-00 h2 span.line{width:200px; left:0;}
.mobile-view.type-00 {padding: 120px 0 90px 0;}
.mobile-view.type-00 h2 span{line-height: 65px;}
.mobile-view.type-00 .image{position: relative; overflow: hidden; display: flex; margin-top: 65px; text-align: center; justify-content: center;}
.mobile-view.type-00 .image img{width: 100%;}
.mobile-view.type-00 p.text{margin-top:15px; padding: 0 40px; text-align: left;}

.pc-view.type-01 {margin-top: 150px;}
.pc-view.type-01 h2 .line{top: -8px;}
.pc-view.type-01  .row{justify-content: space-between;}
.pc-view.type-01  .player{width: 500px; margin-right: 100px;}
.pc-view.type-01  .player .number{position: absolute; color: #fff; font-size: 70px; font-style: italic; right: 15px; top: 15px; display: flex; align-items: center; height: 58px; line-height: 100%;}
.pc-view.type-01  .player .number img{margin-left: 20px;}
.pc-view.type-01  .context{text-align: left; width: 500px; box-sizing: border-box; height: 100%; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.pc-view.type-01  .context h2{margin-bottom: 30px;}
.pc-view.type-01  .from{margin-top: 20px;}
.pc-view.type-01.reverse  .row{flex-direction: row-reverse;}
.pc-view.type-01.reverse  .player{margin-left: 100px; margin-right: 0;}
.pc-view.type-01.reverse  .player .number{color: #575757; right: auto; left: 15px;}
.pc-view.type-01.reverse  .context{padding-left: 80px;}

.pc-view.type-02{}
.pc-view.type-02 .row{align-items: center; justify-content: center; padding: 90px 0 70px;}
.pc-view.type-02 h2 span.line{width: 130px; left: 50%; margin-left: -65px;}
.pc-view.type-02 .tag{margin-bottom: 10px;}
.pc-view.type-02 .tag span{display: inline-flex; border-radius: 10px; background-color: #981e37; color: #fff; height: 45px; padding: 0 15px; align-items: center;}
.pc-view.type-02 .number{position: absolute; color: #990033; font-size: 90px; font-style: italic; display: flex; align-items: center; height: 58px; line-height: 100%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
.pc-view.type-02 .number img{margin-left: 20px;}
.pc-view.type-02 .swiper-container{padding-bottom: 65px; width: 100%; width: 1000px;}
.pc-view.type-02 .swiper-container .swiper-slide { width: 1000px;}
.pc-view.type-02 .swiper-container .swiper-slide  .image{position: relative; border-radius: 10px; overflow: hidden; display: flex; justify-content: center; margin-top: 35px;  width: 1000px;}
.pc-view.type-02 .swiper-container .swiper-slide p.text{margin-top: 40px;}

.pc-view.type-03 {padding-top: 180px; padding-bottom:30px;}
.pc-view.type-03 h2 > div{line-height: 60px; font-size: 60px;}
.pc-view.type-03 h2 > div span{line-height: 60px;}
.pc-view.type-03 h2 .line{ width: 130px; left: 50%; margin-left: -65px; top: -30px;}
.pc-view.type-03 .video{display: flex; justify-content: center; width: 100%; position: relative;}
.pc-view.type-03 .video .red-text{position: absolute; font-size: 35px; font-style: italic; color: #8c1b35; left: 0; width: 100%; text-align: center; top:50%; transform: translateY(-50%);}
.pc-view.type-03 .video .text{position: absolute; text-align: left; right: 90px; bottom: 150px;}
.pc-view.type-03 .caution{text-align: center;}
.pc-view.type-03 .caution-msg{text-align: right; font-size: 13px; color: #949598; font-weight: 100; opacity: 0.8; padding: 150px 20px 20px 0; letter-spacing: 0;}
ul.caution{text-align: left; font-size: 13px; color: #949598; font-weight: 100; opacity: 0.8;}
ul.caution li{letter-spacing: 0;}

.pc-view.type-04 {margin-top: 230px;}
.pc-view.type-04 .row{width: 1600px;}
.pc-view.type-04 .contents-block{display: flex;}
.pc-view.type-04 .contents-block .videoPlayer{width: 1024px;}
.pc-view.type-04 .contents-block .videoPlayer .comment{ position: absolute; right:15px; bottom: 15px; font-size: 13px; letter-spacing: 0; text-align: right; color: #fff; font-weight: 100;}
.pc-view.type-04 .contents-block .contents-info{width: 576px; padding-right: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right;}
.pc-view.type-04 .contents-block .contents-info h3{margin-bottom:30px; font-size: 50px;  line-height: 65px;}
.pc-view.type-04 .contents-block .contents-info h3 .line{position: absolute; height:2px; width:calc(100%); background-color: #8c1b35; top: -15px; right: 0;}
.pc-view.type-04 .contents-block .contents-info strong{display: block; margin-bottom: 10px;}

.pc-view.type-04 .contents-block .contents-info .info-text{font-size: 28px;}
.pc-view.type-04 .caution{margin-top: 30px;}

.pc-view.type-04.reverse .contents-block .videoPlayer .comment{right:auto; left: 15px; bottom: 15px; text-align: left;}
.pc-view.type-04.reverse .contents-block{flex-direction: row-reverse}
.pc-view.type-04.reverse .contents-block .contents-info{width: 576px; padding-right:0px; padding-left: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align:left;}
.pc-view.type-04.reverse .contents-block .contents-info h3{margin-bottom: 45px;}
.pc-view.type-04.reverse .contents-block .contents-info h3 .line{right: auto; left: 0;}

.pc-view.type-04.reverse .contents-block .contents-info strong{display: block; margin-bottom: 10px;}

.pc-view .detail strong{border-bottom: 2px solid #8c1b35; font-size: 27px;}
.pc-view .detail b{border-bottom: 2px solid #8c1b35;}

.pc-view .product-list{display: flex;}
.pc-view .product-list li{margin: 0 50px; display: flex; flex-direction: column; justify-content: flex-end;}
.pc-view .product-list li .image{margin-bottom: 25px;}
.pc-view .product-list li .title{letter-spacing: -2px; font-weight:400; margin-bottom:10px; color:#333132; }





.mobile-view *{letter-spacing: -1px;}
.mobile-view h1{letter-spacing: -3px;}
.mobile-view h2{font-size: 30px; font-weight: 700; position: relative; display: inline-block; width: auto; line-height: 32.5px;}
.mobile-view h2 span{line-height: 32.5px;}
.mobile-view h2 .line{position: absolute; height:2px; width:calc(100%); background-color: #8c1b35; top: -15px; left: 0;}
.mobile-view p{font-size: 13.5px; letter-spacing: -1px;}
.mobile-view .from{font-size: 6px; color: #949598; opacity: 0.5; letter-spacing: -1px;}
.mobile-view.type-01 {}
.mobile-view.type-01 h2 .line{top: -8px;}
.mobile-view.type-01  .row{align-items: flex-end; padding-right: 90px;}
.mobile-view.type-01  .player {overflow: visible;}
.mobile-view.type-01  .player .videoPlayer{border-radius: 0 10px 10px 0; overflow: hidden; display: flex;}
.mobile-view.type-01  .player .number{position: absolute; color: #575757; font-size: 50px; font-style: italic; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; height: 58px; line-height: 100%; font-weight: 400;}
.mobile-view.type-01  .player .number img{margin-left: 15px; width: 35px;}
.mobile-view.type-01  .context{text-align: left; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; margin-top: 10px; width: 100%;}
.mobile-view.type-01  h2{margin-bottom:20px; text-align: right; width: 100%;}
.mobile-view.type-01  .from{margin-top: 8px; font-size: 6px;}

.mobile-view.type-01.reverse  h2{text-align: left;}
.mobile-view.type-01.reverse  .row{padding-right: 0; padding-left: 90px;}
.mobile-view.type-01.reverse  .player .videoPlayer{border-radius: 10px 0 0 10px;}
.mobile-view.type-01.reverse  .player .number{color: #575757; right: auto; left:0; transform:translateY(-50%) translateX(-50%);}
.mobile-view.type-01.reverse  .player .red-text{transform:translateY(-50%); top: 50%; position: absolute; left: -85px;}
.mobile-view.type-01.reverse  .context{text-align: left; justify-content: flex-start; align-items: flex-start;}

.mobile-view.type-02{}
.mobile-view.type-02 .line{height: 2px; background-color: #8c1b35; margin-left: 40px; margin-bottom: 10px;}
.mobile-view.type-02 .row{align-items: center; justify-content: flex-start;}
.mobile-view.type-02 h2{margin-left: 40px;}
.mobile-view.type-02 h2 span.line{width: 130px; left: 0%;}
.mobile-view.type-02 .tag{margin-bottom: 10px; padding-left: 40px; margin-top: 20px;}
.mobile-view.type-02 .tag span{display: inline-flex; border-radius: 5px; background-color: #981e37; color: #fff; height: 20px; padding: 0 8px; align-items: center; font-size: 12px; letter-spacing: 0;}
.mobile-view.type-02 .swiper-container{padding-bottom: 35px; width: 100%;}
.mobile-view.type-02 .swiper-container .swiper-slide {text-align: left; padding-top: 20px;}
.mobile-view.type-02 .swiper-container .swiper-slide  .image{position: relative; display: flex; justify-content: center; }
.mobile-view.type-02 .swiper-container .swiper-slide  .image img{width: 100%;}
.mobile-view.type-02 .swiper-container .swiper-slide p.text{margin-top: 10px; padding-left: 40px; height: 100px;}

.mobile-view .swiper-pagination-bullets .swiper-pagination-bullet { width:8px; height: 8px; }
.mobile-view .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:20px; height: 8px; }
.mobile-view .swiper-button-next,
.mobile-view .swiper-button-prev { top: 65%; }
.mobile-view .swiper-button-prev {left: 3%;}
.mobile-view .swiper-button-next {right: 3%;}

.mobile-view.type-03 {}
.mobile-view.type-03 h2 {line-height: 38px; font-size: 36px;}
.mobile-view.type-03 h2 *{line-height: 38px;}
.mobile-view.type-03 h2 .line{ width: 80px; left: 50%; margin-left: -40px;}
.mobile-view.type-03 .video{display: flex; justify-content: center; width: 100%; position: relative; margin-top: 30px;}
.mobile-view.type-03 .video .red-text{position: absolute; top: 50%; left: 50%; transform: translateY(-50%);}
.mobile-view.type-03 .text{text-align: left; padding-left: 80px; line-height: 22.5px;}
.mobile-view.type-03 .caution{padding-left: 80px; margin-top: 10px;}
.mobile-view.type-03 .caution-msg{text-align: right; font-size: 13px; color: #949598; font-weight: 100; opacity: 0.8; padding: 150px 20px 20px 0; letter-spacing: 0;}
.mobile-view ul.caution{text-align: left; font-size: 5px; color: #949598; font-weight: 100; opacity: 0.8; padding-right: 10px;}
.mobile-view ul.caution li{letter-spacing: 0; line-height: 120%;}

.mobile-view.type-04 {}
.mobile-view.type-04 .row{}
.mobile-view.type-04 .contents-block{display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
.mobile-view.type-04 .contents-block .videoPlayer img{width: 100%;}
.mobile-view.type-04 .contents-block .contents-info{margin-left: 40px;}
.mobile-view.type-04 .contents-block .contents-info h3{margin-bottom:15px; font-size: 30px;  line-height: 32px; text-align: left;}
.mobile-view.type-04 .contents-block .contents-info h3 span{line-height: 32px;}
.mobile-view.type-04 .contents-block .contents-info h3 .line{position: absolute; height:2px; width:calc(100%); background-color: #8c1b35; top: -15px; left: 0;}
.mobile-view.type-04 .contents-block .contents-info strong{display: block; margin-bottom: 10px;}
.mobile-view.type-04 .contents-block .contents-info .info-text{font-size: 28px;}
.mobile-view.type-04 .contents-block .contents-info p{text-align: left; line-height: 22.5px;}
.mobile-view.type-04 .contents-block .videoPlayer{margin-top: 40px; border-radius: 0;}
.mobile-view.type-04 .caution{margin-top: 30px;}


.mobile-view.type-04.reverse .contents-block .videoPlayer .comment{right:auto; left: 15px; bottom: 15px; text-align: left;}
.mobile-view.type-04.reverse .contents-block{}
.mobile-view.type-04.reverse .contents-block .contents-info{padding-right:0px; padding-left: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align:left;}
.mobile-view.type-04.reverse .contents-block .contents-info h3{margin-bottom: 45px;}
.mobile-view.type-04.reverse .contents-block .contents-info h3 .line{right: auto; left: 0;}
.mobile-view.type-04.reverse .contents-block .contents-info strong{display: block; margin-bottom: 10px;}


.mobile-view .detail{display: inline-block;}
.mobile-view .detail strong{border-bottom: 1px solid #8c1b35;}
.mobile-view .detail b{border-bottom: 1px solid #8c1b35;}

.mobile-view .product-list{display: flex; width: 100%; flex-wrap: wrap; justify-content: space-around; padding-left: 12%; padding-right: 12%; margin-top: 40px;}
.mobile-view .product-list li{display: flex; flex-direction: column; justify-content: flex-end; margin: 0 25px; margin-bottom: 15px;}
.mobile-view .product-list li .image{margin-bottom: 15px;}
.mobile-view .product-list li .title{color:#333132; margin-bottom: 0; font-size: 12px; letter-spacing: 0;}
.mobile-view .product-list li .detail{font-size: 12px;}



.mobile-view.type-05 h2 {font-size: 22.5px;}
.mobile-view.type-05 h2 span *{line-height: 27.5px;}
.mobile-view.type-05 h2 span.line{width: 80px; left: 50%; margin-left: -40px;}
.mobile-view.type-05 {padding: 120px 0 90px 0;}
.mobile-view.type-05 .image{position: relative; border-radius: 10px; overflow: hidden; display: flex; margin-top:30px; text-align: center; justify-content: center;}
.mobile-view.type-05 p.text{margin-top: 40px;}


@media screen and (max-width: 767px ) {
/*
    #wrap{position: fixed; left: 0; top: 0; width: 100%; height: 100%;}
    #container .sec-wrap{overflow: hidden;}
    .header{position: fixed; left: 0; top: 0; width: 100%; z-index: 10;}
    footer{display: none;}
*/
    
}
.sec-wrap{max-width: 1600px;}
.pc-view .product-list{justify-content: center;}
.pc-view.type-01 .row{justify-content: center;}

.header *,.breadcrumb *,footer *{letter-spacing: 0 !important;}

.header-wrap, .nav-outer-link .links{margin-top: 1px;}

.pc-view .des{font-size: 13px !important; color: #666; text-align: left; letter-spacing: -1px !important; padding: 10px;}
.mobile-view .des{font-size: 12px!important; color: #666; text-align: left; letter-spacing: -1px !important; padding: 5px;}

figcaption, .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }