@charset "utf-8";
@import url('base.css');
@import url('common.css');

:root{
	--color-black:#000;
	--color-black2:#222;
	--color-black3:#333;
	--color-black4:#444;
	--color-red:#8f1616;
	--color-white:#fff;
	--color-gray:#888;
	--color-grayc:#ccc;
	--color-gray9:#999;
	--color-gray6:#666;
	--color-grayf8:#f8f8f8;
	/* font */
	--font-josefin:'Josefin Sans', Sans-serif;
	--font-pretendard:'Pretendard', Sans-serif;
	--font-notoSerifKR:'NotoSerifKR', Sans-serif;
	/* background */
	--bg-black:#000;
	--bg-black1:#111;
	--bg-black2:#222;
	--bg-white:#fff;
	--bg-red:#8f1616;
	--bg-grayf5:#f5f5f5;
	--bg-grayf8:#f8f8f8;
	/* point color */
	--point-color:#8f1616;
	--point-color-opacity:rgba(143,22,22,0.40);
	--point-color-white-opacity:rgba(255,255,255,0.10);
}

body #wrap{transition:background 0.5s ease 0s;}

body:not(.mobile)::-webkit-scrollbar{width:6px; background-color:var(--bg-black); -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}
body:not(.mobile)::-webkit-scrollbar-thumb{background-color:var(--bg-red); -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}

#cursor{opacity:1; position:fixed; z-index:1000; width:60px; height:60px; text-align:center; pointer-events:none; mix-blend-mode:exclusion; transform-origin:50% 50%; transition:opacity 0.3s ease;}
#cursor span{opacity:0; display:block; position:absolute; top:50%; left:50%; font-family:var(--font-josefin); font-size:13px; color:var(--color-white); transform:translate(-50%, -50%); transition:opacity 0.3s ease-in-out 0s;}
#cursor i{display:block; width:100%; height:100%; border-radius:100%; background:#39ebe3; mix-blend-mode:exclusion; backface-visibility:hidden; transform:scale(0.15); transition:all 0.3s ease-in-out 0s;}
#cursor.big span{opacity:1; transition-delay:0.2s;}
#cursor.big i{transform:scale(1); background:var(--bg-white);}
#cursor.none{opacity:0;}

/* header */
#header{position:fixed; top:0px; left:0px; z-index:90; width:100%;}
#header .inr{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; position:relative; z-index:10; padding:25px 100px 0;}
#header .inr:before{content:''; opacity:0; display:block; position:absolute; left:0px; top:110px; width:100%; height:1px; background:var(--bg-black); transition:0.2s linear 0s;}
#header h1{position:absolute; left:100px; top:35px; width:210px; height:35px;}
#header h1 > a{display:block; width:100%; height:100%; background:url(../images/common/logo_w.png) no-repeat 50% 0; background-size:100% auto; font-size:0px;}
#header .gnb{display:flex; flex-flow:row wrap; justify-content:center; align-items:center;}
#header .gnb > li{flex:auto; padding:0 15px; line-height:1em;}
#header .gnb > li > a{display:inline-block; position:relative; padding:20px 15px 50px; font-family:var(--font-josefin); font-size:20px; font-weight:500; color:var(--color-white); letter-spacing:-0.5px; transition:0.2s linear;}
#header .gnb > li > a:before{content:''; display:block; position:absolute; top:3px; left:50%; width:6px; height:6px; margin-left:-3px; background:var(--bg-red); border-radius:100%; transform:scale(0); transition:transform 0.3s ease 0s;}
#header .gnb > li > ul{display:none; position:absolute; margin-top:-4px; text-align:center;}
#header .gnb > li > ul > li{display:inline-block;}
#header .gnb > li > ul > li > a{display:inline-block; padding:35px 30px 25px; font-family:var(--font-josefin); font-size:15px; font-weight:600; color:#666; letter-spacing:-0.5px; transition:0.2s ease;}
#header .gnb > li > ul > li > a:after{content:''; display:block; width:100%; height:2px; margin-top:4px; background:var(--bg-red); transform:scaleX(0); transition:transform 0.3s ease;}
#header .gnb > li > ul > li > a:hover,
#header .gnb > li > ul > li > a:focus{color:var(--color-red);}
#header .gnb > li > ul > li > a:hover:after,
#header .gnb > li > ul > li > a:focus:after{transform:scaleX(1);}
#header .gnb > li > ul > li i{display:none;}
#header .gnb > li:nth-of-type(6) > ul{margin-left:-150px;}
#header .gnb_bg{position:absolute; top:0px; left:0px; z-index:1; width:100%; height:147px; background:var(--bg-white); transform:scaleY(0); transform-origin:0 0; transition:0.3s ease;}
#header .gnb_bg.active{transform:scaleY(1);}
#header .gnb > li.active > a,
#header .gnb > li.active > a.on{color:var(--color-red) !important;}
#header .gnb > li.active > a:before,
#header .gnb > li.active > a.on:before{transform:scale(1);}
#header .gnb > li.active ul{display:block;}
#header .inr.active:before{opacity:0.1;}
#header .active h1 > a{background-image:url(../images/common/logo.png);}
#header .active .gnb > li > a{color:var(--color-black2);}
.mob #header .gnb > li ul > li > ul{display:none;}
	/* mobile menu btn */
