/* main layout */

#banner {}
#sbanner { border-top: 1px solid #efefef; background-color: rgba(0,0,0,0.03);
}
#contents {}
#interview {background: url(../img/interviewbg1.jpg); border-top: 1px solid #ccc;}
#ad {position: relative;background: url(../img/ad_bg.jpg) no-repeat center top; z-index: 1; background-size: cover;}
#ad:before {content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: absolute; left: 0; top 0;}
#review {position: relative; background:url(../img/review_bg.jpg) no-repeat center top;  background-size: cover;}
#select {background-color: #1d7abd;}
#price {}
#order {}
#special {position: relative; background: url(../img/Special.jpg) no-repeat center top;  background-size: cover;}
#infor {}
#map {}
#logo {border-top: 2px solid #e6e6e6;}
#brand { background-color: #efefef;}
#blog {}
#site {background-color: #f8f9fa;}



/* banner */
.banner {padding: 200px 50px 155px 80px;}
.banner h2 {font-size: 44px; line-height: 55px; color: rgba(0,0,0,0.8);
}
.banner p {font-size: 26px; padding:20px 0; color: #222;}
.banner em {font-size: 24px; color: #bf0000; display: block;
}
.banner .animate__fadeIn {animation-delay: 0.8s;}
.banner .animate__bounce {animation-delay: 1s;}
.banner .view {font-size: 18px; display: inline-block; margin-top: 50px; border: 1px solid #333;
 background-color: #fff; padding: 12px 42px; transition: all 0.4s ease;}
.banner .view:hover {background-color: #000; color: #fff;}
.banner-img1 {background: url(../img/banner-bg1.jpg) no-repeat center top;}
.banner-img2 {background: url(../img/banner-bg2.jpg) no-repeat center top;}
.banner-img3 {background: url(../img/banner-bg3.jpg) no-repeat center top;}

/* sbanner */
.sbanner {overflow: hidden; padding: 50px 0;}
.sbanner > div {float: left; width: 28%;  background-color: #efefef;  margin-left: 1%; padding: 2%;
 height: 120px;}
.sbanner > div.simg1 {background: #efefef;}
.sbanner > div.simg2 {background: #efefef;}
.sbanner > div.simg3 {background: #efefef;}
.sbanner > div h4 {font-size: 24px; padding-bottom: 4px;}
.sbanner > div h4 i {padding-left: 8px;}
.sbanner > div h4:hover {text-decoration: underline;}
.sbanner > div p {font-size: 16px; color: #676767;}


/* contents */

.contents {overflow: hidden; padding: 60px 0;}
.contents h3 {width: 100%; font-size: 36px; text-align: center; padding-bottom: 50px;}
.contents h3 span {color: rgba(224,94,38,1);}
.contents .contents-box {overflow: hidden; text-align: left; padding: 3px 50px 0 50px;}
.contents .contents-box h3 {display: none;}
.contents .contents-box .co-left {float: left; width: 35%; border-right: 1px solid #ccc; box-sizing: border-box;}
.contents .contents-box .co-left img {width: 85%; }
.contents .contents-box .co-right {float: left; width: 65%; padding-left: 40px; box-sizing: border-box;}
.contents .contents-box .co-right p {font-size: 18px; color: #696969; margin: 0;}
.contents .contents-box .co-right p span {color:rgba(224,38,38,1); }

/* interview */
.interview {overflow: hidden; padding: 60px 50px;}
.interview h3 {font-size: 40px; text-align: center; padding-bottom: 30px;}
.interview video {width: 100%;}

/* ad */
.ad {padding:70px 0; text-align: center; z-index: 10; position: relative;}
.ad h3 {font-size: 40px; padding-bottom: 20px; color: #fff;}
.ad p {font-size: 18px; color: #fff;}
.ad .view  {font-size: 18px; display: inline-block; margin-top: 50px; border: 1px solid #fff;
 padding: 12px 42px; transition: all 0.4s ease; color: #fff;}
.ad .view:hover {background-color: #fff; color: #000;}

/* review */
.review {padding: 60px 0; overflow: hidden;}
.review h2 {text-align: center; font-size: 44px; color:white; width: 100%; padding-bottom: 40px;}
.review >div {background: white;  float: left; width: 27%; border: 1px solid #ccc; box-sizing: border-box; padding: 2%; margin-right: 3%; margin-left: 3%; text-align: center;}
.review img {width: 40%;}
.review h4 {font-size: 22px; padding: 10px 0;}
.review em {font-size: 22px; color: blue;}
.review p {font-size: 19px;}

/* select */
.select {overflow: hidden; padding: 60px 0;}
.select h3 {float: left; width: 25%; font-size: 28px; color: #fff; margin-top: 20px;}
.select > div {float: left; width: 19.5%; background-color: #2886ca; margin-left: 1.5%; padding: 2%;
height: 300px;}
.select > div.simg1 {background: #2886ca url(../img/select-bg1.png) no-repeat 30px 220px; background-size: 80px;}
.select > div.simg2 {background: #2886ca url(../img/select-bg2.png) no-repeat 30px 220px; background-size: 90px;}
.select > div.simg3 {background: #2886ca url(../img/select-bg3.png) no-repeat 30px 230px; background-size: 90px;}
.ie8 .select > div.simg1 {background: #2886ca url(../img/select-bg1-ie8.png) no-repeat 30px 220px; background-size: 80px;}
.ie8 .select > div.simg2 {background: #2886ca url(../img/select-bg2-ie8.png) no-repeat 30px 220px; background-size: 90px;}
.ie8 .select > div.simg3 {background: #2886ca url(../img/select-bg3-ie8.png) no-repeat 30px 230px; background-size: 90px;}
.select > div h4 {font-size: 20px; color: #fff; padding-bottom: 20px;}
.select > div p {font-size: 17px; color: #d2f0ff;}

/* price */
.price {}
.price-pc img {width: 100%; height: 100%;}
.price-m img {display: none;}

/* order */
.order {overflow: hidden; padding: 70px 0; text-align: center; }
.order h3 {text-align: center; font-size: 34px; color: rgb(255, 255, 255); border-radius: 50px;
padding: 12px 20px; line-height: 43px; background-color: rgb(236, 68, 73); margin-left: 25%;
margin-bottom: 30px; width: 600px; height: 46px;
}
.order img {}
.order p {font-size: 18px;}
.order .order-box {float: left; width: 19%; height: auto; padding: 2% 3%;}
.order .order-box img {width: 100px; height: 100px; display: block; margin: auto; background: center center / 100% no-repeat;
animation: updown 1.5s linear infinite both;}
.order .order-box img:hover {animation-play-state: paused;}
.order h4 {font-size: 23px; text-align: center; padding-top: 40px; color: rgba(0,0,0,0.5);}

/* special */
.special {overflow: hidden; padding: 70px 20px;  text-align: center;}
.special h4 {font-size: 40px; color: #fff; margin-bottom: 20px;}
.special .special-box {float: left; width: 21%; padding: 2% 4%; margin: 2%; border-radius: 15px; background: rgba(255,255,255,0.6);}
.special .special-box p {font-size: 20px; color: #000;}

/* infor */
.infor {padding:70px 0; text-align: center;}
.infor h3 {font-size: 40px; line-height: 65px; padding-bottom: 20px;}
.infor p {font-size: 20px; color: #666; padding-bottom: 50px;}
.infor .infor-box {overflow: hidden; text-align: left; padding: 3px 79px 0 150px;}
.infor .infor-box h4 {font-size: 20px; color: #333;padding-bottom: 5px;}
.infor .infor-box h4 i {color: #0081c8;}
.infor .infor-box .in-left {float: left; width: 45%; border-right: 1px solid #ccc; box-sizing: border-box;}
.infor .infor-box .in-left em {font-size: 24px; color: #333; width: 105px; display: inline-block;}
.infor .infor-box .in-left strong {font-size: 30px; color: #0081c8;}
.infor .infor-box .in-right {float: left; width: 55%; padding-left: 80px; box-sizing: border-box;}
.infor .infor-box .in-right li {font-size: 18px; color: #666; padding-top: 10px;}
.infor .infor-box .in-right li br {display: none;}

/* navermap */
#map {width: 50%; height:400px; margin: 0 25% 70px;}
.iw_inner { padding: 0 10px;}
.iw_inner h3 {font-size: 24px; text-align: center; padding: 5px 0;}
.iw_inner p {font-size: 18px; padding-bottom: 3px;}
.iw_inner p a{color: blue;}

/* logo */
.logo {}
.logo img {width: 100%; padding: 10px 20px 0 0px;}
.logom {display: none;}



/* brand */
.brand {overflow: hidden; padding: 70px 0; text-align: center;}
.brand h2 {font-size: 40px; padding-bottom: 20px;}
.brand h4 {font-size: 30px; color:firebrick; padding-bottom: 30px;}
.brand p {font-size: 24px;}
.brand span {position: relative; display: block; width: 500px; height: 400px; line-height: 400px; }
.brand span img {width: 100%;}
.brand span em {visibility: hidden; font-size: 36px; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.7); color: #fff; width: 100%; height: 100%;}
.brand span:hover em {visibility: visible;}
.brand .phonak {float: left; width: 42.4%; margin: 2% 3.4%;  background-color: #fff; border: 3px solid #a7a7a7;}
.brand .oticon {float: left; width: 42.4%; margin: 2% 3.4%; background-color: #fff; border: 3px solid #a7a7a7;}
.brand .beltone {float: left; width: 42.4%; margin: 2% 3.4%; background-color: #fff; border: 3px solid #a7a7a7;}
.brand .widex {float: left; width: 42.4%; margin: 2% 3.4%; background-color: #fff; border: 3px solid #a7a7a7;}

/* blog */
.blog {padding:70px 0;}
.blog h3 {font-size: 34px; margin-bottom: 50px;}
.blog .blog-wrap {overflow: hidden; margin-bottom: 80px;}
.blog .blog-wrap > div {float: left; width: 23.5%; margin-right: 2%; border-top: 2px solid #6f6f6f;}
.blog .blog-wrap > div:last-child {margin-right: 0;} 
.blog .blog-wrap > div h4 {font-size: 22px; padding: 20px 0 15px; overflow: hidden; text-overflow: ellipsis;
 white-space: nowrap;}
.blog .blog-wrap > div p {font-size: 16px; color: #7e7e7e; margin-bottom: 10px; overflow: hidden; 
text-overflow: ellipsis; display: -webkit-box; 
-webkit-line-clamp: 5; 
-webkit-box-orient: vertical;}
.blog .blog-wrap > div em {color: blue;}
.blog .blog-wrap > div figure img {width: 100%; border-radius: 20px; margin-top: 20px;}
.blog .notice-wrap {overflow: hidden; }
.blog .notice-wrap .nw-left {float: left; width: 580px;}
.blog .notice-wrap .nw-left h3 {font-size: 34px; margin-bottom: 20px; margin-right:20px; display: inline-block	;}
.blog .notice-wrap .nw-left .total {font-size: 14px; color: #999;}
.blog .notice-wrap .nw-left ul {border-top: 2px solid #6f6f6f;}
.blog .notice-wrap .nw-left li {overflow: hidden; padding: 20px 10px; border-bottom: 1px solid #e5e5e5;}
.blog .notice-wrap .nw-left li a {float: left; width: 80%; color: #666; font-size: 14px;  text-overflow: ellipsis;
 white-space: nowrap;}
.blog .notice-wrap .nw-left li span {float: right; width: 20%; text-align: right;  font-size: 14px; color: #999;}
.blog .notice-wrap .nw-right {float: right; width: 575px; height: 257px;}
.blog .notice-wrap .nw-right h3 {font-size: 34px; margin-bottom: 20px;}
.blog .notice-wrap .nw-right ul {border-top: 2px solid #6f6f6f; padding: 20px; border-bottom: 1px solid #e5e5e5; height: 144px;}
.blog .notice-wrap .nw-right ul li {padding: 12px 0; font-size: 17px; color: #666; text-overflow: ellipsis;
 white-space: nowrap;}
.blog .notice-wrap .nw-right ul li span {background-color: #666; color: #fff; margin-right: 20px; padding: 5px 10px;}



/* layer popup */
#layer {position: fixed; left: 100px; top: 150px; width: 500px; height: 500px;
border: 10px solid #dceff7; box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
}
#layer img {width: 100%; display: block;}
#layer .link {position: absolute; right: 10px; bottom: 10px; background: #fff; padding: 3px 8px; color: #000;}
#layer .link:hover {text-decoration: underline;}
#layer .close {position: absolute; right: 10px; top: 10px; background: #fff; padding: 3px 8px; color: #000;}
#layer .close:hover {text-decoration: underline;}

/* mediaquery */
@media (max-width: 1200px){

    .sbanner > div h4 {font-size: 20px;}
    .contents .contents-box .co-right p {font-size: 18px;}
    .select > div {width: 20.5%; background-color: #2886ca; padding: 1.5%;}
    .select > div p {font-size: 16px;} 
    .order h3 {margin-left: 20%;}

    /* infor */ 
    .infor .infor-box {padding: 3px 20px 0 20px;  text-align: center;}
    .infor .infor-box .in-left  {width: 100%; padding-bottom: 5%; border-right: 0;}
    .infor .infor-box .in-right  {width: 100%; padding-left: 0;}

    .brand span {width: 100%; height: 100%; line-height: 0;}
    .brand span em {display: none;}
    
    .blog .notice-wrap .nw-left {float: left; width: 54%;}
    .blog .notice-wrap .nw-right {float: right; width: 44%; height: 257px;}
}

@media (max-width: 1024px){

    .contents h3 {font-size: 32px;}
    .contents .contents-box .co-left img {padding-top: 50px;} 
    .select h3 {font-size: 26px;}

	.sbanner {overflow: hidden; padding: 40px 0;}
	.sbanner > div {height: 135px;}
	.sbanner > div h4 {font-size: 18px;}
	.sbanner > div p {font-size: 15px;}
	.sbanner > div.simg1 {float: left; width: 50%; margin-right: 0%; margin-bottom: 30px;}
	.sbanner > div.simg2 {float: left; width: 50%; margin-right: 0%; margin-bottom: 30px;}
	.sbanner > div.simg3 {float: none; width: 100%;}
	.select h3 {width: 38%; margin: 1%; padding: 5%; color: #fff;}
    .select > div {width: 28%; background-color: #2886ca; margin: 1%; padding: 5% 10%;}
    .select > div.simg1 {background: #2886ca url(../img/select-bg1.png) no-repeat 25% 80%; background-size: 80px;}
    .select > div.simg2 {background: #2886ca url(../img/select-bg2.png) no-repeat 25% 80%; background-size: 90px;}
    .select > div.simg3 {background: #2886ca url(../img/select-bg3.png) no-repeat 25% 80%; background-size: 90px;}
	.order h3 {margin-left: 17%;}
	.order img {width: 90px; height: 90px;}
	.order p {font-size: 17px;}
	.order .order-box {width: 19%; padding: 1.5% 3%;}
	.order h4 {font-size: 20px;}
    .special {padding: 60px 15px;}
	.special h4 {font-size: 36px;}
	.special .special-box p {font-size: 18px;}
    .ad h3 {font-size: 32px;}
    
    .brand h2 {font-size: 36px;}
    .brand h4 {font-size: 26px;}
    .brand p {font-size: 20px;}
    .brand .phonak {margin: 2% 2.5% 2% 4.3%;}
    .brand .oticon {margin: 2% 4.3% 2% 2.5%;}
    .brand .beltone {margin: 2% 2.5% 2% 4.3%;}
    .brand .widex {margin: 2% 4.3% 2% 2.5%;}

    .blog .blog-wrap {margin-bottom: 45px;}
    .blog .blog-wrap > div {width: 49%; margin-right: 2%; margin-bottom: 5%;}
    .blog .blog-wrap > div:nth-child(2n) {margin-right: 0;}
    .blog .notice-wrap .nw-left {float: none; width: 100%; margin-bottom: 8%;}
    .blog .notice-wrap .nw-right {float: none; width: 100%; height: auto;} 
}

@media (max-width: 900px){
    .contents {padding: 50px 0;}
	.contents h3 {font-size: 27px; padding-bottom: 35px;}
    .contents .contents-box .co-left img {padding-top: 80px;}
    .contents .contents-box .co-right p {font-size: 17px;}
	.order h3 {font-size: 28px; padding: 8px 12px; width: 470px; height: 42px; margin-left: 20%;}
	.special .special-box {width: 38%;}
}

@media (max-width: 768px){

	.banner {background-color: rgba(255,255,255,0.2);}
	.banner h2 {line-height: 40px;}
	.banner-img1 {background-size: 1600px;}
	.banner-img2 {background-size: 1600px;}
	.banner-img3 {background-size: 1600px;}
	.banner {height: 400px; padding: 150px 20px 0px 20px; text-align: center; position: relative; z-index: 10;}
	.banner:before {content: ''; width: 100%; height: 100%;
	  position: absolute; left: 0; top: 0; z-index: -1;}
	.banner h2 {font-size: 32px; line-height: 45px; color: #000;}
	.banner p {font-size: 19px; padding: 20px 0; color: #000;}
	.banner .view {margin-top: 20px; background: none; padding: 7px 32px;}
	.sbanner {overflow: hidden; padding: 25px 0;}
    .sbanner > div {/* text-align: center; width: 100%; margin-bottom: 30px; */}
    .sbanner > div h4 {font-size: 18px; padding-bottom: 4px;}
	.sbanner > div h4 i {padding-left: 8px;}
	.sbanner > div h4:hover {text-decoration: underline;}
	.sbanner > div p {font-size: 15px; color: #676767;}
	.contents h3 {display: none;}
	.contents .contents-box {}
	.contents .contents-box h3 {display: block; float: left; font-size: 25px; width: 50%; text-align: left; padding-top: 20px; color: #807ff3;}
	.contents .contents-box .co-left {float: left; border: none; width: 50%;  padding: 3px 0 0px 50px; }
	.contents .contents-box .co-left img {width: 230px; height: 290px; padding-top: 0; padding-bottom: 15px;}
	.contents .contents-box .co-right {float: left; width: 100%; padding-left: 0px; box-sizing: }
    .contents .contents-box .co-right p {color: #696969;}
    .logo {display: none;}
    .logom {display: block; text-align: center;}
    .logom img {width: 80%;}
    
    .review {padding: 40px 0;}
    .review h2 {font-size: 38px; padding-bottom: 30px;}
    .review >div {width: 29%; margin-right: 2%; margin-left: 2%;}
    .review img {width: 50%;}
    .review h4 {font-size: 19px;}
    .review em {font-size: 20px;}
    .review p {font-size: 18px;}
    
    .select {padding: 40px 0;}
	.select h3 {width: 42%; margin: 1%; padding: 3%; color: #fff;}
	.select > div {width: 38%; background-color: #2886ca; margin: 1%; padding: 3% 5%;}
    .price-pc {display: none;}
    .price-m img {display: block; width: 100%; height: 100%;}
    .order {padding: 50px 0;}
	.order h3 {font-size: 26px; padding: 5px 10px; width: 450px; height: 40px; margin-left: 14%;}
	.order .order-box {float: left; width: 44%; height: auto; padding: 1.5% 3%;}
	.order h4 {font-size: 19px;}
    .special {padding: 40px 15px;}
    .special h4 {font-size: 32px;}
	.infor {padding: 40px 0;}
	.infor h3 {font-size: 26px; line-height: 45px;} 
	.infor p {font-size: 17px;}
	/* br살리기 구상 .infor .infor-box .in-right li br {display} */
	.ad {padding:55px 0;}
	.ad h3 {font-size: 25px; padding-bottom: 20px;}
	.ad p {font-size: 17px;}
	.ad .view {font-size: 17px;  margin-top: 40px; padding: 10px 38px; } 
    
    .brand {padding: 50px 0;}
    .brand h2 {font-size: 32px;}
    .brand h4 {font-size: 22px;}
    .brand p {font-size: 19px;}
    .brand .phonak {margin: 2% 2% 2% 4.3%;}
    .brand .oticon {margin: 2% 4.3% 2% 2%;}
    .brand .beltone {margin: 2% 2% 2% 4.3%;}
    .brand .widex {margin: 2% 4.3% 2% 2%;}
    #layer { left: 50px; top: 120px; width: 270px; height: 270px;
    border: 5px box-shadow: 5px 5px 15px rgba(0,0,0,0.4);}
    #layer .link {position: absolute; right: 0px; bottom: 0px; font-size: 12px;}
    #layer .close {position: absolute; right:0px; top: 0px;}
    
}

@media (max-width: 600px){

    .banner {height: 280px;} 
	.banner h2 {font-size: 25px; line-height: 40px;}
	.banner p {font-size: 18px;}
	.banner-img1 {background-size: 1250px;}
	.banner-img2 {background-size: 1250px;}
	.banner-img3 {background-size: 1250px;}
	.sbanner {overflow: hidden; padding: 20px 0;}
	.sbanner > div {text-align: center; width: 95%; height: auto; margin-bottom: 20px;}
	.sbanner > div h4 {font-size: 19px;}
	.contents {padding: 20px 40px 30px 0;}
	.contents .contents-box {width: 100%; padding: 3px 20px 0 20px;}
	.contents .contents-box h3 {font-size: 22px; width: 100%; text-align: center; padding: 10px 0 25px 0 ; color: #807ff3;}
	.contents .contents-box h3 br {display: none;}
	.contents .contents-box .co-left {width: 100%;  padding: 0 50px 0 50px;}
	.contents .contents-box .co-left img {width: 100%; height: 100%;}
	.contents .contents-box .co-right {width: 100%;}
    .contents .contents-box .co-right p {font-size: 17px}
	.logom img {width: 100%;}
    
    .interview {overflow: hidden; padding: 30px 10px;}
    .interview h3 {font-size: 28px; text-align: center; padding-bottom: 15px;}
    
    .review {padding: 30px 0;}
    .review h2 {font-size: 28px; padding-bottom: 20px;}
    .review >div {width: 90%; margin-right: 5%; margin-left: 5%; margin-bottom: 15px;}
    .review img {width: 40%;}
    .review h4 {font-size: 19px;}
    .review em {font-size: 20px;}
    .review p {font-size: 16px;}
    
    .select {padding: 20px 0;}
	.select h3 {font-size: 24px; width: 38%; margin: 1%; padding: 5%; color: #fff;}
	.select h3 br {display: none;}
	.select > div {width: 38%; background-color: #2886ca; margin: 1%; padding: 3% 5%;}
	.select > div p {font-size: 16px;}
	.select > div br {display: none;}
	.select > div.simg1 {background: #2886ca url(../img/select-bg1.png) no-repeat 25% 90%; background-size: 60px;}
    .select > div.simg2 {background: #2886ca url(../img/select-bg2.png) no-repeat 25% 90%; background-size: 70px;}
    .select > div.simg3 {background: #2886ca url(../img/select-bg3.png) no-repeat 25% 90%; background-size: 70px;}
    .order {padding: 50px 10px;}
    .order h3 {font-size: 21px; padding: 3px 0; width: 100%; height: 38px; margin-left: 0; margin-bottom: 20px; line-height: 34px;}
    .order h4 {font-size: 18px;}
    .special {padding: 30px 10px;}
	.special h4 {font-size: 21px; margin-bottom: 15px;}
	.special .special-box {width: 90%; padding: 2% 2.5%;}
	.special .special-box p {font-size: 18px;}
    .infor {width: auto;}
    .infor h3 {font-size: 19px; line-height: 35px; padding-bottom: 15px;}
    .infor p {font-size: 16px; padding: 0 20px 35px;}
    .infor .infor-box {padding: 0px 0px;} 
    .infor .infor-box .in-left em {font-size: 20px;}
    .infor .infor-box .in-left strong {font-size: 24px;}
    .infor .infor-box .in-right li {font-size: 16px;}
    
    #map {width: 80%; height:300px; margin: 0 10% 30px;}
    .iw_inner { padding: 0 10px;}
    .iw_inner h3 {font-size: 20px; padding-top: 3px;}
    .iw_inner p {font-size: 15px;}

    
    .brand {padding: 50px 0;}
    .brand h2 {font-size: 23px; padding-bottom: 15px;}
    .brand h4 {font-size: 16px; padding-bottom: 20px;}
    .brand p {font-size: 16px;}
    .brand .phonak { width: 43.8%; margin: 2% 1% 1% 4%;}
    .brand .oticon {width: 43.8%; margin: 2% 4% 1% 1%;}
    .brand .beltone {width: 43.8%; margin: 1% 1% 2% 4%;}
    .brand .widex {width: 43.8%; margin: 1% 4% 2% 1%;}
    
    .blog {padding:40px 5px;}
    .blog h3 {font-size: 26px; margin-bottom: 30px;}
    .blog .blog-wrap {margin-bottom: 10px;} 
    .blog .blog-wrap > div {width: 100%; margin-right: 0%; margin-bottom: 5%;}
    .blog .blog-wrap > div h4 {font-size: 20px; padding: 10px 0 8px;}
    .blog .blog-wrap > div p {margin-bottom: 10px;}
    .blog .blog-wrap > div figure img {margin-bottom: 30px;}
    .blog .notice-wrap .nw-left h3 {font-size: 24px; margin-bottom: 10px;}
    .blog .notice-wrap .nw-right h3 {font-size: 24px; margin-bottom: 10px;}
    .blog .notice-wrap .nw-left li {overflow: hidden; padding: 17px 10px;}
    .blog .notice-wrap .nw-left li a {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .blog .notice-wrap .nw-right ul {padding: 20px 5px 20px 5px;}
    .blog .notice-wrap .nw-right ul li {padding: 8px 0; font-size: 16px;}
    .blog .notice-wrap .nw-right ul li span {margin-right: 10px; padding: 3px 6px;}
    #layer { left: 20px; top: 100px;}
} 

@media (max-width: 520px){
    .brand {padding: 50px 5px;}
    .brand h2 {font-size: 19px;}
    .brand h4 {font-size: 17px;}
    .brand p {font-size: 17px;}
    .brand .phonak { width: 85%; margin: 3% 6.8%;}
    .brand .oticon { width: 85%; margin: 3% 6.8%;}
    .brand .beltone { width: 85%; margin: 3% 6.8%;}
    .brand .widex { width: 85%; margin: 3% 6.8%;}
    
    .interview {overflow: hidden; padding: 25px 10px;}
    .interview h3 {font-size: 24px; text-align: center; padding-bottom: 10px;}
}

@media (max-width: 400px){
	.banner h2 {font-size: 24px; line-height: 45px;}
	.sbanner > div h4 {font-size: 18px; padding-bottom: 4px;}
	.select h3 {font-size: 22px; width: 88%; margin: 1%; padding: 5%; color: #fff;}
	.select > div {width: 88%; background-color: #2886ca; margin: 1%; padding: 3% 5%;}
	.select > div {height: auto;}
	.select > div.simg1 {background: none; background-color: #2886ca;}
    .select > div.simg2 {background: none; background-color: #2886ca;}
    .select > div.simg3 {background: none; background-color: #2886ca;}
    .order h3 {font-size: 22px;}
    .order h4 {font-size: 17px;}
    .order img {width: 70px; height: 70px;}
    .order .order-box {width: 98%; padding: 1.5% 1%;}
    .infor h3 {font-size: 19.5px;}
    .infor .infor-box .in-right li {font-size: 16px;} 
    .ad h3 {font-size: 24px ; padding-bottom: 20px;}
	.ad p {font-size: 16px;}
	.ad .view {font-size: 16px;}
	.blog .notice-wrap .nw-left li a {width: 75%;}
	.blog .notice-wrap .nw-left li span {width: 25%;}
    .blog .notice-wrap .nw-right ul {height: auto;}
	.blog .notice-wrap .nw-right ul li {text-align: center;}
	.blog .notice-wrap .nw-right ul li span {display: block; margin-right: 0;}

}
 
/* animation */
@keyframes updown {
 	0% {transform: translate(0);}
 	50% {transform: translate(0, -2px);}
 	100% {transform: translate(0, 2px);}
 }