@charset "utf-8";

@media screen and (max-width: 1440px){
	#main #container #sec02:before{left: -30px; width: calc(222px * 0.9); height: calc(255px * 0.9);}
	@keyframes sec01_ani {
		0%{width: 100%;}
		100%{width: calc(100% - 30px - 30px);}
	}
}
@media screen and (max-width: 1340px){
	@keyframes sec01_ani {
		0%{width: 100%;}
		100%{width: calc(100% - 20px - 20px);}
	}
}
@media screen and (max-width: 1280px){
/***** Common *****/
.layout {width:96%; max-width:96%; padding:0 2%;}	


/***** Header *****/
#header #top_util h1 {left:2%;}
#header #top_util #global {right:2%;}
#header .totalsearch {right:2%; margin-right:0;}
#header .mob_btn {right:2%; margin-right:0;}
#header #nav .layout .layout {width:100%; max-width:100%; padding:0;}
#header #nav .layout .js_menu ul li {margin-left:45px;}	
#totalsearch_input {max-width:100%; left:0; margin-left:0;}	

#main #container #sec01 .js_slide{padding: 61px 0 65px;}
#main #container #sec01 .js_slide .in .l strong{font-size: 50px;}
#main #container #sec01 .js_slide .in .l p{margin-top: 10px; font-size: 20px;}
#main #container #sec01 .js_slide .in .l .control{margin-top: 34px; margin-bottom: 20px;}
#main #container #sec01 .js_slide .in .r{gap: 18px; width: 410px;}
#main #container #sec01 .js_slide .in .r .item{padding: 16px 20px;}
#main #container #sec01 .js_slide .in .r .item ul li a{padding: 10px 8px;}
#main #container #sec01 .js_slide .in .r .item ul li a em b{font-size: 22px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong{font-size: 15px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong span{width: 16px; height: 16px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong span:before{font-size: 13px;}
#main #container #sec02:before{top: -100px; left: -20px; width: calc(222px * 0.8); height: calc(255px * 0.8);}
#main #container #sec02{margin-top: 40px; padding-bottom: 65px;}
#main #container #sec02 .in{gap: 24px;}
#main #container #sec02 .in .r{gap: 16px;}
@keyframes sec01_ani {
	0%{width: 100%;}
	100%{width: 100%;}
}

/***** Footer *****/
#footer .relate_site {right:2%; margin-right:0;}
}



@media screen and (max-width: 1200px){
/***** Header *****/	
#header #nav .layout .js_menu ul li {margin-left:35px;}	
}



@media screen and (max-width: 1120px){
/***** Header *****/
#header #top_util h1 {top:44px;}	
#header #top_util h1 a {font-size:23px; line-height:28px; height:auto;}
#header #top_util h1 a span {display:block;}
#header #nav .layout .js_menu {padding:0 180px 0 220px;}
#header #nav .layout .js_menu ul li {margin-left:30px;}	
}



@media screen and (min-width: 1024px){
/***** Header *****/
#rightMenu {display:none !important;}	
}



