@import url('https://use.fontawesome.com/releases/v5.15.2/css/all.css');
@import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@charset "utf-8";


/* Reset CSS  */
html { height: 100%; overflow-y:scroll;}
body { font-size: 13px; color:#000;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none; font-family: 'pretendard', sans-serif; }
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}

/*bbs*/
#container_title{display:none;}
#bo_v_table{display:none;}
#bo_vc_w{border-bottom:0;}
#bo_vc{background:none;}

#bo_gall , #bo_w , #bo_v , #bo_list{font-size:15px;}
#bo_v_share .btn{width: auto !important;}

/* 지연 common*/
ul, ol, li { list-style: none; }
a { text-decoration: none; color: inherit; }
img { vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }
button { border: none; background: transparent; font-family: inherit; font-size: inherit; cursor: pointer; }
button:active { outline: none; }
button:focus { outline: none; }
.clearfix::after { content: ""; display: block; clear: both; }
.blind { overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; }
.inner_wrap { position: relative; width: 100%; max-width: 1500px; height: 100%; margin: 0 auto; padding: 150px 50px;  }
#element { pointer-events: none; }
.gk { font-family: 'GmarketSans'; }




/***************************** H E A D E R *********************************/
#header{position: fixed; z-index: 999;top:0; left:0; width: 100%; padding: 60px 50px 20px;
background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);transition: all 0.3s; }
.bg { background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%) !important;transition: all 0.3s; }
#header .flex_box { display: flex; align-items: center; justify-content: space-between; }
#header .nav_box { display: flex; align-items: center; justify-content: space-between; gap: 5vw; }
#h_logo { display: block; width: 227px; height: 50px; }
#h_logo a { display: block; width: 100%; height: 100%; }

/* #language { display: flex; justify-content: end; gap: 10px; }
#language li { display: block; width: 100px; border: 1px solid rgba(255, 255, 255, 0.7); padding: 5px 10px; }
#language li a { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 16px; font-weight: 400; }
#language li a span { display: block; width: 9px; height: 8px; background: url("../img/ico_arrow.png") no-repeat center center; } */

#language { display: flex; justify-content: center; }
#language li { position: relative; display: block; padding: 0 15px; color: #fff; font-size: 16px; font-weight: 400; }
#language li::after { content: "|"; display: block; position: absolute; right: -1px; top: 0; }
#language li:last-of-type::after { display: none; }
#language li a { transition: all 0.3s; }
#language li:hover a { color: #f2666e; }

#h_gnb { display: flex; align-items: center; justify-content: center; }
#h_gnb > li {position: relative; text-align: center; transition: all 0.3s; padding: 0 2.5vw; }
#h_gnb > li > a { display: block; font-size:20px; color:#fff; font-weight:500; display: block; transition: all 0.3s; }
#h_gnb > li:hover > a { color: #f2666e; }
#h_gnb > li.active > a { color: #f2666e; }

/* #h_gnb > li:hover .lnb{display: block;} */
#h_gnb .sub { overflow: hidden; position: absolute; top: 65px; width: 100%; height: 0; transition: all 0.3s; left: 50%; transform: translate(-50%, 0); }
#h_gnb .sub li { width: 100%; line-height: 40px; }
#h_gnb .sub li a { display: block; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.5); font-size: 16px; text-align: center; line-height: 40px; }
#h_gnb .sub li:hover a { color: #f2666e; transition: all 0.3s; font-weight: bold; }
#header::after { content: ""; display: block; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: rgba(0, 0, 0, 0.8); z-index: -1; transition: all 0.3s;transition-delay: 0.2s; }
#header::before { content: ""; display: block; position: absolute; left: 50%; top: 120px; width: calc(100% - 100px); height: 1px; background: rgba(255, 255, 255, 0.5); z-index: 1; transform: translate(-50%, 0); transition: all 0.3s; opacity: 0; }
#header:hover::before { opacity: 1; }

/* #header:hover #h_gnb > li { width: 10vw; } */
#header:hover::after { height: 430px; transition: height 0.3s; }
#header:hover .sub { height: 300px; transition: height 0.4s; }


#nav_btn{ display: none; cursor: pointer; }
#nav_btn span{display: block; width: 40px; height: 2px; background: #fff; margin-bottom:9px;}
#nav_btn span:last-of-type { margin-bottom: 0; }

