@import url("reset.css");

/* [Layout] - Randing */
.thecrest-randing {
    position:relative;
    max-width:600px;
    min-width:320px;
    margin:0 auto;
}
/* [Layout] - Header */
header {
    display:flex;
    justify-content:space-between;
    position:fixed;
    left:0;
    right:0;
    top:0;
    height:60px;
    padding:19px 21px 0;
    z-index:100;
    transition:background 0.6s;
}
header .logo img {
    width:123px;
}
header .tel {
    margin-top:3px;
    font-weight:700;
    font-size:15px;
    color:#fff;
}
.header_fixed_active {
    background:rgba(255, 255, 255, 0.3);
}
/* [Layout] - Footer */
footer {
    padding:22.5px 0;
    background:#3b3837;
}
footer .info,
footer .copyright,
footer .menu {
    margin:3.75px 0;
    font-size:10.5px;
    color:#aaaaaa;
    text-align:center;
}
footer .info {
    line-height:13px;
}
footer .menu {
    display:flex;
    justify-content:center;
}
footer .menu li {
    position:relative;
    padding:0 8.25px 0 6.75px;
    font-size:10.5px;
    color:#aaaaaa;
}
footer .menu li:after {
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:2px;
    height:9px;
    background:#6f6e6e;
    transform:translateY(-50%);
}
footer .menu li:last-child:after {
    display:none;
}

/* [Media] - 600PX 이상 */
@media (min-width: 600px) {
    /* [Layout] - Header */
    header {
        left:50%;
        width:600px;
        height:80px;
        padding:25px 28px 0;
        transform:translateX(-50%);
    }
    header .logo img {
        width:auto;
    }
    header .tel {
        margin-top:6px;
        font-size:20px;
    }
    header .tel a {
        font-size:20px;
    }

    /* [Layout] - Footer */
    footer {
        padding:30px 0;
    }
    footer .info,
    footer .copyright,
    footer .menu {
        margin:5px 0;
        font-size:14px;
    }
    footer .info {
        line-height:18px;
    }
    footer .menu li {
        padding:0 11px 0 9px;
        font-size:14px;
    }
    footer .menu li:after {
        width:2px;
        height:12px;
    }
}

/* [COMMON] - Hide */
.hide, .blind {
    overflow:hidden;
    position:absolute;
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    visibility:hidden;
}

/* [Common] - Motion Up */
.slide_up_motion {
    position:relative;
    top:50px;
    opacity:0;
    visibility:hidden;
    transition-property:all;
    transition-duration:1.6s;
}
.motion_active .slide_up_motion {
    top:0;
    opacity:1;
    visibility:visible;
}
.slide_up_motion_margin {
    margin-top:50px;
    opacity:0;
    visibility:hidden;
    transition-property:all;
    transition-duration:1.6s;
}
.motion_active .slide_up_motion_margin {
    margin-top:0;
    opacity:1;
    visibility:visible;
}
/* [Common] - Motion Delay */
.slide_motion_delay04 {
    transition-delay:0.6s;
}
.slide_motion_delay08 {
    transition-delay:1.2s;
}

/* [COMMON] - Swiper */
.swiper-wrapper img {
    width:100%;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
    top:53%;
    width:19.5px;
    height:36px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-size:cover;
}
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after {
    display:none;
}
.swiper .swiper-button-next {
    right:16px;
    background-image:url("../image/swiper_button_right.png");
}
.swiper .swiper-button-prev {
    left:16px;
    background-image:url("../image/swiper_button_left.png");
}

/* [Media] - 600PX 이상 */
@media (min-width: 600px) {
    /* [COMMON] - Swiper */
    .swiper .swiper-button-next,
    .swiper .swiper-button-prev {
        top:50%;
        width:26px;
        height:48px;
        background-size:auto;
    }
}

