@charset "UTF-8";
*{scroll-behavior: smooth;}/*책갈피 기능 사용 시 스크롤 부드럽게 이동*/
:root{
    --mrgn-half: 9px;
    --mrgn: calc(var(--mrgn-half) * 2);    /*18*/
    --mrgn-x2: calc(var(--mrgn-half) * 4); /*36*/
    --mrgn-x4: calc(var(--mrgn-half) * 8); /*72*/
    --mrgn-x8: calc(var(--mrgn-half) * 16);/*144*/
    
    --c-k: #0d0d0d;
    --c-w: #fff;
    --c-p1: #8d724f; /*141, 114, 79*/
    --c-p2: #b0a08e; /*176, 160, 142*/
    --c-shadow: #260101;
}
::selection{color: var(--c-w); text-shadow: none; background: var(--c-p2);}

html, body{font-family: 'Roboto', sans-serif; min-width:calc(1200px + var(--mrgn-x2)); max-width:1920px; margin:0 auto; background:var(--c-w);}
a{text-decoration: none; color: var(--c-k);}

body.ready{overflow: hidden;}

.wrap{}
.ratio{width: 100%; position: relative;}
.title{ position: absolute; top: 50%;}
.title.center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
.title.right{ position: absolute; right: 0; top: 50%; transform: translate(0, -50%); text-align: right;}
.full_img{ position: relative; width: 100%;}

ul.v_con{ width: calc(100% + var(--mrgn-x2)); margin: 0 calc(var(--mrgn) * -1) calc(var(--mrgn-x2) * -1);}
ul.v_con + ul.v_con{padding-top: var(--mrgn-x2);}

ul.v_con > li.cells{ position: relative; display: inline-block; margin: 0 var(--mrgn) var(--mrgn-x2); width: calc(100% - var(--mrgn-x2)); vertical-align: top;}
ul.v_con > li.cells.box{ border-radius: var(--mrgn-x2); overflow: hidden;}

ul.v_con li.cells.box .full_img{ width: 100%;}

ul.v_con.two_con{}
ul.v_con.two_con > li.cells{width: calc(50% - var(--mrgn-x2));}
ul.v_con.three_con{}
ul.v_con.three_con > li.cells{width: calc(33.333% - var(--mrgn-x2));}
ul.v_con.four_con{}
ul.v_con.four_con > li.cells{width: calc(25% - var(--mrgn-x2));}
ul.v_con.six_con{}
ul.v_con.six_con > li.cells{width: calc(16.666% - var(--mrgn-x2));}



/*------꾸밈 요소//------*/
ul.v_con li.cells.box.click{ cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); transition: all 100ms ease-in-out;}
ul.v_con li.cells.box.click:hover{ box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .75); filter: brightness(1.05);}
ul.v_con li.cells.box.click:active{ box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .35); transform: scale(.975); filter: brightness(.95);}


ul.v_con li.cells.box.click:before,
ul.v_con li.cells.box.click:after{ position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border-radius: inherit; z-index: 1; transition: inherit;}
ul.v_con li.cells.box.click:before{ box-shadow: inset 0 0 8px 4px rgba(255, 255, 255, .05), inset 0 0 16px 8px rgba(255, 255, 255, .05);}
ul.v_con li.cells.box.click:after{ box-shadow: inset 0 0 4px 2px rgba(255, 255, 255, .35), inset 0 0 8px 4px rgba(255, 255, 255, .35); mix-blend-mode: overlay;}

/*
transition: 적용요소 변환시간 선형/비선형 딜레이;
ex) transition: all 300ms ease-out 300ms;

transition: inherit(상속); -> 부모의 transition을 상속받음
* 바로 윗 조상에게만 상속받을 수 있음 (할머니X)
*/

