#roominfodiv{ display:flex; gap:4px 12px; border:1px solid #ddd; padding:8px 12px; width:96%; margin:auto;} #roominfodiv > h4{ font-size:12px;} #roominfodiv > ul{ display:flex; flex-wrap:wrap; gap:4px 20px} #roominfodiv > ul > li > ul{ display:flex; gap:4px 4px;} #roominfodiv > ul > li > ul > li{ display:flex; align-items:center;} #roominfodiv > ul > li > ul > li > label{ display:none;} #roominfodiv > ul > li > ul > li > div{ font-size:12px; font-weight:400;} #roominfodiv > ul > li > ul > li > div > img{ width:50px; height:45px; } /* @import url('https://fonts.cdnfonts.com/css/tahoma'); @font-face { font-family: 'Tahoma'; src: url('https://www.cretapost.gr/cdn/assets/fonts/tahoma_bold/Tahoma Bold.woff') format('woff2'); font-weight: 700; font-style: normal; } *{font-family: 'Tahoma';} */ .KBody.Japan > div > header{ /*backdrop-filter: blur(5px);*/ position:fixed; left:0; top:0; width:100%; border-bottom:1px solid rgba(255,255,255,1); background-color:rgba(0,0,0,0.3); transition-duration:0.3s; z-index:300;} .KBody.Japan.scrollzero > div > header{ background-color:rgba(255,255,255,0); border-bottom:1px solid rgba(255,255,255,0.8)} .Japan > div > header > div > h1{ background-image:url(/file/img/logo_white.svg);;} .Japan > div > header > div > nav > ul > li a{ color:#fff;} .KBody.Japan.headernavhide > div > header{ top:-80px;} .KBody.Japan.headernavOpen.headernavhide > div > header{ top:0px;} /* .KBody.Japan > div{ min-width:1700px;} */ /* .japanmainvideodiv{ position:relative;} .japanmainvideodiv > .img > img { width:100%; height:700px; object-fit:cover; object-position:center; } .japanmainvideodiv > .img > video{ width:100%; height:700px; object-fit:cover; object-position:center 60%;} .japanmainvideodiv > .text{ position:absolute; left:0; top:0; padding-top:210px; width:100%;} .japanmainvideodiv > .text > div{ width:90%; max-width:1560px; margin:auto;} .japanmainvideodiv > .text > div > h4{ text-shadow:0 0 1px #000;} .japanmainvideodiv > .text > div > h4 > span{ color:#fff; font-size:32px; font-weight:normal;} .japanmainvideodiv > .text > div > h4 > span > .signaturespan{ font-weight:bold; font-size: 80px; color: transparent; -webkit-text-stroke: 1px #fff; text-shadow:none; } .japanmainvideodiv > .text > div > h4 > span:last-child{ font-size:80px; font-weight:bold;} .japanmainvideodiv > .text > div > p{ margin-top:20px; text-shadow:0 0 1px #000;} .japanmainvideodiv > .text > div > p > span{ font-size:20px; color:#fff;} .japanmainimgdiv{ position:relative;} .japanmainimgdiv > .img{} .japanmainimgdiv > .img > img{ width:100%; height:700px; object-fit:cover; object-position:center 60%; transform: scaleX(1);} .japanmainimgdiv > .text{ position:absolute; left:0; top:0; padding-top:210px; width:100%;} .japanmainimgdiv > .text > div{ width:90%; max-width:1560px; margin:auto;} .japanmainimgdiv > .text > div > h4{ text-shadow:0 0 1px #000;} .japanmainimgdiv > .text > div > h4 > span{ color:#fff; font-size:32px; font-weight:normal;} .japanmainimgdiv > .text > div > h4 > span > .signaturespan{ font-weight:bold; font-size: 80px; color: transparent; -webkit-text-stroke: 1px #fff; text-shadow:none; } .japanmainimgdiv > .text > div > h4 > span:last-child{ font-size:80px; font-weight:bold;} .japanmainimgdiv > .text > div > p{ margin-top:20px; text-shadow:0 0 1px #000;} .japanmainimgdiv > .text > div > p > span{ font-size:20px; color:#fff;} .Japan form{ height:700px; position:relative;} 250401 */ .japanmainvideodiv{ position:relative;} .japanmainvideodiv > .img{ width:100%; height:689px; overflow:hidden;} .japanmainvideodiv > .img > img { width:100%; height:689px; object-fit:cover; object-position:center; } .japanmainvideodiv > .img > video{ width:100%; height:689px; object-fit:cover; object-position:center 60%;} .japanmainvideodiv > .text{ position:relative; left:0; top:0; padding-top:210px; width:100%;} .japanmainvideodiv > .text > div{ width:90%; max-width:1560px; margin:auto;} .japanmainvideodiv > .text > div > h4{ text-shadow:0 0 1px #000;} .japanmainvideodiv > .text > div > h4 > span{ color:#fff; font-size:32px; font-weight:normal;} .japanmainvideodiv > .text > div > h4 > span > .signaturespan{ font-weight:bold; font-size: 80px; color: transparent; -webkit-text-stroke: 1px #fff; text-shadow:none; } .japanmainvideodiv > .text > div > h4 > span:last-child{ font-size:80px; font-weight:bold;} .japanmainvideodiv > .text > div > p{ margin-top:20px; text-shadow:0 0 1px #000;} .japanmainvideodiv > .text > div > p > span{ font-size:20px; color:#fff;} .japanmainimgdiv{ position:relative;} .japanmainimgdiv > .img{ position:relative; width:100%; height:689px; overflow:hidden;} .japanmainimgdiv > .img:before{ z-index:1; content:""; position:absolute; width:60%; height:100%; top:0; left:0; background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .japanmainimgdiv > .img > video{ width:100%; height:689px; object-fit:cover; object-position:center 60%; transform: scaleX(1);} .japanmainimgdiv > .img > img{ width:100%; height:689px; object-fit:cover; object-position:center 60%; transform: scaleX(1);} .japanmainimgdiv > .text{ position:absolute; left:0; top:0; padding-top:242px; width:100%; z-index:2;} .japanmainimgdiv > .text > div{ width:90%; max-width:1500px; margin:auto;} .japanmainimgdiv > .text > div > h4{ text-shadow:0 0 1px #000;} .japanmainimgdiv > .text > div > h4 > span:first-child{ margin-left:8px; color:#fff; font-size:19px; font-weight:700;} .japanmainimgdiv > .text > div > h4 > span{ color:#fff; font-size:105px; font-family:"BMW Motorrad Outline"; color:#fff;line-height:1;} .japanmainimgdiv > .text > div > h4 > span > .signaturespan{ line-height:1; text-transform:uppercase; font-weight:bold; font-size: 73.5px; /* color: transparent; -webkit-text-stroke: 1px #fff; text-shadow:none; */ display:block; font-family:"BMWMotorrad"; color:#fff; } /* .japanmainimgdiv > .text > div > h4 > span:last-child{ width:996px; height:93px; background-size:contain; background-repeat:no-repeat; display:inline-block; font-size:0; font-weight:bold; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%22996%22%20height%3D%2293%22%20viewBox%3D%220%200%20996%2093%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M27.3732%2084C21.813%2084%2016.6976%2082.9669%2012.0292%2080.9051C7.35868%2078.8411%203.34894%2076.0321%200%2072.474L5.88096%2065.6438C8.66104%2068.5616%2011.9394%2070.9116%2015.7203%2072.6875C19.497%2074.4676%2023.419%2075.3555%2027.4822%2075.3555C32.6831%2075.3555%2036.7292%2074.1816%2039.6163%2071.8358C42.5054%2069.4858%2043.9468%2066.4293%2043.9468%2062.6577C43.9468%2059.8808%2043.3587%2057.678%2042.1846%2056.0388C41.0063%2054.4017%2039.4388%2053.0356%2037.4777%2051.93C35.5188%2050.8265%2033.2905%2049.7422%2030.7948%2048.675L19.5675%2043.7657C17.1446%2042.6985%2014.7045%2041.3474%2012.2452%2039.7124C9.78591%2038.0753%207.73506%2035.9409%206.09695%2033.3091C4.45456%2030.6773%203.63764%2027.4757%203.63764%2023.7041C3.63764%2019.6487%204.7069%2016.0735%206.84543%2012.9785C8.98396%209.88358%2011.9052%207.44605%2015.6134%205.66805C19.3173%203.89006%2023.5623%203%2028.3377%203C33.0424%203%2037.3751%203.89006%2041.3292%205.66805C45.2834%207.44605%2048.6173%209.75978%2051.3268%2012.605L46.1965%2018.9016C43.7693%2016.6967%2041.1175%2014.9358%2038.2283%2013.6167C35.3392%2012.3019%2032.0437%2011.6424%2028.3377%2011.6424C23.9173%2011.6424%2020.3695%2012.6562%2017.6963%2014.6839C15.0232%2016.7117%2013.6866%2019.4694%2013.6866%2022.9549C13.6866%2025.5162%2014.3474%2027.6165%2015.6669%2029.2515C16.9842%2030.8908%2018.6416%2032.2056%2020.6368%2033.2002C22.6342%2034.1992%2024.6637%2035.1597%2026.7338%2036.0839L37.8541%2040.8864C40.848%2042.167%2043.5747%2043.6974%2046.0318%2045.4733C48.4912%2047.2534%2050.4351%2049.4583%2051.8615%2052.0922C53.2879%2054.7261%2054%2057.9619%2054%2061.8039C54%2065.9319%2052.9307%2069.6843%2050.7922%2073.0631C48.6537%2076.4419%2045.587%2079.11%2041.5965%2081.0673C37.6018%2083.0203%2032.8606%2084%2027.3732%2084Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M70%2084V5H81V84H70Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M133.657%2084C126.691%2084%20120.529%2082.3992%20115.182%2079.1978C109.832%2075.9963%20105.629%2071.3712%20102.578%2065.3246C99.5232%2059.278%2098%2052.0213%2098%2043.5544C98%2037.2219%2098.8963%2031.5488%20100.693%2026.531C102.486%2021.5153%20105.019%2017.2659%20108.285%2013.7784C111.554%2010.293%20115.378%207.6251%20119.758%205.77463C124.138%203.9263%20128.951%203%20134.193%203C139.721%203%20144.319%204.01381%20147.98%206.04142C151.642%208.06904%20154.622%2010.2567%20156.921%2012.6045L151.534%2019.0075C149.522%2016.9436%20147.172%2015.202%20144.479%2013.7784C141.785%2012.3569%20138.463%2011.644%20134.514%2011.644C129.199%2011.644%20124.567%2012.9246%20120.62%2015.4858C116.669%2018.047%20113.618%2021.6946%20111.463%2026.4243C109.309%2031.1582%20108.232%2036.7608%20108.232%2043.2321C108.232%2049.8507%20109.255%2055.5579%20111.302%2060.3601C113.348%2065.1624%20116.345%2068.8612%20120.297%2071.4587C124.246%2074.0562%20129.022%2075.3517%20134.624%2075.3517C137.425%2075.3517%20140.098%2074.944%20142.649%2074.1266C145.198%2073.3091%20147.264%2072.1886%20148.843%2070.765V50.2733H132.039V42.0561H158V74.9248C155.415%2077.5564%20152.021%2079.7271%20147.82%2081.4345C143.621%2083.1463%20138.898%2084%20133.657%2084Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M177%2084V5H187.102L215.909%2054.7948L224.401%2071.069H224.938C224.579%2067.1179%20224.257%2062.9858%20223.971%2058.6747C223.685%2054.3637%20223.543%2050.1604%20223.543%2046.0649V5H233V84H222.788L194.087%2034.0996L185.597%2017.9332H185.167C185.384%2021.8864%20185.631%2025.928%20185.922%2030.058C186.208%2034.1923%20186.349%2038.3417%20186.349%2042.5061V84H177Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M244%2084L270.865%205H282.023L309%2084H298.383L284.517%2039.8117C283.069%2035.2851%20281.698%2030.8491%20280.4%2026.5014C279.102%2022.1537%20277.802%2017.681%20276.502%2013.0811H276.067C274.84%2017.681%20273.558%2022.1537%20272.221%2026.5014C270.884%2030.8491%20269.53%2035.2851%20268.158%2039.8117L254.077%2084H244ZM257.975%2059.8581V51.9926H294.592V59.8581H257.975Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M330.979%2084V13.4066H307V5H365V13.4066H341.021V84H330.979Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M406.999%2084C402.881%2084%20399.059%2083.4324%20395.531%2082.3035C392.002%2081.1768%20388.932%2079.3045%20386.323%2076.693C383.712%2074.0816%20381.674%2070.623%20380.205%2066.315C378.732%2062.0113%20378%2056.7842%20378%2050.6442V5H388.145V50.8539C388.145%2057.068%20388.99%2061.9563%20390.681%2065.5208C392.37%2069.0874%20394.631%2071.629%20397.46%2073.1476C400.29%2074.6661%20403.472%2075.4223%20406.999%2075.4223C410.6%2075.4223%20413.838%2074.6661%20416.703%2073.1476C419.568%2071.629%20421.866%2069.0874%20423.595%2065.5208C425.319%2061.9563%20426.186%2057.068%20426.186%2050.8539V5H436V50.6442C436%2056.7842%20435.283%2062.0113%20433.848%2066.315C432.416%2070.623%20430.376%2074.0816%20427.73%2076.693C425.083%2079.3045%20421.993%2081.1768%20418.467%2082.3035C414.938%2083.4345%20411.114%2084%20406.999%2084Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M457%2083.9957V5H481.44C486.776%205%20491.489%205.70051%20495.581%207.10368C499.67%208.50254%20502.891%2010.8218%20505.239%2014.0549C507.587%2017.288%20508.759%2021.6376%20508.759%2027.0951C508.759%2032.3413%20507.585%2036.706%20505.239%2040.1892C502.889%2043.6745%20499.67%2046.261%20495.581%2047.9508C491.489%2049.6385%20486.776%2050.4834%20481.44%2050.4834H466.819V84H457V83.9957ZM466.821%2042.5041H479.946C486.063%2042.5041%20490.759%2041.2281%20494.035%2038.6782C497.305%2036.1284%20498.944%2032.2659%20498.944%2027.0929C498.944%2021.9221%20497.305%2018.2946%20494.035%2016.2081C490.761%2014.126%20486.065%2013.0828%20479.946%2013.0828H466.821V42.5041ZM499.905%2083.9957L479.412%2047.8926L487.203%2042.6119L511%2083.9957H499.905Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M525%2084V5H570.806V13.4066H534.988V38.1951H565.16V46.7094H534.988V75.4857H572V84H525Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M672%200H651.03V58.6511C651.03%2059.1172%20651.011%2059.5532%20651%2060C655.744%2058.0196%20662.796%2055.3023%20671.998%2052.3317V0H672Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M648.329%2071.7211C646.306%2074.107%20643.309%2075.2999%20639.342%2075.2999C636.894%2075.2999%20634.513%2074.5462%20632.19%2073.0389C629.868%2071.5316%20627.864%2069.1055%20626.178%2065.7564L612%2076.3011C615.292%2081.8243%20619.361%2085.9918%20624.215%2088.7924C629.067%2091.5975%20635.037%2093%20642.128%2093C648.963%2093%20654.595%2091.5328%20659.027%2088.6051C663.456%2085.6774%20666.725%2081.7462%20668.834%2076.8028C670.943%2071.8683%20672%2066.4298%20672%2060.4852V57C662.166%2060.4049%20655.077%2063.4285%20650.874%2065.3528C650.389%2068.1601%20649.546%2070.2896%20648.329%2071.7211Z%22%20fill%3D%22%23DD252B%22%2F%3E%0A%3Cpath%20d%3D%22M717.268%2030.1165C718.542%2025.0381%20719.757%2020.0776%20720.908%2015.2416H721.403C722.638%2019.9969%20723.872%2024.9333%20725.105%2030.051C725.848%2033.1338%20726.611%2036.1053%20727.383%2039.0243C731.71%2038.2777%20736.17%2037.5681%20740.799%2036.9196C742.173%2036.7275%20743.586%2036.5441%20745%2036.3607L733.499%200H709.551L695%2046C700.964%2044.4433%20707.42%2042.9194%20714.349%2041.4893C715.312%2037.8104%20716.281%2034.0442%20717.268%2030.1165Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M728.03%2042.6273C728.166%2043.1093%20728.296%2043.6149%20728.435%2044.0905L730.787%2052.8115H710.597L712.56%2045.5407C705.451%2047.0233%20698.861%2048.5962%20692.819%2050.1928L680%2090H700.564L706.478%2068.0759H734.904L740.818%2090H762L745.898%2040C744.31%2040.2001%20742.734%2040.4024%20741.199%2040.6111C736.655%2041.2308%20732.276%2041.9129%20728.03%2042.6273Z%22%20fill%3D%22%23DD252B%22%2F%3E%0A%3Cpath%20d%3D%22M814.201%2040.1434C811.336%2042.6274%20807.039%2043.8693%20801.314%2043.8693H791.004V37C784.048%2037.175%20777.377%2037.4844%20771%2037.9091V90H791.004V59.3664H802.419C808.881%2059.3664%20814.815%2058.308%20820.215%2056.1825C825.616%2054.0613%20829.93%2050.7771%20833.161%2046.3341C834.931%2043.8992%20836.2%2041.0845%20837%2037.9198C830.054%2037.478%20823.287%2037.1707%20816.74%2037.0064C816.082%2038.1972%20815.238%2039.2471%20814.201%2040.1434Z%22%20fill%3D%22%23DD252B%22%2F%3E%0A%3Cpath%20d%3D%22M791.003%2016.1136H800.698C806.504%2016.1136%20810.92%2017.1068%20813.95%2019.091C816.975%2021.073%20818.488%2024.5459%20818.488%2029.5053C818.488%2030.7694%20818.388%2031.9519%20818.194%2033.0619C824.528%2033.2424%20831.053%2033.5574%20837.751%2034C837.908%2032.5598%20838%2031.0689%20838%2029.5053C838%2022.0684%20836.383%2016.1973%20833.15%2011.9008C829.92%207.60645%20825.583%204.54757%20820.144%202.72854C814.702%200.911716%20808.629%200%20801.923%200H771V33.9449C777.38%2033.5111%20784.047%2033.1918%20791%2033.0156L791.003%2016.1136Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M870.944%2029.855C872.163%2024.8203%20873.326%2019.9026%20874.428%2015.1082H874.902C876.084%2019.8225%20877.266%2024.7164%20878.445%2029.79C879.094%2032.5736%20879.755%2035.2727%20880.424%2037.9221C886.502%2038.8247%20892.691%2039.8442%20899%2041L886.479%200H863.559L853%2034.5758C858.339%2035.0844%20863.785%2035.6926%20869.337%2036.3983C869.868%2034.2511%20870.403%2032.0822%20870.944%2029.855Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M882.256%2044.4791L884.55%2053.1267H864.853L867.148%2044.4791C867.463%2043.2779%20867.787%2042.0276%20868.107%2040.7986C862.344%2040.0988%20856.696%2039.5014%20851.16%2039L835%2090H855.062L860.832%2068.2605H888.564L894.335%2090H915L900.983%2045.7615C894.448%2044.5816%20888.036%2043.5361%20881.747%2042.6165C881.921%2043.231%20882.084%2043.8732%20882.256%2044.4791Z%22%20fill%3D%22%23DD252B%22%2F%3E%0A%3Cpath%20d%3D%22M943.942%2040.9978C943.289%2035.287%20942.76%2029.9848%20942.357%2025.0891H942.966L951.998%2044.6717L956.958%2054.1196C963.546%2055.9413%20970.23%2057.9%20977%2060L970.67%2046.0174L946.259%200H926V46.387C932.146%2047.7587%20938.385%2049.25%20944.716%2050.8674C944.557%2047.6261%20944.323%2044.35%20943.942%2040.9978Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M979.685%2065.4582H979.073L978.764%2064.7893C972.086%2062.7227%20965.499%2060.8015%20959%2059L975.639%2090H996V70.3905C990.494%2068.5291%20985.034%2066.7468%20979.64%2065.0692C979.657%2065.1974%20979.672%2065.3321%20979.685%2065.4582Z%22%20fill%3D%22%23DD252B%22%2F%3E%0A%3Cpath%20d%3D%22M926%2090H944V57.6191C944%2056.9001%20943.948%2056.1536%20943.936%2055.4261C937.869%2053.8295%20931.889%2052.3555%20926.002%2051V90H926Z%22%20fill%3D%22%23DD252B%22%2F%3E%0A%3Cpath%20d%3D%22M996%200H977V32.9708C977%2038.3284%20977.307%2043.9042%20977.919%2049.7026C978.324%2053.5236%20978.716%2057.0981%20979.103%2060.4782C984.671%2062.2136%20990.31%2064.0658%20996%2066V0Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E") } */ .japanmainimgdiv > .text > div > h4 > span:last-child > span{} .japanmainimgdiv > .text > div > p{ display:none;} .japanmainimgdiv > .text > div > p > span{ font-size:20px; color:#fff;} .japanmainimgdiv > .text > div > nav{ margin-top:56px;} .japanmainimgdiv > .text > div > nav > a{ margin-left:13px; font-size:15.75px; font-weight:700; text-transform:uppercase; background-color:#fff; color:#16171A; padding:11px 42px; display:inline-block;} .Japan form{ position:relative;} .Japan form > .text{ left:0; top:0; z-index:2; width:100%; height:100%; display:inline-block;} .signaturediv > div{ width:90%; max-width:1340px; margin:auto;} .signaturediv > div > h3{ margin-top:105px; margin-bottom:30px;} .signaturediv > div > h3 > span{ font-size:40px; color:#002f5c; display:block;} .signaturediv > div > aside > a{ font-size:14px; color:#757575; background-color:#f5f5f5; display:inline-block; padding:12px 20px; border-radius:50px;} .signaturediv > div > aside > a:before{ content:"#";} .signaturediv > div > div > ul{ display:flex; flex-wrap:wrap; gap:30px; margin:15px 0;} .signaturediv > div > div > ul > li{ border:1px solid #032a53; border-radius:16px;} .signaturediv > div > div > ul > li > .img > img{width:310px; height:250px;} .signaturediv > div > div > ul > li > .text{ padding:16px 22px;} .signaturediv > div > div > ul > li > .text > h4{ font-size:15px;} .signaturediv > div > div > ul > li > .text > p{ font-size:12px;} .signaturediv > div > div > ul > li > .text > div > div{ font-size:18px;} #popup_positiondiv0{ } #popup_positiondiv0 > ul{ display:flex; gap:4px 11px; padding:20px;} #popup_positiondiv0 > ul > li > input[type=radio]{ display:none;} #popup_positiondiv0 > ul > li > input[type=radio] + label{ font-size:16px; font-weight:600; color:#7F7E7E; background-color:#E2E2E2; padding:7.7px 26px; display:inline-block;} #popup_positiondiv0 > ul > li > input[type=radio]:checked + label{ color:#fff; background-color:#252525;} #popup_positiondiv0 > div{ width:100%; display:inline-block; padding:0 20px;} #popup_positiondiv0 > div > h4{ font-size:14px; margin:16px 0;} #popup_positiondiv0 > div > ul{ display:flex; flex-wrap:wrap; gap:4px 15px; } #popup_positiondiv0 > div > ul > li > input[type=radio]{ display:none;} #popup_positiondiv0 > div > ul > li > input[type=radio] + label{ font-size:18px; font-weight:600; color:#000; border:2px solid #000; padding:16px 20px; display:inline-block;} #popup_positiondiv0 > div > ul > li > input[type=radio] + label:hover{color:#fff; border:2px solid #0062FF; background-color:#0062FF;} #popup_positiondiv0 > div > ul > li > input[type=radio]:checked + label{ background-color:#000; color:#fff; border:2px solid #000;} #popup_positiondiv0 > aside{ border-top:1px solid #959595; padding:30px; margin-top:30px; width:100%; display:inline-block; } #popup_positiondiv0 > aside > ul > li{ font-size:15px; font-weight:400; margin-left:20px; position:relative;} #popup_positiondiv0 > aside > ul > li:before{ content:"※"; position:absolute; left:-20px; top:0;} #popup_positiondiv0 > aside > ul > li > ul{ margin-top:10px;} #popup_positiondiv0[data-type='0'] > .type0{ display:block;} #popup_positiondiv0[data-type='0'] > .type1{ display:none;} #popup_positiondiv0[data-type='1'] > .type0{ display:none;} #popup_positiondiv0[data-type='1'] > .type1{ display:block;} #popup_optionsdiv0{ max-width:640px;} #popup_optionsdiv0 > div{ padding:30px 70px;} #popup_optionsdiv0 > div > h3 > span{ font-size:18px; font-weight:600;} #popup_optionsdiv0 > div > aside{ margin:53px auto;} #popup_optionsdiv0 > div > aside > ul > li{ font-size:15px; font-weight:400; margin-left:18px; position:relative;} #popup_optionsdiv0 > div > aside > ul > li:before{ content:"※"; position:absolute; left:-18px; top:0;} #popup_optionsdiv0 > div > aside > ul > li > ul > li > span{ color:#0062FF;} #popup_optionsdiv0 > div > nav{ display:flex; justify-content:center; } #popup_optionsdiv0 > div > nav > a{ padding:13px 0; width:100%; display:flex; gap:0 8px; background-color:#000; justify-content:center; } #popup_optionsdiv0 > div > nav > a:hover{ background-color:#0062FF;} #popup_optionsdiv0 > div > nav > a > span{ font-size:18px; font-weight:600; color:#fff;} #popup_optionsdiv0 > div > table{ table-layout:fixed; margin-top:40px; width:100%;} #popup_optionsdiv0 > div > table > thead > tr > td{ text-align:center;} #popup_optionsdiv0 > div > table > thead > tr > td:nth-child(2){ width:108px;} #popup_optionsdiv0 > div > table > thead > tr > td:nth-child(3){ width:108px;} #popup_optionsdiv0 > div > table > thead > tr > td:nth-child(4){ width:108px;} #popup_optionsdiv0 > div > table > thead > tr > td > h4{ font-weight:normal; font-size:17px;} #popup_optionsdiv0 > div > table > thead > tr > td > p{ font-size:11px; color:#939393;} #popup_optionsdiv0 > div > table > tbody > tr:nth-child(3){ border-top:1px solid #BFBFC0;} #popup_optionsdiv0 > div > table > tbody > tr:nth-child(2) > td{ padding-bottom:16px;} #popup_optionsdiv0 > div > table > tbody > tr:nth-child(3) > td{ padding-top:16px;} #popup_optionsdiv0 > div > table > tbody > tr > td{ text-align:center;} #popup_optionsdiv0 > div > table > tbody > tr > td > h4{ font-size:18px; font-weight:400;} #popup_optionsdiv0 > div > table > tbody > tr > td > p{ font-size:12px; font-weight:400; color:#848C94;} #popup_optionsdiv0 > div > table > tbody > tr > td > select{ font-size:17px; border:0; text-align:center; -webkit-appearance: none; /* Chrome, Safari, Opera */ -moz-appearance: none; /* Firefox */ appearance: none; /* 표준 */ /* background: transparent url('your-custom-icon.png') no-repeat right center;*/ padding-right: 20px; /* 화살표를 숨기고 여백을 추가 */ } .numbercontrolul{ display:flex; align-items:center; justify-content:center;} .numbercontrolul > li > input[type=number]{ border:0; width:45px; text-align:center; font-size:28px; font-weight:700;} .numbercontrolul > li > a{ display:flex; width:25px; height:25px; justify-content:center; align-items:center; font-size:0; background-repeat:no-repeat; background-size:contain; background-repeat:no-repeat; font-weight:0; } .numbercontrolul > li > a.plusbtn{ pointer-events:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22%23f2f2f4%22%20r%3D%2296%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22none%22%20r%3D%2296%22%20stroke%3D%22%23f2f2f4%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%228%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23585858%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%2288%22%20x2%3D%22168%22%20y1%3D%22128%22%20y2%3D%22128%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23585858%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%22128%22%20x2%3D%22128%22%20y1%3D%2288%22%20y2%3D%22168%22%2F%3E%0A%3C%2Fsvg%3E");} .numbercontrolul > li > a.plusbtn.active{ pointer-events:auto;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22%23FFFFFF%22%20r%3D%2296%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22none%22%20r%3D%2296%22%20stroke%3D%22%23f2f2f4%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%228%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23585858%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%2288%22%20x2%3D%22168%22%20y1%3D%22128%22%20y2%3D%22128%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23585858%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%22128%22%20x2%3D%22128%22%20y1%3D%2288%22%20y2%3D%22168%22%2F%3E%0A%3C%2Fsvg%3E")} .numbercontrolul > li > a.plusbtn.active:hover{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22%23FFFFFF%22%20r%3D%2296%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22none%22%20r%3D%2296%22%20stroke%3D%22%23004cff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%228%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23004cff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%2288%22%20x2%3D%22168%22%20y1%3D%22128%22%20y2%3D%22128%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23004cff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%22128%22%20x2%3D%22128%22%20y1%3D%2288%22%20y2%3D%22168%22%2F%3E%0A%3C%2Fsvg%3E");} .numbercontrolul > li > a.minusbtn{ pointer-events:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22%23f4f4f6%22%20r%3D%2296%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22none%22%20r%3D%2296%22%20stroke%3D%22%23f4f4f6%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%228%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%235d5d5f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%2288%22%20x2%3D%22168%22%20y1%3D%22128%22%20y2%3D%22128%22%2F%3E%0A%3C%2Fsvg%3E");} .numbercontrolul > li > a.minusbtn.active{ pointer-events:auto;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22%23FFFFFF%22%20r%3D%2296%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22none%22%20r%3D%2296%22%20stroke%3D%22%23f4f4f6%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%228%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%235d5d5f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%2288%22%20x2%3D%22168%22%20y1%3D%22128%22%20y2%3D%22128%22%2F%3E%0A%3C%2Fsvg%3E");} .numbercontrolul > li > a.minusbtn.active:hover{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22%23FFFFFF%22%20r%3D%2296%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20fill%3D%22none%22%20r%3D%2296%22%20stroke%3D%22%23004CFF%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%228%22%2F%3E%0A%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23004CFF%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20x1%3D%2288%22%20x2%3D%22168%22%20y1%3D%22128%22%20y2%3D%22128%22%2F%3E%0A%3C%2Fsvg%3E");} #popup_optionsdiv0 > div > ul{ border-top:1px solid #959595; border-bottom:1px solid #959595; padding:30px 0; width:100%;} #popup_optionsdiv0 > div > ul > li{ display:flex; gap:4px 10px; align-items:center; width:100%;} #popup_optionsdiv0 > div > ul > li > label{ text-align:center; flex-grow:1;} #popup_optionsdiv0 > div > ul > li > label > h4{ font-size:17px; font-weight:normal; } #popup_optionsdiv0 > div > ul > li > label > p{ font-size:16px;} #popup_optionsdiv0 > div > ul > li > div{ width:325px; display:flex;} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* 파이어폭스에서 화살표 숨기기 */ input[type="number"] { -moz-appearance: textfield; } .calendarlist > .calendar_title{ display:inline-block; width:100%;} .calendarlist > .calendar_title > h3{ display:inline-block; text-align:center; width:100%; padding:4px 0;} .calendarlist > .calendar_title > h3{line-height:1; float:left;} .calendarlist > .calendar_title > h3 > span{ line-height:1; font-size:20px; font-weight:800;} .calendar_bodyer_ul{ width:100%;} .calendar_bodyer_ul > li > a{ opacity:0.2; pointer-events:none; text-decoration:line-through; position:relative;} .calendar_bodyer_ul > li > a > span{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; position:relative; font-size:18px; font-weight:500;} .calendar_bodyer_ul > li.selected > a{ position:relative;} .calendar_bodyer_ul > li.selected > a > span{ /*background-color:#0063e4;*/ background-color:#000; color:#fff; text-decoration:none;} .calendar_bodyer_ul > li.dayshover > a{ /*background-color:#f0fbff;*/ background-color:#E6E6E6;} .calendar_bodyer_ul > li.fdays > a > span{ /*background-color:#0063e4;*/ background-color:#000; color:#fff; text-decoration:none;} .calendar_bodyer_ul > li.ldays > a > span{ /*background-color:#0063e4;*/ background-color:#000; color:#fff; text-decoration:none;} .calendar_bodyer_ul > li.fdays.hoverdisable > a{ position:relative; border-radius:0 50% 50% 0;} .calendar_bodyer_ul > li.ldays.hoverdisable > a{ position:relative; border-radius:50% 0 0 50%;} #shedule_calendar_div[data-selectcomplete=''][data-selectday2=''] .calendar_bodyer_ul > li.fdays > a{ background: linear-gradient(to right, #eee 50%, #f0fbff 50%); } #shedule_calendar_div[data-selectcomplete=''][data-selectday1=''] .calendar_bodyer_ul > li.ldays > a{ background: linear-gradient(to right, #f0fbff 50%, #eee 50%); } #shedule_calendar_div[data-selectcomplete='1'] .calendar_bodyer_ul > li.fdays > a{ background: linear-gradient(to right, transparent 50%, #f0fbff 50%); } #shedule_calendar_div[data-selectcomplete='1'] .calendar_bodyer_ul > li.ldays > a{ background: linear-gradient(to right, #f0fbff 50%, transparent 50%); } #shedule_calendar_div .calendar_bodyer_ul > li.hoverdisable > a{ background-color:#eee;} /* #shedule_calendar_div .calendar_bodyer_ul > li.hoverdisable{ background: repeating-linear-gradient(transparent, transparent 0px, #eee 0, #eee 38px, transparent 0,transparent 100px);} */ #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li.hoverdisable > a{ pointer-events:none !important;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li.hoverdisable > a{ pointer-events:none !important;} #shedule_calendar_div[data-selected='2'] .calendar_bodyer_ul > li.hoverdisable > a{ pointer-events:none !important;} #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li[data-send='true'][data-sendclient='0'] > a{ color:#949494 !important; pointer-events:none !important;} #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li[data-send='true'][data-sendclient='0'] > a:after{ content:"객실없음";} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li[data-recv='true'][data-recvclient='0'] > a{ color:#949494 !important; pointer-events:none !important;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li[data-recv='true'][data-recvclient='0'] > a:after{ content:"객실없음";} #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li.selected[data-send='true'][data-sendclient='0'] > a:after{ content:"";} #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li.selected[data-recv='true'][data-recvclient='0'] > a:after{ content:"";} #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li[data-send='false'] > a{ color:#e7e7e7; opacity:1; pointer-events:none; text-decoration:line-through; pointer-events:none ;} #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li[data-send='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li[data-recv='false'] > a{ color:#e7e7e7; opacity:1; pointer-events:none; text-decoration:line-through; pointer-events:none;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li[data-recv='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li.selected[data-send='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='0'] .calendar_bodyer_ul > li.selected[data-recv='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li.selected[data-send='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li.selected[data-send='false'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li.selected[data-send='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li.selected[data-send='false'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li.selected[data-recv='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='1'] .calendar_bodyer_ul > li.selected[data-recv='false'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='2'] .calendar_bodyer_ul > li.selected[data-send='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='2'] .calendar_bodyer_ul > li.selected[data-send='false'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='2'] .calendar_bodyer_ul > li.selected[data-recv='true'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #shedule_calendar_div[data-selected='2'] .calendar_bodyer_ul > li.selected[data-recv='false'] > a{ opacity:1; pointer-events:auto; text-decoration:none;} #popup_calendardiv0{ max-width:880px;} #popup_calendardiv0 > div{ padding:30px;} #popup_calendardiv0 > div > h3{ margin-bottom:16px;} #popup_calendardiv0 > div > h3 > span{ font-size:17px; font-weight:700;} #popup_calendardiv0 > div > aside{ margin:auto; margin-bottom:15px; width:90%;} #popup_calendardiv0 > div > aside > ul{ margin-top:15px;} #popup_calendardiv0 > div > aside > ul > li{ font-size:15px; font-weight:400; margin-left:18px; position:relative;} #popup_calendardiv0 > div > aside > ul > li:before{ content:"※"; position:absolute; left:-18px; top:0;} #popup_calendardiv0 > div > nav{ display:flex; justify-content:center; } #popup_calendardiv0 > div > nav > a{ padding:19px 0; width:90%; display:flex; gap:0 8px; background-color:#000; color:#fff; justify-content:center; } #popup_calendardiv0 > div > nav > a:hover{ background-color:#0062FF;} #popup_calendardiv0 > div > nav > a > span{ font-size:18px; font-weight:600; color:#fff;} #popup_calendardiv0 > div > nav > a.popupcalendarselectbtn:after{ content:""; font-size:18px; font-weight:600;} #popup_calendardiv0 > div > nav > a.popupcalendarselectbtn.active:after{ content:" 선택완료";} .calendar_content{ display:flex; flex-direction: column; gap:8px; width:100%;} .calendar_content > ul{ /* display:flex; flex-wrap:wrap; justify-content:center;*/ display: grid; grid-template-columns: repeat(7, 1fr); gap:0; width:280px; margin:auto;} .calendar_content > ul > li{ width:40px; text-align:center; height:50px; position:relative;} .calendar_content > ul > li > span{ display:flex; font-size:14px; font-weight:400; width:40px; height:40px; justify-content:center; align-items:center; } .calendar_content > ul > li > a{ display:flex; font-size:14px; width:40px; height:40px; justify-content:center; align-items:center; position:relative;} .calendar_content > ul > li > a:after{ content:""; position:absolute; top:100%; left:50%; margin-left:-60px; width:120px; text-align:center; font-size:10px; color:#949494; } .calendar_content > ul > li.sat > a ,.calendar_content > ul > li.sat > span{ color:#00f;} .calendar_content > ul > li.sun > a ,.calendar_content > ul > li.sun > span{ color:#f00;} .calendar_content > ul > li.holi > a ,.calendar_content > ul > li.holi > span{ color:#f00;} /* ::part를 사용한 네비게이션 버튼 스타일링 */ swiper-container::part(button-next), swiper-container::part(button-prev) { color: #626264; /* 색상 변경 */ top: 25px; /* 위치를 top 0으로 설정 */ z-index: 10; /* 버튼이 다른 요소 위에 오도록 설정 */ width:15px; height:25px; } /* 버튼 위치 조정 */ swiper-container::part(button-next) { right: 10px; } swiper-container::part(button-prev) { left: 10px; } .shipinfo{ border-top:1px solid #ddd; } .shipinfo > li{ display:flex; border-bottom:1px solid #ddd;} .shipinfo > li > label{ width:80px; padding:6px 10px; background-color:#fff; font-size:26px; font-weight:600;} .shipinfo > li > div{ width:calc(100% - 112px); padding:6px; font-size:26px;} .japantop6{ width:90%; max-width:1560px; margin:80px auto;} .japantop6 > div > .title{ display:flex; flex-direction:column; gap:0; align-items:flex-start; margin:22px 0; } .japantop6 > div > .title > h3{ order:2; line-height:1; margin-top:-5px;} .japantop6 > div > .title > h3 > span{ font-size:40px; font-weight:700;} .japantop6 > div > .title > h3 > span > span{font-size:40px; font-weight:700; color:#586E88;} .japantop6 > div > .title > p{ order:1; line-height:1;} .japantop6 > div > .title > p > span{ font-size:20px; font-weight:400;} .japantop6 > div .content{ display:flex;} .japantop6 > div[data-search='false'] .content{ gap:0;} .japantop6 > div[data-search='false'] .content > nav{ width:0;} .japantop6 > div[data-search='false'] .content > ul{ width:100%;} .japantop6 > div[data-search='true'] .content{ gap:10px;} .japantop6 > div[data-search='true'] .content > nav{ width:200px; } .japantop6 > div[data-search='true'] .content > ul{ width:calc(100% - 200px);} .japantop6 .content{ justify-content:space-between; } .japantop6 .content > nav{ transition-duration:0.5s;} .japantop6 .content > nav > div{ position: sticky; top: 0; background-color: yellow;} .japantop6 .content > ul{ display:flex; flex-wrap:wrap; gap:30px 1px; transition-duration:0.5s; justify-content:flex-start; align-items:flex-start; } .japantop6 .content > ul > li{ flex-grow:1; width:100%; height:590px; overflow:hidden; border:2px solid #f2f2f2; position:relative;} .japantop6 .content > ul > li:hover{ border:2px solid #000;} .japantop6 .content > ul > li > div > .img{ transition-duration:0.5s;} .japantop6 .content > ul > li > div > .img > img{ width:100%; height:286px; object-fit:cover; transition-duration:0.5s;} .japantop6 .content > ul > li > div > .text{ padding:17px 20px;} .japantop6 .content > ul > li > div > .text > aside > span{ font-size:14px; font-weight:400;} .japantop6 .content > ul > li > div > .text > h4{ width:100%; height:80px; display: -webkit-box; /* Flexbox처럼 동작하게 설정 */ -webkit-box-orient: vertical; /* 박스를 세로로 배치 */ overflow: hidden; /* 넘친 텍스트 숨기기 */ -webkit-line-clamp: 2; /* 두 줄까지만 표시 */ text-overflow: ellipsis; /* 넘친 텍스트에 '...' 추가 */ } .japantop6 .content > ul > li > div > .text > h4 > span{ font-size:23px; font-weight:700;} .japantop6 .content > ul > li > div > .text > ul > li{ font-size:15px; font-weight:400; margin-left:26px; position:relative;} .japantop6 .content > ul > li > div > .text > ul > li:before{ content:""; width:22px; height:22px; display:inline-block; position:absolute; left:-26px; top:calc(50% - 11px); background-repeat:no-repeat; background-size:contain;} .japantop6 .content > ul > li > div > .text > .price{ font-size:22px; font-weight:700; text-align:right;} .japantop6 .content > ul > li > div > .text > .price:before{ content:"from"; font-size:15.63px; font-weight:400; margin-right:4.36px;} .japantop6 .content > ul > li > div > nav > a{ position:absolute; left:0; top:0; width:100%; height:100%;} .nowgo{ width:90%; max-width:1560px; margin:80px auto;} .nowgo > div{ display:flex; flex-wrap:wrap; justify-content:space-between;} .nowgo > div > .title{ display:flex; flex-direction:column; gap:0; align-items:flex-start; margin:22px 0;} .nowgo > div > .title > h3{ order:2; line-height:1; margin-top:-5px;} .nowgo > div > .title > h3 > span{ font-size:40px; font-weight:700;} .nowgo > div > .title > h3 > span > span{font-size:40px; font-weight:700; color:#586E88;} .nowgo > div > .title > p{ order:1; line-height:1;} .nowgo > div > .title > p > span{ font-size:20px; font-weight:400;} .nowgo > div > .morenav{ margin:22px 0; display:flex; align-items:flex-end; } .nowgo > div > .morenav > a{ font-size:18px; font-size:700; display:flex; align-items:center;} .nowgo > div .content{ display:flex;} .nowgo > div[data-search='false'] .content{ gap:0;} .nowgo > div[data-search='false'] .content > nav{ width:0;} .nowgo > div[data-search='false'] .content > ul{ width:100%;} .nowgo > div[data-search='true'] .content{ gap:10px;} .nowgo > div[data-search='true'] .content > nav{ width:200px; } .nowgo > div[data-search='true'] .content > ul{ width:calc(100% - 200px);} .nowgo .content{ justify-content:space-between; } .nowgo .content > nav{ transition-duration:0.5s;} .nowgo .content > nav > div{ position: sticky; top: 0; background-color: yellow;} .nowgo .content > ul{ display:flex; flex-wrap:wrap; gap:30px 1px; transition-duration:0.5s; justify-content:flex-start; align-items:flex-start; } .nowgo .content > ul > li{ flex-grow:1; width:100%; height:590px; overflow:hidden; border:2px solid #f2f2f2; position:relative;} .nowgo .content > ul > li:hover{ border:2px solid #000;} .nowgo .content > ul > li > div > .img{ transition-duration:0.5s; position:relative;} @media screen and (min-width:841px) and (max-width:1000px) { .japantop6 .content > ul > li{ width:calc(50% - 2px); flex-grow:inherit;} .nowgo .content > ul > li{ width:calc(50% - 2px); flex-grow:inherit;} } .nowgo .content > ul > li > div > .img:before{ content:"출발확정"; position:absolute; right:12px; top:12px; display:inline-block; background-color:#000; color:#fff; padding:8px 16px; border-radius:30px;} .nowgo .content > ul > li > div > .img > img{ width:100%; height:286px; object-fit:cover; transition-duration:0.5s;} .nowgo .content > ul > li > div > .text{ padding:17px 20px;} .nowgo .content > ul > li > div > .text > aside > span{ font-size:14px; font-weight:400;} .nowgo .content > ul > li > div > .text > h4{ width:100%; height:80px; display: -webkit-box; /* Flexbox처럼 동작하게 설정 */ -webkit-box-orient: vertical; /* 박스를 세로로 배치 */ overflow: hidden; /* 넘친 텍스트 숨기기 */ -webkit-line-clamp: 2; /* 두 줄까지만 표시 */ text-overflow: ellipsis; /* 넘친 텍스트에 '...' 추가 */ } .nowgo .content > ul > li > div > .text > h4 > span{ font-size:23px; font-weight:700;} .nowgo .content > ul > li > div > .text > ul > li{ font-size:15px; font-weight:400; margin-left:26px; position:relative;} .nowgo .content > ul > li > div > .text > ul > li:before{ content:""; width:22px; height:22px; display:inline-block; position:absolute; left:-26px; top:calc(50% - 11px); background-repeat:no-repeat; background-size:contain;} .nowgo .content > ul > li > div > .text > .price{ font-size:22px; font-weight:700; text-align:right;} .nowgo .content > ul > li > div > .text > .price:before{ content:"from"; font-size:15.63px; font-weight:400; margin-right:4.36px;} .nowgo .content > ul > li > div > nav > a{ position:absolute; left:0; top:0; width:100%; height:100%;} .SignatureRoute{ width:90%; max-width:1560px; margin:80px auto; overflow:hidden;} .SignatureRoute > div{ position:relative;} .SignatureRoute > div > .title{ display:flex; flex-direction:column; align-items:flex-start; margin-top:110px;} .SignatureRoute > div > .title > h3{ order:2; margin-top:-5px; line-height:1;} .SignatureRoute > div > .title > h3 > span{ font-size:40px; font-weight:700;} .SignatureRoute > div > .title > h3 > span > span{font-size:40px; font-weight:700; color:#586E88;} .SignatureRoute > div > .title > p{ order:1; line-height:1;} .SignatureRoute > div > .title > p > span{ font-size:20px; font-weight:400;} /* .SignatureRoute > div > .content .img{ width:100%; position:relative; display:inline-block;} .SignatureRoute > div > .content .img > #japanmap{ width:100%;} .SignatureRoute > div > .content .img > #route1{ position:absolute; visibility:hidden; width:23.5%; left:31%; bottom:14%;} .SignatureRoute > div > .content .img > #route2{ position:absolute; visibility:hidden; width:23.5%; left:41%; bottom:14%;} .SignatureRoute > div > .content .img > #route3{ position:absolute; visibility:hidden; width:23.5%; left:51%; bottom:14%;} */ #features > path[data-active='true']{ fill:#000; stroke:black;} .SignatureRoute > div > .content .img{ width:100%; text-align:right;} .SignatureRoute > div > .content .img > svg{ width:640px; height:600px; margin:0;} .SignatureRoute > div > .content .text{ } .SignatureRoute > div > .content .text > div > ul{ display:flex; gap:16px; } .SignatureRoute > div > .content .text > div > ul > li{ border:2px solid #000; position:relative;} .SignatureRoute > div > .content .text > div > ul > li > a{ font-size:18px; font-weight:400; display:flex; gap:4px 8px; justify-content:space-between; padding:18px; align-items:center;} .SignatureRoute > div > .content .text > div > ul > li > a:after{ content:""; width:10px; height:10px; display:inline-block; border-radius:50%; background-color:#000;} .SignatureRoute > div > .content .text > div > ul > li:hover{ border:2px solid #0062FF;} #hotplediv[data-tab='0'] .text > div > ul > li:nth-child(1) > a:hover{ background-color:#0062FF; } #hotplediv[data-tab='1'] .text > div > ul > li:nth-child(2) > a:hover{ background-color:#0062FF; } #hotplediv[data-tab='2'] .text > div > ul > li:nth-child(3) > a:hover{ background-color:#0062FF; } .SignatureRoute > div > .content .text > div > ul > li:hover > a{ background-color:#0062FF; color:#fff;} .SignatureRoute > div > .content .text > div > ul > li > a:hover:after{ background-color:#fff;} /* .SignatureRoute > div > .content .text > div > ul > li.active > a{ background-color:#000; color:#fff; } .SignatureRoute > div > .content .text > div > ul > li.active > a:after{ background-color:#fff;} */ .SignatureRoute > div > .content .text > div > aside{ margin-top:56px;} .SignatureRoute > div > .content .text > div > aside > ul{ display:none; position:relative; margin-left:44px; display:none;} .SignatureRoute > div > .content .text > div > aside > ul > li{ position:relative; padding:8px 0;} .SignatureRoute > div > .content .text > div > aside > ul > li:before{ content:""; width:1px; height:100%; background-color:#ccc; display:inline-block; position:absolute; left:-30px; top:-18px;} .SignatureRoute > div > .content .text > div > aside > ul > li:first-child:before{ display:none;} .SignatureRoute > div > .content .text > div > aside > ul > li:after{ content:""; width:10px; height:10px; border-radius:50%; background-color:#000; display:inline-block; position:absolute; left:-34px; top:calc(50% - 5px); z-index:1; } .SignatureRoute > div > .content .text > div > aside > ul > li > label{ font-size:18px; font-weight:400;} #hotplediv[data-tab='0'] .text > div > ul > li:nth-child(1) > a{ background-color:#000; color:#fff;} #hotplediv[data-tab='0'] .text > div > ul > li:nth-child(1) > a:after{ background-color:#fff;} #hotplediv[data-tab='0'] .text > div > ul > li:nth-child(1) > a{ background-color:#000; color:#fff;} #hotplediv[data-tab='0'] .text > div > aside > ul:nth-child(1){ display:block;} #hotplediv[data-tab='0'] .img #route1{ visibility:inherit;} #hotplediv[data-tab='1'] .text > div > ul > li:nth-child(2) > a{ background-color:#000; color:#fff;} #hotplediv[data-tab='1'] .text > div > ul > li:nth-child(2) > a:after{ background-color:#fff;} #hotplediv[data-tab='1'] .text > div > ul > li:nth-child(2) > a{ background-color:#000; color:#fff;} #hotplediv[data-tab='1'] .text > div > aside > ul:nth-child(2){ display:block;} #hotplediv[data-tab='1'] .img #route2{ visibility:inherit;} #hotplediv[data-tab='2'] .text > div > ul > li:nth-child(3) > a{ background-color:#000; color:#fff;} #hotplediv[data-tab='2'] .text > div > ul > li:nth-child(3) > a:after{ background-color:#fff;} #hotplediv[data-tab='2'] .text > div > ul > li:nth-child(3) > a{ background-color:#000; color:#fff;} #hotplediv[data-tab='2'] .text > div > aside > ul:nth-child(3){ display:block;} #hotplediv[data-tab='2'] .img #route3{ visibility:inherit;} .tourstory{ width:90%; max-width:1560px; margin:80px auto;} .tourstory > div > .title{ display:flex; flex-direction:column; gap:0; align-items:flex-start; margin:22px 0;} .tourstory > div > .title > h3{ order:2; margin-top:-5px; line-height:1; } .tourstory > div > .title > h3 > span{ font-size:40px; font-weight:700;} .tourstory > div > .title > h3 > span > span{font-size:40px; font-weight:700; color:#586E88;} .tourstory > div > .title > p{ order:1; line-height:1;} .tourstory > div > .title > p > span{ font-size:20px; font-weight:400;} .tourstory .content > ul{ display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 11px; } .tourstory .content > ul > li:nth-child(1){ grid-area: 1 / 1 / 5 / 4; } .tourstory .content > ul > li:nth-child(2){ grid-area: 1 / 4 / 3 / 6; } .tourstory .content > ul > li:nth-child(4){ grid-area: 3 / 4 / 5 / 6; } .tourstory .content > ul > li:nth-child(3){ grid-area: 5 / 1 / 6 / 6; } .tourstory .content > ul > li{ overflow:hidden; border:1px solid #f2f2f2; position:relative;} .tourstory .content > ul > li:first-child{ height:506px;} /* .tourstory .content > ul > li:nth-child(3){ height:506px;} */ .tourstory .content > ul > li:hover{ border:1px solid #000;} .tourstory .content > ul > li > div > .img{ position:absolute; left:0; top:0; z-index:1; width:100%; height:100%;} .tourstory .content > ul > li > div > .img:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); z-index:1; display:inline-block; transition-duration:0.5s;} .tourstory .content > ul > li:hover > div > .img:after{ background-color:rgba(0,0,0,0);} .tourstory .content > ul > li > div > .img > img{ width:100%; height:100%; object-fit:cover; transition-duration:0.5s;} .tourstory .content > ul > li > div > .text{ padding:40px; position:relative; z-index:2; display:flex; align-items:flex-end; height:100%;} .tourstory .content > ul > li > div > .text > div > h4{ } .tourstory .content > ul > li > div > .text > div > h4 > span{ font-size:50px; font-weight:700; color:#fff;} .tourstory .content > ul > li > div > .text > div > p > span{ font-size:25px; font-weight:700; color:#fff;} .tourstory .content > ul > li > nav > a{ position:absolute; padding:30px; width:100%; height:100%; background-color:#0062FF; gap:30px 16px; display:flex; justify-content:center;} .tourstory .content > ul > li > nav > a:hover{ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); background-size: 200% 200%; animation: gradientShift 8s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .tourstory .content > ul > li > nav > a > .linkicon{ width:50px; height:50px; display:inline-block; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M12%200C8.74%200%208.333.015%207.053.072%205.775.132%204.905.333%204.14.63c-.789.306-1.459.717-2.126%201.384S.935%203.35.63%204.14C.333%204.905.131%205.775.072%207.053.012%208.333%200%208.74%200%2012s.015%203.667.072%204.947c.06%201.277.261%202.148.558%202.913.306.788.717%201.459%201.384%202.126.667.666%201.336%201.079%202.126%201.384.766.296%201.636.499%202.913.558C8.333%2023.988%208.74%2024%2012%2024s3.667-.015%204.947-.072c1.277-.06%202.148-.262%202.913-.558.788-.306%201.459-.718%202.126-1.384.666-.667%201.079-1.335%201.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319%201.347%2020.651.935%2019.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012%2015.26%200%2012%200zm0%202.16c3.203%200%203.585.016%204.85.071%201.17.055%201.805.249%202.227.415.562.217.96.477%201.382.896.419.42.679.819.896%201.381.164.422.36%201.057.413%202.227.057%201.266.07%201.646.07%204.85s-.015%203.585-.074%204.85c-.061%201.17-.256%201.805-.421%202.227-.224.562-.479.96-.899%201.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211%200-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844%200-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689%201.379-.898.42-.166%201.051-.361%202.221-.421%201.275-.045%201.65-.06%204.859-.06l.045.03zm0%203.678c-3.405%200-6.162%202.76-6.162%206.162%200%203.405%202.76%206.162%206.162%206.162%203.405%200%206.162-2.76%206.162-6.162%200-3.405-2.76-6.162-6.162-6.162zM12%2016c-2.21%200-4-1.79-4-4s1.79-4%204-4%204%201.79%204%204-1.79%204-4%204zm7.846-10.405c0%20.795-.646%201.44-1.44%201.44-.795%200-1.44-.646-1.44-1.44%200-.794.646-1.439%201.44-1.439.793-.001%201.44.645%201.44%201.439z%22%2F%3E%0A%3C%2Fsvg%3E");} .tourstory .content > ul > li > nav > a > .linktext{ font-size:26px; font-weight:600; color:#fff; display:flex; gap:4px; align-items:center; } .tourstory .content > ul > li > nav > a > .linktext:after{ content:""; transform:rotate(45deg); width:25px; height:25px; display:inline-block; background-size:contain; background-repeat:no-repeat; background-position:center; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20width%3D%221792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1277%20493q-9%2019-29%2019h-224v1248q0%2014-9%2023t-23%209h-192q-14%200-23-9t-9-23v-1248h-224q-21%200-29-19t5-35l350-384q10-10%2023-10%2014%200%2024%2010l355%20384q13%2016%205%2035z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");} .tourstory .content > nav{ width:100%; height:100%; margin:30px 0; display:flex; justify-content:flex-start; align-items:center;} .tourstory .content > nav > a{ font-size:25px; font-weight:400; display:flex; align-items:center;} .tourstory .content > nav > a:after{ content:"+"; color:#fff; background-color:#000; font-size:30px; font-weight:700; width:52px; height:52px; display:flex; justify-content:center; align-items:center; margin-left:16px;} .tourstory .content > nav > a:hover:after{ background-color:#0062FF;} .nowgo .content > ul > li > div > .text > ul > li.position:before ,.japantop6 .content > ul > li > div > .text > ul > li.position:before{ width:16px; height:16px; top:calc(50% - 8px); left:-23px;} .guided:before{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%2015.865L7.72%2015.675C7.505%2015.53%202.47998%2012.075%202.47998%207.37999C2.47998%204.33499%204.95498%201.85999%208%201.85999C11.045%201.85999%2013.52%204.33499%2013.52%207.37999C13.52%2012.07%208.495%2015.53%208.28%2015.675L8%2015.865ZM8%202.85999C5.51%202.85999%203.47998%204.88499%203.47998%207.37999C3.47998%2010.945%206.97%2013.86%208%2014.64C9.025%2013.86%2012.52%2010.945%2012.52%207.37999C12.52%204.88499%2010.49%202.85999%208%202.85999Z%22%20fill%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M8%209.85999C6.62%209.85999%205.5%208.73999%205.5%207.35999C5.5%205.97999%206.62%204.85999%208%204.85999C9.38%204.85999%2010.5%205.97999%2010.5%207.35999C10.5%208.73999%209.38%209.85999%208%209.85999ZM8%205.85999C7.175%205.85999%206.5%206.53499%206.5%207.35999C6.5%208.18499%207.175%208.85999%208%208.85999C8.825%208.85999%209.5%208.18499%209.5%207.35999C9.5%206.53499%208.825%205.85999%208%205.85999Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E"); } .position:before{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.9988%208.63098H3.73032C2.39338%208.63098%201.30564%207.53488%201.30564%206.1871C1.30564%204.84047%202.39338%203.74438%203.73032%203.74438H13.2424H13.6927L13.3746%204.06497L12.1384%205.30998L12.9938%206.17249L15.9638%203.17968V3.05588L12.9897%200.0595703L12.1419%200.866023L12.5661%201.29348L13.3746%202.10753L13.6927%202.42871H13.2424H3.73032C1.70782%202.42871%200.0620077%204.08658%200.0620077%206.12462C0.0620077%208.16323%201.70782%209.82108%203.73032%209.82108H12.0608C13.3983%209.82108%2014.486%2010.9172%2014.486%2012.2644C14.486%2013.6116%2013.3983%2014.7077%2012.0608%2014.7077H0V16.0233H11.9988C14.0213%2016.0233%2015.6671%2014.3649%2015.6671%2012.3269C15.6949%2011.3639%2015.3414%2010.453%2014.6709%209.75745C13.9708%209.031%2013.0222%208.63098%2011.9988%208.63098Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E%0A"); } .days:before{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2222%22%20height%3D%2223%22%20viewBox%3D%220%200%2022%2023%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.66602%207.87123C3.66602%207.00336%204.36957%206.2998%205.23744%206.2998H16.7612C17.6291%206.2998%2018.3327%207.00336%2018.3327%207.87123V18.4784C18.3327%2019.3463%2017.6291%2020.0498%2016.7612%2020.0498H5.23744C4.36957%2020.0498%203.66602%2019.3463%203.66602%2018.4784V7.87123Z%22%20stroke%3D%22%2329292D%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cpath%20d%3D%22M7.92383%2013.2055L10.2822%2015.6487L14.0762%2011.7998%22%20stroke%3D%22%2329292D%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M7.12695%207.38327V4.89209%22%20stroke%3D%22%2329292D%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M14.957%207.38327V4.89209%22%20stroke%3D%22%2329292D%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A");} .bestforyou{ width:90%; max-width:1560px; margin:auto; margin-bottom:80px;} .bestforyou > div > .title{ display:flex; gap:20px; align-items:flex-end; margin:22px 0;} .bestforyou > div > .title > h3 > span{ font-size:40px; font-weight:700;} .bestforyou > div > .title > h3 > span > span{font-size:40px; font-weight:700; color:#586E88;} .bestforyou > div > .title > p > span{ font-size:25px; font-weight:400;} .bestforyou .content > ul{ display:flex; flex-wrap:wrap; gap:30px 1px; transition-duration:0.5s; justify-content:flex-start; align-items:flex-start; } .bestforyou .content > ul > li{ flex-grow:1; width:calc(33% - 4px); height:613px; overflow:hidden; border:2px solid #f2f2f2; position:relative; } .bestforyou .content > ul > li:hover{ border:2px solid #000;} .bestforyou .content > ul > li > div > .img{ position:absolute; left:0; top:0; z-index:1; width:100%; height:100%;} .bestforyou .content > ul > li > div > .img > img{ width:100%; height:100%; object-fit:cover; transition-duration:0.5s;} .bestforyou .content > ul > li > div > .text{ padding:40px; position:relative; z-index:2; display:flex; align-items:flex-end; height:613px;} .bestforyou .content > ul > li > div > .text > div > h4{ line-height:1.06; margin-bottom:8px;} .bestforyou .content > ul > li > div > .text > div > h4 > span{ font-size:50px; font-weight:700; color:#fff; line-height:1.06;} .bestforyou .content > ul > li > div > .text > div > p > span{ font-size:25px; font-weight:700; color:#fff;} .bestforyou .content > ul > li > div > nav > a{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:3} .tour{ width:90%; max-width:1560px; margin:auto; margin-bottom:80px;} .tour > div > .title{ display:flex; gap:20px; align-items:flex-end; margin:22px 0; position:absolute;} .tour > div > .title > h3 > span{ font-size:80px; font-weight:700;} .tour > div > .title > h3 > span > span{font-size:40px; font-weight:700; color:#586E88;} .tour .content > ul{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; gap:2px; transition-duration:0.5s; } .tour .content > ul > li:nth-child(1){ grid-area: 1 / 3 / 2 / 4;} .tour .content > ul > li:nth-child(2){ grid-area: 2 / 2 / 3 / 3;} .tour .content > ul > li:nth-child(3){ grid-area: 2 / 3 / 3 / 4;} .tour .content > ul > li{ height:260px; overflow:hidden; border:1px solid #f2f2f2; position:relative;} .tour .content > ul > li:hover{ border:1px solid #000;} .tour .content > ul > li > div > .img{ position:absolute; left:0; top:0; z-index:1; width:100%; height:100%;} .tour .content > ul > li > div > .img:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); z-index:1; display:inline-block; transition-duration:0.5s;} .tour .content > ul > li:hover > div > .img:after{ background-color:rgba(0,0,0,0);} .tour .content > ul > li > div > .img > img{ width:100%; height:100%; object-fit:cover; transition-duration:0.5s;} .tour .content > ul > li > div > .text{ padding:40px; position:relative; z-index:2; display:flex; align-items:flex-end; height:260px;} .tour .content > ul > li > div > .text > div > h4{ } .tour .content > ul > li > div > .text > div > h4 > span{ font-size:50px; font-weight:700; color:#fff;} .tour .content > ul > li > div > .text > div > p > span{ font-size:25px; font-weight:700; color:#fff;} .tour .content > ul > li > div > nav > a{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:3} .mainsearchdiv{width:100%; display:flex; position:relative; bottom:0; background-color:#E6E6E6; padding:30px 0;} .mainsearchdiv[data-tab='1'] > div{ height:64px; } .mainsearchdiv[data-tab='2'] > div{ height:108px; } .mainsearchdiv[data-tab='1'] .movetype_2_div{ display:none !important;} .mainsearchdiv[data-tab='2'] .movetype_1_div{ display:none !important;} .mainsearchdiv > div{ background-color:#fff; width:1561px; margin:auto; display:flex; transition-duration:0.3s; min-width:1561px;} .mainsearchdiv > div > ul{ display:flex; position:relative; } .mainsearchdiv > div > ul > li{ display:flex; flex-grow:1; align-items:center; position:relative; flex-direction:column;} .mainsearchdiv > div > ul > li > div{ width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center;} .mainsearchdiv > div > ul > li > div > div{ width:100%;} .mainsearchdiv > div > ul > li > div.movetype_1_div{ height:64px;} .mainsearchdiv > div > ul > li > div.movetype_2_div{ height:108px;} .mainsearchRTypeli{ width:194px; border-right:1px solid #B6B6B6; } .mainsearchMTypeli{ width:116px; border-right:1px solid #B6B6B6; } .mainsearchFLPositionli{ width:391px; border-right:1px solid #B6B6B6; } .mainsearchScheduleli{ width:350px; border-right:1px solid #B6B6B6; } .mainsearchOptionsli{ width:324px; } .custom-select{ width:100%; display:inline-block;} .custom-select > .options{ position:absolute; display:none; background-color:#fff; border:1px solid #B6B6B6; z-index:2;} .custom-select.active > .options{ display:block; width:100%;} .custom-select > .select-box > a ,.custom-select > .options > .option > a{ width:100%; display:flex; gap:8px; align-items:center; font-size:17px; font-weight:400; padding:19px 13px; color:#000;} .custom-select > .options > .option[data-disabled='1']{ opacity:0.5;pointer-events:none;} .custom-select > .select-box{ position:relative;} .custom-select > .select-box:after{ content:""; position:absolute; right:21.77px; top:30px; width:15.23px; height:8.7px; background-image:url(https://file.k-friends.kr/data/20250321/074656_0.svg); background-repeat:no-repeat; background-position:center;} .mainsearchRTypeli .custom-select > .select-box > a:before ,.mainsearchRTypeli .custom-select > .options > .option > a:before{ content:""; width:28px; height:28px; display:inline-block; background-repeat:no-repeat; background-size:cover; background-position:center;} .mainsearchMTypeli .custom-select > .select-box > a:before ,.mainsearchMTypeli .custom-select > .options > .option > a:before{ content:""; width:4px; height:28px; display:inline-block; background-repeat:no-repeat; background-size:cover; background-position:center;} /* .custom-select-rtype0:before{ background-image:url(https://file.k-friends.kr/data/20250320/041641_0.svg);} .custom-select-rtype1:before{ background-image:url(https://file.k-friends.kr/data/20250405/073305_0.svg);} .custom-select-rtype2:before{ background-image:url(https://file.k-friends.kr/data/20250405/073305_1.svg);} */ .mainsearchFLPositionli > div > div{ width:100%;} .mainsearchFLPositionli > div > div > ul{ display:flex; flex-grow:1; justify-content:space-around; align-items:center; transition-duration:0.3s; width:100%; } .mainsearchFLPositionli > div > div > ul > li{ width:calc(50% - 14px); text-align:center; } .mainsearchFLPositionli > div > div > ul > li > a{font-size:17px; font-weight:400; color:#000;} .mainsearchFLPositionli > div > div > ul > li.moveli{ width:28px;} .mainsearchFLPositionli > div > div > ul > li.moveli > a{ width:28px; height:28px; display:inline-block; background-repeat:no-repeat; background-size:cover; background-position:center;} .mainsearchFLPositionli > .movetype_1_div > div > ul > li.moveli > a{background-image:url(https://file.k-friends.kr/data/20250429/043555_1.svg);} .mainsearchFLPositionli > .movetype_2_div > div > ul > li.moveli > a{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20style%3D%22enable-background%3Anew%200%200%20128%20128%3B%22%20version%3D%221.1%22%20viewBox%3D%220%200%20128%20128%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%3Cg%3E%0A%3Cpolygon%20points%3D%2279.9%2C98.9%20114.8%2C64%2079.9%2C29.1%2074.2%2C34.8%2099.5%2C60%2036%2C60%2036%2C68%2099.5%2C68%2074.2%2C93.2%20%20%22%20fill%3D%22%2323538f%22%2F%3E%0A%3Crect%20height%3D%228%22%20width%3D%228%22%20x%3D%2216%22%20y%3D%2260%22%20fill%3D%22%2323538f%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");} .mainsearchFLPositionli > .movetype_2_div > div > ul{ height:44px;} .mainsearchScheduleli > div > div > ul > li > a{ display:flex; flex-grow:1; gap:8px; align-items:center; padding:0 13px; position:relative; } .mainsearchScheduleli > div > div > ul > li > a:after{ content:""; position:absolute; right:21.77px; top:calc(50% - 8px); width:15.23px; height:8.7px; background-image:url(https://file.k-friends.kr/data/20250321/074656_0.svg); background-repeat:no-repeat; background-position:center;} .mainsearchScheduleli > div > div > ul > li > a > .linkicon{ background-image:url(https://file.k-friends.kr/data/20250429/043555_0.svg); width:28px; height:28px; display:inline-block; background-repeat:no-repeat; background-size:cover; background-position:center;} .mainsearchScheduleli > div > div > ul > li > a > .linktext{ font-size:17px; font-weight:400; color:#000;} .mainsearchScheduleli > .movetype_2_div > div > ul{ display:flex; flex-direction:column; justify-content:center; height:44px; align-items:center;} .mainsearchScheduleli > .movetype_2_div > div > ul > li{width:100%; } .mainsearchOptionsli > div > div > a{ display:flex; flex-grow:1; gap:8px; align-items:center; padding:0 13px; position:relative; color:#000;} .mainsearchOptionsli > div > div > a:after{ content:""; position:absolute; right:21.77px; top:calc(50% - 8px); width:15.23px; height:8.7px; background-image:url(https://file.k-friends.kr/data/20250321/074656_0.svg); background-repeat:no-repeat; background-position:center;} .mainsearchOptionsli > div > div > a > .linkicon{ order:1; width:28px; height:28px; display:inline-block; background-repeat:no-repeat; background-size:cover; background-position:center;} .mainsearchOptionsli > div > div > a > .linktext{ order:2; font-size:17px; font-weight:400; color:#000;} .mainsearchdiv > div > a{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; gap:13px; background-color:#000;} .mainsearchdiv > div > a > .linkicon{ background-image:url(https://file.k-friends.kr/data/20250320/041641_1.svg); width:28px; height:28px; display:inline-block; background-repeat:no-repeat; background-size:cover; background-position:center;} .mainsearchdiv > div > a > .linktext{ font-size:20px; font-weight:400; color:#fff; display:inline-block; padding-right:28px; } .typeinput_a{ font-weight:500; color:#000;} .typeinput_a[data-value='']{ color:#b6b6b6; font-weight:300;} .typeinput_a > .linktext{ font-weight:500; color:#000;} .typeinput_a[data-value=''] > .linktext{ color:#b6b6b6; font-weight:300;} #type1_fposition_a[data-value='']:before{ content:"출발지";} #type1_lposition_a[data-value='']:before{ content:"도착지";} #type1_fdateldate_a[data-value=''] > .linktext:before{ content:"여행일정";} #type1_options_a[data-value='']:before{ margin-left:35px; content:"탑승객 1명, 차량(바이크) 1";} #type2_fposition1_a[data-value='']:before{ content:"출발지";} #type2_lposition1_a[data-value='']:before{ content:"도착지";} #type2_fdatetext_a[data-value=''] > .linktext:before{ content:"여행일정";} #type2_ldatetext_a[data-value=''] > .linktext:before{ content:"여행일정";} #type2_fposition2_a[data-value='']:before{ content:"출발지";} #type2_lposition2_a[data-value='']:before{ content:"도착지";} #type2_options_a[data-value='']:before{ content:"탑승객 1명, 차량(바이크) 1";} .japanmainimgdiv > .img > img{ width:100%; height:800px; object-fit:cover; object-position:center 60%; transform: scaleX(-1);} .Japan form{ position:relative;} .mainsearchdiv > div{ width:90%; min-width:90%; flex-wrap:wrap;} .mainsearchdiv > div > ul{ flex-wrap:wrap;} .mainsearchdiv > div > ul > li{ border-bottom:1px solid #B6B6B6; border-right:1px solid #B6B6B6;} .mainsearchdiv > div > a{ padding:19px 0; } .mainsearchdiv[data-tab='1'] > div{ height:auto;} .mainsearchdiv[data-tab='2'] > div{ height:auto;} .mainsearchRTypeli{ width:50%;} .mainsearchMTypeli{ width:50%;} .mainsearchdiv > div > ul > .mainsearchOptionsli > div.movetype_2_div{ height:64px;}