@charset "UTF-8";


.sub_vi {background: url('/common/img/img2.jpg') no-repeat   center; width:100%; display:inline-block;   color:#fff; text-align:center;box-sizing:border-box;}
.sub2 {background: url('/common/img/sub_vi03.jpg') no-repeat   center;}
.sub3 {background: url('/common/img/sub_vi02.jpg') no-repeat   center;}
.sub4 {background: url('/common/img/sub_vi04.jpg') no-repeat   center;}
.sub5 {background: url('/common/img/sub_vi05.jpg') no-repeat   center;}
.sub6 {background: url('/common/img/sub_vi06.jpg') no-repeat   center;}
.sub7 {background: url('/common/img/sub_vi07.jpg') no-repeat   center;}

.sub_vi div {width:100%; padding:180px 0 100px 0; height:100%; display:inline-block; background:rgba(0,0,0,.3);}
.sub_vi b {font-size:3rem; font-weight:700; }
.sub_vi p {font-size:1.3rem; font-weight:500; }

.pc_img {display:inline-block; }
.m_img {display:none;}


.content h2 {height:230px;}
.content h2 .line {width:1px; height:100px; display:block; background-color:#ccc; margin:30px auto 15px auto; animation:line 1s ease; }
@keyframes line {
0% {height:0}
100% {height:100px}
}


@keyframes tada {
0% {opacity:0}
50% {opacity:0}
100% {opacity:1}
}

ul.sub_menu {width:100%; margin-bottom:50px; display:inline-block; font-size:0;}
ul.sub_menu li {float:left; background-color:#f9f9f9; text-align:center; width:20%; font-size:1.1rem; color:#333; }
ul.sub_menu li a {display:inline-block; width:100%; line-height:50px; transition:.2s all; border:1px solid #ddd; border-right:none; box-sizing:border-box; }
ul.sub_menu li:last-child {border-right:1px solid #ddd;}
ul.sub_menu li:hover a {border:1px solid #00bbdb; color:#00bbdb !important; font-weight:600;}
ul.sub_menu li.ov a {border:1px solid #00bbdb; color:#00bbdb !important; font-weight:600;}

.sub_in {width:100%; display:inline-block; margin-top:80px; text-align:center; }
.sub_in h2 {font-size:2rem; color:#333;   width:100%; display:inline-block; padding-bottom:30px}
.content {width:80%; max-width:1300px; margin:0 auto}

/*모바일메뉴*/
.navigatonBox {
  width:100%; float:left; position:relative; border-bottom:1px solid #ddd;
}


.buttonGroup {
  overflow-x: auto;
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
}
.navButton, .option {
  display: inline-block;
  margin-right:12px;
  cursor:default;
}

.navButton {}
.navButton a {font-size:0.95em; line-height:45px; font-weight:400; color:#777; }
a.button_ov {font-weight:600; color:#333 !important; border-bottom:1.5px solid #333;}

.navButton:last-child {
  margin-right:20px;
}
.navButton:first-child {
  margin-left:20px;
}
.optionGroup {
  width:100%;
  height:100px;
  position:absolute;
  top:50px;
  left:0;
}

.option {
  position:absolute;
  top:0;
  left:0;
  padding: 5px 10px;
  border:1px solid #DDD;
  border-radius:3px;
}

.option p {
  margin:0 0 5px;
  white-space: nowrap;
}

.option p:hover {
  background-color:#EEE;
}

.arrow {
  width:20px;
  height:15px;
  position:absolute;
  top:15px;
  background-color:white; display:none
}

.arrow::before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-size:100% 100%;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDMwNiAzMDYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwNiAzMDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY2hldnJvbi1yaWdodCI+CgkJPHBvbHlnb24gcG9pbnRzPSI5NC4zNSwwIDU4LjY1LDM1LjcgMTc1Ljk1LDE1MyA1OC42NSwyNzAuMyA5NC4zNSwzMDYgMjQ3LjM1LDE1MyAgICIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}

.arrow.left {
  left:0;
  transform:rotate(180deg);
}
.arrow.right {
  right:0;
}

/*about01
.about01 .text_box {font-size:1rem; line-height:1.6em; color:#555; letter-spacing:0;}
.about01 .text_box b {font-weight:600; color:#333; font-size:1.2rem; position:relative; display:inline-block;  }
.about01 .text_box strong {font-weight:600; color:#333; font-size:1.2rem; position:relative; display:inline-block;  }*/


/*about01*/
.about01 {animation:tada 2s ease;}
.about01 .img_wrap {width:100%; height:auto;  overflow:hidden;   position:relative; margin-bottom:50px;}
.about01 .img_wrap img {width:100%; animation:img1 4s ease-out both; }
@keyframes img1 {
0%     {transform:scale(1);}
25%   {transform:scale(1);}
100% {transform:scale(1.1);}
}

.about01_box  {width:100%; }
.about01_box ul {width:100% ; display:flex; flex-wrap:wrap;}
.about01_box ul li {width:50%;display:flex;  border-top:1px solid #ddd; box-sizing:border-box;  text-align:left; line-height:60px}
.about01_box ul li b {width:20%; border-top:2px solid #00bbdb; line-height:25px; padding:30px 0; }
.about01_box ul li p {padding:10px 20px; }
.about01_box ul li:nth-child(7) b {line-height:30px; }
.about01_box ul li:nth-child(8) b {line-height:30px; }
.about01_box ul li:nth-child(7) p {line-height:30px; }
.about01_box ul li:nth-child(8) p {line-height:30px; }


/*about02*/
.about02 {font-size:0; margin-top:20px; }
.about02 .pc_img {width:40%; vertical-align:top; }
.about02 .text_box {display:inline-block; width:60%; font-size:1rem; line-height:1.8em; color:#555; letter-spacing:0; transition:.5s all; text-align:left; padding-left:50px; margin-top:4px; }
.about02 .text_box b {font-weight:600; color:#333; font-size:1.2rem; position:relative; display:inline-block;  }
.about02 .text_box strong {font-weight:600; color:#333; font-size:1.2rem; position:relative; display:inline-block;  }
.about02 .text_box strong:before {display:block; content:''; background:url('../img/sign.png')no-repeat 0 0; background-size:contain; width:200px; height:100px; position:absolute; right:-160px; top:-40px; opacity:.2; }



/*about03*/
.about03 {text-align:left; width:100%; position:relative; overflow:hidden; }
.about03 .bg {background-color:#f3f3f3; width:50%; margin-left:50%; height:100%; position:absolute; right:0; top:0;}
.about03 > ul {padding-top:20px; }
.about03 > ul > li {position:relative; width:100%;padding-left:55%; padding-bottom:80px; transition:.5s all;}
.about03 > ul > li .img_wrap {width:50%; height:100%;  position:absolute; left:0; top:0;  vertical-align:top; }
.about03 > ul > li .img_wrap .wrap {width:85%; position:relative; height:80%;overflow:hidden; vertical-align:top; }
.about03 > ul > li .img_wrap .wrap img {min-width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.about03 > ul > li .img_wrap > span {display:inline-block; width:25%; height:1px; background-color:#00bbdb; position:absolute; right:7px; top:30px; }
.about03 > ul > li:nth-child(2n) {width:100%; margin-left:0; text-align:right; padding-left:0; padding-right:55%; }
.about03 > ul > li:nth-child(2n) .img_wrap {width:50%; position:absolute; right:0; top:0; margin-left:50%; }
.about03 > ul > li:nth-child(2n) .img_wrap .wrap {margin-left:10%;}
.about03 > ul > li:nth-child(2n) .img_wrap .wrap img {min-width:80%; }
.about03 > ul > li:nth-child(2n) .img_wrap > span {display:inline-block; width:25%; height:1px; background-color:#00bbdb; position:absolute; left:7px; top:30px; }

.about03 > ul > li h3:before {content:''; display:block; width:21px; height:21px; border-radius:100%; border:5px solid #00bbdb; position:absolute; left:49.1%; top:18px; background-color:#fff; }
.about03 > ul > li h3:nth-child(2n):before {display:none }
.about03 > ul > li h3:nth-child(2n):after {content:''; display:block; width:21px; height:21px; border-radius:100%; border:5px solid #00bbdb; position:absolute; right:49.1%; top:28px; background-color:#fff; }
.about03 > ul > li h3 {margin-top:50px; font-size:2.8rem; margin-bottom:10px; font-family: 'Eulyoo1945-SemiBold';}
@font-face {
    font-family: 'Eulyoo1945-SemiBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/Eulyoo1945-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.about03 > ul > li ul {width:100%; }
.about03 > ul > li ul li {color:#555; line-height:2rem; font-size:0; }
.about03 > ul > li:nth-child(2) ul li {margin-bottom:7px;}
.about03 > ul > li ul li:after {display:block; content:''; clear:both; }
.about03 > ul > li:nth-child(2n) span {float:right;}
.about03 > ul > li:nth-child(2n) p {float:right;}
.about03 > ul > li ul li span {font-weight:600; color:#111; display:inline-block; width:20%; font-size:.95rem; vertical-align:top; }
.about03 > ul > li ul li p {display:inline-block; width:70%; font-size:.95rem;  }


/*about04*/
.about04 {text-align:center; position:relative;}
.about04 > img {width:100%;}
.about04 .wrap {font-size:0; }
.about04 .wrap .logo {width:30%;padding-bottom:30%; border-radius:100%; display:inline-block; 	background-color:#111; background-size:70%; margin-top:-15%; position:relative; opacity:.95; transition:.5s all; }
.about04 .wrap .logo .img_wrap {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80%;}
.about04 .wrap .logo .img_wrap img {width:100%;}
.about04 .wrap .logo span {display:inline-block; width:1px; height:160px; background-color:#ccc; position:absolute; left:50%; bottom:-160px; }
.about04 .wrap .tit2 {position:relative; width:100%; }
.about04 .wrap .tit2 span {display:inline-block; width:75%; height:1px; background-color:#ccc; position:absolute; left:50%; bottom:50px; transform:translate(-50%,0);}
.about04 .wrap .tit2 p {font-size:1rem; ;display:inline-block; margin:55px 0 105px 0; position:relative;  }
.about04 .wrap p {width:25%; height:50px; line-height:50px; border-radius:25px; background-color:#00bbdb; color:#fff;display:inline-block; font-size:1.1rem;  }
.about04 .wrap .tit3 {font-size:1rem; width:100%; font-size:0;}
.about04 .wrap .tit3 > li {display:inline-block; width:25%; font-size:1rem; vertical-align:top; padding:0 2%; position:relative; }
.about04 .wrap .tit3 > li span {display:inline-block; width:1px; height:50px; background-color:#ccc; position:absolute; left:50%; top:-50px; transform:translate(-50%,0);}
.about04 .wrap .tit3 > li p {width:100%;}
.about04 .wrap .tit3 > li ul {}
.about04 .wrap .tit3 > li ul li {width:100%; border-radius:25px; height:50px; line-height:45px; border:3px solid #ddd; margin-top:10px; color:#555; }


/*about05*/
.about05 {font-size:0;  text-align:left;  animation:tada 2s ease;}
.about05 iframe {width:100%; height:450px; display:inline-block;  }
.about05 .txt {width:100%; display:block;  padding-top:30px; vertical-align:top;  border-top:5px solid #00bbdb;}
.about05 .txt .wrap { }
.about05 .txt .wrap > div {width:50%; display:inline-block; vertical-align:top; }
.about05 .txt .wrap .left {border-right:1px solid #ccc; transition:.5s all;}
.about05 .txt .wrap .right {padding-left:50px; transition:.5s all;}
.about05 .txt .wrap > div > div {width:100%; display:inline-block; margin-bottom:30px; line-height:2rem;}
.about05 .txt .wrap > div > div span {font-size:1rem;  display:inline-block; width:30%; float:left; font-weight:600; }
.about05 .txt .wrap > div > div span img {vertical-align:middle; margin-right:10px; opacity:.7;  }
.about05 .txt .wrap > div > div p {width:70%; font-size: 1rem; float:left; padding-left:20px; color:#555; }



/*product01*/
.product01 {animation:tada 2s ease; text-align:right; }
.product01 .pro_tab {font-size:0; margin-bottom:50px; text-align:center;  }
.product01 .pro_tab li {; display:inline-block; width:20%; border-bottom:3px solid #fff; transition:.2s all; }
.product01 .tab2 li {width:25%;}
.product01 .pro_tab li.on {border-bottom:3px solid #00bbdb; }
.product01 .pro_tab li.on a {color:#00bbdb; }
.product01 .pro_tab li:hover {border-bottom:3px solid #00bbdb; }
.product01 .pro_tab li:hover a {color:#00bbdb; }
.product01 .pro_tab li a {font-size:1rem; width:100%; line-height:50px; display:inline-block; }

.product01 .pro_tab2 {width:100%; height:50px; line-height:50px; border:1px solid #ccc; font-size:1rem; color:#333; padding:0 1%; background:url('../img/product01_arrow.png')no-repeat 99% 50%; display:none;
									-webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none; margin:35px 0 50px 0}
.product01 select::-ms-expand{display:none;/*for IE10,11*/}
.product01 .pro_tab2 option {}

.product01 .pro_list {font-size:0; text-align:center; }
.product01 .pro_list > li {width:100%;}
.product01 .pro_list > li > ul {display:flex; flex-wrap:wrap; }
.product01 .pro_list > li > ul:after {clear:both; content:''; display:block; }
.product01 .pro_list > li > ul > li {float:left; width:24%; margin-right:1%; margin-bottom:30px; transition:.5s all; }
.product01 .pro_list > li > ul > li:nth-child(4n) {margin-right:0;}
.product01 .pro_list > li > ul > li .img_wrap {width:100%; padding-bottom:100%; overflow:hidden; position:relative; }
.product01 .pro_list > li > ul > li .img_wrap img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; max-width:100%; max-height:100%;   }
.product01 .pro_list > li > ul > li h4 {font-size:1.3rem; line-height:1.6rem; margin-top:5px; }
.product01 .pro_list > li > ul > li h4 b {font-size:1.1rem; width:100%; display:inline-block;}
.product01 .pro_list > li > ul > li p {font-size:.9rem; margin-top:12px; color:#555; }



.product03 {}
.product03 > ul {}
.product03 > ul > li {margin-bottom:100px; }
.product03 > ul > li:last-child {margin-bottom:0; }
.product03 > ul > li > img {width:200px; margin-bottom:20px; }
.product03 > ul > li > p {font-size:1.2rem; }
.product03 > ul > li > ul {font-size:0; margin-top:20px;  }
.product03 > ul > li > ul > li {border:1px solid #ddd; border-radius:10px; padding:20px; display:inline-block; width:100%;  }
.product03 > ul > li.first  ul > li {width:49.5%; margin-right:1%; transition:.2s all; }
.product03 > ul > li.first  ul > li:last-child {margin-right:0; margin-top:10px; }
.product03 > ul > li > ul > li h3 {font-size:1.2rem;}
.product03 > ul > li > ul > li p {font-size:1rem; margin-top:10px;}
.product03 > ul > li > ul > li span {display:block; font-size:1rem; color:#777; margin-top:10px; }
.product03 > ul > li > ul > li a {display:inline-block; color:#00bbdb; font-size:1rem; margin-top:10px; }


/*catalog01*/
.catalog01 {width:100%; text-align:left; animation:tada 2s ease; }
.catalog01 ul {}
.catalog01 ul:after {clear:both; display:block; content:''; }
.catalog01 ul li {width:100%; font-size:0; position:relative;  padding-bottom:50px; border-bottom:1px solid #ccc; margin-top:50px;}
.catalog01 ul li:first-child {margin-top:0;}
.catalog01 ul li img {width:350px; transition:.5s all; box-shadow:1px 1px 10px rgba(0,0,0,.1); }
.catalog01 ul li .txt { display:inline-block; padding-left:5%; position:absolute; left:400px; top:42%; transform:translate(0,-50%); transition:.5s all;}
.catalog01 ul li .txt span {font-size:1.5rem; font-weight:600; }
.catalog01 ul li .txt h4 {font-size:2.5rem;}
.catalog01 ul li .txt p {font-size:1.2rem; margin-top:10px; }
.catalog01 ul li .txt a {font-size:1rem; display:inline-block; width:200px; line-height:50px; border:1px solid #111; text-align:center; margin-top:30px;  color: #111; text-transform: uppercase; position: relative; text-decoration: none;}

.catalog01 ul li:after {clear:both; display:block; content:''; }
.catalog01 ul li:nth-child(2n) img {width:400px; transition:.5s all; float:right;}
.catalog01 ul li:nth-child(2n) .txt { float:right; text-align:right; display:inline-block; padding-left:0; left:0; right:450px; transform:translate(0,-50%); transition:.5s all;}

.btn2::before{
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
z-index: -1;
background-color: #000;
-webkit-transform: scaleY(.3);
transform: scaleY(.3);
opacity: 0;
transition: all .3s
}

.btn2:hover{
  color:#fff !important;
  border-color:#fff !important;
}
.btn2:hover::before{
  opacity: 1;
  background-color: #00bbdb;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  transition: -webkit-transform .2s cubic-bezier(.08, .35, .13, 1.02), opacity .4s;
  transition: transform .2s cubic-bezier(.08, .35, .13, 1.02), opacity
}





/*delivery01*/
.delivery01 {text-align:left; }
.delivery01 .logo {font-size:0;margin-bottom:80px; }
.delivery01 .logo img {width:20%; transition:.5s all;}

.delivery01 .names {}
.delivery01 .names > li {padding-bottom:70px; margin-bottom:60px; border-bottom:1px solid #ddd; }
.delivery01 .names > li p {font-size:1.8rem;margin-bottom:10px; font-weight:600; font-family: 'Eulyoo1945-SemiBold';}
.delivery01 .names > li ul {}
.delivery01 .names > li ul li {display:inline-block; margin-right:20px; position:relative; padding-left:10px; font-size:.95rem; line-height:2.3rem; color:#111; transition:.5s all; color:#555; }
.delivery01 .names > li ul li:before {content:''; display:block; width:5px; height:5px; background-color:#00bbdb; border-radius:100%; position:absolute; left:0; top:13px; }




/*global01*/
.global01 {}
.global01 .wrap {}
.global01 .wrap img {width:100%; text-align:center; position:relative;}
.global01 .wrap img:before {content:''; display:block; width:1px; height:200px; background-color:#fff; opacity:.5; position:absolute; left:50%; top:0; transform:translate(-50%,0);}
.global01 .wrap .txt {transition:.5s all; width:70%; display:inline-block; padding:40px 50px; margin-top:-50px; background-color:#fff; box-shadow:5px 5px 30px rgba(0,0,0,.08); position:relative; }
.global01 .wrap .txt:before {content:''; display:block; width:11px; height:11px; border-radius:100%; background-color:#00bbdb; position:absolute;
												left:50%; top:-5px; transform:translate(-50%,0);}
.global01 .wrap .txt h4 {font-size:2rem; color:#111; line-height:2.5rem; margin-bottom:10px; font-family: 'MaruBuri-Regular';}
@font-face {
    font-family: 'MaruBuri-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.global01 .wrap .txt p {font-size:1rem; color:#333; margin-bottom:10px;}
.global01 .wrap .txt a {font-size:1rem; color:#00bbdb;}




/*notice01*/
.notice01 {width:100%; animation:tada 2s ease;}
.notice01 .notice {width:100%; margin-bottom:30px;  }
.notice01 .notice tbody {font-size:1rem;}
.notice01 .notice tr {height:50px;}
.notice01 .notice tr th {border-top:1px solid #111; border-bottom:1px solid #ddd; height:50px; line-height:50px; }
.notice01 .notice tr td {border-bottom:1px solid #ddd;  height:50px;}
.notice01 .notice tr .num   {width:80px;  }
.notice01 .notice tr .tit       {width:calc(100% -340px); text-align:left; }
.notice01 .notice tr .name {width:80px; }
.notice01 .notice tr .date   {width:100px; }
.notice01 .notice tr .view   {width:80px; }
.notice01 .notice tr td a {display:inline-block;  height:44px; line-height:50px; overflow:hidden; }


/*view_page*/
.view_page {animation:tada 2s ease;}
.view_page .view {text-align:center; }
.view_page .list_btn {display:inline-block;  width:150px; height:45px; line-height:45px; text-align:center; border:1px solid #00bbdb; color:#00bbdb; margin-top:20px; }



/*ask01*/
.ask01 {animation:tada 2s ease;}
.ask01 .form_txt {width:100%; text-align:left; border-top:2px solid #00bbdb; }
.ask01 .form_txt tbody {font-size:1rem; }
.ask01 .form_txt tr {width:100%; border-bottom:1px solid #eee; }
.ask01 .form_txt tr.email input {width:200px;}
.ask01 .form_txt tr.email td select {width:150px; height:40px; line-height:40px; vertical-align:middle; border:1px solid #ddd;}
.ask01 .form_txt tr.email td select option {}
.ask01 .form_txt tr th {font-weight:600; }
.ask01 .form_txt tr td {padding:15px 0 15px 10px; }
.ask01 .form_txt tr.name td input {width:250px;}
.ask01 .form_txt tr.tel td input {width:150px;}
.ask01 .form_txt tr td input {height:40px; line-height:40px; vertical-align:middle; width:100%; border:1px solid #ddd; padding-left:10px; font-size:1rem; }
.ask01 .form_txt tr td textarea {height:100px; line-height:1.6rem; vertical-align:middle; resize:none; width:100%; border:1px solid #ddd; font-size:1rem; padding:10px;}
.ask01 .form_txt tr td button {font-size:1rem; background-color:#aaa; color:#fff; line-height:30px; padding:0 10px;  }
.ask01 .form_txt tr td button:hover {background-color:#00bbdb;}
.ask01 .form_txt tr td span {font-size:.9rem;  color:#777; margin-left:10px; }

.ask01 .privacy {text-align:left; margin-top:50px; }
.ask01 .privacy h4 {font-size:1.2rem; margin-bottom:10px;}
.ask01 .privacy textarea {width:100%; height:150px; resize:none; border:1px solid #ddd; padding:10px; font-size:.9rem; color:#555;}
.ask01 .privacy .terms_chk {}
.ask01 .privacy .terms_chk input {margin-top:7px; }
.ask01 .privacy .terms_chk span {font-size:.9rem;}

.ask01 .ask_btn {text-align:center; margin-top:50px; font-size:0;}
.ask01 .ask_btn a {display:inline-block; width:150px; height:40px; line-height:40px; background-color:#00bbdb; color:#fff; margin-left:10px; font-size:1rem; }
.ask01 .ask_btn a:first-child {background-color:#bbb; margin-left:0; }

.pc_table {}
.m_table {display:none;}







 @media (max-width:1200px) {

 .content h2 {height:130px;}
.content h2 .line { height:50px; animation:line2 1s ease; margin:20px auto 10px auto}

@keyframes line2 {
0% {height:0}
100% {height:50px}
}

.sub_vi div {padding:120px 0 70px  0; }
.sub_vi ul {display:none}
.sub_vi b  {font-size:2rem}
.sub_vi p {font-size:1rem}

.sub_in {margin-top:50px}
.sub_in h2 {font-size:1.5rem; color:#333;   width:100%; display:inline-block; padding-bottom:20px}
.content {width:90%; margin:0 auto}

.about01 .text_box {font-size:0.95rem; line-height:1.5em; color:#555; letter-spacing:0;}
.about01 .text_box b {display:inline-block; padding-bottom:10px; line-height:1.4em}
.about01 .text_box strong {display:inline-block; padding-bottom:10px; line-height:1.4em}

.about02 .text_box {font-size:0.95rem; line-height:1.5em; color:#555; letter-spacing:0;}
.about02 .text_box b {display:inline-block; padding-bottom:10px; line-height:1.4em}
.about02 .text_box strong {display:inline-block; padding-bottom:10px; line-height:1.4em}
.about02 .text_box strong:before {display:block; content:''; background:url('../img/sign.png')no-repeat 0 0; background-size:contain; width:200px; height:100px; position:absolute; right:-160px; top:-40px; opacity:.2; }

   }



@media (max-width:1000px) {

/*product01*/
.product01 .pro_list > li > ul > li {float:left; width:31.333%; margin-right:2%; }
.product01 .pro_list > li > ul > li:nth-child(3n) {margin-right:0; }
.product01 .pro_list > li > ul > li:nth-child(4n) {margin-right:2%;}
.product01 .pro_list > li > ul > li h4 {font-size:1.2rem; line-height:1.6rem; margin-top:5px; }
.product01 .pro_list > li > ul > li h4 b {font-size:1rem; width:100%; display:inline-block;}
.product01 .pro_list > li > ul > li p {font-size:.9rem; margin-top:12px; color:#555; }

.product03 > ul > li > p {font-size:1rem; }
.product03 > ul > li.first  ul > li {width:100%; margin-right:0;}


}




@media (max-width:800px) {

.pc_img {display:none; }
.m_img {display:inline-block; width:100%; }

/*about01*/
.about01 .table_wrap {width:100%; font-size:.95rem; }
.about01 .table_wrap table {width:100%; }


/*about02*/
.about02 .text_box {width:100%; padding:20px 0 0 0;}


/*about03*/
.about03 .bg {width:1px; height:100%; background-color:#00bbdb; position:absolute; left:10px; top:0; margin-left:0;}
.about03 > ul {padding-top: 0;}
.about03 > ul > li {width:100%;padding-left:0; padding-bottom:60px; }
.about03 > ul > li:last-child {padding-bottom:20px; }
.about03 > ul > li .img_wrap {width:100%; height:250px; overflow:hidden; position:relative;}
.about03 > ul > li .img_wrap .wrap {width:100%; overflow:hidden; height:100%; }
.about03 > ul > li .img_wrap .wrap img {min-width:100%; width:100%;}
.about03 > ul > li .img_wrap > span {display:none}
.about03 > ul > li:nth-child(2n) {width:100%; margin-left:0; text-align:left; padding-left:0; padding-right:0; }
.about03 > ul > li:nth-child(2n) .img_wrap {width:100%; position:relative; margin-left:0; padding-top:0;  }
.about03 > ul > li:nth-child(2n) .img_wrap .wrap {margin-left:0;}
.about03 > ul > li:nth-child(2n) .img_wrap .wrap img {width:100%; }
.about03 > ul > li:nth-child(2n) .img_wrap > span {display:none }

.about03 > ul > li .txt {padding-left:40px; padding-top:10px; }
.about03 > ul > li .txt h3 {font-size:2rem; margin-bottom:10px; font-weight:600; position:relative; }
.about03 > ul > li .txt h3:before {content:''; display:block; width:21px; height:21px; border-radius:100%; border:5px solid #00bbdb; position:absolute; left:-40px; top:28px; background-color:#fff; }



.about03 > ul > li:nth-child(2n) .txt span {float:none;}
.about03 > ul > li:nth-child(2n) .txt p {float:none;}


/*.about04*/
.about04 .wrap .logo {width:50%;padding-bottom:50%; border-radius:100%; display:inline-block; background-size:70%; margin-top:-35%; position:relative; }
.about04 .wrap .logo span {display:inline-block; width:1px; height:155px; background-color:#ccc; position:absolute; left:50%; bottom:-155px; }
.about04 .wrap .tit2 {position:relative; width:100%; }
.about04 .wrap .tit2 span {width:50%;}
.about04 .wrap .tit2 span.bottom {bottom:-240px }
.about04 .wrap .tit2 p {font-size:1rem; ;display:inline-block; margin:55px 0 110px 0;  position:relative;  }
.about04 .wrap p {width:50%; height:40px; line-height:40px; border-radius:25px; background-color:#00bbdb; color:#fff;display:inline-block; font-size:1rem;  }
.about04 .wrap .tit3 {font-size:1rem; width:100%; font-size:0;}
.about04 .wrap .tit3 > li {display:inline-block; width:50%; font-size:.95rem; vertical-align:top; padding:0 3.5%; position:relative; margin-bottom:100px;}
.about04 .wrap .tit3 > li:nth-child(2) {}
.about04 .wrap .tit3 > li p {width:100%;}
.about04 .wrap .tit3 > li ul {}
.about04 .wrap .tit3 > li ul li {width:100%; border-radius:25px; height:40px; line-height:35px; border:2px solid #ddd; margin-top:10px; }



/*about05*/
.about05 .txt .wrap > div {width:100%; display:inline-block; vertical-align:top; }
.about05 .txt .wrap .left {border-right:none;}
.about05 .txt .wrap .right {padding-left:0; }


/*product01*/
.product01 .pro_tab {display:none}
.product01 .pro_tab2 {display:block; }


/*catalog01*/
.catalog01 {max-width:400px;  text-align:center; margin:0 auto }
.catalog01 ul {}
.catalog01 ul li {width:100%; font-size:0; position:relative;  padding-bottom:70px; border-bottom:1px solid #ccc; }
.catalog01 ul li img {width:100%;  }
.catalog01 ul li:nth-child(2n) img {width:100%; }
.catalog01 ul li .txt {width:100%; display:inline-block; padding-left:0; position:relative; left:0; top:20px; transform:translate(0,0); text-align:left; }
.catalog01 ul li:nth-child(2n) .txt {top:150px;}
.catalog01 ul li .txt span {font-size:1.3rem; font-weight:600; }
.catalog01 ul li .txt h4 {font-size:2rem;}
.catalog01 ul li .txt p {font-size:1.1rem; margin-top:10px; }
.catalog01 ul li .txt a {font-size:1rem; margin-top:40px; }





/*.delievery01*/
.delivery01 .logo img {width:33.333%;}




/*global01*/
.global01 .wrap .txt {width:90%; display:inline-block; padding:40px 10px; margin-top:-50px; background-color:#fff; box-shadow:5px 5px 30px rgba(0,0,0,.08); position:relative; }
.global01 .wrap .txt h4 {font-size:1.6rem; color:#111; line-height:2rem; margin-bottom:10px;}



/*notice01*/
.notice01 {width:100%; }
.notice01 .notice {width:100%; margin-bottom:30px;  }
.notice01 .notice tbody {}
.notice01 .notice tr {}
.notice01 .notice tr th {border-top:1px solid #111; border-bottom:1px solid #ddd; height:50px; line-height:50px;}
.notice01 .notice tr td {border-bottom:1px solid #ddd;}
.notice01 .notice tr .num   {width:50px; }
.notice01 .notice tr .tit       {width:calc(100% -50px); text-align:left; }
.notice01 .notice tr .name {display:none}
.notice01 .notice tr .date   {display:none}
.notice01 .notice tr .view   {display:none}
.notice01 .notice tr td a {display:inline-block;  height:44px; line-height:50px; overflow:hidden; }


/*ask01*/
.ask01 {}
.ask01 .form_txt {width:100%; text-align:left; border-top:2px solid #00bbdb; }
.ask01 .form_txt tbody {font-size:1rem; }
.ask01 .form_txt tr {width:100%; border-bottom:1px solid #eee; }
.ask01 .form_txt tr.email input {width:45%;}
.ask01 .form_txt tr.email td select {margin-top:10px; width:45%; height:40px; line-height:40px; vertical-align:middle; border:1px solid #ddd;}
.ask01 .form_txt tr.email td select option {}
.ask01 .form_txt tr th {font-weight:600; width:80px; }
.ask01 .form_txt tr td {padding:15px 10px 15px 10px; }
.ask01 .form_txt tr.name td input {width:100%;}
.ask01 .form_txt tr.tel td input {width:30%;}
.ask01 .form_txt tr td input {height:40px; line-height:40px; vertical-align:middle; width:100%; border:1px solid #ddd; padding-left:10px; font-size:1rem; }
.ask01 .form_txt tr td textarea {height:100px; line-height:1.6rem; vertical-align:middle; resize:none; width:100%; border:1px solid #ddd; font-size:1rem; padding:10px;}
.ask01 .form_txt tr td button {font-size:1rem; background-color:#aaa; color:#fff; line-height:30px; padding:0 10px;  }
.ask01 .form_txt tr td button:hover {background-color:#00bbdb;}
.ask01 .form_txt tr td span {font-size:.9rem;  color:#777; margin-left:10px; }




.pc_table {display:none;}
.m_table {display:block;}



}



@media (max-width:600px) {

/*product01*/
.product01 .pro_list > li > ul > li {float:left; width:48%; margin-right:2%; }
.product01 .pro_list > li > ul > li:nth-child(2n) {margin-right:0; }
.product01 .pro_list > li > ul > li:nth-child(3n) {margin-right:2%; }
.product01 .pro_list > li > ul > li:nth-child(4n) {margin-right:2%;}
.product01 .pro_list > li > ul > li h4 {font-size:1.1rem; line-height:1.4rem; margin-top:5px; }
.product01 .pro_list > li > ul > li h4 b {font-size:.95rem; width:100%; display:inline-block;}
.product01 .pro_list > li > ul > li p {font-size:.85rem; margin-top:12px; color:#555; }


}




@media (max-width:450px) {



/*about03*/
.about03 > ul > li .txt ul li span {font-weight:600; color:#111; display:inline-block; width:28%; font-size:1rem; vertical-align:top; }
.about03 > ul > li .txt ul li p {display:inline-block; width:70%; font-size:1rem;  }


/*about05*/
.about05 iframe {height:300px;}
.about05 .txt .wrap > div > div span {width:100%;}
.about05 .txt .wrap > div > div p {width:100%; padding-left:40px; }


/*.delievery01*/
.delivery01 .logo img {width:50%;}



}

@media (max-width:393px) {
.catalog01 ul li:nth-child(2n) .txt {top:180px;}

}