ul.v_con li.cells.viewer{} /* 이미지와 텍스트를 감싸고 있는 전체 박스*/
ul.v_con li.cells.viewer .text_box{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; text-align: center; color: #fff; transition: all 300ms ease-out;} /*텍스트들을 감싸고 있는 박스*/

ul.v_con li.cells.viewer:hover .text_box{}
ul.v_con li.cells.viewer .text_box:before{ position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 25%; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); opacity: .35; transition: inherit;} /*before을 사용하여 그라데이션을 넣어줌. (hover 되기 전 상태)*/
ul.v_con li.cells.viewer:hover .text_box:before{ height: 45%; opacity: .65;} /*viewer가 hover되었을 때 text_box 그라데이션의 높이가 더 높아짐 */
ul.v_con li.cells.viewer:hover .text_box:before{}
ul.v_con li.cells.viewer .text_box h4,
ul.v_con li.cells.viewer .text_box h5{position: absolute; width: 100%; padding: 0 var(--mrgn); box-sizing: border-box; transition: inherit;} /*박스 양옆에 글자가 너무 딱 붙지 않게 하기 위해 padding을 줌*/
ul.v_con li.cells.viewer .text_box h4{ bottom: 26px;} /*hover되기 전 밑으로부터 26px 띄워줌*/
ul.v_con li.cells.viewer:hover .text_box h4{margin-bottom: 18px; } /*hover되었을 때 밑으로부터 70px 띄워줌*/
ul.v_con li.cells.viewer .text_box h5{ bottom: -10px; opacity: 0; line-height: 1.15em; filter: blur(2px);} /*hover 되기 전*/
ul.v_con li.cells.viewer:hover .text_box h5{ bottom: 32px; opacity: 1; line-height: 1.15em; filter: blur(0); transition-delay: 150ms;}



ul.v_con > li.cells.box.gray{transition: all 250ms linear;}
ul.v_con > li.cells.box.gray:before,
ul.v_con > li.cells.box.gray:after{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; mix-blend-mode: overlay; transition: inherit; border-radius: inherit;}
ul.v_con > li.cells.box.gray > img{ transition: inherit; filter: grayscale(0); filter: brightness(1);}
ul.v_con > li.cells.box.gray:hover > img{filter: grayscale(1); filter: brightness(.5);}
ul.v_con > li.cells.box.gray:hover:before,
ul.v_con > li.cells.box.gray:hover:after{ opacity: 1; }
ul.v_con > li.cells.box.gray:hover:before{background: linear-gradient(135deg, var(--c-p1) 0%, var(--c-p2) 65%);}
ul.v_con > li.cells.box.gray:hover:after{ background: rgba(0, 0, 0, .35);}





/*------//꾸밈 요소------*/




.sections{ position: relative; z-index: 1;}
.sections{}

#home.sections.section_01{background: rgba(0, 0, 0, .1);}
.width_con{ padding: var(--mrgn-x8) 0; width: 1200px; margin: 0 auto;}

.title_con { padding-bottom: var(--mrgn-x4);}
.title_con.nobt {padding-bottom: 0;}
.title_con.center { text-align: center;}
.title_con.right { text-align: right;}
.title_con > *{ position: relative;}

h1, h2{font-weight: 900;}
h3, h4, h5{font-weight: 700;}

.title_con h1,
.title_con h2,
.title_con h3{ line-height: .83em; text-transform: uppercase;}
.title_con h4,h4,
.title_con h5,h5{ line-height: 1.15em; max-width: 500px; }

