@media (min-width:769px) and (max-width:1200px) { .pc{ display: none !important; }

    .wrap {
        width: 80.48vw;
    }
    
    /* header */

    header {
        position: fixed;
        width: 100%;
        height: 5rem;
        overflow: hidden;
        z-index: 10;
    }

    header.active {
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        transition: 0.5s;
    }

    header .wrap {
        height: 5rem;
        display: flex;
        align-items: center;
    }

    header .wrap h1 {
position: absolute;
        left: 50%;
        transform: translate(-50%);
        float: none;
        top: 30%;
    }

    header.active h1 img {
        display: none;
    }

    header.active h1 {

        margin-left: 0;
        width: 160px;
        height: 28px;
        background: url('../images/n-logo.png') no-repeat;
    }

#menu-container { position: absolute; top: 0; }
#menu-wrapper { overflow: hidden; max-width: 55px; cursor: pointer; z-index: 999; }
#menu-container .accordion { width: 100%; height: 100%; background: #333; }
#menu-wrapper #hamburger-menu { position: relative; width: 25px; height: 20px; margin: 15px; }
#menu-wrapper #hamburger-menu span { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; left: 0; display: block; width: 100%; height: 2px; border-radius: 10px; color: black; background-color: #fff; position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; }
    
header.active #menu-wrapper #hamburger-menu span { background: #333; }
    
#menu-wrapper #hamburger-menu span:nth-child(1) { top: 0; }
#menu-wrapper #hamburger-menu span:nth-child(2) { top: 9px; }
#menu-wrapper #hamburger-menu span:nth-child(3) { top: 18px; }
#menu-wrapper #hamburger-menu.open span:nth-child(1) { top: 9px;  -webkit-transform: rotate(135deg); transform: rotate(135deg); }
#menu-wrapper #hamburger-menu.open span:nth-child(2) { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; left: -60px; }
#menu-wrapper #hamburger-menu.open span:nth-child(3) { top: 9px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

#menu-container .menu-list .menu-submenu { padding: 0; }
#menu-container .menu-list .menu-submenu li a { display: block; padding: 10px 0 10px 20px; }
#menu-container .menu-list .menu-submenu li a:hover { background: #eee; }
#menu-container .menu-list { padding-left: 0; display: block; position: absolute; width: 100%; max-width: 450px;
box-shadow: rgba(100, 100, 100, 0.2) 6px 2px 10px; z-index: 999; overflow-y: auto; overflow-x: hidden; left: -100%;
background: #333; }
#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login { font-size: 16px; padding: 20px; text-transform: uppercase; border-top: 1px solid #dbdcd2; }
#menu-container .menu-list li:first-of-type { border-top: 0; }
.accordion-toggle, .accordion-content { cursor: pointer; font-size: 16px; position: relative; }
.accordion-content { display: none; }
.accordion-toggle a:before, .accordion-toggle a:after { content: ''; display: block; position: absolute; top: 50%; right: 30px; width: 15px; height: 2px; margin-top: -1px; background-color: #5a5858;  -webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.3s; transition: all 0.3s ease-out; }
.accordion-toggle a:before { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 1; z-index: 2; }
    
#product--main { height: 300px;  }
#product--main div { position: relative; width: 100%; height: 300px; margin: 0 auto; overflow: hidden; }
#product--main div h3 { text-align: center; font-size: 2.4rem; color: #fff; font-weight: 400; padding-top: 12.5rem; }
#product--main div p { text-align: center; font-size: 1.4rem; color: #fff; font-weight: 200; margin-top: 2rem; padding: 0 2rem;}
#product--main div img { filter: brightness(50%); position: absolute; top: 0; z-index: -1; }


#product-cont1 { height: 700px; text-align: center; }
#product-cont1 h3 { padding-top: 10rem; font-size: 2.4rem; }
#product-cont1 h3:after { content: ""; width: 5rem; height: 8px; background: #161351; position: absolute; top: 16rem; left: 50%; transform: translate(-50%); }
#product-cont1 p { font-size: 1.8rem; padding-top: 6rem; }
#product-cont1 span { display: inline-block; font-size: 1.6rem; padding-top: 3rem; } 
#product-cont1 .product-icon-bg  { position: relative; margin-top: 10rem; width: auto; }
} 
#product-cont1 .product-icon-bg > .mob { display: none; }
#product-cont1 .product-icon-bg .note { display: block; margin: 0 auto; }
#product-cont1 .product-icon-bg .icon-box { margin-top: 8rem; width: auto; height: auto; position: absolute; top: 0; left: 50%; transform: translate(-50%); display: flex; justify-content: center; align-items: center; }
#product-cont1 .product-icon-bg .wrap .icon-box .icon { float: left; margin-right: 30px; height: 140px; }
#product-cont1 .product-icon-bg .wrap .icon-box .icon4 { margin-right: 0; }
#product-cont1 .product-icon-bg .wrap .icon-box .icon dt { display: block; width: 14rem; height: 14rem; border: 3px solid #fff;  border-radius: 100%; }
#product-cont1 .product-icon-bg .wrap .icon-box .icon dt img { margin-top: 2rem; width: 50%; }
#product-cont1 .product-icon-bg .wrap .icon-box .icon dd { color: #fff; font-size: 1.2rem; margin-top: -5rem; }

#product-cont2 {  margin-top: 10rem; }
#product-cont2 p { font-weight: 500; text-align: center; font-size: 2.8rem; margin: 6rem 0; }
#product-cont2 p:after { content: ""; width: 10px; height: 10px; border-radius: 10px; background: #161351; position: absolute; left: 50%;  transform: translate(-50%); margin-top: -2rem; }
#product-cont2 .article { width: 48%; height: 214px; border: 1px solid #333; border-radius: 6px; margin-right: 2rem; margin-top: 2rem; float: left; }
#product-cont2 .article:nth-child(3) {margin-right: 0; }
#product-cont2 .article:last-child { margin-right: 0; }
#product-cont2 .article dt { margin-top: -1px; width: 100%; height: 38px; background: #161351; border-radius: 6px; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; }
#product-cont2 .article dd { margin-top: 1.6rem; padding-left: 3rem; font-size: 1.4rem; }
#product-cont2 .article dd i { display: block; width: 5px; height: 5px; background: #161351; position: relative; top: 1.3rem; left: -1.3rem; }

#product-cont3 {  }
#product-cont3 p { font-weight: 500; text-align: center; font-size: 2.4rem; }
#product-cont3 p:after { content: ""; width: 10px; height: 10px; border-radius: 10px; background: #161351; position: absolute; left: 50%;  transform: translate(-50%); margin-top: -2rem; }
#product-cont3 img { width: 100%; display: block; margin: 0 auto; margin-top: 3rem; }

#product-cont4 { position: relative; }
#product-cont4 p { font-weight: 500; text-align: center; font-size: 2.4rem; }
#product-cont4 p:after { content: ""; width: 10px; height: 10px; border-radius: 10px; background: #161351; position: absolute; left: 50%;  transform: translate(-50%); margin-top: -2rem; }
#product-cont4 img { margin-left: -5rem; float: left; margin-top: 14rem; width: 55%; }
#product-cont4 strong { font-size: 1.8rem; display: block; margin: 10rem 0 2rem 0; }
#product-cont4 .features table {  width: 50%;  border-collapse: collapse;  line-height: 1.5;  border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc;  margin: 5px 0; text-align: center; } 
#product-cont4 .features table  tbody th { width: 50%; padding: 1.2rem 1rem; font-size: 1.6rem; text-align: center; }
#product-cont4 .features table  tbody td { width: 50%; padding: 1.2rem 1.5rem; font-size: 1.6rem; text-align: center; }
#product-cont4 .features table .even { background: #efefef; }    

    
#product-cont5 { height: 300px; }