/*pad*/

img {
    max-width: 100%;
}

.gh {
    height: 24px;
    width: 24px;
    position: absolute;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
    -webkit-transition: all 0.5s cubic-bmezier(0.7, 0, 0.3, 1) 0s;
    -ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
    cursor: pointer;
    z-index: 9999;
    display: none;
}

.selected .gh {
    transform: rotate(90deg);
}

.gh a {
    background-color: #fff;
    display: block;
    margin: 0 auto;
    height: 2px;
    margin-top: -1px;
    position: relative;
    top: 50%;
    transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
    -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
    -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
    width: 100%;
    border-radius: 2px;
}

.gh a:after {
    width: 100%;
}

.gh a:before {
    width: 100%;
}

.gh a:after,
.gh a:before {
    background-color: #fff;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
    -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
    -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
}

.gh a:after {
    top: 7px;
}

.gh a:before {
    top: -7px;
}

.selected .gh a:after,
.selected .gh a:before {
    top: 0;background: #fff;
}

.selected .gh a:before {
    transform: translateY(0px) rotate(-45deg);
    -webkit-transform: translateY(0px) rotate(-45deg);
    -ms-transform: translateY(0px) rotate(-45deg);
    width: 100%;
}

.selected .gh a:after {
    transform: translateY(0px) rotate(45deg);
    -webkit-transform: translateY(0px) rotate(45deg);
    -ms-transform: translateY(0px) rotate(45deg);
    width: 100%;
}

.selected .gh a {
    /* background-color: transparent !important; */
	background: #111;
}
@media only screen and (max-width:1920px) {
	html{
		font-size: 1vw;
	}
}