.title_con h1{ font-size: 100px; font-weight: 800; margin-top: calc(var(--mrgn) - 6px);}
.title_con h2{ font-size: 72px; font-weight: 600; margin-top: calc(var(--mrgn) - 6px);}
.title_con h3{ background: linear-gradient(90deg, var(--c-p1) 20%, var(--c-p2) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;}
/*.title_con h3:after{ background: linear-gradient(to right, #FF0 0%, #F00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}*/

.title_con.center h1,
.title_con.center h2{}

.title_con.center h4,
.title_con.center h5{margin-left: auto; margin-right: auto;}

.title_con.right h4,
.title_con.right h5{ margin-left: auto;}

.title_con h3{ font-size: 32px; font-weight: 500;}
h4{ font-size: 18px; font-weight: 500; }
.title_con h4{ margin-top: calc(var(--mrgn-x2) - 6px);}
.title_con h4:before{ content: ''; width: var(--mrgn-x2); height: 3px; background: var(--c-k); position: absolute; top: calc(var(--mrgn) * -1); left: 0; background: linear-gradient(90deg, var(--c-p1), var(--c-p2));}
.title_con.center h4:before{ left: 50%; margin-left: calc(var(--mrgn) * -1);}
.title_con.right h4:before{ left: auto; right: 0;}

h5{ font-size: 14px; font-weight: 400;}
.title_con h5{  margin-top: calc(var(--mrgn) - 5px);}

.width_con ul.v_con li.cells .title h4 > *{ vertical-align: sub; }


/*translateX(-50%) 자기크기의 절반 만큼 x축으로 당겨줌*/

.loading_cover{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--c-k); z-index: 9999;}
.loading_cover:before{ position: absolute; content: 'Complete'; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--c-p1);}
body.ready .loading_cover:before{content: 'Loading...'; }




#header.sections.section_00{position: fixed; top: 0; left: 0; z-index: 999; width: 100%; max-width: 1920px; min-width: calc(1200px + var(--mrgn-x2)); transition: all 250ms ease-out; z-index: 999; overflow: hidden;}
#header.sections.section_00.scrolled,
#header.sections.section_00:hover{ box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25); transition-delay: 250ms;}
#header.sections.section_00:after,
#header.sections.section_00:before{ position: absolute; content: ''; left: 0; width: 100%; height: 100px; transition: inherit; transition: all 250ms ease-out;}
#header.sections.section_00:before{top: -100px; box-shadow: 0 0 50px 30px rgba(0, 0, 0, .75); z-index: 1;}
#header.sections.section_00.scrolled:before{box-shadow: 0 0 0 60px rgba(0, 0, 0, .75);}
#header.sections.section_00:hover:before,
#header.sections.section_00.scrolled:hover:before{box-shadow: 0 0 0 80px rgba(0, 0, 0, .75);}
#header.sections.section_00:after{ opacity: 0; top: 0; backdrop-filter: blur(var(--mrgn)); height: 0; background: rgba(141, 114, 79, .75);}

#header.sections.section_00:hover:before{ box-shadow: 0 0 0 80px rgba(0, 0, 0, .75);}
#header.sections.section_00.scrolled:before{ box-shadow: 0 0 0 60px rgba(0, 0, 0, .35);}
#header.sections.section_00:hover:after,
#header.sections.section_00.scrolled:after{ opacity: 1; height: 100%;}

