@charset "utf-8";

/*------------------------------------
	sub common 
------------------------------------*/

#max_contanier {position: relative; z-index:0;}
.inner {margin:0 auto; max-width:1750px;}

#max_contanier[role=sub] .inner{max-width:1500px;}

@media (max-width: 1680px) {
	.inner{max-width:100%; width: auto; padding:0 5%;}
}

@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 768px) { 

}

/*------------------------------------
 About
-------------------------------------*/ 
#max_contanier #about {position: relative;}
#max_contanier #about .about_wrap {width: 100%; position: relative; display:flex; }
.about_wrap .title_area {position:sticky; top:0; width: 40%; background-color:var(--gray1); height: 100vh;display: flex; flex-direction: column;   justify-content: center; align-items: center;}
.about_wrap .title_area .scrolldown {position: absolute; left:-5%; top:50%; opacity:.5; transform: rotate(270deg );display:flex; align-items: center;} 
.about_wrap .title_area .scrolldown span {font-size: .6em; letter-spacing:.5em;	}
.about_wrap .title_area .scrolldown i {transform: rotate(90deg ); margin-right:2rem;}
.about_wrap .title_area .title_box {width: 50%; display: flex; align-items: flex-start; font-size: 3.5em;}
.about_wrap .title_area .title_box h2 {font-family: var(--font);font-weight: 200;}
.about_wrap .title_area .cate_menu_box {width: 50%;margin-top:10rem; }
.about_wrap .title_area .cate_menu_box ul {}
.about_wrap .title_area .cate_menu_box ul li{margin:3rem 0; position: relative;}
.about_wrap .title_area .cate_menu_box a {font-size: 1.8em;opacity:.25;}
.about_wrap .title_area .cate_menu_box ul li.on a{opacity:1; position: relative; }
.about_wrap .title_area .cate_menu_box ul li.on a::after{content: ''; position: absolute; top: 60%; transform: translateY(-50%); width: 35px;  height: 14px;  background: url(../images/common/arrow.svg) no-repeat center / contain;  margin-left: 2rem;}
.about_wrap .cont_area {position: relative; width: 60%;	}
.about_wrap .cont_area .about_content {width: auto; margin:0 10rem;	}
.about_wrap .cont_area .about_content section { border-bottom:1px dashed var(--gray3);}
.about_wrap .cont_area .about_content section:last-child {border:0;}
.about_wrap .cont_area .about_content section h3 {font-family: var(--font); font-size: 2em;padding:10rem 0 8rem; }
.about_wrap .cont_area .about_content section .cont_box  {margin-bottom: 8rem;}

