@charset "utf-8";

:root {
  --col01:#203056;
  --col02:#AC1F27;
  --border:#e0e0e0;
  --ic:'Material Symbols Outlined';
}


@media all and (min-width:768px) {
  #fullpage section:not(.sec05) {min-height:720px;}
}


/* 초기 깜빡임 대응 */
#visual.slick-initialized {visibility:visible;}
#visual{visibility: hidden;}


/* main */
section.main .main_wrap {margin:60px 0 0; overflow:hidden;}
section.main .visual {width:100%; height:100%; display:block; position:relative; z-index:0; background:#eee;}
section.main .visual .slick-slider,
section.main .visual .slick-list,
section.main .visual .slick-track {height:100%;}
section.main .visual dl {width:100%;}
section.main .visual dd {height:100%; transition:0.2s;}
section.main .visual dd div.bg {display:inline-block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-size:cover;}
section.main .visual dd.slick-active div.bg {animation:visbg 6s ease-in-out infinite alternate; animation-iteration-count:1;}
section.main .visual dd div.txt {position:relative; z-index:10; color:#fff; text-align:center; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; height:100%; padding-bottom:40px;}
section.main .visual dd div.txt {line-height:1.2;}
section.main .visual dd div.txt h1 {font-size:2.6em; font-weight:900; margin-bottom:20px;}
section.main .visual dd div.txt h2 {font-size:1.25em; font-weight:600;}
section.main .visual dd.slick-active div.txt h1,
section.main .visual dd.slick-active div.txt h2,
section.main .visual dd.slick-active div.txt h3 {animation-name:anim01; animation-duration:1s; animation-fill-mode:backwards; animation-delay:1s;}
section.main .visual dd.slick-active div.txt h1 {animation-delay:1.5s;}
section.main .visual dd.slick-active div.txt h3 {animation-delay:2s;}

@media all and (min-width:768px) {
  section.main .visual dd div.txt {font-size:1.5em;}
  section.main .visual dd div.txt h3 {font-size:0.85em;}
}

@media all and (min-width:1200px) {
	section.main .main_wrap {margin:0;}
  section.main .visual dd div.txt {font-size:2em;}
  section.main .visual dd div.txt h3 {font-size:0.65em;}
}


section.main .control {position:absolute; left:max(calc(50% - 700px), 0px); bottom:120px; width:100%; max-width:1400px; text-align:center; display:flex; align-items:center; justify-content:center; padding:0 3%; position:relative;}
section.main .control .dots {display:none;}
section.main .control .dots > ul {display:flex; align-items:center;}
section.main .control .dots li {display:inline-block; width:0; height:1px; cursor:pointer; background:rgba(255,255,255,0.3);}
section.main .control .dots li.slick-active {background:#fff; height:3px;}
section.main .control .prev_arr {margin-right:20px;}
section.main .control .prev_arr,
section.main .control .next_arr {display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:100%; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); cursor:pointer;}
section.main .control .prev_arr:after,
section.main .control .next_arr:after {font-family:var(--ic); -webkit-font-feature-settings:'liga'; color:#fff; font-size:2em;}
section.main .control .prev_arr:after {content:'chevron_left';}
section.main .control .next_arr:after {content:'chevron_right';}

@media all and (min-width:768px) {
  section.main .control .dots {display:block; width:calc(100% - 320px); margin-left:70px;}
  section.main .control .dots li {width:unset; flex:1;}
  section.main .control .prev_arr {margin-right:130px;}
  section.main .control .num {position:absolute; left:calc(3% + 60px); top:0; width:130px; height:60px; display:flex; align-items:center; justify-content:center; color:#fff;}
  section.main .control .dots li:not(.slick-active) .num {display:none;}
  section.main .control .num span:last-child:before {content:''; display:inline-block; width:1px; height:12px; background:#fff; margin:0 10px; opacity:0.3;}
}

@media all and (min-width:1200px) {
  section.main .control {padding:0 20px;}
  section.main .control .num {left:80px;}
}


/* main - 영상으로 처리 */
section.main .vis_video {position:relative; width:100%; height:100%; overflow:hidden;}
section.main .vis_video .bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:-1; pointer-events:none;}
section.main .vis_video .bg iframe {width:100%; height:100%;}
section.main.wide .vis_video .bg {width:calc((56.25vw + 220px) * 16 / 9); height:calc(56.25vw + 220px); top:calc(50vh - 28.125vw - 40px); left:calc(50% - ((28.125vw + 110px) * 16 / 9));}
section.main.narrow .vis_video .bg {width:calc((100vh + 220px) * 16 / 9); min-height:calc(100vh + 220px); top:calc(50vh - 50vh - 150px); left:calc(50% - ((50vh + 110px) * 16 / 9));}
section.main .vis_video div.txt {position:relative; z-index:10; color:#fff; text-align:center; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; height:100%; padding-bottom:40px; z-index:99; line-height:1.2; background:rgba(0,0,0,0.5);}
section.main .vis_video div.txt h1 {font-size:2.6em; font-weight:900; margin-bottom:20px;}
section.main .vis_video div.txt h2 {font-size:1.25em; font-weight:600;}
section.main .vis_video div.txt h1,
section.main .vis_video div.txt h2,
section.main .vis_video div.txt h3 {animation:anim01 infinite; animation-duration:10s; animation-fill-mode:backwards; animation-delay:1s;}
section.main .vis_video div.txt h1 {animation-delay:2s;}
section.main .vis_video div.txt h3 {animation-delay:3s;}

@media all and (min-width:768px) {
  section.main .vis_video div.txt {font-size:1.5em;}
  section.main .vis_video div.txt h3 {font-size:0.85em;}
}

@media all and (min-width:1200px) {
  section.main .vis_video div.txt {font-size:2em;}
  section.main .vis_video div.txt h3 {font-size:0.65em;}
}


section .sectit {text-align:center; padding:0 3%; width:100%; display:flex; flex-wrap:wrap; align-items:center;}
section .sectit h5 {color:var(--col01); font-weight:700; width:100%; margin:auto 0 0; padding:100px 0 0;}
section .sectit h4 {font-size:1.5em; font-weight:800; width:100%; margin:0 0 auto; padding:0 0 50px;}

@media all and (min-width:768px) {
  section .sectit h4 {font-size:2em;}
}

@media all and (min-width:1200px) {
  section .sectit {padding:0 20px;}
  section .sectit h4 {font-size:2.5em;}
}


section.sec01 {background:url('../img/main/sec01_bg.jpg') no-repeat center center / cover; text-align:center;}
section.sec01 .wrap {display:flex; flex-wrap:wrap; height:100%;}
section.sec01 .sectit {height:min(40%, 200px);}
section.sec01 ul {width:100%; height:max(60%, calc(100% - 200px)); display:flex; flex-wrap:wrap;}
section.sec01 li {width:100%; height:33.33%; position:relative; overflow:hidden;}
section.sec01 li .bg {background-size:cover; background-position:center center; background-repeat:no-repeat; position:absolute; left:0; top:0; width:100%; height:100%; transition:0.3s;}
section.sec01 li:hover .bg {transform:scale(1.1);}
section.sec01 li:nth-child(1) .bg {background-image:url('../img/main/sec01_bg01.jpg');}
section.sec01 li:nth-child(2) .bg {background-image:url('../img/main/sec01_bg02.jpg');}
section.sec01 li:nth-child(3) .bg {background-image:url('../img/main/sec01_bg03.jpg');}
section.sec01 li .txt {position:relative; z-index:10;}
section.sec01 li a {display:flex; align-items:center; justify-content:center; height:100%; color:#fff;}
section.sec01 li a h4 {font-size:1.5em; font-weight:700; margin:10px 0 0;}
section.sec01 li a h5 {font-size:0.9em; margin:10px 0 20px;}
section.sec01 li a .arr {width:40px; transition:0.3s;}
section.sec01 li:hover a .arr {transform:translateX(1em);}

@media all and (min-width:768px) {
  section.sec01 {transform:scale(0); transition:1s; transform-origin:top center;}
  body:not(.fp-viewing-main) section.sec01 {transform:scale(1);}
  section.sec01 .sectit {height:40%;}
  section.sec01 ul {margin:auto 0 0; height:60%;}
  section.sec01 li {flex:1; height:100%;}
  section.sec01 li a .arr {width:50px; margin:40px 0 0;}
}

@media all and (min-width:1200px) {
  section.sec01 li a h4 {font-size:2em;}
}


section.sec02 .wrap {display:flex; flex-wrap:wrap; height:100%;}
section.sec02 .sectit {height:min(40%, 200px);}
section.sec02 ul {width:100%; height:max(60%, calc(100% - 200px)); display:flex; flex-wrap:wrap; text-align:center; padding-bottom:50px;}
section.sec02 li {width:50%; height:33.33%; max-height:480px; position:relative;}
section.sec02 li .bg {background-size:cover; background-position:center center; background-repeat:no-repeat; position:absolute; left:0; top:0; width:100%; height:100%; transition:0.3s;}
section.sec02 li .bg:after {content:''; display:inline-block; width:100%; height:100%; position:absolute; left:0; top:0; background:#203056; background:linear-gradient(235deg, #20305600 0%, #203056 100%); opacity:0; transition:0.3s;}
section.sec02 li:hover .bg:after {opacity:1;}
section.sec02 li:nth-child(1) .bg {background-image:url('../img/main/sec02_bg01.jpg');}
section.sec02 li:nth-child(2) .bg {background-image:url('../img/main/sec02_bg02.jpg');}
section.sec02 li:nth-child(3) .bg {background-image:url('../img/main/sec02_bg03.jpg');}
section.sec02 li:nth-child(4) .bg {background-image:url('../img/main/sec02_bg04.jpg');}
section.sec02 li:nth-child(5) .bg {background-image:url('../img/main/sec02_bg05.jpg');}
section.sec02 li .txt {position:absolute; left:0; bottom:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; height:100%; color:#fff; padding:0 1em; transition:0.3s;}
section.sec02 li .txt div {transition:0.3s; background:url('../img/main/arr.svg') no-repeat center bottom / 0;}
section.sec02 li:hover .txt div {background-size:3em; padding-bottom:40px;}
section.sec02 li .txt h4 {font-size:1.5em; font-weight:700; margin-bottom:10px;}

@media all and (min-width:768px) {
  section.sec02 .sectit {height:40%;}
  section.sec02 ul {margin:auto auto 0; height:60%;}
  section.sec02 li {flex:1; height:100%; transform:translateY(0); opacity:1; transition:0.6s;}
  body:not(.fp-viewing-area) section.sec02 li {transform:translateY(100%); opacity:0;}
  body.fp-viewing-area section.sec02 li:nth-child(1) {transition-delay:0.3s;}
  body.fp-viewing-area section.sec02 li:nth-child(2) {transition-delay:0.6s;}
  body.fp-viewing-area section.sec02 li:nth-child(3) {transition-delay:0.9s;}
  body.fp-viewing-area section.sec02 li:nth-child(4) {transition-delay:1.2s;}
  body.fp-viewing-area section.sec02 li:nth-child(5) {transition-delay:1.5s;}
  section.sec02 li .bg {height:calc(100% - 140px);}
  section.sec02 li:hover .bg {height:100%; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.4); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.4); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.4);}
  section.sec02 li .txt {color:unset; height:140px;}
  section.sec02 li:hover .txt {color:#fff; height:240px;}
  section.sec02 li:hover .txt div {padding-bottom:60px;}
  section.sec02 li:not(:hover) .txt h5 {color:#888;}
}


section.sec03 {background:#F5F5F6; overflow:hidden;}
section.sec03 .wrap {display:flex; flex-wrap:wrap; height:100%;}
section.sec03 .sectit {height:min(40%, 200px);}
section.sec03 .div {width:100%; height:max(60%, calc(100% - 200px)); padding-bottom:60px;}
section.sec03 .div .slick-slide {display:block;}
section.sec03 .div .slick-slide:not(.slick-active) {opacity:0.3;}
section.sec03 .div a .txt {background:#fff; padding:20px; display:flex; flex-wrap:wrap; align-items:center;}
section.sec03 .div a .txt h4 {font-size:1.25em; font-weight:700; display:flex; align-items:center; gap:10px;}
section.sec03 .div a .txt h4:after {content:''; display:inline-block; width:1.1em; height:1em; background:url('../img/main/arr_b.svg') no-repeat center right / 150% auto; transition:0.3s;}
section.sec03 .div a:hover .txt h4:after {transform:translateX(0.5em);}
section.sec03 .div a .txt h5 {color:var(--col02); font-weight:700; margin-left:auto;}
section.sec03 .div a .txt p {width:100%; font-size:0.9em; margin:10px 0 0;}
section.sec03 .div .dots {margin-top:40px;}
section.sec03 .div .dots ul {display:flex; align-items:center;}
section.sec03 .div .dots li {display:inline-block; flex:1; height:1px; background:#20202025; cursor:pointer;}
section.sec03 .div .dots li.slick-active {height:3px; background:#202020;}

@media all and (min-width:640px) {
  section.sec03 .div .slick-list {overflow:visible; margin:0 -5px;}
  section.sec03 .div a {padding:0 5px;}
}

@media all and (min-width:768px) {
  section.sec03 .sectit {height:40%;}
  section.sec03 .div {height:60%;}
  section.sec03 .div .slick-list {margin:0 -10px;}
  section.sec03 .div a {padding:0 10px;}
  section.sec03 .div a .txt h4 {font-size:1.5em;}
  section.sec03 .div .dots {margin-top:60px;}
}

@media all and (min-width:1200px) {
  section.sec03 .div a .txt h4 {font-size:1.75em;}
  section.sec03 .div a .txt p {font-size:1em;}
  section.sec03 .div .dots {margin-top:80px;}
}


section.sec04 .wrap {display:flex; flex-wrap:wrap; height:100%;}
section.sec04 {background:url('../img/main/sec04_bg.jpg') no-repeat center center / cover; text-align:center;}
section.sec04 .sectit {height:min(40%, 200px);}
section.sec04 .sectit h5,
section.sec04 .sectit h4 {color:#fff;}
section.sec04 ul {height:max(60%, calc(100% - 200px)); display:flex; flex-wrap:wrap; text-align:center; padding-bottom:50px;}
section.sec04 li {width:100%; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #ffffff40;}
section.sec04 li:first-child {border-top:1px solid #ffffff40;}
section.sec04 li a {color:#fff;}
section.sec04 li h5 {font-size:1.25em; font-weight:700; margin:10px 0;}
section.sec04 li p {font-size:0.9em;}
section.sec04 li .ic {width:min(40%, 180px);}
section.sec04 li .arr {width:40px; transition:0.3s; margin:20px 0 0;}
section.sec04 li:hover .arr {transform:translateX(1em);}

@media all and (min-width:768px) {
  section.sec04 .sectit {height:40%;}
  section.sec04 ul {height:60%; padding-bottom:80px;}
  section.sec04 li {flex:1; border-bottom:0; border-right:1px solid #ffffff40;}
  section.sec04 li:first-child {border-top:0; border-left:1px solid #ffffff40;}
  section.sec04 li h5 {font-size:1.5em;}
  section.sec04 li p {font-size:1em;}
  section.sec04 li .arr {width:50px; margin:40px 0 0;}
}

@media all and (min-width:1200px) {
  section.sec04 li h5 {font-size:1.75em;}
}


section.sec05 .ban_wrap {padding:40px 0;}
section.sec05 .tit {margin:0 0 20px; display:flex; align-items:center;}
section.sec05 .tit h3 {font-weight:700; font-size:1.25em;}
section.sec05 .tit span {display:flex; align-items:center; justify-content:center; cursor:pointer; margin:0;}
section.sec05 .tit span.prev_arr {margin-left:auto;}
section.sec05 .tit span.prev_arr:after {content:''; display:inline-block; width:1px; height:14px; background:var(--border);}
section.sec05 .tit span:before {font-family:var(--ic); font-size:1.5em; padding:0 10px;}
section.sec05 .tit span.prev_arr:before {content:'chevron_left';}
section.sec05 .tit span.next_arr:before {content:'chevron_right';}
section.sec05 .ban img {width:100%; max-width:140px;}

@media all and (min-width:768px) {
  section.sec05 .ban_wrap {display:flex; align-items:center; justify-content:space-between; padding:60px 0;}
  section.sec05 .tit {width:max(20%, 200px); margin:0;}
  section.sec05 .tit h3 {font-size:1.25em;}
  section.sec05 .ban {width:min(75%, calc(100% - 240px));}
}


/*footer*/
#footer {background:#313234; color:#ffffff95; font-size:0.9em; padding:40px 0;}
#footer .pdinner {max-width:1800px;}
#footer ul.bottom_li {display:flex; justify-content:flex-start; align-items:center; margin:0 0 20px; gap:20px;}
#footer ul.bottom_li li a {font-weight:600;}
#footer .info ul {display:flex; flex-wrap:wrap; justify-content:flex-start; gap:0 10px;}
#footer .info ul:not(:last-child) {margin:0 0 5px;}
#footer .info li:nth-child(1) {color:#fff;}
#footer .info li:nth-child(1),
#footer .info li:nth-child(2) {width:100%;}
#footer .info li b {width:2.5em; display:inline-block;}
#footer p {font-size:0.9em; margin-top:20px;}
#pageup {position:fixed; z-index:999; right:10px; bottom:10px; width:60px; height:60px; background:#444549; display:none; cursor:pointer;}
#pageup:after {font-family:var(--ic); content:'arrow_upward'; color:#fff; display:flex; width:100%; height:100%; align-items:center; justify-content:center;}

@media all and (min-width:768px) {
	#footer {padding:60px 0; text-align:left;}
  #footer ul.bottom_li {justify-content:flex-start; margin:0 0 20px;}
  #footer ul.bottom_li li:first-child {margin-left:0;}
  #footer .info li:nth-child(1) {flex:1; max-width:7em;}
  #footer .info li:nth-child(2) {flex:3; max-width:20em;}
  #footer .info li:nth-child(3) {flex:1; max-width:10em;}
  #footer .info li:nth-child(4) {flex:1; max-width:10em;}
}

@media all and (min-width:960px) {
  #footer .pdinner {background:url('../img/logo_f.png?v=250626') no-repeat calc(100% - 40px) top / 160px;}
}


/* Common Layout CSS _ 15.05.18 */
.wrap {max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative;}
.inner {max-width:1400px; width:100%; position:relative; margin: 0 auto;}
.pdinner {max-width:1400px; width:100%; padding:0 3%; position:relative; margin: 0 auto;}
.mEnter {display:block;}
.pEnter {display:inline-block;}
.mb {margin-bottom:30px !important}
.bmb {margin-bottom:40px !important}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.pb {padding-bottom:30px !important}
.bpb {padding-bottom:40px !important}
.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}
.fwb {font-weight:600}
.fss {font-size:0.8em}
.fsl {font-size:1.1em}

@media all and (min-width:768px) {
	.mb {margin-bottom:40px !important;}
	.bmb {margin-bottom:60px !important;}
	.pb {padding-bottom:40px !important}
	.bpb {padding-bottom:60px !important}
	.mo_only {display:none;}
	.move_scroll {max-width:100%;}
}

@media all and (min-width:1200px) {
  .mEnter {display:inline-block;}
  .pEnter {display:block;}
  .mb {margin-bottom:50px !important;}
  .bmb {margin-bottom:80px !important;}
  .pb {padding-bottom:50px !important;}
  .bpb {padding-bottom:80px !important;}
  .pdinner {padding:0 20px;}
}

@media all and (min-width:1600px) {
  body, html {font-size:18px;}
}


.dot_li li {text-align:left; line-height:1.6em; padding-left:0.7em; position:relative;}
.dot_li li:before {content:''; display:inline-block; width:0.2em; height:0.2em; border-radius:50%; background:#aaa; position:absolute; left:0; top:0.7em;}
.img_li {display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 2%;}
.img_li li {width:49%; border:1px solid var(--border);}
.img_li li.w100 {width:100%;}
.img_li.col2 li {width:49%;}
.img_li li img {width:100%;}
.img_li li p {padding:10px; display:flex; align-items:center; justify-content:center; border-top:1px solid var(--border);}
.img_li li p em {font-weight:700; display:flex; align-items:center;}
.img_li li p em:after {content:''; display:inline-block; width:1px; height:1em; background:var(--border); margin:auto 10px;}
/*.tit_dot {font-size:1.4em; padding-left:30px; background:url('../img/tit_dot.png') no-repeat left center; font-weight:700;}*/
.tit_dot {font-size:1.15em; font-weight:700; line-height:1.8em}
.tit_dot:before {content:''; display:inline-block; width:0.2em; height:0.8em; background:var(--col02); margin:0.5em 0.5em 0 0;}

@media all and (min-width:768px) {
	.img_li li {width:32%;}
}

@media all and (min-width:1200px) {
  .img_li {gap:20px 2%;}
	.img_li li {width:23.5%;}
  .tit_dot {font-size:1.25em;}
}


/* animation */
@-webkit-keyframes dot {
		0% {-webkit-transform:scaleX(0); -webkit-transform-origin:0 0;}
    100% {-webkit-transform:scaleX(1); -webkit-transform-origin:0 0;}
}
@keyframes dot {
		0% {transform:scaleX(0); transform-origin:0 0;}
    100% {transform:scaleX(1); transform-origin:0 0;}
}
@-webkit-keyframes visbg {
  from {-webkit-transform:scale(100%);}
  to {-webkit-transform:scale(110%);}
}
@keyframes visbg {
  from {transform:scale(100%);}
  to {transform:scale(110%);}
}
@-webkit-keyframes anim01 {
	0% {opacity:0; -webkit-transform:translateY(30px);}
	10% {-webkit-transform:translateY(0); opacity:1;}
	90% {-webkit-transform:translateY(0); opacity:1;}
	100% {opacity:0;}
}
@keyframes anim01 {
	0% {opacity:0; transform:translateY(30px);}
	10% {transform:translateY(0); opacity:1;}
	90% {-webkit-transform:translateY(0); opacity:1;}
	100% {opacity:0;}
}
@-webkit-keyframes scroll {
	0% {-webkit-transform:translateY(0);}
	30% {-webkit-transform:translateY(20px);}
	100% {-webkit-transform:translateY(0);}
}
@keyframes scroll {
	0% {transform:translateY(0);}
	30% {transform:translateY(20px);}
	100% {transform:translateY(0);}
}


/* 서브레이아웃 */
#sub_vis {position:relative; padding:120px 0 0; background:#444 no-repeat center center / cover; color:#fff;}
#sub_vis:before {content:''; display:inline-block; width:100%; height:1px; background:#ffffff20; position:absolute; left:0; bottom:50px;}
#sub_vis:after {content:''; display:inline-block; width:100%; height:100%; background:#00000085; position:absolute; left:0; top:0;}
/*#sub_vis .pdinner:before {content:'KUMAH Steel'; color:#ffffff10; font-size:3em; font-weight:800; display:flex; align-items:center; height:100%; position:absolute; right:20px; top:0; z-index:1;}*/
#sub_vis h3 {color:#fff; font-weight:700; position:relative; z-index:2;}
#sub_vis h2 {font-size:1.75em; color:#fff; font-weight:700; position:relative; z-index:3;}
#sub_vis h2 img.keco {width:auto; max-height:0.9em; vertical-align:middle;}
#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:40px 0 80px; overflow:hidden;}
.subwrap {margin:0 auto;}

@media all and (min-width:768px) {
	#sub_vis {padding-top:140px;}
  #sub_vis .pdinner:before {font-size:4em;}
	#sub_vis h3 {font-size:1.25em;}
	#sub_vis h2 {font-size:2.5em;}
}

@media all and (min-width:1200px) {
	#sub_vis {padding-top:180px;}
  #sub_vis:before {bottom:60px;}
  #sub {min-height:650px; padding:60px 0 80px;}
}


/*서브메뉴 - 공통 */
#sub_drop {display:flex; align-items:center; justify-content:center; width:100%; z-index:100; margin:40px auto 0;}
#sub_drop .dropdown.home {overflow:hidden; width:50px;}
#sub_drop .dropdown.home a {display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
#sub_drop .dropdown.home a:after {content:"home"; font-family:var(--ic); color:#fff;}
#sub_drop .dropdown {position:relative; z-index:101; height:50px; text-align:left;}
#sub_drop .dropdown.deph01,
#sub_drop .dropdown.deph02 {width:calc(50% - 20px);}
#sub_drop .dropbtn {width:100%; display:inline-block; position:relative; padding:0 1em 0 0.5em; cursor:pointer;  text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; height:50px; line-height:50px;}
#sub_drop .dropbtn:after{font-family:var(--ic); content:'keyboard_arrow_down'; position:absolute; right:0.5em;}
#sub_drop .dropdown .show {display:block; position:absolute; left:0; top:50px;}
#sub_drop .dropdown ul {padding:0.5em 0;}
#sub_drop .dropdown ul li {padding:0.25em 0.75em;}
#sub_drop .dropdown ul li:hover {font-weight:700;}
#sub_drop .dropdown ul li a {display:block; color:#fff;}
#sub_drop .dropmenu {display:none; background:#00000090; backdrop-filter:blur(5px); box-sizing:content-box; width:100%; overflow:hidden;}

@media all and (min-width:768px) {
	#sub_drop {max-width:480px; margin:60px 0 0 auto;}
}

@media all and (min-width:1200px) {
  #sub_drop .dropdown.home {width:60px; border-left:1px solid #ffffff20;}
  #sub_drop .dropdown {height:60px; border-right:1px solid #ffffff20;}
  #sub_drop .dropbtn {height:60px; line-height:60px;}
  #sub_drop .dropdown .show {top:60px;}
}