@media all and (min-width : 1921px){
    #header.sections.section_00{ left: 50%; transform: translateX(-50%);}
}
#header.sections.section_00 .width_con{position: relative; padding: 0; height: 80px; z-index: 2;  transition: all 250ms ease-out;}
#header.sections.section_00.scrolled .width_con{height: 60px;}
#header.sections.section_00:hover .width_con,
#header.sections.section_00.scrolled:hover .width_con{height: 80px;}
#header.sections.section_00 .width_con a.btn_home{position: absolute; left: 0; width: 220px; top: 50%; transform: translateY(-50%);  transition: all 250ms ease-out;}
#header.sections.section_00.scrolled .width_con a.btn_home{width: 170px;}
#header.sections.section_00.scrolled:hover .width_con a.btn_home{width: 220px;}
#header.sections.section_00 .width_con a.btn_home img{width: 100%;}
#header.sections.section_00 .width_con .nav_con{}
#header.sections.section_00 .width_con .nav_con ul{position: absolute; right: 0;}
#header.sections.section_00 .width_con .nav_con ul:hover li{opacity: .4;}
#header.sections.section_00 .width_con .nav_con ul li:hover {opacity: 1;}
#header.sections.section_00 .width_con .nav_con ul li{display: inline-block; margin-left: var(--mrgn-x2); transition: all 250ms linear;}
#header.sections.section_00 .width_con .nav_con ul li a{ color: var(--c-w); line-height: 1em; transition: inherit;}
#header.sections.section_00 .width_con .nav_con ul li i:hover,
#header.sections.section_00 .width_con .nav_con ul li a:hover{color: var(--c-p2); text-shadow: 0 0 20px var(--c-k);}
#header.sections.section_00 .width_con .nav_con ul.nav{bottom: 16px;}
#header.sections.section_00 .width_con .nav_con ul.nav li{}
#header.sections.section_00 .width_con .nav_con ul.nav li a{font-size: 18px;}
#header.sections.section_00.scrolled .width_con .nav_con ul.nav{ bottom: 21px;}
#header.sections.section_00.scrolled:hover .width_con .nav_con ul.nav,
#header.sections.section_00 .width_con .nav_con ul.nav{ bottom: 16px;}
#header.sections.section_00.scrolled .width_con .nav_con ul.nav_customer{ top: 4px; opacity: 0; filter: blur(4px); pointer-events: none;}
#header.sections.section_00.scrolled:hover .width_con .nav_con ul.nav_customer{ top: 16px; opacity: 1; filter: blur(0); pointer-events: auto;}
#header.sections.section_00 .width_con .nav_con ul.nav_customer{top: 16px; opacity: 1; filter: blur(0); transition: all 250ms ease-out; pointer-events: auto;}
#header.sections.section_00 .width_con .nav_con ul.nav_customer li{margin-left: var(--mrgn); font-size: 14px; color: var(--c-w);}
#header.sections.section_00 .width_con .nav_con ul.nav_customer li a{font-size: 14px;}

#home.sections.section_01{}
#home.sections.section_01:after{position: absolute; width: 100%; height: 100%; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(); pointer-events: none;}
#home.sections.section_01 img{}
#home.sections.section_01 iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--c-p1);}
#home.sections.section_01 .width_con{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
#home.sections.section_01 .width_con .title_con{color: var(--c-w);}
#home.sections.section_01 .width_con .title_con h4:before{}

#intro.sections.section_02{}
#intro.sections.section_02 .width_con{}
#intro.sections.section_02 .width_con .title_con{}
#intro.sections.section_02 .width_con ul.v_con{}
#intro.sections.section_02 .width_con ul.v_con li.cells {position: relative;}
#intro.sections.section_02 .width_con ul.v_con li.cells:hover{}
#intro.sections.section_02 .width_con ul.v_con li.cells .full_img{filter: grayscale(.5);}
#intro.sections.section_02 .width_con ul.v_con li.cells .full_img:hover{filter: grayscale(0);}
#intro.sections.section_02 .width_con ul.v_con li.cells .title{color: var(--c-w); text-shadow: 0 0 30px rgba(0, 0, 0, .5); top: calc(50% + var(--mrgn-x2)); transition: all 250ms ease-out}
#intro.sections.section_02 .width_con ul.v_con li.cells:hover .title{top: 50%;}
#intro.sections.section_02 .width_con ul.v_con li.cells .title h4{}
#intro.sections.section_02 .width_con ul.v_con li.cells .title h5{opacity: 0; transition: inherit; line-height: 2em; transition-delay: 100ms;}
#intro.sections.section_02 .width_con ul.v_con li.cells:hover .title h5{opacity: 1; line-height: 1.15em;}
#intro.sections.section_02 .width_con ul.v_con li.cells .title .bold{font-size: var(--mrgn-x4); line-height: var(--mrgn-x4);}

