@charset "utf-8";

/*공통*/
#contentWrap {/*max-width:1280px; margin:5rem auto 0; overflow:hidden;*/ position:relative}
#content_detail {margin-bottom:5rem;}
.contentInfo {display:none; }

/*서브비쥬얼*/
div.sub_visual {background: #000 url(/_by/img/contents/sub-visual.jpg) no-repeat left -11rem; height: 13rem; width: 100%; padding-top: 3rem; text-align: center;position: relative;
z-index: -1;}
div.sub_visual > span {color:#fff; display:block; font-weight:100; font-size:1rem; letter-spacing:1.5px; margin-bottom:2px; animation-name:top; animation-duration:2s; animation-timing-function:ease; animation-fill-mode:both}
div.sub_visual span.point {color:#601986;font-weight: 500;}
div.sub_visual > strong {color:#fff; display:block; font-weight:normal; font-size:1.8rem; line-height:1.1; letter-spacing:-2px; animation-name:top; animation-duration:2s; animation-timing-function:ease; animation-fill-mode:both}

@media all and (max-width:767px) {
	div.sub_visual {height: 7rem; padding-top: 1.2rem}
	div.sub_visual > img { width:30% }
}

@media all and (max-width:500px) {
	div.sub_visual > img { width:40% }
}


/* none */
#sns_wrap {display:none}

/* snb */
#snb {width:100%; height:3.5rem; display:none;}
#snb h2.title {display:none}
#snb .nav {border-bottom:1px solid #ddd; text-align:center}
#snb .nav .tab-tt {display:none}
#snb .nav > ul > li {display:inline-block}
#snb .nav > ul > li > a {color:#333; display:block; font-size:1rem; height:3.5rem; padding:1rem 1.6rem; position:relative; transition:all .3s}
#snb .nav > ul > li.active > a {color:#00b0ad}

@media all and (min-width:1000px) {
	/*효과*/
	#snb .nav > ul > li:hover > a {color:#00b0ad}
	#snb .nav > ul > li:hover > a:before, 
	#snb .nav > ul > li.active > a:before {content:''; background-color:#00b0ad; border-radius:100%; width:8px; height:8px; position:absolute; left:14px; top:50%; transform:translateY(-50%)}
}

/* snb 3depth
#snb .nav ul ul {position:absolute; left:0; text-align:center; width:100%; z-index:1}
#snb .nav ul ul:after {content:''; position:absolute; left:-500%; bottom:0; width:1000%; height:1px; background:#ddd}
#snb .nav ul ul li {display:inline-block}
#snb .nav ul ul li a {color:#666; display:block; font-size:0.85rem; padding:18px 25px 18px 10px; position:relative}
#snb .nav ul ul li.active a {color:#3062be; text-decoration:underline}*/

/* ctt & location */
.content_info {position:relative; padding:3rem 0; text-align:center;}
.content_info h3 {color:#333; display:block; font-size:2.5rem; font-weight:500}
.location {display:none}
.location ul li {display:inline-block; font-size:0.8rem; position:relative; vertical-align:middle}
.location ul li:after {content:''; border-top:1px solid #999; border-right:1px solid #999; width:7px; height:7px; display:inline-block; margin:0 7px; vertical-align:2px; transform:rotate(45deg)}
.location ul li:last-child:after {display:none}
.location ul li:last-child {margin-right:0}
.location ul li a {color:#666}
.location ul li a:hover {text-decoration:underline}
.location ul li.icon a {font-size:0; position:relative}
.location ul li.icon a:before {content:'\e99b'; color:#666; display:inline-block; font-family:'fontIcon'; font-size:0.8rem}

/*content*/	
#content {max-width:1200px; margin:0 auto}
#content img {/* display:block; margin:0 auto; max-width:fit-content */}
@media all and (max-width:1280px) {
	#content img {max-width:100% !important}
}
/*depth4 탭메뉴 */
#depth4_menu_div {border:1px solid #ddd; max-width:1000px; margin:0 auto 2.5rem}
#depth4_menu_div .tab-tt {display:none}
#depth4_menu_div ul {display:table; table-layout:fixed; width:100%; position:relative}
#depth4_menu_div ul li {border-right:1px solid #ddd; display:table-cell; position:relative}
#depth4_menu_div ul li:last-child {border-right:0}
#depth4_menu_div ul li a {color:#666; display:block; text-align:center; padding:0.6rem 0; position:relative; transition:all .3s}
#depth4_menu_div ul li:hover a, #depth4_menu_div ul li.active a {color:#00b0ad}
#depth4_menu_div ul li.active a:after {content:''; border:1px solid #00b0ad; color:#000; width:100%; height:100%; position:absolute; left:-1px; top:-1px}


/*로그인*/
.MemberForm {width:45%; min-width:350px; margin:2rem auto 0}
.MemberForm .login-info {display:block; font-size:1.2rem; font-weight:500; line-height:1.3; margin-bottom:2rem; text-align:center}
.MemberForm .InfoBox > span {display:block; margin-bottom:10px}
.MemberForm .InfoBox > span input {border:1px solid #ddd; font-size:16px; width:100%; height:55px; padding:10px}
.MemberForm .InfoBox > span.mail {display:table; width:100%}
.MemberForm .InfoBox > span.mail span {display:table-cell}
.MemberForm .btnBox {margin-top:2.5rem}
.MemberForm .btnBox {clear:both; overflow:hidden}
.MemberForm .btnBox button {border:none; background-color:#20255a; color:#fff; font-size:22px; width:100%; height:70px; padding:10px; text-align:center}
.MemberForm .btnBox > span.btn {background-color:#666; display:block; float:left; margin-right:4%; width:48%; height:70px; line-height:70px; text-align:center}
.MemberForm .btnBox > span.btn:last-child {background-color:#20255a; margin-right:0}
.MemberForm .btnBox > span.btn a {display:block; color:#fff; font-size:22px; width:100%; height:100%}
.MemberForm> i {display:block; margin:2rem auto 1.5rem; text-align:center}

/*회원가입*/
.agreement > div {margin-bottom:1.5rem}
.agreement > .btnBox {margin-bottom:0}
.agreement > div strong {background-color:#ddd; clear:both; overflow:hidden; display:block; width:100%; height:3rem; line-height:3rem; padding:0 1rem}
.agreement > div strong span {display:inline-block; font-size:1rem; font-weight:500; text-align:left}
.agreement > div strong input {display:inline-block; margin-right:5px; vertical-align:0}
.agreement .box {max-height:300px; overflow-y:scroll}

.join .boardForm {margin-top:1rem}
.join table {margin-bottom:2.5rem}
.join table .id-check {background-color:#ddd; display:inline-block; font-size:14px; height:32px; line-height:32px; padding:0 10px}
.join table .form-select {display:inline-block}
.join table .form-select span {width:100% !important}
.join table .form-select span select {height:32px}
.join table .check {display:inline-block; margin:5px 1rem 0 -4px}
.join table .check input {width:auto !important; display:inline-block; vertical-align:middle}
.join table .check label {display:inline-block; vertical-align:middle; background:transparent; color:#666; width:auto; padding-left:5px; height:auto; line-height:0}

.join-result .tt {color:#333; display:block; font-size:1.6rem; font-weight:500; text-align:center}
.join-result .result {color:#00b0ad; font-size:1.3rem; margin-top:1rem; text-align:center}
.join-result .txt {color:#666; margin-top:1rem; text-align:center}

/*회원탈퇴*/
.joinout .outInfo {border:1px solid #ddd; background-color:#f9f9f9; padding:1.25rem 1.5rem}
.joinout .outInfo .group:first-child {margin-bottom:1rem}
.joinout .outInfo .group > strong {display:block; font-size:0.9rem; font-weight:500; margin-bottom:5px}
.joinout .outInfo .group > span {color:#666}

@media all and (max-width:767px) {
	.MemberForm {width:70%}
}

/************* 콘텐츠 ***************/
/* 1depth */
h2.dep01, ul.dep01 > li {display:block; color:#000; font-size:1.1rem; font-weight:500; line-height:160%; margin:50px 0 0 0; position:relative; padding:0 0 15px 0}
h2.dep01:before, ul.dep01 > li:before {content:''; background:#662e91; display:inline-block; margin-right:10px; margin-left:3px; width:8px; height:16px; transform:skewX(-20deg); vertical-align:0}
h2.dep01:first-child, ul.dep01 > li:first-child {margin:0}
h2.dep01 span {color:#666; display:block; font-size:0.8rem; line-height:1.4; padding-top:0.5rem}

/* 2depth */
h3.dep02, ul.dep02 > li {color:#333; display:block; font-size:0.9rem; line-height:165%; margin-left:10px; position:relative; padding:0 0 10px 20px}
h3.dep02:before, ul.dep02 > li:before {content:''; background-color:#ffd200; border-radius:2px; position:absolute; left:0; top:8px; width:10px; height:10px; transform:rotate(45deg)}

/* 3depth */
ul.dep03 {padding:0 0 20px 0}
h4.dep03, ul.dep03 > li, span.dep03 {color:#333; display:block; position:relative; padding:0 0 0 10px; line-height:170%}
h4.dep03:before, ul.dep03 > li:before, span.dep03:before {content:''; background:#666; border-radius:100%; position:absolute; left:0; top:12px; width:4px; height:4px}

/* 3depth 로 시작*/
ul.dep03 > li > ul > li {color:#666; display:block; position:relative; padding:0 0 0 15px; line-height:160%}
ul.dep03 > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:11px; width:5px; height:1px}
ul.dep03 > li > ul > li > ul {padding:10px 0 0}
ul.dep03 > li > ul > li > ul > li {color:#666; display:block; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep03 > li > ul > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 테이블 공통 */
.table table{position:relative}
.table table:before {content:''; background:#666; width:100%; height:1px; position:absolute; left:0; top:0}
.table table td ul {padding-bottom:0}
.line-r {border-right:1px solid #ddd}
table .tb-info {color:#666; display:inline-block; font-size:14px; margin-left:5px; margin-top:2px}

/*테이블 가운데 정렬*/
.table table.tableC td {text-align:center}

/*테이블 thead*/
.tbl_type1 {border-collapse:collapse; width:100%; line-height:160%; margin-bottom:10px}
.tbl_type1 thead th,
.tbl_type1 tbody th {background:#eceff4; border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6; color:#000; font-weight:normal; text-align:center; padding:13px}
.tbl_type1 tbody td{border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6; color:#333; font-size:1em; padding:0.6em; text-align:center}
.tbl_type1 tbody td ul li, .tbl_type1 tbody td span {color:#333; font-size:1em; padding-bottom:0}
.tbl_type1 thead tr th.line-r {border-right:1px solid #e6e6e6 !important}
.tbl_type1 thead tr th:last-child, 
.tbl_type1 tbody tr td:last-child {border-right:none}
.tbl_type1 tbody tr td.line-r {border-right:1px solid #e6e6e6}

/*테이블 tbody*/
.tbl_type2 {border-collapse:collapse; border-bottom:1px solid #666; margin:10px 0 15px 0; width:100%}
.tbl_type2 tbody th{background:#eceff4; border-top:1px solid #ddd; border-right:1px solid #ddd; color:#666; padding:0.6em; text-align:center}
.tbl_type2 tbody td{border-top:1px solid #ddd; border-right:1px solid #ddd; color:#666; text-align:center; padding:0.6em}
.tbl_type2 tbody tr:first-child th,
.tbl_type2 tbody tr:first-child td{border-top:2px solid #666 !important}
.tbl_type2 thead tr th:last-child,
.tbl_type2 tbody tr td:last-child {border-right:none}

/* depth 사이에 알림박스*/
.con-explain {background:url('/main/img/contents/box-bg.jpg') no-repeat 20px center; border:1px solid #e3e3e3; color:#000; padding:30px 30px 30px 130px; position:relative; margin-bottom:20px; min-height:110px; overflow:hidden}
.con-explain ul {padding:0}

/*달력 ex)명의변경신청*/
#ui-datepicker-div {background-color:#fff; border:1px solid #ddd; font-size:16px; padding:1rem}
#ui-datepicker-div .ui-datepicker-header {margin-bottom:0.5rem; position:relative}
#ui-datepicker-div .ui-datepicker-header > a {position:absolute; font-size:0; width:30px; height:30px}
#ui-datepicker-div .ui-datepicker-header > a:before {font-family:'fontIcon'; position:absolute; font-size:20px; width:100%; height:100%; line-height:30px; text-align:center}
#ui-datepicker-div .ui-datepicker-prev {left:0}
#ui-datepicker-div .ui-datepicker-prev:before {content:'\e93d'}
#ui-datepicker-div .ui-datepicker-next {right:0}
#ui-datepicker-div .ui-datepicker-next:before {content:'\e93f'}
#ui-datepicker-div .ui-datepicker-title {font-size:1rem; text-align:center}
#ui-datepicker-div th, #ui-datepicker-div td {width:30px; height:30px; text-align:center}
#ui-datepicker-div th {font-weight:500}

@media screen and (max-width: 1280px) {
	#snb {padding:0 1rem}
	#content {padding:0 1rem; padding-bottom:5rem;}
}

/*박스*/
.box {border:1px solid #ddd; background-color:#f9f9f9; padding:1rem}
.info-box {border:1px solid #ddd; background-color:#f9f9f9; margin-bottom:2.5rem; min-height:4rem; padding:1.5rem 1rem}
.top-box {background-color:#fff; border:1px solid #ccc; border-top:2px solid #333; color:#666; font-size:16px; margin-bottom:2.5rem; padding:2rem}
.top-box > strong {color:#333; display:block; font-size:0.9rem; font-weight:500; margin-bottom:10px}
.top-box ul li strong {font-weight:500}
.top-box .txt {display:block; margin-bottom:1rem}

/*찾아오시는길*/
.c010400 .map {border:none; border-radius:0; font-family:'NotoKr'; padding:0; width:100% !important}
.c010400 .wrap_controllers {display:none}
.c010400 .box {padding:1.2rem 1.5rem; text-align:center}
.c010400 .box .top > span {display:inline-block; margin-right:8%; vertical-align:middle}
.c010400 .box .top > span:last-child {margin-right:0}
.c010400 .box .top > span i {color:#333; font-size:1rem; font-weight:500; margin-right:5px; vertical-align:-2px}
.c010400 .box .top > span strong {padding-right:10px}
.c010400 .box .bottom {border-top:1px solid #ddd; padding:1.25rem 0.5rem 0}
.c010400 .box .bottom > strong {display:block; font-size:0.9rem; margin-bottom:5px}
.c010400 .root_daum_roughmap .cont .section.lst { border-bottom: 0; display: none }

/* Common */
.alert {background-color:#FCFBFB; border:1px solid #ddd; padding:1rem; margin-top:2rem; text-align:left;}
.alert li {font-size: 0.7rem; opacity: .7; margin:0.2rem 0;}
.alert li:before {content:'※';}

/* 마감재리스트 */
.fm_list {padding-top:2rem; overflow:hidden;}
.fm_list ul {display:flex; gap:2rem; flex-wrap:wrap; width: calc(100% + 2rem);}
.fm_list ul li {width:calc(25% - 2rem); text-align:center;}
.fm_list ul li a {display:block; padding:1.5rem; border:1px solid; border-radius: 1rem; overflow:hidden; transition: all .3s ease;}
.fm_list ul li a b {display:block; font-size: 2rem;}
.fm_list ul li a b em {font-size: 1.5rem; font-weight: normal;}
.fm_list ul li a span {font-size: 0.9rem; display: inline-block; margin-top: 1rem; background-color: #eee; border-radius: 50px; padding: 0.4rem 1rem; color: #111;}
.fm_list ul li:nth-child(1) a {border-color:#E57D86;}
.fm_list ul li:nth-child(1) a b { color:#E57D86}
.fm_list ul li:nth-child(2) a {border-color:#6CABDD;}
.fm_list ul li:nth-child(2) a b { color:#6CABDD}
.fm_list ul li:nth-child(3) a {border-color:#EDAB64; }
.fm_list ul li:nth-child(3) a b {color:#EDAB64}
.fm_list ul li:nth-child(4) a {border-color:#8464A9; }
.fm_list ul li:nth-child(4) a b {color:#8464A9}
.fm_list ul li:nth-child(5) a {border-color:#DF659E; }
.fm_list ul li:nth-child(5) a b {color:#DF659E}
.fm_list ul li:nth-child(6) a {border-color:#EDCC68; } 
.fm_list ul li:nth-child(6) a b {color:#EDCC68}
.fm_list ul li:nth-child(7) a {border-color:#A9D07F; } 
.fm_list ul li:nth-child(7) a b {color:#A9D07F}

.fm_list ul li a:hover b {color:#fff;}
.fm_list ul li:nth-child(1) a:hover {background-color:#E57D86}
.fm_list ul li:nth-child(1) a:hover span {color:#E57D86}
.fm_list ul li:nth-child(2) a:hover {background-color:#6CABDD}
.fm_list ul li:nth-child(2) a:hover span {color:#6CABDD}
.fm_list ul li:nth-child(3) a:hover {background-color:#EDAB64}
.fm_list ul li:nth-child(3) a:hover span {color:#EDAB64}
.fm_list ul li:nth-child(4) a:hover {background-color:#8464A9}
.fm_list ul li:nth-child(4) a:hover span {color:#8464A9}
.fm_list ul li:nth-child(5) a:hover {background-color:#DF659E}
.fm_list ul li:nth-child(5) a:hover span {color:#DF659E}
.fm_list ul li:nth-child(6) a:hover {background-color:#EDCC68}
.fm_list ul li:nth-child(6) a:hover span {color:#EDCC68}
.fm_list ul li:nth-child(7) a:hover {background-color:#A9D07F}
.fm_list ul li:nth-child(7) a:hover span {color:#A9D07F}
.fm_list ul li a:hover span {background-color:#fff; font-weight:bold;}

@media all and (max-width:910px) {
	.fm_list ul li {width:calc(33.33% - 2rem);}
}

@media all and (max-width:620px) {
	.fm_list ul li {width:calc(50% - 2rem);}
}

@media all and (max-width:420px) {
	.fm_list ul li a {padding:1rem;}
}