header { position: absolute; width: 100%; height:100px; display: flex; align-items: center; float: left; right: 0; top: 0; z-index: 300; background-color: rgba(0,0,0,0); transition-duration:0.2s; } header > div { display: flex; justify-content: space-between; align-items: center; width:100%; } header > div > h1{ background-color:#fff; width:275px; height:100px; border-radius:0 0 42px 0; position:relative; z-index:300;} header > div > h1 > a{ background-image:url(https://file.k-friends.kr/data/20220728/033909_0.svg); background-size:contain; background-repeat:no-repeat; background-position:center; display:inline-block; width:74px; height:35px; display:inline-block; margin-left:30px; margin-top:20px;} header > div > h1 > a > img{ opacity:0; max-width:100%; max-height:100%;} header > div > ul{ display:flex; justify-content:center; gap:140px; z-index:300;} header > div > ul > li > a{ color:#fff; font-size:20px; text-shadow:1px 1px 3px #000;} header > div > ul > li:nth-child(1) ,header > div > ul > li:nth-child(4) { display:none;} header > div > ul > li > ul{ position:absolute; background-color:rgba(255,255,255,0); opacity:0; visibility:hidden; transition-duration:0.3s; padding:10px; display:none;} header > div > ul > li:hover > ul{ opacity:1; visibility:inherit;} header > div > ul > li > ul > li > a{ font-size:17px; color:#fff; text-shadow:1px 1px 3px #000;} header > div > ul > li > ul > li > a:before{ content:"- ";} header > div > nav{ z-index:300; width:275px;} header > div > nav > ul{ position:absolute; left:30px; top:60px;} header > div > nav > ul > li{ display:none;} header > div > nav > ul > li:last-child{ display:inline-block;} header > div > nav > ul > li:last-child .PartnerOfBMWMOTORRADbtn{ color:#000; pointer-events: none;} .PartnerOfBMWMOTORRADbtn{ display:flex; position:relative; cursor:default; align-items:center; gap:4px;} .PartnerOfBMWMOTORRADbtn *{font-family:'BMWMotorrad'} .PartnerOfBMWMOTORRADbtn:before{ content:"Partner of"; font-size:12px;} .PartnerOfBMWMOTORRADbtn > .linkicon{ background-image:url(https://file.k-friends.kr/data/20240228/010520_0.svg); background-size:cover; display:inline-block; width:16px; height:16px; margin:8px 2px;} .PartnerOfBMWMOTORRADbtn > .linktext{ display:flex; font-size:12px; gap:6px; font-weight:bold;} .PartnerOfBMWMOTORRADbtn > .linktext > span{ line-height:1.2;} .MenuBtn { width: 54px; height: 54px; display: inline-block; cursor: pointer; position: absolute; right: 30px; top: 20px; z-index: 115; transform: rotate(0deg) scale(0.8); transition-duration: 0.3s; transition-delay: 0.3s; z-index: 500; } .MenuBtn:after { content: ""; position: absolute; width: 38px; height: 23px; border-top: 4px solid #fff; border-bottom: 4px solid #fff; display: inline-block; background-color: transparent; left: 7.5px; top: 12px; transition-duration: 0.3s; } .MenuBtn:before { content: ""; position: absolute; width: 38px; height: 4px; /* background-color: #fff; */ display: inline-block; left: 7.5px; top: 25px; transition-duration: 0.3s; } .menubtn{ position:absolute; float:right; right:48px; top:1.5em; transition-duration:0.3s; z-index:400; width:50px; height:50px; display:inline-block; background-position:center center; background-repeat:no-repeat; background-size:100% 100%; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");} .Login .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .Member .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .BookNow .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .Bbs .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .Explore .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .Agreements .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .GSOdysseyTour.GSOdysseyOffroad .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .Vouchers.OID .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .Vouchers.OID .menubtn.active{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20width%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M114%2C100l49-49a9.9%2C9.9%2C0%2C0%2C0-14-14L100%2C86%2C51%2C37A9.9%2C9.9%2C0%2C0%2C0%2C37%2C51l49%2C49L37%2C149a9.9%2C9.9%2C0%2C0%2C0%2C14%2C14l49-49%2C49%2C49a9.9%2C9.9%2C0%2C0%2C0%2C14-14Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");} .Vouchers.gubun .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .Vouchers.gubun .menubtn.active{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20width%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M114%2C100l49-49a9.9%2C9.9%2C0%2C0%2C0-14-14L100%2C86%2C51%2C37A9.9%2C9.9%2C0%2C0%2C0%2C37%2C51l49%2C49L37%2C149a9.9%2C9.9%2C0%2C0%2C0%2C14%2C14l49-49%2C49%2C49a9.9%2C9.9%2C0%2C0%2C0%2C14-14Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");} .Vouchers.use .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .Vouchers.use .menubtn.active{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20width%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M114%2C100l49-49a9.9%2C9.9%2C0%2C0%2C0-14-14L100%2C86%2C51%2C37A9.9%2C9.9%2C0%2C0%2C0%2C37%2C51l49%2C49L37%2C149a9.9%2C9.9%2C0%2C0%2C0%2C14%2C14l49-49%2C49%2C49a9.9%2C9.9%2C0%2C0%2C0%2C14-14Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");} .BookNow.use .menubtn{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2%206C2%205.44772%202.44772%205%203%205H21C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H3C2.44772%207%202%206.55228%202%206Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M2%2012.0322C2%2011.4799%202.44772%2011.0322%203%2011.0322H21C21.5523%2011.0322%2022%2011.4799%2022%2012.0322C22%2012.5845%2021.5523%2013.0322%2021%2013.0322H3C2.44772%2013.0322%202%2012.5845%202%2012.0322Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3Cpath%20d%3D%22M3%2017.0645C2.44772%2017.0645%202%2017.5122%202%2018.0645C2%2018.6167%202.44772%2019.0645%203%2019.0645H21C21.5523%2019.0645%2022%2018.6167%2022%2018.0645C22%2017.5122%2021.5523%2017.0645%2021%2017.0645H3Z%22%20fill%3D%22%23555555%22%2F%3E%0A%3C%2Fsvg%3E");} .BookNow.use .menubtn.active{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20width%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M114%2C100l49-49a9.9%2C9.9%2C0%2C0%2C0-14-14L100%2C86%2C51%2C37A9.9%2C9.9%2C0%2C0%2C0%2C37%2C51l49%2C49L37%2C149a9.9%2C9.9%2C0%2C0%2C0%2C14%2C14l49-49%2C49%2C49a9.9%2C9.9%2C0%2C0%2C0%2C14-14Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");} .menubtn > span{ font-size:0;} .menubtn.active{ position:fixed; transition-duration:0.3s; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20width%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M114%2C100l49-49a9.9%2C9.9%2C0%2C0%2C0-14-14L100%2C86%2C51%2C37A9.9%2C9.9%2C0%2C0%2C0%2C37%2C51l49%2C49L37%2C149a9.9%2C9.9%2C0%2C0%2C0%2C14%2C14l49-49%2C49%2C49a9.9%2C9.9%2C0%2C0%2C0%2C14-14Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); top:48px; right:30px; } .GSOdysseyTour.GSOdysseyOffroad .menubtn.active{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20width%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M114%2C100l49-49a9.9%2C9.9%2C0%2C0%2C0-14-14L100%2C86%2C51%2C37A9.9%2C9.9%2C0%2C0%2C0%2C37%2C51l49%2C49L37%2C149a9.9%2C9.9%2C0%2C0%2C0%2C14%2C14l49-49%2C49%2C49a9.9%2C9.9%2C0%2C0%2C0%2C14-14Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");} .mobilemenudiv{ position:fixed; width:0; display:inline-block; right:0; top:0; height:500px; overflow:hidden; transition-duration:0s; transition-delay:0.5s;} .mobilemenudiv.active{ width:300px; transition-delay:0s;} .mobilemenudiv > div{ position:absolute; right:-100%; border-radius:30px; background-color:#fff; margin:30px 20px; z-index:302; box-shadow:0px 0px 6px 0px rgba(0,0,0,0.1); transition-duration:0.5s;} .mobilemenudiv.active > div{ right:0;} .mobilemenudiv > div > div{ width:250px; max-height:calc(80vh - 100px); overflow:auto; padding-top:80px; padding-bottom:16px; margin-top:30px 20px;} .mobilemenudiv > div > div > ul > li{ margin:15px 20px; text-align:right;} .mobilemenudiv > div > div > ul > li:nth-child(2) ,.mobilemenudiv > div > div > ul > li:nth-child(3) { display:none;} .mobilemenudiv > div > div > ul > li > a { color:#000; font-size: 20px; font-weight: 500; position:relative; } .mobilemenudiv > div > div > ul > li > a:hover{ color:#004cff;} .mobilemenudiv > div > div > ul > li > ul{} .mobilemenudiv > div > div > ul > li > ul > li{ } .mobilemenudiv > div > div > ul > li > ul > li > a{ color:#000; font-weight:500; font-size:17px; } .mobilemenudiv > div > div > ul > li > ul > li > a:hover{ color:#004cff;} .mobilemenudiv a:hover { /* cursor: pointer; color: #FF0; */ outline: none; text-decoration: none; } .mobilemenudiv > div > div > nav > ul > li{ margin:15px 20px; text-align:right;} .mobilemenudiv > div > div > nav > ul > li > a{ font-size:20px; font-weight:500; color:#000;} .mobilemenudiv > div > div > nav > ul > li > a:hover{ color:#004cff;} .mobilemenudiv > div > div > nav > ul > li:last-child{ display:none;} /* .mobilemenudiv > div > div > ul > li > a:hover:before{ background-color:#ff0;} */ /* .mobilemenudiv > div > div > ul > li > a:before{ content:""; width:100%; height:2px; position:absolute; left:0; bottom:-4px; background-color:rgba(255,255,255,0.25); display:inline-block; } */ .KBody.Special .mobilemenudiv > div > div > ul > li a[data-path1='Special']{ font-weight:bold;} .KBody.Explore .mobilemenudiv > div > div > ul > li a[data-path1='Explore']{ font-weight:bold;} .KBody.Event .mobilemenudiv > div > div > ul > li a[data-path1='Event']{ font-weight:bold;} .KBody.Member .mobilemenudiv > div > div > ul > li a[data-path1='Member']{ font-weight:bold;} .KBody.Login .mobilemenudiv > div > div > ul > li a[data-path1='Login']{ font-weight:bold;} .KBody.Signup .mobilemenudiv > div > div > ul > li a[data-path1='Signup']{ font-weight:bold;} .KBody.Training .mobilemenudiv > div > div > ul > li a[data-path1='Training']{ font-weight:bold;} .KBody.RidingLounge .mobilemenudiv > div > div > ul > li a[data-path1='RidingLounge']{ font-weight:bold;} .KBody.Special .mobilemenudiv > div > div > ul > li a[data-path1='Special']:before{ background-color:#fff; } .KBody.Explore .mobilemenudiv > div > div > ul > li a[data-path1='Explore']:before{ background-color:#fff; } .KBody.Event .mobilemenudiv > div > div > ul > li a[data-path1='Event']:before{ background-color:#fff; } .KBody.Member .mobilemenudiv > div > div > ul > li a[data-path1='Member']:before{ background-color:#fff; } .KBody.Login .mobilemenudiv > div > div > ul > li a[data-path1='Login']:before{ background-color:#fff; } .KBody.Signup .mobilemenudiv > div > div > ul > li a[data-path1='Signup']:before{ background-color:#fff; } .KBody.Training .mobilemenudiv > div > div > ul > li a[data-path1='Training']:before{ background-color:#fff; } .KBody.RidingLounge .mobilemenudiv > div > div > ul > li a[data-path1='RidingLounge']:before{ background-color:#fff; } .KBody.Special .mobilemenudiv > div > div > ul > li a[data-path1='Special']:hover:before{ background-color:#004cff; } .KBody.Explore .mobilemenudiv > div > div > ul > li a[data-path1='Explore']:hover:before{ background-color:#004cff; } .KBody.Event .mobilemenudiv > div > div > ul > li a[data-path1='Event']:hover:before{ background-color:#004cff; } .KBody.Member .mobilemenudiv > div > div > ul > li a[data-path1='Member']:hover:before{ background-color:#004cff; } .KBody.Login .mobilemenudiv > div > div > ul > li a[data-path1='Login']:hover:before{ background-color:#004cff; } .KBody.Signup .mobilemenudiv > div > div > ul > li a[data-path1='Signup']:hover:before{ background-color:#004cff; } .KBody.Training .mobilemenudiv > div > div > ul > li a[data-path1='Training']:hover:before{ background-color:#004cff; } .KBody.RidingLounge .mobilemenudiv > div > div > ul > li a[data-path1='RidingLounge']:hover:before{ background-color:#004cff; } .MenuBtn_on{ background-color:transparent; transition-duration:0.3s; transition-delay:0.3s} .MenuBtn_on:after{ width:4px; height:50px; border:0px; left:25px; top:2px; display:inline-block; background-color:#ffffff; transition-duration:0.3s; transform:rotate(-225deg);} .MenuBtn_on:before{ height:4px; left:1px; top:24.5px; transition-duration:0.3s; transform:rotate(-225deg); width:50px;} .MenuBtn_on:active{ background-color:transparent;} .MenuBtn_on:hover{ background-color:#555;} footer{ position:relative; width:100%; display:inline-block; float:left; right:0; top:0; text-transform:none;} footer > div{ margin:0px 140px; display:flex; justify-content: flex-start;align-items:flex-start;} footer > div:nth-child(2){ margin-top: 64px; } footer > div > .footerlogo{ text-align:center;} footer > div:last-child{ padding: 0; margin-left: 140px; margin-bottom: 100px; } footer > div > div > ul > li{ list-style:"※ "; margin-left:20px; font-size: 16px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.88; letter-spacing: normal; text-align: left; color: rgba(0,0,0,.49) } footer > div > div > ul{ margin-top: 30px; margin-bottom: 30px; } footer > div > aside{ margin-left: 60px; } footer > div > ul{ margin-left: 60px; } footer > div > ul > li{ margin-bottom:24px; font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.39; letter-spacing: normal; text-align: left; color: #000; } footer > div > ul > li span{ font-weight: bold; } footer > div > aside ul > li{ font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.39; letter-spacing: normal; text-align: left; color: #000; margin-bottom: 24px; } footer > div > aside ul > li span{ font-weight: bold; } .footercompanyinfo ul li{ font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: normal; text-align: left; color: #000; } .footercompanyinfo ul li:first-child{ margin-top: 40px; margin-bottom: 20px; } footer > div > ul > li > a { font-size: 15px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.39; letter-spacing: normal; text-align: left; color: #000; } footer > div > aside{ margin-right: 60px;} footer > div > aside > ul > li > label { font-size: 15px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.56; letter-spacing: normal; text-align: left; color: #000; display:inline-block; } footer > div > aside > ul > li > div { font-size: 26px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.96; letter-spacing: normal; color: #004cff; } footer > div > nav > ul > li{ margin-bottom:24px;} footer > div > nav > ul > li > a{ font-size: 18px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.56; letter-spacing: normal; text-align: left; color: #004cff; } .copyright{ font-size: 20px; font-weight: 900; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: -0.33px; color: rgb(85, 85, 85); } body .TopMobeBtn{ position:fixed; right:3em; bottom:3em; z-index:299; display:inline-block; width:56px; height:55px; background-repeat:no-repeat; background-size:100% 100%; background-position:center center; border-radius:50%; overflow:hidden; background-color:#fff; background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2255%22%20viewBox%3D%220%200%2056%2055%22%3E%0D%0A%20%20%3Cg%20transform%3D%22translate%28-1704%20-961%29%22%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M0%2C0%2C12.178%2C12.178%2C24.356%2C0%22%20transform%3D%22translate%281743.903%20992.179%29%20rotate%28180%29%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0D%0A%20%20%20%20%3Cg%20transform%3D%22translate%281704%20961%29%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%3E%0D%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2227.5%22%20rx%3D%2228%22%20ry%3D%2227.5%22%20stroke%3D%22none%22%2F%3E%0D%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2227.5%22%20rx%3D%2227%22%20ry%3D%2226.5%22%20fill%3D%22none%22%2F%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A'); opacity:0.4; display:none; } body .TopMobeBtn:hover{ opacity:1; background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2255%22%20viewBox%3D%220%200%2056%2055%22%3E%0D%0A%20%20%3Cg%20transform%3D%22translate%28-1704%20-961%29%22%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M0%2C0%2C12.178%2C12.178%2C24.356%2C0%22%20transform%3D%22translate%281743.903%20992.179%29%20rotate%28180%29%22%20fill%3D%22none%22%20stroke%3D%22%23004cff%22%20stroke-width%3D%222%22%2F%3E%0D%0A%20%20%20%20%3Cg%20transform%3D%22translate%281704%20961%29%22%20fill%3D%22none%22%20stroke%3D%22%23004cff%22%20stroke-width%3D%222%22%3E%0D%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2227.5%22%20rx%3D%2228%22%20ry%3D%2227.5%22%20stroke%3D%22none%22%2F%3E%0D%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2227.5%22%20rx%3D%2227%22%20ry%3D%2226.5%22%20fill%3D%22none%22%2F%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A'); } body.wheelbtn .TopMobeBtn{ display:inline-block;} .onlymobile{ display: none; } .snsbtndiv>.snsbtn { display: none; } .footercompanyinfo > div > nav > a{ font-size: 15px; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: normal; color: #bfbfbf; display:inline-block; font-weight: bold; float:left; } .footercompanyinfo > div > nav > a:hover{ color:#004cff;} .footercompanyinfo > div > nav > a.personal_agree:hover{ color:#004cff;} .footercompanyinfo > div > nav > a:after{ content:"|"; font-weight:normal; margin:0 4px; pointer-events:none; color:#bfbfbf;} .footercompanyinfo > div > nav > a:last-child:after{ content:"";} .footercompanyinfo > div > nav > a.personal_agree{ color:rgba(0,0,0,0.7); } .footercompanyinfo > div > div > ul{ width:100%; display:inline-block;} .footercompanyinfo > div > div > ul > li{ display:flex;} .footercompanyinfo > div > div > ul > li:nth-child(4){ width:auto; float:left;} .footercompanyinfo > div > div > ul > li:nth-child(4) > div:after{ content:"|"; margin:0 4px; } .footercompanyinfo > div > div > ul > li > label{ margin-right:4px; font-weight: bold; font-size: 15px; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: normal; color: #bfbfbf; } .footercompanyinfo > div > div > ul > li > label:after{ content:" :";} .footercompanyinfo > div > div > ul > li > div{ font-weight: bold; font-size: 15px; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: normal; color: #bfbfbf; } .footercompanyinfo > div > div > ul > li > div > a{ font-size: 15px; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: normal; color: #bfbfbf; } .footercompanyinfo > div > div > ul > li > div > a:hover{ color:#004cff;} #AddressFindDiv{ position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:302; display:flex; align-items:center; justify-content:center;} #AddressFindDiv > div{ display:inline-block; background-color:#fff;} #AddressFindDiv > div > form{ padding:30px; width:calc(96% - 60px); max-width:600px;} #AddressFindDiv > div > form > .searchdiv{ display:flex; flex-grow:1; align-items:center; justify-content:space-between;} #AddressFindDiv > div > form > .searchdiv > input[type=text]{ border:0; border-bottom:1px solid #000; font-size:24px; padding:8px 0; flex-grow:1;} #AddressFindDiv > div > form > .searchdiv > a{ padding:8px 0; min-width:80px; width:80px; text-align:center; display:inline-block; margin-left:4px; font-size:24px; border:1px solid #000;} #AddressFindDiv > div > form > .searchdiv > a.searchsubmitbtn{ background-color:#000; color:#fff;} #AddressFindDiv > div > form > .searchdiv > a.searchsubmitbtn:hover{ color:#ffff00;} #AddressFindDiv > div > form > p{ color:#004cff; font-size:18px; margin:4px 0;} #AddressFindDiv > div > form > #AddressList{ height:calc(100vh - 300px);} #AddressFindDiv > div > form > #AddressList > table{ margin-top:30px; table-layout:fixed; width:100%;} #AddressFindDiv > div > form > #AddressList > table > tbody > tr > th{ border-top:2px solid #000; border-bottom:1px solid #000; padding:12px 8px; font-size:18px;} #AddressFindDiv > div > form > #AddressList > table > tbody > tr > th:first-child{ width:100px;} #AddressFindDiv > div > form > #AddressList > table > tbody > tr > td{ border-bottom:1px solid #000; padding:8px; font-size:18px;} #AddressFindDiv > div > form > #AddressList > table > tbody > tr > td:first-child{ text-align:center;} #AddressFindDiv > div > form > #AddressList > nav{ display:flex; flex-grow:1; align-items:center; justify-content:center; padding:30px 0;} #AddressFindDiv > div > form > #AddressList > nav > a{ border:1px solid #004cff; color:#004cff; padding:8px; margin:4px; display:inline-block; min-width:20px; text-align:center;} #AddressFindDiv > div > form > #AddressList > nav > a:hover{ background-color:#004cff; color:#fff;} #AddressFindDiv > div > form > #AddressList > nav > span{ border:1px solid #f1f1f1; padding:8px; margin:4px; display:inline-block; background-color:#f1f1f1; min-width:20px; text-align:center;} footer>nav{ margin: 40px auto; width:calc(90% - 52px); display: flex; justify-content: flex-start; align-items: center; padding: 26px; border-top: 2px solid #000; border-bottom: 2px solid #000; flex-wrap:wrap; } footer>nav a{ margin:8px 26px; display:inline-block; } footer>nav a>span{ display:flex; align-items:center; font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: normal; color: #000; } footer>nav a.personal_agree > span{ font-weight: 900; } footer .footerlogo a h1>img{ float: left; } /* header > div > nav > ul > li:nth-last-child(2):after{ display:none;} */ /* Event */ .SignEventCouponDiv{ display:flex; position:fixed; z-index:301; left:0; top:0; width:100%; height:100%; justify-content:center; align-items:center; background-color:rgba(0,0,0,0.2);} .SignEventCouponDiv > div{ display:inline-block; background-color:#fff; border-radius:7px; width:90%; max-width:700px; max-height:70vh; overflow:auto; padding:60px 0; position:relative; } .SignEventCouponDiv > div > form > div > h3{ text-align:center;} .SignEventCouponDiv > div > form > div > h3 > span{ font-size: 21px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.86; letter-spacing: normal; color: #000; } .SignEventCouponDiv > div > form > div > h3 > span > span { font-weight: bold; color: #004cff; } .SignEventCouponDiv > div > form > div > h4{ text-align:center; font-size: 42px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: -0.21px; color: #000; } .SignEventCouponDiv > div > form > div > div > div > ul > li{ position:relative; width:90%; max-width:368px; margin:auto; margin-top:25px; border-radius:10px; margin-bottom:50px; } .SignEventCouponDiv > div > form > div > div > div > ul > li > div { width:90%; max-width:368px; height:175px; margin:auto; display:flex; justify-content:center; align-items:center; flex-direction: column; object-fit: contain; border-radius: 10px; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); background-color:rgba(255,255,255,0.19); padding-bottom:25px; } .SignEventCouponDiv > div > form > div > div > div > ul > li > aside{ content:""; position:absolute; width:100%; height:100%; position:absolute; background-color:#004cff; border-radius: 10px; left:0; top:25px; box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.47);} .SignEventCouponDiv > div > form > div > div > div > ul > li > span{ content:""; width:100%; height:100%; display:inline-block; background-image:url("https://file.k-friends.kr/img/20230110/030441_0.png"); z-index:1; bottom:0; left:0; position:absolute; background-position:bottom center; background-repeat:no-repeat; border-radius:10px;} .SignEventCouponDiv > div > form > div > div > div > ul > li > div > h4 { font-size: 15px; font-weight: 500; font-stretch: normal; font-style: normal; letter-spacing: -0.08px; color: #fff; margin-bottom:-10px; } .SignEventCouponDiv > div > form > div > div > div > ul > li > div > p { margin-top:-10px; font-size: 65px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: -0.65px; color: #fff; position:relative; } .SignEventCouponDiv > div > form > div > div > p { font-size: 21px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.86; letter-spacing: -0.11px; color: #000; text-align:center; } .SignEventCouponDiv > div > form > div > div > nav{ margin-top:19px;} .SignEventCouponDiv > div > form > div > div > nav > a { font-size: 19px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.84; letter-spacing: normal; color: #fff; width: 312px; height: 54px; background-color: #000; display:flex; justify-content:center; align-items:center; margin:auto; } .focaflex{ display:flex; gap:16px; flex-wrap:wrap;} .focaflex > p{ display: flex; align-items: center; } .foca{ display:inline-block; width: 28px; height: 28px; background-image: url(https://file.k-friends.kr/img/20220810/024843_0.png); background-size: 24px 24px; background-position: center center; background-repeat: no-repeat; margin-left: 8px; } .instar{ display:inline-block; width: 28px; height: 28px; background-image: url(https://file.k-friends.kr/img/20240613/125929_0.png); background-size: 23px 23px; background-position: center center; background-repeat: no-repeat; margin-left: 8px; }