/*
main#contents {width: 100%; height:100%; display: block; margin: 0; overflow-x:hidden; }
*/
.mainTitle { display: block;  text-align:center; }
.mainTitle h2 {font-weight: normal; }

/* swiper */
.swiper-container { position:relative; overflow:hidden; z-index: 1; width: 100vw; height: 50vh; margin-left: auto; margin-right: auto; }
.swiper-wrapper { position: relative; width: 100vw; height: 100vh; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform;transition-property: transform,-webkit-transform; box-sizing: border-box; }
.swiper-container-android .swiper-slide, 
.swiper-wrapper { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.swiper-slide { position: relative; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100vw; height: 100vh; text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center;-ms-flex-align: center; -webkit-align-items: center; align-items: center;
-webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform,-webkit-transform;
}
.swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity;-o-transition-property: opacity; transition-property: opacity; }
.swiper-container-fade .swiper-slide-active, 
.swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; }
.swiper-control{ position: absolute; bottom:70px; z-index: 100; width:100%; height:10px; text-align: center; overflow:hidden; margin: 0 auto; box-sizing:border-box; }
.swiper-button-next, .swiper-button-prev {  position: absolute;  top: 50%; margin-top: -22px; z-index: 10;cursor: pointer;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next,
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { overflow: hidden; width: 40px; height: 40px; line-height: 0; text-indent: -150%; white-space:nowrap; font-size: 1px; color:transparent; line-height:1px; border-width: 1px 1px 0 0; border-style: solid; border-color: #000; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{ transform: rotate(-135deg); }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{ transform: rotate(45deg);}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 1;cursor: auto;  pointer-events: none;}
.swiper-pagination { position: relative; display: inline-block; height:10px; margin: 0 10px; text-align: center;  -webkit-transition: .3s opacity;-o-transition: .3s opacity;transition: .3s opacity; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; }
.swiper-button-pause,.swiper-button-play {position: relative; z-index: 10; display: inline-block; width:10px; height: 10px; text-indent: -150%; white-space:nowrap; font-size: 1px; line-height:1px; color:transparent; overflow: hidden; vertical-align:top; }
.swiper-button-pause:before,
.swiper-button-pause:after { content:""; position:absolute; top:0; display:inline-block; width:2px; height:10px; background:#fff; }
.swiper-button-pause:before {left:1px; }
.swiper-button-pause:after { right:1px; }
.swiper-button-play { display:none; width:0; height:0; border-top:5px solid transparent; border-left:8px solid #000; border-bottom:5px solid transparent; }
    .swiper-control.on .swiper-button-play {display: inline-block; }
    .swiper-control.on .swiper-button-pause {display: none; }
.swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block;  border-radius: 100%; background: #000; opacity: .2; vertical-align:top; }
.swiper-pagination-bullet-active { opacity: 1; background: #fff; }
.swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 7px; background: #fff;}
.swiper-container .swiper-notification { position: absolute; left: 0;  top: 0; pointer-events: none; opacity: 0; z-index: -1000; }
.swiper-scrollbar { position: relative; border-radius: 10px; -ms-touch-action: none; background: rgba(0,0,0,.1); }
.swiper-container-horizontal > .swiper-pagination-progressbar {bottom: 0; top: initial; height: 1px; }
.swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; width: 100%; height: 1px; }
.swiper-scrollbar-drag { position: relative; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); border-radius: 10px; }

.c_ani {
    position: absolute;
    left:32.5%;
    top:33%;
    width:700px;
    height:220px;
    z-index: 9;
    text-align: center;
}
.c_ani > .c_img {
    width:650px;
    margin: 0 auto;
}
.c_ani > p {
    width:700px;
	color: #fff;
    text-align: center;
    font-size: 1.75em;
    line-height: 2;
    margin: 10% auto 0;
    font-weight: bold;
}

.mainVisual{position:relative;}

.mainVisual .item { display:flex; align-items:center; position:relative; flex:1; height: 100vh; }
.mainVisual picture { overflow:hidden; position: relative; width: 100%; height: 100vh; font-size: 0;}
.mainVisual .here { position:absolute; z-index:1; left:0; right:0; margin:0 auto; }
.mainVisual .here .text { color:#fff; font-weight:normal; }
.mainVisual .here .button { display:inline-block; min-width:187px; padding:18px 20px; font-size:16px; text-align:center; box-sizing:border-box; background:rgba(255,255,255,0.9); text-decoration:none; }


.collection-item {position:relative; width: 33%;  height: 300px; transition: all .5s; margin: 0 auto;}
.col_txt { position: absolute; top: 47%; left: 33%; color: #fff; font-weight:bold;  font-size: 16px; text-align: center;}

.collection-item.on {width: 49%;}
.collection-item.on .col_txt {position: absolute; top: 10%; left: 5%; transition: all .5s; border-bottom: 2px solid #54c4f2; color: #fff; font-weight:bold;  font-size: 16px; text-align: center;}
.collection-item.on:nth-child(1) .col_txt {color: #000;}
.collection-item.on:nth-child(2) .col_txt {color: #000;}
.collection-item > a {filter: brightness(.4); transition: all .5s;}
.collection-item.on > a {filter: brightness(1);}
.collection-item picture {font-size: 0; }
.collection-item img{  width: 100%;  }
.n_n_box a {display: block; text-decoration: none; box-sizing: border-box;}
.n_n_box { display: flex; flex-direction: row; width: 80%; margin: 0 auto 12%; justify-content: space-around; align-items: flex-start;}
.n_n_box .news_con { width: 77%;  }
.n_n_box .news_con > h1 {margin: 0 0 3%; color: #333; }

.n_n_box .news {display: flex; flex-direction: row; width: 100%; justify-content: flex-start; align-items: space-between; }
.n_n_box .news .news_box {width: 28%;  }
.news_imgbox img:hover { transform: scale(1.1);}
.news_imgbox img { transition: all .2s;}
.n_n_box .news .news_box:nth-child(2) { margin: 0 5%;}
.n_n_box .news .news_box .article_box {width: 100%; height: 100%; }

.article_box .news_imgbox {overflow: hidden;}
.article_box .news_imgbox img { width: 100%; font-size: 0;}
.article_box .a_tit {box-sizing: border-box; margin: 10px 0 15px; height: 55px;}
.article_box .a_tit:hover{ text-decoration: underline;}
.article_box .a_txt {box-sizing: border-box; width: 95%; height: 100px; line-height: 1.6; margin: 0 0 20px 0; white-space : wrap ; text-overflow : ellipsis ;}
.article_box .a_link { color: #54c4f2; font-weight: bold;}

.notice {  width:23%;}
.notice .notice_con h1 {margin: 0 0 18%;}
.notice .notice_con {height: 100%;  display: flex; overflow:hidden; flex-direction: column;}
.notice .notice_con .notice_box {width: 100%; height: 300px;  overflow:hidden; margin: 8% 0 0; position: relative;}
.notice .notice_con .notice_box:hover img {filter: brightness(1); transform:scale(1.1);}
.notice .notice_con .notice_box:hover .n_link {background-color: #fff; opacity:.8; color: #000;}
.notice .notice_con .notice_box:hover {overflow: hidden;}
.notice_box img {width:100%;  margin: 0; filter: brightness(.7); transition: all .3s;}
.notice_box .n_link {color: #fff; font-size: 18px; border: 1px solid #fff; transition: all .3s; padding: 8px; font-weight: bold; position: absolute; left:39%; top:46%;}

.info_con {width: 80%; height:100%;  margin: 0 auto 12%; display: flex; justify-content: space-between;}
.info_con .info_item { width: 33%; box-sizing: border-box; height: 100%; overflow:hidden; position: relative;  transition: all .2s;}
.info_con .info_item .i_img {width: 100%; height: 100%; overflow:hidden;}
.info_con .info_item .i_img img {width:100%; filter: saturate(.3); overflow-y:hidden; transition: all .2s;}
.info_con .info_item:hover img {width:100%; filter: saturate(1.2);}

.info_con .info_item:hover {
 transform:scale(1.1);
    z-index: 5;
}
.info_con .info_item .i_txt {position: absolute; left: 39%; top: 35%; text-align: center;}
.info_con .info_item .i_txt p {font-size: 26px; transition: all .5s; font-weight: bold; color: #eee;}
.info_con .info_item:nth-child(1) .i_txt p {color:#000;}
.info_con .info_item:nth-child(2) .i_txt p {color:#000;}
.info_con .info_item:nth-child(3) .i_txt p {color:#000;}
.info_con .info_item .i_txt a {display: block; font-weight: bold; padding: 8px; transition: all .3s; border: 1px solid #eee; margin: 30px 0 0 0; color: #eee; text-decoration: none; font-size: 16px;}
.info_con .info_item:nth-child(1) .i_txt a {color:#000; border: 1px solid #000;}
.info_con .info_item:nth-child(2) .i_txt a {color:#000; border: 1px solid #000;}
.info_con .info_item:nth-child(3) .i_txt a {color:#000; border: 1px solid #000;}
.info_con .info_item .i_txt a:hover {background-color: #000; color: #fff; }

.media {width: 80%; margin:10% auto;}
.media .md_tit {color: #333; border-left: 5px solid #54c4f2; padding-left: 10px;}
.media .md_name {width: 100%; margin: 0 auto; text-align:center; padding: 30px; font-size: 40px; font-weight: bold; border-bottom: 6px solid #222;}
.media .md_video {width: 100%;  display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; margin: 5% 0;}
.media .md_video > div {width: 45%; margin: 0 0 2%;}
.media .md_video > div > p {font-size:14px; font-weight: bold; margin-top: 3%;}
.media .md_info {width: 100%; text-align: center; margin: 5% 0;}
.media .md_info a {border: 2px solid #54c4f2; transition: all .5s; display: block; width: 20%; margin: 0 auto; padding: 15px 10px; text-decoration: none; font-weight: bold; font-size: 20px; color: #fff; background-color: #54c4f2;}
.media .md_info a:hover {background-color: transparent; color: #54c4f2;} 


.hire { width: 80%; margin: 0 auto 12%;}
.hire .hire_title {color: #333; border-left: 5px solid #54c4f2; padding-left: 10px;}
.hire .hire_name { width: 100%; margin: 0 auto; text-align:center; padding: 30px; font-size: 40px; font-weight: bold; border-bottom: 6px solid #222; }
.hire .hire_value { width: 100%; display: flex; justify-content: space-around; text-align: center; margin: 6% 0; }
.hire .hire_value .hire_imgbox {width: 33%;}
.hire .hire_value .hire_imgbox img {
 	border-radius: 50%;
}
.hire .hire_ex {width: 80%; margin: 0 auto; text-align: center; padding: 40px 0;}
.hire .hire_ex p {font-size: 24px; line-height: 1.8;}
.hire .hire_link {width: 100%; text-align: center; padding: 40px 0; }
.hire .hire_link a {border: 2px solid #54c4f2; transition: all .5s; display: block; width: 20%; margin: 0 auto; padding: 15px 10px; text-decoration: none; font-weight: bold; font-size: 20px; color: #fff; background-color: #54c4f2;}
.hire .hire_link a:hover {
	background-color: transparent;
    color: #54c4f2;
}

.pro_slide {
	width: 100%;
    margin: 5% auto;
}
.pro_slide > h1 {
	text-align: center;
    margin: 3% 0;
}
.app-slide__multiple {
	padding: 8% 0;
}


.value { width: 80%; margin: 0 auto 5%; display: flex; text-align: center; justify-content: space-around;}
.value .v-item {transition: all .1s; width: 24%; border: 1px solid #333; padding: 30px 0 0;  }

.pic {font-size: 30px; margin: 0 0 20px; 0; }
.v-tit {font-size: 22px;}
.v-info {width: 70%; margin: 40px auto 20px; line-height: 1.5; font-size: 14px; display: block; font-weight:bold; }
.v-link { border: 1px solid #333; transition: all .5s;  display: block; width: 35%; margin: 60px auto 20px; padding: 10px;  letter-spacing: 1.5px; font-weight:bold; font-size: 12px;}
.v-item:hover {
    transform:scale(1.2);
    border: none;
    background-color: #fff;
    box-shadow: 0 0 20px 5px #666;
}
.v-item:hover .v-info {
	display: block;
}

.v-item:hover .v-link {
	text-decoration: none;
}

.v-link:hover {
    background: #333;
    color: #fff;
    transition: all .5s;
}

.middleBanner img { width:100%; max-width:100%; }
.middleBanner .banner img {width:100%;}
.productSlide { text-align:center; }
.productSlide.gSpecial .banner { position:relative; display:flex; align-items:center; justify-content:center; }
.productSlide.gSpecial .banner video { position: absolute; top:0; bottom:0; left:0; width: 100%; margin:auto 0; }
.productSlide.gSpecial .back { width:100%; }
.ec-base-product .prdList li.swiper-slide .description {margin-bottom: 40px;}
.item-wrapper .banner img{width: 100%;}
.item-wrapper .banner a:hover{text-decoration:none;}
.item-wrapper .ec-base-product{margin: 0; }
.item-wrapper .ec-base-product .prdList{margin: 0}
.item-wrapper .ec-base-product .prdList > li {margin: 0; width:100%;}
.item-wrapper .swiper-button-prev, .item-wrapper .swiper-container-rtl .swiper-button-next,
.item-wrapper .swiper-button-next, .item-wrapper .swiper-container-rtl .swiper-button-prev {width: 30px; height: 30px; border-color: #000; }
.item-wrapper .swiper-button-prev {left: 6px;}
.item-wrapper .swiper-button-next {right: 6px;}
.snsItem{ margin: 0 24px; text-align: center;}
.snsItem .mainTitle{ position: relative; }
.snsItem .btnSns {position: absolute; top: 0; right: 0; border:1px solid #afafaf; padding:5px 15px; font-size:13px; text-decoration:none; }
.snsItem-wrapper{display: flex; }
.snsItem-item{flex: 1; }
.snsItem-item img{width: 100%;}

/********************* Mobile *********************/
@media all and (max-width:767px) {

}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
 
}

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
    
}

/********************* Tablet / PC *********************/
@media all and (min-width:1025px) {
    .mainTitle h2 { font-size:30px; }
    .more { margin:65px auto 0; }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    .mainTitle h2 { margin-bottom: 52px;  }
    .btnMore { padding:18px 40px; font-size:15px;}
.mainVisual {margin: 0;}
    .mainVisual .swiper-container{height:100vh; }
    .mainVisual .swiper-button-next:after, 
    .mainVisual .swiper-button-prev:after {color: #fff;}
    .mainVisual .swiper-button-next, .mainVisual .swiper-container-rtl .swiper-button-prev{right: 50px; }
    .mainVisual .swiper-button-prev, .mainVisual .swiper-container-rtl .swiper-button-next{left: 50px; }
    .mainVisual .here .text { font-size:45px; }
    .mainVisual .here .button { height:54px; margin:42px 0 0; }
    .mainVisual img{ position: relative; top:0; left: 50%; height: 100vh; width:100%; min-width: 100%; transform: translate(-50%, 0);  }
    
    .collection{ width: 100%; display: flex; justify-content: center; align-items: center;  box-sizing: border-box;}
    
    .saleItem { margin:95px -50px 0; padding:100px 60px;}
    .saleItem .tab{margin-top: -35px;}
    .productItem { max-width:1240px; margin:95px auto 0; }
    .productSlide{ position:relative; max-width:1240px; }
    .productSlide .mainTitle { position:absolute; top:0; left:0; width:100%; }
    .item-wrapper{ display: flex; margin: 54px 0;}
    .item-wrapper > div{flex: 1;}
	.item-wrapper .swiper-container { width:100%; padding:0 40px; box-sizing:border-box; }
    .item-wrapper .ec-base-product { width:100%; padding:0 33px; box-sizing:border-box; }
    .item-wrapper .ec-base-product .prdList .thumbnail { margin:0 0 10px; }
    .item-wrapper .swiper-container:before,
    .item-wrapper .swiper-container:after { content:""; display:block; width:40px; height:100%; position:absolute; top:0; bottom:0; right:0; background:#fff; z-index:1; }
    .item-wrapper .swiper-container:before { left:0; z-index:2; }
        .swiper-container-horizontal > .swiper-scrollbar { left:40px; right:40px; width:auto; }
        .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right:0; }
        .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left:0; }
    .productSlide.gSpecial .item-wrapper { flex-direction: row-reverse; }
    .middleBanner { position:relative; margin:115px 0; }
    .middleBanner .text { position:absolute; left:115px; top:0; bottom:0; margin:auto 0; height:60px; font-size:50px; color:#000; text-decoration:none; }
    .snsItem {margin:95px 0; }
    .snsItem .mainTitle { max-width:1240px; margin:0 auto; }
    .snsItem-wrapper{margin: 60px -10px 0;}
    .snsItem-wrapper .snsItem-item a{display: block; margin: 0; }
}


.hire .item-wrapper {
    height:500px;
    overflow:hidden;
}

.hire .item-wrapper .swiper-container {
    height:100%;
}

.description .name,
.description .spec > li { text-align:center!important; }


.toggle {
    display: inline-block;
    width: 50px;
    height: 50px;
    z-index: 99999;
    position: absolute;
    top: 50px;
    right: 30px;
    opacity: 0;
  }
  
  .toggle > .t1,
  .t2,
  .t3 {
    display: inline-block;
    width: 50px;
    height: 10px;
    background-color: #000;
    display: block;
    z-index: 999999999999;
  }
  .t1 {
  }
  .t2 {
    margin: 5px 0;
  }
  .t3 {
  }
  
  /* section2  */
  .tit_box {
    width: 40%;
    border-radius: 30px;
    margin: 5% auto 7%;
    text-align: center;
    padding: 2% 3%;
    background: rgba(255, 255, 255, 0.6);
  }
  .tit_box > h2 {
    font-size: 3.75em;
    color: #000;
    font-weight: bold;
    margin: 0 0 5%;
  }
  .tit_box > p {
    font-size: 1.75em;
    color: #000;
    font-weight: bold;
  }
  
  .info_box {
    width: 40%;
    border-radius: 30px;
    margin: 2% auto 0;
    text-align: center;
    padding: 2% 3%;
    background: rgba(0, 0, 0, 0.7);
  }
  .info_box > h2 {
    color: #fff;
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 5%;
  }
  .info_box > p {
    color: #fff;
    font-size: 1.25em;
    font-weight: normal;
    line-height: 1.8;
  }
  
  /* section3 */
  
  .sec3 > div { 
      display: flex;
      align-items: center;
      position: relative;
   }
  
  .symbol_box_left { 
      position: absolute;
    width: 18%;
    border-radius: 30px;
    margin: 1% 8.5%;
    padding: 4% 1%;
    text-align: center;
    /*border: 1px solid #757575;*/
    box-sizing: border-box;
      background-color:#fff;
  }
  
  .symbol_box_left h3 {
      font-size: 1.75em;
  }
  
  .symbol_box_left h2 {
      font-size: 2.375em;
  }
  
  .symbol_box_left p {
      font-size: 1.25em;
  }
  
  .symbol_box {
    width: 28%;
    border-radius: 30px;
    margin: 1% auto 0;
    padding: 4% 1%;
    background: orangered;
    text-align: center;
  }
  .symbol_box h2 {
    color: #fff;
    font-size: 1.75em;
  }
  .symbol_box h3 {
    color: #fff;
    font-size: 2.375em;
    margin: 15% 0;
    letter-spacing: -1px;
  }
  .symbol_box p {
    color: #fff;
    font-size: 1.25em;
  }
  
  .line1 {
    width: 60%;
    margin: 8% auto;
    height: 5px;
    background: green;
  }
  
  /* section4 */
  
  .s4_txt_box {
    width: 50%;
    margin: 5% auto 6%;
    text-align: center;
  }
  .s4_txt_box h2 {
    font-size: 38px;
    margin: 0 0 5%;
  }
  .s4_txt_box p {
    font-size: 30px;
    line-height: 1.8;
  }
  
  .s4_txt_box .s4_txt_box_text_s { 
      font-size: 18px;
    line-height: 1.8;
   }
  
  
  .s4_img_box {
    width: 90%;
    margin: 5% auto 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .s4_f_box {
    width: 325px;
    height: 325px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 100%;
    filter: saturate(1.5);
  }
  .s4_f_box:nth-child(1) {
    background-image: url('/theme/basic/img/main/main_2nd_1.png');
  }
  .s4_f_box:nth-child(2) {
    background-image: url('/theme/basic/img/main/main_2nd_2.png');
  }
  .s4_f_box:nth-child(3) {
    background-image: url('/theme/basic/img/main/main_2nd_3.png');
  }
  .s4_f_box:nth-child(4) {
    background-image: url('/theme/basic/img/main/main_2nd_4.png');
  }
  .s4_f_box:nth-child(5) {
    background-image: url('/theme/basic/img/main/main_2nd_5.png');
  }
  /*
  .s4_f_box:nth-child(6) {
    background-image: url('https://smcpro14.cafe24.com/web/upload/mainslide2_circleimg_6.png');
  }
  
  */
  
  /*
  .s4_f_box:nth-child(4) { background-image: url("https://smcpro14.cafe24.com/web/upload/s4_4.jpg");}
  .s4_f_box:nth-child(5) { background-image: url("https://smcpro14.cafe24.com/web/upload/s4_5.jpg");}
  */
  
  /* section5 */
  
  .s5_div {
      position: relative;
      max-width: 1240px;
      margin: 95px auto;
  }
  
  .s5_div h1 {
      text-align: center;
      /*margin: 5% 0 0;*/
      position: relative;
      top: 30px;
      z-index:2;
      font-size: 40px;
  }
  
  .s5_div span {
      font-size: 20px;
  }
  
  /* section5 */
  
  /* section6 */
  
  .s6_txt_box {
    text-align: center;
    background: #fff;
    width: 27%;
    margin: 2% auto 0;
    padding: 4% 0 3%;
    border-radius: 30px;
    opacity: 0.8;
  }
  
  .s6_tit {
    font-size: 26px;
    line-height: 1.7;
  }
  
  .s6_tit span { font-size: 80px; }
  
  .s6_info {
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 1.7;
  }