/************************************************** * 버전관리 * version : v=18 * Last Update : 20260514 **************************************************/ /******************************************************** ■ 공통 ********************************************************/ /*-----기본-----*/ html{font-size:20px; overflow-x: hidden;} body{font-size:0.9rem} .mob{display:none !important;} .tablet{display:none !important;} #wrap{position:relative; line-height:1.5; overflow:hidden;} #wrap img { border:none; } #wrap i{vertical-align:middle;} .inner {width:74rem; padding: 0 1rem; margin:0 auto;} .swiper-button-next:after, .swiper-button-prev:after {display:none !important;} /* 배경 스크롤 방지 */ .no-scroll { overflow: hidden; } /*세팅*/ :root{ --main: #C0A031; --navy: #1C3350; --blue:#2563EB; --lblue:#EEF4FF; --gold:#C0A031; --lgold:#F3F1E9; --gold-gradiant: linear-gradient(90deg, #694E12 0%, #48360E 52.4%, #966E16 100%); --grey35: #353535; --grey56: #565656; --grey73: #737373; --grey89: #898989; --black:#45474A; --blueblack: #1B2C5C; --magenta: #B72569; } .fs_red{color:var(--magenta);} @media (max-width:1440px){ .inner {width:100%;} } @media (max-width:1024px){ html{font-size:17px;} body{font-size:1rem} #wrap{font-size:1rem;} .tablet{display:block !important;} .web{display:none !important;} } @media (max-width:768px){ html,body,#wrap{height:auto;} html{font-size:17px;} body{font-size:1rem; position:relative;} .web{display:none !important;} .mob{display:block !important;} } @media (max-width:390px){ /* -----공통----- */ html{font-size: 16px;} body{font-size: 1rem} } /* 버튼 스타일 */ .btn_default {display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.6rem 0.3rem; width: 100%; font-size: 0.85rem; font-weight: 600; border-radius: 0.4rem !important; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10) inset; transition: 0.3s cubic-bezier(0.79,0.14,0.15,0.86); border:none; cursor:pointer; overflow: hidden;position: relative; z-index: 0;} .btn_default [class*='icon_m'] {transition: 0.3s cubic-bezier(0.79,0.14,0.15,0.86);} .btn_default.navy { color: #fff; background:#112B45;} .btn_default.navy:is(:hover,:focus) {background:var(--blue);} .btn_default.gold_gradiant { color: #fff; background: linear-gradient(90deg, #92670A 0%, #997014 52.4%, #C0A031 100%);} .btn_default.gold_gradiant::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(151, 116, 0, 0.50) 0%, rgba(151, 116, 0, 0.50) 100%), linear-gradient(95deg, #9F8447 3.86%, #8F6300 44.7%, #9F8447 71.73%, #917537 82.4%, #694E12 98.75%); opacity: 0; transition: opacity 0.4s ease-in-out; z-index: -1;} .btn_default.gold_gradiant:is(:hover, :focus)::before { opacity: 1;} .btn_default.gold { color: #fff; background: var(--gold);} .btn_default.gold:is(:hover, :focus) {background:#b38100; box-shadow:unset;} .btn_default.lgold {background:var(--lgold); color:var(--gold); box-shadow:unset;} .btn_default.lgold [class*='icon_m'] {background-color:var(--gold);} .btn_default.lgold:is(:hover,:focus) {background:var(--gold); box-shadow:unset; color:#fff;} .btn_default.lgold:is(:hover,:focus) [class*='icon_m'] {background-color:#fff;} .btn_default.lgold_b {background:var(--lgold); color:#8C6000; box-shadow:unset; border:1px solid #8C6000;} .btn_default.lgold_b:is(:hover,:focus) {background:var(--gold); box-shadow:unset; color:#fff;} .btn_default.lgrey {background:#efefef; color:#999; box-shadow:unset;} .btn_default.lgrey:is(:hover,:focus) {background:#a7a7a7; color:#fff; } .btn_default.white {background:#fff; color:var(--navy); border: 1px solid var(--navy);} .btn_default.white:is(:hover,:focus) {background:var(--lblue); box-shadow:unset; color:var(--navy);} .btn_default.white_b {background:#fff; color:var(--gold); border: 1px solid var(--gold); box-shadow:unset;} .btn_default.white_b:is(:hover,:focus) {background:var(--lgold); box-shadow:unset; color:var(--gold);} .btn_default.white_g {background:#fff; border: 1px solid #B3B7BC; color:var(--grey35); box-shadow:unset;} .btn_default.white_g:is(:hover,:focus) {background:var(--lblue); box-shadow:unset; color:var(--navy);} .btn_default.grey {background:#B4B8BD; color:#fff;} .btn_default.grey:is(:hover,:focus) {background:#898989;} .btn_default.grey_b {background:#898989; color:#fff;} .btn_default.grey_b:is(:hover,:focus) {background:#B4B8BD;} .btn_default.red {background:#c92340; color:#fff;} .btn_default.red:is(:hover,:focus) {background:#ec475c; box-shadow:unset;} .btn_default.lred {background:#FAD4C1B2; color:#7A2E20; border: 1px solid #EEBBA2; box-shadow:unset;} .btn_default.lred:is(:hover,:focus) {background:#d85837; color:#fff; box-shadow:unset;} .btn_default.mint {background:rgba(211, 234, 242, 0.70); color:#1F3C4C; border:1px solid #9CCFDF; box-shadow:unset;} .btn_default.mint:is(:hover,:focus) {background:#98cfe1;} .btn_default.green {background:#BEE3DDB2; color:#1F5740; border:1px solid #A2D3CB; box-shadow:unset;} .btn_default.green:is(:hover,:focus) {background:#83c5bd; color:#fff;} .btn_default.lgreen {background:#D4E4DCB2; color:#2C5034; border:1px solid #A5CDB9; box-shadow:unset;} .btn_default.lgreen:is(:hover,:focus) {background:#c2d8ce;} .btn_default.violet {background:#D3D0F8; color:#02002A; border:1px solid #A19CE9; box-shadow:unset;} .btn_default.violet:is(:hover,:focus) {background:#a497ee;} .btn_default.large {padding:0.9rem 0.3rem;} .btn_default.w100 {max-width:unset !important; width:100% !important;} .heart {display:block; width:1.4rem; height: 1.25rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 29 27'%3E%3CforeignObject width='0' height='0' x='0' y='0'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(1.5px);clip-path:url(%23bgblur_0_10558_133_clip_path);height:100%25;width:100%25'/%3E%3C/foreignObject%3E%3Cpath fill='%23fff' d='M14.64 2.8a8.05 8.05 0 0 1 11.57.34 9.26 9.26 0 0 1 .3 12.17l-.3.33-8.65 9.23a4 4 0 0 1-5.84 0l-8.65-9.23a9.25 9.25 0 0 1 0-12.5 8.05 8.05 0 0 1 11.57-.33Zm10.1 1.7a6.05 6.05 0 0 0-8.73-.23l-.24.24c-.57.61-1.52.65-2.14.11l-.12-.11a6.06 6.06 0 0 0-8.98 0 7.25 7.25 0 0 0 0 9.76l8.65 9.23a2 2 0 0 0 2.92 0l8.65-9.23.23-.25a7.26 7.26 0 0 0-.23-9.51Z' data-figma-bg-blur-radius='3'/%3E%3Cdefs%3E%3CclipPath id='bgblur_0_10558_133_clip_path'%3E%3Cpath d='M14.64 2.8a8.05 8.05 0 0 1 11.57.34 9.26 9.26 0 0 1 .3 12.17l-.3.33-8.65 9.23a4 4 0 0 1-5.84 0l-8.65-9.23a9.25 9.25 0 0 1 0-12.5 8.05 8.05 0 0 1 11.57-.33Zm10.1 1.7a6.05 6.05 0 0 0-8.73-.23l-.24.24c-.57.61-1.52.65-2.14.11l-.12-.11a6.06 6.06 0 0 0-8.98 0 7.25 7.25 0 0 0 0 9.76l8.65 9.23a2 2 0 0 0 2.92 0l8.65-9.23.23-.25a7.26 7.26 0 0 0-.23-9.51Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-size:100% auto;} .heart.checked { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 29 27'%3E%3CforeignObject width='0' height='0' x='0' y='0'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(1.5px);clip-path:url(%23bgblur_0_0_1_clip_path);height:100%25;width:100%25'/%3E%3C/foreignObject%3E%3Cpath fill='%23DE3412' d='m3.8 15 8.7 9.2a3 3 0 0 0 4.3 0l8.7-9.2c2.9-3.1 2.9-8.1 0-11.2a7 7 0 0 0-10.5 0c-.2.3-.5.3-.8 0a7 7 0 0 0-10.4 0C.9 7 .9 11.8 3.8 15Z' data-figma-bg-blur-radius='3'/%3E%3CforeignObject width='0' height='0' x='0' y='0'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(1.5px);clip-path:url(%23bgblur_1_0_1_clip_path);height:100%25;width:100%25'/%3E%3C/foreignObject%3E%3Cpath fill='%23fff' d='M14.6 2.8a8 8 0 0 1 11.6.3 9.3 9.3 0 0 1 .3 12.2l-.3.3-8.6 9.3a4 4 0 0 1-5.7.1l-.2-.1-8.6-9.3A9.2 9.2 0 0 1 3 3.1a8 8 0 0 1 11.5-.3Zm10.1 1.7a6 6 0 0 0-8.7-.2l-.2.2c-.6.6-1.6.7-2.2.1a6 6 0 0 0-9 0 7.2 7.2 0 0 0 0 9.7l8.6 9.2.1.1c.8.7 2 .7 2.8-.1l8.6-9.2.3-.3a7.3 7.3 0 0 0-.3-9.5Z' data-figma-bg-blur-radius='3'/%3E%3Cdefs%3E%3CclipPath id='bgblur_0_0_1_clip_path'%3E%3Cpath d='m3.8 15 8.7 9.2a3 3 0 0 0 4.3 0l8.7-9.2c2.9-3.1 2.9-8.1 0-11.2a7 7 0 0 0-10.5 0c-.2.3-.5.3-.8 0a7 7 0 0 0-10.4 0C.9 7 .9 11.8 3.8 15Z'/%3E%3C/clipPath%3E%3CclipPath id='bgblur_1_0_1_clip_path'%3E%3Cpath d='M14.6 2.8a8 8 0 0 1 11.6.3 9.3 9.3 0 0 1 .3 12.2l-.3.3-8.6 9.3a4 4 0 0 1-5.7.1l-.2-.1-8.6-9.3A9.2 9.2 0 0 1 3 3.1a8 8 0 0 1 11.5-.3Zm10.1 1.7a6 6 0 0 0-8.7-.2l-.2.2c-.6.6-1.6.7-2.2.1a6 6 0 0 0-9 0 7.2 7.2 0 0 0 0 9.7l8.6 9.2.1.1c.8.7 2 .7 2.8-.1l8.6-9.2.3-.3a7.3 7.3 0 0 0-.3-9.5Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;} @media (max-width:768px){ /* 버튼 스타일 */ .btn_default {padding: 0.6rem;} } /*************************************************** ■ 헤더 ****************************************************/ /* -----기본----- */ #header{ height:auto; width:100%; background:var(--white); position: relative; z-index: 100;} #header:before {content:''; display:none; position:fixed; left:0; top:0;filter:alpha(opacity=96); background:#1b1c1c;opacity:0.5; width:100%;height:100%; z-index:0;} #header:is(.overlay):before {display:block;} #header.nofix{position:absolute;} #header .header_inner{ display: flex; flex-direction: column; position: relative; background: #fff;} #header .header_inner:after, #header .header_inner .header_top:after {content:"";display:block; height:1px; background:#D9D9D9; position:absolute;} #header .header_inner:after { width:100%; bottom:0; left:0;} #header .header_top, #header .header_bottom {width:100%; max-width:74rem; margin:0 auto; padding:0 1rem; position: relative;} @media (max-width:1440px){ #header:before {display:none;} #header .header_top, #header .header_bottom {width:100%;} } /* ----- 헤더 상단 ----- */ #header .gnb{background:#F0EFF1; height:2rem; font-size:0.75rem; position: relative; } #header .gnb .inner {display: flex;justify-content: space-between; height: 100%;} #header .gnb .gnb_r {display: flex; align-items: center; justify-content: flex-end; gap:1rem;} #header .gnb .gnb_l {display: flex; align-items: flex-end;} #header .gnb .mem_type_btn {display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0.6rem; height:1.35rem; background: #112B45; color:#fff; font-size: 0.75rem; border-radius: 0.75rem 0.75rem 0 0;} #header .gnb .mem_type_btn .mem_type_icon {display:block; width:0.95rem; height:1.1rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='22' fill='none'%3E%3Cg stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='.9' clip-path='url(%23a)'%3E%3Cpath d='M11 1.9a1.5 1.5 0 0 1-.9 1.4 1.5 1.5 0 0 1-2-1.1A1.5 1.5 0 0 1 8.7.7 1.5 1.5 0 0 1 11 1.9ZM6.4 7V5.6a1.7 1.7 0 0 1 1-1.5L8 4h3a1.6 1.6 0 0 1 1.6 1l.1.7V7M7.8 7V5.7M11.3 7V5.7M4.2 18c.9 0 1.5-.6 1.5-1.5 0-.8-.6-1.4-1.5-1.4-.8 0-1.4.6-1.4 1.4 0 .9.6 1.5 1.4 1.5ZM1 21.6v-1.2a1.7 1.7 0 0 1 1-1.6l.7-.1h3a1.7 1.7 0 0 1 1.7 1.7v1.2M2.5 21.6v-1.2M6 21.6v-1.2M15 18c.8 0 1.4-.6 1.4-1.5 0-.8-.6-1.4-1.5-1.4-.8 0-1.4.6-1.4 1.4 0 .9.6 1.5 1.4 1.5ZM11.8 21.6v-1.2a1.7 1.7 0 0 1 1.6-1.7h3a1.7 1.7 0 0 1 1.7 1.7v1.2M13.2 21.6v-1.2M16.7 21.6v-1.2M.7 14.8A9.2 9.2 0 0 1 4 5M14.6 4.7a9.1 9.1 0 0 1 3.8 9.5M9.5 9H5.6v4.6h4V9.1Z'/%3E%3Cpath d='M13.5 9h-4v4.6h4V9.1ZM7 10.4h1.2M7 11.6h1.2M10.9 10.4h1.2M10.9 11.6h1.2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h19v22H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center center; background-size:100% auto;} #header .gnb .g-sns{display:flex; gap:0.6rem;} #header .gnb .g-sns img{height:clamp(1.05rem, 0.943rem + 0.286vw, 1.2rem)} #header .gnb .line {width:1px; height:0.7rem; background:#c6c6c6;} #header .gnb .how_to_use {display:flex; gap:0.3rem; align-items: center; color:#3E4345; font-weight:500; font-size:0.75rem;} #header .gnb .how_to_use:hover, #header .gnb ul li.sign a:hover{text-decoration:underline; text-underline-position: under;} #header .gnb .how_to_use .use_icon {display:block; width:0.8rem; height:0.8rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3E%3Cpath fill='%231C3350' d='M8 .5a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.6 4.8c0-.3.3-.6.6-.6s.6.3.6.6v4c0 .3-.3.6-.6.6a.6.6 0 0 1-.6-.6v-4ZM8.7 12l-.1.3-.3.1-.3.1h-.3a1 1 0 0 1-.3-.2l-.1-.3-.1-.3v-.3l.2-.3.3-.1h.6l.3.1.1.3.1.3v.3Z'/%3E%3C/svg%3E") no-repeat center center; background-size:100% auto;} #header .gnb .ams{} #header .gnb ul{display: inline-flex; align-items: center; justify-content: flex-end; gap:1.5rem; text-align: right; font-size:0.7rem; font-weight: 600;} #header .gnb .join a {display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; height:1.3rem; background:var(--main); color:#fff; border-radius:3rem;} #header .g_menu {color:#232323; font-weight:500; font-size:0.9rem; position:relative;} #header .g_menu > a {display: flex; align-items: center; gap: 0.2rem;} #header .g_menu .num {display: block; width: 15px; height: 15px; background: var(--main); border-radius: 100%; font-size: 11px; display: flex; align-items: center; justify-content: center; position: absolute; top: -5px; right: -8px; color: #fff;} /* ----- 헤더 알림창 ----- */ .alarm_box{ position:absolute; left:calc(50% - 9rem); top:2rem; z-index:100; display:flex; flex-direction: column; width:16rem; height:27rem; border-radius:0.3rem; overflow:hidden; border:1px solid #dadada; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.30); background:#fff; -webkit-transform-origin: 29px -50px; transform-origin: 29px -50px; -webkit-transform: scale(.8) !important; transform: scale(.8) !important; -webkit-transition: all 270ms cubic-bezier(.34,1.25,.3,1); transition: all 270ms cubic-bezier(.34,1.25,.3,); opacity: 0; visibility: hidden;} .alarm_box .alarm_close {display: flex; align-items: center; justify-content: center; width:1.3rem; height:1.3rem; border-radius:100%; background: rgba(255, 255, 255, 0.90); color:#353535; font-size: 0.8rem; position: absolute; top: 0.5rem; right: 0.5rem;} .alarm_box .alarm_close > i {font-weight: 800;} .alarm_box .alarm_top{display: flex; align-items: center; justify-content: center; height:4rem; font-weight: 600; color:#fff; font-size: 1.05rem; border-radius: 0.3rem 0.3rem 0rem 0rem; background: linear-gradient(0deg, rgba(151, 116, 0, 0.50) 0%, rgba(151, 116, 0, 0.50) 100%), linear-gradient(95deg, #9F8447 3.86%, #8F6300 44.7%, #9F8447 71.73%, #917537 82.4%, #694E12 98.75%);} .alarm_box .alarm_top:before{content:""; position:absolute; left:-1rem; top:-1rem; opacity:0.5; width:3.15rem; height:3.7rem; background-color:#fff; forced-color-adjust: none; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(/images/default/main/g_alarm.svg); mask-image: url(/images/default/main/g_alarm.svg);} .alarm_box .alarm_body{flex:1; overflow-y:auto; padding:0.5rem; text-align:left;} .alarm_box .alarm_body::-webkit-scrollbar {width:5px;height:3px;background-color:#eae9e9;} .alarm_box .alarm_body::-webkit-scrollbar-thumb {background-color:rgba(140,96,0,0.5); -webkit-border-radius:3px;border-radius:3px;} .alarm_box .alarm_body::-webkit-scrollbar-thumb:hover{background-color:rgba(140,96,0,0.7);} .alarm_box .alarm_btn{display: flex; align-items: center; justify-content: flex-end; padding:0.5rem 0.6rem; background:#fff; border-top: 1px solid #B3B7BC; box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.2);} .alarm_box .alarm_btn a{color: #8C6000; font-size: 0.7rem; font-weight: 600; } .alarm_box .alarm_btn a:hover{} .alarm_box .item{position:relative; border-radius: 0.3rem; border: 1px solid #EEE; background: #F0EFF1; display:flex; gap:0.5rem; padding:0.5rem; } .alarm_box .item + .item{margin-top:0.5rem;} .alarm_box .item .user{flex-shrink: 0; position:relative; border-radius: 0.2rem; border: 0.359px solid #E2E2E2;width: 3.3rem; height: 3.3rem; background-repeat:no-repeat; background-size:cover; background-position: top center;} .alarm_box .item .user .new{position:absolute; right:-0.2rem; top:0rem; width:0.5rem; height:0.5rem; background:rgba(140, 96, 0, 1); outline:3px solid rgba(251, 245, 233, 1); border-radius:50%;} .alarm_box .item .text{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; color:#232323;} .alarm_box .item .text .name{padding-right: 1rem; font-size: 0.8rem; font-weight: 600;} .alarm_box .item .text .cont{font-size: 0.7rem; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .alarm_box .item .text .date{font-size: 0.65rem; font-weight: 800; color: #737373;} .alarm_box .item button{ position:absolute; right:0.25rem; top:0.35rem; width:1.5rem; height:1.5rem; border-radius:50%; background: rgba(0, 0, 0, 0.60) url('/images/default/main/icon_trash.svg')no-repeat 50% 50%; background-size:1.2rem;} .alarm_box .item button:hover{background-color:var(--main);} .alarm_box .item.read{background: #F1F1F1;} .alarm_box .item.read .user .new{outline:3px solid #F1F1F1;} .alarm_box.active{ -webkit-transform: scale(1) !important; transform: scale(1) !important; opacity: 1; visibility: visible;} .alarm_box:has(.no_item) .alarm_body{background: #F1F1F1;} .alarm_box:has(.no_item) .alarm_btn{display:none;} .alarm_box .no_item{ height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap:1rem; font-size: 0.8rem;} .alarm_box .no_item img {} /*헤더 마이페이지 드롭메뉴*/ #wrap .drop-menu {display:none; position: absolute; top: 100%; left: 50%;z-index: 106; min-width: 10.5rem; border-radius: 0.5rem; padding: 0.5rem; margin-top: 0.8rem; background-color: #fff; border: 1px solid #ddd; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; transform: translateX(-50%);} #wrap .drop-menu.active {display:block;} #wrap .drop-menu:before {content: "";width: 0.6rem;height: 0.6rem;position: absolute;bottom: 100%;left: 50%; display: block; margin-bottom: -0.3rem; margin-left: -0.3rem; transform: rotate(-135deg); background-color: #fff; border: 1px solid #ddd; border-top-color: transparent; border-left-color: transparent; transition: 0.3s cubic-bezier(0.79,0.14,0.15,0.86);} #wrap .drop-menu .drop-in {display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 0.4rem; position: relative; z-index: 1;} #wrap .drop-menu .drop-top {padding: 0 0 0.4rem; width: 100%; text-align: left; border-bottom: 1px solid #ddd;} #wrap .drop-menu .drop-bottom { display: flex; align-items: flex-start; justify-content: center; flex-direction: row; width: 100%; padding: 0.4rem 0; border-top: 1px solid #ddd;} #wrap .drop-menu .drop-list {flex-wrap: wrap; gap: 0.25rem; padding: 0; width: 100%;} #wrap .drop-menu .drop-list li {width:100%;} #wrap .drop-menu .drop-list .item-link { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: 0.4rem; padding: 0.15rem; width: 100%; font-size: 0.78rem; border-radius: 0.3rem; height: auto; background-color: #fff; transition: 0.3s cubic-bezier(0.79,0.14,0.15,0.86);} #wrap .drop-menu .drop-list .item-link:is(:hover,:focus) {background:#F0F0F0;} .drop-menu .my-name{font-size: 0.95rem; font-weight: 700;} .drop-menu .my-time{font-size: 0.75rem;} .drop-menu .my-time dt{ margin-bottom: 0.2rem; color: #464c53;} .drop-menu .my-time dd{display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 0.4rem;} .drop-menu .my-time .time{ display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: 0.1rem; color: #0b50d0;} .drop-menu .my-time .time:before{display: inline-flex; content: ""; width: var(--krds-icon--size-small); height: var(--krds-icon--size-small); background: url(/images/krds/ico_time.svg) center; background-size: contain;} /* 헤더상단 메뉴 아이콘 */ [class^="g_"] {display: inline-block; flex-shrink: 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; vertical-align: middle; position:relative;} .g_alarm {width:1rem; height:1.15rem; background-image:url('/images/default/main/g_alarm.svg');} .g_cart {width:1.15rem; height:1.05rem; background-image:url('/images/default/main/g_cart.svg');} .g_mypage {width:0.95rem; height:1rem; background-image:url('/images/default/main/g_mypage.svg');} /* 로고, 검색창, 배너 영역 */ #header .header_top {display: flex; align-items: center; justify-content: space-between; height:4.5rem} #header .header_top:after {width:100vw; bottom:0; left:50%; transform:translate(-50%,0);} #header .logo a {display:block; height:3.45rem;} #header .logo img{width:100%; height: 100%;} /* 검색창 */ .search_area{display: flex; align-items: center; justify-content: center; gap: 1.1rem; width: 100%;position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); pointer-events: none;} .search_area p{display:inline-block; font-size:18px; line-height:3rem; vertical-align:middle; color:#00d6ef; margin-right:20px; font-weight:500;} .search_area form {width: 100%; max-width: 27.02%; position: relative; pointer-events: auto;} .search_area .search_input_wrap input {display:inline-block; vertical-align:middle; padding-left: 1.25rem; padding-right: 3.5rem; height: 2rem; overflow:hidden; border:none; width:100%; border-radius:1rem; outline: 2px solid var(--grey56); background-color:#fff; box-sizing:border-box; color: #898989;font-weight: 300; box-shadow: 0 4px 10px 0 rgba(71, 57, 26, 0.10);} .search_area .inbtn { display: flex; align-items: center; justify-content: center; width:2rem; height:2rem; color: #fff; font-size: 1.1rem; background: var(--main); border-left:none; border-radius:1rem; position: absolute; top:50%; right:0 ; transform: translateY(-50%);} .search_area input[type=search]::-webkit-search-cancel-button {-webkit-appearance: none; cursor: pointer; width:1rem; height:1rem; background: url("/images/default/main/sch_close.svg") no-repeat center center; background-size:100% auto;} .search_area .closeBtn {display:none;} .guide_book_btn {} .guide_book_btn button {display:flex; flex-direction: column; align-items: center; font-weight: 600;line-height: 1.3; font-size:0.9rem;} .guide_book_btn .g_book_icon {display:block; width:1.1rem; height:1.15rem; background:url('/images/default/main/icon_guide.svg') no-repeat center center; background-size:100% auto;} /* 배너존 */ .left_menu {width:17.83%;} .left_menu .searchBtn, .left_menu .mob_ban, .left_menu .guide_book_btn {display:none;} .header_banner {margin-right: 1rem; width:100%; position:relative;} .header_banner a{display: flex; padding: 0.5rem 0.7rem; justify-content: center; align-items: center; gap: 0.4rem; font-size: clamp(0.75rem, 0.679rem + 0.19vw, 0.85rem); font-weight: 600; color: #FFF; border-radius: 0.5rem; background: #112B45; line-height: 1.2; transition: all 0.2s ease-out 0s;} .header_banner a:hover{opacity:.9;} .left_menu .mem_type_icon{flex-shrink: 0; display:inline-block; width:1.2rem;aspect-ratio: 1; background:url('/images/default/main/icon_people.svg') no-repeat center center/100%; } @media (max-width:1600px){ /*헤더 마이페이지 드롭메뉴*/ #wrap .drop-menu {left:auto; right:0; transform: unset;} #wrap .drop-menu:before {left:auto; right:1rem;} } @media (max-width:1440px){ } @media (max-width:1024px){ /*헤더 마이페이지 드롭메뉴*/ #wrap .drop-menu {min-width: 12rem;} #wrap .drop-menu .drop-top {font-size:1rem;} #wrap .drop-menu .drop-list .item-link {font-size:0.88rem;} .drop-menu .my-name {font-size:1.11rem;} /* 로고, 검색창, 배너 영역 */ #header .header_top {height: 4rem; padding: 0 1rem; padding-left:3rem;} /* 검색창 */ .search_area { position: fixed; left: 50%; top: -100%; transform: translate(-50%, 0); width: 100vw; max-width: unset; height: 6.75rem; padding: 0 5rem; font-size: 1rem; background: #fff; border-top: 1px solid #ddd; z-index: 99999; box-shadow: 0px 3px 7px rgb(0 0 0 / 11%);} .search_area.open {top: 0;} .search_area .search_input_wrap input {outline: none; border-bottom: 2px solid var(--grey56); height: 3rem; padding: 0 2rem 0 0.5rem; border-radius:0; box-shadow: unset;} .search_area form {max-width: unset; height: 100%; display: flex; align-items: center; justify-content: center} .search_area form fieldset { display: flex; align-items: center; width: 100%;} .search_area .search_input_wrap { display: flex; gap: 1rem; align-items: center; margin: 0 auto; width:100%; height: 100%; position: relative;} .search_area .typeahead__field {width:100%;} .search_area a.inbtn {display:none;} .search_area .closeBtn {display:flex; position: absolute;top: 50%; right: 2rem; transform: translate(0, -50%); font-size: 2rem; color: var(--black); cursor: pointer;} .search_area .inbtn{flex-shrink: 0; } .search_area .guide_book_btn {display:none;} /* 배너존 */ .left_menu {display:flex; align-items:center; gap: 1rem; width:auto;} .left_menu .searchBtn {display: flex; align-items: center; font-size: 1.5rem; appearance: none; color: inherit; position: absolute; top: 50%; right: 4.5rem; transform: translateY(-50%);} .guide_book_btn .g_book_icon {width:1.25rem; height:auto; aspect-ratio:22/23} .left_menu .guide_book_btn {display:flex;} .left_menu .guide_book_btn .g_book_bubble {position: absolute; bottom: -1.5rem; right: 1rem; background:#1C3350; display: block; width: 6rem;border-radius: 0.5rem; padding: 0.5rem 0 0.4rem;text-align: center;line-height: 1.2; color:#fff; font-size: 0.88rem; font-weight: 700; transform:translate(0,0); animation: goblin_bubble 0.8s infinite alternate; z-index: 50; } .left_menu .guide_book_btn .g_book_bubble:after {content: ''; display: block; width: 0; height: 0; position: absolute; top: -0.2rem; right:0; transform: translate(0, -50%); z-index: 1; border-bottom: 0.8rem solid#1C3350; border-top: 0.5rem solid transparent; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent;} .left_menu .mob_ban{display:block; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); background: #112B45; border-radius: 0.5rem; padding: 0.5rem 0.7rem;} @keyframes goblin_bubble { 0% { transform:translate(0,0);} 100% { transform:translate(0,0.5rem);} } .header_banner {display:none;} } @media (max-width:768px){ /* 로고, 검색창, 배너 영역 */ #header .header_top {height: 3.6rem; padding: 0 3rem; justify-content: center;} #header .logo a {height:auto;} #header .logo img{width: 7rem;} /* 검색창 */ .left_menu .searchBtn{right:4rem;} .search_area {padding: 0 4rem 0 1rem;} .search_area .closeBtn{right:0.5rem;} #header .gnb {height:auto;} #header .gnb .inner {padding: .5rem 1rem;} #header .gnb ul{position:relative; font-size:0.88rem} #header .gnb .mem_type_btn {font-size:0.88rem} #header .gnb .join a {height: 1.6rem; padding:0 1rem;} #header .gnb .how_to_use {font-size:0.88rem;} #header .g_menu.alarm_btn{position: static;} #header .g_menu > a{position:relative;} #header .gnb .mem_type_btn, #header .gnb .how_to_use, #header .gnb .ams, #header .gnb .line {display: none;} .alarm_box{left:auto; width:calc(100vw - 3rem); right: 0;} .alarm_box .alarm_top{font-size:1.2rem;} .alarm_box .item .text .name{font-size:1rem;} .alarm_box .item .text .cont{font-size:0.85rem;} .alarm_box .item .text .date{font-size:0.8rem;} .alarm_box .alarm_btn a{font-size: 0.85rem; } #header .gnb .g-sns{display:none;} } @media (max-width: 480px){ .alarm_box {width: calc(100vw - 2rem);} } /* ----- 헤더 하단 ----- */ #header .header_bottom {display: flex; justify-content: center; align-items: center;} /* 네비게이션 */ #nav ul {display:flex; gap:3.5rem;} #nav ul li {position:relative;} #nav ul li > div > a {display:flex; align-items: center; gap: 0.5rem; height: 3rem; color:#565656; font-weight: 600; position:relative; transition: 0.3s cubic-bezier(0.79,0.14,0.15,0.86); } #nav ul li:is(.on,.active,:focus) > div > a {color:var(--navy);} #nav ul li ul {display:none;flex-wrap: wrap; gap: 0.3rem 0.8rem;margin-left:0; position: absolute; padding: 0 0 1rem; width: 100vw; max-width:13.3rem;left:0; top:3rem; box-sizing:border-box; text-align:center; height:auto; display: none; animation-name: slide_down; animation-duration:0.5s; animation-duration: linear; animation-direction: alternate; animation-fill-mode: forwards; z-index:1; } #nav ul li ul a {display: block; padding: 0.3rem 0.7rem; color: #45474A; font-size: 0.85rem; letter-spacing: -0.03em; text-align: left; background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(2px); border-radius: 0.3rem; border: 1px solid #fff; transition: .35s;} #nav ul li ul li:has(ul){padding: 0.3rem 0.7rem 0.7rem; background: rgba(255, 255, 255, 0.90); border-radius: 0.3rem; border: 1px solid #fff; backdrop-filter: blur(2px); transition: .35s;} #nav ul li ul li:has(ul):before{content:""; position:absolute; left:0px; top:0px; width:0px; height: 2.4rem; background:var(--main); transition: .35s;} #nav ul li ul li:has(ul) > a{position: relative; padding: 0.5rem 0; backdrop-filter: none; background:transparent; border:none;} #nav ul li ul li:has(ul) > a:before, #nav ul li ul li:has(ul) > a:after{right:0;} #nav ul li ul li:has(ul) ul{display:flex !important; position:relative; top: auto; max-width: 100%; padding: 0 1rem; gap: 0; background:#fff; border-radius: 0.4rem 0.4rem 0.4rem 0;} #nav ul li ul li:has(ul) ul li a{ padding: 0.5rem 0rem; font-size: 0.8rem; transition: none;} #nav ul li ul li:has(ul) ul li a:before{right:0; width:0.85rem; height:0.75rem; forced-color-adjust: none; mask: url(/images/default/main/icon_nav-arrow.svg)no-repeat 50% 50%/100%;} #nav ul li ul li:has(ul) ul li a:after{display:none;} #nav ul li ul li:has(ul) ul li:not(:first-child){border-top:1px solid #D9D9D9;} #nav ul li ul li:has(ul):hover{background:var(--navy); border-color:var(--navy)} #nav ul li ul li:has(ul):hover:before{width:10px; left:-11px;} #nav ul li ul li:has(ul):hover > a, #nav ul li ul li:has(ul):hover > a:hover{color:#fff; box-shadow:none; } #nav ul li ul li:has(ul):hover > a:before {height:3px; background:var(--main);} #nav ul li ul li:has(ul):hover > a:after {height:3px; transform: translateY(-50%) rotate(-90deg); background:var(--main);} #nav ul li ul li:has(ul):hover ul li a:hover{background:none; border:none; box-shadow:none; font-weight: 600; color: #45474A;} #nav ul li ul li:has(ul):hover ul li a:hover:before{background:var(--main); width:0.85rem; height:0.75rem;} #nav ul li ul a:before {content:''; display:block; width:0.65rem; height:2px; border-radius:2rem; background:#45474A; position:absolute; top:50%; right:1rem; transform:translateY(-50%); transition: .35s;} #nav ul li ul a:after {content:''; display:block; width:0.65rem; height:2px; border-radius:2rem; background:#45474A; position:absolute; top:50%; right:1rem; transform:translateY(-50%); transition: .35s;} #nav ul li ul a:hover:after {transform: translateY(-50%) rotate(-90deg);} #nav ul li ul a:hover {background:var(--navy); color:#fff; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: -10px 0px 0 0 var(--main); border-color:var(--navy);} #nav ul li ul a:hover:before {height:3px; background:var(--main);} #nav ul li ul a:hover:after {height:3px; transform: translateY(-50%) rotate(-90deg); background:var(--main);} #nav ul li.active ul li a:has(strong) {background:var(--navy); color:#fff; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: -10px 0px 0 0 var(--main); border:none;} #nav ul li.active ul li a:has(strong):before {height:3px; background:var(--main);} #nav ul li.active ul li a:has(strong):after {height:3px; transform: translateY(-50%) rotate(-90deg); background:var(--main);} #nav ul li.active ul li:has(ul) a:has(strong){background:#fff; color:var(--navy); box-shadow:none;} #nav ul li.active ul li:has(ul) a:has(strong):before{height:0.75rem;} #nav ul li.active ul li:has(ul) a:has(strong):after{display:none;} #nav ul li ul.menu_lot { max-width: 28.1rem;} #nav ul li ul.menu_lot li {width: calc((100% - 1.5rem * 1) / 2);} #nav ul li ul li {width: 100%;} #header .header_inner #nav ul li ul li a:before{content:""; display:block; clear:both;} #header .header_inner #nav ul li ul li a:hover{opacity:1;} @keyframes slide_down { from { transform: translateX(0px) translateY(-30px); opacity:0; } to { transform: translateX(0px) translateY(0px); opacity:1; } } @media (max-width:1440px){ #nav ul {gap:1.5rem;} #nav ul li ul {left: -2rem;} } @media (max-width:1024px){ #header .header_bottom {height: 0; position: static;} #nav ul {display:none;} } /******************************************************** ■ 전체메뉴 ********************************************************/ /*-----햄버튼-----*/ .btn-gnb-menu, .btn-gnb-menu-mob{width:1.3rem; height:0.65rem; cursor:pointer; z-index:99;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s; position:absolute; left:1rem; top:50%; transform: translateY(-50%); } .btnAll {position:relative; display:block; width:1.3rem; height:0.65rem; margin:0 auto; top:50%; transform:translateY(-50%);outline: none; z-index:9999;} .btnAll span { display: inline-block; width: 100%; height: 3px; position: absolute; background-color: var(--grey56); border-radius:3rem; -webkit-transition: all 0.25s; transition: all 0.25s; } .btnAll > span:nth-child(1) { top: 0; right:0;} .btnAll > span:nth-child(2) {display:none;} .btnAll > span:nth-child(3) {bottom:0; right:0;} #header.open .btnAll > span{background:#fff;} #header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;} #header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;} #navi .btn-gnb-menu {transform: unset; top: 5%; left: auto; right: 5%;} /*사이트맵*/ #header #navi{ position:fixed; top:0; right:0; display: flex; flex-direction: row-reverse; justify-content: center; width:100%; height:100%; padding-top:0; overflow:hidden; z-index:200; opacity:0; visibility: hidden; transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98); backdrop-filter: blur(40px);} #header #navi:after {content:''; display:block; width:100vw; height:100vh; background:#000; opacity:0; position:absolute; top:-100%; left:50%; transform:translateX(-50%); transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98); z-index:-1;} #header.open #navi {visibility: visible; opacity: 1;} #header.open #navi:after {top:0; opacity: 0.7;} #menuAll .mobile_top{width:95%;position:relative; display: flex; } #menuAll .mobile_top .mbtop{width: 100%; display: flex; justify-content: flex-end; flex-wrap: wrap; align-self: center; gap: 5rem 0;} #menuAll .mobile_top .mbtop > li{display: flex; align-items: flex-start; flex-wrap: wrap; flex-direction: column; padding:0 1rem 0 2vw; width: calc(100%/3); position: relative; transition: all 0.5s; transform: translate3d(0%, 10rem, 0px); opacity:0; z-index:0;} #menuAll .mobile_top .mbtop > li:after {content: ''; display:block; width: 1px; height: 200vh; position: absolute; top: 50%; left: 0; background: rgba(255,255,255,0.07); transform: translateY(-50%);} #menuAll .mobile_top > ul > li > a{font-size: 1.7rem; line-height: 1.2; font-weight: 700; color: #fff; background-color: transparent; margin-bottom: 1.5rem; transition: all 0.5s;} #header.open #menuAll .mobile_top .mbtop > li > ul > li > ul {display:none;} #menuAll .mobile_top ul li > a:before{} #menuAll .mobile_top ul li ul{max-height: 40vh; overflow-y: auto; width: 100%; display:flex; flex-direction: column; transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);} #menuAll .mobile_top ul li ul::-webkit-scrollbar-track{background-color: rgba(255,255,255,0.2);} #menuAll .mobile_top ul li ul::-webkit-scrollbar{ width: 5px; background-color: rgba(255,255,255,0.2);} #menuAll .mobile_top ul li ul::-webkit-scrollbar-thumb{background-color: #fff;} #menuAll .mobile_top ul li ul li a{ display:block; background:none;font-size:1rem; font-weight: 300; line-height: 1.3; transition: all 0.3s; text-align: left; padding:0.5rem 0; color:rgba(255,255,255,0.7);} #menuAll .mobile_top ul li ul li a:before{display:none; margin-right:0;} #menuAll .mobile_top ul li ul li a:hover{color:#fff;} #menuAll .mobile_top ul li ul li a strong {color:#fff;} #menuAll .mobile_top ul li a.newBlank:after {content: "\e980";font-family: 'xeicon' !important;font-weight: 400; vertical-align: middle; margin-left: 0.2rem;} #menuAll .mobile_top ul li.open_li.on > ul li a strong{color:#F5A900;} #menuAll .mobile_top ul li.open_li.on > a{color:#999; } #menuAll .mobile_top ul li.open_li.on > a strong{font-weight:700;} #menuAll .mobile_top ul li.open_li.on > a:before{width:60px; background:#999;} #header.open .header_bottom > .btn-gnb-menu {display:none;} #header.open #menuAll .mobile_top .mbtop > li {transform: translate3d(0%, 0%, 0px); opacity:1;} #header.open #menuAll .navi_addr:after {transform: translate3d(0%, -50%, 0px); opacity:1;} #header.open #menuAll .mobile_top .mbtop > li:nth-child(1){transition-delay: .3s;} #header.open #menuAll .mobile_top .mbtop > li:nth-child(2){transition-delay: .4s;} #header.open #menuAll .mobile_top .mbtop > li:nth-child(3){transition-delay: .5s;} #header.open #menuAll .mobile_top .mbtop > li:nth-child(4){transition-delay: .6s;} #header.open #menuAll .mobile_top .mbtop > li:nth-child(5){transition-delay: .7s;} #header.open #menuAll .mobile_top .mbtop > li:nth-child(6){transition-delay: .8s;} .navi_contact{display:none;position:absolute; right:2rem; bottom:2rem;} .navi_contact a{position:relative; display: flex; align-items: center; justify-content: center; color:var(--red); font-size:1.5rem; width:5rem; height:5rem; background:#fff; border-radius:50%;cursor:pointer; z-index:1;} .navi_contact svg{animation: roll 14s infinite linear; transition: all 0.3s; fill: #fff; position: absolute; height: auto; width: 180%; top: 50%; left: 50%; transform: translate(-50%, -50%);} @keyframes roll { 0% {transform: translate(-50%, -50%) rotate(0deg) ;} 100% {transform: translate(-50%, -50%) rotate(-360deg);} } @media (max-width:1024px){ .btn-gnb-menu{} #header #navi{flex-direction: column; } #header .btn-gnb-menu {display:block;} #navi .btn-gnb-menu {top: 1rem; right: 1rem;} #menuAll {display:block;} #menuAll .navi_addr{display:none; width:100%; order:2; padding: 0 1rem 1rem; font-size: 1rem;} #menuAll .mobile_top{flex-direction: column; width:100%; height: 100%; order:1; margin-top:3rem; padding:0 1rem; align-items: flex-start;} #menuAll .mobile_top .mbtop{flex-direction: column; gap: 0; margin-top:0; padding:1rem 0; justify-content: flex-start;} #menuAll .mobile_top .mbtop > li{flex-direction: column; align-items: flex-start; margin:0; width:100%;} #menuAll .mobile_top .mbtop > li:not(:first-child) {margin-top: 2rem;} #menuAll .mobile_top .mbtop > li:not(.nosub) > a:after{content: "\ea4e"; display:block;position:absolute; right:0px; top:0px; font-size:1.5rem; font-family: 'remixicon' !important; color:#fff;} #menuAll .mobile_top .mbtop > li.open_li > a:after{transform: rotate( 180deg );} #menuAll .mobile_top .sub_logo_sitemap {margin-top: 2rem; padding-left: 1rem; transform: translate3d(0%, 10rem, 0px); transition: all 0.5s 0.7s;} #header.open #menuAll .mobile_top .sub_logo_sitemap {transform: translate3d(0%, 0%, 0px);} #menuAll .mobile_top ul li > a{font-size:1.47rem; width: 100%;} #menuAll .mobile_top > ul > li > a {margin:0;} #menuAll .mobile_top .mbtop > li:after, #menuAll .mobile_top .mbtop > li:before{display:none;} #menuAll .mobile_top ul li ul{display:none; margin-top:1rem; margin-left:0.5rem; max-height: 30vh;} #menuAll .mobile_top ul li.open_li ul{display:block; margin-top: 1rem;} #menuAll .mobile_top ul li ul li{margin-left:0;} #menuAll .mobile_top ul li ul li a{ padding:0.4rem 0; font-size:1.23rem; color: rgba(255, 255, 255, 0.7)} .navi_contact{right:1rem; bottom:1rem;} } /* 모바일 헤더 */ .mob_modal_open {display: none;} .modal_drop_bg {display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); position: fixed; top: 0; left: 0; z-index: 100;} .mob_modal_menu {display: none; width: calc(100% - 2rem); max-width: 500px; padding: 26px; background: #fff; border-radius: 10px; position: fixed; top: 2.4rem; left: 50%; transform: translateX(-50%); z-index: 100;} .mob_modal_menu .btn_close_modal {display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(189, 189, 189, .2); position: absolute; top: 10px; right: 10px;} .mob_modal_menu .btn_close_modal i {display: block; width: 12px; height: 12px; background: url('/images/default/main/mob_modal_close.svg') no-repeat center/cover;} .mob_modal_menu .t_intro {margin-bottom: 16px; padding-right: 16px; font-size: 19px; font-weight: 600; color: #232323;} .mob_modal_menu .t_intro br {display: none;} .mob_modal_menu .menu_list > li {border-radius: 10px; overflow: hidden; position: relative;} .mob_modal_menu .menu_list > li::before {content: ''; display: block; position: absolute; top: 50%; right: 10%; transform: translateY(-50%);} .mob_modal_menu .menu_list > li + li {margin-top: 12px;} .mob_modal_menu .menu_list > li a {display: block; padding: 17px 20px; padding-right: 30%; color: #fff;} .mob_modal_menu .menu_list > li a .t_big {font-size: 18px; font-weight: 500;} .mob_modal_menu .menu_list > li a .t_sml {display: block; margin-top: 6px; font-size: 15px;} .mob_modal_menu .menu_list > li.how_to_use {background: linear-gradient(to bottom, #E7AA2A 60%, #F3C73D 102%);} .mob_modal_menu .menu_list > li.how_to_use::before {width: 90px; aspect-ratio: 90/71; background: url('/images/default/main/modal_img1.png') no-repeat center/cover;} .mob_modal_menu .menu_list > li.ams {background: linear-gradient(110deg, #1E006C 54%, #1C00AA 90%);} .mob_modal_menu .menu_list > li.ams::before {width: 82px; aspect-ratio: 82/71; background: url('/images/default/main/modal_img2.png') no-repeat center/cover;} .mob_modal_menu .menu_list > li.apply {background: linear-gradient(110deg, #002049 53%, #002D66 90%);} .mob_modal_menu .menu_list > li.apply::before {width: 73px; aspect-ratio: 73/63; background: url('/images/default/main/modal_img3.png') no-repeat center/cover;} /* 모바일 전체메뉴 */ .btn-gnb-menu-mob {display: none;} .btn-gnb-menu-mob .btnAll {width: 30px; height: auto; aspect-ratio: 30/19; background: url('/images/default/main/mob_ham.svg') no-repeat center/cover;} .menuAll_mob_drop_bg {display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; z-index: 110;} #menuAll_mob {display: none; width: 100%; height: 100%; max-width: 430px; background: #fff; position: fixed; top: 0; left: 0; z-index: 110; transform: translateX(-100%); transition: .3s;} #menuAll_mob.on {transform: translateX(0);} #menuAll_mob .mob_menu_top {display: flex; height: 60px;} #menuAll_mob .mob_menu_top .lt_wrap {flex: 1; display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 22px; font-size: 15px; color: #000; background-color: #FAFAFA;} #menuAll_mob .mob_menu_top .lt_wrap .username {font-weight: 600;} #menuAll_mob .mob_menu_top .btn_log, #menuAll_mob .mob_menu_top .btn_register {display: flex; align-items: center; justify-content: center; padding: 3px 12px;background: var(--main); font-weight: 300; color: #fff; border-radius: 3rem;} #menuAll_mob .mob_menu_top .btn_close_mob_menu {display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background-color: #1B2C5C;} #menuAll_mob .mob_menu_top .btn_close_mob_menu i {display: block; width: 17px; height: 17px; background: url('/images/default/main/mob_menu_close.svg') no-repeat center/cover;} .mob_nav {height: calc(100% - 60px - 105px); position: relative;} #menuAll_mob:has(.mob_menu_bot a.apply) .mob_nav {height: calc(100% - 60px - 189px);} .mob_nav::before {content: ''; display: block; width: 1px; height: 100%; background: #ddd; position: absolute; top: 0; left: 45%;} .mob_nav > ul > li {display: flex;} .mob_nav > ul > li > div {width: 45%; position: relative;} .mob_nav > ul > li > div::before {content: ''; display: block; width: calc(100% + 5px); height: 100%; background: linear-gradient(to right, #C0A031 10px, #1C3350 11px); border-radius: 0 6px 6px 0; opacity: 0; position: absolute; top: 0; left: 0; transform: translateX(-100%); transition: .27s;} .mob_nav > ul > li > div > a {display: block; padding: 14px 19px; font-size: 17px; font-weight: 600; color: #232323; position: relative;} .mob_nav > ul > li > ul {visibility: hidden; opacity: 0; width: 55%; max-height: 100%; padding: 0 10px; overflow-y: auto; position: absolute; top: 50px; right: 0; transition: .5s;} .mob_nav > ul > li > ul::-webkit-scrollbar {width: 4px;} .mob_nav > ul > li > ul::-webkit-scrollbar-track {width: 4px; background: #eee;} .mob_nav > ul > li > ul::-webkit-scrollbar-thumb {background: #B2B2B2;} .mob_nav > ul > li > ul > li + li {border-top: 1px dashed #E0E0E0;} .mob_nav > ul > li > ul > li > a {display: block; padding: 20px 0; font-size: 15px; color: #000;} .mob_nav > ul > li > ul > li > a:hover {text-decoration: underline; text-underline-offset: 3px;} .mob_nav > ul > li > ul > li ul{background:#f7f7f7; padding:0.5rem; } .mob_nav > ul > li > ul > li ul a{display: block; font-size:14px; padding:10px 0;} .mob_nav > ul > li.on > div::before {opacity: 1; transform: translateX(0); box-shadow: 4px 4px 4px rgba(0, 0, 0, .06);} .mob_nav > ul > li.on > div > a {color: #fff;} .mob_nav > ul > li.on > ul {visibility: visible; opacity: 1; top: 0;} .mob_nav > ul > li:not(.on) > ul {transition: 0s;} #menuAll_mob .mob_menu_bot {display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; border-top: 1px solid #ddd;} #menuAll_mob .mob_menu_bot a {display: flex; align-items: center; width: calc(50% - 10px); height: 64px; padding: 0 20px; font-size: 18px; font-weight: 500; color: #fff; line-height: 1.3; border-radius: 10px; position: relative;} #menuAll_mob .mob_menu_bot a.apply {width: 100%;} #menuAll_mob .mob_menu_bot a::before {content: ''; display: block; height: 98%; position: absolute; top: 1%; right: 10%;} #menuAll_mob .mob_menu_bot a.how_to_use {background: linear-gradient(to bottom, #E7AA2A 60%, #F3C73D 102%);} #menuAll_mob .mob_menu_bot a.how_to_use::before {aspect-ratio: 90/71; background: url('/images/default/main/modal_img1.png') no-repeat center/cover;} #menuAll_mob .mob_menu_bot a.ams {background: linear-gradient(110deg, #1E006C 54%, #1C00AA 90%);} #menuAll_mob .mob_menu_bot a.ams::before {aspect-ratio: 82/71; background: url('/images/default/main/modal_img2.png') no-repeat center/cover;} #menuAll_mob .mob_menu_bot a.apply {background: linear-gradient(110deg, #002049 53%, #002D66 90%);} #menuAll_mob .mob_menu_bot a.apply::before {aspect-ratio: 73/63; background: url('/images/default/main/modal_img3.png') no-repeat center/cover;} #menuAll_mob .mob_menu_bot:not(:has(a.ams)) a {width: 100%;} #menuAll_mob .mob_menu_bot:not(:has(a.ams)) a.how_to_use br {display: none;} @media (max-width: 767px){ /* 모바일 헤더 */ .mob_modal_open {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; margin-left: -.5rem; margin-bottom: 3px; border-radius: 50%; background-color: #fff; border: 1px solid #CDD1D5;} .mob_modal_open i {display: block; width: 14px; height: 14px; background: url('/images/default/main/mob_modal_open.svg') no-repeat center/cover;} #gtranslate_wrapper {position: relative; z-index: 100;} #gt_float_wrapper {position: static !important;} .gt_float_switcher {background: transparent !important; box-shadow: none !important;} .gt_float_switcher .gt-selected .gt-current-lang {padding: 0 !important;} .gt_float_switcher .gt-selected {background: transparent !important;} .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {background: url('/images/default/main/translate_triangle.svg') no-repeat center !important;} .gt_float_switcher .gt-selected {} .gt_float_switcher .gt_options {display: none; min-width: 200px; opacity: 1; transform: none !important; transition: 0; position: absolute !important; top: calc(100% + 6px) !important; left: -14px !important; background: #fff !important;} .gt_float_switcher .gt_options.gt-open {display: block; box-shadow: 0 4px 15px rgba(0, 0, 0, .15);} .gt_float_switcher .gt_options a {display: flex !important; align-items: center; gap: 4px;} /* 모바일 전체메뉴 */ #header .btn-gnb-menu {display: none;} #header .btn-gnb-menu-mob {display: block;} #menuAll_mob {display: block;} } @media (max-width: 480px){ .alarm_box {width: calc(100vw - 2rem);} } @media (max-width: 430px){ .mob_modal_menu .menu_list > li::before {transform: translateY(-50%) scale(0.9); right: 5%;} } /******************************************************** ■ 푸터 ********************************************************/ #footer{clear:both; padding:2.3rem 0; color:#fff; background: #1C1D1F; z-index:1; position: relative;} #footer .inner{display:flex; justify-content: space-between; width:74rem; margin:0 auto;} #footer .f_left {display: flex; flex-direction: column; width:50%;} #footer .f_right {display:flex; align-items: flex-end; justify-content: space-between; flex-direction: column;width:50%;} .f_left .comp_info li {display:flex; flex-wrap: wrap; gap:0.2rem 1rem;color: rgba(255,255,255,0.7); font-size: 0.75rem; font-weight: 400; line-height: 1.4;letter-spacing: -0.00255rem;} .f_left .comp_info li:not(:last-child) {margin-bottom:0.2rem;} .f_left .comp_info li > div {display:flex; flex-wrap: wrap;} .f_left .comp_info li b{color:#fff;margin-right:0.4rem;} @media (max-width:1440px){ #footer .inner {width:100%;} } @media (max-width:1024px){ #footer {padding-right: 8rem; padding-left: 1rem;} #footer .inner {padding:0;} #footer .f_right {width: auto; position:absolute; right:1rem; top:2.3rem;} #footer .f_left {width:100%;} .f_left .comp_info li {flex-direction: column; font-size:0.88rem;} } @media (max-width:768px){ #footer {padding: 3rem 1rem clamp(3rem, 1.571rem + 3.81vw, 5rem);} #footer .inner {flex-direction:column; gap: 2rem;} #footer .f_left {width:100%;} #footer .f_right {width: 100%;position:static;} .f_left .comp_info li {gap: 0.25rem; font-size: 0.8rem;} .f_left .comp_info li:not(:last-child) {margin-bottom:0.25rem;} } /*-----마이페이지에서 데코 적용-----*/ #wrap:has(.myAccount) #footer:before {content:''; display:block; width:calc(100% + 1px); height:4.55rem; background:url('/images/default/content/ft_deco.svg') no-repeat bottom center; background-size:cover; position:absolute; top:-4.5rem; left:-1px;} #wrap:has(.mento_apply) #footer:before {content:''; display:block; width:calc(100% + 1px); height:4.55rem; background:url('/images/default/content/ft_deco.svg') no-repeat bottom center; background-size:cover; position:absolute; top:-4.5rem; left:-1px;} @media (max-width:1024px){ #wrap:has(.myAccount) #footer:before {height:2.55rem; top:-2.5rem;} } @media (max-width:768px){ #wrap:has(.myAccount) #footer:before {height:1.5rem; top:-1.45rem;} #footer .inner{position:relative;} } /*-----푸터 로고 영역-----*/ .f_comp {display:flex; flex-direction:column; gap:clamp(1rem, 0.98rem + 0.125vw, 1.1rem); font-size:0.85rem;} .f_comp .comp_top {display:flex; align-items: flex-end; gap:0.65rem;} .f_comp h5 {font-size: 0.75rem; font-weight:400; letter-spacing:0.02em; line-height: 1.2;} .f_logo img {width:10rem;} /* 푸터 sns */ .f_sns {margin-top:1.5rem;} .f_sns ul {display:flex; gap:2rem;} /* 카피라이트 */ .f_copy {margin-top:2rem; font-size:0.75rem; color:rgba(255,255,255,0.4);} @media (max-width:768px){ .f_comp .comp_top {flex-direction: column; align-items: flex-start;} .f_comp h5 {font-size:0.88rem;} .f_logo img {width:9rem;} .f_sns ul {gap:1.5rem;} } /*-----푸터 메뉴 영역-----*/ /* 푸터 메뉴 */ .f_menu {width:100%; max-width:60%;} .f_menu ul {display:flex; flex-wrap:wrap; gap:clamp(1.2rem, 1.14rem + 0.375vw, 1.5rem) clamp(1.2rem, 0.91rem + 1.812vw, 2.65rem);} .f_menu ul li {width:calc((100% - clamp(1.2rem, 0.91rem + 1.812vw, 2.65rem) * 1)/2)} .f_menu ul a {font-size: clamp(0.95rem, 0.94rem + 0.063vw, 1rem); font-weight:700; line-height: 1; color:#fff; font-weight:500;} .f_menu ul a:hover {text-decoration:underline;} /* 패밀리 사이트 */ .f_family {display: inline-block; align-self: flex-end; width:100%; max-width: 10rem; position: relative;} .f_family .toggle {display: flex;align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 0.5rem; background-color: transparent; border: 1px solid #D5F5FC; text-decoration: none; color: #D5F5FC; text-align: center; font-size:0.9rem; cursor: pointer; transition: 0.3s cubic-bezier(0.79,0.14,0.15,0.86);} .f_family .toggle i {transform:rotate(180deg);} .f_family .toggle.active i {transform:rotate(0);} .f_family .toggle:hover {} .f_family .dropdown { display: none; margin: 0; padding: 0; width:100%; border: 1px solid #ccc; background: white; list-style: none; position: absolute; top: 100%; left: 0; z-index: 100;} .f_family .dropdown li a { display: block; padding: 0.5rem 1rem; font-size:0.9rem; color: #333; text-decoration: none;} .f_family .dropdown li a:hover { background-color: #f9f9f9;} .f_family .dropdown.upward { bottom: 100%; top: auto;} @media (max-width:1024px){ /*-----푸터 메뉴 영역-----*/ /* 푸터 메뉴 */ .f_menu {display:none;} } @media (max-width:768px){ /* 푸터 메뉴 */ .f_family {margin:0; } .f_family .toggle {font-size:0.88rem;} .f_family .dropdown li a {padding:0.5rem;} } /******************************************************** ■ 팝업 롤링 ********************************************************/ .layerPopup {position:absolute;top:230px;left:10rem; width:450px; background:#fff;line-height:auto;z-index:99999;border:10px solid #15334F;box-shadow:0 0 4px rgba(0,0,0,0.2); padding-bottom:40px;} .layerPopWrap{position:relative; width:100%; height:100%;} .layerPopup ul li img{width:100%;} @media (max-width:1030px){ .layerPopup {left:50% !important; transform:translateX(-50%);} } @media (max-width:768px){ /* 추가*/ .mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);} .layerPopup img{width:100% !important;} .layerPopup {left:5% !important; transform:translateX(0%); width:90% !important; height:auto !important; top:130px;} .chkvsb{font-size:0.7rem !important;} } /******************************************************** ■ 팝업 - (메인 로그인관련팝업//PRIDE공유대학 기준) ********************************************************/ .con_pop{background: rgba(0, 0, 0, .6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;} .con_pop .popin{width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 100; border-radius: 1rem; overflow:hidden;} .con_pop .popin h3{color: #fff; background: #3B4481; padding:0 1rem; font-size: 1.2rem; font-weight: 500; height: 2.5rem; line-height: 2.6rem; } .con_pop .popin .txt{padding: 1.5rem 2rem; font-size: 0.9rem; line-height: 1.5;background: #fff; } .con_pop .popin table{border-top: 2px solid #333; margin-top: 0.75rem;} .con_pop .popin table th{background-color: #f9f9f9; border-bottom: 1px solid #e9e9e9; vertical-align: middle; text-align: center;} .con_pop .popin table td{color: #666; padding: 10px 15px; vertical-align: middle; border-bottom: 1px solid #e9e9e9;} .con_pop .bottom_button{display: flex; width:100%; position:relative; z-index:10;} .con_pop .bottom_button a{flex-basis: 50%; display: block; height: 3rem; line-height: 3rem; font-size: 0.9rem; background: #eee; color: #111;} .con_pop .bottom_button a.confirm{background: linear-gradient(45deg, #6d5bf2, #5c309d 30%, #5c309d 70%, #6d5bf2); color: #fff;} .con_pop .bottom_button a.w100{flex-basis: 100%;} .con_pop .close{position: absolute; right: 1rem; top: 12px;} .con_pop .close a{color: #fff; font-size: 1.2rem;} .con_pop .close span{font-size: 0;} .con_pop .popin h4{font-size:1.4rem; color:#333; border-bottom:1px solid #ddd; padding-bottom:1rem; margin-bottom:1rem;} .con_pop .popin h4 b{font-weight:bold; color:var(--sub);} .con_pop .popin h4 img{margin-bottom:10px;} .con_pop .popin .bg span{position:relative; color:#3b4481; font-weight:bold;} .con_pop .popin .bg span:before{content: ''; display: block; position: absolute; width: 100%; height: 50%; background: rgba(59,68,129,0.1); left: 0; bottom:0;} .con_pop .popin .logo img{width:10rem; margin-top:0.5rem;} .con_pop .popin b{font-weight:bold;} .con_pop .alert img{margin-bottom:10px; width:10rem;} .con_pop .alert h4{color:#212121;} .con_pop small{ z-index: 1; position: relative; margin-top:0.5rem; display:block;} .con_pop .popin h5{font-size:1.2rem; color:#333;margin-top:1rem;} .con_pop .popin .bg{margin-top:1.5rem; padding:1.5rem 0 0; position:relative; color:#333; z-index:0;} .con_pop .popin .bg:before{ content : ""; display : block; position : absolute; left :-50%; top:0; width : 200%; height : 20rem; background : #f0f2ff; z-index:-1;} .con_pop .popin .cen_button{margin-bottom:1.5rem;position:relative; z-index:10;} .con_pop .popin .cen_button a{display:block; width:8rem; margin:0 auto; height:2.3rem; line-height:2.3rem; background:#38387f; color:#fff; border-radius:0.5rem;} /*비밀변경팝업*/ #editPass p span{color:var(--sub);} #editPass ul li{display:flex; align-items: center} #editPass ul li:not(:first-child){margin-top:0.5rem;} #editPass ul li label{width:7rem; flex-shrink: 0; text-align: left; font-weight: 600;} #editPass ul li input{ height: 2.2rem; background: #fff url(/images/default/main/icon_pw.svg) no-repeat right 0.75rem top 50%; background-size: 1.2rem 1.2rem;} @media (max-width: 768px){ .con_pop .popin{width: 90%; margin: 0 auto;} .con_pop .popin .txt{padding:1.5rem 1rem;} } /*로딩팝업*/ #loading {background: rgba(0, 0, 0, .4); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;} #loading .popin{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width:15rem; padding:2rem 0; text-align:center; background:#fff; z-index: 100; border-radius: 1rem; overflow:hidden;} #loading .popin p{font-size:0.8rem; font-weight:600;} #loading .loading_spinner{width: 70px; height: 70px; display: block; margin:0 auto 0.5rem;} /******************************************************** ■ 검색결과 ********************************************************/ .global_search {background:#fff; border-radius: 0.4rem; overflow: hidden;} .global_search .search{padding:2.9rem 0; background: url(/images/default/content/view_top_bg.jpg) no-repeat center center; background-size: cover;} .global_search .search form{max-width: 45rem; margin: 0 auto; padding:2rem 1rem;} .global_search .search fieldset{ display:flex; gap:0.5rem; height: 3rem; border-radius: 1rem; padding:0.2rem; background:#fff; outline: 2px solid var(--grey56); overflow:hidden;} .global_search .search div{flex:1;} .global_search .search div input{border:none; height:100%;} .global_search .search button{display: flex; align-items: center; justify-content: center; width: 3.1rem; height: 2.6rem; color: #fff; font-size: 1.5rem; background: var(--main); border-left: none; border-radius: 1rem;} .search_cont{ padding:2rem 1rem; margin: -3rem auto 3rem; max-width:56.5rem; margin: 0 auto;} .search_cont .tit-search{text-align:center; margin: -4rem auto 3rem; padding: 2rem 2.4rem; background: #F0F0F0; border-radius: 0.2rem;} .search_cont .tit-search h2{font-size: clamp(1.382rem, 1.299rem + 0.522vw, 1.8rem);} .search_cont .tit-search h2 em, .search_cont .tit-search h2 mark{color:#f8414c; font-weight:900;} .cate_area h2{ font-size: 1.1rem; color: #212121; font-weight: 600; margin-top: 2rem; padding-left: 2rem; background: url(/images/default/content/sub_tit_bul.svg) no-repeat left top +8px; background-size: 1.6rem auto; padding-bottom: 1rem; border-bottom: 2px solid #111;} .cate_area .pt{} .cate_area .pt ul{display:flex; flex-wrap:wrap;} .cate_area .pt ul li{width:25%; border-bottom:1px dotted #ddd; background:url('/images/default/content/ser_bul.gif') no-repeat left top 0.9rem; padding:0.5rem 0; padding-left:1rem; } .cate_area .pt ul li a{font-size:0.85rem; color:#7c7c7c; } .cate_area .pt ul li.on a{color:var(--main); font-weight:bold;} .no_result{text-align:center; margin-top:4rem; padding-bottom:4rem; font-size:0.9rem;} .no_result b{display:block; font-size:1.05rem; margin-top:1rem; color:var(--main);} .sr_result{position:relative; } .sr_result > h3{margin-bottom:1rem; font-size:1.1rem; color:#212121; font-weight:700; margin-top:4rem; padding-left:2rem; background: url(/images/default/content/sub_tit_bul.svg) no-repeat left top+8px; background-size:1.6rem auto; padding-bottom:1rem; border-bottom:2px solid #111; } .sr_result:has(.spk_item_list) > h3 {margin-bottom:2.5rem;} .sr_result > h3 span{color:#a0a0a0; font-size:0.9rem; } .sr_result p.more{position:absolute; top:0px; right:0px;} .sr_result p.gal_tit a{color:#353535 ; font-weight:bold; font-size:0.95rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.5em; height: 1.5em;} .sr_result .sdate{margin-top: 0.5rem; font-size:0.88rem; color:#adadad; } .sr_result p.smore{position:absolute; top:0; right:0;} .sr_result .swiper-pagination {display:none;} /*-----코스 검색결과 -----*/ .global_search .gal_item_list .swiper-wrapper {gap:2rem;} .global_search .gal_item_list.noSwiper {display:flex; flex-wrap:wrap; gap:2rem;} .global_search .gal_item_list .gal_item {width: calc((100% - 2rem * 2) / 3);} .global_search .hover {padding: 1rem 0.8rem 0.8rem; height: 100%;} .global_search .hover .hover_inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%;} .global_search .gal_separator {display:none !important;} /*-----라이브러리 검색결과 -----*/ .global_search .boardGalleryContainer { padding: 0 !important; } .global_search .live_cate {padding-bottom: 0.5rem; margin-bottom: 1rem; font-size: clamp(0.9rem, 0.88rem + 0.125vw, 1rem); color: #1E3A8A; font-weight: 700; position: relative;} .global_search .live_cate:not(:first-of-type) { margin-top: 48px; } .global_search .live_cate span { display: block; width: 4rem; height: 2px; background: #1E3A8A; position: absolute; bottom: 0; left: 0; } .global_search .galleryList .search_mob_swiper ul, .global_search .galleryList .Journal_slide ul { display: flex; flex-wrap: nowrap; gap: 2rem;} .global_search .galleryList .search_mob_swiper ul.noSwiper, .global_search .galleryList .Journal_slide ul.noSwiper{ flex-wrap: wrap; gap: 2rem;} /* 공통 리스트 아이템 */ .global_search .galleryList .search_mob_swiper ul li, .global_search .galleryList .Journal_slide ul li {border: 1px solid #E7E7E7; border-radius: 0.3rem; overflow: hidden;} .global_search .galleryList .search_mob_swiper ul li { width: calc((100% - 2rem * 2) / 3); } .global_search .galleryList .Journal_slide ul li { width: calc((100% - 2rem * 3) / 4); } .global_search .galleryList .txt_box { padding: 1.2rem; } .global_search .galleryList .txt { display: flex; justify-content: space-between; color: #555; font-size: 0.8rem; } .global_search .galleryList .txt .author { flex-basis: 50%; } .global_search .galleryList .txt.ar { justify-content: flex-end; } .global_search .galleryList .txt p.view { margin-top: 0; } .global_search .galleryList .txt .date { margin-left: 5px; display: inline-block; padding-left: 8px; position: relative; } .global_search .galleryList .txt .date:before { content: ""; display: block; position: absolute; left: 0; top: 10%; width: 1px; height: 80%; background: #ddd; } .global_search .galleryList .comm_and_likes ul {display: inline-flex; align-items: center; gap: 0.625rem;padding: 0.25rem 0.45rem; background: #F3F1E9; border-radius: 6rem; cursor: default;} .global_search .galleryList .comm_and_likes ul > li {display: flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 600; color: #45474A; width: auto !important; border: none !important;} .global_search .galleryList .comm_and_likes ul > li:has(.pf_likes) { pointer-events: none; } .global_search .galleryList .comm_and_likes .line { width: 1px !important; height: 1.175rem; background: #B3B7BC; } /* Clinical Case 타입 */ .Clinical-case .thumb_img span { aspect-ratio: 1350 / 1080; } /* Journal 타입 */ .global_search .galleryList:is(.Journal) .comm_and_likes, .global_search .galleryList:is(.Journal) .c_views, .global_search .galleryList:is(.Journal) .thumb_img .vid_icon { display: none; } .global_search .galleryList:is(.Journal) .c_name { margin-bottom: 0.25rem !important; } .global_search .galleryList:is(.Journal) .txt { flex-direction: column; } .global_search .galleryList:is(.Journal) .thumb_img {padding: 1.25rem 1.5rem 0; background: #F3F1E9; z-index: 0;} .global_search .galleryList:is(.Journal) .thumb_img:after { display: none; } .global_search .galleryList:is(.Journal) .thumb_img span { aspect-ratio: 208 / 296; box-shadow: 8px 6px 15px rgba(38, 26, 0, 0.13);} .global_search .galleryList:is(.Journal) .c_name { -webkit-line-clamp: 2; height: 3em; } .global_search .galleryList:is(.Journal) .txt .btn_default { margin-top: 1.25rem; pointer-events: auto; } .global_search .galleryList:is(.Journal) .goView { pointer-events: none; } /* MEGA MIND 타입*/ .global_search .galleryList:is(.MEGA-MIND) ul { gap: clamp(1.6rem, 1.48rem + 0.75vw, 2.2rem) 2rem} .global_search .galleryList:is(.MEGA-MIND) li { display: flex; flex-direction: column; width: calc((100% - 2rem * 3) / 4); overflow: hidden;} .global_search .galleryList:is(.MEGA-MIND) li .txt_box {display: flex; flex-direction: column; justify-content: space-between; padding: clamp(0.8rem, 0.72rem + 0.5vw, 1.2rem) !important; height: 100%;} .global_search .galleryList:is(.MEGA-MIND) .thumb span { display: block; width: 100%; aspect-ratio: 299 / 370; } .global_search .galleryList:is(.MEGA-MIND) .winner_info { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; } .global_search .galleryList:is(.MEGA-MIND) .country { font-weight: 700; font-size: 0.8rem; color: var(--magenta); } .global_search .galleryList:is(.MEGA-MIND) .name { color: #232323; font-size: 0.9rem; font-weight: 800; text-align: center; line-height: 1.3; } .global_search .galleryList:is(.MEGA-MIND) .btn_default { margin-top: 1rem; } /*-----뉴스 검색결과 -----*/ .news_result li:not(:first-child) {padding-top:1rem; margin-top:1rem; border-top:1px solid #ddd;} @media (max-width:1024px){ .global_search .search { padding-top: 1rem; } .search_cont .tit-search { padding: 2rem 1rem; font-size: 1rem; } .cate_area .pt ul li { width: 50%; } .global_search .search_mob_swiper .swiper-pagination { position: static; margin-top: 1rem; } .global_search .search_mob_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--gold); } .sr_result .swiper-pagination { display: block; } /* 코스 검색결과 리스트 */ .global_search .gal_item_list .swiper-wrapper, .global_search .galleryList .swiper-wrapper { gap: 0; flex-wrap: nowrap; } .global_search .galleryList ul { gap: 2rem 1.5rem; flex-wrap: nowrap; } .global_search .spk_item_list ul { flex-wrap: nowrap !important; gap: 0 !important; } .global_search .search_whole .spk_item_list .noSwiper { flex-wrap: wrap !important; gap: 1rem !important; } .global_search .gal_item_list.noSwiper { gap: 2rem 0.8rem; } .global_search .gal_item_list .gal_item { width: calc((100% - 0.8rem * 2) / 3); } .global_search .galleryList .search_mob_swiper .swiper-wrapper:not(.noSwiper) { gap: 0; } /* 연자, 멘토 검색결과 리스트 */ .global_search .spk_item_list .spk_item { width: calc((100% - 1rem * 1) / 2); } .global_search .spk_info .profile .img_box { margin-bottom: 0.5rem !important; width: 28%; } .global_search .profile .mentoBadge.tablet > p { width: 100%; } /* 라이브러리 검색결과 리스트 */ .global_search .galleryList .Journal_slide ul { gap: 0;} .global_search .Journal_slide .swiper-pagination { position: static; margin-top: 1rem; } .global_search .Journal_slide .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--gold); } .global_search .galleryList .Journal_slide ul.noSwiper {gap:2rem 0.8rem;} .global_search .galleryList .Journal_slide ul.noSwiper li { width: calc((100% - 0.8rem * 2) / 3); } } @media (max-width:768px){ .cate_area .pt ul { max-height: 7.7rem; overflow-y: auto; border-bottom: 1px solid #ddd; } .cate_area .pt ul li { width: 100%; } /* 코스 검색결과 리스트 */ .global_search .gal_item_list .gal_item { width: calc((100% - 0.8rem * 1) / 2); } /* 라이브러리 검색결과 리스트 */ .global_search .galleryList .search_mob_swiper ul, .global_search .galleryList .search_mob_swiper ul.noSwiper{ gap: 2rem 1rem; } .global_search .galleryList .search_mob_swiper ul li, .global_search .galleryList .search_mob_swiper ul.noSwiper li{ width: calc((100% - 1rem * 1) / 2); } .global_search .galleryList:is(.Journal) .thumb_img span, .global_search .galleryList:is(.MEGA-MIND) .thumb span{ aspect-ratio: 1; } .global_search .galleryList .Journal_slide ul.noSwiper { gap: 2rem 1rem; } .global_search .galleryList .Journal_slide ul.noSwiper li { width: calc((100% - 1rem * 1) / 2); } /* 연자, 멘토 검색결과 리스트 */ .global_search .spk_item_list .spk_item { width: 100%; } .global_search .profile .mentoBadge.tablet { max-width: unset; } } @media (max-width:540px){ /* 코스 검색결과 리스트 */ .global_search .gal_item_list .gal_item { width: 100%; } /* 라이브러리 검색결과 리스트 */ .global_search .galleryList .search_mob_swiper ul li, .global_search .galleryList .search_mob_swiper ul.noSwiper li, .global_search .galleryList .Journal_slide ul.noSwiper li{ width: 100%; } /* 연자, 멘토 검색결과 리스트 */ .global_search .spk_info .profile .img_box { width: 28%; } } /* 언어 메뉴 */ @media (max-width: 767px){ #gt_float_wrapper {transform: scale(0.8); transform-origin: left bottom;} } @media (max-width: 480px){ #gt_float_wrapper {transform: scale(0.7);} }