@charset "utf-8";
/* ===============================================
 * layout css
 * author : onepixel (Park Soo Hyun & Jeon Youl)
=============================================== */
/*
main color		: #000
sub color		: #228be6
*/

/* body */
body.fixed {position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; overflow:hidden}

/* main */
main {overflow:hidden}

/* container */
#container {float:none !important; width:auto !important; min-height:inherit !important; margin:0 !important; font-size:inherit !important; background:transparent !important}

/* header */
#header {position:fixed; top:0; left:0; right:0; padding:6px 0; background-color:rgba(0,0,0,0.75); z-index:990; transition:padding 0.5s, background-color 0.5s, box-shadow 0.5s}
#header.sticky {padding:8px 0; background-color:rgba(0,0,0,0.75); box-shadow:0 2px 2px 0 rgba(0,0,0,0.08)}
#header .container {position:relative}
#header #logo {position:absolute; top:0; left:0; padding-top:6px}
#header #logo a {display:block; width:160px}
#header #logo a img {display:block; width:100%}
#header .gnb-wrap > ul {font-size:0; text-align:center}
#header .gnb-wrap > ul > li {position:relative; display:inline-block; font-size:15px; vertical-align:top}
#header .gnb-wrap > ul > li > a {display:block; color:#fff; padding:18px 25px; opacity:0.7; transition:opacity 0.2s}
#header .gnb-wrap > ul > li:hover > a {opacity:1}
#header .gnb-wrap > ul > li > .submenu {position:absolute; top:110%; left:0; right:0; min-width:160px; text-align:left; padding:10px 0; border-top:3px solid #228be6; background-color:rgba(0,0,0,0.8); opacity:0; /*pointer-events:none;*/ visibility:hidden; transition:top 0.5s, opacity 0.5s, visibility 0.5s}
#header .gnb-wrap > ul > li > .submenu li a {display:block; font-size:14px; color:#fff; padding:10px 25px; opacity:0.5; transition:opacity 0.2s}
#header .gnb-wrap > ul > li > .submenu li a:hover {opacity:1}
#header .btn-show-menu {position:absolute; top:50%; right:0; width:40px; height:40px; margin-top:-20px; padding:0; border:none; background-color:transparent; outline:none}
#header .btn-show-menu span {position:absolute; display:block; left:8px; height:3px; background-color:#fff; opacity:0.75; transition:all 0.35s}
#header .btn-show-menu span.line-1 {top:9px; width:20px}
#header .btn-show-menu span.line-2 {top:16px; width:14px}
#header .btn-show-menu span.line-3 {top:23px; width:20px}
#header .btn-show-menu:hover span {opacity:1}
#header .btn-show-menu:hover span.line-2 {width:20px}
#header .all-menuitem-wrap {position:fixed; display:none; top:0; left:0; bottom:0; right:0; z-index:1200}
#header .all-menuitem-wrap .dimmed-bg {position:fixed; top:0; left:0; right:0; height:0; background-color:rgba(0,0,0,0.9); transition:height 0.5s ease}
#header .all-menuitem-wrap .btn-close-menu {position:absolute; top:100px; right:100px; width:80px; height:80px; font-size:56px; color:#fff; padding:0; border:none; background-color:transparent; cursor:pointer; outline:none; opacity:0; z-index:10; transition:opacity 0.5s; transition-delay:0.3s}
#header .all-menuitem-wrap .btn-close-menu i {transition:transform 0.35s ease-in}
#header .all-menuitem-wrap .btn-close-menu:hover i {transform:rotate(180deg)}
#header .all-menuitem-wrap .menu-table {display:table; width:100%; height:100%}
#header .all-menuitem-wrap .menu-table .menu-cell {display:table-cell; vertical-align:middle}
#header .all-menuitem-wrap .menu-item {margin-bottom:60px; opacity:0; transform:translateY(-30px); transition:opacity 0.6s, transform 0.6s}
#header .all-menuitem-wrap .menu-item:first-child {transition-delay:0.3s}
#header .all-menuitem-wrap .menu-item:nth-child(2) {transition-delay:0.5s}
#header .all-menuitem-wrap .menu-item:nth-child(3) {transition-delay:0.7s}
#header .all-menuitem-wrap .menu-item:nth-child(4) {transition-delay:0.9s}
#header .all-menuitem-wrap .menu-item:nth-child(5) {transition-delay:1.1s}
#header .all-menuitem-wrap .menu-item:nth-child(6) {transition-delay:1.3s}
#header .all-menuitem-wrap.__open .dimmed-bg {height:100%}
#header .all-menuitem-wrap.__visible .dimmed-bg {height:100%}
#header .all-menuitem-wrap.__open .btn-close-menu {opacity:1}
#header .all-menuitem-wrap.__open .menu-item {opacity:1; transform:translateY(0)}
#header .all-menuitem-wrap .menu-item h2 a {display:inline-block; padding-bottom:15px; font-size:24px; font-weight:300; color:#fff; border-bottom:1px solid rgba(255,255,255,0.5)}
#header .all-menuitem-wrap .menu-item ul {margin-top:15px}
#header .all-menuitem-wrap .menu-item ul li {margin-bottom:8px}
#header .all-menuitem-wrap .menu-item ul li a {font-size:18px; font-weight:300; color:#fff; opacity:0.5; transition:opacity 0.3s}
#header .all-menuitem-wrap .menu-item ul li a:hover {opacity:1}

