/* ======================================= c o m m o n ========================================================================================================================================================================= */
.font1 {font-size: 2.0625rem; font-weight:600; line-height: 1.2; letter-spacing: -0.3px;}
.font2 {font-size: 1.25rem; font-weight:600; line-height: 1.3; letter-spacing: -0.6px;}
.font3 {font-size: 1.0625rem; font-weight:500; line-height: 1.4; letter-spacing: -0.6px;}
.font4 {font-size: 1.0625rem; font-weight:700; line-height: 1.4; letter-spacing: -0.6px;}
.font5 {font-size: 1rem; font-weight:400; line-height: 1.375; letter-spacing: -0.6px;}
.font6 {font-size: 1.25rem; font-weight:400; line-height: 1.3; letter-spacing: -0.6px;}

.con {max-width: 1320px; margin:0 auto;}
.ver-bar {display: block; width: 1px; height: 10px; background: #000; margin:0 auto 7px;}

.head_title {text-align: center; padding:75px 0px 50px;}
.head_title .link {display: flex; flex-wrap: wrap; justify-content: center; margin-top:30px;}
.head_title .link li {display: flex; align-items: center; color:#cacaca; position:relative;}
.head_title .link li.on,
.head_title .link li a#bo_cate_on,
.head_title .link li a:hover {color:#000;}
.head_title .link li:not(:last-child)::after {content:""; display: inline-block; width: 1px ; height: 14px; background: #CACACA; margin:0 20px;}
.head_title .link li a {display: block; position:relative; font-size:1.25em;}
.head_title .link li a span {position:relative; z-index: 2;}
.head_title .link li.on a::after,
.head_title .link li a#bo_cate_on::after,
.head_title .link li a:hover::after {content:""; display: block; width: 100%; height: 9px; background:#BDA976; position:absolute; left:0; bottom:0; opacity: 0.3;}

.top_bt .banner {height: 630px; display: flex; flex-direction: column; justify-content: center; align-items: center; background:url("/img/company_top.jpg") no-repeat center center; background-size:cover; text-align: center;}
.top_bt .banner strong {font-size: 4.375rem; font-weight: 700; letter-spacing: -0.7px; margin:-100px 0 25px;}
.top_bt .banner img.black {filter: brightness(0) saturate(100%);}
.top_bt .para {padding:100px; margin-top:-100px; background:#fff; position:relative; z-index: 2;}
.top_bt .para p {margin-top: 15px; word-break: keep-all; padding:5px 0px;}
/* ============================================================================================================================================================================================================================== */

#header {background: #000; padding:20px 0;}
#header .con .depth01 {display: flex; align-items: center; color:#fff;}
#header .con .depth01 li:not(.hlogo) {width: 12.12%; text-align: center; margin-top:26px;}
#header .con .depth01 li.hlogo {margin:0 auto;}
#header .con .depth01 li:not(.hlogo,:nth-child(3),:last-child) {margin-right: 30px;}
div.onlinemall {position:fixed; right:15px; top:28px; background-color:#ffffff; border-radius: 30px; text-align: center; padding:12px 30px; box-shadow: 10px 10px 30px rgba(0,0,0,0.1); font-size:13px;}
div.onlinemall:hover {background-color:#000000; }
div.onlinemall:hover a {color:#ffffff; }
div.onlinemall a img {width:100%; max-width:120px; padding-bottom:5px;}

#header .m_btn {display: none; border:none; background:none; font-size: 32px; color:#fff; margin-left: auto;}
#header .con .depth02 {display:block; position:absolute; background:#ffffff; padding:10px 20px;margin-top:10px; margin-left:-30px; box-shadow:10px 10px 30px rgba(0,0,0,0.1)}
#header .con .depth02 li {float:left; padding:0px 10px; width:auto !important; margin:0px !important; }
#header .con .depth02 li a{color:#000; font-size:1em; font-weight:bold; }


.mobile_screen {width: 100%; height: 100%; display: none; align-items: center; position:fixed; top:0; right:0; z-index: 9998;}
.mobile_screen .bg {width: 100%; height: 100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5);}
.mobile_screen .inner {width: 80%; max-width: 430px; height: 100%; position: absolute; top:0; right:-125%; font-size: 1.75rem; background:#BDA976; padding:35px; transition:all 0.35s ease-out;}
.mobile_screen .inner button {display: block; font-size: 2.5rem; color:#313033; margin-left: auto; margin-right: 5px; padding:5px; transition:all 0.25s;}
.mobile_screen .inner button i {font-weight: 900;}
.mobile_screen .inner > div {text-align: right; margin-top:5px;}
.mobile_screen .inner > div em {display: inline-block; margin-left: 3px; font-style: normal; transform:rotate(90deg)}
.mobile_screen .inner > a {display: block; border:1px solid #313033; border-radius: 80px; padding:15px 0; text-align: center; margin:50px 0; font-size: 1rem; transition:all 0.3s;}
.mobile_screen .inner > a:hover {background:#000; color:#fff;}
.mobile_screen .inner > ul {margin-top:50px; font-weight: 700;}
.mobile_screen .inner > ul > li {}
.mobile_screen .inner > ul > li {/*border-bottom:2px solid #313131;*/ margin-bottom:10px; padding-bottom:10px; position:relative;}
.mobile_screen .inner > ul > li a {display: flex; justify-content: space-between; color:var(--cy); font-size:1.25em;}
.mobile_screen .inner > ul > li a i {font-weight: 900;}
.mobile_screen .inner > ul .depth02 {display: none; padding-left:20px; margin-top:20px}
.mobile_screen .inner > ul .depth02 li {display: flex; align-items: center; font-size: 1.5rem;}
.mobile_screen .inner > ul .depth02 li::before {content:"-"; margin-right:8px; font-weight: 500;}
.mobile_screen .inner > ul .depth02 li:not(:last-child) {margin-bottom:10px;}
.mobile_screen.active .inner {right:0;}

#visual .cont_box {height: 860px; display: flex; justify-content: center; align-items: center; background:url("/img/visual_bg.jpg") no-repeat center center; background-size:cover; text-align: center;}
#visual .cont_box strong {font-size: 4.375rem; font-weight: 700; line-height: 1.14; color:#fff;}
#visual .cont_box p {font-size: 1.875rem; font-weight: 400; line-height: 1.2; color:#fff; margin:25px 0 20px;}
#visual .visual_banner {height: 340px; display: flex; justify-content: center; align-items: center; background:url("/img/visual_banner.jpg") no-repeat center center; background-size: cover; text-align: center; color:#fff; position: relative;}
#visual .visual_banner::after {content:""; display: block; width: calc(100% - 28px); height: calc(100% - 24px); border:1px solid #fff; position:absolute;}
#visual .visual_banner span {display: block; margin:10px 0;}

#main02 .cont_box {background:url("/img/main02_bg.jpg") no-repeat center center; background-size:cover; padding:100px 0;}
#main02 .cont_box .title {text-align: center;}
#main02 .cont_box .title p {color:#797979; margin-top:10px;}
#main02 .cont_box ul {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top:50px;}
#main02 .cont_box ul li {width: 31.5%;}
#main02 .cont_box ul li .txt_box {margin-top:20px;}
#main02 .cont_box ul li .txt_box p {color:#474747; margin-top:5px;}
#main02 .main02_banner {height: 340px; display: flex; justify-content: center; align-items: center; background:url("/img/main02_banner_bg.jpg") no-repeat center center; background-size:cover; text-align: center;}
#main02 .main02_banner p {color:#474747; margin-top:10px;}

#main03 {padding-top:100px;}
#main03 .title {text-align: center;}
#main03 .title p {color:#797979; margin-top:10px;}
#main03 .prd_list {display: flex; flex-wrap: wrap; margin-top:50px; overflow: hidden;}
#main03 .prd_list li {position:relative; transition:all 0.35s ease-in-out;}
#main03 .prd_list li::after {content:""; display: block; width: 100%; height: 100%; position:absolute; top:0; left:0; background: rgba(0,0,0,0.7); opacity: 1; transition:all 0.3s ease-in-out;}
#main03 .prd_list li:hover::after {background: rgba(0,0,0,0.38);}
#main03 .prd_list li.inc {width: 50%;}
#main03 .prd_list li.dec {width: 12.5%; cursor: pointer;}
#main03 .prd_list li.inc::after {opacity: 0;}
#main03 .prd_list li .img_box {display: flex; justify-content: center; overflow: hidden;}
#main03 .prd_list li .img_box img {max-width: unset;}
#main03 .prd_list li .txt_box {width: 100%; display: flex; justify-content: space-between; align-items: center; position:absolute; bottom:0; left:0; background: rgba(105, 96, 87, 0.70); padding:40px 80px; opacity: 0; transition:all 0.3s ease-in-out; z-index: 2;}
#main03 .prd_list li .txt_box p {width: 50%; color:#fff; word-break: keep-all;}
#main03 .prd_list li .txt_box a {color:#fff; width: 82px; height: 82px; display: flex; justify-content: center; align-items: center; border-radius: 100%; background: #BDA976;}
#main03 .prd_list li.inc .txt_box {opacity: 1;}
#main03 .prd_list li .hide_logo {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity: 0.2; z-index: 2;}
#main03 .prd_list li.inc .hide_logo {display: none;}


#main04 {padding:100px 0; background: #F8F7F5;}
#main04 .title {text-align: center;}
#main04 .title p {color:#797979; margin-top:10px;}

.default_certi {font-size:2em; text-align: center;padding:105px 0px 15px;}
.default_certi_line {display:inline-block; width:100%; text-align:center; padding:0px 0px 30px;}

.commonTable {border-top:1px solid #adadad; border-left:1px solid #adadad;}
.commonTable th {background:#F2F3F7; border-bottom:1px solid #adadad; border-right:1px solid #adadad; padding:8px 16px; font-size:1.0625em; line-height:1.4em; letter-spacing:-0.6px;}
.commonTable td {border-bottom:1px solid #adadad; border-right:1px solid #adadad; padding:16px 16px; font-size:1.0625em; line-height:1.4em; letter-spacing:-0.6px;}




.table-agreement{
	font-size:1em;
	line-height:1.5em;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
.table-agreement thead th,
.table-agreement thead td{
	background: #f9f9f9;
	padding: 10px 5px !important;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #e1e1e1;
}
.table-agreement th,
.table-agreement td{

	padding: 5px 10px;
	vertical-align: middle;
	border: 1px solid #e1e1e1;


	white-space: pre-wrap;
	
	*white-space:normal; 
	-ms-word-break: break-all;
	word-break: break-all;
	word-wrap: break-word;
}
.content-body{
	margin: 30px 30px 130px;
	position: relative;
	*zoom: 1;
}
.content-text-include{
	white-space: pre-wrap;
	*white-space:pre;
	color: #555;
	margin:0 auto;
	-ms-word-break: break-all;
	word-break: break-all;
	word-wrap: break-word;
	font-size: 1em;
	line-height: 1.5em;
}
.content-head{
	padding: 0 30px;
	margin: 50px 0;
}
.content-head .content-title{
	color: #454545;
	font-size: 30px;
	line-height: 1.2em;
	letter-spacing: -0.05em;
	font-weight: normal;
	vertical-align: bottom;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
.content-head p{
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: bottom;
	font-size: 14px;
	*margin: 0 0 0 30px;

}
.content-head p:before{
	margin: 0 18px 0 18px;
	display: inline-block;
	width: 1px;
	height: 28px;
	vertical-align: bottom;
	background: #b7b7b7;
	content: '';
}

#footer .page {border-top:1px solid #adadad; border-bottom:1px solid #adadad; padding:20px 0;}
#footer .page ul {display: flex; color:#797979;}
#footer .page ul li:not(:last-child) {margin-right: 20px;}
#footer .info {padding:40px 0;}
#footer .info .company {display: flex; align-items: center;}
#footer .info .con {display: flex; align-items: center;}
#footer .info .company .flogo {margin-right: 50px;}
#footer .info .company .address { color:#616161;}
#footer .info .company .address .sns {display: flex; align-items: center;}
#footer .info .company .address .sns li:not(:last-child) {margin-right: 20px;}
#footer .info .company .address .sns img {margin-right: 10px;}
#footer .info .company .address .cus_tel {margin:20px 0 10px;}
#footer .info .company .address .cus_tel span {margin-left: 5px;}
#footer .info .company .address .copyright {color:#adadad;}
#footer .info .company .address .etc {display: flex; font-size: 0.9375rem; font-weight: 500; margin-top:5px;}
#footer .info .company .address .etc li:first-child {margin-right:10px;}
#footer .info .customer {width: 40.3%; margin-left: auto; border-left: 1px solid #cacaca; padding-left: 30px; color:#313033;}
#footer .info .customer .cus_info {margin:3px 0 20px; opacity: 0.7;}
#footer .info .customer a {display: inline-block; border:1px solid #313033; padding:10px 40px;}

@media all and (max-width:1500px){
    #main03 .prd_list li .hide_logo {max-width: 85%;}
    #main03 .prd_list li:not(:last-child) .txt_box img {max-width: 105px;}
    #main03 .prd_list li:last-child .txt_box img {max-width: 150px;}
    #main03 .prd_list li .txt_box a {width: 75px; height: 75px;}
}

@media all and (max-width:1320px){
    html {font-size: 15px;}


    #main03 .prd_list li .txt_box {padding:40px;}
    
    #footer .info .company .flogo {margin-right: 30px;}
    #footer .info .company .address .cus_tel span {display: block; margin-left: 0;}
}

@media all and (max-width:1024px){
	
div.m_onlinemall {background-color:#ffffff; border-radius: 10px; text-align: center; padding:12px 20px; height:auto; text-align: center; text-align:center !important; font-size:15px;}
	div.m_onlinemall a img {width:100%; max-width:150px; height:auto; padding-bottom:5px;}
	
    html {font-size: 14px;}

    .top_tb .para {padding:70px;}

    #header {width: 100%; padding:15px 0; position:fixed; top:0; left:0; z-index: 900;}
    #header .con {display: flex;}
    #header .con .depth01 li.hlogo {width: 120px;}
    #header .con .depth01 li:not(.hlogo) {display: none;}
    #header .m_btn {display: block;}

    #wrap {margin-top:90px}

    #main03 .prd_list li.dec {width: 50%;}
    #main03 .prd_list li .txt_box {height: 100%; flex-direction: column; justify-content: center; text-align: center;}
    #main03 .prd_list li .txt_box p {width: 100%; margin:20px auto;}
    #main03 .prd_list li:last-child .txt_box img {max-width: unset;}
    #main03 .prd_list li:not(:last-child) .txt_box img {max-width: unset;}

    #footer .page ul {justify-content: center;}
    #footer .info .con {flex-direction: column-reverse;}
    #footer .info .company {width: 100%; flex-direction: column; text-align: center;}
    #footer .info .company .address .sns {justify-content: center; margin-top:20px;}
    #footer .info .customer {width: 100%; border-left:none; border-bottom:1px solid #cacaca; padding-left: 0; padding-bottom: 30px; margin-bottom: 30px; text-align: center;}
}
.br_m {display:none;}
@media all and (max-width:780px){
	
    #main03 .prd_list li .txt_box a {width: 52px; height: 52px;}
	#main03 .prd_list li .txt_box a img {width:52px; height:52px;}
	
	
	
.mobile_screen .inner > ul > li {/*border-bottom:2px solid #313131;*/ margin-bottom:0px; padding-bottom:10px; position:relative;}
	#main03 .prd_list li .img_box {height:350px;}
    #footer .info .company .flogo {margin-right: 0px;}
#footer .page ul li:not(:last-child) {margin-right: 5px;}
	
	
.content-head{
	padding: 0 0px;
	margin: 0px 0;
}
.content-body{
	margin: 10px 0px 50px;
	position: relative;
	*zoom: 1;
}
	
	
.font6 {font-size: 1rem; font-weight:400; line-height: 1.3; letter-spacing: -0.6px;}
	
.font2 {font-size: 1rem; font-weight:500; line-height: 1.3; letter-spacing: -0.6px;}
	.br_m {display:block;}
    html {font-size: 13px;}

    .m_hidden {display: none;}

    .head_title {padding:50px 0px 35px;}
    .head_title .link li {width: 32%; justify-content: center; margin-bottom: 12px;}
    .head_title .link li:not(:nth-child(3n)) {margin-right: 2%;}
    /*.head_title .link li:nth-child(1),
    .head_title .link li:nth-child(2),
    .head_title .link li:nth-child(3) {width: 32%;}
    .head_title .link li:nth-child(4)*/
    .head_title .link li:nth-child(5) {width: 55%;}
    .head_title .link li:not(:last-child)::after {display: none; margin:0 8px;}
    .head_title .link li.on a::after, .head_title .link li a:hover::after {height: 6px;}

    .top_bt .banner {height: 340px;}
    .top_bt .banner strong {font-size: 2.5rem; margin-top:-70px;}
    .top_bt .banner img {max-width: 140px;}
    .top_bt .para {padding:30px 20px; margin-top:-70px;}


    #wrap {margin-top:80px;}

    #header .con .depth01 li.hlogo {width: 100px;}

    #visual .cont_box {height: 600px;}
    #visual .cont_box strong {font-size: 2.5rem;}
    #visual .cont_box p {font-size: 1.5rem; word-break: keep-all;}
    #visual .cont_box img {max-width: 140px;}
    #visual .visual_banner img {max-width: 105px;}

    #visual .visual_banner .con {max-width:80%;}
    #main02 .cont_box {padding:70px 0;}
    #main02 .cont_box ul li {width: 100%;}
    #main02 .cont_box ul li:not(:last-child) {margin-bottom: 40px;}
    #main02 .cont_box ul li .txt_box {text-align: center; margin-top:24px;}
	#main02 .cont_box ul li .txt_box h4 {font-size:1.8em;}
    

    #main03 {padding-top:70px;}

    #main03 .prd_list li {cursor: default; pointer-events: none;}
    #main03 .prd_list li:not(:last-child) {margin-bottom: 30px;}
    #main03 .prd_list li.inc,
    #main03 .prd_list li.dec {width: 100%;}
    #main03 .prd_list li.dec::after {opacity: 0;}
    #main03 .prd_list li.dec .txt_box {opacity: 1;}
    #main03 .prd_list li .hide_logo {display: none;}
    #main03 .prd_list li .txt_box a {pointer-events: all;}
}

.m_img{display: none; margin: auto;}
.pc_img{display: block; margin: auto;}

.hidden {}
@media all and (max-width:780px){
	div.onlinemall {display:none;}
	.hidden {display:none;}
	.con {width:90%;}
    .m_img{display: block; margin: auto;}
    .pc_img{display: none; margin: auto;}
.default_certi {font-size:1.5em; text-align: center;padding:60px 0px 4px;}
.default_certi_line {display:inline-block; width:100%; text-align:center; padding:0px 0px 30px;}
.commonTable td {padding:8px; font-size:1em; line-height:1.4em; letter-spacing:-0.6px; word-break: keep-all;}
.font1 {font-size: 1.7rem; }
}