@charset "utf-8";

/* ----------------------------
1st : 2024.10.07 jiyeong.hong - 디자인팀
2nd : 2024.11.07 sancheon.yang - 디자인팀
---------------------------- */

:root {
	/* font-color */
    --font-color-main: #000;
    --font-color-sub: #666;
    --font-color-sub-02: #888;
    /* font-size */
    --font-size-bc: 11px; /* sc-bc */
    --font-size-lv1: 12px; /* mdi-tab, button, result */
    --font-size-lv2: 13px; /* default */
    --font-size-lv3: 14px; /* sub-sub-title */
    --font-size-lv4: 16px; /* sub-title, panel-title */
    --font-size-lv5: 18px; /* title(page, popup) */
    --font-size-lv6: 20px; /* title(notice popup) */
    /* color */
    --main-color: #3059F4; /* blue */
    --main-color-btn: #5072F2; /* blue, button */
    --main-color-dark: #001C5A; /* dark blue, button:hover */
    --main-color-lv1: #F5F7FB; /* blue lv1 */
    --main-color-lv2: #EBEEF6; /* blue lv2 */
    --main-color-lv3: #8ca4df; /* blue lv3 */
    --main-color-lv4: #6C87EB; /* blue lv4 */
}

body{
	overflow: auto !important;
	position: relative;
	line-height: 1.2;
}
/* login */
.container{
	width:100%;
	height:100%;
	min-width: 1366px;
	min-height: 800px;
	position:relative;
}
/* 메인 이미지 */
.slick-initialized .slick-slide {
    height: 100vh !important;
    min-height: 800px;
}
.container .mainSlick .loginbg1{
	background: radial-gradient(transparent, #a2a2a2), url(../img/loginbg1.jpg) no-repeat;
	background-size: cover;
	background-blend-mode: multiply;
}
.container .mainSlick .loginbg2{
	background: radial-gradient(transparent, #a2a2a2), url(../img/loginbg2.jpg) no-repeat;
	background-size: cover;
	background-blend-mode: multiply;
}
.container .mainSlick .loginbg3{
	background: radial-gradient(transparent, #a2a2a2), url(../img/loginbg3.jpg) no-repeat;
	background-size: cover;
	background-blend-mode: multiply;
}
.container .mainSlick .loginbg4{
	background: radial-gradient(transparent, #a2a2a2), url(../img/loginbg4.jpg) no-repeat;
	background-size: cover;
	background-blend-mode: multiply;
}
/* 로그인 폼 */
.container .conLayout{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 169px;
}
.container .conLayout .sysName{
    font-family: 'NotoSansKR';
	font-weight: 700;
	white-space: nowrap;
}
.container .conLayout .sysName p:first-child {
	font-size: 72px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}
.container .conLayout .sysName p:nth-child(2)::before {
	content: '';
	display: block;
	width: 235px;
	height: 2px;
	background: rgba(255,255,255,0.5);
	margin: 20px 0;
}
.container .conLayout .sysName p:nth-child(2) {
	font-size: 52px;
	color:rgba(255,255,255,.54);
}
.container .conLayout .loginLayout{
	width:510px;
	background: #fff;
	border-radius: 18px;
	padding: 50px 55px 40px;
}
.container .conLayout .loginLayout .loginBox{
	position: relative;
	margin-bottom:30px
}
.container .conLayout .loginLayout .loginBox h1{
	font-size: 34px;
	font-weight: 500;
}
.container .conLayout .loginLayout .loginBox .loginBoxTxt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}
.container .conLayout .loginLayout .loginBox p{
	color: var(--font-color-sub);
	font-weight: 500;
	font-size: 14px;
}

/*언어선택*/
.lan_switch {
    height: 22px;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
}
.lan_switch::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../img/ico_lang_select.svg) no-repeat center;
    margin-right: -2px;
}
  .lan_switch>a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: var(--font-color-sub);
	line-height: 20px;
	font-size: 12px;
	font-weight: 500;
	text-align: right;
	transition: all .2s;
	z-index: 10;  
  }
  .lan_switch .langicon {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 22px;
	overflow: hidden;
	vertical-align: middle;
	color: #fff;
  }
  .lan_switch .langicon:before {
	background: url(../img/arr_loginSelect.svg) no-repeat;
	content: "";
	width:5px;
	height:3px;
	display: inline-block;
	position: absolute;
	right:5px;
	top:10px
  }
  .lan_switch .langicon.rotate::before {
	transform: rotate(180deg);
  }
  .lan_switch ul {
	position: absolute;
	top: 24px;
	right:0;
	width: 51px;
	text-align: left;
	z-index: 99;
	margin-bottom: 20px;
	margin-left: -1px;
	background: #fcfcfc;
	border-radius: 7px;
	padding: 5px 0;
	display: none;
	line-height: 22px;
	border:1px solid #E8E8E8;
	box-shadow: 1px 1px 3px 0 #E8E8E8;
  }
  .lan_switch ul li a {
	display: block;
	position: relative;
	font-size: 12px;
	font-weight: 600;
	color: var(--font-color-sub);
	padding-left:10px
  }
  .lan_switch ul li a:hover {
	color: #0057FF
  }
  .lan_switch ul.active {
	display: block;
  }