@media screen and (max-width: 1023px){
/***** Common *****/
.js_mobile_check {display:block;}


/***** Header *****/
#header {min-height:105px !important; height:105px !important;}
#header #top_util {background:none;}
#header #top_util .layout {height:105px;}
#header #top_util h1 {position:absolute; left:50%; top:50%; margin:-2px 0 0 -167px;}	
#header #top_util h1 a span {display:inline-block;}
#header #top_util #global {width:100%; right:0; border:0;}
#header #top_util #global a {display:block; width:50%; border:0; height:30px; line-height:30px; background:#928068 !important;}
#header #top_util #global a:first-child {background:#202020 !important;}
#header #nav .layout .js_menu {display:none;}
#header .totalsearch {right:auto; left:0; top:30px;}
#header .totalsearch a.button {margin-right:0; width:75px; height:75px; background-position:center -5px;}
#header .totalsearch a.button.on {background-position:center -85px;}
#header .mob_btn {right:0; top:30px;}
#header .mob_btn a {width:75px; height:75px;}
#header span.bg {top:0; height:100%;}
#totalsearch_input {left:0; top:105px; padding:17px 0; max-width:100%; margin-left:0;}
#totalsearch_input .box {max-width:460px; padding:5px 60px 5px 10px;}
#totalsearch_input input[type="text"] {height:40px; line-height:40px;}
#totalsearch_input input[type="submit"] {height:50px; width:50px;}

#main #container .in{padding: 0 18px;}
#main #container #sec01 .js_slide{padding: 45px 0 50px;}
#main #container #sec01 .js_slide .in .l strong{font-size: 46px;}
#main #container #sec01 .js_slide .in .l p{margin-top: 9px; font-size: 19px;}
#main #container #sec01 .js_slide .in .l .control{margin-top: 28px; margin-bottom: 15px;}
#main #container #sec01 .js_slide .in .r{gap: 14px; width: 360px;}
#main #container #sec01 .js_slide .in .r .item{padding: 12px 16px;}
#main #container #sec01 .js_slide .in .r .item ul{margin-top: 12px;}
#main #container #sec01 .js_slide .in .r .item ul li a{gap: 14px; padding: 10px 6px;}
#main #container #sec01 .js_slide .in .r .item ul li a em b{font-size: 19px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong{font-size: 14px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong span{width: 15px; height: 15px; margin-left: 4px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong span:before{font-size: 12px;}
#main #container #sec02{margin-top: 36px; padding-bottom: 55px;}
#main #container #sec02 .in{flex-direction: column; gap: 16px;}
#main #container #sec02 .in .l{width: 100%; padding: 45px 18px;}
#main #container #sec02 .in .l:before{background: linear-gradient(293deg, rgba(0, 0, 0, 0.00) -4.55%, rgba(0, 0, 0, 0.40) 31.28%)}
#main #container #sec02 .in .l div p{margin-top: 6px;}
#main #container #sec02 .in .r{gap: 16px;}
#main #container #sec02 .in .r li a{height: 280px;}
#main #container #sec02 .in .r li a:hover .show{opacity: 1;}
#main #container #sec02 .in .r li a:hover .hover{opacity: 0;}

/***** Sub *****/
/* Visual */
#sub #visual {height:195px;}


/* Container */
#sub #container #content_box {background:none; min-height:10px; padding-left:0;}
#sub #container #remote {display:none;}
#sub #content #path .path_etc ul li.print_line {display:none;}
#sub #content #path {position:relative; right:0; top:auto; padding:15px 0 0 0;}
#sub #content #path .navi {float:none; margin:0;}
#sub #content #path .path_etc {float:none; position:absolute; right:0; top:-48px; width:auto;}
#sub #content #path .path_etc .gong_u {display:none !important;}
#sub #content #path .path_etc ul li {float:none;}
#sub #content #path .path_etc ul li .sns_box {display:block; position:relative; left:auto; top:auto; width:82px;}
#sub #content #path .path_etc ul li .sns_box ul:after {content:""; display:block; clear:both;}
#sub #content #path .path_etc ul li .sns_box ul li {float:left; position:relative; left:auto; top:auto !important; display:block !important; margin-left:5px;
-moz-opacity:1 !important; -ms-opacity:1 !important; -o-opacity:1 !important; -webkit-opacity:1 !important; opacity:1 !important; filter:alpha(opacity=100) !important;}
#sub #content #path .path_etc ul li .sns_box .btn_close {display:none !important;}
#sub #content #txt {padding:20px 0 45px 0; min-height:10px;}
#sub #content #txt h3 {margin-bottom:25px; font-size:33px; line-height:38px;}
}



@media screen and (max-width: 900px){
/***** Footer *****/	
#footer .menu {margin-right:0; padding:12px 0;}	
#footer .relate_site {position:relative; right:auto; top:auto; padding-top:20px;}
#footer address {padding-top:15px;}
}


