@charset "utf-8";

/* --------------------------------------------------------------------
2020.04.13 pjsuny - 엠로 디자인팀
2020.05.20 pjsuny - 엠로 디자인팀 : 외부 로그인화면 스타일 추가
2020.06.23 pjsuny - 엠로 디자인팀 : 외부 로그인화면 시안 변경
-------------------------------------------------------------------- */

@import url("reset.css");


/* ====  공통 ==== */
html, body {width: 100%;height: 100%;}
header, section, footer, div {box-sizing: border-box;}
.flf {float: left;}
.frg {float: right;}
/* select_화살표 안나오게 */
select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select::-ms-expand {display: none}

/* ==== out login (외부) ==== */
body.out {position: relative;} 
.wrap {position: relative;display: flex;flex-direction: column;align-content: space-between;width: 100%;height: 100%;min-height: 1100px;background: #f8f8f7;}
header {width: 100%;height: 96px;border-bottom: 1px solid #e5e5e5;background: #fff;text-align: center;}
header>h1 {padding-top: 15px;}
/* .body_wrap {width: 100%;height: 100%;min-height: 700px;} */
footer {width: 100%;margin-top: auto;background: #888888;}
footer .footer_wrap {position: relative;width: 1200px;min-height: 60px;margin: 30px auto 20px;}
.contain {
    position: absolute;
    top: 180px;
    left: 50%;
    width: 1068px;
    height: 720px;
    margin-left: -534px;
    overflow: hidden;
}
.contain .left_zone {float: left;width: 680px;margin-right: 10px;}
.contain .right_zone {float: right;width: 378px;padding-top: 62px;}
.visual {position: relative;width: 100%;min-height: 300px;background: url(../img/visual.jpg) no-repeat;}
.visual .headcopy {position: absolute;top: 75px;right: 25px;}
/* login */
.login_box {width: 100%;height: 416px;border: 2px solid #f05c53;background: #fff;padding: 57px 40px;}
.tab {overflow: hidden;}
.tab li {float: left;display: inline-block;width: 50%;vertical-align: top;box-sizing: border-box;}
.tab li a {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #b89998;     
    padding: 0 0 15px 0; 
    text-align: center; 
    transition: 0.3s; 
    font-size: 18px; 
    font-weight: 600;
    line-height: 1;
    color: #906f6f;
    cursor: pointer; 
}
.tab li.active a, .tab a:hover  {border-bottom: 1px solid #d73232;color: #d61919;}
.tab_content {display: none;}/*  min-height: 254px; */
.tab_content>div:first-child {min-height: 181px;}
.tab_content.active{display: block}
#tab2 .login_form {padding-top: 28px;}
.login_form {width: 100%;margin-top: 20px;}
.login_form>p>input[type="text"],
.login_form>p>input[type="password"],
.login_form>.select_box select {
    width: 100%;
    height: 42px;
    border-radius: 5px;
    border: 1px solid #c7c7c7;  
    background: #fff;
    letter-spacing: 0;
    font-family: Arial;
    color: #111;
    font-size: 14px;
    padding: 0 20px;
    box-sizing: border-box;
}
.login_form input {margin-bottom: 6px;}
.select_box select {background: #fff url(../img/login_form.png) no-repeat 265px -86px !important;color: #000000!important;font-weight: 500; }
.option {overflow: hidden;margin-top: 20px;}
.option>p, .option>a {display: inline-block;font-size: 13px;color: #574040;font-weight: 600;vertical-align: middle;letter-spacing: -1px;}
.option>p {float: left;}
.option>p>input {vertical-align: top;}
.option>a {float: right;}
.option>a:hover {color: #400000;}
.option>a>i {line-height: 1;vertical-align: top;}
.btn_login, .btn_regist {display: block;width: 100%;height: 56px;border-radius: 5px;font-size: 18px;text-align: center;line-height: 3.2;font-weight: 500;}
.btn_login {background: #d73232;margin-top: 17px;color: #fff;font-family: Arial;}
.btn_login:hover {background: #710000;}
.btn_regist {background: #eda9a7;margin-top: 10px;color: #b93b3b;font-weight: 600;letter-spacing: -1px;}
.btn_regist:hover {background: #710000;color: #fff;font-weight: 500;}
/* NOTICE */
.notice {width: 100%;height: 230px;border: 1px solid #d2d2d2;background: #fff;padding: 40px;}
.notice>h3 {display: block;overflow: hidden;font-size: 20px;color: #222;line-height: 1;font-weight: 600;letter-spacing: -1px;padding-bottom: 25px;}
.notice>h3>.more {float: right;display: inline-block;width: 22px;height: 22px;background: #d73232 url(../img/splogin.png) no-repeat 0 0;font-size: 0;}
.notice>h3>.more:hover {background-color: #710000;}
.notice .article {width: 100%;clear: both;border:1;}
.notice .article>a {overflow: hidden;display: block;width: 100%;font-size: 15px;padding-bottom: 12px;}
.notice .article>a:last-child {padding-bottom: 0;}
.notice .article>a>span:nth-child(1) {float: left;width: 75%;color: #333;letter-spacing: -1px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.notice .article>a>span:nth-child(2) {float: right;width: 25%;color: #999;text-align: right;}
.notice .article>a:hover>span {color: #e00529;}
.notice + hr {height: 1px;border: 0;background: #eaeaea;margin: 40px 0;}

.notice_all {width: 100%;height: 230px;background: #fff;}
.notice_lgas {float:left; width: 50%;height: 100%;border: 1px solid #d2d2d2;background: #fff;}
.notice_rgas {float:right; width:49%;height: 100%;border: 1px solid #d2d2d2;background: #fff;}
.notice_gas {width: 100%;height: 100%;border: 1px solid #d2d2d2;background: #fff;padding: 10px;}
.notice_gas>h3 {display: block;overflow: hidden;font-size: 15px;color: #222;line-height: 1;font-weight: 600;letter-spacing: -1px;padding-bottom: 25px;}
.notice_gas>h3>.more {float: right;display: inline-block;width: 22px;height: 22px;background: #d73232 url(../img/splogin.png) no-repeat 0 0;font-size: 0;}
.notice_gas>h3>.more:hover {background-color: #710000;}
.notice_gas .article {width: 100%;clear: both;border:1;}
.notice_gas .article>a {overflow: hidden;display: block;width: 100%;font-size: 13px;padding-bottom: 12px;}
.notice_gas .article>a:last-child {padding-bottom: 0;}
.notice_gas .article>a>span:nth-child(1) {float: left;width: 75%;color: #333;letter-spacing: -1px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.notice_gas .article>a>span:nth-child(2) {float: right;width: 25%;color: #999;text-align: right;}
.notice_gas .article>a:hover>span {color: #e00529;}
.notice_gas + hr {height: 1px;border: 0;background: #eaeaea;margin: 40px 0;}

.noticemain {width: 100%;height: 760px;border: 1px solid #d2d2d2;background: #fff;padding: 40px;}
.noticemain>h3 {display: block;overflow: hidden;font-size: 20px;color: #222;line-height: 1;font-weight: 600;letter-spacing: -1px;padding-bottom: 25px;}
.noticemain>h3>.more {float: right;display: inline-block;width: 22px;height: 22px;background: #d73232 url(../img/splogin.png) no-repeat 0 0;font-size: 0;}
.noticemain>h3>.more:hover {background-color: #710000;}
.noticemain .article {width: 100%;clear: both;}
.noticemain .article>a {overflow: hidden;display: block;width: 100%;font-size: 15px;padding-bottom: 12px;}
.noticemain .article>a:last-child {padding-bottom: 0;}
.noticemain .article>a>span:nth-child(1) {float: left;width: 75%;color: #333;letter-spacing: -1px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.noticemain .article>a>span:nth-child(2) {float: right;width: 25%;color: #999;text-align: right;}
.noticemain .article>a:hover>span {color: #e00529;}
.noticemain + hr {height: 1px;border: 0;background: #eaeaea;margin: 40px 0;}
.noticemain .paging {float: center; width:200px; height:20px; border:1px solid #d2d2d2; background:#fff; padding:10px 10px 10px 10px; box-sizing:border-box;}

/* HELPDESK */
.panel {overflow: hidden;}
.helpdesk {float: left;width: 406px;height: 170px;border: 1px solid #d2d2d2;background: #fff;margin-right: 10px;padding: 36px 40px;box-sizing: border-box;}
.helpdesk>h3 {overflow: hidden;margin-bottom: 25px;}
.helpdesk>h3>b, .helpdesk>h3>span {display: inline-block;vertical-align: baseline;letter-spacing: -.4px;}
.helpdesk>h3>b {float: left;font-size: 23px;color: #ea002c;font-weight: 600;line-height: 1;}
.helpdesk>h3>.timeinfo {float: right;border-bottom: 1px solid #d2d2d2;font-size: 12px;color: #a9a9a9;font-weight: 300;line-height: 1.6;padding-top: 2px;}
.helpdesk>p {overflow: hidden;padding: 5px 0;}
.helpdesk>p>span, .helpdesk>p>b {display: inline-block;vertical-align: middle;line-height: 1;}
.helpdesk>p>span {float: left;width: 182px;color: #888;font-size: 16px;font-weight: 600;letter-spacing: -1px;padding-top: 4px;}
.helpdesk>p>.callnum {float: right;color: #ea002c;font-size: 21px;letter-spacing: -.5px;}
/* BANNER */
.banner {float: right;width: 264px;height: 170px;border: 1px solid #d2d2d2;background: #fff;}
.banner>a {display: block;width: 100%;height: 85px; border-bottom: 1px solid #d2d2d2;padding: 19px 30px;box-sizing: border-box;}
.banner>a:last-child {border-bottom: 0;}
.banner>a>b {font-size: 16px;color: #3c3c3c;letter-spacing: -1px;font-weight: 600;}
.banner>a>i {display: inline-block;width: 38px;height: 47px;background: url(../img/splogin.png) no-repeat;margin-right: 15px;vertical-align: middle;}
.banner>a>i.winaca {background-position: 0 -346px;}
.banner>a>i.ethics {background-position: 0 -459px;}
.banner>a:hover>b {color: #e00529}
.banner>a:hover>i.winaca {background-position: -162px -346px;}
.banner>a:hover>i.ethics {background-position: -162px -459px;}
/* skmr 윤리, 행동규범  추가 : 2022.07.20 psh*/
.banner1 {float: right;width: 264px;height: 90px; margin-top: 10px;}
.ethicespan {width: 125px; height: 81px; display: inline-block; text-align: center; line-height: 60px; border: 1px solid #d2d2d2; background: #fff url(../img/sparrow.png) 50% 78%/25px no-repeat; margin-right: 2px; font-weight: bold; font-size: 15px;}
.ethicespan:hover {color: #e00529; cursor: pointer; }


/* 기존거래처아이디생성 추가(기존 스타일 변경) : 2020.09.01 pjsuny*/
.link>div:nth-child(1) {display: flex;justify-content: space-between;margin-top: 10px;margin-bottom: 8px;}
.link>div:nth-child(1)>a {display: inline-block;width: 185px;height: 129px;text-align: center;padding-top: 25px;}
.link a {box-sizing: border-box;}
.link a b {font-size: 18px;line-height: 1.6;}
.link a:hover {background: #000;color: #fff;}
.link>div:nth-child(1)>a i {display: block;margin: 0 auto 15px;}
.link>div:nth-child(1)>a.creatid i  {width: 35px;height: 28px;background: url(../img/icon_creaid.png) no-repeat;opacity: .5;}
.link>div:nth-child(1)>a.regist  i {width: 29px;height: 30px;background: url(../img/icon_regist.png) no-repeat;opacity: .5;}
.link>div:nth-child(1)>a b {display: block;color: #fff;font-weight: 500;line-height: 1.2;}
.creatid {background: #797979;}
.regist {background: #4d4d4d;}
.regist>b {line-height: 2.2 !important;}
.link .certif {display: block;width: 100%;height: 84px;background: #fff;border: 1px solid #d2d2d2;padding: 28px 35px 0 40px;color: #333;}
.link .certif b:after {content: '';display: inline-block;width: 34px;height: 34px;border-radius: 50%;background: #c7c7c7 url(../img/splogin.png) no-repeat 7px -559px;vertical-align: top;float: right;}


/* FOOTER */
.footer_wrap .footer_cont {position: absolute;left: 0;}
.footer_wrap .logo_f {display: inline-block;height: 56px;vertical-align: top;margin-right: 20px;font-size: 0;}
.footer_wrap .logo_f.skc {width: 96px;background: url(../img/footer_ci_skc.png) no-repeat;}
.footer_wrap .logo_f.skgas {width: 92px;height: 62px;background: url(../img/footer_ci_skgas.png) no-repeat;}
.footer_wrap .logo_f.skens {width: 101px;background: url(../img/footer_ci_skens.png) no-repeat;}
.footer_wrap .logo_f.skmatls {width: 75px;background: url(../img/footer_ci_skmatls.png) no-repeat;}
.footer_wrap .logo_f + div {display: inline-block;}
.footer_wrap .logo_f + div .fnb>a {display: inline-block;font-size: 14px;color: #e9e9e9;letter-spacing: -1px;padding: 0;}
.footer_wrap .logo_f + div .fnb>a:first-child:after {content: '';display: inline-block;width: 1px;height: 12px;background: #d8d8d8;margin-left: 9px;vertical-align: baseline;}
.footer_wrap .logo_f + div .fnb>a:last-child:before {content: '';display: inline-block;width: 1px;height: 12px;background: #d8d8d8;margin-right: 5px;vertical-align: baseline;}
.footer_wrap .logo_f + div .fnb>a:hover {text-decoration: underline;}
.footer_wrap .logo_f + div .copyright {display: block;font-size: 12px;color: #c4c4c4;padding-top: 10px;}
.footer_wrap .logo_f + div .copyright>span {display: block;line-height: 1.3;}
.footer_wrap .relation {position: absolute;right: 0;width: 250px;height: 32px;border: 1px solid #bababa;background: transparent;}
.footer_wrap .relation .btn_relat {position: relative;display: block;width: inherit;height: inherit;font-size: 14px;color: #d2d2d2;padding: 0 16px;line-height: 2;box-sizing: border-box;}
.footer_wrap .relation .btn_relat:after {content: "";display: block;position: absolute;top: 50%;right: 15px;width:12px; height:6px;margin-top: -4px;background: url(../img/arr_relat.png) 50% 0 no-repeat; }
.footer_wrap .relation ul {position: absolute;bottom: 31px;left: -1px;width: 100%;background-color: #fff;border: #e0e0e0 1px solid;padding: 10px 0;display: none;}
.footer_wrap .relation>ul>li>a{line-height: 28px;font-size: 14px;color: #555;padding: 0 16px;white-space: nowrap;display: block;}
.footer_wrap .relation>ul>li>a:hover{color: #e00529;}

.footer_wrap .relation>ul>div>li>a{line-height: 28px;font-size: 14px;color: #555;padding: 0 16px;white-space: nowrap;display: block;}
.footer_wrap .relation>ul>div>li>a:hover{color: #e00529;}



/* ==== in login (내부) ==== */
body.in {background: #f7f7f7;}
.in_container {position: absolute;top: 50%;left: 50%;width: 390px;height: 490px;margin-top: -256px;margin-left: -195px;text-align: center;}
.in_container section {height: inherit;background: #fff;padding: 70px 60px 40px;box-shadow: 4px 5px 25px #e8e8e8;}
.in_container section h1 {width: 100%;}
.in_container section h1 .logo {width: 100%;height: 40px;background: url(../img/bi_skwithus_in.png) no-repeat center;font-size: 0;line-height: 0;}
.in_container section h1 i.bar {display: block;width: 26px;height: 2px;background: #ff0000;margin: 20px auto 15px auto;}
.in_container section h1 p {font-family: Noto Sans, Arial;font-size: 16px;color: #9a9a9a;line-height: 1;}
.in_container section .text_form {padding: 40px 0 26px;}
.in_container section .text_form p {margin-bottom: 7px;}
.in_container section .text_form>p>input[type="text"],
.in_container section .text_form>p>input[type="password"],
.in_container section .text_form .select_box select {
    width: 100%;
    height: 38px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    background: #fafafa;
    box-sizing: border-box;
    letter-spacing: 0;
    font-family: Noto Sans, Arial;
    color: #333;
    font-size: 14px;
    padding: 0 30px 0 20px;
}
.in_container section .text_form>p>label {position: absolute;right: 60px;width: 32px;height: 38px;}
.in_container section .text_form>p>label[for="userid"] {background: url(../img/login_form.png) no-repeat 0 3px;}
.in_container section .text_form>p>label[for="password"] {background: url(../img/login_form.png) no-repeat 0 -40px;}
.in_container section .text_form .select_box select {
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    background: #fafafa url(../img/login_form.png) no-repeat 238px -88px !important;
    padding: 0 20px;
    color: #bababa;
    box-sizing: border-box;
    cursor: pointer;
}
.in_container section .text_form + a.btn {
    display: block;
    width: 100%;
    height: 50px;
    background: #ec1c43; 
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0;
    font-family: Noto Sans, Arial;
    margin-bottom: 15px;
    line-height: 50px;
}
.in_container section .text_form + a.btn:hover {background: #ce0328;}
.in_container section .check_box {font-size: 13px;color: #939393;}
/* ==== CheckBox ==== */
.in_container .checks {position: relative;}
.in_container .checks input[type="checkbox"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0;}  /* 실제 체크박스는 화면에서 숨김 */
.in_container .checks input[type="checkbox"] + label {display: inline-block;position: relative;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
.in_container .checks input[type="checkbox"] + label:before {content: '';display: inline-block;width: 18px;height: 18px;border: 1px solid #ceced4;border-radius: 50%;vertical-align: middle;margin-right: 6px;margin-top: -2px;} /* 가짜 체크박스 */
.in_container .checks input[type="checkbox"]:checked + label:before { content: '';background: url(../img/login_form.png) no-repeat 0 -126px;}/* 체크박스를 체크했을때 */
.in_container .checks input[type="checkbox"]:focus + label:before { box-shadow:0 0 3px #d8d8d8;} /*체크표시 후 쉐도우 및 탭이동시 표시 */

/* ==== find ID, Password : 2020.08.18 pjsuny ==== */
sc-window {
	border: 1px solid #403635 !important;
}
sc-window>.header {
background-color: #403635 !important;
}
sc-window>.content-wrap>.content {
	border-radius: 0 !important;
	overflow: hidden;
}
sc-window>.header>sc-button {
	background-color: #5f6061;
}
sc-window>.header>sc-button:hover {
	background-color: #d53a3a !important;
}
.sel_box {
	padding: 20px 30px;
    box-sizing: border-box;
}
.sel_box > ul > li {
	width: 100%;
	text-align: left;	
	padding-bottom: 10px;
}
li.active .menu_link {
	position: relative;
	padding-left: 5px;
	background: #fff;
    border-bottom: 0;
    color: #333;
    font-weight: 600;
    font-size: 17px; 
}
li.active .menu_link::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 4px;
    left: -5px;
	width: 3px;
	height: 17px;
	background: #d53a3a;
	border-radius: 2px;
	margin-right: -5px;
}
.sel_content>.help_txt {
	position: relative;
	padding-left: 8px;
    color: #777777;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 15px;
}
.sel_content>.help_txt::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 10px;
    left: 0;
	width: 3px;
	height: 3px;
	background: #848484;
	border-radius: 5px;
}
.sel_content .content {
    padding: 40px;
    margin-bottom: 20px;
    background: #f5f5f5; 
}
.sel_content .content li {
	margin-bottom: 10px;
}
.sel_content .content li:last-child {
	margin-bottom: 0;
}
.sel_content .content li span {
	display: inline-block;
	position: relative;
	width: 30%;
	padding-left: 10px;
    line-height: 1.8;    
    color: #666666;
    font-size: 13px;
    vertical-align: middle;
    box-sizing: border-box;
}
.sel_content .content li span::before {
    content: '';
	display: inline-block;
	position: absolute;
	top: 11px;
    left: 0;
	width: 2px;
	height: 2px;
	background: #848484;
	border-radius: 5px;	
    box-sizing: border-box;
}
.sel_content .content li input {
	padding: 0 10px;
	width: 70%;
    height: 30px;
    border: 1px solid #b8b8b8;
    border-radius: 5px;
    box-sizing: border-box;
}
.base_btn {
	text-align: center;
}
.base_btn a {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 5px;
    background: #615756;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;   
}
.base_btn a:hover {
    background: #d53a3a;  
}
sc-window>.content-wrap>.content {/*2020.08.25 pjsuny-개인정보처리방침 세로스크롤 숨김*/
	overflow-y: hidden !important;
}


/* ==== Open Popup : 2020.08.31 add ==== */
.popWrap {width: 800px;height: 100%;border: 0px solid #e4e4e9;box-sizing: border-box;}
.popWrap>.header {overflow: hidden;width: 100%;height: 50px;background: #d73232;padding-top: 10px;padding-left: 30px;box-sizing: border-box;}
.popWrap>.header>h2 {display: inline-block;width: auto;height: 100%;vertical-align: top;}
.popWrap>.header>h2>.logo {display: block;width: 131px;height: 30px;background: url(../img/bi_skwithus_w.png) no-repeat;font-size: 0;}
.popWrap>.header>a {display: inline-block;float: right;width: 21px;height: 21px;background: url(../img/close_btn.png) no-repeat;margin: 3px 20px;font-size: 0;}
.popWrap>.container {width: 100%;height: auto;padding: 60px 55px;box-sizing: border-box;}
.popWrap>.container .section {text-align: left;}
.open .section:nth-child(1) {height: 250px;background: url(../img/open_monitor.png) no-repeat 50px 0;}
.open .section:nth-child(1) p {font-size: 18px;color: #7f8082;line-height: 1.5;}
.open .section:nth-child(1) p:nth-child(1) {font-size: 32px;color: #555;line-height: 1.6;letter-spacing: -1.5px;padding: 20px 0 0 270px;text-align: center;}
.open .section:nth-child(1) p:nth-child(1)>b {font-size: 48px;color: #d73232;}
.open .section:nth-child(1)>i {display: block;width: 50px;height: 2px;background: #b3d8f7;margin: 25px auto;}
.open .section:nth-child(2) {width: 100%;margin-top: 30px;border: 1px solid #e7e8ea;border-radius: 10px;background: #f5f5f5;padding: 30px;box-sizing: border-box;}
.open .section:nth-child(2) p {font-size: 15px;color: #222;line-height: 1.8;letter-spacing: -0.5px;}
.popWrap .btnarea {margin-top: 50px;text-align: center;}
.popWrap .btnarea>a {display: inline-block;width: 120px;height: 40px;background: #34373e;text-align: center;color: #fff;font-size: 16px;line-height: 2.5;}
.popWrap .btnarea>a:hover {background: #d73232;}