.container .conLayout .loginLayout fieldset input{
	height:50px;
	background-color: #F2F2F2;
	border:1px solid #F2F2F2;;
	border-radius: 7px;
	margin-bottom:10px;
	padding:0 20px;
	font-size: 14px;
	font-family: "NotoSansKR";
	transition-duration: .2s;
    transition-timing-function: ease-in-out;
    will-change: transform;
    box-sizing: border-box;
}
.container .conLayout .loginLayout fieldset input:hover,
.container .conLayout .loginLayout fieldset input:focus{
	border:1px solid #3059F4
}
.container .conLayout .loginLayout fieldset input::placeholder{
	color:#888 !important;
	font-weight:400
}

/* input-style */
.checks {
	position: relative;
	margin: 6px 0 37px
}
.checks .elements{
	display:flex;
	justify-content:space-between
}
.checks .elements input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0
}
.checks .elements input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
	font-size: 14px;
	margin-top:6px;
	font-weight: 300;
    color:#000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.checks .elements input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
    content: ' ';
    display: inline-block;
    width: 15px;  /* 체크박스의 너비를 지정 */
    height: 15px;  /* 체크박스의 높이를 지정 */
    line-height: 15px; /* 세로정렬을 위해 높이값과 일치 */
    margin: -4px 7px 0 0;
    text-align: center;
    vertical-align: middle;
    background: #fff url(../img/check_disabled.svg) no-repeat 50% 50%;
    border: 1px solid #D6D6D6;
    border-radius : 2.5px;
}
.checks .elements input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */
    content: '';  /* 체크표시 유니코드 사용 */
    color: #ffffff;
    font-size:11px; /*체크표시 크기*/
    font-weight:600; /*체크표시 굵기*/
    background: #0057FF url(../img/check_disabled.svg) no-repeat 50% 50%;
}
.checks .enterBox {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}
.checks .elements .saveCk{
	width:50%
}
.checks .elements .findBtn{
	width:50%;
	text-align:right
}
.checks .elements .findBtn a,
.checks .elements .findBtn button{
    display: inline-block;
	color: #222;
	background: transparent;
	border:0;
	font-size: 13px;
	font-weight: 400;
	padding:0 2px;
	text-decoration: underline;
	text-underline-offset: 2px;
    line-height: 1.5;
}
.checks .elements .findBtn a:hover,
.checks .elements .findBtn button:hover{
	color:#0053F2;
}
.checks .elements .findBtn span{
	display: inline-block;
	font-size: 24px;
	vertical-align: middle;
	color: #222;
}
.checks .enterBox .enterBtn{
	background:#0057FF;
	color:#fff;
	text-align:center;
	font-size:15px;
	font-weight:500;
	width:100%;
	height:40px;
	line-height:40px;
	border:0;
	border-radius: 50px;
	transition-duration: .2s;
    transition-timing-function: ease-in-out;
    will-change: transform
}
.checks .enterBox .enterBtn:hover{
	background:#001C5A;
}

/* 베너 */
.container .conLayout .loginLayout .banner{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 10px;
}
.container .conLayout .loginLayout .banner.en {
	grid-template-columns: 1fr;
}
.container .conLayout .loginLayout .banner a {
    display: inline-flex;    
    text-align: left;
    align-items: center;
	color:var(--font-color-main);
	font-size: 14px;
	font-weight: 600;
	line-height: 44px;
	letter-spacing: -0.5px;
	padding: 0 16px 0 28px;
	border:1px solid #DDE3F2;
	border-radius: 8px;
	background: #fff;	
}
.container .conLayout .loginLayout .banner a[onclick="subMailMFAAuthentication()"] {
	justify-content: center;
}
.container .conLayout .loginLayout .banner a[onclick="subMailMFAAuthentication()"]::before {
    display: none;
}
.container .conLayout .loginLayout .banner.en a {
	justify-content: start;
    padding: 0 80px 0 93px;
}
.container .conLayout .loginLayout .banner a:hover {
	border:1px solid var(--main-color);
	color: var(--main-color); 
}
.container .conLayout .loginLayout .banner a::before {
	content: '';
	width: 26px;
	height: 26px;
	background: no-repeat center;
	margin-right:10px;
}
.container .conLayout .loginLayout .banner a.partner-portal::before {
	background-image: url(../img/ico_link-partner-portal.svg);
}
.container .conLayout .loginLayout .banner a.esg::before {
	background-image: url(../img/ico_link-esg.svg);
}
.container .conLayout .loginLayout .banner a.suggest::before {
	background-image: url(../img/ico_link-suggest.svg);
}
.container .conLayout .loginLayout .banner a.problem-voc::before {
	background-image: url(../img/ico_link-problem-voc.svg);
}
.container .conLayout .loginLayout .banner a.list-4th::before {
	background-image: url(../img/ico_link-list-4th.svg);
}
.container .conLayout .loginLayout .banner a.conduct::before {
	background-image: url(../img/ico_link-conduct.svg);
}

/* 서비스데스크 매뉴얼다운로드 */
.service {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 36px
}
.service .serviceDesk{
	font-size: 12px;
	font-weight: 500;
	color:#697691;
	padding-left: 18px;
}
.service .serviceDesk .num::before{
	content: '';
	display: inline-block;
	background: url(../img/icon_serviceDesk.svg);
	width:14px;
	height:14px;
	margin-right:4px;
	margin-left: -19px;
	vertical-align: -2px;
}
.service .sdNum{
	font-size: 14px;
	color:#273961;
	font-weight: 500;
	margin-left:5px;
}
.service .serviceDesk .mail {
    color: #273961;
}
.manual-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.downloadManual {
	min-width: 140px;
	height:24px;
	line-height: 24px;
	background: #1428A0;
	border-radius: 16px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	padding: 0 18px;
}
.service .manual-wrap .manual{
	color:#7094D9;
	font-weight: 600;
	text-decoration:underline;
	text-align:center;
	background:#fff
}
.service .manual-wrap .manual:hover{
	color:#0057FF
}
.service .manual-wrap .manual.faq {
	background: #7E1CA4;
}
.service .manual-wrap .signup{
	min-width: 112px;
	height:24px;
	line-height: 24px;
	background: #7094D9;
	border-radius: 16px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	padding: 0 18px;
}
.service .manual-wrap .signup:hover{
	color:#fff;
	background: #0057FF;	
}

