html.show { overflow:hidden; }


.wrap { width:100%; }
.container { width:100%; max-width:1600px; margin: 0 auto; }

br.mobile { display:none; }



.header {  }
.header .container { display:flex; align-items:center; justify-content:space-between; }
.header .m_logo { width:270px; flex-shrink:0; }
.header .gnb {  }
.header .gnb .de1_ul { display:flex; gap:7.6rem; }
.header .gnb .de1_ul .de1_li { position:relative; }
.header .gnb .de1_ul .de1_li .de1_a { display:flex; align-items:center; justify-content:center; text-align: center; height:104px; font-size:2rem; color:#000; transition:all 0.3s; }
.header .gnb .de1_ul .de1_li .de2_ul { background:#f7f2f2; position:absolute; left:50%; top:104px; margin-left: -100px; padding: 20px 0; box-sizing:border-box; z-index:3; width:200px; display:none; }
.header .gnb .de1_ul .de1_li .de2_ul .de2_li {  }
.header .gnb .de1_ul .de1_li .de2_ul .de2_li .de2_a { display:block; font-size:1.8rem; color:#3a3a3a; padding:7px 10px; box-sizing:border-box; text-align: center; transition:all 0.3s; }

.header .gnb .de1_ul .de1_li.active .de1_a { color:var(--main_P1); font-weight: 600; }
.header .gnb .de1_ul .de1_li .de2_ul .de2_li .de2_a:hover { color:var(--main_P1); font-weight: 600; }

.header .iconSns { flex-shrink:0; display:flex; align-items:center; gap:5px; }
.header .iconSns li {  }
.header .iconSns li a {  }
.header .iconSns li.gray a {  }

.allGnb { display:none; }



.footer { position:relative; margin-top: 15rem; padding-bottom:100px; box-sizing:border-box; }
.footer:before { content:""; display:block; width:50%; height:100%; position:absolute; left:0; top:0; background:#50323f; }
.footer .container { display:flex; overflow: hidden; }
.footer .container > div { padding-top:9.2rem; padding-bottom: 9.2rem; box-sizing:border-box; }
.footer .container > div > .tit { font-size:5.6rem; color:#000; font-weight: 400; margin-bottom: 4rem; }
.footer .leftBox { flex:1; position:relative; z-index:2; padding-right: 12rem; }
.footer .leftBox > .tit { color:#fff !important; text-align: right; }
.footer .leftBox .formBox {  }

.footer .rightBox { flex:1; padding-left: 12rem; }
.footer .rightBox .infoBox { display:flex; flex-direction:column; gap:4px; }
.footer .rightBox .infoBox li { font-size:1.6rem; color:#000; font-weight: 300; }
.footer .rightBox .infoBox li strong { font-size:2rem; font-weight: 700; margin-bottom: 14px; display:block; }
.footer .rightBox .fnb { display:flex; align-items:center; margin: 5.6rem 0 3.8rem; }
.footer .rightBox .fnb li { display:flex; align-items:center; }
.footer .rightBox .fnb li:before { content:"|"; margin: 0 12px; font-size:16px; color:#666; }
.footer .rightBox .fnb li:first-child:before { display:none; }
.footer .rightBox .fnb li a { font-size:16px; color:#666; }
.footer .rightBox .snsIcon { display:flex; gap:10px; }
.footer .rightBox .snsIcon li {  }
.footer .rightBox .snsIcon li a {  }
.footer .rightBox .fLogo { margin: 4rem 0 0; mix-blend-mode: luminosity; }
.footer .rightBox .copyright { font-size:1.6rem; color:#666; margin-top: 11.8rem; }

.fixBanner { position:fixed; left:0; bottom:0; width:100%; height:100px; background:#222 url(../img/fix_img.png) left top no-repeat; z-index:3; }
.fixBanner .container { display:flex; align-items:center; justify-content:space-between; padding-left: 13rem; height:100%; }
.fixBanner .tit { font-size:3rem; color:#fff; font-weight: 400; }
.fixBanner .tit strong { color:var(--main_P1); font-weight: 700; }
.fixBanner .txt { font-size:1.8rem; color:#fff; line-height: 2.2rem; }
.fixBanner .txt strong { color:var(--main_P1); font-weight: 700; }
.fixBanner a { display:inline-flex; align-items:center; justify-content:center; text-align: center; border: 2px solid var(--main_P1); box-sizing:border-box; width:200px; height:52px; font-size:2rem; color:#fff; border-radius:1.5rem; transition:all 0.3s; }

.fixBanner a:hover { background:var(--main_P1); }


#bna .boxes .box.after .txt { background:var(--main_P1) !important; }
#bo_gall .gall_con .compare_box.after .label { background:var(--main_P1) !important; }



.subHead { height:850px; background-size:cover; background-position:center center; background-repeat:no-repeat; position:relative; }
.subHead.wrap.bg.s { display:none; }
.subHead .container { display:flex; align-items:center; justify-content:center; height:100%; }
.subHead .txtBox { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align: center; position:relative; z-index:2; }
.subHead .txtBox .txt { font-size:2.8rem; color:#fff; font-weight: 400; }
.subHead .txtBox .tit { font-size:4.6rem; color:#fff; font-weight: 700; margin-top: 2rem; }

.subHead:before { content:""; display:block; width:100%; height:100%; /*background:#fef6f1; opacity:0.7;*/ background:rgba(0, 0, 0, 0.3); position:absolute; left:0; top:0; z-index:1; }

.subHead.bg10 { background-image:url(../img/content/sub-head01.png); background-position: right top; }
.subHead.bg20 { background-image:url(../img/content/sub-head02.png); }
.subHead.bg30 { background-image:url(../img/content/sub-head03.png);  }
.subHead.bg40 { background-image:url(../img/content/sub-head04.png); }
/*.subHead.bg50 { background-image:url(../img/content/sub-head05.png); }*/

.subHead.s5010 { background-image:url(../img/content/sub-head05_1.png); }
.subHead.s5020 { background-image:url(../img/content/sub-head05_2.png); }
.subHead.s5030 { background-image:url(../img/content/sub-head05.png); }

.pointBox { background:url(../img/content/point_bg_new.png) center bottom no-repeat; background-size:cover; margin-bottom: -15rem; }
.pointBox .container { height:850px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align: center; }
.pointBox .titBox {  }
.pointBox .titBox .etit { font-size:1.6rem; color:#dadada; font-weight: 400; }
.pointBox .titBox .tit { font-size:3.6rem; color:#fff; font-weight: 400; margin-top: 2.6rem; }
.pointBox .titBox .tit strong { font-weight: 700; }

.pointBox .sqBox { display:flex; gap:9rem; margin-top: 8.6rem; }
.pointBox .sqBox li {  }
.pointBox .sqBox li .top { width:250px; height:180px; display:flex; align-items:center; justify-content:center; flex-direction:column; border: 2px solid #fff; box-sizing:border-box; gap:2.2rem; }
.pointBox .sqBox li .top .etit { font-size:14px; color:#dadada; }
.pointBox .sqBox li .top .tit { font-size:3rem; color:#fff; font-weight: 700; }
.pointBox .sqBox li .txt { font-size:1.8rem; color:#fff; line-height: 2.8rem; margin-top: 3.6rem; }


.Toggle02 { display:none; }


#top_btn {position:fixed;bottom:120px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5); transition:all 0.3s }
#top_btn:hover {border-color:var(--main_P1);background:var(--main_P1);color:#fff}


#bna .boxes .box .txt { font-size:2.2rem !important; height:60px !important; }




@media (max-width:1600px){

	.container { padding-left: 20px; padding-right: 20px; box-sizing:border-box; }

	.header .gnb .de1_ul { gap:6rem; }
	.header .gnb .de1_ul .de1_li .de1_a { font-size:1.8rem; }
	.header .iconSns li a { display:inline-block; font-size:0; width:40px; }
	
	.fixBanner { background:#222; }
	.fixBanner .container { padding-left: 20px; }
	
	.subHead { height:700px; }


}


@media (max-width:1400px){

	.header .m_logo { width:auto; }
	.header .gnb .de1_ul { gap:4rem; }
	.header .gnb .de1_ul .de1_li .de1_a { font-size:1.6rem; }
	.header .iconSns { gap:5px; }
	
	.footer .leftBox { padding-right: 7rem; }
	.footer .rightBox { padding-left: 7rem; }
	
	.fixBanner .txt { display:none; }
	
	.subHead { height:600px; }
	
	.pointBox .sqBox { gap:3rem; }
	.pointBox .sqBox li { flex:1; }
	.pointBox .sqBox li .top { width:100%; }
	
	
 
}


@media (max-width:1200px){
	
	.pointBox .sqBox li .txt br { display:none; }

}


@media (max-width:992px){

	.header .container { padding-top: 10px; padding-bottom: 10px; }
	.header .gnb,
	.header .iconSns li.sns { display:none; }
	.header .flex { display:flex; align-items:center; gap:2rem; }	
	
	.Toggle02 {  --front: var(--main_P1);  --back: #aaa;  --icon: white;  -webkit-tap-highlight-color: transparent; display:block; position:relative; z-index:5; }
	.Toggle02 .menu {	display:inline-block;	perspective: 600px;	width: 48px;	height: 48px;	position: relative;	cursor: pointer;}
	.Toggle02 .menu input {  display: none;}
	.Toggle02 .menu input + div span {  --rotateY: 0deg;  --background: var(--front);  transform: rotateY(var(--rotateY));  transform-style: preserve-3d;  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  border-radius: 50%;  background: var(--background);  -webkit-backface-visibility: hidden; backface-visibility: hidden;  transition: transform 0.6s cubic-bezier(0.2, 0.64, 0.48, 1.24);}
	.Toggle02 .menu input + div span:before, .menu input + div span:after {  --rotate: 0deg;  content: "";  position: absolute;  width: 16px;  height: 2px;  border-radius: 1px;  top: 50%;  left: 50%;  background: var(--icon);  -webkit-backface-visibility: hidden;          backface-visibility: hidden;  transform: translate(-50%, -50%) rotate(var(--rotate)) translateZ(6px);}
	.Toggle02 .menu input + div span:first-child {  --background: var(--back);}
	.menu input + div span:first-child:before {  --rotate: -45deg;}
	.Toggle02 .menu input + div span:first-child:after {  --rotate: 45deg;}
	.Toggle02 .menu input + div span:last-child {  --rotateY: 180deg;}
	.Toggle02 .menu input + div span:last-child:before {  box-shadow: 0 -5px 0 var(--icon), 0 5px 0 var(--icon);}
	.Toggle02 .menu input + div span:last-child:after {  display: none;}
	.Toggle02 .menu input:checked + div span:first-child {  --rotateY: -180deg;}
	.Toggle02 .menu input:checked + div span:last-child {  --rotateY: 0deg;}
	.Toggle02 .dribbble {  position: fixed;  display: block;  right: 20px;  bottom: 20px;}
	.Toggle02 .dribbble img {  display: block;  height: 28px;}
	
	.allGnb { display:flex; position:fixed; left:0; top:0; z-index:4; width:100vw; height:100vh; backdrop-filter: blur(3px); justify-content:end; align-items:start; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
	.allGnb .inner { width:100%; max-width:500px; height:100vh; background:#fff; box-shadow:0 -20px 20px 0 rgba(0, 0, 0, 0.3); padding:0 3rem 5rem; box-sizing:border-box; }
	.allGnb .inner .logo { text-align: center; padding:10px 2rem; box-sizing:border-box; height:84px; display:flex; align-items:center; justify-content:center; }
	.allGnb .inner .logo img { max-width:120px; }
	.allGnb .inner .tnbLink { display:flex; align-items:center; justify-content:center; text-align: center; margin: 1rem 0 2rem; }
	.allGnb .inner .tnbLink li { display:flex; align-items:center; }
	.allGnb .inner .tnbLink li:before { content:""; display:inline-block; width:1px; height:12px; margin: 0 2rem; background:#aaa; }
	.allGnb .inner .tnbLink li:first-child:before { display:none; }
	.allGnb .inner .tnbLink li a { font-size:1.8rem; color:#000; }
	.allGnb .inner .de1_ul {  }
	.allGnb .inner .de1_ul .de1_li { padding:1.4rem 0; box-sizing:border-box; }
	.allGnb .inner .de1_ul .de1_li .de1_a { font-size:2.4rem; color:#000; font-weight: 600; display:flex; align-items:center; justify-content:space-between; }
	.allGnb .inner .de1_ul .de1_li .de2_ul { padding-top: 1rem; box-sizing:border-box; }
	.allGnb .inner .de1_ul .de1_li .de2_ul .de2_li { padding:1rem 0; box-sizing:border-box; }
	.allGnb .inner .de1_ul .de1_li .de2_ul .de2_li .de2_a { font-size:2rem; color:#3a3a3a; font-weight: 400; padding:0 2rem; box-sizing:border-box; display:block; }
	
	/* .allGnb .inner .de1_ul .de1_li.li04 .de1_a {  }
	.allGnb .inner .de1_ul .de1_li.li04 .de1_a:after { content:"\f078"; font-family: "Font Awesome 5 Free"; font-weight: 600; font-size:1.6rem; color:#aaa; transition:all 0.3s; } */
	
	.allGnb.show { opacity: 1; visibility: visible; }
	/* .allGnb .inner .de1_ul .de1_li.li04 .de2_ul { display:none; }
	.allGnb .inner .de1_ul .de1_li.li04.active .de1_a:after { transform:rotateZ(180deg); } */
	
	
	.footer { margin-top: 10rem; }
	.footer:before { display:none; }
	.footer .container { flex-direction:column; padding-left: 0; padding-right: 0; }
	.footer .container > div { padding: 7rem 2rem !important; }
	.footer .leftBox { padding-right: 0; background:#50323f; }
	.footer .rightBox { padding-left: 0; }
	
	.footer .container > div > .tit { text-align: center; font-size:4.6rem; }
	.form_type form,
	.footer .rightBox .infoBox { align-items:center; }
	.footer .rightBox .infoBox { text-align: center; }
	.footer .rightBox .snsIcon,
	.footer .rightBox .fnb { justify-content:center; }
	.footer .rightBox .fLogo,
	.footer .rightBox .copyright { text-align: center; }
	.footer .rightBox .copyright { margin-top: 5rem; }
	
	.form_type .write_form li.inputLine_3 .inputBox .checkbox input { flex-shrink:0; }
	
	
	.subHead { height:500px; }
	.subHead .txtBox .tit { font-size:4rem; margin-top: 2rem; }
	.subHead .txtBox .txt { font-size:2.2rem; }
	
	
	
	.pointBox { margin-bottom: -10rem; }
	.pointBox .sqBox { gap:1rem; }
	.pointBox .sqBox li .top .tit { font-size:2.6rem; }
	
	
}


@media (max-width:768px){

	.footer { margin-top: 7rem; }
	.footer .container > div > .tit { font-size:4rem; }
	
	.subHead { height:400px; }
	
	
	.pointBox { margin-bottom: -7rem; }
	.pointBox .container { height:auto; padding-top: 10rem; padding-bottom: 10rem; }
	.pointBox .sqBox { flex-wrap:wrap; gap:5rem 2rem; margin-top: 5rem; }
	.pointBox .sqBox li { flex:unset; width:calc(50% - 1rem); }

}


@media (max-width:599px){
	
	.header .flex { gap:1rem; }
	.header .iconSns li { display:none; }
	.header .iconSns li.tel { display:block; }
	.header .iconSns li a { background:#222; display:flex; width:48px; height:48px; border-radius:50%; text-align: center; align-items:center; justify-content:center; }
	
	.fixBanner { height:60px; }
	.fixBanner .tit { font-size:2.4rem; }
	.fixBanner a { font-size:1.8rem; height:42px; width:170px; }
	
	#top_btn { bottom:70px; }
	
	
}	


@media (max-width:479px){

	.footer .container > div > .tit { font-size:3.4rem; }
	
	.subHead { height:300px; }
	

}