@charset "utf-8";



@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 #nav .layout .layout {width:100%; max-width:100%; padding:0;}
#header #nav .layout .js_menu ul li{margin-left:4%;}
#header #nav .layout .js_menu ul li a{font-size:19px;}
#header .totalsearch {right:2%; margin-right:0;}
#totalsearch_input {max-width:100%; left:0; margin-left:0;}
#header .mob_btn {right:2%; margin-right:0;}	

/***** Main *****/
.main_visual .slogon {left:2%; margin-left:0;}
.main_visual.js_slide .control {left:2%; margin-left:0;}
.midd_cont {width:97%; max-width:97%; padding:0;}

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



@media screen and (max-width: 1200px){
/***** Header *****/
#header #top_util h1 {top:44px;}	
#header #top_util h1 a {font-size:22px; line-height:28px; height:auto; font-weight:400;}
#header #top_util h1 a span {display:block;}
#header #nav .layout .js_menu {padding:0 120px 0 19%;}
}



@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:100px !important; height:100px !important;}
#header #top_util {background:none;}
#header #top_util .layout {height:100px;}
#header #top_util h1 {position:absolute; left:50%; top:50%; margin:-1px 0 0 -157px;}	
#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:70px; height:70px; background-position:center -6px;}
#header .totalsearch a.button.on {background-position:center -85px;}
#header .mob_btn {right:0; top:30px;}
#header .mob_btn a {width:70px; height:70px; background-position:center center;}
#header span.bg {top:0; height:100%;}
#totalsearch_input {left:0; top:100px; 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 *****/
.main_visual.js_slide.type_03 {height:592px;}
.main_visual.js_slide .control {top:auto; bottom:40px; width:320px; left:50%; margin-left:-160px;}
.main_visual .slogon {top:140px; left:50%; height:360px; margin-top:0; margin-left:-234px;}
.midd_cont {overflow:hidden; padding:40px 0 50px 0; margin:0 2%; width:96%; max-width:96%; height:auto;}
.midd_cont .bor a{box-shadow:none;}
.midd_cont .nonmun,
.midd_cont .rule,
.midd_cont .online{position:relative; right:auto; top:auto; float:left; width:33.33%;}
.midd_cont .notice {position:relative; left:auto; top:auto; float:left;}
.midd_cont .notice .noti_bor{box-shadow:none;}
.midd_cont .notice .noti_bor {background:#ececec; padding:13px 20% 13px 190px;}
.midd_cont .notice .noti_bor h3 {padding:22px 20px 0 70px; width:auto; background-position:-60px top;}


/***** 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 *****/
#main #container h3 {font-size:20px; line-height:26px;}
.main_visual.js_slide.type_03 {height:535px;}
.main_visual.js_slide .control{bottom:30px;}
.main_visual .slogon{top:135px; width:400px; height:320px; margin-left:-200px; padding:45px 20px;}
.main_visual .slogon .subject img{display:inline-block; width:180px;}
.main_visual .slogon p{margin:15px 0;}
.main_visual .slogon p span{line-height:19px; font-size:15px;}
.main_visual .slogon a{height:40px; line-height:40px; padding:0 30px; font-size:16px;}
.midd_cont {padding:30px 0 40px 0; margin:0 3%; width:94%; max-width:94%;}
.midd_cont .bor {margin:0;}
.midd_cont .bor a .arrow_btn{margin-top:8px;}
.midd_cont .notice {margin-top:10px;}
.midd_cont .notice .noti_bor{margin:0;}
.midd_cont .notice .noti_bor h3{font-size:18px !important;}
}