/* [COMMON] - Layer Default */
.layer_default {
    display:none;
    position:fixed;
    left:50% !important;
    top:50% !important;
    width:100%;
    padding:0 10px;
    z-index:1000;
    transform:translate(-50%, -50%);
}
.layer_default_in {
    border:3px solid #96765c;
    background:#fff;
}
.layer_default .layer_title {
    padding:15px 0;
    font-weight:700;
    font-size:15px;
    color:#fff;
    text-align:center;
    background:#96765c;
}
.layer_default .layer_explain {
    overflow:auto;
    height:300px;
    padding:5px 15px;
}
.layer_default .layer_explain h3,
.layer_default .layer_explain h4,
.layer_default .layer_explain p,
.layer_default .layer_explain ul {
    margin:10px 0;
    font-weight:500;
}
.layer_default .layer_explain h3,
.layer_default .layer_explain h4 {
    margin:15px 0;
    font-weight:600;
}
.layer_default .layer_explain ul li {
    margin:3px 0;
    padding-left:10px;
    font-weight:500;
    text-indent:-10px;
}
.layer_default .layer_explain ul li p,
.layer_default .layer_explain ul li ul li {
    padding-left:0;
    text-indent:0;
}
.layer_default .btn_close {
    position:absolute;
    top:10px;
    right:18px;
}
.layer_default .btn_close a {
    display:block;
    width:30px;
    height:30px;
    text-indent:-9999px;
}
.layer_default .btn_close a:before,
.layer_default .btn_close a:after {
    content:"";
    position:absolute;
    left:14px;
    top:1px;
    width:1px;
    height:26px;
    background:#fff;
}
.layer_default .btn_close a:before {
    transform:rotate(45deg);
}
.layer_default .btn_close a:after {
    transform:rotate(-45deg);
}
/* [Media] - 600PX 이상 */
@media (min-width: 600px) {
    /* [COMMON] - Layer Default */
    .layer_default {
        width:480px;
        padding:0;
    }
    .layer_default .layer_title {
        padding:20px 0;
        font-size:20px;
    }
    .layer_default .layer_explain {
        height:400px;
        padding:10px 20px;
    }
    .layer_default .layer_explain h3,
    .layer_default .layer_explain h4,
    .layer_default .layer_explain p,
    .layer_default .layer_explain ul {
        font-size:14px;
    }
    .layer_default .layer_explain ul li {
        font-size:14px;
    }

    .layer_default .btn_close {
        top:10px;
        right:10px;
    }
    .layer_default .btn_close a {
        width:40px;
        height:40px;
    }
    .layer_default .btn_close a:before,
    .layer_default .btn_close a:after {
        left:19px;
        top:1px;
        width:1px;
        height:35px;
    }
}

/* [UI] - Section */
.section {}
.section .logo_txt {
    color:#fff;
    text-align:center;
}
/* [UI] - Section1 */
.section1 {
    height:664.5px;
    padding-top:258.7px;
    background:url("../image/randing_section1_img.jpg") center no-repeat;
    background-size:cover;
}
.section1 .section_line {
    position:absolute;
    left:50%;
    top:325px;
    width:1.5px;
    height:82px;
    margin-left:-1px;
    background:#fff;
}
.section1 h2 {
    font-weight:600;
    font-size:27px;
    color:#fff;
    text-align:center;
}
.section1 .logo_txt {
    margin-top:180px;
    font-weight:600;
    font-size:15.7px;
    color:#fff;
}
.section1 .logo_txt img {
    width:163px;
    margin-top:9.7px;
}
.section1 .section_button {
    margin-top:60px;
    text-align:center;
}
.section1 .section_button img {
    width:140px;
    vertical-align:top;
}
/* [Media] - 600PX 이상 */
@media (min-width: 600px) {
    /* [UI] - Section1 */
    .section1 {
        height:886px;
        padding-top:365px;
    }
    .section1 .section_line {
        top:455px;
        width:2px;
        height:110px;
    }
    .section1 h2 {
        font-size:36px;
    }
    .section1 .logo_txt {
        margin-top:250px;
        font-size:21px;
    }
    .section1 .logo_txt img {
        width:auto;
        margin-top:13px;
    }
    .section1 .section_button {
        margin-top:80px;
    }
    .section1 .section_button img {
        width:auto;
    }
}

/* [UI] - Section2 */
.section2 {
    position:relative;
    padding:146.2px 0 0;
    color:#96765c;
    text-align:center;
    background:#4e4c4b;
}
.section2:before,
.section2:after {
    content:"";
    position:absolute;
    left:50%;
    width:1.5px;
    height:67.5px;
    margin-left:-1px;
    background:#96765c;
}
.section2:before {
    top:41.2px;
}
.section2:after {
    top:547px;
}
.section2 .slogo {
    font-weight:700;
    font-size:13.5px;
}
.section2 .logo {
    margin-top:54px;
}
.section2 .logo img {
    width:174px;
}
.section2 .txt {
    margin-top:60px;
    font-weight:500;
    color:#96765c;
}
.section2 .logo2 {
    margin-top:63.7px;
}
.section2 .logo2 img {
    width:219.7px;
}
.section2 .visual_swiper_loop {
    margin-top:168px;
    text-align:left;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
}
.section2 .visual_swiper_loop img {
    width:100%;
}
.visual_panorama {
    overflow:hidden;
    margin-top:224px;
    border-top:1px solid #242120;
    border-bottom:1px solid #242120;
}
.visual_panorama_content {
    display:flex;
}
.visual_panorama .list {}
.visual_panorama .list img {
    width:262px;
    vertical-align:top;
}
/* [Media] - 600PX 이상 */
@media (min-width: 600px) {
    /* [UI] - Section2 */
    .section2 {
        padding:195px 0 0;
    }
    .section2:before,
    .section2:after {
        width:2px;
        height:90px;
    }
    .section2:before {
        top:55px;
    }
    .section2:after {
        top:725px;
    }
    .section2 .slogo {
        font-size:18px;
    }
    .section2 .logo {
        margin-top:72px;
    }
    .section2 .logo img {
        width:auto;
    }
    .section2 .txt {
        margin-top:80px;
        font-size:16px;
        line-height:24px;
    }
    .section2 .logo2 {
        margin-top:85px;
    }
    .section2 .logo2 img {
        width:auto;
    }
    .section2 .visual_swiper_loop {
        margin-top:224px;
    }
    .visual_panorama {
        margin-top:168px;
    }
    .visual_panorama .list img {
        width:auto;
    }
}

