﻿
/* 퀵메뉴 */
.right-quick-menu {position:fixed; bottom:2%; right:2rem; z-index:99; text-align:center; cursor:pointer; display: none;}
.right-quick-menu li {background:#bbb; width:87px; height:87px; line-height:87px; border-radius:100%; text-align:center; cursor:pointer; margin-bottom:7px;}
.right-quick-menu li img {margin-bottom:-20px;}
.right-quick-menu li:hover {background:#AD3371;}
.container {height:100%;}


.fade {position: relative; opacity: 0; transition: 1s;}
.fade-fast {transition: 0.05s;}
.fade-l {left:-50px;}
.fade-l.fade-show {left:0; opacity: 1;}
.fade-r {right:-50px;}
.fade-r.fade-show {right:0; opacity: 1;}
.fade-t {top:-50px;}
.fade-t.fade-show {top:0; opacity: 1;}
.fade-b {bottom:-50px;}
.fade-b.fade-show {bottom:0; opacity: 1;}
.fade-delay0-5 {transition-delay: 0.2s;}
.fade-delay1 {transition-delay: 0.4s;}
.fade-delay1-5 {transition-delay: 0.6s;}
.fade-delay2 {transition-delay: 0.8s;}
.fade-delay2-5 {transition-delay: 1s;}
.fade-delay3 {transition-delay: 1.2s;}
.fade-delay3-5 {transition-delay: 1.4s;}
.fade-delay4 {transition-delay: 1.8s;}
.fade-delay4-5 {transition-delay: 2.0s;}

/* 스크롤  */
.icon-scroll {display:none; padding-bottom:15px;position:fixed;bottom:-5px;left:calc(50% - 25px);z-index:999; padding:0px 0 20px;;}
.icon-scroll div {display:none; transform:rotate(-90deg); font-size:13px;font-weight:500;color:#222;}
.icon-scroll:after {content:"";display:block;width:50px;height:50px;background:url(/images/arrow1-cd746730242af841696b55e7b0a72db6.png) center center no-repeat;margin:0 auto;}
.icon-scroll.on {display:block;}


/* 섹션별 */
.section01 {background: url(/images/bg_01-49d11b1ca4dc66cfc897147103e9f678.jpg) no-repeat center/cover; display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.section01 .inner {color:#fff; width:100%; }
.section01 .inner h1 {font-size:40px; font-weight:700; letter-spacing:-.05em; max-width:450px; margin:0 auto; padding-bottom:10px;}
.section01 .inner h1 img {width:100%; max-width: 420px;}
.section01 .inner h2 {font-size:42px; font-weight:900; letter-spacing:-.02em; color:#363330; margin:20px 0 7px; }
.section01 .inner h3 {max-width:600px;  background:#363330; color:#fff; margin:0 auto; }
.section01 .inner h3 img {width:90%;}
.section01 .inner ul.icons {display:flex; flex-wrap:wrap; justify-content: center; margin:30px auto;}
.section01 .inner ul.icons li { margin:0 2px;}
.section01 .inner ul.icons li img {width:80%;}

.section02 {background: url(/images/bg_02-8f43cf15c108cb08be3e048beeb6c667.jpg) no-repeat center/cover; text-align: center; display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.section02 h1 {margin-bottom:5px; font-weight:900; letter-spacing:-.5px; color:#ffd105;}
.section02 h1 span {font-weight:300;}
.section02 h5 {font-size:16px; color:rgba(256,256,256, .8); font-weight:300; letter-spacing:1.5px; margin-bottom:30px; }
.section02 h4 {width:100%; margin:40px auto; color:#1a1a1a; background:#ffd105; font-size:22px; font-weight:600; letter-spacing:-.05em; padding:10px;}
.section02 ul {width:100%; margin-top:5%; position: relative;}
.section02 ul li {width:25%;}
.section02 ul li img{width:90%;}
.section02 ul li p {font-size:26px; color:#fff; font-weight:bold; margin-top:10px;}

.section03 {background: url(/images/bg_03-8df4734289e95b5d4c23a620c7111249.jpg) no-repeat center/cover; text-align: center; display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.section03 h1 {margin-bottom:5px; font-weight:900; color:#363330;}
.section03 h1 span {font-weight:300;}
.section03 h5 {font-size:16px; color:rgba(0,0,0, .6); font-weight:100; letter-spacing:1.5px; margin-bottom:40px; }
.section03 .inner {background:rgba(256, 256, 256, .5); padding:5%; border-radius: 20px;}
.section03 .inner h2 {font-size:25px; font-weight:600; color:#363330; letter-spacing: -0.5px; margin-bottom:5px;}
.section03 .inner ul {display:flex; border-bottom:1px solid rgba(0,0,0, .2);}
.section03 .inner ul:last-child {border-bottom:none;}
.section03 .inner ul li {margin:16px; text-align: left;}
.section03 .inner ul li.point {width:110px; padding-top:10px;}
.section03 .inner ul li.icon {width:50px; padding-top:5px; text-align: center;}
.section03 .inner ul li span.index {display:inline-block; padding:3px 15px; background:#363330; border-radius:30px; text-align: center; font-size:15px; color:#ffd105;}
.section03 .inner ul li span.index_w {display:inline-block; padding:3px 15px; background:#fff400; border-radius:30px; text-align: center; font-size:15px; color:#363330;}
.section03 .f-point {display: inline-block; background-image: linear-gradient( transparent 35%, #fff400 50%);line-height: 1;	font-weight:600; }
.section03 .inner ul li p {font-size:16px; color:#494643}

.section04 {background: url(/images/bg_04-4760f5e362622648cc8ce6e56bdf24e9.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center; display:flex; flex-wrap:wrap; justify-content: center; align-items: center; position: relative;}
.section04 h1 {margin-bottom:5px; font-weight:700; color:#ffffff; margin-top:1%;}
.section04 h1 span {font-weight:300;}
.section04 h5 {font-size:16px; color:rgba(256,256,256, .6); font-weight:300; letter-spacing:1.5px; margin-bottom:40px; }
.section04 .content2 .inner { display:flex; flex-wrap:wrap; }
.section04 .content2 .inner h2.f-title {color:#ffd105; margin-bottom:0;}
.section04 .content2 .inner h2 span {font-size:19px; font-weight:300;}
.section04 .content2 .inner h4 {display:inline-block; padding:5px 20px; background:#ffd105; border-radius:30px; text-align: center; font-size:17px; color:#363330; margin-top:4px;}
.section04 .content2 .inner p {color:#fff; font-size:16px; line-height: 1.6em;}
.section04 .content2 .inner .line {width:100%; height:1px; background:#ffd105; margin:20px 0;}
.section04 .content2 .inner .p1 {padding:0 8%;}
.section04 .content2 .inner .p1,
.section04 .content2 .inner .p2 {width:45%}
.section04 .content2 .inner img {max-width:800px; height:65%; position:absolute; bottom:0; margin-left:-30px;}

.section05 {background: url(/images/bg_07-257397d3d2648505c9badd53e13bb419.jpg) no-repeat center/cover; text-align: center; display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.section05 h1 {margin-bottom:5px; font-weight:900; letter-spacing:-.5px; color:#363330;}
.section05 h1 span {font-weight:300;}
.section05 h5 {font-size:16px; color:rgba(0,0,0, .8); font-weight:100; letter-spacing:1.5px; margin-bottom:30px; }
.section05 h4 {width:100%; margin:40px auto; color:#1a1a1a; background:#ffd105; font-size:22px; font-weight:600; letter-spacing:-.05em; padding:10px;}
.section05 .slideCon {width:90%; margin:0 auto; position: relative; justify-content: center;}
.section05 .slideCon .slider-item {width:32%; margin:0.5%;}
.section05 .slideCon .slider-item img{width:90%; margin-bottom:10px;}
.section05 .mo {display:none;}
.section05 .pc {display:block; width:90%; margin:0 auto;}

.section06 {background: url(/images/bg_05-d8017b052d2df2f59d72c4bb70ffec16.jpg) no-repeat center/cover; text-align: center; display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.section06 h1 {margin-bottom:5px; font-weight:900; letter-spacing:-.5px; color:#363330;}
.section06 h1 span {font-weight:300;}
.section06 h5 {font-size:16px; color:rgba(0,0,0, .8); font-weight:100; letter-spacing:1.5px; margin-bottom:30px; }
.section06 h4 {width:100%; margin:40px auto; color:#1a1a1a; background:#ffd105; font-size:22px; font-weight:600; letter-spacing:-.05em; padding:10px;}
.section06 ul {width:90%; margin:0 auto; position: relative; justify-content: center;}
.section06 ul li {width:32%; margin:0.5%;}
.section06 ul li img{width:90%; margin-bottom:10px;}
.section06 p {font-size:22px; font-weight:600;}
.section06 p.call a {display:block; width:90%; padding:1px; color:#363330; margin:0 auto;}
.section06 p.call span {font-size:33px;}
.section06 p.add {margin-top:10px;}
.v-story-wrap .v-story-slider {
    text-align:center;
}

.v-story-wrap .v-story-slider .slick-list {
    box-sizing:border-box;
}

.v-story-wrap .v-story-slider .slider-item {
    max-width:630px;
    height:425px;
    position:relative;
}

.v-story-wrap .v-story-slider .slider-item .img-box > img {
    transform-origin:50% 50%;
    transform:scale(0.7);
    transition:transform .5s linear;
}

.v-story-wrap .v-story-slider .slick-center .slider-item .img-box > img {
    transform:scale(1.0);
    transition:transform .5s linear;
}

/* 호버시  */
.v-story-wrap .v-story-slider .slider-item > a {
    position:relative;
}

.v-story-wrap .v-story-slider .slider-item > a::after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0);
    transition:background-color .8s;
}


/* visual story 사이드 버튼 */
.v-story-wrap .v-story-slider .slick-arrow {
    z-index:10;
    /* top:260px; */
    width:50px;
    height:60px;
}

.v-story-wrap .v-story-slider .slick-prev {
    left:240px;
}

.v-story-wrap .v-story-slider .slick-next {
    right:220px;
    left:auto;
}

.v-story-wrap .v-story-slider .slick-arrow::before {
    display:block;
    width:14px;
    height:26px;
    margin:0 auto;
    color: #000;
    font-size: 24px;
}

/* visual story 하단 페이지 버튼 */
.v-story-wrap .v-story-slider .slick-dots > li {
    width:auto;
    height:auto;
    margin:0 8px;
}

.v-story-wrap .v-story-slider .slick-dots > li > button {
    width:8px;
    height:8px;
    border:1px solid #363636;
    border-radius:45px;
    box-sizing:border-box;
    display:block;
    position:relative;
}

.v-story-wrap .v-story-slider .slick-dots > li > button::before {
    content:"";
    width:100%;
    height:100%;
    border-radius:45px;
    background-color:#363636;
    opacity:0;
    transition:opacity .8s;
}

.v-story-wrap .v-story-slider .slick-dots > li.slick-active > button::before {
    opacity:1;
}

.v-story-wrap .v-story-slider .slick-dots > li:hover > button::before {
    opacity:1;
}

.section07 {background: url(/images/bg_06-bd9e12ac4eb5dc5605a669f0e2a2711e.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center; display:flex; flex-wrap:wrap; justify-content: center; align-items: center; position: relative; height:100%; border:7px solid #fdc206;}
.section07 .content2 {display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.section07 .content2 .left {width:40%; padding-left:5%;}
.section07 .content2 .right {width:60%;}
.section07 .content2 .left p span {display: inline-block; width:90px;}
.section07 p.phone_num a {color:#fff; font-size: 33px; font-weight:700; margin-top:5px;}
.section07 .right img {max-width:680px; width:95%; margin:20px;}
.section07 iframe {height:400px;}


/* 푸터 */
#footer {background-color: #1a1a1a; padding:35px 0 60px;}
#footer .bottom-menu a {color:#fff;}
#footer .copytxt p {line-height: 20px; color:#999;}




@media(max-width:1500px) {
    .section04 .content2 .inner p {
        font-size: 14px;
        font-weight: 300;
    }

    .section02 ul li p {
        font-size: 22px;
    }

    @media (max-width: 1280px) {
        .section01 .inner h1 img {
            width: 350px;
        }

        .section01 .inner h3 img {
            width: 75%;
        }

        .section02 h4 {
            font-size: 18px;
        }

        .section02 ul li img {
            width: 82%;
        }

        .section02 ul li p {
            font-size: 19px;
        }

        .section03 h5 {
            margin-bottom: 20px;
        }

        .section03 .inner {
            padding: 1% 3%;
        }

        .section03 .inner h2 {
            font-size: 18px;
        }

        .section03 .inner ul li p {
            font-size: 14px;
        }

        .section03 .inner ul li span.index,
        .section03 .inner ul li span.index_w {
            font-size: 12px;
        }

        .section03 .inner ul li.point {
            width: 98px;
        }

        .section03 .inner ul li.icon {
            display: none;
        }

        .section04 h5 {
            margin-bottom: 20px;
        }

        .section04 .content2 .inner .line {
            margin: 7px 0;
        }

        .section04 .content2 .inner h2.f-title {
            font-size: 19px;
        }

        .section04 .content2 .inner h4 {
            font-size: 12px;
            padding: 5px 7px;
        }

        .section04 .content2 .inner p {
            font-size: 13px;
        }

        .section04 .content2 .inner .p1, .section04 .content2 .inner .p3 {
            width: 35%;
        }

        .section04 .content2 .inner .p2 {
            width: 25%;
        }

        .section06 h1 {
            margin-top: 40px;
        }

        .section06 h5 {
            margin-bottom: 20px;
        }

        .section06 p.call span {
            font-size: 25px;
        }

        .section06 p {
            font-size: 18px;
        }
    }
    @media (max-width: 1024px) {
        .section01 .inner h1 img {
            width: 300px;
        }

        .section03 .inner h2 {
            font-size: 17px;
        }

        .section03 .inner ul li p {
            font-size: 14px;
        }

        .section03 .inner ul li {
            margin: 10px;
        }

        .section03 .inner ul li span.index_w {
            font-size: 11px;
        }

        .section04 .content2 .inner .line {
            margin: 7px 0;
        }

        .section04 .content2 {
            width: 900px;
        }

        .section04 .content2 .inner img {
            height: 40%;
        }

        .section04 .content2 .inner h2.f-title {
            font-size: 19px;
        }

        .section04 .content2 .inner h4 {
            font-size: 12px;
            padding: 5px 7px;
        }

        .section04 .content2 .inner p {
            font-size: 13px;
        }

        .section04 .content2 .inner .p1,
        .section04 .content2 .inner .p2 {
            width: 50%;
        }

        .section05 .pc {
            width: 80%;
        }
    }
    @media (max-width: 900px) {
        .fade {
            position: relative;
            opacity: 0;
            transition: 0.8s;
        }

        .fade-fast {
            transition: 0.05s;
        }

        #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span,
        #fp-nav ul li a span, .fp-slidesNav ul li a span {
            display: none;
        }

        .section01 .inner h2 {
            margin-top: 40px;
        }

        .section01 .inner ul.icons {
            margin: 40px auto;
        }

        .section02 ul li p {
            margin-bottom: 40px;
        }

        .section02 h4 {
            font-size: 15px;
        }

        .section03 h5 {
            font-size: 13px;
        }

        .section04 .content2 .inner .p1 {
            width: 100%;
        }

        .section04 .content2 .inner .p2 {
            width: 100%;
        }

        .section04 .content2 .inner {
            align-items: flex-start;
        }

        .section04 h5 {
            margin-bottom: 60px;
            font-size: 13px;
        }

        .section04 .content2 {
            width: 800px;
        }

        .section05 {
            background: url(/images/bg_07_m-4ea6e171bff661047782a9ba3d506008.jpg) no-repeat center/cover;
        }

        .section05 .pc {
            display: none;
        }

        .section05 .mo {
            display: block;
            width: 100%;
        }

        .section05 h1 {
            padding-top: 20px;
        }

        .section05 h5 {
            font-size: 12px;
        }

        .section06 h5 {
            margin-bottom: 50px;
            font-size: 13px;
        }

        .section07 .content2 .right {
            width: 100%;
        }

        .section07 .content2 .left {
            width: 100%;
            margin-top: 20px;
        }

        #footer img.tit {
            width: 230px;
            margin-bottom: 20px;
        }

        #footer .copytxt p {
            font-size: 12px;
        }
    }

    @media (max-width: 650px) {
        .section01 .inner h1 img {
            width: 250px;
        }

        .section01 .inner h2 {
            font-size: 25px;
        }

        .section01 .inner h3 img {
            width: 93%;
            max-width: 350px;
            margin-top: -9px;
        }

        .section01 .inner ul {
            width: 80%;
        }

        .section01 .inner ul.icons li {
            width: 45%;
            margin-bottom: 10px;
        }

        .section01 .inner ul.icons li img {
            max-width: 100px;
        }

        .section02 h1 {
            margin-top: 20px;
        }

        .section02 h4 {
            margin: 20px auto;
            font-size: 14px;
        }

        .section02 ul li {
            width: 50%;
        }

        .section02 ul li p {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .section02 h5 {
            margin-bottom: 35px;
            font-size: 13px;
        }

        .section02 h4 {
            font-size: 14px;
            font-weight: normal;
        }

        .section03 .inner ul li.point {
            width: 60px;
        }

        .section03 .inner ul li p {
            font-size: 12px;
        }

        .section03 .inner ul li span.index, .section03 .inner ul li span.index_w {
            font-size: 7px;
        }

        .section03 .inner {
            padding: 4% 2%;
            margin: 3% 0;
        }

        .section03 .inner ul {
            margin: 3px 0;
        }

        .section04 .content2 .inner p {
            font-size: 9px;
        }

        .section04 .content2 {
            width: 100%;
        }

        .section04 .content2 .inner .p1 {
            margin-top: -8%;
        }

        .section06 ul li {
            width: 48%;
        }

        .section06 p.call span {
            font-size: 25px;
        }

        .section06 p.add {
            font-size: 16px;
        }

        .section07 iframe {
            height: 280px;
        }

        .section07 p.phone_num a {
            font-size: 23px;
        }

        .section07 .mt-70 {
            margin-top: 20px;
        }
    }
}