@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hurricane&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

*, html {/*font-size:62.5%;*/ box-sizing:border-box; -webkit-box-sizing:border-box; scroll-behavior:smooth;}
html, body {container:body / inline-size; width:100%; min-height:100%; -webkit-text-size-adjust:none; padding:0; margin:0; font-family:"Inter", sans-serif; overflow-x:hidden; background-color:var(--colour-white); font-style:normal;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,p,img {margin:0; padding:0;}
a {text-decoration:none;}
ul, ol {list-style:none;}
a, a:active, a:focus, a:visited {-webkit-tab-highlight-color:rgba(0,0,0,.1); color:var(--colour-lightblack);}


:root {
    --primary:#c7133a;
    --secondary:#01a392;
    --tertiary:#c97400; /*ecdbaf*/

    --colour-lightblack:#0d0d0d;
    --colour-black:#000;
    --colour-white:#fff;
    --colour-grey:#a3a3a3;
    --colour-lightgrey:#f2f2f2;

}

.skelloadpartial {
    *[skel] {animation:backFade 0.4s 1;}
    *[skel1s] {animation:backFade 1s 1;}
}
@keyframes backFade {
    0% {background:linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%); border-radius:55px; background-size:200% 100%;
        background-position:100% 0; color:transparent;}
    50% {}
    100% {background:var(--colour-lightgrey); color:var(--colour-lightgrey);}
}


/*main {container:main / inline-size; max-width:1280px; margin:0 auto; padding:50px 0;}*/


.wrap {container:wrap / inline-size; width:100%; height:100%;}
.row {
    /*max-width:1280px; margin:0 auto;*/ margin-bottom:100px;
    &:last-child {margin-bottom:0;}
}

.page {margin-top:80px; position:relative;}

button {outline:0; border:0; font-size:clamp(12px,1vw,14px); font-weight:400; cursor:pointer;}

#btn_top {display:none; position:fixed; z-index:10; bottom:70px; right:30px; width:50px; height:50px; outline:0; border-radius:50%; cursor:pointer; background-repeat:no-repeat; background-size:23px 23px; background-position:50% 50%; background-image:url('../img/ico_arrowtop.svg'); background-color:var(--primary);}

