.Home section > div > div{ z-index:1; /*background-color:#fff;*/} .Home footer{ z-index:1; position:relative;} /* main0 버전 맞추기 */ .Home section > div.main0 { width: 100%; float: left; display: inline-block; background-color: #fff; } .Home section > div.main0 > div { width: 100%; position: relative; float: left; } .Home section > div.main0 > div .img { width: 100%; height: 100%; position:absolute; left:0; top:0; z-index:1; } .Home section > div.main0 > div .img > div { /* position: fixed; */ min-height: 100vh; width: 100%; overflow: hidden; } .Home section > div.main0 > div .img > div > video { width: 100%; min-width: 280px; float: left; min-height: 100vh; overflow: hidden; z-index:1; } .Home section > div.main0 > div .text { position:relative; width: 100%; min-height: 100vh; left: 0; top: 0; display: flex; align-items: center; z-index:2; } .Home section > div.main0 > div .text h2 { font-size: 54px; font-weight: 900; font-stretch: normal; font-style: normal; letter-spacing: normal; color: #fff; text-transform: uppercase; line-height: 1.16; margin-left: 20px; margin-top:140px; margin-bottom:140px; text-shadow:1px 1px 6px gray; } #HomeMain0H2{ line-height:1.33;} #HomeMain0H2[data-now-no='0']{ height:303px;} #HomeMain0H2[data-now-no='1']{ height:403px;} #HomeMain0H2[data-now-no='2']{ height:303px;} /* main1 버전 맞추기 */ .Home section > div.main1 { width: 100%; display:inline-block; overflow:hidden; float: left; background-color: #fff; position: relative; } .Home section > div.main1 > div { width: 100%; margin: auto; position: relative; z-index:2; } .Home section > div.main1 > div .img { width: 100%; height: 100%; position:absolute; left:0; top:0; } .Home section > div.main1 > div .img > div {} .Home section > div.main1 > div .img > div > video { width: 100%; min-height: 100vh; min-width: 280px; margin-bottom: -8px; object-fit: fill; } .Home section > div.main1 > div .text { position:relative; width: 100%; min-height: 100vh; left: 0; top: 0; display: flex; align-items: center; justify-content: center; } .Home section > div.main1 > div .text > div { text-align: center; margin-top:140px; margin-bottom:140px; } .Home section > div.main1 > div .text > div > h2 { font-size: 36px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.31; letter-spacing: normal; color: #fff; margin-left: 0; margin-top: 0; margin-bottom: 0; margin-right: 0; text-transform: uppercase; } .Home section > div.main1 > div .text > div > p { margin:30px; margin-bottom:0; margin-top: 40px; font-size: 25px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.72; letter-spacing: normal; color: #fff; text-transform: uppercase; } .Home section > div.main1 > div .text > div > nav{ margin-top: 100px; } .Home section > div.main1 > div .text > div > nav > a { margin: 50px auto; width: 326px; height: 86px; display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #004cff; font-size: 22px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: normal; color: #004cff; text-transform: uppercase; position: relative; } .Home section > div.main1 > div .text > div > nav > a > .linktext { display: inline-block; transition-duration: 0.3s; margin-right:20px; } .Home section > div.main1 > div .text > div > nav > a > .linkicon { transition-duration: 0.3s; background-repeat: no-repeat; background-position: center center; } .Home section > div.main1 > div .text > div > nav > a > .linkicon svg g path{ stroke: rgb(0, 76,255); } /* .Home section > div.main1 > div .text > div > nav > a:hover { font-weight: 900; background-color: #004cff; border:1px solid #004cff; color: #fff; justify-content:space-between; } .Home section > div.main1 > div .text > div > nav > a:hover > .linktext { margin-right:0; margin-left:28px; } .Home section > div.main1 > div .text > div > nav > a:hover > .linkicon { width: 70px; height:66px; background-color:#fff; background-image: url("//file.k-friends.kr/data/20220728/080946_0.svg"); } .Home section > div.main1 > div .text > div > nav > a:hover > .linkicon img { opacity: 0; } */ .Home section > div.main1 > div .text > div > ul { display: flex; /* margin: 154px auto auto; */ width: 80%; margin-left:10%; justify-content: center; flex-flow: wrap; } .Home section > div.main1 > div .text > div > ul > li { width: 153px; height: 153px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background-color: #000; font-size: 19px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: normal; line-height: 1.5; text-transform: uppercase; border-radius: 50%; border: 1px solid #000; transition-duration: 0.3s; position: relative; background-repeat: no-repeat; background-position: center center; background-size:70% auto; margin:20px; } .Home section > div.main1 > div .text > div > ul > li.Exploretype0 { background-image: url("//file.k-friends.kr/data/20220728/040754_1.svg"); } /* thegreategetaway*/ /*.Home section > div.main1 > div .text > div > ul > li.Exploretype1{ background-image:url(//file.k-friends.kr/data/20220728/040754_0.svg);}/* gs safari */ .Home section > div.main1 > div .text > div > ul > li.Exploretype1 { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100.706%22%20height%3D%2251.037%22%20viewBox%3D%220%200%20100.706%2051.037%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CclipPath%20id%3D%22clip-path%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%22100.706%22%20height%3D%2251.037%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%20%20%3CclipPath%20id%3D%22clip-path-2%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%2296.613%22%20height%3D%2230.315%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22translate(0)%22%3E%0A%20%20%20%20%3Cg%20clip-path%3D%22url(%23clip-path)%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M5.17%2C281.807a6.018%2C6.018%2C0%2C0%2C1-2.483-2.351%2C6.906%2C6.906%2C0%2C0%2C1-.888-3.543%2C8.149%2C8.149%2C0%2C0%2C1%2C4.158-7.2%2C8.516%2C8.516%2C0%2C0%2C1%2C4.279-1.1%2C7.713%2C7.713%2C0%2C0%2C1%2C3.623.828%2C6.04%2C6.04%2C0%2C0%2C1%2C2.473%2C2.352%2C6.911%2C6.911%2C0%2C0%2C1%2C.888%2C3.542%2C8.166%2C8.166%2C0%2C0%2C1-4.148%2C7.2%2C8.461%2C8.461%2C0%2C0%2C1-4.269%2C1.1%2C7.77%2C7.77%2C0%2C0%2C1-3.633-.828m6.086-3.209a4.214%2C4.214%2C0%2C0%2C0%2C1.514-1.685A5.058%2C5.058%2C0%2C0%2C0%2C13.3%2C274.6a4.1%2C4.1%2C0%2C0%2C0-.414-1.908%2C2.892%2C2.892%2C0%2C0%2C0-1.171-1.221%2C3.514%2C3.514%2C0%2C0%2C0-1.746-.424%2C4.016%2C4.016%2C0%2C0%2C0-2.21.626A4.209%2C4.209%2C0%2C0%2C0%2C6.25%2C273.36a5.053%2C5.053%2C0%2C0%2C0-.535%2C2.311%2C4.028%2C4.028%2C0%2C0%2C0%2C.424%2C1.9A2.958%2C2.958%2C0%2C0%2C0%2C7.31%2C278.8a3.455%2C3.455%2C0%2C0%2C0%2C1.736.424%2C4.015%2C4.015%2C0%2C0%2C0%2C2.21-.626%22%20transform%3D%22translate(-1.557%20-231.598)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M128.552%2C270.712a5.373%2C5.373%2C0%2C0%2C1%2C2.432%2C2.12%2C6.633%2C6.633%2C0%2C0%2C1%2C.878%2C3.543%2C7.794%2C7.794%2C0%2C0%2C1-1.1%2C4.118%2C7.564%2C7.564%2C0%2C0%2C1-3.179%2C2.856%2C10.9%2C10.9%2C0%2C0%2C1-4.925%2C1.04H117.43l2.543-14.372h4.986a8.711%2C8.711%2C0%2C0%2C1%2C3.593.7m-2.836%2C9.81a3.768%2C3.768%2C0%2C0%2C0%2C1.665-1.6%2C5.256%2C5.256%2C0%2C0%2C0%2C.565-2.523q0-3.068-3.431-3.068h-1.292l-1.373%2C7.751h1.171a5.936%2C5.936%2C0%2C0%2C0%2C2.695-.555%22%20transform%3D%22translate(-101.625%20-233.674)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M240.078%2C270.1l-6.278%2C8.115-1.09%2C6.177h-4.057l1.09-6.237-3.431-8.054.02-.081h4.057l1.877%2C4.764%2C3.492-4.764h4.34Z%22%20transform%3D%22translate(-195.852%20-233.674)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M316.722%2C282.251a10.176%2C10.176%2C0%2C0%2C1-2.674-1.11l1.716-3.008a8.923%2C8.923%2C0%2C0%2C0%2C1.978.878%2C6.981%2C6.981%2C0%2C0%2C0%2C2.039.313%2C2.978%2C2.978%2C0%2C0%2C0%2C1.524-.313.961.961%2C0%2C0%2C0%2C.515-.858.85.85%2C0%2C0%2C0-.373-.676%2C5.132%2C5.132%2C0%2C0%2C0-1.363-.636l-1.009-.343a5.984%2C5.984%2C0%2C0%2C1-2.6-1.554%2C3.55%2C3.55%2C0%2C0%2C1-.868-2.463%2C4.421%2C4.421%2C0%2C0%2C1%2C.727-2.493%2C4.848%2C4.848%2C0%2C0%2C1%2C2.18-1.736%2C8.792%2C8.792%2C0%2C0%2C1%2C3.533-.636%2C12.54%2C12.54%2C0%2C0%2C1%2C2.785.3%2C11.723%2C11.723%2C0%2C0%2C1%2C2.4.807l-1.514%2C3.028a11.637%2C11.637%2C0%2C0%2C0-1.948-.6%2C9.194%2C9.194%2C0%2C0%2C0-1.907-.212q-2.2%2C0-2.2%2C1.191a.748.748%2C0%2C0%2C0%2C.313.636%2C3.087%2C3.087%2C0%2C0%2C0%2C.858.414l1.11.384a9.836%2C9.836%2C0%2C0%2C1%2C2.463%2C1.161%2C3.355%2C3.355%2C0%2C0%2C1%2C1.181%2C1.322%2C4.063%2C4.063%2C0%2C0%2C1%2C.313%2C1.655%2C4.612%2C4.612%2C0%2C0%2C1-.727%2C2.584%2C4.755%2C4.755%2C0%2C0%2C1-2.1%2C1.726%2C7.945%2C7.945%2C0%2C0%2C1-3.27.616%2C12.108%2C12.108%2C0%2C0%2C1-3.078-.384%22%20transform%3D%22translate(-271.78%20-231.598)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M404.907%2C282.251a10.172%2C10.172%2C0%2C0%2C1-2.674-1.11l1.716-3.008a8.914%2C8.914%2C0%2C0%2C0%2C1.978.878%2C6.979%2C6.979%2C0%2C0%2C0%2C2.039.313%2C2.978%2C2.978%2C0%2C0%2C0%2C1.524-.313.961.961%2C0%2C0%2C0%2C.515-.858.849.849%2C0%2C0%2C0-.373-.676%2C5.129%2C5.129%2C0%2C0%2C0-1.362-.636l-1.009-.343a5.986%2C5.986%2C0%2C0%2C1-2.6-1.554%2C3.55%2C3.55%2C0%2C0%2C1-.868-2.463%2C4.422%2C4.422%2C0%2C0%2C1%2C.727-2.493%2C4.847%2C4.847%2C0%2C0%2C1%2C2.18-1.736%2C8.791%2C8.791%2C0%2C0%2C1%2C3.533-.636%2C12.543%2C12.543%2C0%2C0%2C1%2C2.786.3%2C11.726%2C11.726%2C0%2C0%2C1%2C2.4.807l-1.514%2C3.028a11.626%2C11.626%2C0%2C0%2C0-1.948-.6%2C9.2%2C9.2%2C0%2C0%2C0-1.908-.212q-2.2%2C0-2.2%2C1.191a.748.748%2C0%2C0%2C0%2C.313.636%2C3.088%2C3.088%2C0%2C0%2C0%2C.858.414l1.11.384a9.829%2C9.829%2C0%2C0%2C1%2C2.462%2C1.161%2C3.355%2C3.355%2C0%2C0%2C1%2C1.181%2C1.322%2C4.062%2C4.062%2C0%2C0%2C1%2C.313%2C1.655%2C4.61%2C4.61%2C0%2C0%2C1-.727%2C2.584%2C4.754%2C4.754%2C0%2C0%2C1-2.1%2C1.726%2C7.946%2C7.946%2C0%2C0%2C1-3.27.616%2C12.106%2C12.106%2C0%2C0%2C1-3.078-.384%22%20transform%3D%22translate(-348.096%20-231.598)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M501.909%2C273.326l-.4%2C2.3h6.459l-.545%2C3.169H500.94l-.4%2C2.281h6.9l-.606%2C3.31H496.116l2.543-14.372h10.759l-.585%2C3.31Z%22%20transform%3D%22translate(-429.344%20-233.674)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M614.564%2C270.1l-6.278%2C8.115-1.09%2C6.177h-4.057l1.09-6.237L600.8%2C270.1l.02-.081h4.057l1.877%2C4.764%2C3.492-4.764h4.339Z%22%20transform%3D%22translate(-519.936%20-233.674)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20transform%3D%22translate(2.047%201.425)%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22translate(0%200)%22%20opacity%3D%220.98%22%20clip-path%3D%22url(%23clip-path-2)%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M23.077%2C10.54a.584.584%2C0%2C0%2C0%2C.572-.144%2C14.566%2C14.566%2C0%2C0%2C1%2C5.406-3.373c2.994-.927%2C20.761-.555%2C23.086-.5a.59.59%2C0%2C0%2C0%2C.432-.175l4.782-4.807A.609.609%2C0%2C0%2C0%2C56.937.5l-31-.135H25.9c-.412.029-6.625.516-9.453%2C3.187-1.633%2C1.542-2.679%2C2.6-3.286%2C3.231a.611.611%2C0%2C0%2C0%2C.268%2C1.008Z%22%20transform%3D%22translate(-7.101%20-0.198)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M51.724%2C26.821c.476-.435%2C23.19-.306%2C23.19-.306s2.006-.17.612%2C3.094-1.224%2C2.924-4.964%2C2.924-12.683.34-14.043-.51-5.576-4.488-4.794-5.2%22%20transform%3D%22translate(-28.222%20-14.484)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M8.847%2C26.031c4.152.046%2C5.626-.157%2C6.052.68.436.856-.844%2C1.584-1.428%2C4.046-.161.68-.841%2C3.9.8%2C5.667.947%2C1.02%2C2.322%2C1.08%2C3.38%2C1.269%2C2.856.51%2C11.731%2C0%2C11.731%2C0s1.326.255%2C2.04-1.632a3.306%2C3.306%2C0%2C0%2C1%2C1.127-1.711.741.741%2C0%2C0%2C1%2C.524-.1c1.332.233%2C9.946%2C1.764%2C10.182%2C2.469.255.765-1.275%2C7.191-8.569%2C7.191H8.086a7.422%2C7.422%2C0%2C0%2C1-3.723-.984A8.026%2C8.026%2C0%2C0%2C1%2C.007%2C35.5c.123-3.157-.17-7.673%2C2.4-9.334.865-.56%2C1.106-.195%2C6.443-.136%22%20transform%3D%22translate(0%20-14.136)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M122.493%2C32.693s-8.289-.278-10.2-4.836a.671.671%2C0%2C0%2C1%2C.617-.932h32.187s8.709-.047%2C10.218%2C4.862a.67.67%2C0%2C0%2C1-.64.864Z%22%20transform%3D%22translate(-61.353%20-14.718)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M158.916.24a.776.776%2C0%2C0%2C1%2C.621%2C1.236%2C22.986%2C22.986%2C0%2C0%2C1-4.458%2C4.536c-1.275.663-18.99.476-18.99.476s-4.778-.221-7.072%2C1.36-2.04%2C2.295-3.213%2C2.04S115.61%2C8.067%2C115.4%2C7.083c-.153-.714%2C5.224-5.656%2C10.66-6.477%2C7.089-1.071%2C27.75-.4%2C32.857-.366%22%20transform%3D%22translate(-63.079%200)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M107.9%2C48.628c1.536-1.215%2C2.9-.83%2C10.643-.612%2C4.888.138%2C9.687.136%2C9.715.136h.009c.261%2C0%2C.6%2C0%2C.6%2C0a13.36%2C13.36%2C0%2C0%2C0%2C5.245-1.568c1.736-1.066%2C1.7-1.916%2C3.094-2.176a6.013%2C6.013%2C0%2C0%2C1%2C2.176.17c2.463.412%2C4.012.816%2C4.012.816%2C3.16.825%2C4.741%2C1.237%2C4.862%2C1.632.435%2C1.415-3.416%2C4.147-7.047%2C5.627-2.885%2C1.176-5.187%2C1.38-8.968%2C1.683-3.558.285-3.962.036-12.717.068-2.743.01-5.487-.076-8.229%2C0-4.833.133-7.645.449-7.957-.476-.158-.468.654-1.332%2C2.278-3.06a26.933%2C26.933%2C0%2C0%2C1%2C2.278-2.244%22%20transform%3D%22translate(-56.48%20-24.254)%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); } /* gs safari */ .Home section > div.main1 > div .text > div > ul > li.Exploretype2 { background-image: url("//file.k-friends.kr/data/20220728/040754_4.svg"); } /* trancecontinental */ /*.Home section > div.main1 > div .text > div > ul > li.Exploretype3{ background-image:url(//file.k-friends.kr/data/20220728/040754_3.svg);}/* tran eurasia*/ .Home section > div.main1 > div .text > div > ul > li.Exploretype3 { background-image: url("//file.k-friends.kr/data/20220818/043405_0.svg"); } /* tran eurasia*/ .Home section > div.main1 > div .text > div > ul > li.Exploretype4 { background-image: url("//file.k-friends.kr/data/20220728/040754_2.svg"); display: none; } /* tour */ .Home section > div.main1 > div .text > div > ul > li > a { position: absolute; left: 0; top: 0; width: 80%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10%; margin-top: -1px; border-radius: 50%; opacity: 0; background-color: rgba(0,0,0,0); transition-duration: 0.3s; } .Home section > div.main1 > div .text > div > ul > li > a > span > span { display: inline-block; color: #fff; transition-duration: 0.3s; } .Home section > div.main1 > div .text > div > ul > li:hover > a { border: 1px solid #004cff; color: #004cff; opacity: 1; background-color: rgba(0,0,0,1); } .Home section > div.main1 > div .text > div > ul > li:hover > a > span > span { color: #004cff; } /* main2 버전 맞추기 */ .Home section > div.main2{ width:100%; float:left; background-color:#fff; position:relative;} .Home section > div.main2 > div{ width:100%; margin:auto; position:relative;} .Home section > div.main2 > div > div > .img{ width:100%; height:100%; position:absolute; display:flex;align-items: center; overflow:hidden;} .Home section > div.main2 > div > div > .img video{ width:100%; min-width:280px; float:left; display:none; } .Home section > div.main2 > div > div > .img > div{ display:inline-block; } .HomeEventlist{ display:inline-block; overflow:hidden; height:890px; position:relative; width:5000px; transition-duration:1s;} .HomeEventlist > li{ transition-duration:1s; background-size:cover; background-position:center center; display:inline-block; margin:45px; float:left;} .HomeEventlist > li > div{ transition-duration:1s; } .HomeEventlist > li:nth-child(1) > div{background-image:url(//file.k-friends.kr/img/20220729/064418_0.jpg)} .HomeEventlist > li:nth-child(2) > div{background-image:url(//file.k-friends.kr/img/20220729/064418_1.jpg)} .HomeEventlist > li:nth-child(3) > div{background-image:url(//file.k-friends.kr/img/20220729/064418_2.jpg)} .HomeEventlist > li:nth-child(4) > div{background-image:url(//file.k-friends.kr/img/20220729/064418_3.jpg)} /* .HomeEventlist > li:nth-child(5) > div{background-image:url(//file.k-friends.kr/img/20220729/064418_4.jpg)} .HomeEventlist > li:nth-child(6) > div{background-image:url(//file.k-friends.kr/img/20220729/064418_5.jpg)} .HomeEventlist > li:nth-child(7) > div{background-image:url(//file.k-friends.kr/img/20220729/064418_0.jpg)} */ .HomeEventlist > li > div{background-size:cover; background-position:center center; display:inline-block;} .HomeEventlist > li:nth-child(1) > div{ width:400px; height:476px; margin-top:100px; border-radius:0; } .HomeEventlist > li:nth-child(2) > div{ width:370px; height:676px; margin-top:0; border-radius:0; } .HomeEventlist > li:nth-child(3) > div{ width:463px; height:466px; margin-top:379px; border-radius:50%; } .HomeEventlist > li:nth-child(4) > div{ width:400px; height:435px; margin-top:161px; border-radius:0;} /* .HomeEventlist > li:nth-child(5) > div{ width:370px; height:676px; margin-top:0; border-radius:0; opacity:1;} .HomeEventlist > li:nth-child(6) > div{ width:463px; height:466px; margin-top:379px; border-radius:50%;} .HomeEventlist > li:nth-child(7) > div{ width:400px; height:476px; margin-top:100px; border-radius:0; } */ .homeeventroll1{ margin-left:-70px;} .homeeventroll1 > li:nth-child(1) > div{ opacity:0;} .homeeventroll1 > li:nth-child(2) > div{ opacity:0.17;} .homeeventroll1 > li:nth-child(3) > div{ opacity:1;} .homeeventroll1 > li:nth-child(4) > div{ opacity:1;} /* .homeeventroll1 > li:nth-child(5) > div{ opacity:1;} .homeeventroll1 > li:nth-child(6) > div{ opacity:1;} .homeeventroll1 > li:nth-child(7) > div{ opacity:1;} */ .homeeventroll2{ margin-left:-770px;} .homeeventroll2 > li:nth-child(1) > div{ opacity:0;} .homeeventroll2 > li:nth-child(2) > div{ opacity:0;} .homeeventroll2 > li:nth-child(3) > div{ opacity:0.17;} .homeeventroll2 > li:nth-child(4) > div{ opacity:1;} /* .homeeventroll2 > li:nth-child(5) > div{ opacity:1;} .homeeventroll2 > li:nth-child(6) > div{ opacity:1;} .homeeventroll2 > li:nth-child(7) > div{ opacity:1;} */ .homeeventroll3{ margin-left:-1270px;} .homeeventroll3 > li:nth-child(1) > div{ opacity:0;} .homeeventroll3 > li:nth-child(2) > div{ opacity:0;} .homeeventroll3 > li:nth-child(3) > div{ opacity:0;} .homeeventroll3 > li:nth-child(4) > div{ opacity:0.17;} /* .homeeventroll3 > li:nth-child(5) > div{ opacity:1;} .homeeventroll3 > li:nth-child(6) > div{ opacity:1;} .homeeventroll3 > li:nth-child(7) > div{ opacity:1;} */ .homeeventroll4{ margin-left:-1569px;} .homeeventroll4 > li:nth-child(1) > div{ opacity:0;} .homeeventroll4 > li:nth-child(2) > div{ opacity:0;} .homeeventroll4 > li:nth-child(3) > div{ opacity:0;} .homeeventroll4 > li:nth-child(4) > div{ opacity:0;} /* .homeeventroll4 > li:nth-child(5) > div{ opacity:0.17;} .homeeventroll4 > li:nth-child(6) > div{ opacity:1;} .homeeventroll4 > li:nth-child(7) > div{ opacity:1;} */ .homeeventroll5{ margin-left:-1869px;} .homeeventroll5 > li:nth-child(1) > div{ opacity:0;} .homeeventroll5 > li:nth-child(2) > div{ opacity:0;} .homeeventroll5 > li:nth-child(3) > div{ opacity:0;} .homeeventroll5 > li:nth-child(4) > div{ opacity:0;} /* .homeeventroll5 > li:nth-child(5) > div{ opacity:0;} .homeeventroll5 > li:nth-child(6) > div{ opacity:0.17;} .homeeventroll5 > li:nth-child(7) > div{ opacity:1;} */ /* .HomeEventlist > li{ transition-duration:1s; position:absolute;background-size:cover; background-position:center center; transition-duration:1s; display:inline-block;} .HomeEventlist > li:nth-child(1){background-image:url(//file.k-friends.kr/img/20220729/064418_0.jpg)} .HomeEventlist > li:nth-child(2){background-image:url(//file.k-friends.kr/img/20220729/064418_1.jpg)} .HomeEventlist > li:nth-child(3){background-image:url(//file.k-friends.kr/img/20220729/064418_2.jpg)} .HomeEventlist > li:nth-child(4){background-image:url(//file.k-friends.kr/img/20220729/064418_3.jpg)} .HomeEventlist > li:nth-child(5){background-image:url(//file.k-friends.kr/img/20220729/064418_4.jpg)} .HomeEventlist > li:nth-child(6){background-image:url(//file.k-friends.kr/img/20220729/064418_5.jpg)} .homeeventroll1 > li:nth-child(1){ width:400px; height:476px; left:-40px; top:100px; border-radius:0; opacity:0; } .homeeventroll1 > li:nth-child(2){ width:370px; height:676px; left:464px; top:0; border-radius:0; opacity:0.17; } .homeeventroll1 > li:nth-child(3){ width:463px; height:466px; left:930px; top:379px; border-radius:50%; opacity:1;} .homeeventroll1 > li:nth-child(4){ width:400px; height:435px; left:1520px; top:161px; border-radius:0; opacity:1;} .homeeventroll1 > li:nth-child(5){ width:370px; height:676px; left:2016px; top:0; border-radius:0; opacity:1;} .homeeventroll1 > li:nth-child(6){ width:463px; height:466px; left:2486px; top:379px; border-radius:50%; opacity:0;} .homeeventroll2 > li:nth-child(2){ width:400px; height:476px; left:-40px; top:100px; border-radius:0; opacity:0; } .homeeventroll2 > li:nth-child(3){ width:370px; height:676px; left:464px; top:0; border-radius:0; opacity:0.17; } .homeeventroll2 > li:nth-child(4){ width:463px; height:466px; left:930px; top:379px; border-radius:50%; opacity:1;} .homeeventroll2 > li:nth-child(5){ width:400px; height:435px; left:1520px; top:161px; border-radius:0; opacity:1;} .homeeventroll2 > li:nth-child(6){ width:370px; height:676px; left:2016px; top:0; border-radius:0; opacity:1;} .homeeventroll2 > li:nth-child(1){ width:463px; height:466px; left:2486px; top:379px; border-radius:50%; opacity:0;} .homeeventroll3 > li:nth-child(3){ width:400px; height:476px; left:-40px; top:100px; border-radius:0; opacity:0; } .homeeventroll3 > li:nth-child(4){ width:370px; height:676px; left:464px; top:0; border-radius:0; opacity:0.17; } .homeeventroll3 > li:nth-child(5){ width:463px; height:466px; left:930px; top:379px; border-radius:50%; opacity:1;} .homeeventroll3 > li:nth-child(6){ width:400px; height:435px; left:1520px; top:161px; border-radius:0; opacity:1;} .homeeventroll3 > li:nth-child(1){ width:370px; height:676px; left:2016px; top:0; border-radius:0; opacity:1;} .homeeventroll3 > li:nth-child(2){ width:463px; height:466px; left:2486px; top:379px; border-radius:50%; opacity:0;} .homeeventroll4 > li:nth-child(4){ width:400px; height:476px; left:-40px; top:100px; border-radius:0; opacity:0; } .homeeventroll4 > li:nth-child(5){ width:370px; height:676px; left:464px; top:0; border-radius:0; opacity:0.17; } .homeeventroll4 > li:nth-child(6){ width:463px; height:466px; left:930px; top:379px; border-radius:50%; opacity:1;} .homeeventroll4 > li:nth-child(1){ width:400px; height:435px; left:1520px; top:161px; border-radius:0; opacity:1;} .homeeventroll4 > li:nth-child(2){ width:370px; height:676px; left:2016px; top:0; border-radius:0; opacity:1;} .homeeventroll4 > li:nth-child(3){ width:463px; height:466px; left:2486px; top:379px; border-radius:50%; opacity:0;} .homeeventroll5 > li:nth-child(5){ width:400px; height:476px; left:-40px; top:100px; border-radius:0; opacity:0; } .homeeventroll5 > li:nth-child(6){ width:370px; height:676px; left:464px; top:0; border-radius:0; opacity:0.17; } .homeeventroll5 > li:nth-child(1){ width:463px; height:466px; left:930px; top:379px; border-radius:50%; opacity:1;} .homeeventroll5 > li:nth-child(2){ width:400px; height:435px; left:1520px; top:161px; border-radius:0; opacity:1;} .homeeventroll5 > li:nth-child(3){ width:370px; height:676px; left:2016px; top:0; border-radius:0; opacity:1;} .homeeventroll5 > li:nth-child(4){ width:463px; height:466px; left:2486px; top:379px; border-radius:50%; opacity:0;} .homeeventroll6 > li:nth-child(6){ width:400px; height:476px; left:-40px; top:100px; border-radius:0; opacity:0; } .homeeventroll6 > li:nth-child(1){ width:370px; height:676px; left:464px; top:0; border-radius:0; opacity:0.17; } .homeeventroll6 > li:nth-child(2){ width:463px; height:466px; left:930px; top:379px; border-radius:50%; opacity:1;} .homeeventroll6 > li:nth-child(3){ width:400px; height:435px; left:1520px; top:161px; border-radius:0; opacity:1;} .homeeventroll6 > li:nth-child(4){ width:370px; height:676px; left:2016px; top:0; border-radius:0; opacity:1;} .homeeventroll6 > li:nth-child(5){ width:463px; height:466px; left:2486px; top:379px; border-radius:50%; opacity:0;} */ .Home section > div.main2 > div > div .text { position:relative; width: 100%; min-height: 100vh; left: 0; top: 0; display: flex; align-items: center; } .Home section > div.main2 > div > div .text > div{ margin-left:20px; margin-top:160px; margin-bottom:160px; } .Home section > div.main2 > div > div .text > div > h2{ font-size:54px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.43; letter-spacing: normal; text-align: left; color: #000; } .Home section > div.main2 > div > div .text > div > h2 > span{ color:#2659ff;} .Home section > div.main2 > div > div .text > div > p{ margin-top:40px; font-size: 24px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.73; letter-spacing: normal; text-align: left; color: #000; } /* .Home section > div.main2 > div > div .text > div > nav > a { margin-top:50px; width:186px; height:46px; display:flex;align-items: center; justify-content:space-between; background-color:#fff; border:1px solid #000; font-size: 22px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: normal; color: #000; text-transform:uppercase; position:relative; } .Home section > div.main2 > div > div .text > div > nav > a > .linktext{ display:inline-block; padding:24px 0; padding-left:40px; transition-duration:0.3s;} .Home section > div.main2 > div > div .text > div > nav > a > .linkicon{ transition-duration:0.3s; margin-right:90px; background-repeat:no-repeat; background-position:center center;} .Home section > div.main2 > div > div .text > div > nav > a:hover{ border-color:#004cff; color:#004cff;} .Home section > div.main2 > div > div .text > div > nav > a:hover > .linktext{ font-weight:900; padding:24px 70px; background-color:#004cff; color:#fff;} .Home section > div.main2 > div > div .text > div > nav > a:hover > .linkicon{ margin-right:20px; width:40px; background-image:url(//file.k-friends.kr/data/20220728/080946_0.svg); } .Home section > div.main2 > div > div .text > div > nav > a:hover > .linkicon img{ opacity:0;} */ /* .Home section > div.main2 > div > div .text > div > nav > a { margin: 50px auto; width: 226px; height: 66px; display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #004cff; font-size: 22px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: normal; color: #004cff; text-transform: uppercase; position: relative; } .Home section > div.main2 > div > div .text > div > nav > a > .linktext { display: inline-block; transition-duration: 0.3s; margin-right:20px; } .Home section > div.main2 > div > div .text > div > nav > a > .linkicon { transition-duration: 0.3s; background-repeat: no-repeat; background-position: center center; } .Home section > div.main2 > div .text > div > nav > a > .linkicon svg g path{ stroke: rgb(0, 76,255); } .Home section > div.main2 > div > div .text > div > nav > a:hover { font-weight: 900; background-color: #004cff; border:1px solid #004cff; color: #fff; justify-content:space-between; } .Home section > div.main2 > div > div .text > div > nav > a:hover > .linktext { margin-right:0; margin-left:28px; } .Home section > div.main2 > div > div .text > div > nav > a:hover > .linkicon { width: 70px; height:66px; background-color:#fff; background-image: url("//file.k-friends.kr/data/20220728/080946_0.svg"); } .Home section > div.main2 > div > div .text > div > nav > a:hover > .linkicon img { opacity: 0; } */ .Home section > div.main2 > div > div .text > div > nav > a { margin-top:70px; width:226px; height:66px; display:flex;align-items: center; justify-content:center; background-color:#fff; border:1px solid #004cff; font-size: 20px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: normal; color: #004cff; text-transform:uppercase; position:relative; } .Home section > div.main2 > div > div .text > div > nav > a > .linktext{ display:inline-block; padding:24px 0; margin-right:10px; transition-duration:0.3s;} .Home section > div.main2 > div > div .text > div > nav > a > .linkicon{ transition-duration:0.3s; margin-left:10px; background-repeat:no-repeat; background-position:center center;} .Home section > div.main2 > div > div .text > div > nav > a:hover{ background-color:#004cff; color:#004cff;} .Home section > div.main2 > div > div .text > div > nav > a:hover > .linktext{ font-weight:900; color:#fff;} /* .Home section > div.main2 > div > div .text > div > nav > a:hover > .linkicon{ margin-right:20px; width:40px; background-image:url(//file.k-friends.kr/data/20220728/080946_0.svg); } .Home section > div.main2 > div > div .text > div > nav > a:hover > .linkicon img{ opacity:0;} */ .Home section > div.main2 > div > div .text > div > nav > a > .linkicon svg g path{ stroke: rgb(0, 76,255); } .Home section > div.main2 > div > div .text > div > nav > a:hover > .linkicon svg g path{ stroke: rgb(255, 255,255); } /* main3 버전 맞추기 */ .Home section > div.main3 { width: 100%; float: left; background-color: #fff; position: relative; display:inline-block; } .Home section > div.main3 > div { width: 100%; margin: auto; display:flex; flex-wrap:wrap; } .Home section > div.main3 > div .img { width:100%; height:530px; align-items: center; justify-content: center; display:flex; } .Home section > div.main3 > div .img > div{} .Home section > div.main3 > div .img > div > video { transition-duration: 0.3s; display:inline-block; margin: 0 auto; object-fit:cover; border-radius: 60px; overflow:hidden; position:relative; width:430px; height:430px; } /* .Home section > div.main3 > div .img:hover > div > video { border-radius: 60px; } */ .Home section > div.main3 > div .text { margin:auto; justify-content: center; margin-bottom:100px; left: 0; top: 0; display: flex; align-items: flex-end; background-color: rgba(255,255,255,0.17); } .Home section > div.main3 > div .text > div { margin-left: 20px; } .Home section > div.main3 > div .text > div > aside { opacity: 0.27; font-size: 22px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.73; letter-spacing: normal; text-align: left; color: #000; } .Home section > div.main3 > div .text > div > h2 { font-size: 54px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.22; letter-spacing: normal; text-align: left; color: #000; } .Home section > div.main3 > div .text > div > h2 > span { color: #2659ff; } .Home section > div.main3 > div .text > div > p { margin: 20px 0; font-size: 24px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.73; letter-spacing: normal; text-align: left; color: #000; } .Home section > div.main3 > div .text > div > nav { display: flex; margin-top: 50px; margin-bottom:80px; } .Home section > div.main3 > div .text > div > nav > a { margin-right: 20px; } .Home section > div.main3 > div .text > div > nav>a>img{ width: 230px; } .pc{ display: none; height:100vh; } .hp{ display: block; height:100vh; } .HomeEventlist > li:nth-child(5){display: none;} .HomeEventlist > li:nth-child(6){display: none;} .HomeEventlist > li:nth-child(7){display: none;} .Home section > div.main1, .Home section > div.main2, .Home section > div.main3{ display: none; } section{ margin-bottom: 40px; } /* .fex{ background-color: rgba(0,0,0,.7); width: 100vw; height: 100vh; position: fixed; z-index: 420; } .fex>ul{ position: absolute; z-index: 99; width:90%; max-width: 560px; max-height: 80vh; overflow:auto; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 420; } .fex>ul>li>img{ max-width: 550px; width: 100%; max-height: 816px; z-index: 420; }*/ .fex{position:fixed; display:flex; max-width:100%;justify-content:center;align-items: center; width:100%; height:100%; left:0; top:0; z-index:1000; flex-wrap:wrap; background-color:rgba(0,0,0,0.3);} .fex > div { text-align: center; overflow: hidden; } .fex > div>img{ max-width:640px; } .fex > div > h1 { color: #000; font-size: 28px; text-align: center; width: 640px; font-weight: 500; letter-spacing: -1px; } .fex > div > h2 { color: #000; font-size: 22px; text-align: left; padding-left: 20px; margin-bottom: 16px; font-weight: 900; letter-spacing: -1px; } .fex > div > h1.blackfex { text-align: left; padding-left: 20px; color: #000; width: 100%; font-weight: 600; font-size: 40px; letter-spacing: -1px; line-height: 1.5; } .fex > div > h2{ font-size: 32px; font-weight: 450; } .fex > div > h1 > span{ display:inline-block; color: #000;} .fex > div > h2 > span{ display:inline-block; color: #000;} .fex > div > ul{ width:100%;} .fex > div > ul > li{ font-size:24px; color:#000; text-align:center; margin-top:16px;} .fex > div > ul > li > label{text-transform:uppercase; font-weight:800; font-size:26px;} .fex > div img{ margin-bottom: 16px; } .fex > div img { max-width: 640px; height: auto; } .fex > div svg{ margin-top: 20px; /* margin-bottom: 20px; */ } .fex > div svg g path{ fill: rgb(0, 0, 0); } .fex> div { position: relative; } .fex> div >a:last-child{ position: absolute; top: 9px; width: 32px; height: 32px; left: 27px; } .snbnewsletter1 > div > form > ul.agreeh{ display: block; font-size: 20px; } .snbnewsletter1 > div > form hr{ width: 560px; height: 1px; background-color: #000; } .snbnewsletter1 { margin-bottom: 22px; position: absolute; z-index: 99; left: 20px; bottom: 80px; background: rgba(255,255,255,.6); width: 560px; border-radius: 22px; padding: 20px; } .snbnewsletter1 > div > form > h2 { font-size: 30px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.33; letter-spacing: normal; text-align: left; color: #000; } .snbnewsletter1 > div > form > p { margin-top: 12px; font-size: 22px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.54; letter-spacing: normal; text-align: left; color: #000; } .snbnewsletter1 > div > form > ul > li > div > input { font-size: 20px; font-weight: 300; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; text-align: left; color: #000; width:340px; height: 44px; border: none;; margin-bottom: 6px; } .snbnewsletter1 > div > form > ul > li:last-child > div > input { width: 200px; } .snbnewsletter1 > div > form > ul { margin-top: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; flex-flow: wrap; } .snbnewsletter1 > div > form > nav{ display: flex; width:100%; } .snbnewsletter1 > div > form > nav > a { padding: 6px 22px; border-radius: 37px; font-size: 21px; font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; color: rgb(255 255 255); background: #000; display: flex; margin: 0 auto; min-width:120px; text-align:center; margin:auto; justify-content: center; } .snbnewsletter1 > div > form > ul.agreeh>li{ display: flex; justify-content: space-between; font-size: 18px; } .snbnewsletter1 > div > form > ul:nth-last-child(2)> li > div > div > label { position: relative; width: 150px; height: 46px; display: flex; float: left; border: 1px solid #000; margin-right: -1px; justify-content: center; align-items: center; z-index: 1; background-color: #f1f1f1; font-family: NotoSansKR; font-size: 19px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 2.21; letter-spacing: normal; text-align: left; color: rgba(0,0,0,0.3); border: none; margin-right: 10px; margin-bottom: 6px; } .snbnewsletter1 > div > form > ul:nth-last-child(2)> li > div > div > input{ display: none; }.snbnewsletter1 > div > form > ul:nth-last-child(2)> li > div > div > input[type="radio"]:checked + label { color: #004cff; border: 1px solid #004cff; z-index: 2; opacity: 1; background-color: #fff; } .Home section > .main0 > div > .img{background-image:linear-gradient(-70deg, #000, #000 49%, #333 50%, #000 51%, #000 100%); animation-name:videobackbg; animation-duration:1s; animation-iteration-count:infinite; animation-timing-function:linear;} @keyframes videobackbg { 0%{ background-position:0px;} 100%{ background-position:100vw;} }