/* [UI] - Section3 */
.section3 {
    background:#4e4c4b;
}
.section3 .section3_in {
    padding:56px 0 112.5px;
    background:url("../image/randing_section3_img.jpg") center 0 no-repeat;
    background-size:cover;
}
.section3 .logo_txt {
    font-weight:600;
    font-size:21px;
}
.section3 .logo_txt img {
    width:162px;
    margin-bottom:10px;
}
.section3 .txt {
    margin-top:22.5px;
    line-height:16.5px;
    color:#c6c6c6;
    text-align:center;
}
.section3 .visual_swiper_center {
    padding:33px 0 36px;
}
/* [Media] - 600PX 이상 */
@media (min-width: 600px) {
    /* [UI] - Section3 */
    .section3 .section3_in {
        padding:75px 0 150px;
    }
    .section3 .logo_txt {
        font-size:28px;
    }
    .section3 .logo_txt img {
        width:auto;
        margin-bottom:13px;
    }
    .section3 .txt {
        margin-top:30px;
        font-size:16px;
        line-height:24px;
    }
    .section3 .visual_swiper_center {
        padding:44px 0 48px;
    }
}

/* [UI] - Section4 */
.section4 {
    overflow:hidden;
    padding:67.5px 0 45px;
    background:#c2b2a1;
}
.section4 .logo_txt {
    margin-right:-75px;
    font-weight:600;
    font-size:20.2px;
    color:#4e4c4b;
}
.section4 .logo_txt img {
    width:162px;
    margin:0px 54px 6px -75px;
}
.section4 .txt {
    position:relative;
    margin-top:33.7px;
    padding-top:33.7px;
    font-weight:500;
    line-height:14.2px;
    color:#4e4c4b;
    text-align:center;
}
.section4 .txt:before {
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:67.5px;
    height:1.5px;
    background:#4e4c4b;
    transform:translateX(-50%);
}
.section4 .visual_swiper_default {
    margin-top:41.2px;
}
.section4 .swiper .swiper-button-next,
.section4 .swiper .swiper-button-prev {
    top:52%;
}
.section4 .swiper .swiper-button-next {
    right:16px;
}
.section4 .swiper .swiper-button-prev {
    left:16px;
}
.section4 .explain {
    margin-top:13.5px;
    text-align:center;
}
.section4 .explain dt {
    display:inline-block;
    position:relative;
}
.section4 .explain dt span {
    position:relative;
    padding:0 4.5px;
    font-weight:800;
    font-size:15px;
    color:#4e4c4b;
    z-index:11;
}
.section4 .explain dt:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:1px;
    height:7.5px;
    background:#d3c7ba;
    z-index:10;
}
.section4 .explain dd {
    margin-top:1.5px;
}
/* [Media] - 600PX 이상 */
@media (min-width: 600px) {
    /* [UI] - Section4 */
    .section4 {
        padding:90px 0 60px;
    }
    .section4 .logo_txt {
        margin-right:-100px;
        font-size:27px;
    }
    .section4 .logo_txt img {
        width:auto;
        margin:0px 72px 8px -100px;
    }
    .section4 .txt {
        margin-top:45px;
        padding-top:45px;
        font-size:16px;
        line-height:24px;
    }
    .section4 .txt:before {
        width:90px;
        height:2px;
    }
    .section4 .visual_swiper_default {
        margin-top:55px;
    }
    .section4 .explain {
        margin-top:18px;
        text-align:center;
    }
    .section4 .explain dt span {
        padding:0 6px;
        font-size:20px;
    }
    .section4 .explain dt:after {
        height:10px;
    }
    .section4 .explain dd {
        margin-top:2px;
        font-size:16px;
        line-height:24px;
    }
}

