@charset "utf-8";

/*************************************************************************
* @ 서비스명   : commonui
* @ 파일명     : /css/commonui.css
* @ 페이지설명  : commonui.css
* @ 작성자     : 한주현 (pointweb)
* @ 작성일     : 2020-12-21
************************** 수정이력 **************************************
* 날짜                    작업자                  변경내용
* 2020-12-21             박이영                 최초작성
* 2021-03-20             한주현                 메인 게시판 퍼블리싱
**************************************************************************/


* {box-sizing: border-box;}
html{font-size:100px;}
body{overflow: inherit;}
body.on{overflow: hidden;}
.layout{margin:0 auto;width:100%;max-width:12.8rem;}
.layout2{margin:0 auto;width:100%;max-width:100%;}
.layout2.line{border-top:0.01rem solid #e1e1e1}
.layout3{position:relative; margin:0 auto;width:100%;max-width:14rem}
.sp-ico{background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 4.5rem;}
.slick-slide:focus{outline: 0;}
.mask{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8);z-index: 50;}

.checkbox-type1 input[type=checkbox] {position: absolute;display: inline-block;opacity: 0;}
.checkbox-type1 label {position: relative ;display: inline-block;padding-left:0.37rem;font-size:0.17rem;text-align: left;box-sizing: border-box;cursor: pointer;}
.checkbox-type1 label:before {content: "";position: absolute;top:0;left: 0;display: inline-block;width:0.25rem;height: 0.25rem;border-radius:100%;background:#ddd;}
.checkbox-type1 label:after {content: "";display: inline-block;position: absolute;top:0.05rem;left:0.09rem;width:0.05rem;height:0.09rem;border-right:0.02rem solid #fff;border-bottom: 0.02rem solid #fff;transform: rotate(45deg);}
.checkbox-type1 input[type=checkbox]:checked + label:before {background:#0f3057; }

.tab{font-size:0; margin-bottom:0.95rem; text-align:center;}
.tab a{position:relative; display:inline-block; font-size:0.21rem;color:#999; font-weight:500; padding:0 0.5rem;}
.tab a:after{display:block; content:""; position:absolute; top:0; right:0; background-color:#ccc; width:0.01rem; height:0.24rem; }
.tab a:last-child:after{display:none;}
.tab a em{display:inline-block; height:0.08rem; width:0.08rem; background-color:#ccc;border-radius:0.04rem; margin-right:0.1rem; margin-bottom:0.03rem;}
.tab a.active{ color:#222; font-weight:600}
.tab a.active em{background-color:#ffa41b;}

#quick{position: fixed;top:50%;transform: translateY(-50%);right:0.3rem;width:1.12rem; z-index:2;}
#quick a{position:relative;margin-top:-0.01rem;display:block;border:0.01rem solid #e1e1e1;background:#fff;font-size:0.16rem;color:#222;text-align: center;padding:0.65rem 0 0.18rem; }
#quick a:before{content:"";position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);display:inline-block;width:0.45rem;height:0.45rem;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 4.5rem;}
#quick a.kakao:before{top:30%;background-position: 0 -0.6rem;}
#quick a.discount:before{background-position: -0.45rem -0.6rem;}
#quick a.location:before{background-position: -0.9rem -0.6rem;}
#quick .gotop{position:relative;margin-top:0.2rcontent:"";position: absolute;top: 50%;lefem;display:block;width:100%;background:#fff; font-size:0;line-height: 0.58rem;border:0.01rem solid #e1e1e1;border-radius: 0.5rem; height:0.6rem;}
#quick .gotop:before{t: 50%;transform: translate(-50%, -50%);display:inline-block;width:0.3rem;height:0.3rem;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 4.5rem;background-position: 0 -0.3rem;}
header{position:fixed;width:100%;top:0;left:0;z-index:99;}
header .header-wrap{position:relative;margin:0 auto;max-width:100%;font-size:0;background:#fff;}
header .header-wrap:hover{background-color:#fff; transition: all 0.3s;}
header .header-wrap:hover .gnb-wrap .gnb li > a{color:#222;}
/* header .header-wrap:hover .logo{background: url(/_public/images/common/logo_2.svg) no-repeat;background-size: cover;} */
header .header-wrap:hover .lang a{color: rgba(0,0,0,0.5);}
header .header-wrap:hover .lang a.active{color:#253069; border-color:#253069;}
header .header-wrap .logo{position:absolute; width:2.08rem;height:0.55rem;transform: translateY(38%);z-index:10;background: url(/_public/images/common/logo.png) no-repeat;background-size:contain;}
header .header-wrap .gnb-wrap{max-width:12.8rem;margin:auto;}
header .header-wrap .gnb-wrap .gnb{position:relative; text-align:right; vertical-align:middle;}
header .header-wrap .gnb-wrap .gnb li{display:inline-block;vertical-align: middle;padding:0 2%;}
header .header-wrap .gnb-wrap .gnb li:nth-child(1) .dropdown{margin-left:-0.3rem;}
/* header .header-wrap .gnb-wrap .gnb li:nth-child(2) .dropdown{margin-left:-1.5rem;}
header .header-wrap .gnb-wrap .gnb li:nth-child(4) .dropdown{margin-left:0.65rem;}
header .header-wrap .gnb-wrap .gnb li:nth-child(6) .dropdown{margin-left:1.4rem;} */
header .header-wrap .gnb-wrap .gnb li > a{position:relative; display:block;color:#333;font-size:0.18rem;font-weight:500;line-height:0.95rem;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
header .header-wrap .gnb-wrap .gnb li:hover > a{color:#253069;}
header .header-wrap .gnb-wrap .gnb li.shop a{padding:0 0.25rem;color:#fff;border-radius: 0.25rem;background: #0f3057;line-height: 0.5rem;}
header .header-wrap .gnb-wrap .gnb li .dropdown{display:none;position:absolute;z-index:20; width:100%;left:0;}
header .header-wrap .gnb-wrap .gnb li .dropdown a{display:inline-block;margin-left:0.45rem;color:#888;font-weight:500;font-size:0.16rem;line-height: 0.8rem;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
header .header-wrap .gnb-wrap .gnb li .dropdown a:first-child{margin-left:0;}
header .header-wrap .gnb-wrap .gnb li .dropdown a:hover{color:#253069;}

header .header-wrap .gnb-wrap .gnb li > a:before {content: ""; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); bottom:0; width:0; height:0.03rem; background: #253069; -moz-transition: all 0.5s; -webkit-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
header .header-wrap .gnb-wrap .gnb li:hover > a:before,
header .header-wrap .gnb-wrap .gnb li.active > a:before{width:100%;height:0.03rem;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}

header .header-wrap .lang{position: absolute;top:0.35rem;right:0.3rem; font-size:0.18rem;}
header .header-wrap .lang a{font-size:0.15rem; font-weight:600; color:rgba(255,255,255,0.7); margin-left:0.2rem}
header .header-wrap .lang a.active{color:#fff; border-bottom:0.02rem solid #fff;}
header .nav-icon {position: absolute;top:0.28rem;right:0.2rem;display:none;width:0.4rem;height:0.25rem;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);cursor: pointer;z-index: 1000;}
header .nav-icon span {display: block;position: absolute;width: 100%;height:0.03rem;background:#333; opacity: 1;left:0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: 0.25s ease-in-out;-moz-transition: 0.25s ease-in-out;-o-transition: 0.25s ease-in-out;transition: 0.25s ease-in-out;}
header .nav-icon span:nth-child(1) {top: 0;}
header .nav-icon span:nth-child(2),
header .nav-icon span:nth-child(3) {top:65%}
header .nav-icon span:nth-child(4) {bottom: 0;display:none;}
header .nav-icon.open {position:absolute;top:0.15rem;z-index: 9999;}
header .nav-icon.open span {background: #222;}
header .nav-icon.open span:nth-child(1) {top:0;width: 0%;left: 50%;}
header .nav-icon.open span:nth-child(2),
header .nav-icon.open span:nth-child(3) {width:100%;}
header .nav-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
header .nav-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
header .nav-icon.open span:nth-child(4) {top: 0.18rem;left: 50%;width: 0%;}
header .gnb-bg{display:none;position: absolute;left:0;width:100%;height:0.8rem;background: #edeff5;z-index:10;}/*border-top:0.01rem solid #e1e1e1;border-bottom:0.01rem solid #e1e1e1;*/
header.scroll {background-color:#fff; border-bottom:0.01rem solid #e1e1e1}
header.scroll .header-wrap .logo{background: url(/_public/images/common/logo.png) no-repeat;background-size:contain;}
header.scroll .header-wrap .gnb-wrap .gnb li > a{display:block;color:#222;}
header.scroll .header-wrap .lang a{color:rgba(0,0,0,0.5);}
header.scroll .header-wrap .lang a.active{color:#b22106;border-color:#b22106; }

footer{background: #141517;clear:both;overflow:hidden;color:#6b727f;font-size:0.16rem;padding:0.3rem 0 0.32rem;}
footer .layout{position:relative;}
footer ul:nth-child(1) {float:left;}
footer .flt-right {float:right;text-align:right;overflow:hidden;}
footer .flt-right ul {float:left;}
footer .flt-right ul:nth-child(2) {margin-left:0.5rem;}
footer ul li:nth-child(1) {margin-bottom:0.2rem;}

#main{padding-top:0.95rem;}
#main .view{display:block; position:relative; font-size:0.17rem; font-family:"Poppins"; font-weight:600; color:#222; padding-left:0.56rem; width:2rem;}
#main .view:before{display:block; content:""; position:absolute;  top:0.12rem; left:0; width:0.4rem; height:0.02rem; background-color:#b22106}
#main .hgroup{text-align: center;}
#main .hgroup h3{font-size:0.36rem;}
#main .hgroup p{margin-top:0.1rem;color:#555;font-size:0.18rem;}
#main .hgroup span{display: inline-block;margin-left:0.4rem;font-size:0.18rem;color:#555;font-weight:400;}
#main .section01{position: relative;}
#main .section01 .slick-slide{position: relative;height:7.9rem;}
#main .section01 .item01{background: url(/_public/images/main/main.jpg) 50% 100% no-repeat; background-size:cover;}

#main .section01 .slick-slide .inner-box{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:100%;max-width:12.8rem;}
#main .section01 .slick-slide .inner-box .txt-box{position: absolute;top:50%;transform: translateY(-50%);padding-bottom:0;}
#main .section01 .slick-slide .inner-box .txt-box em{display:block;color:#111;font-size:0.22rem;font-weight:800; letter-spacing:0.02rem;}
#main .section01 .slick-slide .inner-box .txt-box .tit{font-size:0.48rem;color:#fff;line-height:1.2;font-weight:800;}
#main .section01 .slick-slide .inner-box .txt-box .tit span {font-size: 0.36rem;font-weight:600;}
#main .section01 .slick-slide .inner-box .txt-box .txt{margin-top:0.4rem;color:#fff;font-size:0.2rem;line-height:1.6;}
#main .section01 .controls{max-width:14.4rem;position: absolute;left:16%;bottom:27%;text-align: left;font-size:0;transform: translateX(-50%);}
#main .section01 .controls .dots-wrap{display: inline-block;vertical-align: middle;}
#main .section01 .controls .buttons{display: inline-block;vertical-align: middle;position: relative;top:0.01rem;}
#main .section01 .controls .buttons button{display:none;font-size:0;width:0.35rem;height:0.35rem;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 3.15rem;vertical-align: middle;}
#main .section01 .controls .buttons button.pause{display:inline-block;background-position: 0 0}
#main .section01 .controls .buttons button.play{background-position: -0.35rem 0}
#main .section01 .slick-dots li{display:inline-block;margin:0 0.07rem;width:0.12rem;height:0.12rem;}
#main .section01 .slick-dots li button{font-size:0;width:100%;height:100%;background:#fff;border-radius: 100%;}
#main .section01 .slick-dots li.slick-active button{background:#b22106;}

#main .txt-box{padding-bottom:1rem;}
#main .main-tit {font-size:0.48rem;color:#253069;margin-bottom:0.35rem;font-weight:800;}
#main p {font-size:0.2rem;}

#main .product {padding:1rem 0;text-align:center;overflow:hidden;}
#main .product ul{font-size:0;}
#main .product ul li {display:inline-block;vertical-align: top;width:23%;margin:0 1%;border:0.01rem solid #253069;position:relative;background:#fff;transition:all 0.3s;padding:0.2rem;}
#main .product ul li:hover {background:url(/_public/images/main/hook_on.jpg);box-shadow:1px 1px 16px 3px rgba(0,0,0,0.25)}
#main .product .img-box-in {width:100%;height:100%;display: block;}
#main .product .img-box-in img {position:relative;top:12%;width: 85%;}
#main .product .hook-tit {color:#253069;font-size:0.2rem;font-weight:600;position:relative;top:0.4rem;}
#main .product .hook-txt {color:#666;font-size: 0.18rem;position:relative;top:0rem;position:relative;}
#main .product .hook-txt:before {content:"";position:relative;top: 0.61rem;left:30%;display: inline-block;height: 0.5rem;background: url(/_public/images/main/main_hook_plus.png) no-repeat;margin-right:0.1rem;width: 100%;}
#main .product ul li:hover .hook-tit {color:#fff;}
#main .product ul li:hover .hook-txt {color:#fff;}
#main .product ul li:hover .hook-txt:before {background:url(/_public/images/main/main_hook_plus_on.png) no-repeat;}

#main .more-info {padding:1rem 0;text-align:center;background:url(/_public/images/main/more_info_bg.jpg) no-repeat;background-size:cover;}
#main .more-info .main-tit, #main .more-info p {color:#fff;}
#main .more-info a {display:inline-block;padding:0.23rem 0.87rem;color:#fff;background:url(/_public/images/main/info_icon01.png) no-repeat 30% 50% #253069;font-size:0.24rem;font-weight:500;}
#main .more-info a:hover {background:url(/_public/images/main/info_icon02.png) no-repeat 30% 50%#fff;color:#253069;font-weight:800;transition:all 0.3s;}

#main .contact {padding:1rem 0;overflow:hidden;}
#main .contact .con-left {width:49%;margin-right:2%;float:left;}
#main .contact .con-left .txt-box2 {margin-bottom:1.3rem;}
#main .contact .con-left ul li {clear: both;margin-bottom: 0.2rem;overflow: hidden;position: relative;font-size:0;}
#main .contact .con-left ul li img, #main .contact .con-left ul li p {display:inline-block;vertical-align: middle;}
#main .contact .con-left ul li img {margin-right:0.2rem;}
#main .contact .con-left ul li p {font-size:0.18rem;}
#main .contact .con-left ul li.mb0 {margin-bottom:0;}
#main .contact .con-right {width:49%;float:left;padding-top:1.2rem;}
#main .contact .con-right .con-form{font-size:0;}
#main .contact .con-right .con-name,
#main .contact .con-right .con-num,
#main .contact .con-right .con-mail,
#main .contact .con-right .con-message {border:0.01rem solid #ccc;background:#edeff5;color:#253069;font-size:0.16rem;font-weight:500;margin-bottom:0.2rem;box-sizing:border-box;height: 0.5rem;display: inline-block;}
#main .contact .con-right .con-name {width:100%;}
#main .contact .con-right .con-num {display:inline-block;width:49%;margin-right:2%;}
#main .contact .con-right .con-mail {display:inline-block;width:49%;}
#main .contact .con-right .con-message{height: 100%;padding:0;}
#main .contact .con-right .con-message textarea {width:100%;height:1.55rem;clear:both;padding:0.2rem;background:#edeff5;border:0;resize: none;}
#main .contact .con-right .con-name input[type="text"]{padding:0 0.2rem;height: 0.5rem;width:100%;}
#main .contact .con-right .con-num input[type="text"]{padding:0 0.2rem;height: 0.5rem;width:100%;}
#main .contact .con-right .con-mail input[type="text"]{padding:0 0.2rem;height: 0.5rem;width:100%;}
#main .contact .con-right .con-message textarea{}
#main .contact .con-right div img, #main .contact .con-right div p {float:left;}
#main .contact .con-right div img {margin:0.1rem 0.1rem 0 0;}
#main .contact .con-right div p {font-size:0.16rem;color:#253069;}
#main .contact .con-right div a {float:right;display:inline-block;padding:0.12rem 0.48rem;font-size:0.18rem;font-weight:800;color:#fff;background:#253069;}

/*product list*/
.product {width:100%;padding-top:1rem;display:flex;flex-wrap:wrap;}
.product .list-box {position: relative;display:inline-block;width:21%;margin:2% 2% 1rem;vertical-align: top;}
.product .mr0 {margin-right:0;}
.product .list-box .img-box {position:relative;border:0.01rem solid #253069;padding:0.2rem;}
.product .list-box .img-box1 {position:relative;}
.product .list-box .img-box .img-active {position:absolute;;top:0;left:0;z-index:10;opacity:0;width:100%;height:100%;}
.product .list-box > a:hover .img-active {opacity:1;transition:all 0.3s;}
.product .list-box .img-box img {width:100%;height: 100%;display:block;}
.product .list-box .list-txt {font-size:0.24rem;font-weight:600;color:#333;text-align:center;padding-top:0.21rem;}
.product .list-box .list-txt span {font-size:0.18rem;font-weight:500;color:#253069;}
.product .list-box .list-txt2 {padding-top:0.25rem;}

/*product in*/
.product2 {width:8rem;margin:auto;padding:1rem 0;text-align:center;}
.product2 .p-tit-box {margin-bottom:0.4rem;}
.product2 .p-tit {font-size:0.36rem;font-weight:600;color:#333;}
.product2 .p-tit span {font-size:0.24rem;color:#253069;font-weight:500;}
.product2 .p-img-box {border:0.01rem solid #253069;margin-bottom:0.4rem;}
.product2 table {width:100%;}
.product2 table th {padding:0.14rem 0;font-size:0.2rem;background:#dadee6;border:0.01rem solid #253069;}
.product2 table td {font-size:0.2rem;border:0.01rem solid #253069;}
.product2 table .tbl-tit {background:#253069;color:#fff;}
.product2 table .tbl-tit1 {width:20%;border-right:0.01rem solid #fff;}
.product2 table .tbl-tit2 {width:80%;}
.product2 table .tbl-bg1 {background:#ecf0f9;}
.product2 .more-btn {display:inline-block;padding:0.2rem 0.5rem;font-size:0.2rem;font-weight:500;margin-top:0.4rem;color:#253069;background:url(/_public/images/main/info_icon02.png) no-repeat 15% 50% #fff;border:0.01rem solid #253069;}
.product2 .more-btn:hover {background:url(/_public/images/main/info_icon01.png) no-repeat 15% 50% #253069;color:#fff;transition:all 0.3s;}
.product2 .tbl-caption {font-size:0.18rem;text-align:left;padding-top:0.1rem;}

/*contact us*/
.contact {padding:1rem 0;overflow:hidden;}
.contact .con-left {width:49%;margin-right:2%;float:left;}
.contact .con-left .txt-box2 {margin-bottom:1.3rem;}
.contact .con-left .txt-box2 .tit{    font-size: 0.48rem;
    color: #253069;
    margin-bottom: 0.35rem;
    font-weight: 800;}
.contact .con-left .txt-box2 .txt{    font-size: 0.2rem;}
.contact .con-left ul li {clear: both;margin-bottom: 0.2rem;overflow: hidden;position: relative;font-size:0;}
.contact .con-left ul li img, .contact .con-left ul li p {display:inline-block;vertical-align: middle;}
.contact .con-left ul li img {margin-right:0.2rem;}
.contact .con-left ul li p {font-size:0.18rem;}
.contact .con-left ul li.mb0 {margin-bottom:0;}
.contact .con-right {width:49%;float:left;padding-top:1.2rem;}
.contact .con-right .con-form{font-size:0;}
.contact .con-right .con-name,
.contact .con-right .con-num,
.contact .con-right .con-mail,
.contact .con-right .con-message {border:0.01rem solid #ccc;background:#edeff5;color:#253069;font-size:0.16rem;font-weight:500;margin-bottom:0.2rem;box-sizing:border-box;height: 0.5rem;display: inline-block;}
.contact .con-right .con-name {width:100%;}
.contact .con-right .con-num {display:inline-block;width:49%;margin-right:2%;}
.contact .con-right .con-mail {display:inline-block;width:49%;}
.contact .con-right .con-message{width:100%;height: 100%;padding:0;}
.contact .con-right .con-message textarea {width:100%;height:1.55rem;clear:both;padding:0.2rem;background:#edeff5;border:0;resize: none;}
.contact .con-right .con-name input[type="text"]{padding:0 0.2rem;height: 0.5rem;width:100%;}
.contact .con-right .con-num input[type="text"]{padding:0 0.2rem;height: 0.5rem;width:100%;}
.contact .con-right .con-mail input[type="text"]{padding:0 0.2rem;height: 0.5rem;width:100%;}
.contact .con-right .con-message textarea{}
.contact .con-right div img, .contact .con-right div p {float:left;}
.contact .con-right div img {margin:0.1rem 0.1rem 0 0;}
.contact .con-right div p {font-size:0.16rem;color:#253069;}
.contact .con-right div a {float:right;display:inline-block;padding:0.12rem 0.48rem;font-size:0.18rem;font-weight:800;color:#fff;background:#253069;}


.page-top{}
.page-top .visual{position: relative;padding-top:3.2rem;margin-top:0.9rem;}
.page-top .visual.sub01{background:url(/_public/images/contents/visual01.jpg) 50% 50% no-repeat; background-size: cover;}
.page-top .visual.sub02{background:url(/_public/images/contents/visual02.jpg) 50% 50% no-repeat; background-size: cover;}
.page-top .visual.sub03{background:url(/_public/images/contents/visual03.jpg) 50% 50% no-repeat; background-size: cover;}
/* .page-top .visual.sub04{background:url(/_public/images/contents/visual04.png) 50% 50% no-repeat; background-size: cover;}
.page-top .visual.sub05{background:url(/_public/images/contents/visual05.png) 50% 50% no-repeat; background-size: cover;}
.page-top .visual.sub06{background:url(/_public/images/contents/visual06.png) 50% 50% no-repeat; background-size: cover;} */
.page-top .visual .layout{height: 100%;}
.page-top .visual .layout .title-group{position:absolute; top:50%; left:50%; transform:translate(-50%,-40%); text-align:center;}
.page-top .visual .layout .title-group h3{color:#fff;font-size:0.16rem;font-weight:600;}
.page-top .visual .layout .title-group p{color:#fff;font-size:0.48rem; font-weight:600;}
.page-top .visual.sub05 .layout .title-group h3{color:#fff;}
.page-top .visual.sub05 .layout .title-group p{color:#fff;}
.page-top .navigator{border-bottom:0.03rem solid #e1e1e1;padding:0.24rem 0;}
.page2 .page-top .navigator{display:none;}
.page-top .navigator .layout{font-size:0;}
.page-top .navigator .layout .menu{font-size:0.2rem; text-align:center;display:flex;}
.page-top .navigator .layout .menu a{color:#adadad;display:inline-block;width:25%;}
.page-top .navigator .layout .menu a:before {content:"";display:block;position:relative;top:0.55rem;left:0;width:100%;height:0.03rem;background:#253069;opacity:0;}
.page-top .navigator .layout .menu a:hover {color:#253069;font-weight:600;}
.page-top .navigator .layout .menu a.active {color:#253069;font-weight:600;}
.page-top .navigator .layout .menu a.active:before, .page-top .navigator .layout .menu a:hover:before {content:"";display:block;position:relative;top:0.55rem;left:0;width:100%;height:0.03rem;background:#253069;opacity:1;transition:all 0.3s;}
/* .page-top .navigator .layout .menu a.active:before {content: ""; display: inline-block; position: absolute; bottom:0; left: 50%; transform: translateX(-50%); top:0.48rem; width:120%; height:0.03rem; background: #b22106;} */
#pages{}
#pages .page-tit{margin-bottom:0.75rem; text-align: center;font-size:0.42rem;font-weight:600;}
#pages .contents{padding:1.2rem 0;}
#pages .contents2{padding-bottom:0}

#pages .sub-tit2{position:relative; font-size:0.3rem; color:#222; font-weight:500; height:0.63rem; margin-bottom:0.95rem;}
#pages .sub-tit2:after{display:block; content:""; position:absolute; top:0.6rem; left:0; width:0.45rem; height:0.03rem; background-color:#222}


.contents h2{font-size:0.28rem; text-align:center; margin-bottom:0.4rem; word-break:keep-all}
.contents h2 span{color:#b22106}
.contents h2.con-title{position:relative; text-align:left; padding-left:0.5rem; font-family:"Poppins";}
.contents h2.con-title2{margin-bottom:0.2rem;}
.contents h2.con-title:before{position:absolute; content:""; display:block; top:0.18rem; left:0; width:0.35rem; height:0.03rem; background-color:#b22106}

/*company*/
.introduce{overflow:hidden;}
.introduce .com-left, .introduce .com-right {float:left;}
.introduce .com-left {width:48%;margin-right:3%;}
.introduce .com-right {width:49%;}
.introduce .com-right p.com-tit {font-size:0.28rem;color:#253069;font-weight:800;margin:0.2rem 0 0.4rem;line-height:1.4;}
.introduce .com-right p {font-size:0.2rem;line-height:2;}

/*contact banner*/
.contact-banner {width:100%;padding:1rem 0;background:url(/_public/images/common/contact_banner_bg.jpg) no-repeat;background-size:cover;text-align:center;color:#fff;}
.contact-banner p {font-size:0.2rem;line-height:1.8;font-weight:400;}
.contact-banner .con-banner-btn {display:inline-block;padding:0.12rem 0.4rem;font-size:0.25rem;font-weight:600;border:0.01rem solid #fff;color:#fff;margin-top:0.5rem;}
.contact-banner .con-banner-btn:hover {background:#fff;color:#253069;transition:all 0.3s;}

/* tablet */
@media all and (max-width: 1024px){
	html{font-size:100px;}
	.layout{padding:0 0.3rem;}
	header{padding:0.1rem 0.2rem;height: 0.75rem;background:#fff;}
	header .header-wrap .logo{position: fixed; transform: none; top:0.2rem; left:0.2rem;background-size:100%; width:1.4rem; height:0.4rem;}
	header .nav-icon{display: inline-block;}
	header .header-wrap{position: fixed;top: 0;right:-100%;margin: 0;padding:0.75rem 0 0;width:100%;height: 100vh;background: #fff;z-index: 500;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
	header .header-wrap.active{right:0; overflow-y:auto;}
	header .header-wrap.active .logo{display:none;}
	header .header-wrap .lang{right:inherit; left:0; tOp:0.24rem;}
	header .header-wrap .lang a{color:rgba(0,0,0,0.5);}
	header .header-wrap .lang a.active{color:#b22106;}
	header .header-wrap .lang a.active{border-bottom:#b22106;}
	header .header-wrap:hover .logo{background: url(/_public/images/common/logo.svg) no-repeat;    background-size: cover;}
	header .header-wrap .gnb-wrap .gnb{overflow-y:auto;margin:0;display:block;height:100%;border-top:0.01rem solid #e1e1e1;}
	header .header-wrap .gnb-wrap .gnb li{display:block;padding:0;}
	header .header-wrap .gnb-wrap .gnb li > a{position:relative;padding:0 0.4rem;font-size:0.2rem;border-bottom:0.01rem solid #e1e1e1;line-height:0.75rem; color:#222;text-align: left;}
	header .header-wrap .gnb-wrap .gnb li .dropdown a:hover{transform:none;}
	header .header-wrap .gnb-wrap .gnb li > a:after{content: "";position:absolute;top:0.18rem;right:0.3rem;display:inline-block;width:0.35rem;height:0.35rem;background:url(/_public/images/@draft/sp_ico.png) no-repeat;background-size:3.15rem;background-position:0rem -0.35rem;}
	header .header-wrap .gnb-wrap .gnb li > a:before{display:none;}
	header .header-wrap .gnb-wrap .gnb li.depth2 > a:after{}
	header .header-wrap .gnb-wrap .gnb li.depth2 > a.on:after{background-position:-0.35rem -0.35rem;}
	header .header-wrap .gnb-wrap .gnb li.shop a{background:#fff;border-radius:0;padding:0 0.4rem;color:#222;font-size:0.2rem;border-bottom:0.01rem solid #e1e1e1;line-height: 0.75rem;}
	header .header-wrap .gnb-wrap .gnb li.shop a:after{background-position: -2.25rem -0.6rem;}
	header .header-wrap .gnb-wrap .gnb li .dropdown{position:relative;background:#f5f5f6; padding:0.2rem 0; border-bottom:0.01rem solid #e1e1e1}
	header .header-wrap .gnb-wrap .gnb li .dropdown a{display:block;margin:0;padding:0.1rem 0.5rem;font-size:0.18rem;line-height: normal;}
	header .header-wrap .gnb-wrap .gnb li:nth-child(1) .dropdown,
	header .header-wrap .gnb-wrap .gnb li:nth-child(2) .dropdown,
	header .header-wrap .gnb-wrap .gnb li:nth-child(3) .dropdown,
	header .header-wrap .gnb-wrap .gnb li:nth-child(4) .dropdown,
	header .header-wrap .gnb-wrap .gnb li:nth-child(6) .dropdown{margin:0;}
	header.scroll .nav-icon span{background:#222;}
	header.scroll .header-wrap:hover .logo{background: url(/_public/images/common/logo_2.svg) no-repeat;    background-size: cover;}

	footer{}
	footer .layout{padding:0 0.2rem;}
	footer nav{border-bottom:0.01rem solid #555; padding:0.3rem 0;}
	footer .sns{display:none;}
	footer .flt-right {float:left;text-align:left;margin-top:0.3rem;}
	footer .layout ul li img {width:50%;}

	.page-top .navigator{overflow-x:auto;white-space: nowrap;border:none;}
	.page-top .navigator .layout .menu {flex-wrap:wrap;}
	.page-top .navigator .layout .menu a {width:50%;margin:0;font-size:0.28rem;padding:0.2rem;background: #efefef;border: 0.01rem solid #fff;}
	.page-top .navigator .layout .menu a:hover {background:#fff;}
	.page-top .navigator .layout .menu a.active:before, .page-top .navigator .layout .menu a:hover:before {height:0.05rem;}


	#main{padding-top:0.75rem;}
	#main .view{font-size:0.16rem;}
	#main .hgroup h3{font-size:0.32rem;}
	#main .section01 .slick-slide .inner-box{padding:0 0.3rem;}
	#main .section01 .controls{left:13%;}
	#main .section02{padding:1rem 0.3rem;}
	#main .section02 .main-company{display:block;}
	#main .section02 .main-company > div{width:100%}
	#main .section02 .main-company div.txt-box .txt-box-in{position:relative; font-size:0; max-width:100%; margin-left:0; padding-right:0; transform:none; margin-bottom:0.8rem;}
	#main .section02 .main-company div.txt-box .txt-box-in h3{width:50%; display:inline-block;}
	#main .section02 .main-company div.txt-box .txt-box-in p{width:50%; display:inline-block;vertical-align:top; padding-top: 0.05rem; font-size:0.17rem; }
	#main .section02 .main-company div.txt-box .txt-box-in .view{position:absolute; bottom:15%; left:50%; margin-top:0;}
	#main .section02 .main-company div.img-box{height:4.3rem;}
	#main .section03{padding:1rem 0.3rem;}
	#main .section03 .main-service{display:block; position:relative;}
	#main .section03 .main-service div.service-box{width:100%; padding-top:3.4rem;}
	#main .section03 .main-service div.service-txt{width:100%; margin:0; position:absolute; top:0; left:0;}
	#main .section03 .main-service div.service-txt .txt-wrap{width:100%; position:relative; top:0; left:0; transform:none;}
	#main .section03 .main-service div.service-txt .txt-wrap p{font-size:0.17rem;}
	#main .section03 .main-service div.service-txt .txt-wrap .view{margin-top:0.4rem;}
	#main .section03 .main-service div.service-box a{padding:23% 5% 10%;}
	#main .section04{}
	#main .section04	.slick-slide{}
	#main .section04 .single-item2 .slick-prev:before,
	#main .section04 .single-item2 .slick-next:before{}
	#main .section04 .single-item2 .slick-prev{left:inherit; right:0.77rem;}
	#main .section04 .item .txt-box{text-align:center;}
	#main .section04 .item .txt-box em{margin-bottom:0.2rem; margin-left:auto; margin-right:auto; font-size:0.17rem; width:1rem;}
	#main .section04 .item .txt-box h3 span{font-size:0.18rem; margin-bottom:0.3rem;}
	#main .section04 .item .txt-box h3 p{font-size:0.42rem; margin-bottom:0;}
	#main .section04 .item .txt-box .txt{width:100%; padding:0 1rem; font-size:0.17rem;}
	#main .section04 .item .txt-box .txt br{display:none;}
	#main .section04 .item .txt-box{padding:0;position:relative; top:0; left:0; transform:none;}
	#main .section04 .item .txt-box .txt{font-size:0.17rem; word-break:keep-all; margin-bottom:0.4rem;}
	#main .section04 .item .txt-box a.view{margin:0 auto; text-align:left; width:1.4rem;}
	#main .section04 .item .img{padding:0; width:100%; padding:0 10%; margin-top:0.4rem;}
	#main .section04 .item .img img{width:100%;}
	#main .section04 .item .txt-box{padding:0 0.3rem;}
	#main .section04 .single-item2 .slick-next{left:inherit; right:0.3rem;}
	#main .section05{padding:1rem 0.3rem;}
	#main .section05 .hgroup span{display:block; margin-left:0; margin-top:0.1rem;}
	#main .section05 .slick-track{left:-2.35rem;}
	#main .section05 .slick-slide {margin:0 0.1rem;}
	#main .section05 .slick-slide a{padding:0.4rem 0.3rem;}
	#main .section05 .slick-prev{left:inherit;right:0.47rem;}
	#main .section05 .slick-next{left:inherit;right:0;}
	#main .section05 .main-notice{margin-top:0.35rem}
	#main .section05 .view{right:1.2rem; top:1.5rem;}
	#main .section05 .slick-slide.slick-active.slick-center .txt{height:1.7rem;}
	#main .section06{padding:0 0.3rem 1rem 0.3rem}
	#main .section06 .media{display:block;justify-content: normal; }
	#main .section06 .media a{width:100%; display:block;}
	#main .section06 .media a:nth-child(1){margin-bottom:0.2rem;}

	#main .layout {/* width:80%; */margin:auto;padding:0 0.3rem;}
	#main .contact {padding:0.5rem 0;}
	#main .section01 .slick-slide .inner-box .txt-box {top: 1.6rem;left:1rem;}
	#main .txt-box {padding-bottom:0.5rem;}
	#main .product {padding:0.5rem 0 0.2rem 0;}
	#main .product .img-box {}
	#main .product ul li {width:44%;margin:2%;}
	#main .more-info {padding:0.8rem 0;}
	#main .contact .con-left, #main .contact .con-right {width: 100%;margin: auto;/* clear: both; */float: none;}
	#main .contact .con-left .txt-box2 {margin-bottom:0.5rem;}
	#main .contact .con-right {padding-top:0.5rem;}
	#main .contact .con-right div a {margin-top:0.5rem;float:none;display:
	block;text-align: center;}
	#main .contact .con-right div p{float: none;}

	/* .page-top .navigator .layout .menu a {font-size: 0.28rem;margin: 0;width: 50%;padding: 0.2rem 0;} */

	/*product*/
	.product {margin:auto;padding-top: 0.5rem;}
	.product .list-box {width:46%;}
	.product .list-box .list-txt {font-size:0.4rem}
	.product .list-box .list-txt span {font-size:0.28rem;}

	/*contactus banner*/
	.contact-banner {padding:0.5rem;background:url(/_public/images/common/contact_banner_bg.jpg) no-repeat 50% 50%;background-size: cover;}
	.contact-banner p {font-size:0.28rem;}

	.contact .con-left,	.contact .con-right {width: 100%;margin: auto;/* clear: both; */float: none;}
	.contact .con-left .txt-box2 {margin-bottom:0.5rem;}
	.contact .con-right {padding-top:0.5rem;}
	.contact .con-right div a {margin-top:0.5rem;float:none;display:
	block;text-align: center;}
	.contact .con-right div p{float: none;}

	#pages{}
	.contents .layout2{/*padding-left:0.2rem; padding-right:0.2rem;*/}
	.page-top .visual .layout2{padding:0.2rem;}
	/* .page-top .navigator .layout .menu a{margin:0.24rem 5%;} */

	.introduce .com-left, .introduce .com-right{float: none;width:100%;}
	.introduce .com-left img{width:100%;}
}

/* mobile */
@media all and (max-width: 640px){
	html{font-size:50px;}
	.sp-ico{background-size: 9rem;}
	.checkbox-type1 label{line-height: 0.5rem;padding-left:0.7rem;}
	.checkbox-type1 label:before{width: 0.5rem;height: 0.5rem;}
	.checkbox-type1 label:after{top: 0.1rem;left: 0.16rem;width: 0.1rem;height: 0.18rem;border-width:0.04rem;}
	.tab a{font-size:0.26rem; margin-bottom:0.1rem;}

	header{}
	header{padding:0.2rem 0.4rem;height:1.3rem;}
	header .header-wrap{padding:1.3rem 0 0;}
	header .header-wrap .lang{top:0.44rem; left:0.3rem;}
	header .header-wrap .lang a{font-size:0.28rem; margin-right:0.2rem;}
	header .header-wrap .gnb-wrap .gnb{border-width:0.02rem; overflow-y:auto; height:10rem;}
	header .header-wrap .gnb-wrap .gnb li > a{font-size:0.34rem;line-height: 1.3rem;border-width:0.02rem;}
	header .header-wrap .gnb-wrap .gnb li > a:after{top:0.44rem;}
	header .header-wrap .gnb-wrap .gnb li.shop a{font-size:0.34rem;line-height: 1.3rem;border-width:0.02rem;}
	header .header-wrap .gnb-wrap .gnb li .dropdown{}
	header .header-wrap .gnb-wrap .gnb li .dropdown a{padding: 0.2rem 0.6rem;font-size: 0.3rem;text-align: left;}
	header .header-wrap .logo{position: fixed;top:0.3rem;left:0.4rem;width:2.6rem;height: 0.74rem;}
	header .nav-icon{display: inline-block;width:0.6rem;height:0.3rem;top:0.5rem;right: 0.4rem;}
	header .nav-icon span{height:0.06rem;}
	header .nav-icon.open{top:0.36rem;}

	footer{padding:0.4rem 0;}
	footer .layout{padding:0 0.4rem;}
	footer nav{border-width:0.02rem; padding-bottom:0.2rem; padding-top:0;}
	footer nav a{font-size:0.28rem; margin:0 0.2rem;padding:0.2rem 0;}
	footer nav a:first-child{margin-left:0;}
	footer address br{display:none;}
	footer address span{display:block;font-size:0.28rem;margin:0.1rem 0 0;}
	footer .copyright{padding-bottom:0.1rem; font-size:0.26rem; margin-top:0.4rem;}

	.contents .layout2{/*padding-left:0.4rem; padding-right:0.4rem;*/}
	.contents h2.con-title:before{height:0.04rem; top:0.2rem;}

	#main{}
	#main p{font-size:0.3rem;}
	#main .section01 .slick-slide .inner-box .txt-box{top:50%;}
	#main .hgroup h3{font-size:0.48rem;}
	#main .hgroup p{font-size:0.3rem;display:none;}
	#main .product .hook-tit{font-size:0.26rem;margin-top:0.2rem;}
	#main .section01 .controls{left:18%; bottom:15%;}
	#main .section01 .controls .buttons{top:0.02rem;}
	#main .section01 .controls .buttons button{width:0.7rem;height:0.7rem;background-size: 6.3rem;}
	#main .section01 .controls .buttons button.pause{background-position: 0 0}
	#main .section01 .controls .buttons button.play{background-position: -0.7rem 0}
	#main .section01 .slick-dots li{width:0.24rem; height:0.24rem;}
	#main .section01 .slick-slide .inner-box .txt-box .tit{font-size: 0.65rem;line-height: 0.6rem;}
	#main .section01 .slick-slide .inner-box .txt-box .txt{font-size:0.32rem;}
	#main .section02 .main-company div.txt-box .txt-box-in h3{width:100%; font-size:0.48rem;}
	#main .section02 .main-company div.txt-box .txt-box-in p{width:100%; font-size:0.3rem; line-height:normal;}
	#main .section02 .main-company div.txt-box .txt-box-in .view{position:relative; bottom:0; left:0; margin-top:0.5rem; font-size:0.26rem; }
	#main .view:before{height:0.04rem; top:0.15rem;}
	#main .section03 .main-service div.service-txt .txt-wrap h3{font-size:0.48rem;}
	#main .section03 .main-service div.service-txt .txt-wrap p{font-size:0.3rem; word-break:keep-all}
	#main .section03 .main-service div.service-txt .txt-wrap .view{position:relative; bottom:0; left:0; margin-top:0.5rem; font-size:0.26rem;}
	#main .section03 .main-service div.service-box{display:block; padding-top:5rem;}
	#main .section03 .main-service div.service-box a{padding: 40% 10% 20%;}
	#main .section03 .main-service div.service-box a em{width:1.1rem; height:1.1rem; }
	#main .section03 .main-service div.service-box a p{font-size:0.3rem;}
	#main .section03 .main-service div.service-box a p strong{font-size:0.38rem;}
	#main .section04 .single-item2 .slick-prev,
	#main .section04 .single-item2 .slick-next{width:0.75rem; height:0.75rem; }
	#main .section04 .single-item2 .slick-prev{left:inherit; right:1.03rem;}
	#main .section04 .item .txt-box em{font-size:0.28rem; width:1.6rem; height:0.6rem; line-height:0.6rem; margin-bottom:0.6rem;}
	#main .section04 .item .txt-box h3 p{font-size:0.54rem;}
	#main .section04 .item .txt-box h3 span{font-size:0.32rem;}
	#main .section04 .item .txt-box .txt{font-size:0.3rem; line-height:normal; padding:0 0.2rem;}
	#main .section04 .item .txt-box a.view{position:relative; bottom:0; left:0; margin-top:0.5rem; font-size:0.26rem; width:1.9rem;}
	#main .section04 .item .img{margin-top:0.8rem; padding:0 5%;}
	#main .section05:before{height:6rem;}
	#main .section05 .hgroup span{font-size:0.3rem;}
	#main .section05 .slick-next{width:0.75rem; height:0.75rem;}
	#main .section05 .slick-prev{width:0.75rem; height:0.75rem; right:0.73rem;}
	#main .section05 .view{position:relative; bottom:inherit; top:0.5rem; left:0; font-size:0.26rem; width:1.9rem;}
	#main .section05 .main-notice{margin-top:0;}
	#main .section05 .slick-slide h3{font-size:0.3rem; height:0.9rem;}
	#main .section05 .slick-slide .txt{font-size:0.28rem; height:1.2rem;}
	#main .section05 .slick-slide .date{font-size:0.24rem; font-weight:500;}
	#main .section05 .slick-track{padding-top:1.2rem;left:0;}
	#main .section05 .slick-slide {margin:0 0.2rem;}
	#main .section05 .slick-slide a{padding:0.4rem;}
	#main .section05 .slick-slide.slick-active.slick-center .txt{height:1.9rem;}
	#main .section06 .media a:nth-child(1){margin-bottom:0.4rem;}
	#main .section06 .media a{font-size:0rem; padding:0.5rem;}
	#main .section06 .media a strong{font-size:0.3rem;}
	#main .section06 .media a em{top:0.56rem;}
	#main .more-info a{background-size:0.22rem; }
	#main .contact .con-left ul li{position:relative;padding-left:0.6rem;}
	#main .contact .con-left ul li img{position: absolute;left:0;max-width:0.4rem;}
	#main .contact .con-left ul li p{font-size:0.26rem;}
	#main .contact .con-right .con-name, #main .contact .con-right .con-num, #main .contact .con-right .con-mail, #main .contact .con-right .con-message{height: 1rem;border-width:0.02rem;}
	#main .contact .con-right .con-message textarea{height: 3.1rem;}
	#main .contact .con-right .con-message{height: 100%;}
	#main .contact .con-right .con-name input[type="text"]{height: 1rem;}
	#main .contact .con-right .con-num input[type="text"]{height:1rem;}
	#main .contact .con-right .con-mail input[type="text"]{height:1rem;}
	#main .contact .con-right div p{float: none;font-size:0.3rem;}
	#main .contact .con-right div a{    margin-top: 0.5rem;
    float: none;
    display: block;
    text-align: center;
    line-height: 0.6rem;font-size: 0.3rem;}

	#pages{}
	#pages .contents{padding:0.6rem 0rem;}
	#pages .contents2{padding-bottom:0;}
	#pages .sub-tit2{font-size:0.36rem;}
	#pages .sub-tit2:after{top:0.7rem; height:0.04rem;}
	.page-top .visual{padding-top:4.5rem;}
	.page-top .visual .layout .title-group h3{font-size:0.24rem;}
	.page-top .visual .layout .title-group p{font-size:0.5rem;}
	.page-top .navigator{padding:0.34rem 0;margin: auto;}
	.page-top .navigator .layout .menu{}
	/* .page-top .navigator .layout .menu a{font-size:0.28rem; margin:0.24rem 3%; } */
	.page-top .navigator .layout .menu a.active:before{top:0.7rem; width:110%;}

	#pages .page-tit{font-size:0.46rem; margin-bottom:0.6rem;}
	.introduce .com-right p.com-tit{font-size:0.3rem;}
	.introduce .com-right p{font-size: 0.26rem;}

	/* .contents h2{font-size:0.34rem; text-align:center;}
	th, td{padding:0.14rem; padding:0.2rem 0;}
	.tab{display:flex; justify-content:space-between; flex-wrap: wrap; padding:0 0.2rem;}
	.tab a{font-size:0.3rem; width:49%; padding:0; background-color:#f7f7f7; padding:0.2rem;}
	.tab a.active{background-color:#b22106; color:#fff;}
	.tab a:after{display:none;} */
	.contact .con-left ul li{position:relative;padding-left:0.6rem;}
	.contact .con-left ul li img{position: absolute;left:0;max-width:0.4rem;}
  .contact .con-left ul li p{font-size:0.26rem;}
  .contact .con-left .txt-box2 .txt {font-size:0.3rem}
  .contact .con-left .txt-box2 .txt br {display:none;}
	.contact .con-left p br {display:none;}
	.contact .con-right .con-name, .contact .con-right .con-num, .contact .con-right .con-mail, .contact .con-right .con-message{height: 1rem;border-width:0.02rem;}
	.contact .con-right .con-message textarea{height: 3.1rem;}
	.contact .con-right .con-message{height: 100%;}
	.contact .con-right .con-name input[type="text"]{height: 1rem;}
	.contact .con-right .con-num input[type="text"]{height:1rem;}
	.contact .con-right .con-mail input[type="text"]{height:1rem;}
	.contact .con-right div p{float: none;font-size:0.3rem;}
	.contact .con-right div a{margin-top: 0.5rem;float: none;display: block;text-align: center;line-height: 0.6rem;font-size: 0.3rem;}
}
@media all and (max-width: 320px){
#main .section05 .slick-slide.slick-active.slick-center{background-color:#fff; }
#main .section05 .slick-slide.slick-active.slick-center h3{color:#222}
#main .section05 .slick-slide.slick-active.slick-center .txt{color:#666; height:1.2rem;}
#main .section05 .slick-slide.slick-active.slick-center .date{color:#888}

}