/* 푸터 */
.container footer {
    position: absolute;
    bottom: 37px;
    left: 50%;
    transform: translateX(-50%);
}
.container footer,
.container footer ul {
	display: inline-flex;
	align-items: center;
	gap: 20px;
}
.container footer ul {
	gap: 0;
}
.container footer ul.btn_rounded {
	gap: 4px;
	margin-right: 17px;
}
.container footer ul.btn_rounded li a {
	background:rgba(0,0,0,.4);
	color:#fff;
	padding:0 30px;
	border-radius: 28px;
	font-size: 13px;
	height:28px;
	line-height:28px
}
.container footer ul.btn_rounded li a:hover{
	background:rgba(255,255,255, 1);
	color:#000;
}
.container footer span {
	color:rgba(255,255,255, .5);
	font-weight: 100;
}
.container footer .samsungLogo {
	background: url(../img/samsungLogo.svg);
	width:84.72px;
	height:12px;
	margin-left:7px;
	display: inline-block;
}
.container footer ul.btn_terms li {
	height: 13px;
}
.container footer ul.btn_terms li a {
	font-size: 12px;
	color:#b2b2b2;
	font-weight: 400;
	padding:0 10px;
	line-height: 13px;
}
.container footer ul.btn_terms li a:hover{
	text-decoration:underline ;
}
.container footer ul.btn_terms li a.privacy_login,
.container footer ul.btn_terms li a[onclick="showPrivacyPopup()"] {
	color:#fff;
}
.container footer ul.btn_terms li+li::before {
    content: '';
    display: inline-block;
    width: 2px;
    height: 13px;
    background: rgba(255, 255, 255, .3);
    vertical-align: -2px;
}
@media (max-width:1600px){
	.container footer{
		bottom:3%;
	}
}

/* QR 인증 */
.container .conLayout .loginLayout .qrBox{
	display: flex;
	padding:35px;
	column-gap: 66px;
	justify-content: space-around;
}
.container .conLayout .loginLayout .qrBox.otp{
	padding:15px 35px 28px
}
.container .conLayout .loginLayout .qrBox .imgQr{
	width: 154px;
    height: 154px;
    margin-top: -17px;
}
.container .conLayout .loginLayout .qrBox .qrtxt{
	font-size: 12px;
	color: var(--font-color-sub);
	font-weight: 500;
	line-height: 19px;
	margin-top: 30px
}
.container .conLayout .loginLayout .qrBox .qrtxt::before{
	content: '';
	display: block;
	background: url(../img/icon_loginArrow.svg) no-repeat;
	width:26px;
	height:13px;
	margin-bottom:10px
}
.checks_qr{
	position: relative;
	margin:0 0 20px
}
.checks_qr .enterBtn{
	width:100%;
	height:44px;
	line-height: 44px;
	border:0;
	font-size: 14px;
	font-weight: 500;
	color:#fff;
	text-align: center;
	background: #0057FF;
	border-radius: 8px;
	transition-duration: .2s;
    transition-timing-function: ease-in-out;
    will-change: transform
}
.checks_qr .enterBtn:hover{
	border-color:#001C5A !important; 
	background-color: #001C5A !important;
	color: #FFF; 
}
.container .conLayout .loginLayout .banner.qr{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	column-gap: 10px;
}
.service.qr{
	margin-top:48px
}
.container .conLayout .loginLayout .checks_qr fieldset{
	padding-top:0
}
.container .conLayout .loginLayout .checks_qr fieldset input{
	margin-bottom:14px
}

div div#resultMessage {
    text-align: right;
    margin-bottom: 8px;
}



/* ======================================= 이하 팝업 전용 스타일 ======================================== */

/* 팝업 배경 */
.popup-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100;
}