#story.sections.section_03{ background: url(../img/bg_s3_01.jpg) ;}
#story.sections.section_03 .width_con{padding: calc(var(--mrgn-x8) * 2) 0;}
#story.sections.section_03 .width_con ul.v_con.two_con{}
#story.sections.section_03 .width_con ul.v_con.two_con li.cells{}
#story.sections.section_03 .width_con ul.v_con.two_con li.cells .title_con{color: var(--c-w);}
#story.sections.section_03 .width_con ul.v_con.two_con li.cells .title_con h3{}
#story.sections.section_03 .width_con ul.v_con.two_con li.cells .title_con h2{}
#story.sections.section_03 .width_con ul.v_con.two_con li.cells .title_con h4{}
#story.sections.section_03 .width_con ul.v_con.two_con li.cells .title_con h5{}

#category.sections.section_04{ background: url(../img/bg_s4_01.jpg);}
#category.sections.section_04 .width_con{}
#category.sections.section_04 .width_con .title_con{}
#category.sections.section_04 .width_con .btn_con{margin-top: 36px;}
#category.sections.section_04 .width_con .title_con h3{}
#category.sections.section_04 .width_con .title_con h2{}
#category.sections.section_04 .width_con .title_con h4{}
#category.sections.section_04 .width_con .title_con h5{}
#category.sections.section_04 .width_con ul.v_con.four_con{}
#category.sections.section_04 .width_con ul.v_con.four_con li.cells.box{}
#category.sections.section_04 .width_con ul.v_con.four_con li.cells.box img{}
#category.sections.section_04 .width_con ul.v_con.four_con li.cells.box h4{}
#category.sections.section_04 .width_con ul.v_con.four_con li.cells.box h5{}

#collab.sections.section_05{ text-shadow: 0 0 20px rgba(0, 0, 0, 1); }
#collab.sections.section_05 .width_con{position: absolute; top: 50%; left: 50%; padding: 0; transform: translate(-50%, -50%);}
#collab.sections.section_05 .width_con .title_con{}
#collab.sections.section_05 .sections.section_05_01 {background: url(../img/bg_s5_01.jpg) 50% 50% no-repeat; background-size: cover;}
#collab.sections.section_05 .sections.section_05_01:before {background: url(../img/bg_s5_01.jpg) 50% 50% no-repeat; background-size: cover; filter: brightness(.5);}
#collab.sections.section_05 .sections.section_05_01 .width_con{padding: calc(var(--mrgn-x8)*2) 0;}
#collab.sections.section_05 .sections.section_05_01 .width_con .title_con{color: var(--c-w);text-shadow: 0 0 100px rgba(0, 0, 0, 1);}
#collab.sections.section_05 .sections.section_05_01 .width_con .title_con h3{}
#collab.sections.section_05 .sections.section_05_01 .width_con .title_con h2{}
#collab.sections.section_05 .sections.section_05_01 .width_con .title_con h4{text-shadow: 0 0 20px rgba(0, 0, 0, 1);}
#collab.sections.section_05 .sections.section_05_01 .width_con .title_con h5{text-shadow: 0 0 20px rgba(0, 0, 0, 1);}

#collab.sections.section_05 .sections.section_05_02{background: url(../img/bg_s5_02.jpg) 50% 50% no-repeat; background-size: cover;}
#collab.sections.section_05 .sections.section_05_02 .width_con{padding: calc(var(--mrgn-x8) * 2) 0;}
#collab.sections.section_05 .sections.section_05_02 .width_con .title_con{color: var(--c-w);}
#collab.sections.section_05 .sections.section_05_02 .width_con .title_con h3{}
#collab.sections.section_05 .sections.section_05_02 .width_con .title_con h2{}
#collab.sections.section_05 .sections.section_05_02 .width_con .title_con h4{}
#collab.sections.section_05 .sections.section_05_02 .width_con .title_con h5{}