#sitemap .close{cursor: pointer; position: absolute; top: 55px; right:30px;}
#sitemap .close span{display: block; width: 40px; height: 2px; background: #fff;}
#sitemap .close .line01{transform: rotate(45deg);}
#sitemap .close .line02{transform: rotate(-45deg); margin-top: -2px;}

#sitemap{position: fixed; top:0; right:-100%; width: 50%; height: 100vh; background: rgba(0,0,0,0.96); padding:10vh 50px 0; box-shadow: -2px 1px 8px #46464640; z-index: 999;}
#sitemap .close{cursor: pointer; position: absolute; top: 55px; right:30px;}
#sitemap .close span{display: block; width: 40px; height: 2px; background: #fff;}
#sitemap .close .line01{transform: rotate(45deg);}
#sitemap .close .line02{transform: rotate(-45deg); margin-top: -2px;}
#sitemap .lang{ display: flex; justify-content: center; max-width: 370px; margin: 0 auto 30px; padding:5px 20px; }
#sitemap .lang li a{display: block; font-size: 16px; color:#aaa;}
#sitemap .lang li a:after{content:"ㅣ"; padding:0 3px;}
#sitemap .lang li:last-of-type a:after{display: none;}
#sitemap .lang li a.on, #sitemap .lang li:hover a{color:#000;}
#sitemap .gnb{height: 80vh; overflow-y: auto;}
#sitemap .gnb > li{margin-bottom:30px;}
#sitemap .gnb > li > a{font-size:26px; font-weight: 500; letter-spacing: -1px; border-bottom:1px solid #ddd; display: block; padding-bottom:10px; margin-bottom:10px; color: #fff; }
#sitemap .gnb > li:hover > a{color:#2e5399;}
#sitemap .gnb .lnb li a{font-size: 16px; transition: .5s; display: block; padding:3px 0; color: #999; }
#sitemap .gnb .lnb li:hover a{margin-left:10px; color:#000;}




/***************************** INDEX  *********************************/
#my_wrapper h2 { color: #1a1a1a; font-size: 38px; font-family: 'GmarketSans'; font-weight: 500; word-break: keep-all;}
#my_wrapper { overflow: hidden; }


#visual .swiper { position: relative; display: block; width: 100%; height: 930px; }
#visual .slide01 { background: url("../img/visual_02.jpg") no-repeat center center /cover; }
#visual .slide02 { background: url("../img/visual_01.jpg") no-repeat center center /cover; }
#visual .slide03 { background: url("../img/visual_03.jpg") no-repeat center center /cover; }
#visual .slide04 { background: url("../img/visual_04.jpg") no-repeat center center /cover; }
#visual .slide05 { background: url("../img/visual_05.jpg") no-repeat center center /cover; }
#visual .swiper-pagination-bullet-active { background: #fff; }
#visual .swiper-pagination-bullet { background: #fff; }
#visual .swiper-pagination-progressbar-fill { background: #f2666e; }
#visual .swiper-pagination { bottom: 0; top: inherit; }
#visual .swiper-button-next, #visual .swiper-button-prev { filter: brightness(0) saturate(100%) invert(90%) sepia(73%) saturate(0%) hue-rotate(334deg) brightness(102%) contrast(103%); }
#visual .swiper-button-next { right: 50px; }
#visual .swiper-button-prev { left: 50px; }

#content01  h2 { margin-bottom: 50px; text-align: center; }
#content01 .flex_box > * { position: relative; width: 100%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);  }
#content01 .flex_box .notice { max-width: 100%; }

#content01 .page { display: flex; background: #f2666e; }
#content01 .page li { position: relative; width: 25%; height: 80px; line-height: 80px; font-size: 18px; color: #fff; background: #f2666e; text-align: center; cursor: pointer; font-family: 'GmarketSans'; font-weight: 500; transition: all 0.3s; }
#content01 .page li::after { content: ""; display: block; position: absolute; left: -1.5px; top: 50%; transform: translate(0, -50%); width: 3px; height: 3px; border-radius: 100%; background: rgba(255, 255, 255, 0.5); }
#content01 .page li:first-of-type::after { display: none; }
#content01 .page li:hover { color: #1a1a1a; background: #fff; }
#content01 .page li.active { color: #1a1a1a; background: #fff; border: 1px solid #fff; }

