@charset "utf-8";

:root {
    --white:#FFFFFF;
    --black:#000000;
    --primary: #FF6E00;
    --sec-padding: 180px;
    --header-height: 80px;
}

/* 공통 */
.container {overflow-x:hidden}
.wrapper {width:100%;max-width:1470px;padding:0 40px;margin:0 auto}
.no_scroll {height:100%;overflow:hidden}
.only_mb {display:none}
.btn_wrap {display:flex;align-items:center;justify-content:center;gap:0 10px}
.btn_primary {display:flex;align-items:center;justify-content:center;gap:0 10px;background:var(--primary);font-size:24px;font-weight:700;color:var(--white);border-radius:100px;padding:15px 34px;transition:all .2s}
.btn_primary:hover {background:#ff7d1a}
.sec {overflow:hidden}
.primary {color:var(--primary)}
.swiper-scrollbar {position:initial !important;width:100% !important;height:2px !important;margin-top:26px;background:#DDDDDD !important;border-radius:0 !important}
.swiper-scrollbar-drag {background:var(--primary) !important;border-radius:0 !important}

.title_box {text-align:center;margin-bottom:54px}
.title_box.left {text-align:left}
.title_box.side {display:flex;align-items:flex-end;justify-content:space-between;}
.title_box .tit {display:block;font-size:48px;font-weight:700;line-height:1.4}
.title_box p {font-size:24px;color:#555;margin-top:24px}

.tab_menu { -ms-overflow-style: none;scrollbar-width: none;}
.tab_menu::-webkit-scrollbar {display: none;}
.tab_menu ul {display:flex;align-items:center;gap:12px}
.tab_menu li>* {display:flex;align-items:center;justify-content:center;height:54px;background:#F8F8F8;border:solid 1px #DDDDDD;border-radius:100px;font-size:24px;font-weight:500;color:#959595;padding:0 24px;transition:all .2s}
.tab_menu li>*.on {background:linear-gradient(to right, #FF6E00, #F8B700);color:var(--white);border:0}
.tab_cont {display:none}
.tab_cont.on {display:block}

.iframe_wrap {width:100%;height:0;padding-bottom:85%;position:relative}
.iframe_wrap iframe {display:block;width:100%;height:100%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}

/* 헤더 */
.header {width:100%;position:fixed;top:0;left:0;z-index:99;transition:all .2s;padding:50px 20px 0}
.header .wrapper {display:flex;align-items:center;max-width:1720px;height:var(--header-height);background:var(--white);border-radius:100px;padding:0 60px;box-shadow:0 4px 30px rgba(255,110,0,.15)}
.header .logo {width:170px}
.header .menu_wrap {display:flex;align-items:center;margin-left:auto}
.header .menu_wrap .menu_head {display:none}
.header .gnb ul {display:flex;align-items:center}
.header .gnb li a {display:flex;align-items:center;height:var(--header-height);font-size:20px;font-weight:600;padding:0 20px;transition:all .2s}
.header .gnb li a:hover {color:var(--primary)}
.header .menu_open {display:none}

/* 푸터 */
.float_btns {position:fixed;right:50px;bottom:40px;z-index:10}
.float_btns > * {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:80px;height:80px;border-radius:80px;background:#FF6E00;border:solid 1px #D96739;box-shadow:4px 4px 25px rgba(0,0,0,.15);color:var(--white);font-size:14px}
.float_btns > *.go_top {background:var(--white);border:none}
.float_btns > * + * {margin-top:20px}

.footer {background:#111111;color:var(--white);padding:50px 0;font-size:14px}
.footer .info {margin-top:20px}
.footer .info > div {display:flex;align-items:center;color:rgba(255,255,255,.8)}
.footer .info > div + div {margin-top:20px}
.footer .info > div .tit {flex:130px 0 0;font-weight:600;color:var(--white)}
.footer .info .cont {display:flex;align-items:center}
.footer .info .cont span + span {display:flex;align-items:center;}
.footer .info .cont span + span::before {content:'';display:block;width:1px;height:10px;background:#AAAAAA;margin:0 20px}
.footer .copyright {margin-top:20px;color:#666666}

@media (hover: hover) {}

@media all and (max-width: 1199px) {
    :root {
        --sec-padding: 120px;
        --header-height: 65px;
    }

    .btn_primary {font-size:20px;padding:14px 26px}

    .title_box .tit {font-size:36px}
    .title_box p {font-size:20px;margin-top:18px}
    
    .tab_menu li>* {height:48px;font-size:20px}

    /* 헤더 */
    .header {padding-top:30px}
    .header .wrapper {padding:0 40px}
    .header .logo {width:130px}
    .header .menu_wrap {display:none;flex-direction:column;align-items:flex-start;width:100vw;height:100vh;background:var(--white);position:fixed;top:0;left:0;overflow-y:auto;padding:0 26px 40px;z-index:100}
    .header .menu_wrap .menu_head {background:var(--white);display:flex;align-items:center;width:100%;height:var(--header-height);padding-left:20px;position:fixed;top:0;left:0;z-index:3}
    .header .gnb {margin:100px 0 100px}
    .header .gnb ul {flex:1;flex-direction:column;align-items:flex-start;gap:24px 0;overflow-y:auto}
    .header .gnb li a {height:auto;font-size:24px;font-weight:600;padding:0}
    .header .menu_open,
    .header .menu_close {display:flex;align-items:center;justify-content:center;width:var(--header-height);height:var(--header-height);margin-left:auto}

    /* 푸터 */
    .float_btns {right:24px;bottom:24px}
    .float_btns > * {width:60px;height:60px}
    .float_btns > * + * {margin-top:10px}
    .float_btns > * svg {width:20px}
}

@media all and (max-width: 1023px) {}

@media all and (max-width: 767px) {
    :root {
        --sec-padding: 80px;
        --header-height: 50px;
    }

    .only_mb {display:block}
    .only_pc {display:none}
    .wrapper {padding:0 20px}
    .btn_primary {font-size:17px;padding:12px 20px}

    .title_box {margin-bottom:40px}
    .title_box .tit {font-size:24px}
    .title_box p {font-size:16px;margin-top:12px}
    .title_box.side {text-align:center;flex-direction:column;align-items:center;gap:24px 0}

    .tab_menu li>* {height:40px;font-size:16px;padding:0 20px}

    /* 헤더 */
    .header {padding-top:20px}
    .header .wrapper {padding:0 20px}
    .header .logo {width:100px}
    
    /* 푸터 */
    .float_btns {right:12px}
    .float_btns > * {gap:2px;font-size:12px}

    .footer {padding:80px 0}
    .footer .info,
    .footer .info > div + div,
    .footer .copyright {margin-top:14px}
    .footer .info > div {flex-direction:column;align-items:flex-start;gap:8px}
    .footer .info > div .tit {flex:none}
    .footer .info .cont span + span::before {margin:0 8px}
}

@media all and (max-width: 499px) {
    /* 푸터 */
    .footer .info .cont {flex-direction:column;align-items:flex-start;gap:8px;}
    .footer .info .cont span + span::before {display:none}
}



/* 인덱스 */
.index .sec_01 {background:#FFEEDA url('../img/web/index_01_bg.jpg') no-repeat center top/100%;position:relative;padding:260px 0}
.index .sec_01 .title_box p {max-width:750px;margin-left:auto;margin-right:auto}
.index .sec_01 .btn_wrap {margin-top:40px}
.index .sec_01 .swiper {overflow:visible;margin-top:140px}
.index .sec_01 .swiper::before {content:'';display:block;width:327px;height:721px;background:url('../img/web/index_01_asset.png') no-repeat center/100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.index .sec_01 .swiper-slide {width:324px;padding:0 8px;position:relative}
.index .sec_01 .swiper-slide .img_wrap {width:100.5%}

.index .sec_02 {background:url('../img/web/index_02_bg.jpg') no-repeat center left/cover;padding:var(--sec-padding) 0}
.index .sec_02 .list {display:flex;gap:24px}
.index .sec_02 .list .item {width:100%;background:var(--white);border:solid 1px #DDDDDD;border-radius:10px;text-align:center;padding:30px 20px}
.index .sec_02 .list .item img {width:260px}
.index .sec_02 .list .item span {display:block;font-size:24px;margin-top:16px}
.index .sec_02 .list .item span strong {font-weight:600}

.index .sec_03 {background:linear-gradient(#FFF5E7, #FFFBF2);padding:var(--sec-padding) 0}
.index .sec_03 .list {display:flex;flex-wrap:wrap;gap:24px;}
.index .sec_03 .item {display:flex;flex-direction:column;width:calc((100% - 24px)/2);background:#FFF2E0;border-radius:10px;padding:40px;border:solid 2px transparent;transition:all .2s}
.index .sec_03 .item .top {display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.index .sec_03 .item .top .tit {display:flex; align-items: flex-end; gap: 7px; font-size:30px;font-weight:700;transition:all .2s}
.index .sec_03 .item .top .tit b {font-size: 18px; font-weight: 400;}
.index .sec_03 .item .top .price {display:block;font-size:34px;font-weight:700;margin-top:10px}
.index .sec_03 .item .top .price .small {font-size:16px;font-weight:500}
.index .sec_03 .item .top .price .small {font-size:16px;font-weight:500}
.index .sec_03 .item .top .sub {font-size:18px;color:#343434;line-height:1.4}
.index .sec_03 .item .info,
.index .sec_04 .item .info {flex:1;background:rgba(255,255,255,.5);border-radius:10px;margin-top:24px;padding:14px 24px;font-size:18px}
.index .sec_03 .item .info ul {display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;margin-top:24px}
.index .sec_03 .item .info ul li {display:flex;align-items:flex-start;gap:12px;}
.index .sec_03 .item table th,
.index .sec_04 .item table th {width:130px;font-size:1.1em;font-weight:600;text-align:left;padding:10px 0;vertical-align:baseline;}
.index .sec_03 .item table td .gray {color:#959595;font-size:.9em}
.index .sec_03 .item table td,
.index .sec_04 .item table td {padding:10px 0;line-height:1.4}
.index .sec_03 .item table td span i {font-size: 0.9em; color: #959595; font-style: normal;}
.index .sec_03 .item:hover {box-shadow:0 4px 10px rgba(255,110,0,.2)}
.index .sec_03 .item_01:hover,
.index .sec_03 .swiper-slide .item_01 {border-color:#FF6E00}
.index .sec_03 .item_01:hover .top .tit,
.index .sec_03 .swiper-slide .item_01 .top .tit {color:#FF6E00}
.index .sec_03 .item_02 {background:#FEF0EB}
.index .sec_03 .item_02:hover,
.index .sec_03 .swiper-slide .item_02 {border-color:#FF572D}
.index .sec_03 .item_02:hover .top .tit,
.index .sec_03 .swiper-slide .item_02 .top .tit {color:#FF572D}
.index .sec_03 .item_03 {flex:1;background:#FFF6D9}
.index .sec_03 .item_03:hover,
.index .sec_03 .swiper-slide .item_03 {border-color:#FF9500}
.index .sec_03 .item_03:hover .top .tit,
.index .sec_03 .swiper-slide .item_03 .top .tit {color:#FF9500}
.index .sec_03 .item_03 .info {padding:30px 24px}
.index .sec_03 .swiper {display:none}

.index .sec_04 {background:#FFFBF2 url('../img/web/index_04_bg.jpg') no-repeat center bottom/cover;padding:calc(var(--sec-padding) * 0.5) 0 var(--sec-padding)}
.index .sec_04 .tab_menu {margin-top:30px}
.index .sec_04 .tab_menu ul {justify-content:center;}
.index .sec_04 .list {display:flex;flex-wrap:wrap;gap:24px;}
.index .sec_04 .item {display:flex;flex-direction:column;width:calc((100% - 48px)/3);background:#FF6E00;border-radius:10px;padding:40px}
.index .sec_04 .item.type02 {background:#F4B507}
.index .sec_04 .item.type03 {background:#FF9F1C}
.index .sec_04 .item.wide {flex:1}
.index .sec_04 .item .tit {display:block;font-size:24px;font-weight:700;color:var(--white);text-align:center}
.index .sec_04 .item .money {display:block;font-size:30px;font-weight:700;color:var(--white);text-align:center;margin-top:12px}
.index .sec_04 .item .info {background:var(--white)}
.index .sec_04 .item .info > p {text-align:center}
.index .sec_04 .item .info > p .emphasis {font-size:1.2em;font-weight:600}
.index .sec_04 .item table th {width:100px;}
.index .sec_04 .swiper {display:none}

.index .sec_05 {padding:var(--sec-padding) 0}
.index .sec_05 .swiper {overflow:visible}
.index .sec_05 .swiper-slide {width:715px;padding:0 15px}
.index .sec_05 .swiper-slide img {width:100%}

.index .sec_06 {background:url('../img/web/index_06_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0}
.index .sec_06 .tab_menu ul {justify-content:center;}
.index .sec_06 .sub_tab {margin-top:30px}
.index .sec_06 .sub_tab .tab_menu ul {gap:8px 34px}
.index .sec_06 .sub_tab .tab_menu li>* {font-size:22px;background:none;height:auto;border:none;padding:0;font-weight:normal}
.index .sec_06 .sub_tab .tab_menu li>*.on {color:var(--primary);font-weight:700}
.index .sec_06 .swiper {overflow:visible;margin-top:54px}
.index .sec_06 .swiper-slide {width:330px;padding:0 10px}
.index .sec_06 .swiper-slide img {border-radius:10px}
.index .sec_06 .btn_wrap {margin-top:54px}

.index .sec_07 {background:url('../img/web/index_07_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0}
.index .sec_07 .sns {display:flex;align-items:center;gap:20px;margin-bottom:40px;}
.index .sec_07 .sns div {width:40px}
.index .sec_07 .title_box {text-align:left;color:var(--white);margin:0}
.index .sec_07 .title_box p {color:rgba(255,255,255,.7)}
.index .sec_07 .wrapper {display:flex;align-items:center;justify-content:space-between;gap:40px;max-width:1600px}
.index .sec_07 .cont {display:flex;gap:0 30px;width:44%;}

.index .sec_08 {display:flex;padding:var(--sec-padding) 0}
.index .sec_08 .tab_menu {margin-top:40px}
.index .sec_08 .tab_menu ul {flex-wrap:wrap;justify-content:center}
.index .sec_08 .img_wrap img {width:100%}

.index .sec_09 {padding:var(--sec-padding) 0}
.index .sec_09 .tab_menu {margin-top:40px}
.index .sec_09 .swiper {overflow:visible}
.index .sec_09 .swiper-slide {width:320px;overflow:hidden}
.index .sec_09 .swiper-slide img {width:calc(100% + 4px);max-width:initial;margin-left:-2px}

.index .sec_10 {padding:var(--sec-padding) 0}
.index .sec_10 .wrap_controllers,
.index .sec_10 .map_wrap .cont {display:none}
.index .sec_10 .root_daum_roughmap {width:100% !important}
.index .sec_10 .info_wrap {margin-top:-100px;position:relative;z-index:10}
.index .sec_10 .info_wrap .wrapper {display:flex;gap:30px}
.index .sec_10 .info_wrap .item {width:100%;background:var(--white);border:solid 2px #EDEDED;border-radius:10px;padding:30px 40px;transition:all .2s}
.index .sec_10 .info_wrap .item:hover {border-color:var(--primary)}
.index .sec_10 .info_wrap .item > img {display:block;width:100px;margin-left:auto}
.index .sec_10 .info_wrap .item .txt_wrap {margin-top:16px;font-size:22px}
.index .sec_10 .info_wrap .item .txt_wrap .primary {display:block;font-size:20px;font-weight:600;margin-bottom:10px}
.index .sec_10 .info_wrap .item .txt_wrap p {word-break: break-all;}

@media (hover: hover) {}

@media all and (max-width: 1499px) {
    .index .sec_08 .tab_cont_wrap {height:700px}
    .index .sec_08 .txt_wrap {padding:0 60px}
}

@media all and (max-width: 1399px) {
    .index .sec_07 .title_box p br.only_mb {display:block}
    .index .sec_07 .cont {width:50%}
}

@media all and (max-width: 1199px) {
    .index .sec_01 {padding:170px 0 120px}
    .index .sec_01 .swiper {margin-top:120px}
    .index .sec_01 .swiper::before {width:305px;height:645px}
    .index .sec_01 .swiper-slide {width:300px}
    /*
    */

    .index .sec_02 .list .item img {width:200px}
    .index .sec_02 .list .item span {font-size:20px;margin-top:12px}

    .index .sec_03 .item {padding:40px 24px}
    .index .sec_03 .item table th,
    .index .sec_04 .item table th {padding:8px 0}
    .index .sec_03 .item table td,
    .index .sec_04 .item table td {padding:6px 0}
    .index .sec_03 .item .top .tit {font-size:24px}
    .index .sec_03 .item .top .price {font-size:28px}
    .index .sec_03 .item .top .sub {font-size:17px}
    .index .sec_03 .item .info {font-size:16px}

    .index .sec_04 .item {padding:30px 10px 10px 10px}
    .index .sec_04 .item .tit {font-size:20px}
    .index .sec_04 .item .money {font-size:24px;margin-top:10px}
    .index .sec_04 .item .info {font-size:16px;padding:10px 20px}
    .index .sec_04 .item table th {width:90px}

    .index .sec_05 .swiper-slide {width:500px}

    .index .sec_06 .sub_tab {margin-top:22px}
    .index .sec_06 .sub_tab .tab_menu ul {gap:8px 24px;flex-wrap:wrap}
    .index .sec_06 .sub_tab .tab_menu li>* {font-size:18px}

    .index .sec_08 .tab_cont_wrap {height:600px}
    .index .sec_08 .tab_menu {margin-top:40px}

    .index .sec_09 .swiper-slide {width:290px}

    .index .sec_10 .wrap_map {height:400px !important}
    .index .sec_10 .info_wrap .wrapper {gap:20px}
    .index .sec_10 .info_wrap .item {padding:30px 32px}
    .index .sec_10 .info_wrap .item > img {width:85px}
    .index .sec_10 .info_wrap .item .txt_wrap {font-size:20px}
    .index .sec_10 .info_wrap .item .txt_wrap .primary {font-size:18px}
}

@media all and (max-width: 1023px) {
    .index .sec_02 .list {flex-direction:column;gap:20px}

    .index .sec_03 .item {padding:30px 0 0;overflow:hidden}
    .index .sec_03 .item .top {padding:0 24px;gap:10px}
    .index .sec_03 .item .info {border-radius:0}
    .index .sec_03 .item table th {display:block;padding-bottom:3px}
    .index .sec_03 .item table td {display:block}
    .index .sec_03 .item .top .tit b {font-size: 13px;}
    .index .sec_03 .item table td span i {display: block;}

    .index .sec_04 .swiper {display:block;overflow:visible}
    .index .sec_04 .swiper-slide {width:350px;padding:0 10px}
    .index .sec_04 .swiper-slide .item {width:100%}
    .index .sec_04 .list {display:none}

    .index .sec_07 .wrapper {flex-direction:column;}
    .index .sec_07 .title_box {text-align:center;}
    .index .sec_07 .sns {justify-content:center;margin-bottom:20px;gap:20px}
    .index .sec_07 .sns div {width:34px}
    .index .sec_07 .cont {width:100%;max-width:500px;gap:12px}

    .index .sec_08 {flex-direction:column-reverse;gap:40px;padding-top:var(--sec-padding)}
    .index .sec_08 .tab_cont_wrap {width:100%;height:auto}
    .index .sec_08 .title_box {text-align:center}
    .index .sec_08 .txt_wrap {align-items:center;padding:0}
    .index .sec_08 .tab_menu {width:100vw;margin-left:-40px;overflow-x:auto;padding:0 20px}
    .index .sec_08 .tab_menu ul {flex-wrap:nowrap;justify-content:flex-start}
    .index .sec_08 .tab_menu ul li {white-space:nowrap}
    .index .sec_08 .tab_menu ul li:last-child {padding-right:20px}

    .index .sec_10 .info_wrap {margin-top:24px}
    .index .sec_10 .info_wrap .wrapper {flex-direction:column;}
}

@media all and (max-width: 767px) {
    .index .sec_01 {background-size:150%;padding:110px 0 120px}
    .index .sec_01 .swiper {margin-top:80px}
    .index .sec_01 .swiper::before {width:228px;height:485px}
    .index .sec_01 .swiper-slide {width:228px}
    .index .sec_01 .title_box p {max-width:526px}
    .index .sec_01 .btn_wrap {margin-top:24px}

    .index .sec_02 {background-image:url('../img/web/index_02_bg_mb.jpg')}
    .index .sec_02 .list .item img {width:160px}

    .index .sec_03 .item .top {flex-direction:column;align-items:flex-start;}
    .index .sec_03 .item .top .tit {font-size:20px}
    .index .sec_03 .item .top .price {font-size:24px}
    .index .sec_03 .list {display:none}
    .index .sec_03 .swiper {display:block;overflow:visible}
    .index .sec_03 .swiper-slide {width:400px;padding:0 10px}
    .index .sec_03 .swiper .item {width:100%}
    .index .sec_03 .item .info ul {display:flex;flex-direction:column;align-items:flex-start;}

    .index .sec_03 .item table th,
    .index .sec_04 .item table th {padding:6px 0}
    
    .index .sec_05 .swiper-slide {width:335px;padding:0 6px}

    .index .sec_06 .sub_tab {margin-top:16px}
    .index .sec_06 .sub_tab .tab_menu ul {gap:8px 14px}
    .index .sec_06 .sub_tab .tab_menu li>* {font-size:14px}
    .index .sec_06 .btn_wrap {margin-top:45px}

    .index .sec_08 .tab_menu {margin-top:24px;margin-left:-20px}
    .index .sec_08 .tab_cont_wrap {width:100vw;margin-left:-20px}
    .index .sec_08 .img_wrap {max-width:500px;margin:0 auto}

    .index .sec_09 .tab_menu {margin-top:24px}
    .index .sec_09 .swiper-slide {width:270px}

    .index .sec_10 .wrap_map {height:250px !important}
    .index .sec_10 .info_wrap .item {padding:30px 24px}
    .index .sec_10 .info_wrap .item > img {width:70px}
    .index .sec_10 .info_wrap .item .txt_wrap {font-size:18px}
    .index .sec_10 .info_wrap .item .txt_wrap .primary {font-size:16px}
}

@media all and (max-width: 499px) {
    .index .sec_01 {background-size:200%}

    .index .sec_03 .swiper-slide {width:98%;padding:0 5px}

    .index .sec_04 .tab_menu {width:calc(100% + 40px);overflow-x:auto;padding:0 20px;margin-left:-20px}
    .index .sec_04 .tab_menu ul {justify-content:flex-start;flex-wrap:nowrap}
    .index .sec_04 .tab_menu ul li {white-space:nowrap;}
    .index .sec_04 .tab_menu ul li:last-child {padding-right:20px}

    .index .sec_08 {padding-bottom:0}
}
 
@media all and (max-width: 374px) {
    .index .sec_05 .swiper-slide {width:98%;padding:0 5px}
    .index .sec_06 .swiper-slide {width:98%;padding:0 5px}
}


/**/
@media (hover: hover) {}

@media all and (max-width: 1199px) {
}

@media all and (max-width: 1023px) {}

@media all and (max-width: 767px) {}

@media all and (max-width: 499px) {}
 
@media all and (max-width: 374px) {}