#collab.sections.section_05 .sections.section_05_03{background: url(../img/bg_s5_03.jpg) 50% 50% no-repeat; background-size: cover;}
#collab.sections.section_05 .sections.section_05_03 .width_con{padding: calc(var(--mrgn-x8) * 2) 0;}
#collab.sections.section_05 .sections.section_05_03 .width_con .title_con{color: var(--c-w);}
#collab.sections.section_05 .sections.section_05_03 .width_con .title_con h3{}
#collab.sections.section_05 .sections.section_05_03 .width_con .title_con h2{}
#collab.sections.section_05 .sections.section_05_03 .width_con .title_con h4{}
#collab.sections.section_05 .sections.section_05_03 .width_con .title_con h5{}

#svc.sections.section_06{}
#svc.sections.section_06 .width_con{}
#svc.sections.section_06 .width_con ul.v_con.two_con{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells.sticker{position: sticky; top: var(--mrgn-x8);}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells .title_con{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells .title_con h3{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells .title_con h2{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells .title_con h4{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells .title_con h5{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells ul.v_con{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells ul.v_con li.cells.box{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells ul.v_con li.cells.box a{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells ul.v_con li.cells.box a img{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells ul.v_con li.cells.box a .title{left: var(--mrgn);}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells ul.v_con li.cells.box a .title h6{top: var(--mrgn);}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells ul.v_con li.cells.box a .title h4{}
#svc.sections.section_06 .width_con ul.v_con.two_con li.cells ul.v_con li.cells.box a .title h5{}

#slogan.sections.section_07{ background: var(--c-k) url(../img/bg_s7_01.jpg) 50% 50% no-repeat; background-size: 1920px; background-attachment: fixed;}
#slogan.sections.section_07 .width_con{ }
#slogan.sections.section_07 .width_con h2{ font-size: 60px; font-weight: 900; color: var(--c-k); text-align: center; text-transform: uppercase; background: url(../img/bg_s7_02.jpg) 50% 50% no-repeat; background-size: 1920px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-attachment: fixed;}

#camp.sections.section_08{}
#camp.sections.section_08 .width_con{}
#camp.sections.section_08 .width_con ul.v_con.two_con{}
#camp.sections.section_08 .width_con ul.v_con.two_con li.cells{position: relative;}
#camp.sections.section_08 .width_con ul.v_con.two_con li.cells .title_con{}
#camp.sections.section_08 .width_con ul.v_con.two_con li.cells .title_con h3{}
#camp.sections.section_08 .width_con ul.v_con.two_con li.cells .title_con h2{}
#camp.sections.section_08 .width_con ul.v_con.two_con li.cells .title_con h4{}
#camp.sections.section_08 .width_con ul.v_con.two_con li.cells .title_con h5{}
#camp.sections.section_08 .width_con ul.v_con.three_con{}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells{}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box{ background: linear-gradient(135deg, var(--c-p1) 0%, var(--c-p2) 100%);}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box:last-child{ background: var(--c-k);}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box .ratio{}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box .full_img{position: absolute; top: 0; left: 50px; width: 80%; mix-blend-mode: overlay;}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box .b_img{left: -60px;}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box > .title{top: auto; bottom: var(--mrgn-x2); left: 50%; transform: translate(-50%, 0); }
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box h4{}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box a{}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box a .ratio {}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box a img{}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box a .title{color: var(--c-w);}
#camp.sections.section_08 .width_con ul.v_con.three_con li.cells.box a .title h4{}

