@charset "utf-8";
@import url('font.css');/* 내부망에서 작업할때는 폰트 폴더를 불러와서 사용 */
@import url('base.css');

#skipnavi{margin: 0; padding:0;}
#skipnavi a{display:block;overflow:hidden;position:absolute;left:0;top:-10000px;}
#skipnavi a:hover,#skipnavi a:focus,#skipnavi a:active{ padding:15px 0; background:#1e2e46;color:#fff;font-size:120%;width:100%;text-align:center;top:0px;z-index:500; text-indent:0;}

body{ display: flex; min-height: 100%; min-height: 100vh; flex-direction: column;}
#container{ flex: 1 auto; flex: 1 0 0; -ms-flex: 1 0 0;}
#container_layer{ flex: 1 auto; flex: 1 0 0; -ms-flex: 1 0 0;}

#header, #container, #footer>div{ max-width: 1600px; width: 100%; margin: 0 auto}
#header, #container_layer, #footer>div{ max-width: 1600px; width: 100%; margin: 0 auto}
#header:before{ content: ''; display: block; position: absolute; top: 75px; background: #006efe; height: 52px; width: 100%; z-index: -1; left: 0}
.headerLogo{ height: 75px;}
.headerLogo a{ display: inline-block; margin: 0 20px; width: 354px; height: 75px; background: url(../../images/saehanjsoft/ci_rpmsEvl.png) no-repeat 50% 50%; font-size: 0; vertical-align: top;}
.head_nav>div{ position: absolute; right: 20px; top: -50px}
.head_nav>div span, .head_nav>div a{ display: inline-block; vertical-align: top}
.head_nav>div span i, .head_nav>div .button:before{ content: ''; display: inline-block; background: url(../../images/saehanjsoft/icon.png) no-repeat; width: 12px; height: 16px; position: relative; top: 2px; margin-right: 3px}
.head_nav>div span strong{ font-weight: 500; color: #006efe}
.head_nav>div .button{ margin-left: 15px; background: #fff; border-radius: 28px}
.head_nav>div .button:before{ background-position: -16px 0; width: 10px}
.head_nav{ height: 52px; width: 100%; padding: 0 20px; position: relative;}
.head_nav>ul{ display: table; width: 100%;}
.head_nav>ul>li{ display: table-cell; width: 20%}
.head_nav>ul>li a{ display: block; line-height: 52px; font-size: 1.1rem; color: #fff; text-align: center; position: relative}
.head_nav>ul>li a:before{ content: ''; display: block; width: 1px; height: 40%; background: rgba(255,255,255,.3); position: absolute; left: 0; top: 30%;}
.head_nav>ul>li:first-child a:before{ width: 0}
.head_nav>ul>li a:hover, .head_nav>ul>li.active a{ font-weight: 600}
.head_nav>ul>li.active a{ position: relative; top: 10px; background: #183762; border-radius: 52px; margin: 0 auto; width: 200px; box-shadow: 0px 4px 3px 0px #0002;}
.hamburger-menu{ display: none}

#container{ padding: 30px 20px 0}
#container h1{ margin-bottom: 35px; font-size: 1.8rem; font-weight: 600; position: relative; padding-left: 10px}
#container h1:before{ content:''; display: block; width: 36px; height: 36px; border-radius: 50%; background: #86e0fa; position: absolute; left: 0; top: 0; z-index: -1}
#container h2{ margin-bottom: 10px; font-size: 1.25rem; font-weight: 600}
#container h3{ margin-bottom: 5px; font-size: 0.95rem; font-weight: 500; position: relative; padding-left: 10px}
#container h3:before{ content: '\2023'; display: block; position: absolute; left: 0; font-size: 1.15rem; line-height: 1}

#container_layer{ padding: 30px 20px 0}
#container_layer h1{ margin-bottom: 35px; font-size: 1.8rem; font-weight: 600; position: relative; padding-left: 10px}
#container_layer h1:before{ content:''; display: block; width: 36px; height: 36px; border-radius: 50%; background: #86e0fa; position: absolute; left: 0; top: 0; z-index: -1}
#container_layer h2{ margin-bottom: 10px; font-size: 1.25rem; font-weight: 600}
#container_layer h3{ margin-bottom: 5px; font-size: 0.95rem; font-weight: 500; position: relative; padding-left: 10px}
#container_layer h3:before{ content: '\2023'; display: block; position: absolute; left: 0; font-size: 1.15rem; line-height: 1}
#container_layer h4{ margin-bottom: 5px; font-size: 0.95rem; font-weight: 500; position: relative; padding-left: 10px}
#container_layer h4:before{ display: block; position: absolute; left: 0; font-size: 1.15rem; line-height: 1}


.grid_info{ font-size: 0.85rem; font-weight: 300; margin-left: 10px}

/* 반응형 테이블 */
.respon_tableArea{ margin-bottom: 20px}
table th, table td{ word-break: break-all;}
.default_table{ border-spacing: 0; table-layout: fixed; display: table; margin-bottom: 10px; width: 100%; border-collapse: collapse; background-color: transparent;}
.default_table tr{ transition: transform .3s ease,visibility .3s ease,opacity .3s ease,-webkit-transform .3s ease;}
.default_table thead tr:first-child th{ border-top: 2px solid #006efe;}
.default_table thead th{ padding: 8px; background:#f9f9fb; border:1px solid #ddd; border-bottom-color: #b0b0b0; color:#323232; font-size: 0.85rem; text-align: center; font-weight: 500}
.default_table tbody th{ background-color:#fff; line-height:1.2;color:#333;}
.default_table tbody td{ border:1px solid #d3d3d3; color:#666; text-align: center; background: #fff}
.default_table tbody tr:hover td, .default_table.dtl.dtlInput tbody tr:hover th, .default_table.dtl.dtlInput tbody tr:hover td{ background: #e9f1fb; color: #336cca}
.default_table tbody th, .default_table tbody td, .default_table tfoot th, .default_table tfoot td{ padding: 5px; border: 1px solid #e2e2e2; font-size: 0.85rem;}
.default_table thead th.txt_al, .default_table tbody td.txt_al, .default_table tbody.txt_al td{ text-align: left}
.default_table tfoot th, .default_table tfoot td{ border-color: #94c8c2; border-top: 2px solid #94c8c2; background: #ebf5f4}

.default_table.dtl tbody tr:first-child{ border-top: 2px solid #006efe;}
.default_table.dtl tbody th{ background:#f9f9fb; text-align: left; font-weight: 400}
.default_table.dtl tbody td{ text-align: left; }
.default_table.dtl tbody tr:hover td{ background: transparent; color: inherit}

.respon_tableArea .default_table .pc_none{ color: transparent}

.scoreChkBr{ display: table; width: 100%; background: #fff; padding: 5px;}
.scoreChkBr li{ display: inline-block; width: 25%; border: 1px solid #ccc; height: 25px; text-align: center; float: left;}
.scoreChkBr li:nth-child(odd){ background: #fafafa}
.scoreChkBr li label{ display: block;  line-height: 25px; font-size: 0.85rem; font-weight: 600}
.scoreChkBr li label input[type='radio']{ vertical-align: top; position: relative; top: 6px; margin-left: 5px;}

.scoreChk{ display: table; width: 100%; background: #fff; padding: 5px}
.scoreChk li{ display: table-cell; width: 20%; border: 1px solid #ccc; height: 25px; text-align: center;}
.scoreChk li:nth-child(odd){ background: #fafafa}
.scoreChk li label{ display: block;  line-height: 25px; font-size: 0.85rem; font-weight: 600}
.scoreChk li label input[type='radio']{ vertical-align: top; position: relative; top: 6px; margin-left: 5px;}

.inputData{ border: 1px solid #c5c6ca; border-radius: 3px; font-size: 0.85rem}
.default_table.dtl.dtlInput tbody tr:hover .inputData{ border-color: #4c89e2}

#footer{ height: 100px; padding: 20px; border-top: 1px solid #ccc; margin-top: 30px}
#footer>a{ display: block; float: left}
#footer>div>div{ display: inline-block; vertical-align: top; padding-left: 30px; font-size: 0.875rem; color: #6d6d6d; font-weight: 300; line-height: 1.8}

/* 로그인 */
.login{ width: 100%; max-width: 600px; margin: 90px auto 0}
.login h1{ text-align: center; margin-bottom: 40px}
.login h1 img{ max-width: 100%;}
.login>div{ padding-top: 105px; position: relative; border-radius: 20px; border: 1px solid #ccc; text-align: center; position: relative; overflow: hidden}
.login>div:before{ content:''; display: block; position: absolute;left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); top: 22px; background: url(../../images/saehanjsoft/icon.png) no-repeat -64px -15px; width: 78px; height: 78px}
.login h2{ font-size: 1.2rem; font-weight: 500; color: #323232}
.login dl{ margin: 7px auto 10px; max-width: 320px; width: 100%;}
.login dl dt{ position: absolute; width: 0; height: 0; overflow: hidden}
.login dl dd{ margin-top: 5px; position: relative; border: 1px solid #ccc; border-radius: 5px; background: #fbfbfb; width: 100%; height: 40px; padding-left: 40px}
.login dl dd:before{ content: ''; display: block; background: url(../../images/saehanjsoft/icon.png) no-repeat -31px -17px; width: 16px; height: 20px; position: absolute; left: 15px; top: 11px}
.login dl dd.pw:before{ background-position: -50px -17px; width: 14px;}
.login dl dd input{ background: transparent; height: 38px; width: 100%;}
.login .button{ width: 100%; max-width: 320px; margin: 0 auto 45px; border-radius: 5px; height: 40px; line-height: 40px;}
.login>div>p{ background: #f0f0f0; padding: 20px 0; font-size: 0.9rem}
.login>div>p:before{ content: ''; display: inline-block; background: url(../../images/saehanjsoft/icon.png) no-repeat 0 -40px; width: 52px; height: 35px; vertical-align: middle; margin-right: 10px}

/* layer */
#showreel_layer{display:none; position:fixed; left:0;top:0; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,.8);}
#showreel_layer.on{display:block;}
.showreel_viewer{position:fixed; left:50%; top:50%; background:#000;}
.showreel_viewer iframe{position:absolute; left:0; top:0; width:100%; height:100%;}
#view_layer .close{overflow:hidden; position:absolute; right:20px; top:20px; width:48px; height:48px; background:url(../../images/saehanjsoft/layer_close_w.png) 0 0 no-repeat; text-indent:-10000em; cursor:pointer; z-index:1000;}
#view_layer{overflow-y:auto; display:none; position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; padding:20px 0 0; box-sizing:border-box;}
#view_layer.on{display:block;}
.view #content{overflow:auto; position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; padding:50px 0 0; margin-top:0; background:rgba(0,0,0,.8); box-sizing:border-box;}
.viewer{overflow:hidden; position:relative; width:96%; margin:0 auto; background:#fff; box-sizing:border-box;}
.viewer .info{text-align:center; position:relative; right:0; top:0; height:100%; background:#efefef; box-sizing:border-box; font-family:'NotoSans'; font-weight:700; font-size:16px; color:#666;}
.viewer .body{overflow-y:auto; position:relative; height:100%;}
.viewer .body.mCS_destroyed{overflow-y:auto; -webkit-overflow-scrolling:touch;}
.viewer .body img{max-width:100%;}
.view footer{visibility:hidden;}
.list .viewer .close{display:block;}
.view .viewer .link{display:block;}

.view #content{padding:20px 0;}
.viewer .info h3{margin-bottom:30px; font-family:'lato'; font-weight:600; font-size:40px; color:#000; line-height:100%; word-break:keep-all; word-wrap:break-word;}
.viewer .info h3::after{display:block; font-family:'NotoSans'; font-weight:600; font-size:20px; color:#333; content:attr(data-smalltitle);}
.viewer .info p{margin-bottom:20px; word-break:keep-all; word-wrap:break-word; font-size:16px;}
.viewer .info a{color:#666; word-break:keep-all; word-wrap:break-word; font-size:14px;}
.viewer .info a:hover{text-decoration:underline;}
.viewer .body p{padding:20px 100px; font-size:16px; font-family:'NotoSans';}
.info{height:auto; padding:20px 1px 1px 1px;}


.inputText{border: 1px solid #c5c6ca; border-radius: 3px; font-size: 0.85rem; width: 100%; text-align: right;}
select { height: 34px; border: 1px solid #c3c3c3; color: #333; padding: 1px 0 4px 3px; font-size: 15px; font-family: "Nanum Gothic"; max-width: 350px;}

@media (max-width: 1023px){
    #header{ border-bottom: 3px solid #e9e9e9}
    #header:after{ content: ''; display: block; width: 100%; height: 1px; background: #b3b3b3}
    #header:before{ display: none}
    .head_nav{ position: absolute; top:0;  bottom: 0; left:-80%; height: 100vh; width: 80%; background: #fff; transition: left 0.8s ease-in-out; z-index: 300; padding: 0; border-right: 1px solid #0003; overflow-y: auto;}
    .head_nav_open{ left: 0px;}
    .mask{ position:fixed; top: 0px; left:-100%; height: 100vh; width:100%; background: #000; opacity:0; z-index: 1;}
    .show{ opacity:0.6; left: 0}

    .head_nav>div{ position: static; height: 80px; padding: 20px 15px 0; background: #006efe; border-bottom: 5px solid #ddd}
    .head_nav>div span, .head_nav>div a{  vertical-align: middle;}
    .head_nav>div span, .head_nav>div span strong{ color: #fff}
    .head_nav>div span i{ width: 35px; height: 35px; border-radius: 50%; background: #fff; vertical-align: middle; margin-right: 10px; text-align: center;}
    .head_nav>div span i:before{ content: ''; display: inline-block; background: url(../../images/saehanjsoft/icon.png) no-repeat; width: 12px; height: 16px; margin-top: 8px;}
    .head_nav>div .button{ position: absolute; right: 0; top: 0; height: 75px;border-radius: 0; border: 0; margin: 0; line-height: 75px; background: #005cd4; color: #fff; font-weight: 500}
    .head_nav>div .button:before{ background-position: -16px -18px; margin-right: 5px}
    .head_nav>ul, .head_nav>ul>li{ display: block; width: 100%}
    .head_nav>ul>li a{ text-align: left; line-height: 55px; color: #000; border-bottom: 1px solid #e1e3e6; font-size: 1rem; text-indent: 1rem; position: relative}
    .head_nav>ul>li a:before{ content: ''; display: inline-block; width: 5px; height: 5px; background: #183762; margin-right: 10px; position: relative; top: -4px}
    .head_nav>ul>li.active a{ position: static; margin: 0; box-shadow: none; border-radius: 0; color: #fff; width: 100%} 
    .head_nav>ul>li.active a:before{ background: #fff}
        
    .hamburger-menu { display: block; z-index: 999;  position: absolute; top: 25px; right: 20px; margin: auto; width: 30px; height: 30px; cursor: pointer;}
    .hamburger { display: block; position: relative; transform: translateY(10px); background: #323232; transition: all 0ms 300ms}
    .hamburger,
    .hamburger:after,
    .hamburger:before {width: 30px; height: 3px;}
    .hamburger:before, .hamburger:after { content: ""; position: absolute;  left: 0; top: auto; bottom: 8px; background: #323232; transition: bottom 0.3s ease-in-out;}
    .hamburger:after { bottom: auto; top: 8px;}
    .hamburger.menu-opened, .hamburger.menu-opened:before, .hamburger.menu-opened:after{ background: #fff}
    .menu-opened:before {  bottom: 3px; transition: bottom 0.3s ease-in-out;}
    .menu-opened:after { top: 3px; transition: top 0.3s ease-in-out;}   
    
    #container{ padding: 1rem .5rem}
    #container_layer{ padding: 1rem .5rem}
    
    /* 반응형 테이블 */
    .respon_tableArea .default_table tbody tr{ border: 1px solid #ddd;}
    .respon_tableArea .default_table tbody tr:before{ content: ''; display: block; width: 100%; height: 1px; background: #333; border-top: 5px solid #fff;}
    .respon_tableArea .default_table tbody tr:first-child:before{ display: none}
    .respon_tableArea .default_table tbody tr:first-child{ border-top: 2px solid #006efe;}
    .respon_tableArea .default_table th, .respon_tableArea .default_table td{ display: block; width: 100%; padding:8px; border: 0; text-align: left !important; box-sizing: border-box; word-break: keep-all; word-wrap: break-word; border-bottom: 1px dashed #ccc; position: relative}
    .respon_tableArea .default_table [data-cell-header]:before{ content: attr(data-cell-header); display: inline-block; min-width: 25%; margin-right: 15px; padding-right: 10px; font-weight: 700; color: #333; border-right: 1px solid #ccc;}
    .respon_tableArea .default_table colgroup, .respon_tableArea .default_table thead th{ display: none}
    .default_table tbody tr:hover td{ background: transparent; color: inherit}
    .respon_tableArea .default_table tbody tr:nth-child(odd) td{ background: #fbfbfb}
    .respon_tableArea .default_table tbody td:last-child{ border-bottom: 0}
    .respon_tableArea .default_table .mlb_none{ display: none}
    
    .respon_tableArea .default_table .fr.button{ position: absolute; right: 8px; top: 5px}
    .respon_tableArea .default_table .txtN{ font-size: 0.85rem; width: auto; height: auto; min-height: 25px; line-height: 1; padding: 0 8px;}
        .respon_tableArea .default_table .icon:before{ display: none}
    .respon_tableArea .default_table .pc_none{ color: inherit}
    
    .scoreChk{ margin: 10px 0 0;}
    .scoreChk li{ height: 35px;  border-top: 1px solid #ababab}
    .scoreChk li label{ text-align: center; line-height: 35px}
    .scoreChk li label input[type='radio']{ top: 10px}
    
    .btnArea{ text-align: center}
    
    #footer{ text-align: center; height: auto; padding: 15px 0 0; background: #f1f1f1}
    #footer:before, #footer div+div{ display: none}
    #footer>a{ float: none}
    #footer div{ display: block; padding: 10px 0; line-height: 1.5}
	
	.inputText{width: 71%; text-align: left;}
}

@media (max-width: 768px){
    #container h1{ text-align: center; border-bottom: 0px solid #ccc; padding: 0 0 5px}
    #container h1:before{ left: auto; margin-left: -10px; display: inline-block;}
    #container_layer h1{ text-align: center; border-bottom: 0px solid #ccc; padding: 0 0 5px}
    #container_layer h1:before{ left: auto; margin-left: -10px; display: inline-block;}
    
    .default_table.dtl, .default_table.dtl tr, .default_table.dtl tbody{ display: block}
    .default_table.dtl tbody th{ font-weight: 500}
    .default_table.dtl tbody th, .default_table.dtl tbody td{ display: block; border-top: 0}
    .default_table.dtl .count{ text-align: center !important}
    
	.list #view_layer, .view #view_layer{padding:0;}
	.view #content{padding:0;}
	.viewer{max-width:none; min-width:auto; min-height:auto;}
	.viewer .info{text-align:center;position:relative; right:0; top:0; width:100%; min-height:auto; box-sizing:border-box;}
	.viewer .info h3{margin-bottom:10px; font-size:20px;}
	.viewer .btn{width:25px;height:25px; background-size:25px auto;}
	
	.info{height:auto; padding:30px 210px 30px 30px;}
    .info #info_inner{width:420px; padding:0px 30px 0; box-sizing:border-box;}
	.info h3 span{margin-right:7px;}
	.info h3 br{display:none;}
	.info h3::after{font-size:16px;}
	.info .logo{position:absolute; right:0; bottom:0; width:21%;}
	.body{min-height:auto;}
	
	.inputText{width: 30%; text-align: left;}
}

@media (max-width: 460px){
    .headerLogo{ height: 60px;}
    .headerLogo a{ margin: 0 0 0 .5rem; background-size: 300px auto; width: 300px; height: 60px;}
    .hamburger-menu { top: 17px}
    
    .login h1{ margin-bottom: 20px}
    .login>div{ border: 0; border-radius: 0}
    .login>div>p{ line-height: 1.2; padding: 10px; margin: 0 10px}
    .login>div>p:before{ content: '\26A0'; background: none; width: auto; height: auto; font-size: 1.15rem; margin: 0 5px; line-height: .5; position: relative; top: -3px;}
}