@media screen and (max-width: 840px){
#main #container #sec01 .js_slide{padding: 30px 0;}
#main #container #sec01 .js_slide .in .l strong{font-size: 40px;}
#main #container #sec01 .js_slide .in .l p{margin-top: 8px; font-size: 16px;}
#main #container #sec01 .js_slide .in .l .control{margin-top: 16px; margin-bottom: 8px;}
#main #container #sec01 .js_slide .in .l .control ul{gap: 4px;}
#main #container #sec01 .js_slide .in .l .control ul li a{width: 12px; height: 3px;}
#main #container #sec01 .js_slide .in .l .control ul li a.on{width: 36px;}
#main #container #sec01 .js_slide .in .l .control a.btn_play, 
#main #container #sec01 .js_slide .in .l .control a.btn_stop{width: 18px; height: 18px;}
#main #container #sec01 .js_slide .in .r{gap: 12px; width: 320px;}
#main #container #sec01 .js_slide .in .r .item{padding: 10px 14px;}
#main #container #sec01 .js_slide .in .r .item ul{margin-top: 10px;}
#main #container #sec01 .js_slide .in .r .item ul li a{gap: 10px; padding: 9px 6px;}
#main #container #sec01 .js_slide .in .r .item ul li a em{font-size: 11px;}
#main #container #sec01 .js_slide .in .r .item ul li a em b{font-size: 18px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong{font-size: 13px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong span{width: 13px; height: 13px; margin-left: 4px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong span:before{font-size: 11px;}
#main #container #sec02{margin-top: 36px; padding-bottom: 55px;}
#main #container #sec02 .in{flex-direction: column; gap: 16px;}
#main #container #sec02 .in .l{width: 100%; padding: 45px 18px;}
#main #container #sec02 .in .l:before{background: linear-gradient(293deg, rgba(0, 0, 0, 0.00) -4.55%, rgba(0, 0, 0, 0.40) 31.28%)}
#main #container #sec02 .in .l div p{margin-top: 6px;}
#main #container #sec02 .in .r{gap: 16px;}
#main #container #sec02 .in .r li a{height: 280px;}
#main #container #sec02 .in .l div strong{font-size: 19px;}
#main #container #sec02 .in .r li a .show strong{font-size: 17px;}
}
@media screen and (max-width: 740px){
#main #container #sec01 .js_slide{padding: 160px 0 20px;}
#main #container #sec01 .js_slide .in{display: block; }
#main #container #sec01 .js_slide .in .l strong{font-size: 36px;}
#main #container #sec01 .js_slide .in .l p{margin-top: 6px; font-size: 15px;}
#main #container #sec01 .js_slide .in .l .control{margin-top: 12px;}
#main #container #sec01 .js_slide .in .r{flex-direction: row; flex-wrap: nowrap; width: 100%; margin-top: 10px;}
#main #container #sec01 .js_slide .in .r .item{width: 100%;}
#main #container #sec01 .js_slide .in .r .item ul li a{flex-direction: column-reverse; gap: 4px;}
#main #container #sec01 .js_slide .in .r .item ul li a div strong{font-size: 14px;}
#main #container #sec01 .js_slide .in .r .item ul li a em{display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; align-items: center; width: 100%; text-align: left; font-size: 13px;}
#main #container #sec01 .js_slide .in .r .item ul li a em b{font-size: 13px; margin-bottom: 0; font-weight: 300; color: rgba(255, 255, 255, 0.8);}
#main #container #sec01 .js_slide .in .r .item ul li a em b:before{content: "-";}
#main #container #sec01 .js_slide .in .r .item ul li a div strong{-webkit-line-clamp: 1;}
#main #container #sec02{margin-top: 24px; padding-bottom: 40px;}
#main #container #sec02 .in{gap: 16px;}
#main #container #sec02 .in .r{gap: 12px;}
#main #container #sec02 .in .r li a{height: 230px;}
}
@media screen and (max-width: 700px){
/***** Footer *****/	
#footer address span {display:block; margin-left:0;}	
}