/* 팝업 공통 코드 start */
/*sc-window {
	display: none;
}
sc-window.active, .popup-overlay.active {
	display: block;
	z-index: 103;
}*/
sc-window {
    position: absolute;   
    width: 1100px; 
    height: 768px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.16);
    background: #fff;
    box-sizing: border-box;
}
sc-window>sc-toolbar.header {
    padding: 20px 30px 20px;
    background: #fff;
    height: initial;
    display: flex;
    justify-content: space-between;
}
sc-window>sc-toolbar.header>.title {
    font-size: 18px;
    color: var(--font-color-main);
    line-height: 1.2;
    font-weight: 700;
}
sc-window>sc-toolbar.header>.closable {
    width: 30px;
    height: 30px;
    background: url(../img/ico_pop_close.svg) no-repeat center !important;
    cursor: pointer;
}
sc-window>sc-toolbar.header>.closable:before {
	content: none;
}
sc-window>sc-toolbar.header>.closable:hover {
    filter: brightness(45%);
}
sc-window .content-wrap {
    padding: 0 30px 30px 30px;
    height: calc(100% - 65px);
    box-sizing: border-box;
}
sc-window .content:not(.article .content) {
    height: 100%;
}
sc-window .content >div {
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    padding: 40px;
    border: 1px solid #DEDFDF;
    border-radius: 5px;
}
sc-window a,
sc-window button{
    display: inline-block;
    border:1px solid #3059F4;
    color:#3059F4;
    font-size: 13px;
    width: 50px;
    height:32px;
    line-height: 30px;
    border-radius: 4px;
    text-align: center;
    background:#fff;
    font-weight: 700;
    padding:0 12px;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    will-change: transform
}
sc-window a:hover,
sc-window button:hover{
    border-color:#001C5A !important; 
	background-color: #001C5A !important;
	color: #FFF; 
}
sc-window a[title="저장"],
sc-window a[title="작성"],
sc-window button[title="저장"],
sc-window button[title="작성"]{
    display: inline-block;
    font-size: 13px;
    width: 50px;
    height:32px;
    line-height: 32px;
    border-radius: 4px;
    text-align: center;
    color:#fff;
    background:rgb(48, 89, 244);
    border:1px solid rgb(48, 89, 244);
    font-weight: 700;
    padding:0 12px
}
textarea{
    border:0;
    width:100%;
    height:100%
}
input{
    width:100%;
    border:1px solid #DEDFDF;
    border-radius: 4px;
    height:32px;
    padding: 3px 6px;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    will-change: transform
}
input:focus{
    border-color: #3059F4;
}
/* 팝업 공통 코드 end */

/* 아이디 찾기, 비밀번호 찾기 start */
sc-window.with-formbox {
	width: 490px;
	height: auto;
}
sc-window.with-formbox>sc-toolbar.header {
    padding: 20px;
    background: #fff;
    height: initial;
    display: flex;
    justify-content: space-between;
}
sc-window.with-formbox>sc-toolbar.header>.title {
    font-size: 14px;
    color: var(--font-color-main);
    line-height: 1.2;
    font-weight: 700;
}
sc-window.with-formbox>sc-toolbar.header>.closable {
    width: 20px;
    height: 20px;
    background: url(../img/ico_pop_close.svg) no-repeat center !important;
    cursor: pointer;
}
sc-window.with-formbox .content .noBorder {
	border: none;
	padding: 10px;
	font-size: 13px;
	color: #000;
}
sc-window.with-formbox h4 {
	font-size: 16px;
    line-height: 24px;
	font-weight: 700;
	color: #000;
	margin-bottom: 5px;
}
sc-window.with-formbox .sub-txt:not(h4+.sub-txt) {
	margin-top: 20px;
}
sc-window.with-formbox .formBox {
	background: #F5F7FF;
	padding: 22px 24px;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}
