@charset "utf-8";
@import url(setting.css);
/* ************************************************************************************************************************************************************
                        《 공통 레이아웃 스타일 》
************************************************************************************************************************************************************ */

/*
    z-index 위계
    #header         100
*/

/* ============================== [ 레이아웃 리셋 ] ========================================================================================== */
/* Reset */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,big,cite,code,del,dfn,font,figure,figcaption,img,ins,q,s,samp,small,strike,sub,sup,tt,var,
b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {font:1.6rem/1.25em 'NotoSans',sans-serif; font-weight: 500;}
button,input,textarea {font:1.6rem/1.25em 'NotoSans',sans-serif; font-weight: 500;}
select {font:1.6rem/1.25em 'NotoSans',sans-serif; font-weight: 500;}
::selection {color:#fff; background-color:#2760EF;}
.go_view {position:absolute; left:0; top:0; height:100%; width:100%;}
.img img {display:block; width:100%; height:auto; object-fit:cover;}
* {word-wrap:break-word; word-break:keep-all; box-sizing: border-box;}
a {display: block;}
body.dim {overflow:hidden;}
body.dim:before {background-color:rgba(0, 0, 0, 0.5); content:""; position:fixed; left:0; top:0; height:100vh; width:100%; z-index:99;}
html, body{font-size: 10px;}

@media screen and (max-width: 1200px){
	html, body{font-size: 9px;}
}
@media screen and (max-width: 768px){
	html, body{font-size: 8px;}
}

.flex-box {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ============================== [ #header ] ========================================================================================== */
#header {background-color: #fff; box-shadow: 0px 2px 4px 0px #00000026; transition: .3s; position: fixed; left: 0; top: 0; width: 100%; z-index: 100;}
#header::after {display: block; content: ''; width: 100%; height: 1px; background-color: #eee; position: absolute; left: 0; top: 9rem; transition: .3s;}
.h_wrap {display: flex; align-items: center; height: 9rem; padding: 0 8rem; /* max-width: calc(1760px + 16rem); */ width: 100%; margin: 0 auto;}
.h_wrap h1 a {width: 9.8rem; height: 3.2rem; background: url(../images/logo.svg) no-repeat 0 0;background-size: 100% auto;}
.h_wrap nav {margin-left: 6rem;}
.h_wrap nav .dept_01 {display: flex; gap:3rem;}
.h_wrap nav .dept_01 > li {position: relative;}
.h_wrap nav .dept_01 > li > a {padding: 30px 0; font-weight: 600; color: #333; transition: .3s;}
.h_wrap nav .dept_01 > li:hover > a {color: #2760EF;}
.h_wrap nav .dept_01 ul {position: absolute; width: 100%; top: 7.5rem; left: -5px; padding: 30px 0 22px; white-space: nowrap; opacity: 0; visibility: hidden; transition: .3s;}
.h_wrap nav .dept_01 ul li a {font-size: 1.5rem; color: #555555;}
.h_wrap nav .dept_01 ul li a:hover {text-decoration: underline;}
.h_wrap .opt {margin-left: auto; display: flex; align-items: center;}
.h_wrap .opt .util {display: flex; margin-right: 6rem;}
.h_wrap .opt .util li ~ li {margin-left: 2rem; padding-left: 2rem; position: relative;}
.h_wrap .opt .util li ~ li::before {display: block; content: ''; width: 1px; height: 1rem; position: absolute; top: 5px; left: 0; background-color: #666;}
.h_wrap .opt .util li a {font-weight: 600; color: #333;}
.h_wrap .opt .btn_login {width: 9.2rem; height: 3.4rem; font-weight: 600; font-size: 1.5rem; border: 1px solid #333; border-radius: 5px; line-height: 3.4rem; text-align: center;}
.h_wrap .opt .btn_menu {display: none; width: 40px; height: 40px; background: url(../images/ico_menu.svg) no-repeat 0 0; background-size: 100% auto; transition: .3s;}
.h_wrap .opt .btn_menu.active {background-image: url(../images/ico_close.svg) !important;} 
.m_menu {display: none; position: absolute; left: 0; top: 60px; height: calc(100vh - 60px); background-color: #fff; width: 100%; z-index: 10;}
.m_menu .m_top {padding: 30px 42px; border-bottom: 1px solid #eee;}
.m_menu .m_top h2 {font-size: 20px; font-weight: 600; color: #333;}
.m_menu .m_top .btn_my {display: flex; align-items: center; justify-content: center; margin-top: 24px; border-radius: 4px; border:1px solid #c6c6c6; width: 123px; height: 34px;}
.m_menu .m_top .btn_my span { padding-left: 23px; background: url(../images/ico_edit.svg) no-repeat left center; background-size: 18px; font-size: 15px; color: #555; line-height: 18px;}
.m_menu .btn_login {position: absolute; left: 0; bottom: 0; width: 100%; padding:0 42px 42px; background-color: #fff; color: #888; font-size: 15px;}
.m_menu .btn_login span {padding-left: 23px; line-height: 18px; background: url(../images/ico_logout.svg) no-repeat left center; background-size: 18px; display: block;}
.m_dept_01 > li > a {font-size: 16px; padding: 0 42px; height: 56px; line-height: 56px; border-bottom: 1px solid #EEEEEE; position: relative;}
.m_dept_01 > li.arr > a::after {display: block; content: ''; width: 24px; height: 24px; background: url(../images/ico_menu_arr.svg) no-repeat; background-size: 100% auto; position: absolute; right: 42px; top: 16px; transition: .3s; transform: rotate(180deg);}
.m_dept_01 > li.arr > a.active::after {transform: rotate(0);}
.m_dept_01 ul {display: none;}
.m_dept_01 ul li a {padding: 0 50px 0 68px; position: relative; background-color: #F6F6F6; border-bottom: 1px solid #F6F6F6; color: #555; font-size: 15px; height: 56px; line-height: 56px;}
.m_dept_01 ul li a::after {display: block; content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: #888888; position: absolute; left: 57px; top: 26px;}

/*투명 헤더*/
#header.tp {background-color: transparent; box-shadow: none;}
#header.tp::after {display: none;}
.tp .h_wrap h1 a {background-image: url(../images/logo_wh.svg);}
.tp .h_wrap nav .dept_01 > li > a {color: #fff;}
.tp .h_wrap nav .dept_01 ul li a {color: #fff;}
.tp .h_wrap .opt .util li a {color: #fff;}
.tp .h_wrap .opt .util li ~ li::before {background-color: #fff;}
.tp .h_wrap .opt .btn_login {border-color: #fff; color: #fff;}
.tp .h_wrap .opt .btn_menu {background-image: url(../images/ico_menu_wh.svg);}

/*footer*/
footer p {
	color: #aaa; font-size: 1.4rem; padding: 0 8rem 4rem; text-align: right;
}
 
#main ~ footer p {
	background-color: #FAFAFA; 
}

#content ~ footer p {
	padding: 0 20px 4rem;
    margin: 0 auto;
    width: 100%;
    max-width: 1760px;
	/* background-color: #fcc; */
	padding: 0 0 4rem;
}

@media screen and (max-width: 1780px){
	#content ~ footer p {
		max-width: 1760px;
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media screen and (max-width: 1200px){
	.h_wrap {padding: 0 4.2rem; max-width: calc(1760px + 8.4rem);}
	.h_wrap nav {margin-left: 3rem;}
	.h_wrap nav .dept_01 {gap:2rem}
	.h_wrap .opt .util {margin-right: 3rem;}
	.h_wrap .opt .util li ~ li {margin-left: 1rem; padding-left: 1rem;}
}
@media screen and (min-width: 769px) {
	.m_menu {display: none !important;}
	/*	250625 수정
	#header.dept_active {padding-bottom: 62px;}
	*/
	.h_wrap nav .dept_01 ul.active {opacity: 1; visibility: visible;}

}
@media screen and (max-width: 768px) {
	#header {box-shadow: none;}
	#header::after {opacity: 0; visibility: hidden;}
	.h_wrap {height: 60px; box-shadow: 0px 2px 4px 0px #00000026; position: relative; z-index: 11;}
	.h_wrap h1 a {width: 65px;}
	.h_wrap nav {display: none;}
	.h_wrap .opt .util {display: none;}
	.h_wrap .opt .btn_login {display: none;}
	.h_wrap .opt .btn_menu {display: block;}
	footer p {padding: 0 4.2rem 4rem; background-color: #fff;}
	#main ~ footer p {background-color: #FFF;}
	#content ~ footer p {
		padding-left: 20px;
		padding-right: 20px;
	}
	.tp .h_wrap {box-shadow: none;}
}

/* ============================== [ input ] ========================================================================================== */
.inpt {width: 100%; height: 4.6rem; padding: 0 2rem; border-radius: 5px; color: #444; background-color: #F6F6F6; border:2px solid transparent; transition:  .3s;}
.inpt.align-center {text-align: center;}
.inpt:focus {border-color: #444; background-color: #fff;}

.input-box:has(.err_txt) .inpt:focus{
	outline-color: #ED6255;
}

.err_txt:not([style*="display: none"]){
	/* background-color: #fcc; */
}

.inpt:disabled {background-color: #ddd; color: #888;}
.nice-select:after {width: 2.2rem; height: 2.2rem; border:none; background: url(../images/ico_select_arr.svg) no-repeat center; transform: rotate(0);}
.nice-select .current, .nice-select .option {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display: block;}

/* ============================== [ button ] ========================================================================================== */
.btn_wrap {display: flex; justify-content: center; gap:2rem}
.btn_wrap .btn {width: 17rem; height: 5.3rem; background-color: #fff; border-radius: 5px; border:2px solid transparent; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 700; transition: .3s;}
.btn_wrap .btn.type_01 {border-color: #111; color: #111;}
.btn_wrap .btn.type_01:hover {border-color: #2760EF; color: #2760EF;}
.btn_wrap .btn.type_02 {background-color: #111; color: #fff;}
.btn_wrap .btn.type_02:hover {background-color: #2760EF; }

/* ============================== [ #login ] ========================================================================================== */
.login_wrap {padding: 3rem; display: flex; gap: 3rem; flex-grow: 1;}
.login_wrap .login_bg {flex:1; border-radius: 3rem; /* height: 1020px; */ max-height: 100%; background: url(../images/login_pc.png) no-repeat center; background-size: cover;}
.login_wrap .login_cont {flex:0 0 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.login_wrap .login_cont .login_logo {margin-bottom: 4rem; width: 416px; height: 166px; background: url(../images/_login_logo.png) no-repeat center; background-size: 100% auto;}
.login_wrap .login_cont .inpt {height: 5.3rem; border:2px solid #bbb; background-color: #fafafa; padding: 0 1.5rem; transition: none;}
.login_wrap .login_cont .inpt:focus {border: 2px solid #444; background-color: #fff;}
.login_wrap .login_cont .inpt ~ .inpt {margin-top: 28px;}

.popup-wrap .inpt.err,
.login_wrap .login_cont .inpt.err{border:2px solid #ED6255; background-color: #fff;}
.err_txt {padding: 2px 0 0 1.5rem; font-size: 1.4rem; color: #ed6255; display: none;}

/* .password-wrap .err_txt, */
.popup-wrap .inpt.err ~ .err_txt,
.login_wrap .login_cont .inpt.err ~ .err_txt {display: block;}


.login_wrap .login_cont .b_wrap {margin-top: 1.8rem; display: flex; align-items: center; justify-content: space-between;}
.login_wrap .login_cont .b_wrap .chk_wrap {gap:8px; color: #888; display: flex; align-items: center; line-height: 1; cursor: pointer;}
.login_wrap .login_cont .b_wrap .chk_wrap input {width: 1.8rem; height: 1.8rem; cursor: pointer;}
.login_wrap .login_cont .b_wrap ul {display: flex; }
.login_wrap .login_cont .b_wrap ul li ~ li {margin-left: 1.5rem; padding-left: 1.5rem; position: relative;}
.login_wrap .login_cont .b_wrap ul li ~ li:after {display: block; content: ''; width: 1px; height: 1.2rem; position: absolute; left: 0; top: 3px; background-color: #bbb;}
.login_wrap .login_cont .b_wrap ul li a {color: #888; }
.login_wrap .login_cont .btn_wrap {margin-top: 4.6rem;}
.login_wrap .login_cont .btn_wrap .btn {width: 100%;}
.login_wrap .login_cont .copy {text-align: center; margin-top: 2.6rem; font-size: 1.4rem; font-weight: 500; color: #aaa;}

@media screen and (max-width: 1024px) {

	.login_wrap {
		height: 100vh; background: url(../images/login_mo.png) no-repeat top;
		background-size:cover;
		/* padding: 42px; */
		padding: 120px 42px 93px;
	}
	.login_wrap .login_bg {display: none;}
    .login_wrap .login_cont {
		flex: 1;
		width: 100%;
		justify-content: start;
	}
	.login_wrap .login_cont .login_logo {background-image: url(../images/_login_logo_mo.png); width: 312px; height: 126px; margin-bottom: 60px;}
	.login_wrap .login_cont .inpt {
		background: transparent; border-color: #fff; color: #fff;
		height: 53px;
	}
	.login_wrap .login_cont .inpt:focus{background-color: transparent; border: 1px solid #fff;}
	.login_wrap .login_cont .inpt.err {background-color: transparent; border:1px solid #ED6255;}
	.login_wrap .login_cont .b_wrap {margin-top: 24.5px;}

	.login_wrap .login_cont .b_wrap ul li ~ li {
		margin-left: 10px;
		padding-left: 10px;
	}

	.login_wrap .login_cont .b_wrap ul li ~ li:after {
		background-color: #444;
	}

	.login_wrap .login_cont .b_wrap span,
	.login_wrap .login_cont .b_wrap ul li a {
		font-size: 15px;
	}

	.login_wrap .login_cont .btn_wrap {margin-top: 60.5px;}

	.login_wrap .login_cont .btn_wrap .btn {
		background-color: #fff; color: #111;
		height: 52px;
        font-size: 17px;
	}
	.login_wrap .login_cont .btn_wrap .btn:hover {color: #fff; background-color: #2760EF;}
	.login_wrap .login_cont .copy {
		position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
		bottom: 93px; font-size: 14px;
	}
}

formLogin

/* 팝업 추가 */

.layerpop {
	margin: 2rem;
}

.popup-wrap {
	border-radius: 2rem;
	padding: 9.9rem 8rem;
	background-color: #fff;
}

.password-wrap {
	width: fit-content;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.password-wrap h1,
.popup-wrap h1 {
	text-align: center;
	font-size: 3.8rem;
	color: #444;
	font-weight: 600;	
}

.password-wrap header,
.popup-wrap header {
	margin-bottom: 6rem;
}

.password-wrap h1 + p,
.popup-wrap h1 + p {
	color: #777;
	text-align: center;
	font-size: 2rem;
	font-weight: 400;
	margin: 2rem auto 0 auto;
}

.form_password .inpt,
.popup-wrap .inpt {
	border: 1px solid #BBB;
	background: #FAFAFA;
}

.form_password .inpt::placeholder,
.popup-wrap .inpt::placeholder {
	color: #aaa;
}

.form_password .input-box,
.popup-wrap .input-box {
	position: relative;
}

.form_password .input-box,
.popup-wrap .input-box {
	padding-bottom: 28px;
}

.form_password .inpt.err ~ .err_txt,
.popup-wrap .inpt.err ~ .err_txt {
	position: absolute;
	left: 0;
	bottom: 9px;
}

.password-wrap::after,
.popup-wrap::after {
	content: '';
	width: 15.1rem;
	height: 5rem;
	display: block;
	background: url(../images/logo.svg) no-repeat center;
	filter: invert(79%) sepia(78%) saturate(5%) hue-rotate(314deg) brightness(85%) contrast(99%);
	background-size: contain;
	margin: 5rem auto 0 auto;
}

.popup-wrap .popup_close {
    text-indent: -9999em;
    width: 4.2rem;
    height: 4.2rem;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    background: url(../images/ico_close2.svg) no-repeat center;
}

.password-wrap .btn_wrap,
.popup-wrap .btn_wrap {
	flex-direction: column;
	gap: 0;
}

.password-wrap .btn_wrap .btn.type_02,
.popup-wrap .btn_wrap .btn.type_02 {
	width: 100%;
	margin: 1.8rem auto 2.6rem auto;
}

.password-wrap .popup-bottom a,
.popup-wrap .popup-bottom a {
	width: fit-content;
	margin: 0 auto;
	color: #888;
}

@media screen and (max-width: 1200px) {
	.password-wrap {
		width: 70%;
	}
}

@media screen and (max-width: 1024px) {

	.layerpop {
		margin: 2rem;
	}
	
	.popup-wrap {
		border-radius: 2rem;
		padding: 6rem 4rem 3rem;
	}
	
	.password-wrap h1,
	.popup-wrap h1 {
		font-size: 3rem;	
	}
	
	.password-wrap header,
	.popup-wrap header {
		margin-bottom: 4rem;
	}
	
	.password-wrap h1 + p,
	.popup-wrap h1 + p {
		font-size: 1.5rem;
	}
	
	.password-wrap .inpt.err ~ .err_txt,
	.popup-wrap .inpt.err ~ .err_txt {
		bottom: 9px;
	}

	.popup-wrap .popup_close {
		background-size: 4rem;
	}
	
	.password-wrap .btn_wrap .btn.type_02,
	.popup-wrap .btn_wrap .btn.type_02 {
		margin: 0 auto;
	}

	.password-wrap::after,
	.popup-wrap::after {
		width: 10rem;
		margin-top: 3rem;
	}
}

@media screen and (max-width: 768px) {
	
	.password-wrap {
		width: 100%;
		padding: 4.2rem;
	}

	.password-wrap h1,
    .popup-wrap h1 {
        font-size: 2.5rem;
    }
}