/* [UI] - Section5 */
.section5 {
    position:relative;
    padding:37.5px 51px 33.7px;
    background:#4e4c4b;
}
.section5 .logo_txt {
    margin-bottom:16.5px;
    font-size:15px;
    color:#ffffff;
}
.section5 .logo_txt img {
    width:135px;
    margin-bottom:10px;
    letter-spacing:0.75px;
}
.section5 .counsel_form {}
.section5 .counsel_form .form_line {}
.section5 .counsel_form .form_line label {
    display:inline-block;
    margin:13.5px 0 11.2px;
    color:#ffffff;
}
.section5 .counsel_form .form_line .input_text {
    width:100%;
    height:31.5px;
    border:none;
    border-radius:0;
    background:#fff;
}
.section5 .counsel_form .form_line .textarea {
    width:100%;
    height:114px;
    padding:11.2px 0 0 12.7px;
}
.section5 .counsel_form .form_line .input_text::placeholder {
    color:#4e4c4b;
}
.section5 .counsel_form .form_agree {
    position:relative;
    margin-top:11px;
}
.section5 .counsel_form .form_agree .input_check {
    margin-top:-1px;
    vertical-align:middle;
}
.section5 .counsel_form .form_agree label {
    margin-left:5px;
    font-size:11px;
    color:#ffffff;
    vertical-align:middle;
}
.section5 .counsel_form .form_agree .button_view {
    position:absolute;
    right:0;
    top:0;
}
.section5 .counsel_form .form_agree .button_view a {
    display:inline-block;
    padding:1.5px 10.5px 2px;
    font-size:11px;
    line-height:13px;
    color:#fff;
    background:#96765c;
}
.section5 .counsel_form .button_confirm {
    margin-top:22px;
}
.section5 .counsel_form .button_confirm button {
    width:100%;
    height:40.5px;
    font-weight:700;
    font-size:18px;
    color:#fff;
    text-align:center;
    background:#96765c;
}
.section5 .form_logo {
    margin-top:51px;
    text-align:center;
}
.section5 .form_logo img {
    width:66px;
    margin-bottom:15px;
}
.section5 .form_logo .msg {
    font-weight:600;
    font-size:15.7px;
    color:#96765c;
}
.section5 .form_layer {
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    width:250px;
    padding:70px 0;
    font-size:18px;
    line-height:21px;
    color:#ffffff;
    text-align:center;
    background:#96765c;
    transform:translate(-50%, -50%);
}
.section5 .form_layer .btn_close {
    position:absolute;
    top:3px;
    right:3px;
}
.section5 .form_layer .btn_close button {
    display:block;
    width:36px;
    height:36px;
    text-indent:-9999px;
}
.section5 .form_layer .btn_close button:before,
.section5 .form_layer .btn_close button:after {
    content:"";
    position:absolute;
    left:17px;
    top:6px;
    width:1px;
    height:22px;
    background:#fff;
    cursor:pointer;
}
.section5 .form_layer .btn_close button:before {
    transform:rotate(45deg);
}
.section5 .form_layer .btn_close button:after {
    transform:rotate(-45deg);
}
/* [Media] - 600PX 이상 */
@media (min-width: 600px) {
    /* [UI] - Section5 */
    .section5 {
        padding:50px 68px 45px;
    }
    .section5 .logo_txt {
        margin-bottom:22px;
        font-size:20px;
    }
    .section5 .logo_txt img {
        width:auto;
        margin-bottom:13px;
    }
    .section5 .counsel_form .form_line label,
    .section5 .counsel_form .form_line .input_text,
    .section5 .counsel_form .form_line .textarea {
        font-size:16px;
        line-height:24px;
    }
    .section5 .counsel_form .form_line label {
        margin:18px 0 15px;
    }
    .section5 .counsel_form .form_line .input_text {
        height:42px;
    }
    .section5 .counsel_form .form_line .textarea {
        height:152px;
        padding:15px 0 0 17px;
    }
    .section5 .counsel_form .form_agree {
        margin-top:15px;
    }
    .section5 .counsel_form .form_agree .input_check {
        margin-top:-1px;
    }
    .section5 .counsel_form .form_agree label {
        margin-left:7px;
        font-size:15px;
    }
    .section5 .counsel_form .form_agree .button_view a {
        padding:2px 14px 3px;
        font-size:15px;
        line-height:18px;
    }
    .section5 .counsel_form .button_confirm {
        margin-top:30px;
    }
    .section5 .counsel_form .button_confirm button {
        height:54px;
        font-size:24px;
    }
    .section5 .form_logo {
        margin-top:68px;
    }
    .section5 .form_logo img {
        width:88px;
        margin-bottom:20px;
    }
    .section5 .form_logo .msg {
        font-size:21px;
    }
}