sc-window.with-formbox .formBox .fieldset {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
sc-window.with-formbox .formBox .fieldset .label {
	min-width: 137px;
	margin-right: 8px;
	color: #666;
}

sc-window .field-container {
	width: 100%;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 7px;
	height: 38px;
	box-sizing: border-box;
    outline: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}
sc-window .field-container:hover,
sc-window .field-container:has(:focus) {
	outline: 1px solid #3059F4;
}
sc-window.with-formbox .formBox .fieldset input {
	width: 100%;
	border: none;
	height: 36px;
	padding: 0 12px;
	border-radius: 7px;
}
sc-window .field-container:has(a.trigger) input,
sc-window .field-container:has(button.trigger) input {
	padding-right: 0;
}
sc-window .field-container a.trigger,
sc-window .field-container button.trigger {
    display: inline-block;
	width: 40px;
	height: 36px;
	border: none;
	background: url(../img/ico_reset.svg) center no-repeat;
}
sc-window .field-container a.trigger:hover,
sc-window .field-container button.trigger:hover {
	background: url(../img/ico_reset.svg) center no-repeat !important;
}
sc-window.with-formbox .btn-wrap {
	display: flex;
	justify-content: end;
	gap: 4px;
	margin-top: 40px;
}
sc-window.with-formbox .btn-wrap a,
sc-window.with-formbox .btn-wrap button {
    display: inline-block;
	padding: 0 24px;
    width: initial;
    border-radius: 20px;
}
.btn-wrap a.action,
.btn-wrap button.action {
	background: #0358F4;
	color: #fff;
}


/* 아이디 찾기, 비밀번호 찾기 end */

/* ----------------------------
2024.10.29 emroDesignTeam jiyeong.hong - nsrm popup
---------------------------- */

/* Q&A 게시판 start */
sc-window .content >div.titleArea{
    border:0;
    background: #F5F7FF url(../img/qabg.svg) 95% center no-repeat;
    padding:28px 43px;
    height:112px;
    margin-bottom: 20px;
    overflow: hidden;
}
sc-window .content >div.titleArea h2{
    font-size: 24px;
    font-weight: 700;
    margin-bottom:7px
}
sc-window .content >div.titleArea p.subtitle{
    font-size: 14px;
    font-weight: 500;
    color:#333;
    text-align: left;
    margin-top:5px
}
sc-window .content >div.boardBox{
    height:540px
}
sc-window .content >div.boardBox .result{
    height:32px;
    margin-bottom:6px;
    display: flex;
    justify-content: space-between;    
}
sc-window .content >div.boardBox .result .resultCount{
    color:#333;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
}
sc-window .content >div.boardBox table{
    width:100%;
    border-top:2px solid #707070
}
sc-window .content >div.boardBox table tr{
    border-bottom: 1px solid #DEDFDF;
}
sc-window .content >div.boardBox table tr td{
    height:52px;
    line-height: 52px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color:#333;
    padding:0 10px
}
sc-window .content >div.boardBox table tr td.waiting{
    color:#3059F4
}
sc-window .content >div.boardBox table tr td.left{
    text-align: left;
    padding-left:35px 
}
sc-window .content >div.boardBox table tr td.date{
    color:#777
}
sc-window .content >div.boardBox .paginate{
    width:100%;
    text-align: center;
    margin-top:15px
}
sc-window .content >div.boardBox .paginate a{
    font-size:16px;
    width:32px;
    height:32px;
    display: inline-block;
    border-radius: 4px;
    color:#333
}
sc-window .content >div.boardBox .paginate a:hover{
    background: #F5F7FB;
}
sc-window .content >div.boardBox .paginate a:focus{
    color:#fff;
    background: #3059F4;
}
sc-window .content >div.boardBox .paginate a.first{
    width:24px;
    height:24px;
    background: url(../img/btn_first.svg);
    display: inline-block;
    vertical-align:middle;
    margin-bottom:5px
}
sc-window .content >div.boardBox .paginate a.first:hover{
    background: url(../img/btn_first_on.svg);
}
sc-window .content >div.boardBox .paginate a.first:disabled{
    background: url(../img/btn_first_disable.svg);
}

sc-window .content >div.boardBox .paginate a.prev{
    width:24px;
    height:24px;
    background: url(../img/btn_prev.svg);
    display: inline-block;
    vertical-align:middle;
    margin-bottom:5px
}
sc-window .content >div.boardBox .paginate a.prev:hover{
    background: url(../img/btn_prev_on.svg);
}
sc-window .content >div.boardBox .paginate a.prev:disabled{
    background: url(../img/btn_prev_disable.svg);
}

sc-window .content >div.boardBox .paginate a.next{
    width:24px;
    height:24px;
    background: url(../img/btn_next.svg);
    display: inline-block;
    vertical-align:middle;
    margin-bottom:5px
}
sc-window .content >div.boardBox .paginate a.next:hover{
    background: url(../img/btn_next_on.svg);
}
sc-window .content >div.boardBox .paginate a.next:disabled{
    background: url(../img/btn_next_disable.svg);
}

sc-window .content >div.boardBox .paginate a.end{
    width:24px;
    height:24px;
    background: url(../img/btn_end.svg);
    display: inline-block;
    vertical-align:middle;
    margin-bottom:5px
}
sc-window .content >div.boardBox .paginate a.end:hover{
    background: url(../img/btn_end_on.svg);
}
sc-window .content >div.boardBox .paginate a.end:disabled{
    background: url(../img/btn_end_disable.svg);
}
/* Q&A 게시판 end */


/* Q&A 게시글 start */
sc-window .content >div .btnArea{
    width:100%;
    display: flex;
    justify-content: space-between;
}
sc-window .content >div .boardDetail{
    width:100%;
    margin:8px 0 0;
}
sc-window .content >div .boardDetail tr{
    border-bottom:1px solid #DEDFDF;
}
sc-window .content >div .boardDetail tr:first-child{
    border-top:1px solid #707070;
}
sc-window .content >div .boardDetail td{
    font-size: 16px;
    color:#333;
    padding:0 24px
}
sc-window .content >div .boardDetail th{
    background:#F5F7FB;
    border-right:1px solid #DEDFDF;
    font-size: 16px;
    font-weight: 400;
    color:#333;
    padding:0 24px;
    text-align: left;
    line-height:44px;
    height:44px
}
sc-window .content >div p.dateWrite{
    text-align: right;
    font-size: 13px;
    margin-top:20px
}
sc-window .content >div .reply{
    font-size: 14px;
    border-bottom:1px solid #DEDFDF;
    padding:10px 0 30px
}
sc-window .content >div .detail{
    font-size: 14px;
    padding:30px 0
}
/* Q&A 게시글 end */

/* Q&A 게시글 작성 start */
sc-window .content >div .boardDetail td.input{
    padding:4px 12px
}
sc-window .content >div .boardDetail td.writetool{
    padding:8px;
}
sc-window .content >div .boardDetail td.write{
    padding:8px;
    font-size: 14px;
    height:159px;
}
sc-window .content >div .boardDetail td.pd{
    padding:14px 0
}
/* Q&A 게시글 작성 end */

/* Contact Us start */
sc-window .content >div.titleArea.mail{
    border:0;
    padding:28px 43px;
    height:112px;
    margin-bottom: 20px;
    overflow: hidden;
    background: #F5F7FF url(../img/img_mail.svg)95% center no-repeat;
}
sc-window .content >div.boardBox.contact.bottom{
    margin-top:30px
}
sc-window .content >div.boardBox.contact .contactTitle{
    font-size: 22px;
    font-weight: 500;
    color:#333;
    height:32px;
    margin-bottom:19px;  
}
sc-window .content >div.boardBox.contact .contactTitle.second{
    margin-top:30px
}
sc-window .content >div.boardBox.contact thead th{
    font-size: 16px;
    font-weight: 600;
    line-height:44px
}
sc-window .content >div.boardBox.contact tbody th{
    background:#F5F7FB;
    font-size: 16px;
    font-weight: 500;
    color:#333;
    border-right:1px solid #DEDFDF;
    vertical-align: middle;
}
sc-window .content >div.boardBox.contact tbody td{
    height:44px;
    line-height: 44px;
}
/* Contact Us end */

/* Privacy start */
.TermsOfUse .article .content1 {
    font-size: 14px;
    line-height: 1.45;
    word-break:break-all;
}
.TermsOfUse .article .labeling{
    margin:40px 0 40px
}
.TermsOfUse .article .labeling.mb0{
    margin-bottom:0;
}
.TermsOfUse .article .labeling .bar{
    background:#7D8DB1;
    height:35px;
    line-height:35px;
    color:#fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
}
.TermsOfUse .article .labeling .flexBox{
    border-bottom:1px solid #E2E2E2;
    height:174px;
    display: flex;
    justify-content: space-around;
    column-gap: 3%;
}
.TermsOfUse .article .labeling .flexBox.pd{
    padding:14px 40px;
    height:120px;
}
.TermsOfUse .article .labeling .flexBox.pd20{
    padding:14px 20px;
    height:120px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.TermsOfUse .article .labeling .flexBox .flexItem{
    text-align: center;
    flex-basis: 0;
    flex-grow: 1;
}
.TermsOfUse .article .labeling .flexBox .flexItem .tt{
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-top:8px
}
.TermsOfUse .article .labeling .flexBox.pd .flexItem .tt{
    font-size: 13px;
    font-weight: 500;
    text-align: center; 
    color:#333;  
    margin-top:-8px 
}
.TermsOfUse .article .labeling .flexBox.pd20 .flexItem .tt{
    font-size: 13px;
    font-weight: 500;
    text-align: center; 
    color:#333;  
    margin-top:-8px;
    white-space: nowrap;
}
.TermsOfUse .article .labeling .flexBox .flexItem img{
    width:70px;
    height:70px
}
.TermsOfUse .article .labeling .flexBox .flexItem .txtBox{
    height:57px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top:-5px
}
.TermsOfUse .article .labeling .flexBox .flexItem .txt{
    text-align: center;
    vertical-align: middle;
    line-height:18px;
    margin-top:0;
    word-break:keep-all
}
.TermsOfUse .article .content ol.privacy li{
    display: block;
}
.gridBox{
    display: grid;
    grid-template-columns:1fr 3fr;
    margin:40px 0
}
.gridBox.three{
    display: grid;
    grid-template-columns:1.5fr .5fr 3fr;
    margin:40px 0
}
.gridBox .gridheader{
    background: #7D8DB1;
    color:#fff;
    height:35px;
    line-height: 35px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}
 .gridBox .gridheader:nth-child(1){
    border-radius: 4px 0 0 0;
    border-right:1px solid rgba(213,219,232,.3)
}
 .gridBox .gridheader:nth-child(2){
    border-radius: 0 4px 0 0;
}
 .gridBox.three .gridheader:nth-child(2){
    border-radius: 0;
    border-right:1px solid rgba(213,219,232,.3);
}
 .gridBox.three .gridheader:nth-child(3){
    border-radius: 0 4px 0 0;
    border-right:1px solid rgba(213,219,232,.3)
}
 .gridBox .gridth{
    background: #F5F7FF;
    border-bottom:1px solid #E2E2E2;
    display: flex;
    align-items: center;
    padding:10px;
    font-size: 13px;
    font-weight: 400;
}
 .gridBox.three .gridth{
    display:grid;
    place-items:center
}
 .gridBox .gridtd{
    padding:10px;
    font-size: 13px;
    font-weight: 400;
    border-bottom:1px solid #E2E2E2;
}
 .gridBox.three .gridtd.cen{
    display:grid;    
    align-items: center;
}
 .gridBox .gridtd:nth-child(21){
    grid-row:7/9;
    grid-column: 3;
}
.TermsOfUse .article .title img{
    width:24px;
    height:24px;
    margin-left:10px;
    vertical-align: baseline;
    margin-bottom:-3px
}
/* Privacy end */

/* popup04_이용약관-epe, popip04_이용약관-epi start */
.TermsOfUse .article {
    margin-top: 20px;
    color: var(--font-color-main);
}
.TermsOfUse .article:first-of-type {
    margin-top: 0;
}
.TermsOfUse .article .title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}
.TermsOfUse .article .title.cen{
    text-align: center;
    margin-top:60px
}
.TermsOfUse .article .content {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 18px;
}
.TermsOfUse .article .content li {
    display: flex;
    gap: 5px;
}
/* popup04_이용약관-epe, popip04_이용약관-epi end */

/* popup05_협력회사_행동규범 */
sc-window .content >div.forbid {
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
}
.tab-menu {
    display: flex;
}
.tab-menu a,
.tab-menu button {
    display: inline-block;
    flex: 1;
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    font-weight: 700;
    border-radius: 0;
    font-size: 16px;
    border: 1px solid #DEDFDF;
    margin-left: -1px;
    line-height: 1;
    /* line-height: 0.5; */
    color: var(--font-color-main);
    height: 40px;
}
.tab-menu a:first-child,
.tab-menu button:first-child {
    border-left: 1px solid #DEDFDF;
    border-radius: 5px 0 0 5px;
    margin-left: 0;
}
.tab-menu a:last-child,
.tab-menu button:last-child {
    border-radius: 0 5px 5px 0;
}
.tab-menu a.active,
.tab-menu a:hover,
.tab-menu button.active,
.tab-menu button:hover {
    background-color: #3059F4 !important;
    border-color: #3059F4 !important;
    color: #fff;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}
.sub-content {
    flex: 1;
    border: 1px solid #dfdfdf;
    padding: 40px;
    overflow: auto;
    border-radius: 8px;
}
.sub-content h4 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.sub-content p {
    font-size: 14px;
    line-height: 20px;
    padding-top: 24px;
    word-break: keep-all;
}
.sub-content p:first-of-type:not(h4+p) {
    padding-top: 0;
}
.sub-tab-menu,
.sub-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 0.5;
    margin: 20px 0;
    height: 35px;
}
.sub-tab-menu a,
.sub-tab-menu button {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 35px;
    padding: 8px;
    cursor: pointer;
    font-size: 24px;
    border: none;
    color: var(--font-color-main);
    line-height: 0.5;
    transition: none;
    padding: 0;
}
.sub-tab-menu a.active,
.sub-tab-menu a:hover,
.sub-tab-menu button.active,
.sub-tab-menu button:hover {
    color: #3059F4;
    background: none !important;
}
.sub-tab-menu a+a::before,
.sub-tab-menu button+button::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 26px;
    background: #DEDFDF;
    margin: 0 32px -3px;
}
.sub-tab-content {
    display: none;
}
.sub-tab-content.active {
    display: block;
}
.sub-content table {
    margin-top: 30px;
    width: 100%;
    text-align: center;
}
.sub-content table th,
.sub-content table td {
    vertical-align: middle;
    font-size: 13px;
    color: var(--font-color-sub);
}
.sub-content thead tr >* {
    height: 35px;
    font-weight: 700;
    color: #fff;
    background: #7D8DB1;
    border-left: 1px solid #D5DBE8;
}
.sub-content thead tr >*:first-child {
    border-left: none;
}
.sub-content tbody tr:not(:first-child) {
    border-top: 1px solid #E2E2E2;
}
.sub-content tbody tr >* {
    height: 29px;
}
.sub-content tbody th {
    background: #F5F7FF;
}
.sub-content tbody a,
.sub-content tbody button {
    display: inline-block;
    width: auto;
    height: 22px;
    line-height: 20px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sub-content tbody a::before,
.sub-content tbody button::before {
    content: '';
    width: 12px;
    height: 12px;
    background: url(../img/ico_download.svg) no-repeat;
    transition: all 0.2s;
}
.sub-content tbody a:hover::before,
.sub-content tbody button:hover::before {
    filter: brightness(50);
}
.sub-content table.equal th, 
.sub-content table.equal td {
    width: 16%;
}

/* id / pw 찾기 without sc-window*/


.with-formbox a,
.with-formbox button{
	display: inline-block;
	border:1px solid #3059F4;
	color:#3059F4;
	font-size: 13px;
	width: 50px;
	height:32px;
	line-height: 30px;
	border-radius: 4px;
	text-align: center;
	background:#fff;
	font-weight: 700;
	padding:0 12px;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
	will-change: transform
}
.with-formbox a:hover,
.with-formbox button:hover{
	border-color:#001C5A !important;
	background-color: #001C5A !important;
	color: #FFF;
}

sc-window .content-wrap:has(#poupJspIFrame) {
	padding: 0;
}
.with-formbox {
	width: 100%;
	height: auto;
	padding: 0 30px;
}
.with-formbox>sc-toolbar.header {
	padding: 20px;
	background: #fff;
	height: initial;
	display: flex;
	justify-content: space-between;
}
.with-formbox>sc-toolbar.header>.title {
	font-size: 14px;
	color: var(--font-color-main);
	line-height: 1.2;
	font-weight: 700;
}
.with-formbox>sc-toolbar.header>.closable {
	width: 20px;
	height: 20px;
	background: url(../img/ico_pop_close.svg) no-repeat center !important;
	cursor: pointer;
}
.with-formbox .content .noBorder {
	border: none;
	/* padding: 10px; */
	font-size: 13px;
	line-height: 15px;
	color: #000;
}
.with-formbox h4 {
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.with-formbox li {
	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
	color: #000;
	margin-top: 10px;
	margin-bottom: 5px;
}
.with-formbox .sub-txt:not(h4+.sub-txt) {
	margin-top: 20px;
}
.with-formbox .formBox {
	background: #F5F7FF;
	padding: 22px 24px;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}
.with-formbox .formBox .fieldset {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.with-formbox .formBox .fieldset:has([required]) .label::after {
	content: '*';
    display: inline-block;
    width: 6px; 
    height: 12px;
    margin-left: 4px;
    color: red;
    line-height: 16px;
}
.with-formbox .formBox .fieldset .label {
	min-width: 137px;
	margin-right: 8px;
	color: #666;
	display: flex;
    align-items: center;
}

.with-formbox .fieldset input {
	width: 90%;
	border: none;
	height: 36px;
	padding: 0 12px;
	border-radius: 7px;
}
.with-formbox:has(a.trigger) input,
.with-formbox:has(button.trigger) input {
	padding-right: 0;
}
.with-formbox a.trigger,
.with-formbox button.trigger {
	display: inline-block;
	width: 40px;
	height: 36px;
	border: none;
	background: url(../img/ico_reset.svg) center no-repeat;
}
.with-formbox a.trigger:hover,
.with-formbox button.trigger:hover {
	background: url(../img/ico_reset.svg) center no-repeat !important;
}
.with-formbox .btn-wrap {
	display: flex;
	justify-content: end;
	gap: 4px;
	margin-top: 40px;
}
.with-formbox .btn-wrap a,
.with-formbox .btn-wrap button {
	display: inline-block;
	padding: 0 24px;
	width: initial;
	border-radius: 20px;
}
.btn-wrap a.action,
.btn-wrap button.action {
	background: #0358F4;
	color: #fff;
}


.field-container {
	width: 100%;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 7px;
	height: 38px;
	box-sizing: border-box;
	outline: 1px solid transparent;
	transition: all 0.2s ease-in-out;
}
.field-container:hover,
.field-container:has(:focus) {
	outline: 1px solid #3059F4;
}
.with-formbox .formBox .fieldset input {
	width: 100%;
	border: none;
	height: 36px;
	padding: 0 12px;
	border-radius: 7px;
}
.field-container:has(a.trigger) input,
.field-container:has(button.trigger) input {
	padding-right: 0;
}
.field-container a.trigger,
.field-container button.trigger {
	display: inline-block;
	width: 40px;
	height: 36px;
	border: none;
	background: url(../img/ico_reset.svg) center no-repeat;
}
.field-container a.trigger:hover,
.field-container button.trigger:hover {
	background: url(../img/ico_reset.svg) center no-repeat !important;
}

/* 기기변경 팝업 */
sc-messagebox {
	border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.16);
    background: #fff;
}
sc-messagebox>sc-toolbar.header {
	padding: 20px 25px 15px; 
	background: #fff;
	height: initial;
}

sc-messagebox>sc-toolbar.header>.title {
	font-size: 18px;
    color: var(--font-color-main);
    line-height: 1.2;
}
sc-messagebox>div.content-wrap>div.content {
	background: #fff;
	padding: 0 25px;
}
sc-messagebox sc-button {
    padding: 0 16px !important;
    height: 28px;
    background: #fff;
    font-size: 12px;
    border-radius: 4px;
    text-align: center;
    min-width: 34px;
    box-sizing: border-box;
    font-weight: 700;
    border: 1px solid #5072f2;
    color: #5072f2;
    line-height: 26px;
}
sc-messagebox sc-button[title="예"]:not(:hover) {
    background: #5072f2;
    color: #fff;
}
sc-messagebox sc-button:hover {
    background: #001C5A;
    border-color: #001c5a;
    color: #fff;
}

sc-messagebox>.action {
	display: flex;
	justify-content: end;
	padding: 20px 25px !important;
}

/* popup06_App 설치 가이드 : 241126 추가 */
sc-window.popup-appInstall {
    width: 800px;
}
.appinstall {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.appInstall .guide .formbox {
    margin-top: 0px;
    line-height: 1.2;
}
.guide .formBox li:not(:first-child) {
    margin-top: 6px;
}
 .guide .formBox li .num {
	display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 700;
    background: #000;
    color: #fff;
    margin-right: 6px;
    vertical-align: 2px;
}
.guide .formBox .install-img {
    height: 270px;
    margin-top: 10px;
    background: url(../img/img_appinstall-adroid.png) no-repeat top center;
    background-size: contain;
}
.appinstall .guide.ios .install-img {
    background: url(../img/img_appinstall-ios.png) no-repeat top center;
    background-size: contain;
}
.appInstall .wrap-btn {
    display: flex;
    justify-content: end;
    margin-top: 10px;
}

sc-window.sub-popup-qr {
    width: 450px;
    height: auto;
}
sc-window.sub-popup-qr .formbox {
    margin-top: 0;
}
.guide .install-img-qr {
    height: 130px;
    margin: 10px 0;
    background: url(../img/img_appinstall-adroid-qr.png) no-repeat center top;
    background-size: contain;
}
.guide.ios .install-img-qr {
    background: url(../img/img_appinstall-ios-qr.png) no-repeat center top;
    background-size: contain;
}
.guide .install-img-qr+div {
    text-align: center;
    font-size: 0.8em;
}

/* error page */ 
.error-section {
    position: absolute;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: var(--font-color-sub);
    line-height: 1.2;
    padding: 70px;
}
.error-img {
    width: 160px;
    height: 160px;
    background: url(../img/img_error_page.svg) no-repeat center;
    margin-bottom: 33px;
}
.error-title {
    font-weight: 700;
    font-size: 26px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.error-title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/ico_error_title.svg) no-repeat center;
}
.error-section sc-label,
.error-section .sc-label {
    font-size: 18px;
    margin-right: 0;   
    min-height: initial;
    text-align: center;
    justify-content: center;
}
.error-info {
    min-width: 700px;
}
.error-info >div:not(:last-child) {
    margin-bottom: 10px;
}
.error-info .main-txt,
.error-info .main-txt .sc-label {
    font-weight: 700;
    font-size: 20px;
}
.error-info .email-txt {
    font-weight: 700;
    display: flex;
    gap: 4px;
    justify-content: center;
}
.error-info .email-txt span:last-child {
    color: #3059F4;
    text-decoration: underline;
}
.error-info+.error-info {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid #F0F0F0;
}
.error-section sc-button {
    display: flex;
    align-items: center;
    height: 40px !important;
    color: #fff;    
    font-size: 16px;
    margin-top: 48px;
    padding: 0 30px;
    background: #0358F4;
    border-radius: 40px;    
}
.error-section sc-button span {
    font-size: 16px;
    font-weight: 400;
}

/* 25.05.23 add : faq button style */
.container .conLayout .loginLayout .loginBox .titleContainer {
    display: flex;
    align-items: center;
    gap: 12px;
}
.container .conLayout .loginLayout .loginBox a.faq-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    background: #1428A0;
}
.container .conLayout .loginLayout .loginBox a.faq-btn::before {
    content: '';
    width: 20px;
    height: 18px;
    background: url(../img/ico_faq.svg) no-repeat center;
    background-size: contain;
}

/* 팝업을 위한 스타일 */
sc-window > div.content-wrap > div.content {
    padding    : 0px 0px 5px 0px;
    overflow-x : hidden;
    left       : 0px;
    right      : 0px;
    top        : 0px;
    bottom     : 0px;
    width      : auto !important;
    height     : auto !important
}