@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
*{ scroll-behavior: smooth;}
:root{
	--mrgn-half: calc(var(--mrgn) / 2);  /*9px*/
	--mrgn:      18px;
	--mrgn-x2:   calc(var(--mrgn) * 2); /*36px*/
	--mrgn-x4:   calc(var(--mrgn) * 4); /*72px*/
	--mrgn-x8:   calc(var(--mrgn) * 8);/*144px*/
	--mrgn-x16:  calc(var(--mrgn) * 16);/*288px*/

	--basic-width : 1200px;
	--basic-font-size: 14px;

	--color-main:  #222;
	--color-point: #f9cd90;
	--color-sub:   #f6f6f6;

	--color-w-000: rgba(255, 255, 255, 0);
	--color-w-015: rgba(255, 255, 255, .15);
	--color-w-025: rgba(255, 255, 255, .25);
	--color-w-035: rgba(255, 255, 255, .35);
	--color-w-050: rgba(255, 255, 255, .5);
	--color-w-065: rgba(255, 255, 255, .65);
	--color-w-075: rgba(255, 255, 255, .75);
	--color-w-085: rgba(255, 255, 255, .85);
	--color-w:   #fff;

	--color-k-000: rgba(0, 0, 0, 0);
	--color-k-015: rgba(0, 0, 0, .15);
	--color-k-025: rgba(0, 0, 0, .25);
	--color-k-035: rgba(0, 0, 0, .35);
	--color-k-050: rgba(0, 0, 0, .5);
	--color-k-065: rgba(0, 0, 0, .65);
	--color-k-075: rgba(0, 0, 0, .75);
	--color-k-085: rgba(0, 0, 0, .85);
	--color-k:   #000;
}

h1, h2, h3, h4, h5, h6{ position: relative;}
h1, h2, h3{ font-family: "Lora"; line-height: .815em; text-transform: uppercase;}
h4, h5, h6{ line-height: 1.25em;}
h1{ font-size:  8.5em; }
h2{ font-size:    6em; }
h3{ font-size:    2em; }
h4{ font-size: 1.45em; font-weight: 400;}
h5{ font-size:    1em; font-weight: 500;}
h6{ font-size:  .85em; font-weight: 500;}

.center{ text-align: center;}
.sticky { position: sticky !important; top: 100px;}
.line{width: var(--basic-width); height: 1px; box-shadow: 0 -1px 0 0 var(--color-k-035); background: var(--color-w-015); margin: var(--mrgn-x4) auto;}