@media screen and (max-width: 640px){
/***** Header *****/	
#totalsearch_input {padding:12px 0;}
#totalsearch_input .box {max-width:360px;}
#totalsearch_input input[type="text"] {height:34px; line-height:34px;}
#totalsearch_input input[type="submit"] {height:44px;}	
	
#main #container .in{padding: 0 16px;}
#main #container #sec01 .js_slide{padding: 40px 0 24px;}
#main #container #sec01 .js_slide .in{display: block; }
#main #container #sec01 .js_slide .in .l strong{font-size: 30px;}
#main #container #sec01 .js_slide .in .l p{margin-top: 10px; font-size: 16px;}
#main #container #sec01 .js_slide .in .l .control{margin-top: 12px;}
#main #container #sec01 .js_slide .in .r{gap: 12px;}
#main #container #sec02{margin-top: 24px; padding-bottom: 40px;}
#main #container #sec02 .in{gap: 16px;}
#main #container #sec02 .in .r{gap: 12px;}
#main #container #sec02 .in .r li a{height: 230px;}
	
/***** Sub *****/
/* Visual */
#sub #visual {height:179px;}

/* Container */
#sub #content #txt {padding:15px 0 40px 0;}
#sub #content #txt h3 {font-size:31px; line-height:36px;}
}



@media screen and (max-width: 540px){
/***** Header *****/
#header #top_util h1 {margin:-13px 0 0 -83px; text-align:center;}
#header #top_util h1 a span {display:block; margin:0 auto; background-size:100% auto; width:130px; height:28px;}
#totalsearch_input .box {max-width:300px;}
	
#main #container #sec01 .js_slide .in .r{flex-wrap: wrap;}
#main #container #sec02 .in .l{padding: 40px 16px;}
#main #container #sec02 .in .l div{flex: auto; width: 100%; }
#main #container #sec02 .in .l div strong{font-size: 16px;}
#main #container #sec02 .in .l div p{font-size: 14px;}
#main #container #sec02 .in .l span{font-size: 14px;}
#main #container #sec02 .in .r{flex-wrap: wrap;}
#main #container #sec02 .in .r li a{height: 102px;}
#main #container #sec02 .in .r li a .show{justify-content: flex-start; align-items: center; padding: 16px;}
#main #container #sec02 .in .r li a .show strong{text-align: left; font-size: 16px;}
	
/***** Sub *****/
/* Container */
#sub #content #txt h3 {font-size:28px; line-height:32px; margin:0 0 20px 0;}

		
/***** Footer *****/
#footer .cl_top .layout {width:100%; max-width:100%; padding:0;}
#footer .menu {padding:0;}
#footer .menu li {width:50%; padding:0; background:none; border-bottom:1px solid #59595d;}
#footer .menu li a {display:block; padding:10px 4%; border-right:1px solid #59595d;}
#footer .menu li:nth-child(even) a {border-right:0;}
#footer .relate_site {width:auto;}
#footer .relate_site div {width:49.2%; margin-left:0; float:right;}	
#footer .relate_site div:first-child {float:left;}
}



@media screen and (max-width: 480px){
/***** Sub *****/
/* Container */
#sub #content #txt {padding:10px 0 30px 0;}
#sub #content #txt h3 {font-size:26px; line-height:30px;}
	
.midd_cont .banner {padding:30px 0 10px 0;}	
.midd_cont .banner ul li {width:50%; margin-bottom:20px;}
}



@media screen and (max-width: 440px){
/***** Header *****/
#totalsearch_input .box {max-width:240px;}	
}



@media screen and (max-width: 400px){
/***** Header *****/
#totalsearch_input .box {max-width:200px;}	
}