#header .btn_menu{display:none; position:absolute; top:10px; left:280px; z-index:81; width:58px; height:58px; font-size:0px; text-align:center; transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:29px; height:17px; margin:0 auto; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:3px; background:var(--bg-white); transform:translateX(0px);}
#header .btn_menu span:before,
#header .btn_menu span:after{content:''; width:29px;}
#header .btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:7px; width:29px; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
#header .inr.black .btn_menu span i,
#header .inr.black .btn_menu span:before,
#header .inr.black .btn_menu span:after{background-color:var(--bg-black);}
#header .btn_close{position:absolute; top:20px; right:20px; z-index:20; font-size:0px;}
#header .btn_close span{overflow:hidden; display:block; position:relative; width:19px; height:19px; margin:0 auto;}
#header .btn_close span:before,
#header .btn_close span:after{display:block; position:absolute; height:3px; background:var(--color-black); transform-origin:50% 50%;}
#header .btn_close span:before,
#header .btn_close span:after{content:''; width:19px;}
#header .btn_close span:before{right:0px; top:8px; transform:rotate(45deg);}
#header .btn_close span:after{left:0px; bottom:8px; transform:rotate(-45deg);}
	/* util */
#header .area_util{position:absolute; right:0px; top:0px; transform:translateX(100%); transition:transform 1s ease-in-out 0.2s;}
#header .area_util > a{display:flex; flex-flow:column wrap; justify-content:space-between; align-items:flex-start; width:190px; height:190px; box-sizing:border-box; padding:30px 25px; background:var(--bg-red); color:var(--color-white);}
#header .area_util > a > *{display:block;}
#header .area_util > a span{font-size:16px; font-weight:700; line-height:1.4em;}
#header .area_util > a i{opacity:0.52; font-size:12px; font-weight:300; letter-spacing:0;}
#header .area_util > a em{display:none;}
#header .area_util.active{transform:translateX(0);}
#header .active .area_lang ul > li a{color:var(--color-black2);}
#header .active .area_lang ul > li a:after{background-color:var(--color-black2);}
#header .active .area_util .btn_round{border-color:var(--color-black2);}