#content01 .wrap { display: none; width: 100%; min-height: 309px; padding: 35px; }

#content01 .map_wrap::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); opacity: 0; transition: all 0.3s; }
#content01 .map_wrap:hover::after { opacity: 1; }
#content01 .map_wrap { overflow: hidden; max-width: 670px; padding: 20px; min-height: 1px; }
#content01 .map_wrap .info { position: absolute; width: 100%; text-align: center; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; color: #fff; opacity: 0; transition: all 0.3s; }
#content01 .map_wrap:hover .info { opacity: 1; }
#content01 .map_wrap .info .title { font-size: 30px; margin-bottom: 20px; word-break: keep-all; }
#content01 .map_wrap .info .desc { text-align: center; cursor: pointer; }

.map_blank { position: relative; }
.map_blank .mapAll {object-fit: contain; width:100%;height: 100%;opacity:1;transition:0.3s;-webkit-transition:0.3s;}
.map_blank .mapAll.blur {width:100%;opacity:0.7;transition:0.3s;-webkit-transition:0.3s;}
.map_blank .continent {width:100%;height: 100%;position:absolute;left:0;top:0;opacity:0;transition:0.3s;-webkit-transition:0.3s;}
.map_blank .continent.over {top:0;opacity:1;transition:0.3s;-webkit-transition:0.3s;}

.map_blank .more {background:url("../img/more.png") no-repeat center;background-size:28px;position:absolute;opacity:1;transition:0.3s;-webkit-transition:0.3s;cursor:pointer;z-index:2;}
.map_blank .more.over {display: none;}
.map_blank .more1 {width:32%;height:44%;left:5%;top:8%;}
.map_blank .more2 {width:16%;height:37%;left:23%;top:54%;}
.map_blank .more3 {width:12%;height:24%;left:53%;top:14%;}
.map_blank .more4 {width:18%;height:52%;left:65%;top:4%;}
.map_blank .more5 {width:18%;height:30%;left:44%;top:43%;}
.map_blank .more6 {width:16%;height:23%;left:77%;top:68%;}
.map_blank .more7 {width:8%;height:10%;left:19%;top:51%;}
/* .map_blank .more8 {width:12%;height:30%;left:74%;top:43%;} */

.map_blank .no {font-size:30px;color:#1a1a1a;font-weight: bold;text-align:center;margin-left:-10px;opacity:0;position:absolute;z-index:1;transition-duration:0.3s;-webkit-transition-duration:0.3s;}
.map_blank .no.on {margin-left:0px;opacity:1;transition-duration:0.3s;-webkit-transition-duration:0.3s;transition-delay:0.2s;-webkit-transition-delay:0.2s;}
.map_blank .no1 {width:14%;height:13%;left:18%;top:16%;}
.map_blank .no2 {width:15%;height:14%;left:24%;top:65%;}
.map_blank .no3 {width:20%;height:7%;left:46%;top:20%;}
.map_blank .no4 {width:15%;height:7%;left:67%;top:26%;}
.map_blank .no5 {width:18%;height:7%;left:44%;top:54%;}
.map_blank .no6 {width:18%;height:7%;left:75.5%;top:75%;}
.map_blank .no7 {width:15%;height:13%;left:16%;top:50%;}
/* .map_blank .no8 {width:18%;height:30%;left:74%;top:43%;} */

.map_blank .no img { position: absolute; max-width: 50px; box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.3); }

.map_blank .no1 img:nth-of-type(1) { left: 33%; top: 105%; }

.map_blank .no3 img:nth-of-type(1) { left: 38%; top: 100%; }

.map_blank .no4 img:nth-of-type(1) { left: 15%; top: 110%; }
.map_blank .no4 img:nth-of-type(2) { left: 55%; top: 110%; }
.map_blank .no4 img:nth-of-type(3) { left: 15%; top: 220%; }
.map_blank .no4 img:nth-of-type(4) { left: 55%; top: 220%; }

#youtube { display: block; background: #fafafa; }
#youtube .inner_wrap { max-width: 1320px; }
#youtube .swiper { overflow: hidden; display: block; width: 100%; max-width: 1180px; margin: 0 auto; }
#youtube .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 15px; }
#youtube .swiper-pagination-bullet-active { background: #f2666e; }
#youtube .swiper-button-next, #youtube .swiper-button-prev {filter: brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(7493%) hue-rotate(313deg) brightness(95%) contrast(98%);}

