@charset "utf-8";

/* common style */
html.fixed {position: fixed; left: 0; width: 100%; height: 100%;}

label.rdo {display: inline-block; position: relative; padding: 0 0 0 36px;}
label.rdo input {position: absolute; top: 5px; left: 0; width: 1px; height: 1px; opacity: 0; cursor: pointer;}
label.rdo span {display: block; font-size: 18px; line-height: 26px; color: #444444;}
label.rdo span:before {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin: -13px 0 0; background: url("../images/common/rdo.png") 0 0 no-repeat;}
label.rdo input:checked + span:before {background-position: 0 -26px;}
label.rdo input:focus + span:before {outline: 1px dotted #000000;}

label.chk {display: inline-block; position: relative; padding: 0 0 0 31px;}
label.chk input {position: absolute; top: 5px; left: 0; width: 1px; height: 1px; opacity: 0; cursor: pointer;}
label.chk span {display: block; font-weight: 700; font-size: 18px; line-height: 20px; color: #222222;}
label.chk span:before {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin: -10px 0 0; background: url("../images/common/chk.gif") 0 0 no-repeat;}
label.chk input:checked + span:before {background-position: 0 -20px;}
label.chk input:focus + span:before {outline: 1px dotted #000000;}

.btn-wrap {overflow: hidden; width: 100%; text-align: center;}
.btn-wrap a {float: left; margin: 0 0 0 20px;}
.btn-wrap a:first-child {margin: 0;}
.btn-wrap input {float: left; margin: 0 0 0 20px;}
.btn-wrap input:first-child {margin: 0;}
.btn-wrap button {float: left; margin: 0 0 0 20px;}
.btn-wrap button:first-child {margin: 0;}

._btn {display: inline-block; box-sizing: border-box; border-radius: 0; text-align: center; vertical-align: top; cursor: pointer; -webkit-appearance: none; appearance: none; border-width: 1px; border-style: solid;}
._btn.c1 {border-color: #000000; background: #000000; color: #ffffff;} /* 검은바탕 흰색글씨 */
._btn.c2 {border-color: #888888; background: #888888; color: #ffffff;} /* 진한회색 흰색글씨 */
._btn.c3 {border-color: #2d3d47; background: #2d3d47; color: #ffffff;} /* 남색 흰색글씨 */
._btn.c4 {border-color: #33b1d3; background: #33b1d3; color: #ffffff;} /* 하늘색 흰색글씨 */
._btn.c5 {border-color: #acacac; background: #acacac; color: #ffffff;} /* 연회색 흰색글씨 */
._btn.c6 {border-color: #28313a; background: #28313a; color: #ffffff;} /* 진남색 흰색글씨 */
._btn.c7 {border-color: #052ab6; background: #052ab6; color: #ffffff;} /* 진남색 흰색글씨 */
._btn.c8 {border: none; background: rgb(0,209,197); background: -moz-linear-gradient(-45deg, rgba(0,209,197,1) 0%, rgba(5,70,204,1) 100%); background: -webkit-linear-gradient(-45deg, rgba(0,209,197,1) 0%,rgba(5,70,204,1) 100%); background: linear-gradient(135deg, rgba(0,209,197,1) 0%,rgba(5,70,204,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d1c5', endColorstr='#0546cc',GradientType=1 ); color: #ffffff;} /* 진남색 흰색글씨 */
._btn.empty-01 {border-color: #8b6c55; background: transparent; color: #8b6c55;} /* 연갈색 */
._btn.empty-02 {border-color: #808080; background: transparent; color: #808080;} /* 연회색 */
._btn.empty-03 {border-color: #2d3d47; background: transparent; color: #2d3d47;} /* 남색 */
._btn.empty-04 {border-color: #052ab6; background: transparent; color: #052ab6;} /* 남색 */
.btn-wide-basic{display: inline-block;width:100%;padding:14px 0;margin-bottom:13px;background:linear-gradient(to left, #9fcf18, #55b94d);box-shadow:2px 2px 5px 2px rgba(0,0,0, .08); color:#fff !important;font-size:1.3em;font-weight: bold; text-align: center}


.w-base{max-width:50.958333333vw;margin:50px auto}
#windowpopup {height: 100%;}
.w100{width:100%}
.w-base .img-responsive{width:100%}
.img-responsive{max-width: 100%;height: auto;}


/* 메인팝업 */
.main-popup {position: relative; z-index: 1000; height: 100%; padding: 0 0 45px; background: #ffffff;}
.main-popup .main-popup-body {position: relative; width: 100%; height: 100%; border: solid #d9d9d9; border-width: 1px 1px 0; word-break: break-all;}
.main-popup .main-popup-body img {max-width: 100%; max-height: 100%;}
.main-popup .main-popup-body a {display: block;}

.main-popup .main-popup-top {overflow: hidden; position: absolute; right: 0; top: 0; left: 0; padding: 15px; z-index: 1002}
.main-popup .main-popup-top label.chk {float: left; padding: 0 0 0 23px;}
.main-popup .main-popup-top label.chk span {font-weight: 400; font-size: 15px; line-height: 15px; color: #222222;}
.main-popup .main-popup-top label.chk span:before {width: 15px; height: 15px; margin: -7px 0 0; background: #ffffff url("../images/common/check-15x30.png") 0 0 no-repeat; background-size: 15px 30px;}
.main-popup .main-popup-top label.chk input:checked + span:before {background-position: 0 -15px;}
.main-popup .main-popup-top .close {float: right; width: 15px; height: 15px; background: url("../images/common/layer-close.png") center center no-repeat; background-size: contain; text-indent: -9999em;}

.main-popup .main-popup-foot {overflow: hidden; position: absolute; right: 0; bottom: 0; left: 0; padding: 15px; background: #d9d9d9;}
.main-popup .main-popup-foot label.chk {float: left; padding: 0 0 0 23px;}
.main-popup .main-popup-foot label.chk span {font-weight: 400; font-size: 15px; line-height: 15px; color: #222222;}
.main-popup .main-popup-foot label.chk span:before {width: 15px; height: 15px; margin: -7px 0 0; background: #ffffff url("../images/common/check-15x30.png") 0 0 no-repeat; background-size: 15px 30px;}
.main-popup .main-popup-foot label.chk input:checked + span:before {background-position: 0 -15px;}
.main-popup .main-popup-foot .close {float: right; width: 15px; height: 15px; background: url("../images/common/layer-close.png") center center no-repeat; background-size: contain; text-indent: -9999em;}


/* 메인윈도우 */
.main-window-popup {position: relative; z-index: 1000; width: auto; height: 100%; padding: 0 0 45px; background: #ffffff; border: 1px solid #d9d9d9;}
.main-window-popup .main-window-popup-body {overflow-x: hidden; overflow-y: auto; position: relative; width: 100%; height: 100%; word-break: break-all;}
.main-window-popup .main-window-popup-body img {max-width: 100%;}
.main-window-popup .main-window-popup-body a {display: block;}
.main-window-popup .main-window-popup-foot {position: absolute; right: 0; bottom: 0; left: 0; overflow: hidden; padding: 15px; background: #d9d9d9;}
.main-window-popup .main-window-popup-foot label.chk {float: left; padding: 0 0 0 23px;}
.main-window-popup .main-window-popup-foot label.chk span {font-weight: 400; font-size: 15px; line-height: 15px; color: #222222;}
.main-window-popup .main-window-popup-foot label.chk span:before {width: 15px; height: 15px; margin: -7px 0 0; background: #ffffff url("../images/common/check-15x30.png") 0 0 no-repeat; background-size: 15px 30px;}
.main-window-popup .main-window-popup-foot label.chk input:checked + span:before {background-position: 0 -15px;}
.main-window-popup .main-window-popup-foot .close {float: right; width: 15px; height: 15px; background: url("../images/common/layer-close.png") center center no-repeat; background-size: contain; text-indent: -9999em;}

.layer-wrap {}
.layer-wrap .layer-back {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7);}
.layer-wrap .layer-outer {position: absolute; z-index: 1000; opacity: 0; transform: translateY(50px); transition: opacity 500ms;}
.layer-wrap .layer-outer .layer-inner {background: #ffffff;}
.layer-wrap .layer-outer .layer-inner .layer-head {position: relative; padding: 0 0 0 20px; background: #333333;}
.layer-wrap .layer-outer .layer-inner .layer-head .layer-title {font-weight: 700; font-size: 16px; line-height: 50px; color: #ffffff;}
.layer-wrap .layer-outer .layer-inner .layer-head .layer-close {display: block; position: absolute; top: 15px; right: 15px; width: 21px; height: 21px; background: url("../images/common/layer_close.png") 0 0 no-repeat; text-indent: -9999em;}
.layer-wrap .layer-outer .layer-inner .layer-body {overflow: hidden;}
.layer-wrap .layer-outer .layer-inner .layer-body .only-scroll-body {overflow-x: hidden; overflow-y: auto; margin: 0 -17px 0 0; padding: 0 17px 0 0;}

.layer-wrap.open .layer-outer {opacity: 1; transform: translateY(0);}

.layer-popup.product {position: relative; width: 1110px;}
.layer-popup.product .layer-close {position: absolute; top: 0; right: -90px; width: 70px; height: 70px; background: url("../images/common/product-layer-close.png") center center no-repeat; text-indent: -9999em;}
.layer-popup.product .layer-body {}
.layer-popup.product .layer-body .pc-img {}
.layer-popup.product .layer-body .m-img {display: none;}
.layer-popup.product .layer-body img {max-width: 100%;}

/* load motion */
.n-motion {opacity: 0; transition-property: all; transition-duration: 1s;}

.n-delay1 {transition-delay: 0.1s;}
.n-delay2 {transition-delay: 0.2s;}
.n-delay3 {transition-delay: 0.3s;}
.n-delay4 {transition-delay: 0.4s;}
.n-delay5 {transition-delay: 0.5s;}
.n-delay6 {transition-delay: 0.6s;}
.n-delay7 {transition-delay: 0.7s;}
.n-delay8 {transition-delay: 0.8s;}
.n-delay9 {transition-delay: 0.9s;}

.n-motion.n-left   {transform: translateX(-50px);}
.n-motion.n-right  {transform: translateX(50px);}
.n-motion.n-top    {transform: translateY(-50px);}
.n-motion.n-bottom {transform: translateY(50px);}
.n-motion.n-spin   {transform: rotate(180deg);}

.n-motion.n-active {opacity: 1;}

.n-motion.n-left.n-active   {transform: translateX(0);}
.n-motion.n-right.n-active  {transform: translateX(0);}
.n-motion.n-top.n-active    {transform: translateY(0);}
.n-motion.n-bottom.n-active {transform: translateY(0);}
.n-motion.n-spin.n-active   {transform: rotate(0deg);}

/* lazy load */
.lazy-hidden {opacity: 0;}
.lazy-loaded {transition: all 0.3s; opacity: 1;}

/* customSelect */
.custom-select {position: relative;}
.custom-select .custom-input {display: block; box-sizing: border-box; position: relative; overflow: hidden; max-width: 100%; height: 50px; padding: 0 20px; border: 1px solid transparent; background: #f7f7f7 url("../images/common/arr-darkgray-9x6.png") right 20px center no-repeat;font-size: 18px;line-height: 48px;color: #000000;text-align: left;white-space: nowrap;text-overflow: ellipsis;}
.custom-select.on .custom-input {border-bottom: 1px solid #cb9e77;}
.custom-select .custom-scroll-outer {overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; right: 0; left: 0; z-index: 10; height: 0; background: #f3f3f3; opacity: 0;}
.custom-select .custom-scroll {position: relative; box-sizing: border-box; width: 100%; height: 100%;}
.custom-select .custom-scroll ul {position: absolute; top: 0; left: 0; right: 0; width: 100% !important;}
.custom-select .custom-scroll ul li {display: block; border-bottom: 1px solid #cdcdcd;}
.custom-select .custom-scroll ul li:last-child {border-bottom: none;}
.custom-select .custom-scroll ul li button {display: block; width: 100%; padding: 0 20px; font-size: 18px; line-height: 50px; color: #999999; cursor: pointer; text-align: left;}
.custom-select .custom-scroll ul li:hover button {color: #555555;}
.custom-select .dim {position: fixed; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; z-index: 2;}

/* Pagination */
.pagination {overflow: hidden; position: relative; width: 100%; text-align: center;}
.pagination .paging {display: inline-block;}
.pagination .paging > a {display: block; float: left; box-sizing: border-box; width: 26px; height: 26px; background-color: none; transition: all .3s;}
.pagination .paging > a:first-child {margin: 0;}
.pagination .paging .page_first {background: url("../images/common/page-first.png") center center no-repeat; background-size: 15px 10px;}
.pagination .paging .page_prev {margin: 0 0 0 15px; background: url("../images/common/page-prev.png") center center no-repeat; background-size: 8px 10px;}
.pagination .paging .page_next {margin: 0 15px 0 0; background: url("../images/common/page-next.png") center center no-repeat; background-size: 8px 10px;}
.pagination .paging .page_last {background: url("../images/common/page-last.png") center center no-repeat; background-size: 15px 10px;}
.pagination .paging .page {float: left; padding: 0 22px;}
.pagination .paging .page > a {display: block; float: left; width: 26px; height: 26px; margin: 0 0 0 13px;}
.pagination .paging .page > a span {display: block; position: relative; font-weight: 300; font-size: 16px; line-height: 26px; color: #999999; transition: all .3s;}
.pagination .paging .page > a:first-child {margin: 0;}
.pagination .paging .page > a.on span, .pagination .paging .page > a:hover span {font-weight: 700; color: #052ab6;}

/* faq list */
.faq-list {border-top: 2px solid #111111;}
.faq-list ul {}
.faq-list ul li {}
.faq-list ul li .tbox {display: block; overflow: hidden; position: relative; padding: 0 80px 0 78px; border-bottom: 1px solid #dddddd; transition: background .3s;}
.faq-list ul li .tbox .num {display: inline-block; position: absolute; top: 50%; left: 33px; font-size: 16px; line-height: 24px; margin: -12px 0 0; color: #052ab6; text-align: center; transition: all .3s;}
.faq-list ul li .tbox:after {display: block; content: ''; position: absolute; top: 36px; right: 30px; width: 21px; height: 11px; background-image: url("../images/common/arr-gray-bottom-30x16.png"); background-repeat: no-repeat; background-position: 0 0; background-size: contain; transition: all .3s;}
.faq-list ul li .tbox .tit {padding: 28px 0 26px; font-size: 18px; line-height: 27px; color: #444444;}

.faq-list ul li .abox {overflow: hidden; position: relative; height: 0; padding: 0 78px; transition: padding .3s;}
.faq-list ul li .abox .txt {font-size: 16px; line-height: 26px; color: #555555;}
.faq-list ul li.empty {padding: 100px 0; text-align: center; border-bottom: 2px solid #dddddd; font-size: 16px; line-height: 36px;}

.faq-list ul li.on .abox {height: auto; padding: 0 78px 23px; border-bottom: 1px solid #e1e1e1;}
.faq-list ul li.on .abox:before {top: 30px;}
.faq-list ul li.on .tbox {border-bottom: none;}
.faq-list ul li.on .tbox .tit {font-weight: 700; color: #052ab6;}
.faq-list ul li.on .tbox:after {background-image: url("../images/common/arr-blue-bottom-30x16.png"); transform: rotate(-180deg);}

/* pc, mobile each */
.pc-only {display: block !important;}
.mo-only {display: none !important;}

@media screen and (max-width: 750px) {
    label.chk {padding: 0 0 0 49px;}
    label.chk span {font-size: 26px; line-height: 30px;}
    label.chk span:before {width: 30px; height: 30px; margin: -15px 0 0; background: url("../images/common/chk-m.gif") 0 0 no-repeat;}
    label.chk input:checked + span:before {background-position: 0 -30px;}

    ._btn {border-width: 2px;}

    /* 메인팝업 */
    .main-popup {width: 650px; padding: 0 0 70px;}
    .main-popup .main-popup-body {border-width: 2px 2px 0;}
	.main-popup .main-popup-top {padding: 20px 24px; z-index: 1002}
	.main-popup .main-popup-top label.chk {padding: 0 0 0 46px;}
	.main-popup .main-popup-top label.chk span {font-size: 30px; line-height: 30px; color: #2d3d47;}
	.main-popup .main-popup-top label.chk span:before {width: 30px; height: 30px; margin: -15px 0 0; background: #ffffff url("../images/common/check-30x60.png") 0 0 no-repeat; background-size: 30px 60px;}
	.main-popup .main-popup-top label.chk input:checked + span:before {background-position: 0 -30px;}
    .main-popup .main-popup-top .close {width: 30px; height: 30px;}

	.main-popup .main-popup-foot {padding: 20px 24px;}
	.main-popup .main-popup-foot label.chk {padding: 0 0 0 46px;}
	.main-popup .main-popup-foot label.chk span {font-size: 30px; line-height: 30px; color: #2d3d47;}
	.main-popup .main-popup-foot label.chk span:before {width: 30px; height: 30px; margin: -15px 0 0; background: #ffffff url("../images/common/check-30x60.png") 0 0 no-repeat; background-size: 30px 60px;}
	.main-popup .main-popup-foot label.chk input:checked + span:before {background-position: 0 -30px;}
    .main-popup .main-popup-foot .close {width: 30px; height: 30px;}

    /* 레이어 팝업 */
	.layer-popup.product {width: 670px;}
	.layer-popup.product .layer-close {top: auto; right: 50%; bottom: -90px; transform: translateX(50%);}
	.layer-popup.product .layer-body .pc-img {display: none;}
    .layer-popup.product .layer-body .m-img {display: block;}

    /* customSelect */
    .custom-select .custom-input {box-sizing: border-box; height: 80px; border: solid transparent; border-width: 0 2px 2px; background: #f7f7f7 url("../images/common/arr-darkgray-28x16.png") right 20px center no-repeat; font-size: 30px; line-height: 78px; padding: 0 50px 0 20px;}
    .custom-select.on .custom-input {border-bottom: 2px solid #cb9e77;}
    .custom-select .custom-scroll-outer {overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; right: 0; left: 0; z-index: 10; height: 0; background: #f3f3f3; opacity: 0;}
    .custom-select .custom-scroll {position: relative; box-sizing: border-box; width: 100%; height: 100%;}
    .custom-select .custom-scroll ul {position: absolute; top: 0; left: 0; right: 0; width: 100% !important;}
    .custom-select .custom-scroll ul li {display: block; border-bottom: 2px solid #dddddd; border-left: 0;}
    .custom-select .custom-scroll ul li:last-child {border-bottom: 2px solid #dddddd;}
    .custom-select .custom-scroll ul li button {display: block; width: 100%; padding: 18px 20px 20px; font-size: 30px; line-height: 40px; color: #999999; cursor: pointer; text-align: left;}
    .custom-select .custom-scroll ul li:hover button {color: #555555;}

    /* Pagination */
    .pagination .paging > a {width: 50px; height: 50px;}
    .pagination .paging .page_first {background-size: 26px 18px;}
    .pagination .paging .page_prev {margin: 0 0 0 20px; background-size: 14px 18px;}
    .pagination .paging .page_next {margin: 0 20px 0 0; background-size: 14px 18px;}
    .pagination .paging .page_last {background-size: 26px 18px;}
    .pagination .paging .page {padding: 0 42px;}
    .pagination .paging .page > a {width: 50px; height: 50px;}
    .pagination .paging .page > a > span {font-size: 28px; line-height: 50px;}

    /* faq list */
    .faq-list ul li .tbox {padding: 0 90px 0 80px; border-bottom: 2px solid #dddddd;}
    .faq-list ul li .tbox .num {font-size: 24px; line-height: 36px; margin: -18px 0 0;}
    .faq-list ul li .tbox .tit {padding: 33px 0; font-size: 28px; line-height: 42px;}
    .faq-list ul li .tbox:after {top: 50%; right: 30px; width: 30px; height: 16px; margin: -8px 0 0;}
    .faq-list ul li .abox {padding: 0 90px 0 80px;}
    .faq-list ul li .abox .txt {font-size: 26px; line-height: 38px; color: #444444;}
    .faq-list ul li.on .abox {padding: 0 90px 34px 80px; border-bottom: 2px solid #dddddd;}
	.faq-list ul li.empty {padding: 150px 0; font-size: 24px; line-height: 36px;}

	/* pc, mobile each */
	.pc-only {display: none !important;}
	.mo-only {display: block !important;}
}