#store.sections.section_09{}
#store.sections.section_09 .width_con{}
#store.sections.section_09 .width_con ul.v_con{}
#store.sections.section_09 .width_con ul.v_con li.cells.box{position: relative; text-shadow: 0 0 10px rgba(0, 0, 0, .75);}
#store.sections.section_09 .width_con ul.v_con li.cells.box img.full_img{transition: all 250ms linear;}
#store.sections.section_09 .width_con ul.v_con li.cells.box .title_con:before{ background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); position: absolute; bottom: 0; left: 0; width: 100%; height: 200%; content: ''; top: auto; border-radius: 0;}
#store.sections.section_09 .width_con ul.v_con li.cells.box .title_con{ position: absolute; bottom: 0; left: 0; width: 100%; color: var(--c-w);}
#store.sections.section_09 .width_con .title_con{ color: var(--c-k);}
#store.sections.section_09 .width_con .title_con img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#store.sections.section_09 .width_con .title_con h3{}
#store.sections.section_09 .width_con .title_con h2{}
#store.sections.section_09 .width_con .title_con h4{}
#store.sections.section_09 .width_con .title_con h5{}

#store.sections.section_09 .width_con ul.v_con.four_con{}
#store.sections.section_09 .width_con ul.v_con.four_con li.cells{}
#store.sections.section_09 .width_con ul.v_con.four_con li.cells.box{}
#store.sections.section_09 .width_con ul.v_con.four_con li.cells.box img{}
#store.sections.section_09 .width_con ul.v_con.four_con li.cells.box .title{top: auto; bottom: 0; color: var(--c-w);}
#store.sections.section_09 .width_con ul.v_con.four_con li.cells.box .title h4{}
#store.sections.section_09 .width_con ul.v_con.four_con li.cells.box .title h5{}
#store.sections.section_09 .width_con ul.v_con.four_con li.cells.box .title h5:before{content: 'in ';}
#store.sections.section_09 .width_con ul.v_con.four_con li.cells.box .title h6{ display: none;}

#map.sections.section_10{ background: var(--c-w); overflow: hidden; }
#map.sections.section_10 .width_con{ position: relative; border-radius: var(--mrgn-x2);}
#map.sections.section_10 iframe{ position: absolute; top: -200px; left: 0; height: calc(100% + 400px); width: calc(100% + 400px); filter: invert(1) hue-rotate(180deg) saturate(.5);}
#map.sections.section_10 .width_con ul.v_con.three_con{ position: relative; left: 103px;}
#map.sections.section_10 .width_con ul.v_con.three_con li.cells {}
#map.sections.section_10 .width_con ul.v_con.three_con li.cells.box { padding: var(--mrgn-x2); background: rgba(255, 255, 255, .65); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); backdrop-filter: blur(var(--mrgn-half));}
#map.sections.section_10 .width_con ul.v_con.three_con li.cells .title_con{}
#map.sections.section_10 .width_con ul.v_con.three_con li.cells .title_con h3{}
#map.sections.section_10 .width_con ul.v_con.three_con li.cells .title_con h2{}
#map.sections.section_10 .width_con ul.v_con.three_con li.cells .title_con h4{}
#map.sections.section_10 .width_con ul.v_con.three_con li.cells .title_con h5{}

#map.sections.section_10 .pins{ position: absolute; width: 60px; height: 60px; top: 50%; left: 66%; margin: -7px 0 0 15px; transform: translate(-50%, -50%); z-index: 2;}
#map.sections.section_10 .pins:before,
#map.sections.section_10 .pins:after { margin-left: 165px; width: 265px; color: var(--c-w);line-height: 1em; z-index: 1; text-shadow: 0 0 10px var(--c-shadow);}
#map.sections.section_10 .pins:before{ content: 'Bobbi Brown Cosmetic Branch'; font-size: 20px;  text-transform: uppercase; }
#map.sections.section_10 .pins:after{ content: 'Headquarters in New York'; margin-top: 40px; font-size: 12px;}
#map.sections.section_10 .pins:before,
#map.sections.section_10 .pins:after,
#map.sections.section_10 .pins *,
#map.sections.section_10 .pins *:before,
#map.sections.section_10 .pins *:after{ position: absolute; left: 50%; transform: translateX(-50%);}
#map.sections.section_10 .pins .shadow{top: 50px; width: 30px; height: 10px; background: #260101; border-radius: 50%; mix-blend-mode: overlay; animation: shadow 1250ms infinite cubic-bezier(.5,0,.5,1);}
@keyframes shadow { 
    0% { opacity: 1; width: 30px; height: 10px; filter: blur(2px);}
    50% { opacity: .65; width: 36px; height: 12px; filter: blur(4px);}
    100% { opacity: 1; width: 30px; height: 10px; filter: blur(2px);}
}
#map.sections.section_10 .pins .needle{ width: 40px; height: 40px; box-shadow: inset 0 0 0 11px var(--c-w); border-radius: 50%; filter: drop-shadow(0 0 15px #260101) drop-shadow(0 0 30px #000); animation: needle 1250ms infinite cubic-bezier(.5,0,.5,1); transition: all 200ms linear; }
@keyframes needle { 
    0% { top : 0;}
    50% { top : -4px;}
    100% { top : 0;}
}