header {
    width:100%; height:80px; position:fixed; top:0; left:0; background-color:transparent; z-index:1000;
    &.hscroll {background-color:var(--colour-white); transition:0.4s;}
    & .colwrap {
        display:flex; align-items:center; justify-content:space-between; height:80px; padding:0 30px;
        & h1 {
            & img {width:100px; height:auto; cursor:pointer;}
        }
        & nav {
            & .gnb {
                &>ul>li {
                    position:relative;
                    &:focus::before, &:hover::before {position:absolute; width:100%; height:35px; bottom:-35px; content:'';}
                }
                & ul {
                    display:flex; align-items:center; gap:40px; font-weight:400; font-size:15px; font-weight:500;
                    & li {
                        cursor:pointer;
                        & img {width:20px; height:20px; display:none;}
                        &:hover, &:focus {
                            color:var(--colour-lightblack); transition:all 0.3s;
                            & .dropdown {visibility:visible; opacity:1;}
                        }
                        & .dropdown {
                            width:100%; position:fixed; top:80px; left:0; background-color:var(--colour-white); padding:100px 0; visibility:hidden; opacity:0; transition:all 0.5s ease; cursor:default; border-top:1px solid var(--colour-lightblack);
                            & .depth2 {
                                width:535px; margin:0 auto; position:absolute; top:40px; right:0;
                                &.d2 {right:-110px;}
                                &.d3 {right:-215px;}
                                & .depth2_title {
                                    & span {
                                        display:block; font-size:14px; font-weight:500; margin-bottom:35px;
                                        &:hover {color:var(--primary);}
                                    }
                                    & .depth2_list {
                                        display:block;
                                        & li {
                                            & a {
                                                display:block; font-size:14px; margin-bottom:15px; color:var(--colour-lightblack);
                                                &:hover {color:var(--primary); transition:all 0.3s;}
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        & .langdropdown {
                            cursor:pointer; position:relative; z-index:1; transform:perspective(0px); width:100px; line-height:50px;
                            &:hover {
                                & .lang {background-color:var(--colour-white); opacity:1; visibility:visible; top:100%; width:100%; transition:all .3s;}
                            }
                            & .lang {
                                background-color:transparent; list-style-type:none; margin:0; padding:0; position:absolute; left:-14px; opacity:0; text-align:center; top:0; visibility:hidden; z-index:-99999; border-radius:10px; padding:5px;
                                & div:first-child {cursor:default;}
                                & a {
                                    color:#000; display:block; width:100%; margin:0 auto; height:50px; line-height:50px; text-align:center; text-decoration:none; -webkit-transition:all .3s; transition:all .3s; border-top-left-radius:5px; border-radius:10px;
                                    &:hover {background-color:var(--primary); color:#fff;}
                                }
                            }
                        }
                    }
                }
            }
            & .menu {
                display:none;
                & img {width:40px; height:auto; cursor:pointer;}
            }
            & .gnb2 {
                display:none;
            }
            & .btn_book {
                color:var(--colour-white); background-color:var(--primary); font-weight:500; border-radius:30px; padding:10px 15px; font-size:var(--xxxxsmall);
                &:hover {background-color:#d00062; transition:all 0.3s;}
            }
        }
    }
}



footer {
    padding:100px 30px; background-color:var(--colour-lightgrey);
    & .colwrap {
        display:flex; justify-content:space-between;
        & h1 {
            height:auto; margin-bottom:30px;
            & img {width:100px; height:auto; cursor:pointer;}
        }
        & p {
            font-size:clamp(11px,1vw,12px); color:#00322d; margin-bottom:10px;
            & a {
                color:#00322d;
                &:hover {color:var(--primary);}
            }
        }
        & ul {
            & li {
                font-size:clamp(12px,1vw,12px); color:#00322d; margin-bottom:20px; cursor:pointer;
                &:hover {color:var(--primary);}
                &:first-child {font-weight:500; font-size:clamp(14px,1vw,16px); color:var(--primary);}
                & a {
                    color:#00322d;
                    &:hover {color:var(--primary);}
                }
            }
        }
    }
}






input[type=date] {
    &::before {position:absolute; content:attr(data-placeholder); color:var(--colour-grey); font-family:'Arial'; top:50%; transform:translateY(-50%);}
    &:focus, &:valid {
        &::before {display:none;}
        &::-webkit-datetime-edit {opacity:1;}
    }
    &::-webkit-datetime-edit {font-family:'Poppins', sans-serif; font-size:14px; line-height:14.8px; opacity:0;}
    &::-webkit-calendar-picker-indicator {display:none;}
}

input::placeholder {}
input[type=number] {-moz-appearance:textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}




.swiper {
    display:flex; align-items:center; padding:20px; margin-top:60px;
    & .col {
        width:50%;
        &.col1 {
            padding:0 50px;
            & .text1 {
                font-size:clamp(32px,12vw,90px); font-weight:700; margin-bottom:20px; color:var(--colour-black); font-family:"Fraunces", serif; font-style:italic;
                & span {color:var(--primary);}
            }
            & .text2 {font-size:clamp(12px,1.4vw,14px); font-weight:400;}
        }
        &.col2 {
            height:800px; background-color:var(--primary); border-radius:20px; overflow:hidden; /*aspect-ratio:1 / 1;*/
            & img {object-fit:cover; max-width:100%; height:100%;}
        }
    }
}


.title {
    /*background-color:var(--colour-lightblack);*/ padding:8px 20px; margin-bottom:70px;
    & h2 {color:var(--colour-lightblack); font-size:clamp(26px,3vw,60px); letter-spacing:0.05em;}
    & p {color:var(--colour-lightblack); font-size:clamp(13px,1.5vw,14px); font-weight:400; letter-spacing:0.05em;}
}


.section1 {
    position:relative; /*background-image:url('../img/worldmap.jpg'); background-size:85%; background-position:35% 68%; background-repeat:no-repeat; padding:100px 0;*/ margin:250px 0 150px 0; /*background-image:url('../img/ico_greennature.svg');*/ background-image:url('../img/ico_leaves2.svg'); background-size:contain; background-position:left top; background-repeat:no-repeat; min-height:70vh;
    & .title {text-align:right;}
    & .colwrap {
        display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0 20px;
        & .col {
            width:19%;
            & article {
                background-color:var(--colour-white); padding:35px 30px; border-radius:15px; height:stretch; box-shadow:0px 10px 20px 0px rgba(0,0,0,.18);
                & .thumb {
                    margin-bottom:10px;
                    & img {width:40px; height:40px;}
                }
                & label {display:block; min-height:40px; /*text-transform:uppercase;*/ font-weight:600; font-size:16px; margin-bottom:40px; word-break:break-all; color:#00322d;}
                & h3 {font-weight:500; font-size:14px; margin-bottom:10px; min-height:35px;}
                & .description {font-size:12px; color:rgba(0,0,0,.6);}
            }
        }
    }
}


.section2 {
    margin-bottom:200px;
    & .colwrap {
        display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(6, 1fr); grid-column-gap:0; grid-row-gap:0; max-width:1280px; min-height:1000px; margin:0 auto;
        & .col {
            padding:5px;
            & article {
                height:stretch;
                & .thumb {
                    overflow:hidden; height:50%;
                    & img {width:100%; height:100%; object-fit:cover;}
                }
                & .textbox {
                    padding:30px; position:relative; width:100%; height:50%;
                    & .box {
                        & label {display:block; min-height:40px; font-weight:600; font-size:clamp(20px,2vw,34px); margin-bottom:40px; word-break:break-all; color:#00322d; text-align:center; font-family:"Hurricane", cursive;}
                        & .description {font-size:14px; color:rgba(0,0,0,.6); text-align:center;}
                    }
                }
            }
            &.col1 {
                grid-area:1 / 1 / 4 / 3; background-color:#ecdbaf; border-top-left-radius:15px; border-top-right-radius:15px;
                & article {
                    display:flex; align-items:center;
                    & .thumb {width:50%; height:605px; border-top-left-radius:10px;}
                    & .textbox {width:50%;}
                }
            }
            &.col2 {
                grid-area:4 / 1 / 7 / 3; background-color:#00796d; border-bottom-left-radius:15px;
                & .textbox {
                    & .box {
                        width:80%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                        & label {color:var(--colour-white);}
                        & .description {color:var(--colour-white);}
                    }
                }
            }
            &.col3 {
                grid-area:2 / 3 / 7 / 5; background-color:#890421; border-top-right-radius:15px; border-bottom-right-radius:15px;
                & article {
                    & .thumb {
                        height:60%; border-top-right-radius:10px;
                    }
                    & .textbox {
                        height:40%;
                        & .box {
                            width:80%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                            & label {color:var(--colour-white);}
                            & .description {color:var(--colour-white);}
                        }
                    }
                }
            }
        }
    }
}


.section3 {
    margin-bottom:200px; /*background-color:#160000;*/ padding:80px 0 30px 0; /*background-image:url(../img/ico_paperplane.svg); background-repeat:no-repeat; background-size:20%; background-position:right;*/
    & .title {
        & h2 {font-family:"Kaushan Script", cursive; letter-spacing:-0.05em; font-style:italic; font-size:150px; line-height:1.3em; font-weight:bold; color:rgb(255 237 191); margin-bottom:50px; text-align:center; margin-left:-30px;}
        & p {color:rgb(218 177 88 / 70%); text-align:center;}
    }
    & .colwrap {
        display:flex; align-items:center; gap:10px; justify-content:center;
        & .article_c {
            max-width:430px; display:block; padding:10px; border-radius:15px; box-shadow:0px 10px 20px 0px rgba(0,0,0,.18); margin:0 auto 20px auto;
            & .a_img {
                width:100%; height:200px; overflow:hidden; border-radius:10px;
                & img {width:100%; height:100%; object-fit:cover; border-radius:10px;}
            }
            & .description {
                width:100%; padding:30px 15px 15px 15px;
                & label {display:block; font-size:17px; font-weight:600; margin-bottom:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
                & p {text-align:left; font-size:14px; font-weight:400; margin-bottom:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.2em; height:6em;}
                & span {display:block; font-size:12px; color:#bbcdcb; font-weight:400; text-align:right;}
            }
        }
    }
}


.section4 {
    & .title {
        text-align:center; margin-bottom:0;
        & h2 {font-size:80px; text-transform:uppercase; text-align:right;}
        & p {color:rgba(255,255,255,.7);}
    }
    & .contactus {
        padding:60px 20px; margin-top:-45px;
        & .form {
            max-width:760px; margin:50px auto 0 auto;
        }
    }
}


.contactus {
    background-color:var(--colour-lightblack);
    & .form {
        & .req {color:var(--primary); margin-left:5px; font-size:11px;}
        & .field {
            margin-bottom:30px;
            & label {color:var(--colour-white); font-size:14px; font-weight:500; display:block; margin-bottom:10px;}
            & .value {
                & input {
                    width:100%; box-sizing:border-box; padding:14px 16px; border-radius:10px; background:rgba(255,255,255,0.06); color:var(--colour-white); border:1px solid rgba(255,255,255,0.1); outline:none; font-size:14px;
                    &::placeholder {color:rgba(255,255,255,0.4);}
                    &:focus {border-color:var(--primary);}
                }
                & textarea {
                    width:100%; min-height:300px; resize:none; box-sizing:border-box; padding:14px 16px; border-radius:10px; background:rgba(255,255,255,0.06); color:var(--colour-white); border:1px solid rgba(255,255,255,0.1); outline:none; font-size:14px;
                    &:focus {border-color:var(--primary);}
                }
            }
        }
        & .agreement {
            & .value {
                margin-bottom:50px;
                & span {color:var(--colour-white); font-size:14px;}
                & input {width:17px; height:17px; vertical-align:middle; margin-right:7px; border:0; accent-color:var(--primary);}
                & .req {color:var(--primary); margin-left:5px; font-size:11px;}
            }
            & .btn_submit {
                width:100%; padding:20px 24px; background:var(--primary); color:var(--colour-white); border:none; border-radius:999px; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px; transition:background .15s;
                &:hover {background-color:#930524;}
                &::after {content:'→';}
            }
        }
    }
}



.section_head {
    background-color:var(--colour-lightblack); /*height:50vh;*/ height:600px; padding:0 20px;
    & .section_title {/*color:rgb(255 237 191); font-size:clamp(26px,3vw,60px); letter-spacing:0.05em;*/ font-family:"Kaushan Script", cursive; letter-spacing:-0.05em; font-style:italic; font-size:130px; line-height:1.3em; color:var(--colour-white); margin-bottom:30px; padding-top:50px; text-align:center;}
    & p {color:var(--colour-white); font-size:clamp(13px,1.5vw,14px); font-weight:400; letter-spacing:0.05em; text-align:center; margin-bottom:80px;}
    & .image {
        overflow:hidden; max-width:400px; height:500px; margin:-50px auto 0 auto; border-radius:15px;
        & img {width:100%; height:100%; object-fit:cover;}
    }
}

.section_body {
    max-width:720px; /*margin:450px auto 300px auto;*/ padding:250px 20px; margin:0 auto;
    & .content {
        & p {
            color:var(--colour-lightblack); font-size:16px; margin-bottom:20px; text-align:center;
            &.f {font-size:26px; font-weight:700; margin-bottom:10px;}
            & span {
                width:20px; height:auto; margin-right:5px;
                & img {width:20px; height:auto;}
            }
        }
    }
}


.page_company {
    & .section_head {background-color:var(--primary);}
}

.page_people {
    & .section_head {background-color:var(--secondary);}
    & .section_body {max-width:920px;}
}

.page_product {
    & .section_head {background-color:#ecdbaf;}
    & .section_body {max-width:920px;}
    & .tabmenu {
        & ul {
            & li {
                &:hover, &.active {color:#ecdbaf;}
            }
        }
    }
}

.page_brand {
    & .section_head {background-color:#890421;}
    & .section_body {max-width:920px;}
    & .tabmenu {
        & ul {
            & li {
                &:hover, &.active {color:var(--primary);}
            }
        }
    }
}

.page_news {
    & .section_head {background-color:var(--tertiary);}
    & .section_body {max-width:920px;}
}

.page_notice {
    & .section_head {background-color:#00322d;}
    & .section_body {max-width:920px;}
}

.page_contactus {
    & .contactus {
        padding:30px; border-radius:15px;
        & .form {
            max-width:920px; margin:0 auto;
        }
    }
}



#map {width:100%; height:750px;}


.tabmenu {
    background-color:var(--colour-lightblack); position:absolute; top:calc(100vh - 50vh); left:0;
    & ul {
        display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:5px; padding:20px 30px; width:100vw; overflow:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scroll-snap-align:center;
        &::-webkit-scrollbar {width:5px; height:5px;}
        &::-webkit-scrollbar-track {background-color:var(--colour-lightgrey); border-radius:10px;}
        &::-webkit-scrollbar-thumb {background-color:#d3d4da; border-radius:10px;}
        & li {
            color:var(--colour-white); border-radius:5px; background-color:#2f2f2f; padding:15px 20px; text-align:center; font-size:clamp(12px,1vw,14px); cursor:pointer; transition:all 0.3s; white-space:nowrap;
            &:hover, &.active {background-color:var(--colour-lightblack); color:var(--secondary); font-weight:600;}
        }
    }
}


.tabframe {
    & .s_title {
        font-size:clamp(28px,3vw,22px); font-weight:500; text-align:center; margin-bottom:50px; color:var(--colour-lightblack);
        & span {display:block; font-size:16px; color:var(--primary); margin-bottom:30px;}
    }
}


.a_title, .b_title {color:var(--colour-lightblack); font-size:20px; font-weight:600; margin-bottom:30px;}

.article_a {
    display:flex; align-items:center; gap:30px;
    & .a_img {
        width:50%; height:auto;
        & img {width:100%; height:auto; object-fit:cover; border-radius:15px;}
    }
    & .description {
        width:50%;
        & h2 {color:var(--colour-lightblack); font-size:20px; font-weight:500; margin-bottom:50px; text-align:left;}
        & h3 {color:var(--colour-lightblack); font-size:16px; font-weight:600; margin-bottom:30px; text-align:left;}
        & p {color:var(--colour-lightblack); font-size:14px; font-weight:400; text-align:left !important;}
    }
}

.article_b {
    & .a_img {
        width:100%; height:auto; margin-bottom:30px;
        & img {width:100%; height:auto; object-fit:cover; border-radius:15px;}
    }
    & .description {
        width:100%; padding:0 15px;
        & h2 {color:var(--colour-lightblack); font-size:20px; font-weight:500; margin-bottom:50px;}
        & h3 {color:var(--colour-lightblack); font-size:16px; font-weight:600; margin-bottom:30px; text-align:left;}
        & p {color:var(--colour-lightblack); font-size:14px; font-weight:400; text-align:left !important;}
    }
    & .countries {
        margin-top:50px; display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap;
        & .box {
            width:150px; height:150px; text-align:center; padding:25px 15px 15px 15px; background-color:#f7f7f7; border-radius:15px;
            & .c_img {
                width:70px; height:auto; margin:0 auto 10px auto; overflow:hidden;
                & img {width:70px; height:auto; object-fit:cover;}
            }
            & label {display:block; width:100%; font-weight:500; color:var(--colour-lightblack); font-size:16px;}
        }
    }
}

.article_c {
     display:flex; gap:10px; width:100%; padding:10px; border-radius:15px; box-shadow:0px 10px 20px 0px rgba(0,0,0,.18); margin-bottom:20px;
    & .a_img {
        width:30%; height:200px; overflow:hidden; border-radius:10px;
        & img {width:100%; height:100%; object-fit:cover; border-radius:10px;}
    }
    & .description {
        width:70%; padding:20px;
        & label {display:block; font-size:17px; font-weight:600; margin-bottom:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
        & p {text-align:left; font-size:14px; font-weight:400; margin-bottom:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.2em; height:6em;}
        & span {display:block; font-size:12px; color:#bbcdcb; font-weight:400; text-align:right;}
    }
}

.article_view {
    & .v_title {font-size:clamp(18px,8vw,26px); font-weight:600; margin-bottom:20px; padding:0 15px; text-align:center;}
    & .publdate {
        display:flex; align-items:center; gap:15px; margin-bottom:50px; padding:0 15px; justify-content:end;
        & span {font-size:12px; font-weight:400; font-style:italic; color:var(--colour-grey);}
    }
    & .a_img {
        width:100%; height:auto; margin-bottom:30px;
        & img {width:100%; height:auto;}
    }
    & .description {
        width:100%;
        & p {color:var(--colour-lightblack); font-size:14px; font-weight:400; text-align:left !important; padding:0 15px;}
    }
}


.caddy, .intls, .regi, .famo {
    & .article_b {
        & .description {
            margin-bottom:50px; padding-bottom:40px; border-bottom:1px solid var(--colour-lightgrey);
            &:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}
            & p {
                margin-bottom:40px;
                &:last-child {margin-bottom:0;}
                & span {display:block; width:100%; margin-bottom:10px; color:var(--primary);}
            }
        }
    }
}


.intlw {
    & .article_b {
        & .description {
            padding:0;
            & p {
                & span {display:block; width:100%; margin-bottom:10px; color:var(--primary);}
            }
        }
    }
    & .article_c {
        & img {width:100%; height:auto; border-radius:15px;}
    }
}


.regi {
    & .article_b {
        & .description {
            & h2 {text-align:center; color:var(--primary);}
        }
        & .description2 {
            background-color:#ecdbaf; padding:50px 30px; border-radius:15px;
            & h2 {text-align:center; color:#00322d; font-weight:500; margin-bottom:15px; font-size:clamp(18px,3vw,20px);}
            & p {text-align:center; color:var(--colour-lightblack); font-size:14px;}
        }
    }
}


.famo {
    & .article_b {
        & .a_img {margin-bottom:70px;}
        & .description {
            margin-bottom:50px; padding-bottom:40px; border-bottom:1px solid var(--colour-lightgrey);
            &:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}
            & p {
                margin-bottom:40px;
                &:last-child {margin-bottom:0;}
                & span {display:block; width:100%; margin-bottom:10px; color:var(--primary);}
            }
            &.desc_center {
                & p {text-align:center;}
            }
        }
    }
}


.soxo {
    & .article_b {
        & .description {
            margin-bottom:50px;
            & h2 {text-align:center; color:var(--primary);}
        }
        & .description2 {
            padding:50px 30px; border-radius:15px; margin-bottom:20px;
            &.desc1 {background-color:#dfa960;}
            &.desc2 {background-color:#efa33e;}
            &.desc3 {background-color:var(--tertiary);}
            & h2 {text-align:center; color:var(--colour-white); font-weight:500; margin-bottom:15px; font-size:clamp(18px,3vw,20px);}
            & h3 {text-align:center; color:var(--colour-white); font-weight:400; margin-bottom:30px; font-size:18px;}
            & p {text-align:center; color:var(--colour-white); font-size:14px;}
        }
    }
}









@container body (max-width:1279px) {
    .header {padding:0 10px;}

    .footer {padding:0 10px;}

    .section1 {/*background-size:100%;*/ min-height:60vh;}

    .section2 {
        & .colwrap {padding:0 20px;}
    }

}

@container body (max-width:1024px) {
    .section1 {margin:100px 0;}

    .section2, .section3 {margin-bottom:100px;}
    
}

@container body (max-width:855px) {
    footer {
        & .colwrap {
            display:block;
            & .col {
                margin-bottom:70px; text-align:center;
                &:last-child {margin-bottom:0;}
            }
        }
    }

    .section1 {
        padding-top:0;
        & .colwrap {
            & .col {
                width:32%;
            }
        }
    }    

    .section2 {
        & .colwrap {
            & .col {
                & article {
                    & .textbox {
                        padding:20px;
                    }
                }
            }
        }
    }

    .section3 {
        margin-bottom:100px; padding:0;
        & .title {
            & h2 {font-size:100px; margin-bottom:30px;}
        }
        & .colwrap {
            padding:0 20px;
        }
    }

}

@container body (max-width:769px) {
    header {
        & .colwrap {
            & nav {
                & .gnb {display:none;}
                & .menu {display:block;}
                & .gnb2 {
                    display:block; position:fixed; top:0; right:-100%; width:100%; height:100vh; background:var(--colour-white); transition:all 0.6s ease-in-out; z-index:9999;
                    & .close {
                        width:100%; height:90px; position:relative; cursor:pointer;
                        & img {width:30px; height:30px; position:absolute; top:30px; right:30px;}
                    }
                    & ul {
                        & li {padding:20px 50px; font-size:16px; font-weight:500;}
                    }
                    & .btn_book {padding:20px 50px; display:block; width:100%; margin:20px auto;}
                    & .gnb2_dropdown {
                        border-top:1px solid var(--colour-grey); padding:0 50px;
                        & .depth2 {
                            padding:25px 0 0 20px;
                            & .depth2_title {
                                margin-bottom:30px;
                                & span {margin-bottom:10px; display:block; color:#4d4d4d; font-size:14px;}
                            }
                            & .depth2_list {
                                & li {padding:10px 0;}
                            }
                        }
                    }
                }
            }
        }
    }

    .swiper {
        display:block; gap:0; position:relative; padding:10px; margin-top:70px;
        & .col {
            width:100%;
            &.col1 {
                padding:0 40px; position:absolute; top:73%; left:50%; transform:translate(-50%,-50%);
                & .text1 {
                    text-shadow:0.01em 0.01em rgba(255,255,255,.9);
                }
                & .text2 {color:rgba(255,255,255,.5);}
            }
        }
    }

    .title {padding:0 15px; margin-bottom:40px;}

    .section1 {
        background-repeat:repeat-y;
        & .colwrap {
            padding:0 10px;
            & .col {
                width:100%;
            }
        }
    }

    .section2 {
        & .colwrap {padding:0 10px;}
    }

    .section3 {
        & .title {
            & h2 {font-size:80px;}
        }
        & .colwrap {
            padding:0 10px;
            & .article_c {
                & .description {padding:30px 10px 10px 10px;}
            }
        }
    }

    .section4 {
        & .title {
            & h2 {font-size:60px;}
        }
        & .contactus {padding:50px 10px; margin-top:-30px;}
    }

    .section_head {
        padding:0 10px;
        & .section_title {font-size:65px; margin-left:-10px;}
    }

    .section_body {
        margin:0 auto; padding:250px 10px;
        /*& .content {margin-top:350px;}*/
    }
    
    /*.page_location {
        & .section_body {
            margin:250px auto 100px auto;
        }
    }*/

    .tabmenu {
        & ul {justify-content:start;}
    }

    .article_c {
        & .a_img {
            width:40%;
        }
        & .description {
            padding:10px;
        }
    }


}


@container body (max-width:479px) {
    .section2 {
        & .colwrap {
            display:block;
            & .col {
                &.col2 {
                    border-bottom-left-radius:0;
                    & .textbox {
                        height:300px;
                    }
                }
                &.col3 {
                    border-top-right-radius:0; border-bottom-left-radius:15px; border-bottom-right-radius:15px;
                    & article {
                        & .thumb {height:50%; border-top-right-radius:0;}
                        & .textbox {
                            height:300px;
                        }
                    }
                }
            }
        }
    }

    .section3 {
        & .title {
            & h2 {font-size:60px;}
        }
        & .colwrap {
            display:block; gap:0;
            & .col {
                width:100%;
                & .article_c {
                    max-width:100%; margin-bottom:10px;
                    & .description {padding:20px 10px;}
                }
            }
        }
    }

    .section4 {
        & .title {
            & h2 {font-size:40px;}
        }
        & .contactus {margin-top:-45px;}
    }


    .row {margin-bottom:70px;}

    .a_title, .b_title {padding:0 15px;}

    .article_a {
        display:block; gap:0;
        & .a_img {
            width:100%; margin-bottom:30px;
        }
        & .description {
            width:100%; padding:0 15px;
        }
    }

    .intlw {
        & .article_a {
            margin-bottom:50px;
            &:last-child {margin-bottom:0;}
        }
        & .article_b {
            & .description {
                & h2, & h3 {padding:0 15px;}
                & p {padding:0 15px;}
            }
        }
    }
}



/*430*/