:root { --header-hei: 10rem; --inner-pd: 5.20833333333%; --inner-cont-pd: calc((100% - 1440px) / 2); --color-point: #112B62; --color-point02: #3E79F4; --color-point03: #D02115; --color-txt: #343434; --color-border:#E8ECF5; --color-bg: #F7F7F8; } @media all and (max-width:1600px) { :root { --inner-cont-pd: calc((100% - 1200px) / 2); } } @media all and (max-width:1440px) { :root { --inner-cont-pd: calc((100% - 1024px) / 2); } } @media all and (max-width:1240px) { :root { --header-hei: 8rem; --inner-cont-pd: 5.20833333333%; } } /*트랜지션*/ #header, #header .gnb > li .depth, .btn-st p,.btn-st01,.btn-st01 .icon-arrow, #appliWr button,#appliWr p, #appliWr .icon-close,#appliWr, #callWr { transition: .3s; } .inner { width: 100%; margin: 0 auto; padding: 0 var(--inner-cont-pd); } .flex { display: flex; justify-content: center; align-items: center; } .icon, .img { display: inline-block; width: auto; max-width: 100%; } .img-obj { width: 100%; height: 100%; object-fit: cover; object-position: center; } .ab-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ma-tp { margin-top: 13rem; } .pa-tp { padding-top: 13rem; } .ma-bt { margin-bottom: 13rem; } .pa-bt { padding-bottom: 13rem; } .img-m { display: none; } .tit-b { font-size: 5.2rem; line-height: 7rem; font-weight: 800; } .tit { margin-bottom: 5rem; font-size: 3.2rem; line-height: 4.4rem; font-weight: 300; } .tit strong { font-weight: 800; } .txt-m { color: var(--color-txt); font-size: 2rem; font-weight: 500; line-height: 3.7rem; } .txt-m strong { font-weight: 800; } .txt { color: var(--color-txt); font-size: 1.8rem; line-height: 3rem; } i { color: var(--color-point02); font-weight: 700; } i.color-b { color: var(--color-point); font-weight: 700; } i.color-g { color: #757575; font-weight: 400; } i.color-r { color: var(--color-point03); } @media all and (max-width:768px) { .tit { margin-bottom: 3rem; } .img-pc { display: none; } .img-m { display: block; } } @media all and (max-width:500px) { .tit-b { font-size: 4.2rem; line-height: 1.3; } .tit { font-size: 3rem; line-height: 3.7rem; } .txt-m { line-height: 3rem; } .ma-tp { margin-top: 8rem; } .pa-tp { padding-top: 8rem; } .ma-bt { margin-bottom: 8rem; } .pa-bt { padding-bottom: 8rem; } } /*더보기*/ .btn-st { display: inline-flex; align-items: center; justify-content: center; margin-top: 4.2rem; font-size: 2.2rem; } .btn-st p { margin-right: 1.5rem; } .btn-st:hover p { margin-right: 2.3rem; } .btn-st01 { width: 16rem; height: 5rem; background: var(--color-bg); box-shadow: 0.4rem 0.5rem 1rem rgba(0, 0, 0, 0.1); border-radius: 1.3rem; border: 1px solid var(--color-border); font-size: 2rem; font-weight: 700; } .btn-st01 p { margin-left: 1rem; font-size: 1.6rem; } .btn-st01:hover { background: var(--color-point); border: 1px solid var(--color-point); box-shadow:none; } .btn-st01:hover p { color: #fff; } .btn-st01 .icon-arrow { width: 2rem; } .btn-st01:hover .icon-arrow { filter: invert(1); } @media all and (max-width:800px) { .btn-st { font-size: 2rem; } .btn-st .icon-arrow { width: 2.6rem; } } /*리스트스타일*/ .list-st { margin-left: 2.2rem; } .list-st li { position: relative; font-size: 1.8rem; line-height: 1.5; } .list-st li:not(:last-child) { margin-bottom: 1.3rem; } .list-st li::before { content: ''; display: inline-block; position: absolute; } .list-st ul li.list-non { margin-left: -2.2rem; } .list-st ul li.list-non .tit-sub { margin-bottom: 0; } .list-st ul li.list-non::before { display: none; } .list-st-bar { margin-left: 1.6rem; } .list-st-bar li.list-non::before { display: none } .list-st-bar li::before { content: '-'; display: inline-block; margin-left: -1.4rem; margin-right: 0.5rem; } .list-st-cy li::before { top: 1.15rem; left: -1.2rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-txt); } /*헤더*/ #header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-hei); background-color: transparent; background-position: 99% 97%; background-size: 30%; background-repeat: no-repeat; z-index: 99; overflow: hidden; } #header .logo { width: 24.6rem; height: 5.3rem; background-image: url(/theme/basic/img/logo_w.svg); background-position: center; background-repeat: no-repeat; background-size: contain; } #header .inner { justify-content: space-between; width: 100%; height: var(--header-hei); padding: 0 var(--inner-pd); } #header .gnb > li { position: relative; height: 100%; line-height: var(--header-hei); } #header .gnb > li:not(:last-child) { margin-right: 6.8rem; } #header .gnb > li > a { display: block; color: #fff; font-size: 2rem; font-weight: 500; } #header .gnb .depth { position: absolute; top: var(--header-hei); left: 50%; width: auto; height: auto; padding-bottom:4rem; opacity: 0; visibility: hidden; transform: translate(-50%, -1rem); } #header .gnb .depth > li { display: block; width: 13rem; line-height: 2; text-align: center; } #header .gnb .depth > li > a { position: relative; color: #fff; font-size: 1.8rem; font-weight: 200; line-height: 1.8; } #header .gnb .depth > li > a:hover { color: var(--color-point01); font-weight: 400; } #header .gnb::after { position: absolute; width: 100%; height: 200%; content: ''; z-index: -1; } #header.hidden { transform: translateY(calc(var(--header-hei) * -1)); } #header.on { border-radius: 0 0 3rem 3rem; } #header.on, #header.scroll { background-color: #fff; } #header.on .logo, #header.scroll .logo { background-image: url(/theme/basic/img/logo_c.svg); } #header.on .gnb > li > a, #header.scroll .gnb > li > a { color: #000; font-weight: 600; } #header.on .gnb > li .depth { min-height: 23rem; opacity: 1; visibility: visible; transform: translate(-50%, 0); } #header.on .gnb > li .depth a { color: var(--color-txt); font-weight: 500; } #header.on .gnb > li .depth a:hover { color: var(--color-txt); font-weight: 500; } #header.on, #header.scroll { filter: drop-shadow(1px 1px 4px rgba(0,0,0,.2)); } /*헤더 메뉴 버튼*/ #header .ham_menu_btn { display: none; align-content: space-around; grid-gap:0; position: relative; width: 3rem; height: 3rem; margin-left: 2rem; } #header .ham_menu_btn span { width: 100%; height: 2px; background-color: #fff; } #header.ham_on .ham_menu_btn { } #header.ham_on .ham_menu_btn span { position: absolute; top: 50%; left: 0; } #header.ham_on .ham_menu_btn span:nth-child(2) { opacity: 0; visibility: hidden; } #header.ham_on .ham_menu_btn span:nth-child(1) { transform: rotateZ(45deg); } #header.ham_on .ham_menu_btn span:nth-child(3) { transform: rotateZ(-45deg); } @media all and (max-width:1240px) { #header .gnb > li > a { font-size: 1.8rem; } #header .gnb > li:not(:last-child) { margin-right: 3.8rem; } #header .gnb .depth > li > a { font-size: 1.6rem; } #header.on .gnb > li .depth { min-height: 15.6rem; } } @media all and (max-width:768px) { #header .gnb { display: none; } /*헤더 메뉴 버튼*/ #header .ham_menu_btn { display: grid; } #header.scroll .ham_menu_btn span { background-color:var(--color-point); } } @media all and (any-pointer:coarse) { #header .gnb { display: none; } /*헤더 메뉴 버튼*/ #header .ham_menu_btn { display: grid; } #header.scroll .ham_menu_btn span { background-color:var(--color-point); } } /*모바일 메뉴*/ .ham_menu { display: block; position: fixed; right: 0; top: 0; z-index: 1; width: 100vw; height: 100vh; padding:var(--header-hei) var(--inner-pd); background: var(--color-point); overflow: hidden; opacity: 0; visibility: hidden; transition: .5s; z-index: 4; transform: translateX(100%); } .ham_menu a { color: #fff; } .ham_menu > ul { width: 100%; padding-top: var(--header-hei); } .ham_menu > ul > li { width: 100%; line-height: 2; position: relative; } .ham_menu > ul > li:after,.ham_menu > ul > li:before { content: ""; display: block; width: 20px; height: 1px; position: absolute; right: 20px; top: 2.3em; background: #ccc; transform:rotate(0deg); transition-duration: 0.4s } .ham_menu > ul > li:after { transform:rotate(0); } .ham_menu > ul > li:before { transform:rotate(90deg); } .ham_menu > ul > li > a { font-size: 3.2rem; font-weight: 600; } .ham_menu > ul > li > .gnb-depth { display: none; position: relative; padding:1.5rem 2rem; background: rgba(255, 255, 255, 0.11); font-size: 2rem; } .ham_menu > ul > li > .gnb-depth a { display: block; line-height: 2; font-weight: 200; } .ham_menu > ul > li.active:after { transform:rotate(180deg); transition-duration: 0.4s } .ham_menu > ul > li.active:before { transform:rotate(360deg); transition-duration: 0.4s } .ham_menu.ham_on { opacity: 1; visibility: visible; transform: translateX(0); } /*하단*/ #ftWr { position: relative; display: grid; text-align: center; width: 100%; height: auto; padding-top: 29.8rem; } #ftWr .tit { position: absolute; left: 50%; white-space:nowrap; transform: translateX(-50%); } #ftWr .ft-info { position: absolute; left: 0; bottom: 0; width: 100%; margin-top: auto; padding: 7rem 0 4rem; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; letter-spacing: 0; z-index: 1; } #ftWr .ft-info ul { flex-wrap: wrap; margin: 1rem 0 3rem; } #ftWr .ft-info ul li, #ftWr .ft-info ul li a, #ftWr .ft-info span { color: #fff; font-weight: 100; } #ftWr .ft-info ul li,#ftWr .ft-info ul li a { font-size: 1.4rem; } #ftWr .ft-info ul li { position: relative; line-height: 1.5; } #ftWr .ft-info ul.info li:not(:last-child):after { content: '|'; margin: 0 1.2rem; } #ftWr .ft-info span { font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; } #ftWr .ft-info .time { margin-top: 1rem; } #ftWr .br-m { display: none; } #ftAdm { margin-bottom: 0 !important; } #ftAdm li a { display: inline-block; line-height: 1; padding: 0.4em 0.5em; font-size: 1.3rem !important; opacity: .5; } @media all and (max-width:768px) { #ftWr { padding-top: 22.8rem; overflow: hidden; } #ftWr .tit { width: 100%; white-space: normal; } #ftWr .img-bg { max-width: fit-content; width: 129rem; margin-left: -30.5rem; } } @media all and (max-width:600px) { #ftWr .br-m { display: block; } #ftWr .ft-info ul.info li:nth-child(3):after { display: none; } } @media all and (max-width:500px) { #ftWr .inner { text-align: left; } #ftWr .ft-info ul { align-items: flex-start; flex-direction: column; } #ftWr .ft-info ul.info li:not(:last-child):after { display: none; } } /*네비*/ #rightNav { display: grid; justify-items: end; grid-gap: 1rem; position: fixed; bottom: 5rem; right: 5rem; z-index: 3; } #rightNav > a { opacity: 0; visibility: hidden; transition: .3s; } #rightNav a p, #btnQick p { width: 100%; margin-top: .5rem; font-size: 1.4rem; text-align: center; } #rightNav .box-icon { border-radius: 100%; padding: 1.5rem; font-weight: 700; filter: drop-shadow(9px 8px 5px rgba(0, 0, 0, .1)); } #rightNav .box-icon .icon { max-width: 2.9rem; } #rightNav.on > a, #rightNav.on #btnQick { opacity: 1; visibility: visible; } #rightNav > a:nth-of-type(1) { transition-delay: .25s; } #rightNav > a:nth-of-type(2) { transition-delay: .2s; } #rightNav > a:nth-of-type(3) { transition-delay: .15s; } #rightNav > a:nth-of-type(4) { transition-delay: .1s; } #rightNav #btnQick { opacity: 0; visibility: hidden; transition-delay: .05s; } #rightNav #navDawn .box-icon { background-color: #FFDFCF; border: 1px solid #DDBAAE; } #rightNav #navCamp .box-icon { background-color: #E9FFDA; border: 1px solid #95CE72; } #rightNav #navKakao .box-icon { background-color: #FFE600; border: 1px solid #D8C300; } #rightNav #navCall .box-icon { background-color: #F4F4F4; border: 1px solid #DADADA; } #rightNav #btnQick .box-icon { background-color:var(--color-point); border: 1px solid var(--color-point); cursor: pointer; } #rightNav #navBlog .box-icon { background-color: #1FAA3A; border: 1px solid #1FAA3A; } #rightNav #navInsta .box-icon { background: linear-gradient(180deg, #4451A0 0%, #E5217D 45%, #FFCB00 100%) } #rightNav #navCall p.pc { width: 0; height: 0; margin-top: 0; visibility: hidden; opacity: 0; opacity: 0; white-space: pre; overflow: hidden; transition: .3s; } #rightNav #navCall.on .box-icon { border-radius: 1.5rem; } #rightNav #navCall.on p.pc { width: auto; height: auto; visibility: visible; opacity: 1; } #rightNav #navCall.on > p { padding-right: .7rem; text-align: right; } #rightNav #navQick { flex-direction: row-reverse; } #rightNav #navQick > div { margin-left: 1rem; } #rightNav #navQick .box { visibility: hidden; opacity: 0; transition: .3s; } #rightNav #navQick.on .box { visibility: visible; opacity: 1; } /*탑 버튼*/ #rightNav #btnTop { display: flex; justify-content: center; align-items: center; width:6rem; height:6rem; margin-left: 2rem; border-radius: 100%; background:#fff; border: 1px solid #DADADA; filter: drop-shadow(9px 8px 5px rgba(0,0,0,.1)); padding: 1.6rem; cursor: pointer; opacity: 0; visibility: hidden; } #rightNav #btnTop .icon { transform: rotateZ(-90deg); filter: brightness(100); } #rightNav.on #btnTop { opacity: 1; visibility: visible; } @media all and (max-width:768px) { #rightNav { right: var(--inner-pd); } #appliWr , #appliWr.on { width: 6.5rem; height: 6.5rem; padding-right: 0; margin-top: 1rem; } #appliWr .icon-camp, #appliWr.on .icon-camp { width: 5.5rem; height: 5.5rem; } #appliWr #btnClose, #appliWr.on #btnClose { width: 100%; height: 100%; top: 0; right: 0; } #appliWr #btnClose .icon-close, #appliWr.on #btnClose .icon-close { opacity: 0; } #appliWr a p, #appliWr.on a p { display: none; } #appliWr.btn-off { display: flex; flex-direction: row-reverse; width: auto; height: auto; padding: 0; padding-right: 1rem; } #appliWr.btn-off a { grid-template-columns: auto auto; align-items: center; width: auto; height: auto; padding: 1.5rem; } #appliWr.btn-off a .icon-camp { width: 5.5rem; height: 5.5rem; } #appliWr.btn-off a p { display: inline-block; height: auto; margin-left: 0.5rem; margin-top: 0; font-size: 1.8rem; opacity: 1; visibility: visible; } #appliWr.btn-off #btnClose { flex-direction: row-reverse; position: relative; top: initial; right: initial; width: auto; height: auto; } #appliWr.btn-off #btnClose .icon-close { opacity: 1; } #callWr a { width: 6.5rem; height: 6.5rem; } #callWr a p { display: none; } } @media all and (max-width:500px) { #rightNav, #callWr { display: flex; align-items: center; } #rightNav a, #callWr a , #btnTop.on, #appliWr.on { margin-top: 0; } #rightNav .icon { width: 2.4rem; } #rightNav.on #btnTop { margin-left: 0; margin-bottom: 2rem; } } @media (max-width:768px) and (any-pointer:coarse) { #rightNav #navCall.on p.pc { display: none; } #rightNav #navCall.on .box-icon { border-radius: 100%; } #rightNav { display: grid; } #rightNav .box-icon { width: 6rem; height: 6rem; } #rightNav #navQick { flex-direction: column-reverse; } #rightNav #navQick .box { height: 0; } #rightNav #navQick.on .box { height: auto; } #rightNav #navQick > div:not(:last-child) { margin-bottom: 1rem; } #rightNav > a { visibility: hidden !important; opacity: 0!important; transition: .3s; } #rightNav > a.active { visibility: visible!important; opacity: 1!important; } #rightNav.on #btnQick { margin-bottom: 0 !important; } }