/* footer */
#footer{position:relative; z-index:20; background:var(--bg-black); font-family:'Josefin Sans', 'Pretendard', Sans-serif; color:var(--color-grayc);}
#footer .inr{display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; padding:55px 100px 30px;}
#footer .logo{flex:none; display:block; width:90px; height:73px; background:url(../images/common/logo_ico.svg) no-repeat 50% 0; background-size:auto 100%;}
#footer .info{flex:auto; padding-left:77px;}
#footer .info em{display:block; margin-bottom:10px; font-size:18px; color:var(--color-grayc); font-weight:700;}
#footer .info ul li{display:inline-block;}
#footer .info ul li:last-child{display:block;}
#footer .info ul li:nth-of-type(2){margin-left:40px;}
#footer .info ul li i{display:inline-block; margin-right:10px; font-size:16px;}
#footer .info ul li span,
#footer .info ul li span a{display:inline-block; font-size:18px; color:var(--color-gray);;}
#footer .sns{text-align:right;}
#footer .sns em{display:block; font-size:16px; font-weight:700;}
#footer .sns ul li{display:inline-block;}
#footer .sns ul li > a{display:inline-block; width:24px; height:19px; margin-left:20px; background-repeat:no-repeat; background-position:50% 0; background-size:auto 100%; font-size:0px;}
#footer .sns ul li > a.ico_sns_instar{margin-left:0px; background-image:url(../images/common/ico_instar.png);}
#footer .sns ul li > a.ico_sns_facebook{background-image:url(../images/common/ico_facebook.png);}
#footer .sns ul li > a.ico_sns_tiktok{background-image:url(../images/common/ico_tiktok.png);}
#footer .sns ul li > a.ico_sns_youtube{background-image:url(../images/common/ico_youtube.png);}
#footer .sns ul li > a.ico_sns_blog{background-image:url(../images/common/ico_blog.png);}
#footer .sns p{margin-top:55px; font-size:14px; color:var(--color-gray);;}

/* content */
.area_sub_visual{padding-top:150px; margin-bottom:10px;}
.area_sub_visual .inr{padding:0 100px; margin:0 auto;}
.area_sub_visual .inr h2{margin-left:-10px; font-size:124px; font-weight:600; color:var(--color-black); letter-spacing:-6px; line-height:1em;}
.area_sub_visual .inr h2.is_fast span{overflow:hidden; display:inline-block;}
.area_sub_visual .inr h2.is_fast span i{opacity:0.8; display:inline-block; transform:translateY(150%) skew(0deg, 7deg) rotate(.001deg); transition:opacity 0.5s ease-in-out 0s, transform 1s cubic-bezier(0.36, 0.26, 0.1, 0.95) 0s;}
.area_sub_visual .inr h2.is_fast.motion_in span i{opacity:1; transform:translateY(0) skew(0deg, 0deg) rotate(.001deg); transition-delay:0.2s, 0.2s;}
#content{min-height:500px;}
#content > [data-subarea]:nth-of-type(1){padding-top:0px;}

/* lnb */
.area_lnb{position:absolute; right:100px; top:261px;}
.area_lnb ul > li{display:flex; flex-flow:row wrap; justify-content:flex-end; align-items:center; margin-bottom:18px;}
.area_lnb ul > li > a{display:inline-block; font-size:38px; color:var(--color-black); font-weight:600; letter-spacing:-3px; line-height:1.2em; color:var(--color-black); transition:color 0.5s ease 0s;}
.area_lnb ul > li > a:after{content:''; display:inline-block; width:0; height:40px; margin-top:-10px; margin-left:13px; background:var(--bg-red) url(../images/contents/img_lnb_arrow.png) no-repeat 50% 50%; background-size:21px 21px; border-radius:50rem; vertical-align:middle; transition:width 0.5s ease 0s;}
.area_lnb ul > li > a.on,
.area_lnb ul > li > a:hover{color:var(--color-red);}
.area_lnb ul > li > a.on:after,
.area_lnb ul > li > a:hover:after{width:70px;}