.cont_philosophy {position: relative; }
.cont_philosophy .cont_box {}
.cont_philosophy .cont_box .tit {font-size: 1.5em;margin-bottom:2rem;}
.cont_philosophy .cont_box .cont {position: relative; }
.cont_philosophy .cont_box .cont.text {position: relative; }
.cont_philosophy .cont_box .cont.mission_list {}
.cont_philosophy .cont_box .cont.mission_list ul {display:flex;}
.cont_philosophy .cont_box .cont.mission_list ul li {width: 25%;}
.cont_philosophy .cont_box .cont.mission_list ul li .icon_box {display:flex; flex-direction: column; align-items: center; }
.cont_philosophy .cont_box .cont.mission_list ul li .icon_box .icon {width: 12rem; height: 12rem; margin-bottom: 2rem; background-color: #000; border-radius:100%;	background-repeat:no-repeat; background-position:center;}
.cont_philosophy .cont_box .cont.mission_list ul li .icon_box.mission1 .icon {background-image:url(../images/sub/ico_mission1.svg);}
.cont_philosophy .cont_box .cont.mission_list ul li .icon_box.mission2 .icon {background-image:url(../images/sub/ico_mission2.svg);}
.cont_philosophy .cont_box .cont.mission_list ul li .icon_box.mission3 .icon {background-image:url(../images/sub/ico_mission3.svg);}
.cont_philosophy .cont_box .cont.mission_list ul li .icon_box.mission4 .icon {background-image:url(../images/sub/ico_mission4.svg);}
.cont_philosophy .cont_box .cont.mission_list ul li .icon_box .text {width: 80%; font-size: .9em; text-align: center;}
.cont_philosophy .cont_box .cont.value_list ul li {display:flex;margin:1rem 0;align-items: flex-start;}
.cont_philosophy .cont_box .cont.value_list em {width: 3rem; height: 3rem;border-radius:100%;  background: #000;color:#fff; display:flex;justify-content: center; align-items: center;  font-size: .8em;}
.cont_philosophy .cont_box .cont.value_list p {margin-left:1rem;}

.cont_logo {position: relative; }
.cont_logo .cont_box .tit {font-size: 1.5em;margin-bottom:2rem;}
.cont_logo .cont_box .img img {max-width: 100%;}
.cont_logo .cont_box .business_slogan {text-align: center; padding-top:6rem; font-size:4rem; font-weight:400;}
.cont_logo .cont_box .brandlogo {position: relative; display:flex;align-items: center;}
.cont_logo .cont_box .brandlogo .colorline {width: 60%;}
.cont_logo .cont_box .brandlogo .colorline .colorbox{display:flex; margin:3rem 0;}
.cont_logo .cont_box .brandlogo .colorline .colorbox.color1 .colorimg{background-color:var(--white);}
.cont_logo .cont_box .brandlogo .colorline .colorbox.color2 .colorimg{background-color:var(--black);}
.cont_logo .cont_box .brandlogo .colorline .colorbox.color3 .colorimg{background-color:var(--main-color1);}
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorimg {width: 8rem; height: 8rem;border:1px solid var(--gray3); box-sizing:border-box;}
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode {position: relative; margin-left:2rem; display:flex;flex-direction: column; justify-content: space-between;	}
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode .title {}
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode .code_info {font-size: .85em;}
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode .code_info p{display: inline-block; margin-right:3rem; }
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode .code_info p span { margin:0 .5rem 0 1rem; }
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode .code_info p span:first-child {margin-left:0;}
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode .code_info p.code {display: block;}
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode .code_info p.cmyk {}
.cont_logo .cont_box .brandlogo .colorline .colorbox .colorcode .code_info p.rgb {}
.cont_logo .cont_box .brandlogo .symbol {width: 40%;}
.cont_logo .cont_box .brandlogo .symbol p {border:1px solid var(--gray1); height: 9rem; display: flex; align-items: center;  justify-content: center; margin:2rem 0;}
.cont_logo .cont_box .brandlogo .symbol span {display: inline-block;width:50%; height: 6rem; background-repeat:no-repeat; background-position:center; background-size:contain;}
.cont_logo .cont_box .brandlogo .symbol p.color1 {}
.cont_logo .cont_box .brandlogo .symbol p.color1 span {background-image:url(../images/common/logo.svg); }
.cont_logo .cont_box .brandlogo .symbol p.color2 { background:var(--main-color1); border:1px solid var(--main-color1);}
.cont_logo .cont_box .brandlogo .symbol p.color2 span {background-image:url(../images/common/logo_white.svg); }
.cont_logo .cont_box .brandlogo .symbol p.color3 {}
.cont_logo .cont_box .brandlogo .symbol p.color3 span {background-image:url(../images/common/logo_black.svg); }


.cont_logo .cont_box .keyword {position: relative; }
.keyword_area{position:relative;background:url(../images/sub/keyword1.png) no-repeat center center;background-size:cover;width:100%;height:60rem;    z-index: 1;}
.keyword_area .s-inner{position:relative;z-index:100;}
.keyword_area .s-inner,.keyword_area .cellbox{width:100%;height:100%;}
.keyword_area .cellbox{font-size:1em;display:flex;text-align:center;}
.keyword_area .cellbox .cell{position:relative;display:inline-block;vertical-align:top;width:33.33%;height:100%;}
.keyword_area .cellbox .cell .tbox{display:table;width:100%;height:100%;}
.keyword_area .cellbox .cell .tbox .tw{display:flex;text-align:center;flex-direction:column;align-content:center;justify-content: flex-end;height:100%;}
.keyword_area .cellbox .cell .tbox .tw p{position: relative; display:block;height:60px;font-family: var(--font);;font-size:3em;color:rgba(255,255,255,0.5);transition:all .5s ease; padding-bottom:5rem;	}
.keyword_area .absImg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.keyword_area .absImg > div{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover!important;opacity:0;transition:all .75s ease;font-size:0;transform:scale(1.15);}
.keyword_area .absImg > div.on{transform:scale(1);opacity:1;z-index:10;}
.keyword_area .absImg > div:nth-child(1){background:url(../images/sub/keyword1.png) no-repeat center center;}
.keyword_area .absImg > div:nth-child(2){background:url(../images/sub/keyword2.png) no-repeat center center;}
.keyword_area .absImg > div:nth-child(3){background:url(../images/sub/keyword3.png) no-repeat center center;}
.keyword_area .absImg > div > img{opacity:0;}
.keyword_area .cellbox .cell.on .tbox .tw p,
.keyword_area .cellbox .cell:hover .tbox .tw p{color:var(--white);}
.keyword_area .cellbox .cell:hover .tbox .tw p::before {content:''; width: 100%; height: 1rem; background: var(--white); position: absolute; bottom:0;left:0}

.cont_icon {position: relative; }
.cont_icon .cont_box {}
.cont_icon .cont_box ul {display:flex;  flex-wrap: wrap; padding-top:2rem;}
.cont_icon .cont_box ul li {width: 33.33%;margin-bottom:10rem}
.cont_icon .cont_box .icon_box {display:flex;    flex-direction: column;  align-items: center;}
.cont_icon .cont_box .icon_box .icon {background-repeat:no-repeat; width:8rem; height: 8rem; background-position:center; background-size:cover; }
.cont_icon .cont_box .icon_box .txt {text-align: center;font-size: .9em; width: 60%; margin-top: 2rem;}
.cont_icon .cont_box .icon_box .icon.ico1 {background-image: url(../images/sub/ico_bicon1.svg);}
.cont_icon .cont_box .icon_box .icon.ico2 {background-image: url(../images/sub/ico_bicon2.svg);}
.cont_icon .cont_box .icon_box .icon.ico3 {background-image: url(../images/sub/ico_bicon3.svg);}
.cont_icon .cont_box .icon_box .icon.ico4 {background-image: url(../images/sub/ico_bicon4.svg);}
.cont_icon .cont_box .icon_box .icon.ico5 {background-image: url(../images/sub/ico_bicon5.svg);}
.cont_icon .cont_box .icon_box .icon.ico6 {background-image: url(../images/sub/ico_bicon6.svg);}
.cont_icon .cont_box .icon_box .icon.ico7 {background-image: url(../images/sub/ico_bicon7.svg);}
.cont_icon .cont_box .icon_box .icon.ico8 {background-image: url(../images/sub/ico_bicon8.svg);}
.cont_icon .cont_box .icon_box .icon.ico9 {background-image: url(../images/sub/ico_bicon9.svg);}
.cont_icon .cont_box .icon_box .icon.ico10 {background-image: url(../images/sub/ico_bicon10.svg);}
.cont_icon .cont_box .icon_box .icon.ico11 {background-image: url(../images/sub/ico_bicon11.svg);}
.cont_icon .cont_box .icon_box .icon.ico12 {background-image: url(../images/sub/ico_bicon12.svg);}
@media screen and (max-width: 1400px) {
	.about_wrap .title_area .scrolldown {display: none;}
	.about_wrap .title_area .title_box {width: 80%; font-size: 2.5em;}
	.about_wrap .title_area .cate_menu_box {width: 80%;}
}
@media screen and (max-width: 1200px) {
	.about_wrap .title_area .title_box { font-size: 2em;}
	.about_wrap .title_area .cate_menu_box a {font-size: 1.25em;}
	.about_wrap .cont_area .about_content {margin:0 10%;}
	.about_wrap .cont_area .about_content section h3 {font-size: 1.8em;}

}
@media screen and (max-width: 1024px) {
	.cont_philosophy .cont_box .cont.mission_list ul {flex-wrap: wrap;}
	.cont_philosophy .cont_box .cont.mission_list ul li {width: 50%;margin-bottom: 5rem;}
	.cont_philosophy .cont_box .cont.value_list p {width: calc(100% - 5rem);}

	.cont_logo .cont_box .brandlogo {flex-direction: column-reverse;}
	.cont_logo .cont_box .brandlogo .colorline {width: 100%;}

	.keyword_area {height: 35rem;}
	.keyword_area .cellbox .cell .tbox .tw p {height: auto; padding-bottom:3rem; font-size: 2em;}

	.cont_icon .cont_box ul li {margin-bottom: 5rem;}
	.cont_icon .cont_box .icon_box .txt {width: 80%;}

	.cont_logo .cont_box .brandlogo .symbol {width: 100%;}

}
@media screen and (max-width: 768px) { 
	#max_contanier #about .about_wrap {flex-direction: column;}
	.about_wrap .title_area {position: relative; width: 100%; height: 40vh; background-color: var(--white);justify-content: flex-end;	}
	.about_wrap .title_area .title_box {width: 90%;}
	.about_wrap .title_area .cate_menu_box {width: 90%; margin-top: 2rem;}

	.about_wrap .cont_area {width: 100%;}
	.about_wrap .cont_area .about_content { margin:0 5%;}
	.about_wrap .title_area .cate_menu_box ul li {margin:1rem 0;}
	.cont_logo .cont_box .brandlogo .symbol span {height: 3rem;}
    .cont_logo .cont_box .business_slogan {font-size:2.5rem;}
}
@media screen and (max-width: 568px) { 
	.about_wrap .cont_area .about_content section h3 {font-size: 1.5em; padding:8rem 0 5rem;}
	.cont_philosophy .cont_box .cont.mission_list ul li .icon_box .icon  {width: 10rem; height: 10rem;}
	.cont_philosophy .cont_box .cont.value_list em {width: 2rem; height: 2rem;}

	.keyword_area {height: 25rem;}
	.keyword_area .cellbox .cell .tbox .tw p {font-size: 1.5em;}

	.cont_icon .cont_box ul li {width: 50%;}
	.cont_icon .cont_box .icon_box .icon {width: 6rem; height: 6rem;}
}

/*------------------------------------
 Look
-------------------------------------*/ 
#max_contanier #look {position: relative; display: block;}



/*------------------------------------
 Item
-------------------------------------*/ 
#max_contanier #item {position: relative;}
#max_contanier .item_menu {width: 100%; position: relative; margin:10rem 0 5rem;}
#max_contanier .item_menu .title_wrap{ position: relative;}
#max_contanier .item_menu .title_wrap > div.inner { display:flex; align-items: flex-end; justify-content: space-between; }
#max_contanier .item_menu .title_wrap .title_area {display:flex;align-items: center;}
#max_contanier .item_menu .title_wrap .title_area h2 {font-family: var(--font);font-weight: normal; font-size: 4em;}
#max_contanier .item_menu .title_wrap .search_area { display:flex; border-bottom:2px solid var(--black);align-items: center;}
#max_contanier .item_menu .title_wrap .search_area input[type="search"] {border: 0; width: calc(100% - 4rem); height: 5rem; padding: 0 1rem; font-size: .9em;}
#max_contanier .item_menu .title_wrap .search_area button {cursor: pointer;  border: 0; background: var(--black); width: 4rem; height: 4rem; display: flex; justify-content: center; color: var(--white); font-size: 1em; border-radius: 100%; padding: 0; align-items: center;}
#max_contanier .item_menu .title_wrap .search_area button i {}
#max_contanier .item_menu .sub_menu_wrap {position: relative; margin-top: 3rem;}
#max_contanier .item_menu .sub_menu_wrap .dep2_menu {}
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul {display:flex;}
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li {margin:0 1.5rem; position: relative;}
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li a {display:flex; flex-direction: column;  align-items: center;}
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li a span {position: relative; opacity:.3; display: inline-block;padding:1rem 0 2rem; }
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li a em {display: block; width: 15rem; height: 9rem; background-repeat:no-repeat; background-position:center;  opacity:.3;}
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li:nth-child(1) a em {background-image:url(../images/common/ico_item1.svg); }
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li:nth-child(2) a em {background-image:url(../images/common/ico_item2.svg); }
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li:nth-child(3) a em {background-image:url(../images/common/ico_item3.svg); }
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li:nth-child(4) a em {background-image:url(../images/common/ico_item4.svg); }
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li:nth-child(5) a em {background-image:url(../images/common/ico_item5.svg); }
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li.active a span{opacity:1;}
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li.active a span::before {content:''; width: 100%; height: .3rem; background: var(--black); position: absolute; bottom:0;}
#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li.active a em {opacity:1; filter: invert(48%) sepia(79%) saturate(517%) hue-rotate(151deg) brightness(91%) contrast(88%);}

#max_contanier .item_menu .sub_menu_wrap .product_menu {background: var(--gray1);width: 100%; height: 7rem;}
#max_contanier .item_menu .sub_menu_wrap .product_menu ul {padding:0 3rem; display:flex; height: 100%;  align-items: center;}
#max_contanier .item_menu .sub_menu_wrap .product_menu ul li {position: relative; padding: 0 3rem;}
#max_contanier .item_menu .sub_menu_wrap .product_menu ul li:first-child {padding-left:0;}
#max_contanier .item_menu .sub_menu_wrap .product_menu ul li::before {content:''; width: .3rem; height: .3rem; background-color: var(--black);position: absolute; right:0; top:50%; }
#max_contanier .item_menu .sub_menu_wrap .product_menu ul li:last-child::before {display: none;}
#max_contanier .item_menu .sub_menu_wrap .product_menu ul li:last-child {padding-right:0;}
#max_contanier .item_menu .sub_menu_wrap .product_menu ul li a {opacity:.5;}
#max_contanier .item_menu .sub_menu_wrap .product_menu ul li.active a {opacity:1; }

@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 1024px) {
	#max_contanier .item_menu .title_wrap .title_area h2 {font-size: 2.5em;}
	#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li a em {width: 10rem; height: 5rem; background-size:contain;	}
	#max_contanier .item_menu .sub_menu_wrap .product_menu {height: 5rem;}
}
@media screen and (max-width: 768px) { 
	#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul {justify-content: space-around;}
	#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li {margin:0;}
	#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li a em {width: 8rem;}
	#max_contanier .item_menu .title_wrap .search_area {display: none;}
}
@media screen and (max-width: 568px) { 
	#max_contanier .item_menu .sub_menu_wrap .dep2_menu ul li a em {display: none;}
	#max_contanier .item_menu .sub_menu_wrap .product_menu {height: auto;}
	#max_contanier .item_menu .sub_menu_wrap .product_menu ul {padding:.5rem 0; flex-wrap: wrap;}
	#max_contanier .item_menu .sub_menu_wrap .product_menu ul li {padding:0.5rem 2rem;}
	#max_contanier .item_menu .sub_menu_wrap .product_menu ul li:first-child {padding-left:2rem;} 
}

/*------------------------------------
 Contact
-------------------------------------*/ 
#max_contanier #contact {position: relative;}
#max_contanier #contact .location_area {}
.location_area .map_box {position: relative; margin-bottom: 5rem;}
.location_area .map_box .map {width: 100%; height: 45rem;border:1px solid var(--gray3);    box-sizing: border-box;}
.location_area .loca_info_box {}
.location_area .loca_info_box > ul {display:flex; flex-wrap: wrap;}
.location_area .loca_info_box > ul > li {width: 50%;}
.loca_info {min-height:10rem	}
.loca_info em { font-size: 1em;display: inline-block; margin-bottom: 1rem;} 
.loca_info > ul {}
.loca_info > ul > li {display:flex; align-items: flex-start;  margin:.3rem 0;}
.loca_info > ul > li i {margin-right:1rem;font-size: 1.1em; margin-top: .3rem;}
.loca_info > ul > li p {font-size: .9em;width: 85%;}
.loca_info > ul > li span {font-size: .9em; width: 5rem; font-weight: bold;}
.loca_info > ul > li a {font-size: .9em; text-decoration:underline;}


@media screen and (max-width: 1200px) {
	.location_area .map_box iframe {height: 35rem;}
	.location_area .loca_info_box > ul > li {width: 100%;}
}
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 768px) { 
	.location_area .map_box iframe {height: 25rem;}
	.loca_info {min-height:auto; margin-bottom:3rem	}
	.loca_info > ul > li p {font-size: 1em;}
	.loca_info > ul > li a {font-size: 1em;}
}
@media screen and (max-width: 568px) { 

}