/* main popup */
#hd_pop {width:100%; max-width:1170px; z-index:900}
.hd_pops {max-width:90%; margin:auto; border:none}
.hd_pops .hd_pops_con {max-width:100%; height:auto !important}
.hd_pops .hd_pops_con p {font-size:0}
.hd_pops .hd_pops_con br {display:none}

/* footer */
#footer {clear:both; position:relative; padding:80px 0 180px; text-align:center; background-color:#171717}
#footer a {color:#666}
#footer .btn-go-top {position:absolute; top:-32px; right:100px; width:60px; height:65px; padding:0; font-size:13px; font-weight:700; color:#fff; border:none; background-color:#228be6; cursor:pointer; outline:none; opacity:1; z-index:990; transition:opacity 0.5s, background-color 0.5s}
#footer .btn-go-top span {display:block; letter-spacing:0.2em}
#footer .btn-go-top.__hide {opacity:0; z-index:-1; transition:none}
#footer .btn-go-top.__fixed {position:fixed; top:auto; bottom:50px}
#footer .btn-go-top:hover {background-color:#000}
#footer .footer-logo {margin-bottom:30px}
#footer address {font-size:13px; color:#666; line-height:1.85}
#footer address em:before {content:''; display:inline-block; width:1px; height:10px; margin:0 8px; background-color:#fff; opacity:0.1}
#footer .copyright {font-size:13px; color:#666}
#footer .btn-wrap {padding-top:40px}
#footer .btn-wrap .btn-bottom {display:inline-block; font-size:13px; font-weight:500; color:#888; margin:0 2px; padding:8px 18px; border:1px solid rgba(255,255,255,0.2); transition:color 0.3s, border-color 0.3s, background-color 0.3s}
#footer .btn-wrap .btn-bottom:hover {color:#343a40; border-color:#fff; background-color:#fff}