.fixed_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: inherit;}
*:has(> .fixed_bg){ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
.title_con{ position: relative;}
.title_con + *{ margin-top: var(--mrgn-x4) !important;}
.title_con h1{ margin-bottom: var(--mrgn-x2);}
.title_con h2{ margin-bottom: var(--mrgn-x2);}
.title_con h3{ margin-bottom: var(--mrgn); color: var(--color-point);}
.title_con h4{ margin-bottom: var(--mrgn);}
.title_con h4:before{ position: absolute; top: calc((var(--mrgn) * -1) - 7px); left: 0; content: ''; width: 125px; height: 15px; background: url(../img/img_title.webp) no-repeat 0 0 / cover;}
.title_con.center h4:before{left: 50%; transform: translateX(-50%);}
.title_con h5{}
.title_con h6{}
.title_con.dark{ color: var(--color-main); --color-point: #b3581e;}
.title_con.dark h4:before{ position: absolute; top: calc((var(--mrgn) * -1) - 7px); left: 0; content: ''; width: 125px; height: 15px; background: url(../img/img_title_dark.webp) no-repeat 0 0 / cover;}

ul.v_con{ width: calc(100% + var(--mrgn-x2)); margin: 0 calc(var(--mrgn) * -1) calc(var(--mrgn-x2) * -1);}
ul.v_con > li.cells{ position: relative; display: inline-block; margin: 0 var(--mrgn) var(--mrgn-x2); width: calc(100% - var(--mrgn-x2)); }
ul.v_con > li.cells.box{ background: var(--color-k); transform: scale(1); transition: all 100ms ease-in-out;}



ul.v_con > li.cells.box:has(> a){ cursor: pointer;}
ul.v_con > li.cells.box:hover:has(> a){}
ul.v_con > li.cells.box:active:has(> a){ transform: scale(.975);}

ul.v_con > li.cells.box > a{ display: block; aspect-ratio: inherit; border-radius: inherit; background: #f99; transition: inherit; box-shadow: 0 10px 30px -10px var(--color-k-065); filter: brightness(1); text-decoration: none;}
ul.v_con > li.cells.box:hover > a{ box-shadow: 0 10px 30px -10px var(--color-k); filter: brightness(1.1);}/*바뀌는 속성만 적어주세요*/
ul.v_con > li.cells.box:active > a{ box-shadow: 0 1px 3px -1px var(--color-k); filter: brightness(.9);}
ul.v_con > li.cells > img,
ul.v_con > li.cells > a > img{ width: 100%; border-radius: inherit;}


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

ul.v_con.ub_two_con > li.cells:nth-child(2n-1){ width: calc(33.333% - var(--mrgn-x2));}
ul.v_con.ub_two_con > li.cells:nth-child(2n){ width: calc(66.666% - var(--mrgn-x2));}
ul.v_con.rub_two_con > li.cells:nth-child(2n-1){ width: calc(66.666% - var(--mrgn-x2));}
ul.v_con.rub_two_con > li.cells:nth-child(2n){ width: calc(33.333% - var(--mrgn-x2));}


.text_con{ position: absolute; bottom: 0; left: 0; padding: var(--mrgn-half); width: 100%; background: linear-gradient(0deg, var(--color-k-065), var(--color-k-000)); box-sizing: border-box; border-radius: inherit; text-shadow: 0 0 6px var(--color-k-035);}
ul.v_con > li.cells .text_con:has(> h4){padding: var(--mrgn);}
ul.v_con > li.cells .text_con h4,
ul.v_con > li.cells .text_con h5,
ul.v_con > li.cells .text_con h6{ color: var(--color-w); line-height: 1.15em; margin-top: var(--mrgn-half);}
ul.v_con > li.cells .text_con h4{}
ul.v_con > li.cells .text_con h5{}
ul.v_con > li.cells .text_con h6{}


.ratio_1x1{  aspect-ratio:  1/1;}
.ratio_1x2{  aspect-ratio:  1/2;}
.ratio_2x1{  aspect-ratio:  2/1;}
.ratio_3x4{  aspect-ratio:  3/4;}
.ratio_4x3{  aspect-ratio:  4/3;}
.ratio_16x9{ aspect-ratio: 16/9;}
.ratio_9x16{ aspect-ratio: 9/16;}


*{ scroll-behavior: smooth;}
html, body { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; max-width: 2560px; max-height: 1600px; margin: 0 auto; padding: 0; background: #000; overflow: hidden; transform: translate(-50%, -50%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); color: var(--color-w); font-size: var(--basic-font-size); font-family: "Lora";}
ul, li{margin: 0; padding: 0; list-style: none;}
#header{position: fixed; top: 0; left: 50%; width: 100%; max-width: inherit; transform: translateX(-50%); z-index: 999;}
#header .logo{ position: absolute; top: 30px; left: 60px;}
#header ul.nav{ position: absolute; top:30px; right: 60px; text-transform: uppercase;}
#header ul.nav li{ float: left; color: var(--color-w); padding: 5px; margin: 0 0 0 20px; cursor: pointer;}
#header ul.nav li.on{ color: var(--color-point); cursor: default;}

.pagination{position: fixed; bottom: 30px; right: 60px; z-index: 999;}

/*페이지 도트다이아*/
.quick {position: fixed; right: 60px; top: 50%; transform: translateY(-50%); z-index: 100000;}
.quick li {width: 20px; height: 20px; margin-bottom: 10px; cursor:pointer; background: url(../img/img_scroll_icon.webp) no-repeat 0 0 / cover;}
.quick .on { position: relative; background: url(../img/img_scroll_icon_red.webp) no-repeat 0 0 / cover;}


.btn_left,
.btn_right{ position: fixed; bottom:30px; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.btn_left{ margin-left: -40px;}
.btn_right{ margin-left: 40px;}  

#fullpage { position: relative; top: 0px; z-index: 9; width: 100%; height: 100%;}
.fullsection{ position: relative; width: 100%; height: 100%; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
.fullsection .full_con{ position: absolute; top: 50%; left: 50%; width: 1200px; height: 650px; transform: translate(-50%, -50%);}
.fullsection .full_sub_con{ position: relative;}
.fullsection .full_sub_con .full_sub{ position: relative; width: 100%; height: 100%; float: left;}

.full1{ background:#61374a url(../img/bg_home.webp) no-repeat 0 0 / cover;}
#visual.full1{}
.full1 .copy{ position: fixed; bottom:30px; width:100%; text-align: center; z-index: 1;}
.full2{ background:var(--color-k);}
.full3{ background:var(--color-k);}
.full4{ background:var(--color-k);}
.full5{ background:var(--color-k);}
.full6{ background:#f7d97d url(../img/bg_campaign.webp) no-repeat 0 0 / cover;}

.btn.btn_a.btn_left { width: 55px; height: 55px; background: url(../img/btn_prev.webp) no-repeat 0 0 / cover; bottom: 0; cursor: pointer;}
.btn.btn_a.btn_right { width: 55px; height: 55px; background: url(../img/btn_next.webp) no-repeat 0 0 / cover; bottom: 0; cursor: pointer;}

::selection { color: var(--color-k); background-color: var(--color-point);}