#youtube .swiper-slide {
      position: relative; /* Add this line to make .swiper-slide relative */
      width: 100%;
      padding-bottom: 56.25%;
    }
#youtube .swiper-slide iframe {
      position: absolute; /* Add this line to make iframe absolute */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
/* Add this CSS for responsive aspect ratio */

#product h2 { margin-bottom: 50px; }
#product .info a { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #666; font-weight: 500; transition: all 0.3s; }
#product .info a:hover { color: #f2666e; }
#product .info a span { width: 50px; height: 7px; background: url("../img/ico_arrow3.png") no-repeat center center; transition: all 0.3s; }
#product .info a:hover span { background: url("../img/ico_arrow2.png"); }
#product .inner_wrap { display: flex; align-items: center; justify-content: space-between; }
#product .slide { overflow: hidden; position: relative; width: 70%; padding: 5px; }
#product .slide ul { padding-bottom: 60px;}
#product .slide ul li img { display: block; width: 100%; height: 100%; border-radius: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
#product .swiper-pagination-progressbar { height: 2px; bottom: 5px; top: inherit; width: 88%; background: #dddddd; }
#product .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #e54d44; }
#product .swiper-button-prev { left: auto; right: 75px; background: url("../img/prev.png") no-repeat center center / cover; width: 11px; height: 20px; top: inherit;  bottom: 0px; }
#product .swiper-button-next { right: 15px; background: url("../img/next.png") no-repeat center center / cover; width: 11px; height: 20px; top: inherit;  bottom: 0px; }




/***************************** S U B  *********************************/

#s_top{position: relative; height: 500px; }
#s_top.bg01{background: url(../img/sub_top01.png) no-repeat center center / cover;}
#s_top.bg02{background: url(../img/sub_top02.png) no-repeat center center / cover;}
#s_top.bg03{background: url(../img/sub_top03.png) no-repeat center center / cover;}
#s_top.bg04{background: url(../img/sub_top04.png) no-repeat center center / cover;}
#s_top.bg05{background: url(../img/sub_top05.png) no-repeat center center / cover;}
#s_top > h2{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight:500; color:#fff; text-transform: uppercase;}
#s_top.bg02 > h2 { display: none; }

#path {position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
#path .home_ico {display: block; width: 23px; height: 20px; background: url("../img/ico_home.png");}
#path .home { padding: 20px; border-left: 1px solid #fff; border-right: 1px solid #fff; }
#path .main { width: 20%; padding: 0 30px; }
#path .sub { width: 20%; padding: 0 30px; }
#path .inner_wrap { display: flex; height: 60px; padding: 0 50px; }
#path .sbm{ position: relative; color: #fff; }
#path .sbm::after { content: ""; display: block; position: absolute; right: -1px; top: 50%; width: 1px; height: 100%; background: #fff; transform: translate(0, -50%); }
#path .sbm h2{ position: relative; line-height: 60px; font-size:16px; font-weight:300; cursor: pointer;}
#path .sbm h2::after { content: ""; display: block; position: absolute; right: 0; top: 50%; width: 14px; height: 8px; background: url("../img/ico_down.png"); transform: translate(0, -50%); }
#path .lnb{display: none; position: absolute; top:56px; left:-1px; width:100%; background: #fff;border:1px solid #ddd; z-index: 99; padding:10px 0;}
#path .lnb li a{display: block; color: #888; font-size:16px; padding:5px 24px;}
#path .lnb li a:hover{color: #f2666e; font-weight: 500;}

#path .asd { width: 30%; padding: 0 30px; }
#path .asd h2{ position: relative; line-height: 60px; font-size:16px; font-weight:300; cursor: pointer;}
#path .asd h2::after { content: ""; display: block; position: absolute; right: 0; top: 50%; width: 14px; height: 8px; background: url("../img/ico_down.png"); transform: translate(0, -50%); }
#path .asd{ position: relative; color: #fff; }
#path .asd::after { content: ""; display: block; position: absolute; right: -1px; top: 50%; width: 1px; height: 50%; background: #fff; transform: translate(0, -50%); opacity: 0.5; }

