@charset "utf-8";
#top {position:relative; z-index:1;}

/***** m_visual *****/
#visual {position:relative; overflow-x:hidden; width:100%; height:434px; background:#212121;}
#visual>p {position:relative; left:50%; z-index:1; margin-left:-1000px;}
#visual>ul {position:absolute; top:397px; left:50%; z-index:3; overflow:hidden; margin-left:-41px;}
#visual>ul>li {float:left;}

/***** nav *****/
#bar {position:absolute; left:50%; z-index:10; float:left; margin:32px 0 0 -570px; width:1140px; height:63px; background:rgba(193, 13, 32, 0.9);}
#bar>h1 {float:left; width:199px; height:38px; margin:17px 0 0 43px;}
#bar>h1>a>img {width:100%;}
#nav>h2 {display:none;}
#nav>ul {overflow:hidden; float:left;}
#nav>ul>li {float:left;}
#nav>ul>li>a {display:block; margin-left:64px; width:80px; height:63px; background:url('/open_content/peace/images/nav_bg.png') no-repeat; font-size:0;}
#nav>ul>li>a:first-child {margin-left:90px;}
#nav>ul>li.menu2>a {width:111px; background-position:-143px 0;}
#nav>ul>li.menu3>a {width:62px; background-position:-318px 0;}
#nav>ul>li.menu4>a {width:31px; background-position:-447px 0;}
#nav>ul>li.menu5>a {width:62px; background-position:-546px 0;}
#nav>ul>li.menu1>a:hover, #nav>ul>li.menu1>a:active {background-position:0 -63px;}
#nav>ul>li.menu2>a:hover, #nav>ul>li.menu2>a:active {background-position:-143px -63px;}
#nav>ul>li.menu3>a:hover, #nav>ul>li.menu3>a:active {background-position:-318px -63px;}
#nav>ul>li.menu4>a:hover, #nav>ul>li.menu4>a:active {background-position:-447px -63px;}
#nav>ul>li.menu5>a:hover, #nav>ul>li.menu5>a:active {background-position:-546px -63px;}
#nav p.mypage {float:right; width:191px; background:rgba(0,0,0,0.3);}
#nav p.mypage a {overflow:hidden; display:block; margin:0 auto; width:74px; height:63px; background:url('/open_content/peace/images/nav_mypage.png') no-repeat; text-indent:100%; white-space:nowrap;}
#nav p.mypage a:hover, #nav p.mypage a:active {background-position:0px -63px;}
.wrapper {overflow:hidden; margin:0 auto; width:1140px;}

#lnb .submenu { position:absolute; display:block; top:63px; z-index:999; background:#9b131f; color:#ffffff; }
#lnb .submenu li { width:160px; border-top:1px solid #710710; border-bottom:1px solid #c42735; text-align:center; }
#lnb .submenu li:first-child { border-top:0px; }
#lnb .submenu a { display:block; line-height:40px; color:#ffffff; }
#lnb .submenu a:hover, #lnb .submenu a:active { color:#ffffff; text-decoration:underline; background:#710710; }
#lnb #submenu1 { margin-left:52px; }
#lnb #submenu2 { margin-left:67px; }
#lnb #submenu3 { margin-left:42px; }
#lnb #submenu4 { margin-left:26px; }
#lnb #submenu5 { margin-left:42px; }

/***** footer *****/
#footer {margin-top:30px; width:100%; height:120px; background:#ffffff;}
#footer>.wrapper>p {float:left; margin-right:40px;}
#footer>.wrapper>div.btm_info {float:left; color:#777777; line-height:23px;}
#footer>.wrapper>div.btm_info>ul {overflow:hidden; margin-bottom:10px;}
#footer>.wrapper>div.btm_info>ul>li {float:left; margin-left:10px; padding-left:10px; background:url('/open_content/peace/images/grey_bar.jpg') left center no-repeat;}
#footer>.wrapper>div.btm_info>ul>li:first-child {background:none; margin:0; padding:0;}
#footer>.wrapper>div.btm_info>ul>li>a {color:#555555;}
#footer>.wrapper>div.btm_info>ul>li.link>a {color:#000000;}