@media screen and (max-width: 740px){
/***** Main *****/
.midd_cont{padding:105px 0 40px 0;}
.midd_cont .box_ty1 {width:50%;}
.midd_cont .box_ty1 .bor {height:200px;}
.midd_cont .bor a{padding:35px 10px;}
.midd_cont .bor a .arrow_btn{margin-top:6px;}
.midd_cont .nonmun .bor a .icons{width:75px; height:75px; margin-bottom:3px; background-size:42%;}
.midd_cont .nonmun .bor a,
.midd_cont .nonmun .bor a:hover,
.midd_cont .nonmun .bor a:active{background-position:-30px top;}
.midd_cont .rule .bor a,
.midd_cont .rule .bor a:hover,
.midd_cont .rule .bor a:active{background-position:right bottom;}
.midd_cont .online{width:100%;}
.midd_cont .online .bor a,
.midd_cont .online .bor a:hover,
.midd_cont .online .bor a:active{background-position:center center;}
.midd_cont .notice{position:absolute; top:0; left:0; margin-top:30px;}
.midd_cont .notice .bor {padding:9px 20% 9px 115px;}
.midd_cont .notice .bor h3 {background:#928067; padding:18px 15px 0 15px; font-size:19px !important; line-height:23px !important;}
.midd_cont .notice .bor h3 span {margin-top:-10px;}

	
/***** Footer *****/	
#footer address span {display:block; margin-left:0;}	
}



@media screen and (max-width: 640px){
/***** Header *****/
#header{min-height:90px !important; height:90px !important;}
#header #top_util .layout{height:90px;}
#header #top_util h1 {margin:-9px 0 0 -65px; text-align:center;}
#header #top_util h1 a{line-height:22px; font-size:18px;}
#header #top_util h1 a span {display:block; margin:0 auto; background-size:100% auto; width:123px; height:28px;}
#header .totalsearch a.button{width:60px; height:60px; background-position:center -11px;}
#header .totalsearch a.button.on{background-position:center -90px;}
#header .mob_btn a{width:60px; height:60px;}
#totalsearch_input .box {max-width:300px;}
#totalsearch_input {top:90px; padding:12px 0;}
#totalsearch_input .box {max-width:360px;}
#totalsearch_input input[type="text"] {height:30px; line-height:30px; font-size:15px;}
#totalsearch_input input[type="submit"] {width:45px; height:40px; background-size:55%;}	
	

/***** Main *****/
.main_visual.js_slide.type_03 {height:470px;}
.main_visual.js_slide .control {bottom:25px; width:280px; margin-left:-140px;}
.midd_cont .bor a{padding:25px 10px;}
.midd_cont .box_ty1 .bor{height:180px;}
#main #container h3{line-height:22px; font-size:18px;}
.main_visual .slogon{top:125px; width:330px; height:270px; margin-left:-165px; padding:35px 20px;}
.main_visual .slogon .subject img{width:160px;}
.main_visual .slogon p{margin:12px 0;}
.main_visual .slogon p span{line-height:18px; font-size:14px;}
.main_visual .slogon a{height:35px; line-height:35px; padding:0px 25px; font-size:15px;}
.midd_cont .rule .bor a,
.midd_cont .rule .bor a:hover,
.midd_cont .rule .bor a:active{background-position:right bottom -15px;}
.midd_cont .notice .noti_bor .move ul li {padding:0;}
.midd_cont .notice .noti_bor .move ul li span {display:none;}
	
/***** 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){
/* Css motion */
@-moz-keyframes slideup {
	0%   {margin-top:-25px;}
	100%   {margin-top:-35px;}
}
@-webkit-keyframes slideup {
	0%   {margin-top:-25px;}
	100%   {margin-top:-35px;}
}
/* Standard syntax */
@keyframes slideup {
	0%   {margin-top:-25px;}
	100%   {margin-top:-35px;}
}


/***** Sub *****/
/* Container */
#sub #content #txt h3 {font-size:28px; line-height:32px; margin:0 0 20px 0;}
}



@media screen and (max-width: 480px){
/***** Main *****/
.main_visual.js_slide.type_03{height:430px;}
.main_visual.js_slide .control{bottom:20px;}
.main_visual .slogon{width:280px; height:230px; margin-left:-140px;}
.main_visual .slogon .subject img{width:140px;}
.main_visual .slogon p{margin:8px 0 10px 0;}
.main_visual .slogon a{height:32px; line-height:32px; padding:0 20px; font-size:14px;}
.midd_cont{padding:148px 0 40px 0;}
.midd_cont .nonmun .bor a,
.midd_cont .nonmun .bor a:hover,
.midd_cont .nonmun .bor a:active{background-position:-70px top;}
.midd_cont .rule .bor a,
.midd_cont .rule .bor a:hover,
.midd_cont .rule .bor a:active{background-position:right -40px bottom -15px;}
.midd_cont .online .bor a img{width:70px;}
.midd_cont .notice .noti_bor {padding:0 0 10px 0; height:auto;}
.midd_cont .notice .noti_bor h3 {position:relative; left:auto; top:auto; height:auto; padding:14px 0 11px 5%; margin:0 0 10px 0; background:#b6873c;}
.midd_cont .notice .noti_bor h3 span {display:none;}
.midd_cont .notice .noti_bor .move {padding:0 5%;}
.midd_cont .notice .noti_bor .control {right:5%; top:10px; margin-top:0;}
.midd_cont .notice .noti_bor .control a {border:0;}
.midd_cont .notice .noti_bor .control a:hover, .midd_cont .notice .bor .control a:active {border: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; text-align:center;}
#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;}


/***** Sub *****/
/* Container */
#sub #content #txt {padding:10px 0 30px 0;}
#sub #content #txt h3 {font-size:26px; line-height:30px;}
}



@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;}	
}