/* 빠른 상담신청 */
.quick-request-form {display:none; position:fixed; bottom:-400px; left:15px; width:320px; text-align:left; z-index:990; transition:bottom 0.5s ease-out}
.quick-request-form[aria-expanded="true"] {bottom:0}
.quick-request-form header {padding:14px 18px; font-size:16px; font-weight:300; color:#fff; background-color:#4263eb}
.quick-request-form .btn-form-toggle {position:absolute; top:-20px; right:15px; width:55px; height:55px; font-size:20px; color:#4263eb; border:2px solid #4263eb; border-radius:50%; background-color:#fff; outline:none}
.quick-request-form .btn-form-toggle i {transition:transform 0.35s; transition-delay:0.5s}
.quick-request-form[aria-expanded="true"] .btn-form-toggle i {transform:rotate(180deg)}
.quick-request-form .body {padding:20px 18px; background-color:#2b3352}
.quick-request-form p {font-size:13px; font-weight:300; color:#fff; line-height:1.7; margin-bottom:20px; opacity:0.7}
.quick-request-form table {width:100%}
.quick-request-form table th, .quick-request-form table td {font-size:14px; color:#fff; padding:4px 0}
.quick-request-form table th {font-weight:normal}
.quick-request-form .request-form {width:100%; height:40px; padding:10px; color:#fff; border:none; border-radius:6px; background-color:#1d2444; outline:none}
.quick-request-form .request-form.tel {width:60px}
.quick-request-form textarea.request-form {height:auto}
.quick-request-form .check-style {margin:10px 0 25px}
.quick-request-form .check-style label {font-size:12px !important; color:#fff !important; opacity:0.75}
.quick-request-form .check-style span {font-size:12px; color:#fff; text-decoration:underline; margin-left:5px; cursor:pointer; vertical-align:middle}

/* 하단 상담 바 (2019-07-12 추가) */
.counsel-bar {position:fixed; bottom:-130px; left:0; right:0; padding:20px 0; background-color:#153579; z-index:990; transition:bottom 0.7s ease; transition-delay:0.3s}
.counsel-bar.is-visible {bottom:0}
.counsel-bar .container-wide {position:relative}
.counsel-bar .img-point {position:absolute; left:80px; top:-55px; z-index:5; animation:counsel-bubble 2.5s infinite linear}
.counsel-bar .form-container {padding-left:18%}
.counsel-bar .form-container > [class*='col'] {float:left}
.counsel-bar .request-form {height:50px; margin:0 4px; padding:5px 16px; font-size:14px; color:rgba(255,255,255,0.6); border:none; border-radius:30px; background-color:rgba(0,0,0,0.35)}
.counsel-bar .col-form {width:76%}
.counsel-bar .col-form .check-wrap {display:inline-block; font-size:13px; color:rgba(255,255,255,0.7); margin-right:20px; padding-left:20px}
.counsel-bar .col-form .check-wrap input[type=checkbox] {margin:0 5px 0; vertical-align:-5px}
.counsel-bar .col-form .check-wrap label {margin:0; vertical-align:middle}
.counsel-bar .col-form .check-wrap span {cursor:pointer; vertical-align:middle}
.counsel-bar .col-form .btn-send {padding:0 28px; height:50px; font-size:16px; font-weight:500; color:#fff; border:none; border-radius:30px; background-color:#000; outline:0; cursor:pointer}
.counsel-bar .col-info {width:24%; text-align:right; padding-top:10px}
.counsel-bar .col-info h3 {position:relative; font-size:26px; font-weight:700; color:rgba(255,255,255,0.7)}
.counsel-bar .col-info h3:before {content:''; position:absolute; display:block; top:0; left:0; width:1px; height:100%; background-color:rgba(255,255,255,0.12)}
.counsel-bar .col-info h3 i {vertical-align:middle}
/*
.counsel-bar .col-button {border-right:1px solid rgba(255,255,255,0.12)}
.counsel-bar .col-button .check-wrap {display:inline-block; font-size:13px; color:rgba(255,255,255,0.7); margin-right:20px}
.counsel-bar .col-button .check-wrap input[type=checkbox] {margin:0 5px 0}
.counsel-bar .col-button .check-wrap label {margin:0; vertical-align:middle}
.counsel-bar .col-button .check-wrap span {vertical-align:middle}
.counsel-bar .col-button .btn-send {padding:0 28px; height:50px; font-size:16px; font-weight:500; color:#fff; border:none; border-radius:30px; background-color:#000; outline:0; cursor:pointer}
*/


.footer_logo_gray{
	width:42px;
}

/*카카오톡상담 아이콘*/
#fixedbutton {
    position: fixed;
    bottom: 30px;
    right: 20px; 
	z-index:-999;
}

@keyframes counsel-bubble {
    0% {transform:translateY(0); opacity:1}
    25% {transform:translateY(15px); opacity:1}
    50% {transform:translateY(15px); opacity:0.6}
    75% {transform:translateY(15px); opacity:1}
    100% {transform:translateY(0); opacity:1}
}

@keyframes counsel-bubble2 {
    0% {transform:translateY(5); opacity:0.2}
    25% {transform:translateY(5px); opacity:0.2}
    50% {transform:translateY(8px); opacity:0.2}
    75% {transform:translateY(5px); opacity:0.2}
    100% {transform:translateY(5); opacity:0.2}
}

/* ===============================================
 * MEDIA QUERY
=============================================== */
/* PC 이상 */
@media (min-width:1200px) {

}

@media (max-width:1567px) {
	.counsel-bar .form-container {padding-left:240px}
	.counsel-bar .col-form {width:80%}
	.counsel-bar .col-form .check-wrap {padding-left:0}
	.counsel-bar .col-info {width:20%; padding-top:14px}
	.counsel-bar .col-info h3 {font-size:20px}
}

@media (max-width:1476px) {
	.counsel-bar .img-point {display:none}
	.counsel-bar .form-container {padding-left:0}
	.counsel-bar .col-form {width:80%}
	.counsel-bar .col-form .check-wrap {padding-left:0}
	.counsel-bar .col-info {width:20%; padding-top:14px}
	.counsel-bar .col-info h3 {font-size:20px}
}

@media (max-width:1199px) {
	.quick-request-form {display:block}
	.counsel-bar {display:none}
}

/* 태블릿 이상 */
@media (min-width:992px) {
	/* header */
	#header .gnb-wrap > ul > li:hover > .submenu {top:100%; opacity:1; visibility:visible; pointer-events:auto}
}

/* 태블릿 이하 */
@media (max-width:991px) {
	/* header */
	#header {height:60px; padding:0 !important}
	#header #logo {padding-top:13px}
	#header #logo a {width:110px}
	#header .btn-show-menu {top:12px; margin-top:0}
	#header .gnb-wrap {display:none}
	#header .all-menuitem-wrap .btn-close-menu {top:50px; right:50px}

	/* 빠른 상담신청 */
	.quick-request-form {position:absolute; left:50%; margin-left:-160px}
}

/* 모바일 이상 */
@media (min-width:768px) {

}

/* 모바일 기기 */
@media (max-width:767px) {
	/* header */
	#header #logo {left:15px}
	#header .btn-show-menu {right:15px}
	#header .all-menuitem-wrap .btn-close-menu {top:30px; right:30px; width:50px; height:50px; font-size:32px}
	#header .all-menuitem-wrap .menu-table {display:block; width:auto; padding:50px 30px; overflow:hidden; overflow-y:auto}
	#header .all-menuitem-wrap .menu-table .menu-cell {display:block}
	#header .all-menuitem-wrap .menu-item {margin-bottom:40px}
	#header .all-menuitem-wrap .menu-item h2 a {font-size:20px}
	#header .all-menuitem-wrap .menu-item ul li a {font-size:15px}

	/* 빠른 상담신청 */
	.quick-request-form {bottom:-416px; width:260px; margin-left:-130px}
	.quick-request-form header {padding:12px 18px; font-size:15px}
	.quick-request-form .btn-form-toggle {width:50px; height:50px}
	.quick-request-form table th, .quick-request-form table td {font-size:12px}
	.quick-request-form .request-form {font-size:13px}
	.quick-request-form .request-form.tel {width:48px}
    .quick-request-form .check-style label {display:inline}
    
    /* main popup */
    .hd_pops {top:100px !important; left:50% !important; margin-left:-45%}
    .hd_pops_footer {font-size:13px}

	/* footer */
	#footer {padding:50px 0 90px}
	#footer .btn-go-top {top:-25px; right:15px; width:50px; height:50px; font-size:12px}
	#footer .btn-go-top.__fixed {bottom:30px}
	#footer address {font-size:12px}
	#footer .copyright {font-size:12px}
	#footer .btn-wrap {padding-top:40px}
}