@charset "utf-8";

.ir-tmpl{background: url(/pcms/common/layout/roleA/images/ir-tmpl.png) no-repeat;}

#top_layout{position:relative;width:100%;height:71px;background-color:#fff;z-index:100;}
#top_layout #logo{position:absolute;top:9px;left:0;width:113px;height:49px;z-index:10}
#top_layout #logo .ir-tmpl{display:block;width:113px;height:49px;margin:0;padding:0;border:none;background-position:0px 0px;font-size:0;line-height:0;}
#top_layout .utile_wrap{position:absolute; top:15px; right:0;z-index:10;}
#top_layout .utile_wrap ul{height:46px;}
#top_layout .utile_wrap li { float:left;margin-left:10px;}
#top_layout .utile_wrap li.text{margin-top: 10px;}
#top_layout .utile_wrap li.text a{font-size:14px;}
#top_layout .utile_wrap li.text.home a{color:#007ef9; text-decoration:underline;}
#top_layout .utile_wrap li.box { width:41px; height: 41px; background: #007dc6;}
#top_layout .utile_wrap li.box button,
#top_layout .utile_wrap li.box a{width:100%; height:100%; display:block;  position:relative; z-index: 0; padding: 0;  border: 0 none;display:block;}
#top_layout .utile_wrap li.box a:after{ position: absolute; display: block; width: 100%; height: 0; bottom: 0; background: #464646; content: ""; z-index: -1; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
#top_layout .utile_wrap li.box a:hover:after,
#top_layout .utile_wrap li.box a:focus:after{background:#464646; height:41px;}
#top_layout .utile_wrap li.box i {display: block;width: 100%;height: 100%;}
#top_layout .utile_wrap li.box .allmenu{background-position:-467px -50px}
#top_layout .utile_wrap li.pc{display:inline-block}
#top_layout .utile_wrap li.mo{display:none}
#gnb_layout{position:relative;height:71px;background-color:#fff;transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;overflow:hidden}
#gnb {position: absolute;top:9px;left: 0;width: 100%;height:57px;z-index:2}
#gnb_layout.action{position:relative;background-color:#fff;}
#gnb_layout .layout{position:relative;padding:0 160px 0 273px;}
#gnb_layout .depth1_ul{display:inline-block;float:right;height:100%;z-index:14;}
#gnb_layout .depth1_ul:after {display: block; content: ''; clear: both;}
#gnb_layout .depth1_ul>li{display:inline-block;height:100%;margin:0 -2px;vertical-align:top}
#gnb_layout .depth1_ul>li>a{display:block;height:100%;padding:6px 30px;line-height:48px;font-size:20px;color:#121212;font-family:"nsr",sans-serif;font-weight:600;letter-spacing:-1px;transition: all .3s;}
#gnb_layout > ul > li.on > a {color: #0050c2;}
#gnb_layout .depth1_ul > li  .depth2_ul {height: 225px; border-left: 1px solid #d8e0e9; margin: 0 -2px 0 0; padding: 22px 0 0; transition: all 300ms cubic-bezier(1, 0, 0, 1); opacity: 0; transform: translateX(50px);}
#gnb_layout .depth1_ul > li  .depth2_ul > li {margin: 10px 0 0; padding: 0 0 0 15px; line-height: 18px; text-align: left;}
#gnb_layout .depth1_ul > li  .depth2_ul > li:first-child {margin-top: 0;}
#gnb_layout .depth1_ul > li  .depth2_ul > li > a {display: inline-block; position: relative; font-weight: 700; font-size: 13px; line-height: 18px; color: #42444a; transition: all .3s; vertical-align: top;}
#gnb_layout .depth1_ul > li  .depth2_ul > li > a:after {display: block; content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: #0050c2; transition: all .3s;}
#gnb_layout .depth1_ul > li  .depth2_ul > li > a:hover,
#gnb_layout .depth1_ul > li  .depth2_ul > li > a:focus {color: #0050c2;}
#gnb_layout .depth1_ul > li  .depth2_ul > li > a:hover:after,
#gnb_layout .depth1_ul > li  .depth2_ul > li > a:focus:after {right: 0; left: 0; width: 100%;}
#gnb_layout .depth1_ul > li:last-child > .depth2_ul {border-right: 1px solid #d8e0e9;}
#gnb_layout .depth1_ul > li  .depth2_ul > li > .depth3_ul{display:none;}
#gnb_layout.open{height:290px;}
#gnb_layout.open .depth1_ul > li .depth2_ul {opacity: 1; transform: translateX(0);}
#gnb_layout.open .depth1_ul > li:nth-child(2) .depth2_ul {transition-delay: .03s;}
#gnb_layout.open .depth1_ul > li:nth-child(3) .depth2_ul {transition-delay: .06s;}
#gnb_layout.open .depth1_ul > li:nth-child(4) .depth2_ul {transition-delay: .09s;}
#gnb_layout.open .depth1_ul > li:nth-child(5) .depth2_ul {transition-delay: .12s;}
#gnb_layout.open .depth1_ul > li:nth-child(6) .depth2_ul {transition-delay: .15s;}
#gnb_layout.open .depth1_ul > li:nth-child(7) .depth2_ul {transition-delay: .18s;}
#gnb_layout.open .depth1_ul > li:nth-child(8) .depth2_ul {transition-delay: .21s;}
#gnb_layout.open .depth1_ul > li:nth-child(9) .depth2_ul {transition-delay: .24s;}
#gnb_layout.open .depth1_ul > li:nth-child(10) .depth2_ul {transition-delay: .27s;}
#gnb_layout .line {display: block; position: absolute; top: 60px; right: 0; left: 0; width: 100%; height: 1px; background: #d8e0e9; opacity: .7;}
#gnb_layout.open #gnb_layout{border-bottom:1px solid #d8e0e9;}
#gnb_layout:after {display: block; content: ''; position: absolute; top: 70px; left: 0; z-index: 1; width: 100%; height: 100%; background: #f0f2f8; transition: all .3s; opacity:0.5;}
@media screen and (max-width:1199px){
#gnb_layout .depth1_ul{float:none;text-align:center}
#gnb_layout .depth1_ul>li>a{padding:6px 20px;font-size:18px;}
#gnb_layout .layout{padding-left:200px}
}
@media screen and (max-width:1023px){
  #gnb_layout{display:none;}
  #top_layout{z-index:auto;}
  #top_layout .utile_wrap li.pc{display:none}
  #top_layout .utile_wrap li.mo{display:inline-block}
}
/* mobile menu */
#mobile-menu{ padding:0 !important;}
#mobile-menu .modal-dialog {-webkit-transform: translate(25%,0); transform: translate(25%,0); margin: 0; width: 250px; max-width: 250px; float:right; height: 100%;}
#mobile-menu.in .modal-dialog,
#mobile-menu.show .modal-dialog {-webkit-transform:translate(-30px,0);transform: translate(-30px,0);}
#mobile-menu .modal-dialog .modal-content { width: 280px; border-radius: 0; border:  0 none; height: 100%;}
#mobile-menu .modal-dialog .modal-content .modal-body { padding:100px 0 30px 0; background:#fff; }
#mobile-menu .modal-dialog .modal-content .modal-body ul { padding: 0; margin:0;}
#mobile-menu .modal-dialog .modal-content .modal-body ul.show {display:block !important;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li { border-bottom: 1px solid #ddd; text-align:left;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul li a{display:block; position:relative; width:100%; padding: 14px 30px; font-size:20px;line-height:1.2;background-color: transparent; text-align: left;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul li a:before { position: absolute;  top: 50%;  right:25px;  width: 12px;  height: 12px;  display: block;  content: "";  border-top: 2px solid #ddd; border-left: 2px solid #ddd;  border-bottom: 2px solid transparent; border-right: 2px solid transparent; transform: translate( 0,-19%) rotate(45deg);}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .on .a:before { transform: translate( 0,-74%) rotate(-136deg);}
#mobile-menu .modal-dialog .modal-content .modal-body .depth2_ul {padding: 15px 30px; border-top:1px solid #ddd;background-color: #f6f6f6;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth2_ul li a {display:block;padding:2px 0;color:#222;font-size:13px;line-height:1.2;font-weight: bold;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth2_ul li a:before{display:none;}