/***** sub *****/
#subVisual {position:relative; overflow-x:hidden; width:100%; height:300px; background:#212121;}
#subVisual>p {position:relative; left:50%; z-index:1; margin-left:-800px;}
#subVisual>div {position:absolute; top:140px; z-index:3; overflow:hidden; width:100%; text-align:center;}
#subVisual>div>p.tit {margin-bottom:20px; padding-bottom:23px; background:url('/open_content/peace/images/subTop_bar.jpg') center bottom no-repeat; color:#ffffff; font-size:30px; line-height:30px;}
#subVisual>div>p.con {color:#ffffff; line-height:23px;}


/*****************************************************************************************************************************************************************************************/

/*1280*/
@media all and (max-width:1280px) { 
}

/*1140*/
@media all and (max-width:1139px) { 
#bar {width:96%; margin-left:-48%;}
#bar h1 {position:absolute; z-index:3; float:none; left:50%; margin-left:-99.5px;}
#nav h2 {display:block; float:left;}
#nav h2 a {overflow:hidden; display:block; margin:22px 0 0 43px; width:27px; height:19px; background:url('/open_content/peace/images/menu_icon.png') no-repeat; background-size:100%; text-indent:100%; white-space:nowrap;}
#nav>ul {display:none; position:absolute; z-index:10; top:63px; width:100%;}
#nav .submenu {position:static; width:100%; margin-left:0 !important; background:#5A0209;}
#nav .submenu ul {width:100%; text-align:left;}
#nav .submenu li {width:100%; text-align:left; border-top:1px solid #4C0007; border-bottom:1px solid #710C15;}
#nav .submenu li a {display:block; padding-right:20px; padding-left:20px;}
#nav .submenu li a:hover {background:#5A0209;}
#nav>ul>li {width:100%; line-height:50px; background:#9b131f; border-bottom:1px solid #c42735; border-top:1px solid #710710;}
#nav>ul>li>a {display:block; margin:0 !important; padding-left:20px; width:100% !important; background:none; font-size:16px; color:#ffffff; height:50px;}
#nav p.mypage {width:96px; height:63px;}
#nav p.mypage a {margin-top:14px; width:36px; height:36px; background:url('/open_content/peace/images/mypage_icon.png') no-repeat; background-size:100%;}
#nav p.mypage a:hover, #nav p.mypage a:active {background-position:0px 0px;}
}

/*768*/
@media all and (max-width:768px) {
#visual {height:auto;}
#visual>p {margin-left:-100%;}
#visual>p>img {width:130%;}
#visual>ul {top:90%;}
#subVisual {height:auto;}
#subVisual>p {margin-left:-100%;}
#subVisual>p>img {width:130%;}
#subVisual>div {top:46%;}
#footer {width:auto; height:auto; padding:0 20px;}
#footer>.wrapper>p>img {margin-bottom:20px;}
}

/*mobile*/
@media all and (max-width:480px) {
#visual>ul {top:80%;}
#subVisual>div {top:23%;}
#bar {position:static; width:100%; margin:0;}
#nav h2 a {margin:22px 0 0 10px;}
#nav p.mypage {margin-right:10px; width:36px; background:none;}
#footer>.wrapper>p {float:none; margin-bottom:30px;}
#footer>.wrapper>div.btm_info {float:none; padding-bottom:20px;}
#footer>.wrapper>div.btm_info>ul>li {float:none; background:none; margin-left:0px; margin-bottom:5px !important; padding-left:0px;}
}

@media all and (max-width:350px) {
#subVisual>div {top:14%;}
#subVisual>div>p.tit {margin-bottom:10px; padding-bottom:13px; font-size:26px;}
}