#map.sections.section_10 .pins .needle:before,
#map.sections.section_10 .pins .needle:after{content: ''; transition: inherit;}
#map.sections.section_10 .pins .needle:before{ top: 33px; border-top: 15px solid var(--c-w); border-left: 15px solid transparent; border-right: 15px solid transparent;}
#map.sections.section_10 .pins .needle:after{top: 35px; border-top: 17px solid var(--c-w); border-left: 10px solid transparent; border-right: 10px solid transparent;}


#map.sections.section_10 .pins:hover .shadow { opacity: 1; width: 30px; height: 10px; filter: blur(2px); animation: none;}
#map.sections.section_10 .pins:hover .needle { top : 0; animation: none; box-shadow: inset 0 0 0 11px #fff;}
#map.sections.section_10 .pins:hover .needle:before{ border-top: 15px solid #fff;}
#map.sections.section_10 .pins:hover .needle:after{ border-top: 17px solid #fff;}





#footer.sections.section_11{background: var(--c-k); color: var(--c-w);}
#footer.sections.section_11 .width_con{}
#footer.sections.section_11 .width_con img{width: 500px; position: absolute; top: 70%; left: 50%; opacity: .5;}
#footer.sections.section_11 .width_con ul.v_con{}
#footer.sections.section_11 .width_con ul.v_con li.cells{}
#footer.sections.section_11 .width_con ul.v_con li.cells h4{}
#footer.sections.section_11 .width_con ul.v_con li.cells a h5{color: var(--c-w);margin-top: var(--mrgn);}
#footer.sections.section_11 .width_con ul.v_con li.cells a h5:hover{text-decoration: underline;}
#footer.sections.section_11 .width_con ul.v_con li.cells h5{}
#footer.sections.section_11 .width_con ul.v_con li.cells table{}
#footer.sections.section_11 .width_con ul.v_con li.cells table tr{}
#footer.sections.section_11 .width_con ul.v_con li.cells table tr td{}
#footer.sections.section_11 .width_con ul.v_con li.cells table tr td h4{}
#footer.sections.section_11 .width_con ul.v_con li.cells table tr td h5{}
#footer.sections.section_11 .width_con ul.v_con li.cells img{}
#footer.sections.section_11 .width_con h5{}
#footer.sections.section_11 .width_con > h5{margin-top: var(--mrgn-x4);}
#footer.sections.section_11 .width_con ul.v_con li.cells i.fa-facebook-f{ font-size: calc(var(--mrgn) * 1.4);}
#footer.sections.section_11 .width_con ul.v_con li.cells i{ font-size: calc(var(--mrgn) * 1.5); padding: var(--mrgn) var(--mrgn) var(--mrgn) 0; transition: all 100ms ease-in-out; opacity: 1;}
#footer.sections.section_11 .width_con ul.v_con li.cells i:hover{cursor: pointer; opacity: .75;}
#footer.sections.section_11 .width_con ul.v_con li.cells i:active{transform: scale(.975);}