@charset"utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
.f-serif {font-family: 'EB Garamond', serif;}
.f-serif-kr {font-family: 'Noto Serif KR', serif;;}

*, html {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
*, *:before, *:after {box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
 body {width:100% !important;}
html, body, div, p, span, strong, b, em, iframe, pre, h1, h2, h3, h4, h5, h6, img, dl, dt, dd, fieldset, form, legend, label, table, caption, thead, tbody, tfoot, tr, th, td, ul, ol, li, a, input, select, textarea {margin: 0;padding: 0; border:none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; padding:0;margin:0;}
body { line-height:1.5; letter-spacing: -0.02em; color:#222; font-family: 'DM Sans', 'Pretendard',"Noto Sans KR", "NanumGothic", dotum ,sans-serif !important; word-break:keep-all;   -webkit-text-size-adjust: none; text-size-adjust: none;-o-text-size-adjust: none;}
button {font-family: 'DM Sans','Pretendard',"Noto Sans KR", "NanumGothic", dotum ,sans-serif;  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor:pointer;}
button, select, input, button, textarea,pre  {font-family: 'DM Sans','Pretendard',"Noto Sans KR", "NanumGothic", dotum ,sans-serif !important;}

ul,li,ol,dl,dd,dt{list-style:none;word-break:keep-all;line-height:1.5;}
em, address {font-style: normal;}
caption {overflow: hidden;width: 0;height: 0;font-size: 0; line-height: 0;}
table{margin:0px;border-collapse:collapse;border-spacing: 0;}
td,th{-ms-word-break:keep-all;word-break:keep-all;vertical-align: middle;}

img{border:0;line-height:0; max-width:100%;}
input[type='text'] , textarea, button, select {-webkit-border-radius: 0;}
textarea, button, select {-webkit-appearance: none; -webkit-border-radius: 0;}

a:link, a:visited{text-decoration:none;color:inherit}
a:active, a:hover{color:inherit;text-decoration:none;}
a img, input.type-image {border:none;}
strong{font-weight:500}

form{margin:0; padding:0}
input.type-text, textarea {border:1px solid #ddd;background:#fff;padding:1px;}
input[type=button] {cursor: pointer;}
select{border:1px solid #ddd;padding:1px}

input:focus, button:focus, textarea:focus  {outline: none;}
input:-internal-autofill-selected, button:-internal-autofill-selected {background-color:#fff !important;}


.pd20 {padding-bottom:20px;}
.centerXY {position:absolute; width: 100%; text-align: center; top:50%; left:50%; -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.centerX {position:absolute; left:50%; -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);}
.centerY {position:absolute; top:50%; -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}
.pt0 {padding-top: 0 !important;}
.pb0 {padding-bottom: 0 !important;}
.mt0 {margin-top: 0 !important;}
.mb0 {margin-bottom: 0 !important;}
.flex {display: flex; flex-wrap:wrap;}
.ai-c {align-items:center;}
.jc-sb {justify-content:space-between;}
.jc-c {justify-content:center;}
.text-els {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.text-c {text-align: center;}
.text-r {text-align: right;}
object {pointer-events: none;display: block;}
body {overflow-x:hidden;}

.reveal {opacity: 0;}
.reveal.scrolled {opacity: 1;}

.fade-up.scrolled {animation: fade-up .8s ease-in-out both;}
.fade-up-s.scrolled {animation: fade-up-s .8s ease-in-out both;}
.fade-right.scrolled  {animation: fade-right .8s ease-in-out both;}
.fade-right-s.scrolled  {animation: fade-right-s .8s ease-in-out both;}
.fade-left.scrolled  {animation: fade-left .8s ease-in-out both;}
.fade-left-s.scrolled  {animation: fade-left-s .8s ease-in-out both;}
.delay01 {-webkit-animation-delay: 0.1s !important;-moz-animation-delay: 0.1s !important;-o-animation-delay: 0.1s !important;}
.delay02 {-webkit-animation-delay: 0.2s !important;-moz-animation-delay: 0.2s !important;-o-animation-delay: 0.2s !important;}
.delay03 {-webkit-animation-delay: 0.3s !important;-moz-animation-delay: 0.3s !important;-o-animation-delay: 0.3s !important;}
.delay04 {-webkit-animation-delay: 0.4s !important;-moz-animation-delay: 0.4s !important;-o-animation-delay: 0.4s !important;}
.delay05 {-webkit-animation-delay: 0.5s !important;-moz-animation-delay: 0.5s !important;-o-animation-delay: 0.5s !important;}
.delay06 {-webkit-animation-delay: 0.6s !important;-moz-animation-delay: 0.6s !important;-o-animation-delay: 0.6s !important;}
.delay07 {-webkit-animation-delay: 0.7s !important;-moz-animation-delay: 0.7s !important;-o-animation-delay: 0.7s !important;}
.delay08 {-webkit-animation-delay: 0.8s !important;-moz-animation-delay: 0.8s !important;-o-animation-delay: 0.8s !important;}
.delay09 {-webkit-animation-delay: 0.9s !important;-moz-animation-delay: 0.9s !important;-o-animation-delay: 0.9s !important;}
.delay10 {-webkit-animation-delay: 1s !important;-moz-animation-delay: 1s !important;-o-animation-delay: 1s !important;}


@keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-webkit-keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-moz-keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-ms-keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-o-keyframes fade-up{
    0%{opacity: 0; transform: translateY(50px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@keyframes fade-up-s{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-webkit-keyframes fade-up-s{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-moz-keyframes fade-up-s{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-ms-keyframes fade-up-s{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-o-keyframes fade-up-s{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@keyframes fade-left{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-webkit-keyframes fade-left{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-moz-keyframes fade-left{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-ms-keyframes fade-left{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-o-keyframes fade-left{
    0%{opacity: 0; transform: translateX(-50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@keyframes fade-left-s{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-webkit-keyframes fade-left-s{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-moz-keyframes fade-left-s{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-ms-keyframes fade-left-s{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-o-keyframes fade-left-s{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}

@keyframes fade-right{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-webkit-keyframes fade-right{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-moz-keyframes fade-right{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-ms-keyframes fade-right{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-o-keyframes fade-right{
    0%{opacity: 0; transform: translateX(50px);}
    100%{ opacity: 1; transform: translateX(0);}
}

@keyframes fade-right-s{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-webkit-keyframes fade-right-s{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-moz-keyframes fade-right-s{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-ms-keyframes fade-right-s{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-o-keyframes fade-right-s{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}



/* header */
header{position:fixed; z-index:99999; width:100%; margin:0 auto; height:120px; top:0; }
nav{width:90%; margin:0 auto; box-sizing:border-box; }
.logo {z-index:1111111111111111111; width: 155px;height: 100%;}
.logo a {display: block;width: 100%; height: 100%; background: url(/images/logo.svg) no-repeat center/100%;}

/*desk 메뉴*/
.d_menu {text-align: center;}
.d_menu > li {display:inline-block; padding: 0 18px; text-align:center;font-size:18px;}
.d_menu > li > a {color: #000; font-weight: 600;}
/*.d_menu li a:hover {opacity: 0.6;}*/
.d_menu ul {background: #ffffff; position: absolute; top:0px;left:50%; display: none;box-shadow:2px 2px 5px #c2c2c2;
transform: translate(-50%, 10px);}
.d_menu ul li {float: none; position: relative; width:100%; padding:10px; padding-left: 15px; font-size:14px; text-align:left; min-width:160px; border-bottom: 1px solid #cdcdcd;}



.d_menu ul li a {color:#212121; display: block;}
.d_menu ul li a:hover {color:#212121;}


.d_menu ul li a:hover:before {content:'';position:absolute;top:0;left:0;width:5px; height:100%;background:var(--brand-color1);}

.d_menu ul li:nth-last-of-type(1) {border-bottom:0px;}

.sub-1dli .on {}
.d_menu ul li.on a:before {content:'';position:absolute;top:0;left:0;width:5px; height:100%;background:var(--brand-color1);}
.sub-1dli.on > a.sub-1da {font-weight: 900; color: var(--brand-color1);}


/*메뉴효과*/
.navScroll header{ height:120px;  min-height:60px; background: rgba(255,255,255,0.95);}
.navScroll .d_menu > li {line-height: 60px;}
.navScroll .d_menu > li > a {color: #000;}
/* .navScroll .d_menu li a.active {color: #1a258a; opacity: 1 !important;}*/
.navScroll .logo a {display: block;width: 100%; height: 100%; background: url(/images/logo-c.svg) no-repeat center/100%;}
.navScroll header, .navScroll .d_menu > li, .navScroll .logo, .navScroll .logo img {-webkit-transition: 0.3s ease-in-out;  -moz-transition: 0.3s ease-in-out;  -o-transition: 0.3s ease-in-out;  transition: all 0.3s ease-in-out;}
.navScroll .hamburger__icon, .navScroll .hamburger__icon:before, .navScroll .hamburger__icon:after {background: #212121;}

.at-lnb div div ul li a{color:#fff;}

.navScroll .at-lnb div div ul li a{color:#333333;}


/*Mobile 메뉴*/
.hamburger {display: none; width: 60px; height: 60px; position: fixed; top: 10px; right: 0; z-index: 999999; padding: 12px; -ms-touch-action: manipulation; touch-action: manipulation;}
.hamburger__icon {  position: relative;  margin-top: 17px;  margin-bottom: 7px;}
.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {display: block; width: 25px; height: 2px; background-color: #fff; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}
.hamburger__icon:before, .hamburger__icon:after {  position: absolute;  content: "";}
.hamburger__icon:before {top: -7px;}
.hamburger__icon:after {top: 7px;}
.hamburger.active .hamburger__icon {background-color: transparent;}
.hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after {background-color: #fff;}
.hamburger.active .hamburger__icon:before { -moz-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); -webkit-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg);}
.hamburger.active .hamburger__icon:after { -moz-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -webkit-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg);}
.fat-nav {top: 0; left: 0; z-index: 9999; position: fixed; display: none; width: 100%; height: 100%;
    background: rgb(0 0 0/90%);  -moz-transition-property: -moz-transform; -o-transition-property: -o-transform;
    -webkit-transition-property: -webkit-transform; transition-property: transform;
    -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;}
.fat-nav__wrapper {  width: 100%;  height: 100%;  display: table;  table-layout: fixed;padding-top:120px;}
.fat-nav.active {-moz-transform: scale(1);  -ms-transform: scale(1);  -webkit-transform: scale(1);  transform: scale(1);}
.fat-nav li {list-style-type: none;text-align: left;padding: 5px 25px 15px;font-size: 18px;font-weight: 700;}
.fat-nav li, .fat-nav li a {color: var(--brand-color2);}
.fat-nav li a {text-decoration: none;}


.fat-nav__wrapper > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.fat-nav__wrapper > ul > li.a1dulline {border-bottom: 0px solid #dfdfdf}



.fat-nav-sub-1dul {display:flex;}

.fat-nav-sub-1dul li a {
    font-size: 18px;
    line-height: 140%;
    font-weight: 400;
    padding:5px 5px;
    color: #fff;
}

@media(max-width:900px) {
}


/* footer */
footer{width:100%;  overflow:hidden; font-size:16px; background: var(--brand-color1); color:#fff; padding:60px 5%; }
.footer_con {position:relative; }
.footer_con > ul.flex {width:100%;justify-content: space-between;}
.footer_con h4 {margin-bottom: 10px; font-weight: 500; font-size:20px; opacity: 0.7;letter-spacing:-0.5px;}
.footer_con ul > li {margin-top:40px;}
.f_logo object {width: 224px;}
.footer_con ol li img {width: 21px;}
.footer_con ol li {margin-right: 25px;}
.footer_con ol li:hover {opacity: 0.6;}
.f_logo {position: relative;flex:1;margin-top:15px;}
.f_logo p {font-size:14px; opacity:0.6;}

#tothetop {position: fixed; z-index:9999; right: 30px; bottom:30px; cursor:pointer;opacity:0;-webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
#tothetop.scroll {opacity:1;-webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s; }
#tothetop img {opacity:0.7}
#tothetop img:hover {opacity:1; }



.main-visual {position:relative; overflow:hidden; background: var(--brand-color1);}
.main-visual .swiper-slide {width:100%; min-height:800px; height: 100vh; position:relative;}
.slid-wrap {width: 90%; margin: 0 auto; position: relative;height: 100vh; }
.slid-wrap:before {content:''; position: absolute; left: 0; bottom: 60px; background: url(/images/logo-text.svg) no-repeat center bottom/100%; width: 147px; height: 20px; z-index:1;}
.slid-wrap:after {content:''; position: absolute; right: 0; bottom: 0; background: url(/images/visual_bg.png) no-repeat center bottom/100%; width: 70%; height: 100%; opacity: 0.15;}
.slid-wrap object{width: 114px; position: absolute; right: 0; top:220px;}
.slid-txt {color:#fff;width:90%; max-width:1400px; text-align: left; margin: 0 auto; z-index:11; top:220px}
.slid-txt > div {width: 100%; overflow:hidden; font-size:45px; font-weight: 700; text-transform: uppercase;line-height: 1.2;}
.slid-txt > div.msl {font-size:38px;margin-top:10px;}
.slid-txt > div .f-serif {font-weight: 400;}
.slid-txt > div p {line-height: 1.2; display: flex; margin-top: -4px; flex-wrap:wrap;}

.slid-txt .f-serif-kr p {font-weight: 300; font-size: 50px;}
.swiper-slide-active .slid-txt > div:nth-child(1) p span {-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-ms-transition-delay: 0.2s;-o-transition-delay: 0.2s;transition-delay: 0.2s;}
.swiper-slide-active .slid-txt > div:nth-child(2) p span  {-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-ms-transition-delay: 0.4s;-o-transition-delay: 0.4s;transition-delay: 0.4s;}
.swiper-slide-active .slid-txt > div:nth-child(3) p span  {-webkit-transition-delay: 0.6s;-moz-transition-delay: 0.6s;-ms-transition-delay: 0.6s;-o-transition-delay: 0.6s;transition-delay: 0.6s;}
.swiper-slide-active .slid-txt > div:nth-child(4) p span  {-webkit-transition-delay: 0.8s;-moz-transition-delay: 0.8s;-ms-transition-delay: 0.8s;-o-transition-delay: 0.8s;transition-delay: 0.8s;}
.swiper-slide-active .slid-txt > div:nth-child(5) p span  {-webkit-transition-delay: 1s;-moz-transition-delay: 1s;-ms-transition-delay: 1s;-o-transition-delay: 1s;transition-delay: 1s;}
.swiper-slide-active .slid-txt > div:nth-child(6) p span  {-webkit-transition-delay: 1.2s;-moz-transition-delay: 1.2s;-ms-transition-delay: 1.2s;-o-transition-delay: 1.2s;transition-delay: 1.2s;}
.swiper-slide-active .slid-txt > div:nth-child(7) p span  {-webkit-transition-delay: 1.4s;-moz-transition-delay: 1.4s;-ms-transition-delay: 1.4s;-o-transition-delay: 1.4s;transition-delay: 1.4s;}
.slid-txt .text-h  {overflow:hidden; display: inline-block;}
.slid-txt .text-h  span {overflow:hidden; display: inline-block; vertical-align: middle; transform:translate3d(0,120%,0);}

.swiper-slide-active .slid-txt .text-h  span   {transform: none;  transition-duration: 1s;}
.txtWithme {margin-bottom: 30px;}

.con {width:90%; max-width:1400px; margin: 0 auto; overflow:hidden; position:relative;}
.con.wide {width: 90% !important; max-width:90% !important;}
.con > .con {width: 100% !important;}
.con-l-p {width: calc(100% - (50% - 700px));margin-left: calc(50% - 700px); overflow:hidden;}
.con-l-p > div {width: 100%; overflow:hidden;}
.pd-200 {padding: 200px 0;}
.pd-200 {padding: 100px 0;}
.pt0 {padding-top: 0 !important;}
.pb0 {padding-bottom: 0 !important;}
.bg-blue {background: var(--brand-color1); color: #fff;}
section {width: 100%; position: relative;}

.tit {font-size:60px; font-weight: 700; text-transform: uppercase; margin-bottom: 45px; line-height: 1.3; position: relative;}
.txt {font-size:24px; font-weight: 400; margin-bottom: 80px;position: relative;}
#partner {text-align: center; color: #fff; padding: 240px 0 0;margin-bottom:120px;}
#partner:before {content:''; position: absolute; left: 0;   bottom: 0; right: 0; top:140px; background: url(/images/gradient_white.png) no-repeat center/100% 100%;}

#partner .simply-scroll-list li {width: 220px !important; padding: 30px 20px !important; opacity: 0.5 ;}
.partner-wrap {position: relative;}
.partner-wrap:before {content:''; position: absolute; top:0; right: 0; bottom: 0;left: 0; z-index:1 }

#editorial {margin-top: 0px;}
.tit-w2 h2 {margin-right: 80px;}

.banner01 {color: var(--brand-color1); position: relative;}
.banner01:before {content:''; position: absolute; left: -70px; right: 60%;bottom: -30px; top:-100px; background: url(/images/banner01_bg.png) no-repeat center bottom/100%; z-index:0;opacity: 0.25;}
.banner01 object{ width: 265px;margin: 0 auto; margin-bottom: 70px;}
.banner_tit {text-align: center; font-size: 44px;  font-weight: 600;word-break:keep-all;}

.banner02 {width: 100%; padding: 180px 0; color: #fff; overflow:hidden; position: relative;background: url(/images/banner02_bg.jpg) no-repeat center/cover;}
#visual {margin-top: 0px;}
.visual-list li {width: 19.8%;}

.banner02 object{ width: 173px; position: absolute; left: 5%; top:70px;}
#web_it:before {content:''; position: absolute; left: 0;    bottom: -1px; right: 0; top:280px; background: url(/images/gradient_white.png) no-repeat center/100% 100%;}
#web_it .txt {margin-bottom: 0 !important;}
.web-mockup {margin-top: -30px;}
.web-list li {width: calc(100%/3 - 20px);}

.video-list {width: calc(100% + 8px); margin-left: -4px; margin-top: -4px;}
.video-list li {width: calc(25% - 8px); margin: 4px;}

.branding_button {position: absolute; right: 0; bottom: 80px; height: 50px; width: 110px;   }
.branding_button .swiper-button-prev, .branding_button .swiper-button-next {width: 50px  !important; height: 50px  !important; background: url(/images/arrow.png) no-repeat center/100% !important ;}
.branding_button .swiper-button-prev {left: 0 !important;}
.branding_button .swiper-button-next {right: 0 !important; -webkit-transform: scaleX(-1);-moz-transform: scaleX(-1);-ms-transform: scaleX(-1);-o-transform: scaleX(-1);transform: scaleX(-1);}

.brandingSwiper  {width: 106.5%;}
.sns-list-wrap {width: 100%; overflow:hidden; position: relative;
gap:25px;}
.sns-list-wrap:before {content:''; position: absolute; top:0; right: 0; bottom: 0;left: 0; z-index:1 }
.sns-list-wrap .simply-scroll-container { height: 950px;}
.vert .simply-scroll-clip {height:950px!important;overflow:hidden!important;}
/*.sns-list-wrap .simply-scroll-clip {width: 100% !important; height: 100% !important;}*/

.sns-list-wrap .vert {margin-bottom: 0 !important;flex:0 0 calc((100% - 75px) / 4);}
.sns-list li {background: #f8f8f8; margin-bottom: 155px !important; width: 100% !important; height: 0 !important; padding-bottom: 100% !important;}
.sns-list-wrap > .vert:nth-of-type(3) .simply-scroll-clip {padding-top: 130px;}
.sns-list-wrap > .vert:nth-of-type(5) .simply-scroll-clip {padding-top: 230px;}
.sns-list-wrap > .vert:nth-of-type(7) .simply-scroll-clip {padding-top: 150px;}
.sns-text-wrap {z-index:11; width: 100%; padding-top: 100px;}
.sns-text-wrap:before {content:''; position: absolute; top:0; bottom:-170px; width: 50%; left: 25%; background: url(/images/gradient-white.png) no-repeat center/100% 100%;}
.sns-text-wrap:after {content:''; position: absolute; top:0; height: 230px; left: -5px; right: -5px; background: url(/images/gradient-white2.png) no-repeat center/100% 100%;}
.sns-text-wrap > * {z-index:111;}
.sns-wrap {margin-top: 100px;}

.vert .simply-scroll-clip {width:unset!important;}

.photo-wrap {position: relative;}
.photo-wrap .con {position: absolute;}
.photo-list {width: 70%;margin-left: 30%; overflow:hidden;}
.ps1 {margin-left: 18.5%; margin-bottom: 55px; overflow:hidden; width: 110%;}
.ps2 {overflow:hidden; width: 110%;}


/*----------------responsive----------------*/

@media (max-width:1580px) {
.slid-txt > div {font-size:40px;}
.slid-txt > div.msl {font-size:32px;margin-top:8px;}
.con-l-p {width: 95%;margin-left: 5%;}
.sns-list li {margin-bottom: 100px !important;}
}


@media (max-width:1240px) {

.d_menu > li {font-size:17px; padding: 0 10px;}
.photo-list {width: 100%;margin-left: 0%; }
.photo-wrap .con {position: relative; left: auto; -webkit-transform: none;-moz-transform: none;-ms-transform: none;-o-transform: none;transform: none;}
.ps1 {margin-left: 0%; margin-bottom: 20px;}
.ps2 {margin-left: 18.5%;}
.footer_con ul > li {}


}


@media(max-width:1000px){

.pd-200 {padding: 150px 0;}
#partner {padding: 180px 0;}
#editorial {margin-top: -50px;}
#partner .simply-scroll-list li {width: 180px !important; padding: 20px 10px !important;}

.sns-text-wrap {padding-top: 75px;}
.sns-wrap {margin-top: 75px;}
.f_logo p {position: relative; bottom: auto; right: auto;margin-top: 10px;}
.f_logo {margin-top: 30px;}
.f_logo object {width: 144px;}
}



/* 데스크탑 메인 메뉴 (d_menu) 관련 스타일 */
.d_menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 가로로 나열 */
    justify-content: flex-end;
    width: 100%; /* 너비를 꽉 채우기 */
    box-sizing: border-box; /* 패딩, 보더가 너비에 포함되도록 */
    margin-top:12px;
}

.d_menu > li.menu-li {
    position: relative; /* 하위 메뉴의 absolute 기준 */
    /* padding: 0 15px; 상위 메뉴 항목 간격 (필요시 조절) */
    display: flex; /* 내부 요소(a 태그와 sub-slide) 정렬 */
    align-items: center; /* 중앙 정렬 */
}

.d_menu > li.menu-li > a.menu-a {
    display: block;
    padding: 10px 15px; /* 상위 메뉴 링크 패딩 */
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    white-space: nowrap; /* 메뉴명이 길어도 줄바꿈 방지 */
}

.d_menu > li.menu-li > a.menu-a:hover {
    color: #007bff; /* 호버 시 색상 변경 예시 */
}

.navScroll .d_menu > li.menu-li > a.menu-a {color:#000;}

/* 하위 메뉴(sub-slide) 기본 스타일 */
.sub-slide {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%; /* 상위 메뉴 바로 아래 */
    left: 50%; /* 상위 메뉴 시작 지점과 일치 */
    background-color: #fff;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    min-width: 180px; /* 적당한 최소 너비 */
    z-index: 1000; /* 다른 요소 위에 표시 */

    /* 기본적으로 숨기고, JS에서 'show' 클래스를 토글 */
    display: none; /* 핵심: 기본적으로 숨김 */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease; /* 부드러운 전환 효과 */
    transform: translate(-50%, -10px); /* 살짝 아래에서 나타나는 효과 */
    pointer-events: none; /* 숨겨져 있을 때 마우스 이벤트 방지 */
}

/* 'show' 클래스가 붙으면 하위 메뉴를 표시 */
.sub-slide.show {
    display: block; /* 핵심: 보이게 함 */
    opacity: 1;
    pointer-events: auto; /* 마우스 이벤트 허용 */
   transform: translate(-50%, -10px);
}

.show > ul {display:block;}

/* 1단계 하위 메뉴 리스트 (ul) */
.sub-1dul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 1단계 하위 메뉴 항목 (li) */
.sub-1dli {
    position: relative; /* 2단계 하위 메뉴의 absolute 기준 */
}

/* 1단계 하위 메뉴 링크 (a) */
.sub-1dli > a.sub-1da {
    display: block;
    padding: 4px 6px;
    text-decoration: none;
    color: #555;
    white-space: nowrap;
    font-weight:500;
}

.sub-1dli > a.sub-1da:hover {
    font-weight:900;
    color: var(--brand-color1);
}

/* 2단계 하위 메뉴 (sub-2div) 스타일 */
.sub-1dli .sub-2div {
    top: 0; /* 1단계 하위 메뉴와 같은 높이 */
    left: 100%; /* 1단계 하위 메뉴 오른쪽 */
    margin-left: 5px; /* 약간 간격 주기 */
}

/* New 아이콘 */
.fa-bolt.new, .fa-bolt.sub-1new, .fa-bolt.sub-2new {
    color: orange;
    font-size: 0.8em;
    margin-left: 5px;
}

/* 구분선 스타일 */
.sub-1line, .sub-2line {
    border-top: 1px solid #eee;
    margin: 5px 10px; /* 구분선 좌우 여백 */
    padding: 0;
}
.sub-1line a, .sub-2line a {
    visibility: hidden; /* 구분선 텍스트 숨기기 */
    height: 0;
    padding: 0;
    margin: 0;
    line-height: 0; /* 높이 0으로 만들어서 공간 안 차지하게 */
}

/* 모바일 메뉴 하위 메뉴 관련 (fat-nav) */
/* fat-nav는 별도의 라이브러리이므로 해당 라이브러리의 JS와 CSS를 확인해야 함. */
/* 아래 CSS는 fat-nav 내부의 하위 메뉴를 위한 기본 숨김/들여쓰기 */
.fat-nav-sub-1dul,
.fat-nav-sub-2dul {
    display: flex;
    list-style: none;
    margin: 0;
    flex-wrap: wrap;
    flex-direction: row;
}

.fat-nav-sub-1dul > li {}

/* fat-nav에서 메뉴가 열렸을 때 하위 메뉴를 보여주는 CSS 클래스를 추가하거나 */
/* fat-nav 라이브러리 자체가 하위 메뉴를 처리하는 방식에 맞춰야 함 */
/* 예시: .fat-nav-menu-item.active > .fat-nav-sub-1dul { display: block; } */




@media (max-width:900px){

.hamburger {display:block !important}
.d_menu {display:none!important;}
header {height: 120px;}
.no-scroll .logo a {display: block;width: 100%; height: 100%; background: url(/images/logo.svg) no-repeat center/100%;}
.main-visual .swiper-slide {min-height:500px}
.slid-txt > div, .slid-txt .f-serif-kr p {font-size:40px;   }
.slid-wrap object {top:140px; width: 80px;}
.slid-txt > div p {margin-bottom: 10px;}
.pd-200 {padding: 100px 0;}
#partner {padding:60px 0 0;margin-bottom:100px;}
#partner:before {background:unset;}

.banner01:before {
    content: '';
    position: absolute;
    left: -23px;
    right: 37%;
    bottom: -3%;
    top: -100px;
    background: url(/images/banner01_bg.png) no-repeat center bottom / 100%;
    z-index: 0;
    opacity: 0.25;
}

#editorial {margin-top: -50px;}
.sns-text-wrap {padding-top: 50px;}
.sns-wrap {margin-top: 50px;}
.tit {font-size:44px; margin-bottom: 20px;}
.txt {font-size:20px; ; margin-bottom: 60px;}
.banner_tit {font-size:34px;}
#partner .simply-scroll-list li {width: 150px !important; padding: 20px 10px !important;}
.banner01 object{width: 225px;margin-bottom: 30px;}
.banner02 {padding: 130px 0;}
.banner02 object{width: 113px;top: 40px;}
.branding_button {bottom: auto; top:100px;}
.web-mockup {margin-top: 0;}
.sns-list-wrap .simply-scroll-container {}
.sns-list-wrap > div:nth-child(4) {padding-top:40px;}
.sns-list-wrap .simply-scroll-container {height: 750px;}
.vert .simply-scroll-clip {height:750px!important;overflow:hidden!important;}
}



@media (max-width:768px){
.slid-txt > div.msl {font-size:25px;margin-top:6px;}
.pd-200 {padding: 80px 0;}
#partner {padding: 110px 0;}
#editorial {margin-top: -45px;}
.sns-text-wrap {padding-top: 40px;}
.sns-wrap {margin-top: 40px;}

.hamburger {top:10px;}
.con, .slid-txt {width:92%; }
.slid-wrap:before {display:none;}
.slid-wrap, .main-visual .swiper-slide {height: 80svh; min-height:400px;}
.slid-wrap:after {width: 90%; bottom:00px;right: 0%;}


.tit {font-size:40px; margin-bottom: 10px;}
.txt {font-size:18px; ; margin-bottom: 40px;}
.banner_tit {font-size:30px;}

.branding_button {bottom: auto; top:80px; height: 40px; width: 90px;}
.branding_button .swiper-button-prev, .branding_button .swiper-button-next {width: 40px  !important;height: 40px  !important;}
.web-list li {width: 100%;}
.video-list li {width: calc(50% - 8px);margin: 4px;}
.sns-list li {margin-bottom: 60px !important;}
.sns-list-wrap .simply-scroll-container {height: 650px;}
.vert .simply-scroll-clip {height:650px!important;overflow:hidden!important;}


.footer_con > ul.flex {flex-direction: column;}
}





@media (max-width:600px){

body {font-size:14px;}


.logo {width: 120px;}
#partner {padding: 50px 0 12px 0;}
#editorial {margin-top: -27px;}
.slid-txt > div, .slid-txt .f-serif-kr p {font-size:22px;   }
.slid-txt > div.msl {font-size:18px;margin-top:6px;}
.slid-wrap object {top:100px; width: 50px; opacity: 0.2;}
.slid-txt > div p {margin-bottom:10px;}

.slid-wrap:before {width: 90px;  bottom: 20px;}
.slid-txt {top:150px;}
.txtWithme {margin-bottom: 10px;}

.tit {font-size:28px; margin-bottom: 10px; font-weight: 700;}
.txt {font-size:14px; ; margin-bottom: 30px;}
.txt br {display: none;}
.banner_tit {font-size:22px;}
.banner_tit br {display: none;}
#partner .simply-scroll-list li {width: 90px !important; padding: 15px 0 !important;}
#partner:before {top:180px}

.con.wide {width: 85% !important; max-width:85% !important;}
#partner .tit {width:  85%; margin: 0 auto; margin-bottom: 20px;}

.con-l-p {width: 92.5%;margin-left: 7.5%;}
#visual .con, #media .con {width: 100% !important;; max-width:100% !important;}
#visual .con .tit, #visual .con .txt, #media .con .tit, #media .con .txt {padding: 0 7.5%;word-break:keep-all;}
.visual-list li {width: 49%; margin-bottom: 2%;}
.visual-list li:last-child {display: none;}
.banner01 object{width: 125px;margin-bottom: 20px;}

.banner02 {padding: 80px 0;}
.banner02 object{width: 60px;left:5%;top: 30px;}


.branding_button { height: 25px; width: 55px;}
.branding_button .swiper-button-prev, .branding_button .swiper-button-next {width: 25px  !important;height: 25px  !important; margin-top: -12.5px;}

.sns-list-wrap .simply-scroll-container {height: 520px;}
.vert .simply-scroll-clip {height:520px!important;overflow:hidden!important;}
.sns-list li {margin-bottom: 40px !important;}
.sns-text-wrap:before {width: 100%; left: 0;}
.sns-list-wrap > div:nth-child(2) .simply-scroll-clip {padding-top: 70px;}
.sns-list-wrap > div:nth-child(3) .simply-scroll-clip {padding-top: 200px;}
.ps1 {margin-left: 0%; margin-bottom: 10px;}
.ps2 {margin-left: 10%;}
#tothetop {display:none;}
footer {padding: 7.5% 5%; font-size:12px;}
.footer_con h4 {margin-bottom: 5px;font-size:14px;}
.footer_con ul > li {}
.footer_con ol li {margin-right: 15px;}
.f_logo p {font-size:12px;}
.f_logo object {width: 120px;}


.partner-wrap {animation:none !important; opacity: 1 !important;}


.fat-nav-sub-1dul > li {
    font-size: 14px;
    line-height: 140%;
    font-weight: 400;
    padding:5px 5px;
    color: #fff;
}

.fat-nav-sub-1dul > li > a{
    font-size: 14px;
    line-height: 140%;
    font-weight: 400;
    color: #fff;
}


@keyframes fade-up{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-webkit-keyframes fade-up{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-moz-keyframes fade-up{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-ms-keyframes fade-up{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@-o-keyframes fade-up{
    0%{opacity: 0; transform: translateY(20px);}
    100%{ opacity: 1; transform: translateY(0);}
}
@keyframes fade-left{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-webkit-keyframes fade-left{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-moz-keyframes fade-left{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-ms-keyframes fade-left{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-o-keyframes fade-left{
    0%{opacity: 0; transform: translateX(-20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@keyframes fade-right{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-webkit-keyframes fade-right{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-moz-keyframes fade-right{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-ms-keyframes fade-right{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}
@-o-keyframes fade-right{
    0%{opacity: 0; transform: translateX(20px);}
    100%{ opacity: 1; transform: translateX(0);}
}

}