@media only screen and (max-width:1024px) {
	html{
		font-size: 16px;
	}
	.gh{
		display: block;position: static;
		margin-left: 20px;
	}
	h2{
		font-size: 20px !important;line-height: 1.6;
	}
	h3{
		font-size: 18px !important;line-height: 1.6;
	}
	h4{
		font-size: 16px !important;line-height: 1.6;
	}
	p,
	h5,
	h6{
		font-size: 14px !important;line-height: 1.6;
	}
	.header .naver ul{
		position: absolute;
		left: 0;right: 0;
		top: 100%;display: block;
		background: #000;
		display: none;
	}
	.header .naver h3 a{
		justify-content: space-between;
		font-size: 16px;
		padding: 0 15px;
	}
	.naver li:last-child{
		padding: 10px;
	}
	.naver li:last-child h3 a{
		margin: 0 15px;width: 100px;
		text-align: center;
		margin: 0 auto;
	}
	.header .naver ul li{
		margin: 0;border-bottom: 1px solid rgba(255,255,255,0.1);
	}
	.header{
		background: rgba(0,0,0,1);
		height: 60px;padding: 0;
	}
	.header .wrap{
		height: 100%;
	}
	.wrap{
		width: auto;
		padding: 0 15px;
	}
	.logo img{
		height: 36px;
	}
	.banner{
		height: 120vw;min-height: 0;
	}
	.banner .txt h3 i{
		font-size: 20px;margin: 0 10px;
	}
	.banner .txt h3{
		margin-bottom: 25px;
	}
	.banner .txt{
		padding: 0 15px;
	}
	.flexbtn a i{
		width: 140px;line-height: 40px;
	}
	.flexbtn a span{
		height: 40px;width: 40px;
	}
	.flexbtn a span img{
		width: 12px;
	}
	.scroll{
		right: 10px;
	}
	.pad100{
		padding: 40px 0;
	}
	.hsection .flexicontxt{
		margin-top: 20px;
	}
	.flexicontxt ul li{
		width: 100%;margin: 0 0 15px 0;border-radius: 10px;
		padding: 20px;
	}
	.flexicon img{
		width: 40px;margin-right: 15px;
	}
	.flexicontxt li .txtp{
		margin-top: 10px;
	}
	.ticon img{
		height: 100px;
	}
	.boricop ul{
		margin: 20px 0 0;
	}
	.boricop ul li{
		margin: 0 0 10px 0;
	}
	.hsection2 .flextxpic{
		margin-top: 20px;
	}
	.flextxpic{
		display: block;
	}
	.flextxpic ul{
		width: auto;
	}
	.flextxpic li{
		padding: 20px;border-radius: 10px;
	}
	.flextxpic .pic{
		margin: 20px 0 0;
		padding: 20px;
		border-radius: 10px;
	}
	.tit h4{
		margin-top: 15px;
	}
	.hsection3 .pictxtul{
		margin-top: 20px;
	}
	.pictxtul ul{
		display: block;
	}
	.pictxtul ul li{
		width: auto;
		margin: 0 0 15px 0;
	}
	.pictxtul li a{
		border-radius: 10px;
		padding: 20px;
	}
	.pictxtul li .icon i{
		width: 40px;height: 40px;
	}
	.pictxtul li .icon i img{
		width: 12px;
	}
	.pictxtul li .icon>img{
		border-radius: 10px;
	}
	.pictxtul li .flexicon{
		margin: 20px 0 10px;
	}
	.footer{
		padding-top: 30px;
	}
	.footer .flex{
		display: block;
	}
	.footer .rt{
		width: auto;
	}
	.footer .rt .logo img{
		height: 30px;margin-bottom: 20px;
	}
	.footer .nav li a{
		margin-bottom: 15px;
	}
	.footer .lt h3{
		display: none;
	}
	.footer .lt h6{
		margin-top: 20px;
	}
	.footer .lt .linebt{
		font-size: 20px;
		margin-top: 15px;
	}
	.footer .lt ul{
		margin-top: 20px;
	}
	.copyright{
		padding: 25px 0;
	}
	.wbanner{
		height: 60vw;
	}
	.layout{
		padding-top: 60px;
	}
	.quntit{
		height: 100px !important;
	}
	.ulicotxt ul{
		display: block;
		margin: 15px 0 0;
	}
	.ulicotxt li{
		width: auto;
		margin: 0 0 10px 0;border-radius: 10px;
		padding: 20px;
	}
	.ulicotxt li img{
		height: 40px;
	}
	.ulicotxt li h4{
		margin: 15px 0;
	}
	.ulicotxt li:nth-child(3n+2){
		margin-top: 0;
	}
	.principlebor2{
		margin-top: 20px;border-radius: 10px;padding: 20px;
	}
	.principlebor2 ul li{
		margin-bottom: 10px;
	}
	.flextxpic li p{
		margin-top: 15px;
	}
	.principlebor2 .pic img{
		margin-top: 20px;
	}
	.piflisticon{
		padding: 30px 0;display: block;
	}
	.piflisticon .pic{
		width: auto;border-radius: 10px;
		padding: 25px ;
	}
	.piflisticon ul{
		width: auto;
		margin: 20px 0 0;display: block;
	}
	.piflisticon ul li{
		width: 100%;margin: 0 0 10px 0;border-radius: 10px;
		padding: 20px;
	}
	.piflisticon ul li:nth-child(2n) {
	    transform: translateY(0);
	}
	.piflisticon ul li h4{
		margin: 15px 0;
	}
	.piflisticon ul{
		padding-bottom: 0;
	}
	.delivery .th ul{
		margin: 20px 0 0;
		display: block;
	}
	.delivery .th ul li{
		width: auto;
		margin: 0 0 10px;
		background: #ddfdfc !important;
		padding: 20px !important;
		text-align: center;border-radius: 10px;
	}
	.delivery .th ul li img{
		width: 40px;height: 40px;
		margin: 0 auto;
	}
	.quanitem{
		padding: 20px 0;
	}
	.quanitem ul{
		display: block;
	}
	.quanitem li{
		width: auto;
		margin: 0 0 10px !important;
		display: block !important;
		background: #ddfdfc !important;
		padding: 20px !important;border-radius: 10px;
	}
	.quanitem li h4{
		width: auto;
		display: block;
		margin: 0;
	}
	.quanitem .ul1 li h4::before{
		display: none;
	}
	.quanitem h3{
		position: static;
		margin: 20px 0;
		height: 100px;
	}
	.quanitem .ul2{
		margin: 0;
	}
	.quanitem li .ico{
		position: static !important;
		margin: 10px auto !important;
	}
	.quanitem .ul2 li{
		padding: 0;
	}
	.quanitem .ul2 .ico::before{
		display: none;
	}
	.quanitem li p{
		margin: 15px 0;
	}
	.quanitem li h4{
		line-height: 50px;
	}
	.hsection5 .quanitem{
		background: none !important;padding-bottom: 0;
	}
	.hsection10 .flex{
		display: block;
	}
	.hsection10 .flex .txt{
		width: auto;padding: 20px;border-radius: 10px;
		margin: 0;
	}
	.hsection10 .flex img{
		margin: 20px 0 0;
	}
	.hsection11{
		background-size: 100% auto !important;
		background-color: #effdfd !important;
	}
	.hsection11 .th ul{
		display: block;
	}
	.hsection11 .th ul li{
		width: auto;
		background: #ddfdfc;
		border-radius: 10px;
		overflow: hidden;
	}
	.hsection11 .th .arhd{
		padding: 20px;height: auto;
		background: none !important;
	}
	.hsection11 .item{
		background: none;
		border-top: 1px solid rgba(0,0,0,0.02);
		padding: 20px;
	}
	.hsection11 .th .arhd img{
		width: 40px;height: 40px;
	}
	.hsection11 .th .arhd h4{
		margin-top: 10px;
	}
	.hsection11 .tb{
		margin-top: 30px;
	}
	.hsection4 .flextxpic{
		margin-top: 20px;display: block;
	}
	.hsection4 .flextxpic ul{
		display: block;
	}
	.hsection4 .flextxpic ul li{
		width: auto !important;
		margin: 0 0 10px 0!important;
	}
	.hsection5{
		background-size: 100% auto !important;
		background: none !important;
		background-color: #effdfd !important;
	}
	.hsection6 .wrap{
		display: block;
	}
	.hsection6 .tit{
		width: auto;margin: 0;
	}
	.hsection6 .flextxpic ul{
		width: auto;
		margin-top: 20px;
	}
	.hsection6 .flextxpic ul li{
		padding: 20px;border-radius: 10px;
		margin-bottom: 10px;
	}
	.future{
		margin-top: 30px;padding: 0 15px;
	}
	.hsection5 .tit.wh h2{
		color: #333;
	}
	.future ul{
		margin-top: 20px;display: block;
	}
	.future ul li{
		width: auto;border-radius: 10px;
		padding: 20px;
		background: #ddfdfc !important;
	}
	.future ul li h4{
		color: #333;margin-bottom: 10px;
	}
	.wbanner .txt h3{
		margin-top: -40px;
	}
	.hsection7{
		background-size: 100% auto !important;
		background: none !important;
		background-color: #effdfd !important;
	}
	.picullist{
		margin-top: 20px;display: block;
	}
	.picullist .pic{
		width: auto;border-radius: 10px;min-height: 300px;
		padding: 20px;
	}
	.picullist .rt{
		margin: 20px 0 0;
	}
	.picullist .rt li i{
		width: 52px;height: 52px;line-height: 52px;
		font-size: 12px;margin: 0 auto 10px;
	}
	.picullist .rt li .txt h5{
		margin: 0;font-size: 16px !important;line-height: 1.4;
		margin-bottom: 10px;
	}
	.picullist .rt li{
		display: block;
		background: none;
		background: #ddfdfc !important;
		padding: 20px;border-radius: 10px;
	}
	.hsection8{
		padding: 30px 0;
	}
	.hsection8 .flextxpic{
		margin-top: 20px;
	}
	.hsection8 .flextxpic ul{
		display: block;
	}
	.hsection8 .flextxpic ul li{
		margin: 0 0 10px 0 !important;
		width: auto;
	}
	.hsection9{
		background-size: 100% auto !important;
		background: none !important;
		background-color: #effdfd !important;
	}
	.hsection9 .flex{
		display: block;
	}
	.hsection9 .flex h3{
		width: auto;text-align: center;
	}
	.hsection9 .flex .pic{
		border-radius: 10px;
		padding: 20px;
		width: auto;
		margin-top: 15px;
	}
	.hsection9 ul{
		margin-top: 20px;display: block;
	}
	.hsection9 ul li{
		width: auto;border-radius: 10px;
		margin: 0 0 10px 0;padding: 20px;
	}
	.hsection9 ul li dd{
		margin-left: 0;
	}
	.hsection9 ul li dd p{
		margin-left: 20px;
	}
	.future2{
		background: none !important;
	}
	.future2 ul li p{
		color: #666;
	}
	.future2 ul li{
		margin-bottom: 10px;margin-top: 0;
	}
	.future ul li img{
		display: none;
	}
	.active .header{
		padding: 0;
	}
	.header .naver h3 a{
		border-radius: 0;
	}
	.header .naver li:last-child h3 a{
		border-radius: 50px;
	}
	
	
	
}