:root {
/* Colors: */
--off-white: #FDFCFC;
}


h1, h2, h3, h4, h5, h6, p {margin-bottom: 0; padding-bottom: 0;}

.clear:after {clear: both; content: ''; display: block;}
hr.h3_bar {border: 1px solid #f59a7c; width: 65px; margin: 0 auto;}

body {font-family: 'Noto Sans KR', sans-serif; font-weight: normal; color:#292929; position: relative;}
a:focus, .btn:focus {outline: none; box-shadow: none;}

.full_container {width: 100%; min-width: 1040px; margin: 0 auto;}
.body_container {width: 1040px; margin: 0 auto;}

.sub_bg {background: transparent linear-gradient(180deg, rgba(214, 195, 180, 0.096) 0%, rgba(173, 149, 139, 0.096) 100%) 0% 0% no-repeat padding-box; padding-top: 110px; border-top: 1px solid #C7C7C7;}
.sub_bg .body_container {background: url('../img/house_bg.svg') no-repeat left bottom; padding-bottom: 418px;}
.sub_bg h2 {font-size: 32px; letter-spacing: -1.28px;}

header {width: 100%; background-color: white; border-bottom: 1px solid #C7C7C7;}
header .body_container {height: 104px; -ms-flex-pack: justify!important; justify-content: space-between!important; display: -ms-flexbox!important; display: flex!important; }
header h1 {padding-top: 32px; margin-bottom: 0;}
header h1 img {display: block; width: 229px;}
header .nav {margin-top:32px;}
header .nav a, header .nav a:hover {font-size:16px; color:#5c5a5a; padding: 8px 16px;}
header .navbar-toggle {display: none;}

.app_link {height: 800px;}
.app_link .bg_img {height: 800px; background: url(../img/main_bg.jpg) no-repeat center top; position: absolute; z-index: -1;}
.app_link .body_container {padding-top: 219px;}
.app_link_text1 {font-size: 24px; line-height: 36px; letter-spacing: -0.96px;}
.app_link_text2 {font-size: 38px; line-height:56px; font-weight: bold; letter-spacing: -1.52px;}
.app_link_text3 {font-size: 16px; line-height:24px; font-weight: 300; margin-top: 23px; letter-spacing: -0.32px;}
.app_link_btn {margin-top: 50px;}
.app_link_btn a {display: inline-block;}
.app_link_btn a + a {margin-left: 21px;}

.app_review {height: 382px; padding-top:96px; position: relative;}
.review_title {text-align: center;}
.review_title span {vertical-align: middle; display: inline-block; font-size: 29px; line-height:60px; letter-spacing: -1.16px;}
.review_title .quotation {font-size: 80px; line-height:60px; letter-spacing: -3.2px; color: #F59B7E;}
.review_title .text {margin-left: 10px; margin-right: 10px;}
.review_title .text strong {color: #F59B7E; font-weight: normal;}
.review_content {font-size: 14px; line-height: 24px; letter-spacing: -0.28px; font-weight: 300; text-align: center; margin-top: 15px;}
.review_content span {display: block;}
.review_author {font-size:13px; line-height: 19px; letter-spacing: -0.26px; color: #292929; text-align: center; margin-top: 16px;}
.review_dot {bottom: 84px;}
.review_dot .dot {width: 11px; height: 11px; display: inline-block; background: transparent url('../img/dot.svg') 0% 0% no-repeat padding-box;}
.review_dot .dot.active {background-image: url('../img/dot_view.svg');}
.review_dot .dot + .dot {margin-left: 23px;}

.function {height: 283px; background-color: #FFFDFA; text-align: center;}
.function .box {width: 246px; text-align: center; display: inline-block; margin-top: 40px;}
.function .box + .box {margin-left: 15px;}
.function .box .img {height: 86px; text-align: center;}
.function .box strong {display: block; font-size: 18px; line-height: 27px; letter-spacing: -0.72px; color: #867165;}
.function .box span {display: block; margin-top: 17px; font-size: 14px; line-height: 20px; font-weight: 300;}

.function_detail {height: 813px;}
.function_detail .guide {float: left;}
.function_detail .guide h4 {font-size: 35px; letter-spacing: -1.4px; font-weight: bold; margin-top: 160px;}
.function_detail .guide h4 img {vertical-align: unset;}
.function_detail .guide h5 {font-size: 35px; line-height: 45px; letter-spacing: -1.4px; font-weight: normal; margin-top: 20px;}
.function_detail .guide_img {float: right;}
.function_detail .guide_img img {margin-right: -108px;}
.function_detail .guide .nav {margin-top: 58px;}
.function_detail .guide .nav a {font-size: 18px; font-weight: 300; letter-spacing: -0.36px; color: #292929; line-height: 2.0; text-decoration: none; display: inline-block;}
.function_detail .guide .nav a.active {font-weight: bold; border-bottom: 2px solid  #f59a7c;}
.function_detail .guide .nav a + a {margin-left: 30px;}
.function_detail .guide .tab-content {margin-top: 75px;}
.function_detail .guide .tab-content p {color: #DB896E; font-size: 18px; font-weight: normal;}
.function_detail .guide .tab-content p .bar {color: #8D8D8D;}

.function_detail:nth-child(even) {background-color: var(--off-white);}
.function_detail:nth-child(even) .guide {float: right; text-align: right;}
.function_detail:nth-child(even) .guide_img {float: left;}
.function_detail:nth-child(even) .guide_img img {margin-right: 0; margin-left: -108px;}
.function_detail:nth-child(even) .guide .nav {justify-content: flex-end;}

.advantage {height: 1250px; padding-top: 160px; background: url('../img/house_bg.svg') no-repeat center bottom;}
.advantage h3 {font-size: 35px; font-weight: bold; letter-spacing: -1.4px; text-align: center; margin-top: 30px;}
.advantage .item_list {margin-top: 142px;}
.advantage .item_list .item {width: 50%; height: 144px; float: left;}
.advantage .item_list .item .img {width: 180px; text-align: center; float: left;}
.advantage .item_list .item .text {float: left;}
.advantage .item_list .item .text h4 {font-size: 26px; color: #867165; letter-spacing: -1.04px; font-weight: normal;}
.advantage .item_list .item .text p {font-size: 13px; line-height: 19px; color: #5C5A5A;}
.advantage > h4 {font-weight: bold; font-size: 45px; text-align: center; letter-spacing: -1.8px; margin-top: 20px;}
.advantage ul {margin-top: 50px;}
.advantage ul li {font-size: 20px; line-height: 40px; font-weight: 300; letter-spacing: -0.4px; background: url('../img/point.svg') no-repeat left center; padding-left: 30px;}

.process {padding-top: 120px; height: 588px; background-color: var(--off-white);}
.process h3 {font-size: 35px; font-weight: bold; letter-spacing: -1.4px; text-align: center; margin-top: 30px;}
.process .item_list {margin-top: 102px;}
.process .item_list .item {width: 25%; float: left;}
.process .item_list .item .no {}
.process .item_list .item .text {margin-top: 10px;}

.howto {padding-top: 140px; height: 876px; text-align: center;}
.howto h3 {font-size: 35px; font-weight: bold; letter-spacing: -1.4px; text-align: center; margin-top: 30px;}
.howto .banner {margin-top: 85px;}
.howto .banner_mobile {display: none;}
.howto .howto_text1 {margin-top: 50px; font-size: 20px; line-height: 26px; letter-spacing: -0.8px;}
.howto .howto_text1 strong {font-size: 22px; display: block;}
.howto .ad_set {margin-top: 43px;}
.howto .howto_text2 {margin-top: 18px; font-size: 12px; color: #867165;}

.start {height: 793px; background: #fdfaf5 url('../img/mobile_img_login.png') no-repeat center 172px; padding-top: 136px; background-size: 417px auto;}
.start h3 {font-size: 35px; font-weight: bold; text-align: center;}
.start .left {float: left; padding-top: 300px; width: 227px;}
.start .right {float: right; padding-top: 300px; width: 227px;}
.start h5 {font-size: 17px; line-height: 24px; letter-spacing: -0.38px; font-weight: normal; text-align: center;}
.start h5 strong {display: block;}
.start .btn {width:227px; height:70px; display: block; padding:0; border:0; border-radius: 0; margin-top: 1.5rem;}
.start .btn.black {background: url(../img/btn_bk_bg.svg) no-repeat center center; color:white; text-align: center; font-size:20px; line-height: 70px; font-weight: bold;}
.start .btn + .btn {margin-top: .5rem;}
.start .desc {width: 230px; font-size: 10px; letter-spacing: -0.2px; text-align: center; margin-left: calc(100% - 230px);}

section.banner {background-color: #F6F6F6; height:228px; text-align: center;}
section.banner .banner_list {padding-top: 84px; text-align: center;}
section.banner .banner_list li {display: inline-block;}
section.banner .banner_list li + li {padding-left: 45px;}

footer {background-color: #292929; padding-top: 65px; padding-bottom: 50px; color: #9B9B9B; font-size: 13px; line-height: 19px;}
footer .nav li.btn { padding: 0 25px 0 0; }
footer .nav li.btn img {width: 166px;}
footer .nav li.bar + li.bar:before {content: '|'; font-size: 10px; color: #838383; padding-left: 8px; vertical-align: text-bottom;}
footer .nav li.bar a {margin-left: 8px;}
footer .nav a {display: inline-block; line-height:39px; font-size:13px; color: #EAEAEA;}
footer address {margin-top: 36px;}
footer address span {display: block;}
footer .left {float: left;}
footer .right {float: right;}
footer .contact_info {text-align: right; margin-top: 25px;}
footer .contact_info span {display: block;}

.contact .row {margin-top: 63px;}
.contact .row h3 {font-size: 16px; font-weight: bold; padding-bottom: 20px;}
.contact .row .detail {font-weight: 300; font-size: 16px; line-height: 24px;}
.contact .row .detail strong {font-weight: bold;}
.contact .map {margin-top: 20px;}
.contact .map .pc_img {display: block; border: 1px solid #eee;}
.contact .map .mobile_img {display: none;}

.terms .tabs {margin-top: 40px;}
.terms .tabs .tab_item {width: 50%; background-color: #E8E8E8; height: 58px; text-align: center; font-size: 16px; line-height: 58px;}
.terms .tabs .tab_item.active {background-color: white; border-top: 1px solid #E8E8E8; font-weight: bold;}
.terms .tabs .tab_item a {color: #292929;}
.terms .terms_content {background-color: white; padding: 40px 22px 30px 22px; font-size: 16px; line-height: 32px; letter-spacing: -0.32px;}
.terms .terms_content h4 {font-size: 28px; padding-bottom: 30px;}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.start {
		background-image: url('../img/mobile_img_login@2x.png');
	}
}
@media all and (min-width:1920px) {
    /* 사용자 해상도가 1920px 이상일 때 */
	.app_link .bg_img {background-size: cover; background-position: center center;}
}
@media (max-width:1262px) {
	/* 사용자 해상도가 1262px 미만일 때 */
	.full_container {min-width: 1040px; overflow: hidden;}
}

@media (min-width: 481px) {
    /* 사용자 해상도가 480px 초과일 때 - PC UI 적용 */
    header .nav.collapse {display:flex!important;}
    .app_link {margin-top: 105px;}
}
@media (max-width: 480px) {
	/* 사용자 해상도가 480px 이하일 때 - 모바일 UI 적용 */
    .full_container {width: 100%; min-width: 360px; margin: 0 auto;}
    .body_container {width: 100%; margin: 0 auto;}

    .sub_bg {background: rgba(246, 240, 233, 0.46); padding-top: 21px;}
    .sub_bg .body_container {background-image: none; padding-bottom: 40px;}
    .sub_bg h2 {color: #867165; font-size: 18px; letter-spacing: -0.3px; text-align: center;}

    hr.h3_bar {width: 35px;}

	header .body_container {-ms-flex-pack: justify!important; justify-content: normal!important; display: block!important; position: relative; height:52px;}
	header .navbar-toggle {position: absolute; top:0; right:0; display: block; background: 0 0; margin: 0 0 0 -15px; padding: 18px; border: 1px solid transparent; border-radius: 0; outline: 0;}
    .navbar-toggle .icon-bar {display: block; width: 15px; height: 2px; border-radius: 1px; background: #777;}
    .navbar-toggle .icon-bar+.icon-bar {margin-top: 4px;}
    header h1 {padding-top: 16px;}
    header h1 img {margin: 0 auto; width:114px;}
    header .nav {margin-top: 16px; background-color: white; border: 1px solid #DBDBDB; width:139px; margin-left:calc(100% - 139px);}
    header .nav .nav-item {width: 100%; text-align: right; background: url('../img/icon_menu_arrow.svg') no-repeat 87% center; background-size: 5%;}
    header .nav .nav-item a {line-height: 48px; font-size: 13px; padding: 0 37px 0 0;}

    .app_link {height: auto; margin-top: 52px;}
    .app_link .bg_img {height: 243px; background-size: cover; background-position: -165px 0;}
    .app_link .body_container {padding-top: 270px;}
    .app_link_text1 {font-size: 16px; line-height: 25px; text-align:center;}
    .app_link_text2 {font-size: 27px; line-height:40px; font-weight: bold; text-align:center;}
    .app_link_text3 {font-size: 11px; line-height:16px; margin-top: 23px; text-align:center;}
    .app_link_btn {margin-top: 28px; text-align: center;}
    .app_link_btn a {display: block;}
    .app_link_btn a + a {margin-left: 0; margin-top: 10px;}
    .app_link_btn a img {width: 165px;}

    .app_review {height: auto; padding:58px 20px 80px 20px; position: relative;}
    .review_title span {font-size: 18px; line-height:24px;}
    .review_title .quotation {font-size: 50px; line-height:50px; color: #F59B7E;}
    .review_title .text {margin-left: 10px; margin-right: 10px; width: calc(100% - 80px); word-break: keep-all;}
    .review_content {font-size: 12px; line-height: 16px; word-break: keep-all;}
    .review_content span {display: inline;}
    .review_author {font-size:12px; line-height: 19px;}
    .review_dot {bottom: 40px;}

    .function {height: auto; background-color: #FFFDFA; text-align: center;}
    .function .box {width: 100%; height: 226px; padding-top:40px; text-align: center; display: block; margin-top: 0;}
    .function .box:nth-child(2n) {background-color: #FDFAF5;}
    .function .box + .box {margin-left: 0;}
    .function .box .img {text-align: center; margin-bottom: 15px; height: auto;}
    .function .box .img img {height: 35px;}
    .function .box strong {font-size: 22px;}
    .function .box span {font-size: 12px; line-height: 18px;}

    .function_detail {height: auto;}
    .function_detail .guide {float: none; text-align: center; padding-top: 35px;}
    .function_detail .guide h4 {font-size: 18px; margin-top: 0;}
    .function_detail .guide h4 img {height: 16px;}
    .function_detail .guide h5 {font-size: 15px; line-height: 22px; }
    .function_detail .guide_img {float: none; text-align: center;}
    .function_detail .guide_img img {margin-right: 0; width:260px;}
    .function_detail .guide .nav {margin-top: 30px; justify-content: center;}
    .function_detail .guide .nav a {font-size: 12px;}
    .function_detail .guide .nav a + a {margin-left: 25px;}
    .function_detail .guide .tab-content {display:none;}
    .function_detail .guide .tab-content p {color: #DB896E; font-size: 18px; font-weight: normal;}
    .function_detail .guide .tab-content p .bar {color: #8D8D8D;}

    .function_detail:nth-child(even) .guide {float: none; text-align: center;}
    .function_detail:nth-child(even) .guide_img {float: none;}
    .function_detail:nth-child(even) .guide_img img {margin-right: 0; margin-left: 0px;}
    .function_detail:nth-child(even) .guide .nav {justify-content: center;}

    .advantage {height: auto; padding-top: 25px; padding-bottom: 60px; background-position: center 92%; background-size:45%;}
    .advantage h3 {font-size: 18px; margin-top: 19px;}
    .advantage .item_list {margin-top: 0;}
    .advantage .item_list .item {width: 100%; height: auto; float: none; text-align: center; padding: 20px 0;}
    .advantage .item_list .item .img {width: auto; height:42px; text-align: center; float: none;}
    .advantage .item_list .item .img img {height: 30px;}
    .advantage .item_list .item .text {float: none;}
    .advantage .item_list .item .text h4 {font-size: 18px;}
    .advantage .item_list .item .text p {font-size: 11px; line-height: 17px; padding-top: 5px;}
    .advantage > h4 {font-size: 24px; margin-top: 30px;}
    .advantage ul {margin-top: 30px;}
    .advantage ul li {font-size: 10px; line-height: 10px; padding-left: 13px; background-size: contain; margin-bottom: 10px;}

    .process {padding: 30px 0; height: auto;}
    .process h3 {font-size: 18px; margin-top: 19px;}
    .process .item_list {margin-top: 35px; width:170px; justify-content: center;}
    .process .item_list .item {width: auto; float: none;}
    .process .item_list .item:after {clear:both; content: ''; display: block;}
    .process .item_list .item .no {width: 25px; float:left;}
    .process .item_list .item .no img {height: 36px;}
    .process .item_list .item .text {float:left; margin-top: 4px; font-size:12px; line-height:16px;}
    .process .item_list .item + .item {margin-top:20px;}

    .howto {padding: 40px 0; height: auto;}
    .howto h3 {font-size: 18px; margin-top: 19px;}
    .howto .banner {display: none;}
    .howto .banner_mobile {display:block; margin-top: 30px;}
    .howto .howto_text1 {margin-top: 44px; font-size: 12px; line-height: 16px;}
    .howto .howto_text1 strong {font-size: 12px; padding-bottom: 10px;}
    .howto .howto_text1 span {display:block;}
    .howto .ad_set {margin-top: 20px;}
    .howto .howto_text2 {font-size: 9px;}

    .start {height: auto; padding: 45px 0; background-image: url('../img/mobile_img_login-2.png'); background-size: 188px auto; background-position: left 72px;}
    .start h3 {font-size: 18px;}
    .start .left {float: none; padding-top: 35px; width: 160px; margin-left: calc(100% - 160px);}
    .start .right {float: none; padding-top: 50px; width: 160px; margin-left: calc(100% - 160px);}
    .start h5 {font-size: 9px; line-height: 12px; padding-right: 20px;}
    .start .btn {width:160px; height:35px; margin-top: .5rem;}
    .start .btn.black {background-color: #292929; background-image: none; border-radius: 35px 0 0 35px; font-size:11px; line-height: 35px; text-align:left; padding-left: 30px;}
    .start .btn.black_mobile {text-align:left; background-color: #292929; background-image: none; border-radius: 35px 0 0 35px; }
    .start .btn img {height: 35px;}
    .start .desc {width: 100%; margin-left:0;}

    section.banner {display: none;}


    footer {padding: 27px 0; font-size: 9px; line-height: 12px;}
    footer .body_container {padding:0 16px;}
    footer .nav li.btn {padding: 0 17px 0 0; width: 100%; text-align: left;}
    footer .nav li.btn img {width:106px; display:block;}
    footer .nav li.bar + li.bar:before {font-size: 8px;}
    footer .nav a {line-height:25px; font-size:9px;}
    footer address {margin-top: 15px; margin-bottom: 0;}
    footer address span {display: inline;}
    footer address span + span:before {content: '| '; }
    footer .left {float: none;}
    footer .right {float: none;}
    footer .right h2 {font-size: 20px; margin-top: 20px;}
    footer .right h2 img {width: 100px;}
    footer .contact_info {text-align: left; margin-top: 6px;}
    footer .contact_info span.block {display: block;}
    footer .contact_info span {display: inline;}

    .contact .row {margin: 16px 0 0 0;}
    .contact .row + .row {margin-top: 0;}
    .contact .row .col-sm {padding: 28px 17px 0 17px;}
    .contact .row h3 {font-size: 13px; padding-bottom: 20px;}
    .contact .row .detail {font-size: 12px; line-height: 18px;}
    .contact .map .pc_img {display: none;}
    .contact .map .mobile_img {width: 100%; display: block; border-top: 1px solid #eee;  border-bottom: 1px solid #eee;}

    .terms h2 {display: none;}
    .terms .tabs {display: none;}
    .terms .terms_content {background-color: transparent; padding: 0 17px; font-size: 12px; line-height: 16px; letter-spacing: -0.32px;}
    .terms .terms_content h4 {color: #BAA699; font-size: 12px; letter-spacing: -0.1px; text-align: center;}
}