#sub section { position: relative; width: 100%; height: 100%; }
#sub h2 { margin-bottom: 100px; font-size: 60px; font-weight: 700; text-align: center; }





/* BrandStory */
#sub0101 {padding-bottom: 300px;}
#sub0101 .content_pad {}
#sub0101 .con01{text-align: center;}
#sub0101 .con01 h2{font-size: 40px;padding-top:20px;font-weight: 400;}
#sub0101 .con02{padding-top: 50px; width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap;}
#sub0101 .con02 div{width: 50%;}
#sub0101 .con02 h3{font-size: 30px;}
.content-sub p{font-size: 16px;line-height: 30px;font-weight: 400;color: #333;}

/* #sub0101 h2 { color: #fff; text-align: left; }
#sub0101 .content01 { background: url(../img/sub01_01.png) no-repeat center center / cover; }
#sub0101 .content01 .inner_wrap { padding: 200px 50px; }
#sub0101 .content01 .title { margin-bottom: 50px; font-size: 68px; font-weight: 700; color: #f2666e; word-break: keep-all; }
#sub0101 .content01 .title br {display: none;}
#sub0101 .content01 .title span { font-size: 80px; }
#sub0101 .content01 .title .color { color: #bf000a; }
#sub0101 .content01 .desc { font-size: 36px; font-weight: 500; color: rgba(255, 255, 255, 0.8); line-height: 1.5; word-break: keep-all; }

#sub0101 .content02 .inner_wrap { padding: 200px 50px 0; text-align: center; }
#sub0101 .content02 .title { margin-bottom: 50px; font-size: 68px; font-weight: 700; color: #f2666e; word-break: keep-all; }
#sub0101 .content02 .title .color { color: #bf000a; }
#sub0101 .content02 .desc { margin-bottom: 100px; font-size: 36px; font-weight: 500; color: #1a1a1a; line-height: 1.5; word-break: keep-all; }
#sub0101 .content02 .desc span { font-size: 48px; }

#sub0101 .content03 { background: #f4f2f2; text-align: center; }
#sub0101 .content03 .title { margin-bottom: 50px; font-size: 60px; font-weight: 700; color: #676767; word-break: keep-all; }
#sub0101 .content03 .title span { font-size: 68px; color: #e04b51; }
#sub0101 .content03 .desc { font-size: 30px; font-weight: 500; color: #333333; line-height: 1.5; word-break: keep-all; }

#sub0101 ul { display: flex; justify-content: space-between; align-items: center; }
#sub0101 ul li { width: calc(100% / 3); text-align: center; }
#sub0101 .content04 li { position: relative; padding: 100px 5px; }
#sub0101 .content04 li::after { content: ""; display: block; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 1px; height: 50%; background: rgba(0, 0, 0, 0.2); }
#sub0101 .content04 li:last-of-type::after { display: none; }
#sub0101 .content04 li img { margin-bottom: 50px; }
#sub0101 .content04 li .title { margin-bottom: 30px; font-size: 40px; font-weight: 700; color: #f2666e; }
#sub0101 .content04 li .desc { font-size: 32px; font-weight: 600; color: #666666; line-height: 1.5; word-break: keep-all; } */

#sub0102 .content01 { background: #f5f5f5; }
#sub0102 .content01 ul { display: flex; justify-content: space-between; align-items: center; }
#sub0102 .content01 ul li { position: relative; }
#sub0102 .content01 ul li .info { position: absolute; left: 30px; bottom: 30px; }
#sub0102 .content01 ul li .ico { position: absolute; right: 30px; top: 30px; width: 48px; height: 48px; object-fit: contain; }
#sub0102 .content01 li .title { margin-bottom: 10px; font-size: 26px; font-weight: 700; color: #fff; word-break: keep-all; }
#sub0102 .content01 li .desc { font-size: 24px; font-weight: 400; color: #fff; }

#sub0102 .content02 { position: relative; }
#sub0102 .content02::after { content: ""; display: block; position: absolute; bottom: 0; width: 100%; height: 55vh; background: #f5f5f5; z-index: -1; }
#sub0102 .content02 ul { display: flex; justify-content: space-between; align-items: center; gap: 2vw; text-align: center; }
#sub0102 .content02 ul li img { display: block; margin-bottom: 30px; }
#sub0102 .content02 ul li:nth-of-type(1) img { border-top-left-radius: 50px; border-bottom-right-radius: 50px; }
#sub0102 .content02 ul li:nth-of-type(2) img { border-top-right-radius: 50px; border-bottom-left-radius: 50px; }
#sub0102 .content02 li .title { margin-bottom: 10px; font-size: 60px; font-weight: 700; color: #f2666e; }
#sub0102 .content02 li .desc { font-size: 40px; font-weight: 700; color: #333333; }

#sub0104 img { display: block; margin: 0 auto; }

#pro_all .pro_all { display: flex; flex-wrap: wrap; gap: 20px;  }
#pro_all .pro_all li { width: calc((100% / 4) - 15px); }

#sub04 h2 { text-align: left; }
#sub04 .title { margin-bottom: 20px; font-size: 28px; font-weight: bold; }
#sub04 .desc { font-size: 24px; line-height: 1.5; word-break: keep-all; }
#sub04 .map_wrap { background: #f5f5f5; }
#sub04 .map_wrap .inner_wrap { max-width: 1180px; }

#sub04 .sns_tab .info { display: flex; justify-content: space-between; align-items: center; }
#sub04 .sns_tab .info .desc { font-size: 16px; }
#sub04 ul { display: flex; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 100px 0; }
#sub04 ul li { display: flex; justify-content: center; align-items: center; width: 32.5%; gap: 30px; padding: 50px 20px; background: #f5f5f5; }
#sub04 ul li:first-child, #sub04 ul li:nth-child(2), #sub04 ul li:nth-child(3) {margin-bottom: 20px;}
#sub04 ul li img { display: block; width: 40%; }
/* #sub04 ul li dl { margin-bottom: 20px; }
#sub04 ul li dt { margin-bottom: 10px; font-size: 16px; color: #333; }
#sub04 ul li dt span { font-size: 24px; font-weight: bold; }
#sub04 ul li dd { display: flex; gap: 10px; font-size: 16px; color: #333; line-height: 1.5; }
#sub04 ul li dd span { display: block; font-weight: bold;}
#sub04 ul li dd p { display: block; width: 100%; max-width: 270px; word-break: keep-all; } */

#sub04 ul li .sns_link a { font-size: 14px; padding: 5px 0; color: #888; border: 1px solid #888; transition: all 0.3s; display: block; width: 48%; text-align: center;}
#sub04 ul li a:first-child {margin-right: 2%;}
#sub04 ul li a:hover { color: #fff; background: #888; }

#sub04 .sns_text_box {width: 50%;}
#sub04 .sns_title {margin-bottom: 10px; font-size: 16px; color: #333;}
#sub04 .sns_tab .inner_wrap > ul >li:nth-child(4) .sns_title, #sub04 .sns_tab .inner_wrap > ul >li:nth-child(5) .sns_title, #sub04 .sns_tab .inner_wrap > ul >li:nth-child(6) .sns_title {margin-bottom: 0;}
#sub04 .sns_title span {font-size: 24px; font-weight: bold;}
#sub04 .sns_article {display: flex; flex-wrap: wrap; flex-direction: column; font-size: 16px; color: #333; line-height: 1.5; margin-bottom: 20px; word-break: keep-all;}
#sub04 .sns_tab .inner_wrap > ul >li:nth-child(4) .sns_article, #sub04 .sns_tab .inner_wrap > ul >li:nth-child(5) .sns_article, #sub04 .sns_tab .inner_wrap > ul >li:nth-child(6) .sns_article {margin-bottom: 0;}
#sub04 .sns_article span {display: block; font-weight: bold; white-space: nowrap; margin-right: 10px;}
#sub04 .sns_article .flex {display: flex; word-break: keep-all;}
#sub04 .sns_link {display: flex; flex-wrap:wrap;}




/***************************** F O O T E R *********************************/
#footer { position: relative; width: 100%; padding: 50px 0; background: #222; }
#footer .inner_wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0; }
#footer h2 { display: inline-block; width: 227px; height: 50px; margin-bottom:20px; }
#footer address{ margin-bottom: 20px; line-height: 1.5; font-size: 16px; color: rgba(255, 255, 255, 0.5); }
#footer address span { font-weight: 500; }
#footer .sns { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
#footer .copy{color: rgba(255, 255, 255, 0.3);}