/* tab */
.area_tab{margin-top:100px; margin-bottom:25px;}
.area_tab ul{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center;}
.area_tab ul > li{min-width:160px; height:46px; margin-right:15px;}
.area_tab ul > li > a,
.area_tab ul > li > button{width:100%; height:100%; background:#f5f5f6; border-radius:10px; font-size:12px; font-weight:600; color:var(--color-red); transition:0.3s ease 0s;}
.area_tab ul > li > button{display:block;}
.area_tab ul > li > a{display:flex; flex-flow:row wrap; justify-content:center; align-items:center;}
.area_tab ul > li > a.active,
.area_tab ul > li > a.on,
.area_tab ul > li > button.on{background-color:var(--bg-red); color:var(--color-white);}

/* animation */
	/* word */
.wordAni{opacity:0;}
.wordAni.active{opacity:1;}
.wordAni > span{display:inline-block;}
.wordAni .word{display:inline-block;}
	/* motion rail */
[data-motion-rail]{position:absolute; left:0px; top:0px; text-transform:uppercase; font-size:200px; letter-spacing:2px; white-space:nowrap;}
[data-motion-rail] .eocjs-newsticker-container{position:relative; width:100%; padding-top:30%;}
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-one,
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-two{position:absolute; left:0; top:0; white-space:nowrap;}
	/* hide show */
.hide_show{opacity:0; transition:opacity 0.7s ease 0s;}
.hide_show.motion_in,
.motion_in .hide_show{opacity:1;}
.hide_showDown{opacity:0; transform:translateY(-30px); transition:opacity 0.9s ease 0s, transform 0.9s ease 0s;}
.hide_showDown.motion_in,
.motion_in .hide_showDown{opacity:1; transform:translateY(0px);}
.hide_showUp{opacity:0; transform:translateY(30px); transition:opacity 0.9s ease 0s, transform 0.9s ease 0s;}
.hide_showUp.motion_in,
.motion_in .hide_showUp{opacity:1; transform:translateY(0px);}
.hide_showLeft{opacity:0; transform:translateX(-30px); transition:opacity 0.9s ease 0s, transform 0.9s ease 0s;}
.hide_showLeft.motion_in,
.motion_in .hide_showLeft{opacity:1; transform:translateX(0px);}
.hide_showRight{opacity:0; transform:translateX(30px); transition:opacity 0.9s ease 0s, transform 0.9s ease 0s;}
.hide_showRight.motion_in,
.motion_in .hide_showRight{opacity:1; transform:translateX(0px);}
.motionScale{transition:transform 0.3s ease 0s;}
[class*="slide_show"]{overflow:hidden; display:block; position:relative;}
[class*="slide_show"]:before,
[class*="slide_show"]:after{content:''; display:block; position:absolute; top:0px; left:0px; width:100%; height:100%;}
[class*="slide_show"]:before{z-index:5; background:var(--point-color);}
[class*="slide_show"]:after{z-index:6; background:var(--bg-grayf8);}
[class*="slide_show"] i{display:block; height:100%; text-align:center;}
[class*="slide_show"] i img{max-width:100%;}
[class*="slide_show"].is_motion i{transform:scale(1.05); transition:transform 2s ease-in-out 0s;}
[class*="slide_show"].is_motion.motion_in i{transform:scale(1); transition-delay:0.3s;}
.slide_show.is_motion:before,
.slide_show.is_motion:after{transform:translateY(0); transform-origin:0 100%; transition:transform 0.8s ease-in-out 0s;}
.slide_show.is_motion.motion_in:before,
.slide_show.is_motion.motion_in:after{transform:translateY(100%);}
.slide_show.is_motion.motion_in:before{transition-delay:0.2s;}
.slide_show.is_motion.motion_in:after{transition-delay:0s;}
.slide_show.is_motion i{transform:scale(1.05); transition:transform 2s ease-in-out 0s;}
.slide_show.is_motion.motion_in i{transform:scale(1); transition-delay:0.3s;}
.slide_show_left:after{z-index:6; background:var(--bg-white);}
.slide_show_left.is_motion:before,
.slide_show_left.is_motion:after{transform:translateX(0); transform-origin:0 100%; transition:transform 0.8s ease-in-out 0s;}
.slide_show_left.is_motion.motion_in:before,
.slide_show_left.is_motion.motion_in:after{transform:translateX(100%);}
.slide_show_left.is_motion.motion_in:before{transition-delay:0.2s;}
.slide_show_left.is_motion.motion_in:after{transition-delay:0s;}

/* swiper gride */
.list_grid{position:relative;}
.list_grid .swiper-slide{display:flex; flex-wrap:wrap; justify-content:center;}
.list_grid .swiper_prev,
.list_grid .swiper_next{display:block; opacity:0.2; position:absolute; top:50%; z-index:30; width:28px; height:28px; background:url(../images/main/img_sns_arrow.png) no-repeat 50% 50%; background-size:6px 11px; border:1px solid #000; border-radius:100%; font-size:0px; transition:opacity 0.3s ease 0s;}
.list_grid .swiper_prev{left:-70px;}
.list_grid .swiper_next{right:-70px; transform:rotate(180deg);}
.list_grid .swiper_prev:hover,
.list_grid .swiper_next:hover{opacity:1;}
.list_grid .swiper_page{position:absolute; bottom:0; left:50%; z-index:30; width:auto; transform:translateX(-50%);}
.list_grid .swiper_page .swiper-pagination-bullet{opacity:1; width:14px; height:14px; box-sizing:border-box; background:transparent; border:1px solid #ccc;}
.list_grid .swiper_page .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#2490c7; border-color:#2490c7;}
.list_grid .swiper_prev.swiper-button-disabled,
.list_grid .swiper_next.swiper-button-disabled{opacity:0.1 !important;}

/* custom */
@media screen and (min-width:1300px){
	::-webkit-scrollbar{width:6px; background-color:var(--bg-black); -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}
	::-webkit-scrollbar-thumb{background-color:var(--bg-red); -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}
			#loginbile{ display:none;}
}

@media screen and (min-width:769px){
	.area_tab ul > li > button:hover,
	.area_tab ul > li > a:hover{background-color:var(--bg-red); color:var(--color-white);}
}

@media screen and (min-width:621px){
	body.black{--color-black2:#fff;}
	body.black #wrap *{--color-black:#fff; --color-black2:#fff; --color-black3:#fff; --color-black4:#fff; --bg-black:#fff;}
	body.black #wrap{background:var(--bg-black);}
	.black #header .active h1 > a{background-image:url(../images/common/logo.png);}
	.black #header .active .gnb > li > a{color:var(--color-black2);}
	.black #header .inr.active:before{background:#000;}
}
	
@media screen and (max-width:1800px){
	/* header */
	#header .inr{padding-left:40px; padding-right:40px;}
	#header h1{left:40px;}
	#header .gnb > li{padding:0 10px;}
	#header .gnb > li > a{padding-left:10px; padding-right:10px; font-size:18px;}

	/* footer */
	#footer .inr{padding-left:40px; padding-right:40px;}
	
	/* content */
	.area_sub_visual .inr{padding:0 40px;}
}

@media screen and (max-width:1500px){
	/* header */
	#header h1{position:static;}
	#header .inr{justify-content:flex-start; padding-bottom:25px;}
	#header .btn_menu{display:block;}
	#header nav{opacity:0; padding-top:0px; margin:0px;}
	#header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; left:0px; top:0px; z-index:90; width:100%; height:100%; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.3s;}
	.mob #header nav.active{opacity:1;}	
	#header .area_menu_all > ul.gnb > li:not(.gnb_cate){display:block;}
	#header .area_menu_all .gnb{overflow-y:auto; visibility:hidden; display:block; position:absolute; top:-100px; left:0; z-index:10; width:100%; height:100%; box-sizing:border-box; padding-top:50px; background:#fffaf6; transition:0.7s ease 0s;}
	#header .area_menu_all > ul.gnb li{position:relative;}
	#header .area_menu_all > ul.gnb > li{display:block; padding:0px; text-align:center;}
	#header .area_menu_all > ul.gnb > li > a{float:none; display:inline-block; width:auto; padding:30px 0px; margin-left:0px; font-size:20px; font-weight:700;}
	#header .area_menu_all > ul.gnb > li > ul{display:none; float:none; opacity:1; visibility:visible; position:static; left:auto; top:auto; width:auto; margin:0; padding:10px 0; background:#f1e9e2; border-width:0px; box-shadow:none; transition:none; transform:translateX(0);}
	#header .area_menu_all > ul.gnb > li > ul > li{display:block; margin:0px; text-align:center;}
	#header .area_menu_all > ul.gnb > li > ul > li:hover > a,
	#header .area_menu_all > ul.gnb > li > ul > li:focus > a{color:var(--color-black4);}
	#header .area_menu_all > ul.gnb > li > ul > li.only{width:100%;}
	#header .area_menu_all > ul.gnb > li > ul > li.active > a,
	#header .area_menu_all > ul.gnb > li > ul > li.active:hover > a,
	#header .area_menu_all > ul.gnb > li > ul > li.active:focus > a{color:#2490c7;}
	#header .area_menu_all > ul.gnb > li > ul > li > a{display:block; width:auto; padding:10px 15px; color:var(--color-black3);}
	#header .area_menu_all > ul.gnb > li > ul > li > a:hover{box-shadow:none;}
	#header .area_menu_all > ul.gnb > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all > ul.gnb > li > ul > li .open{top:0px;}
	#header .area_menu_all > ul.gnb > li > ul > li > ul{display:none;}
	#header .area_menu_all > ul.gnb > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all > ul.gnb > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all > ul.gnb > li > ul > li > ul{padding:20px 15px; background:#eaeaea;}
	#header .area_menu_all > ul.gnb > li > ul > li > ul > li{display:block; text-align:left;}
	#header .area_menu_all > ul.gnb > li > ul > li > ul > li > a{display:block; padding:8px 0px; color:var(--color-black3); font-size:16px; font-weight:500;}
	#header .area_menu_all > ul.gnb > li ul > li > a:after{display:none;}
	#header .area_menu_all .open{display:block; position:absolute; right:10px; top:8px; width:35px; height:35px; background:transparent; font-size:0px;}
	#header .area_menu_all .open:before,
	#header .area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:10px; height:2px; margin-top:-5px; background:#cdc3bb;}
	#header .area_menu_all .open:before{margin-left:-6px; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-4px;transform:rotate(-45deg); transform-origin:100% 0;}
	#header .area_menu_all .open.active{transform:rotate(180deg);}
	#header .area_menu_all .open:focus{outline:none;}
	#header .area_menu_all.active,
	#header .area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
	#header .area_menu_all.active .gnb{visibility:visible; top:0px; z-index:10;}
	#header .gnb > li.active > a,
	#header .gnb > li.active > a.on{color:var(--color-red) !important;}
	/* #header .area_menu_all > ul.gnb > li > .open.active:before,
	#header .area_menu_all > ul.gnb > li > .open.active:after{background-color:var(-bg-white);} */
	
	/* lnb */
	.area_lnb{right:30px;}
}

@media screen and (max-width:1300px){
	/* footer */
	#footer .inr{flex-flow:column wrap; justify-content:flex-start;}
	#footer .info{padding-left:0px; margin-top:30px;}
	#footer .sns{width:100%; margin-top:30px; text-align:left;}
	#footer .sns em{display:none;}	
	#footer .sns p{margin-top:35px;}
	
	/* content */
	.area_sub_visual .inr h2{font-size:9.538461538461538vw/* 124px */; letter-spacing:-2px;}
	
	/* lnb */
	.area_lnb ul > li > a{font-size:2.923076923076923vw/* 38px */;}
	.area_lnb ul > li > a.on:after,
	.area_lnb ul > li > a:hover:after{width:50px;}
}

@media screen and (max-width:1024px){
	/* header */
	#header .inr{padding-left:30px; padding-right:30px;}
	#header .area_util{top:0;}
	#header .area_util > a{justify-content:center; width:110px; height:80px; padding:10px 15px;}
	#header .area_util > a span{font-size:11px;letter-spacing:-.8px;word-break:keep-all;}	
	#header .area_menu_all > ul.gnb > li > a{padding:25px 0px;}
	#header .area_util > a em{display:block;}
	#header .area_util > a span{display:none;}
	
	/* cursor */
	#cursor{display:none;}
	
	/* footer */
	#footer .inr{padding-left:30px; padding-right:30px;}
	#footer .sns ul li > a.ico_sns_instar{margin-left:0px; background-image:url(../images/common/ico_instar@x3.png);}
	#footer .sns ul li > a.ico_sns_facebook{background-image:url(../images/common/ico_facebook@x3.png);}
	#footer .sns ul li > a.ico_sns_tiktok{background-image:url(../images/common/ico_tiktok@x3.png);}
	#footer .sns ul li > a.ico_sns_youtube{background-image:url(../images/common/ico_youtube@x3.png);}
	
	/* content */
	.area_sub_visual .inr{padding:0 30px;}
	.area_sub_visual .inr h2{font-size:9.765625vw/* 100px */;}
	
	/* lnb */
	.area_lnb{top:100px; right:20px;}
	.area_lnb ul > li > a{font-size:30px;}
	.area_lnb ul > li > a:after{height:30px; margin-top:-5px; background-image:url(../images/contents/img_lnb_arrow@x3.png); background-size:16px 16px;}
	.area_lnb ul > li > a.on:after,
	.area_lnb ul > li > a:hover:after{width:40px;}
	
	/* tab */
	.area_tab{margin-top:50px;}
	.area_tab ul > li{min-width:130px;}
	
	/* swiper gride */
	.list_grid .swiper_prev,
	.list_grid .swiper_next{background-image:url(../images/main/img_sns_arrow@x3.png);}
	.list_grid .swiper_prev{left:20px;}
	.list_grid .swiper_next{right:20px;}
}

@media screen and (max-width:768px){
	/* footer */
	#footer .logo{width:63px; height:51px;}
	#footer .info em{font-size:16px;}
	#footer .info ul li span,
	#footer .info ul li span a{font-size:16px;}
	#footer .info ul li i{font-size:14px;}	
	
	/* lnb */
	.area_lnb ul > li{margin-bottom:10px;}
	.area_lnb ul > li > a{font-size:25px; letter-spacing:-2px;}
	.area_lnb ul > li > a:after{height:25px; margin-left:10px; background-size:13px 13px;}
	.area_lnb ul > li > a.on:after,
	.area_lnb ul > li > a:hover:after{width:40px;}
	
	/* tab */
	.area_tab ul > li{margin-right:7px;}
	
	/* content */
	.area_sub_visual .inr h2{font-size:11.067708333333332vw/* 85px */;}
	
	/* swiper gride */
	.list_grid{position:static;}
}

@media screen and (max-width:620px){
	/* header */
	#header .inr{padding-left:20px; padding-right:20px;}
	#header .btn_menu{left:250px;}	
	#loginbile{position:absolute;right:30px ;top:20px;font-weight:bold; font-size:20px; padding-top: 10px;}
	/* footer */
	#footer .inr{padding-left:20px; padding-right:20px;}
	
	/* content */
	.area_sub_visual{padding-top:130px;}
	.area_sub_visual .inr{padding:0 20px;}
	.area_sub_visual .inr h2{margin-left:-3px;}
	
	/* tab */
	.area_tab ul > li{min-width:inherit;}
	.area_tab ul > li button,
	.area_tab ul > li a{width:auto; padding-left:20px; padding-right:20px;}
}

@media screen and (max-width:560px){
	/* footer */
	#footer .info ul li{display:block; margin-bottom:5px;}
	#footer .info ul li:nth-of-type(2){margin-left:0px;}
	
	/* content */
	.area_sub_visual{padding-top:100px;}	
}

@media screen and (max-width:480px){
	/* swiper gride */
	.list_grid .swiper_prev,
	.list_grid .swiper_next{position:static; margin:0 2px;}
	.list_grid .swiper_bottom{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; padding-top:30px;}
}

@media screen and (max-width:420px){
	/* header */
	#header h1{width:168px; height:28px;}
	#header .btn_menu{top:5px; left:200px;}
	#header .area_util > a{width:90px; height:60px;}
	#header .area_util > a i{font-size:11px;}
	
	/* footer */
	#footer .sns ul li > a{margin-left:15px;}

	/* lnb */
	.area_lnb{top:75px;}
	.area_lnb ul > li > a{font-size:20px;}
	
	/* tab */
	.area_tab{margin-top:30px;}
		
	/* content */
	.area_sub_visual{padding-top:50px;}
	.area_sub_visual .inr h2{font-size:11.904761904761903vw/* 50px */;}
}

@media screen and (max-width:360px){
	#header .area_util > a{width:70px; padding:10px;}
	#header .area_util > a i{display:none;}
	#header .btn_menu{top:0px; left:auto; right:70px; height:60px;}
}

@media screen and (max-width:320px){
	/* header */
	#header h1{width:147px; height:25px;}	
	#header .area_menu_all > ul.gnb > li > a{padding:20px 0px;}
	
	/* lnb */
	.area_lnb{display:none;}
	
	/* content */
	.area_sub_visual .inr h2{font-size:14.0625vw/* 45px */;}
}

@media screen and (max-width:300px){
	#header h1{width:135px; height:25px;}	
}