@charset "utf-8";

:root {
  --col01:#2E8B57;
  --col02:#3CB371;
  --col03:#202A5D;
  --col04:#3D3D40;
  --col05:#9e9ea3;
  --lbg:#F6F6F8;
  --border:#dbdee3;
  --ic:'Material Symbols Outlined';
}

/* main */
#main .main_wrap {overflow:hidden;}
#main .visual {width:100%; position:relative; z-index:0; background:#eee;}
#main .visual .slick-slide {opacity:1 !important; transition:none !important; position: absolute; top:0; left:0; width:100%;}
#main .visual .slick-active {z-index:2;}
#main .visual .slick-slide:not(.slick-active) {z-index:1; pointer-events:none;}
#main .visual_wrap {width:100%;}
#main .visual dd {height:520px; transition:0.2s;}
#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;}
#main .visual dd div.txt {position:relative; z-index:10; color:#fff; display:flex; align-items:center; height:100%; width:100%; max-width:1440px; padding:0 3%; margin:0 auto;}
#main .visual dd.slick-active div.bg {animation:visbg 1s ease infinite alternate; animation-iteration-count:1;}
#main .visual dd.slick-active div.txt p {animation-name:anim01; animation-duration:1s; animation-fill-mode:both; animation-delay:1s;}
#main .visual dd div.txt p.t01 {color:var(--col02); font-weight:700;}
#main .visual dd div.txt p.t02 {font-weight:700; font-size:1.5em; line-height:1.2; margin:10px 0 20px; /*animation-delay:2s;*/}
#main .visual dd div.txt p.t03 {/*animation-delay:3s;*/ margin:0 0 40px;}
#main .visual .control {display:inline-flex; align-items:center; justify-content:space-between; gap:10px; height:50px; position:absolute; left:3%; bottom:60px; padding:0 20px 0 10px; border-radius:100px; background:rgba(61, 61, 64, 0.86); width:94%;}
#main .visual .control .dots {margin-right:auto;}
#main .visual .control .dots li {display:none;}
#main .visual .control .dots li.slick-active {display:inline-flex; align-items:center;}
#main .visual .control .dots li .num {width:80px; text-align:center;}
#main .visual .control .dots li .num span {color:#fff;}
#main .visual .control .dots li .num span:nth-child(1) {font-weight:600;}
#main .visual .control .dots li .bar {display:inline-block; width:100px; height:4px; cursor:pointer; background:rgba(255,255,255,0.4); position:relative;}
#main .visual .control .dots li .bar:after {content:''; display:inline-block; width:100%; height:100%; background:#fff; position:absolute; left:0; top:0; animation:dot 3.5s; -webkit-animation:dot 3.5s;}
#main .visual .control .arr {display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:100%; background:var(--col02); cursor:pointer; transition:0.3s;}
#main .visual .control .arr:hover {background:var(--col01);}
#main .visual .control .arr.prev:after,
#main .visual .control .arr.next:after {font-family:var(--ic); color:#fff;}
#main .visual .control .arr.prev:after {content:'chevron_left';}
#main .visual .control .arr.next:after {content:'chevron_right';}
#main .visual .imgref {display:flex; align-items:center; justify-content:flex-end; width:100%; position:absolute; right:0; bottom:20px; color:rgba(255,255,255,0.8); z-index:3; font-size:0.8em; padding:0 min(3%, 20px);}
#main .scroll {display:none;}

@media all and (min-width:768px) {
  #main .visual dd {height:680px;}
  #main .visual dd div.txt p.t01 {font-size:1.1em;}
  #main .visual dd div.txt p.t02 {font-size:2em;}
  #main .visual dd div.txt p.t03 {font-size:1.1em;}
  #main .visual .control {width:320px;}
}

@media all and (min-width:1200px) {
  #main .visual dd {height:960px;}
  #main .visual dd div.txt {padding:0 20px;}
  #main .visual dd div.txt p.t01 {font-size:1.25em;}
  #main .visual dd div.txt p.t02 {font-size:3.5em; margin:20px 0 40px;}
  #main .visual dd div.txt p.t03 {font-size:1.25em;}
  #main .visual .control {height:60px; left:max(20px, calc(50% - 700px)); bottom:120px;}
  #main .scroll {display:block; position:absolute; right:max(20px, calc(50% - 700px)); bottom:60px; color:#fff; bottom:120px;}
  #main .scroll > div {display:flex; align-items:flex-end; justify-content:flex-end; position:relative;}
  #main .scroll p {transform:rotate(90deg); transform-origin:top right; text-transform:uppercase; font-size:0.9em; font-weight:600; line-height:60px; margin:0 0 20px;}
  #main .scroll span {border:3px solid #fff; border-radius:100%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; position:absolute; right:0; bottom:0; font-size:1.1em;}
  #main .scroll span:after {content:'keyboard_double_arrow_down'; font-family:var(--ic); animation:scroll 2s infinite;  -webkit-animation:scroll 2s infinite; animation-fill-mode:both;}
}


#main section:not(.visual) {padding:60px 0; position:relative;}
#main section .sectit {text-align:center; position:relative; margin-bottom:40px; position:relative;}
#main section .sectit .t01 {color:var(--col01); font-weight:700; text-transform:uppercase; margin-bottom:10px;}
#main section .sectit .t02 {font-weight:700; font-size:1.75em; line-height:1em;}
#main section .sectit .t03 {margin:20px 0 0;}
#main section .btns {display:flex; flex-wrap:wrap; gap:20px 10px;}
#main section .btns a {width:calc(50% - 10px); border-radius:16px; color:#fff; display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 10px; background:#ffffff33; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:0.3s; font-size:1.1em; font-weight:600;}
#main section .btns a:hover {transform:translateY(-5px);}
#main section .btns a:after {content:'chevron_right'; font-family:var(--ic);}

@media all and (min-width:768px) {
  #main section:not(.visual) {padding:80px 0;}
  #main section:not(.visual):before {content:''; display:inline-block; width:1px; height:100%; background:#e6e8ec; position:absolute; left:3%; top:0;}
  #main section .sectit {text-align:left;}
  #main section .sectit .t01 {margin-bottom:0; transform:rotate(90deg); transform-origin:bottom left; display:inline-block; position:absolute; left:0; top:-20px; line-height:20px;}
  #main section .sectit .t02 {font-size:2em; padding-left:60px;}
  #main section .sectit .t03 {padding-left:60px;}
  #main section .btns {padding-left:60px; gap:20px;}
  #main section .btns a {padding:0 20px;}
}

@media all and (min-width:1200px) {
  #main section:not(.visual):before {left:max(20px, calc(50% - 700px));}
  #main section .sectit {margin-bottom:60px;}
  #main section .sectit .t02 {font-size:2.5em; padding-left:80px;}
  #main section .sectit .t03 {font-size:1.25em; position:absolute; right:0; top:calc(50% - 30px); display:flex; align-items:center; justify-content:flex-end;  max-width:50%; height:60px; margin:0; text-align:right; padding-left:0;}
  #main section .btns {padding-left:calc(50% + 60px);}
}


/*제품소개*/
section.sec01 .arr {display:none;}
section.sec01 ul dl {display:flex; flex-wrap:wrap; align-items:stretch; border:1px solid var(--border); border-radius:16px; padding:20px; gap:20px 0;}
section.sec01 ul dt {width:100%; position:relative; line-height:1.2; padding:0 70px 0 0;}
section.sec01 ul dt em {color:var(--col01); font-weight:600; text-transform:capitalize; font-size:0.9em;}
section.sec01 ul dt h5 {font-size:1.35em; font-weight:700; margin:10px 0 0;}
section.sec01 ul dt a {display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; background:var(--col01); width:50px; height:50px; border-radius:100%; font-size:1.1em; position:absolute; right:0; bottom:calc(50% - 25px);}
section.sec01 ul dt a:after {content:'keyboard_double_arrow_right'; font-family:var(--ic); transition:0.3s;}
section.sec01 ul dt a:hover:after {transform:translateX(5px);}
section.sec01 ul dd {width:100%; border-radius:16px; overflow:hidden;}
section.sec01 ul dd img {object-fit:cover; width:100%; height:100%;}
section.sec01 .slick-dots {display:flex; gap:0 10px; align-items:center; justify-content:center; margin:20px 0 0;}
section.sec01 .slick-dots li {cursor:pointer;}
section.sec01 .slick-dots li:before {content:''; display:inline-block; width:10px; height:10px; background:#40404066; border-radius:100%;}
section.sec01 .slick-dots .slick-active:before {background:var(--col01);}
section.sec01 .slick-dots li span {display:none;}
section.sec01 .btn {margin:20px 0 0; display:flex; flex-wrap:wrap; gap:20px 40px;}
section.sec01 .btn a {width:100%; background:#3D3D40; color:#fff; padding:20px; display:flex; align-items:center; border-radius:16px; gap:0 20px;}
section.sec01 .btn a em {color:var(--col02); font-weight:600; text-transform:uppercase; font-size:0.9em; display:block;}
section.sec01 .btn a h5 {font-weight:700; font-size:1.25em; margin:5px 0;}
section.sec01 .btn a p {font-size:0.9em; opacity:0.8;}
section.sec01 .btn a img {margin-left:auto; width:40px; transition:0.6s;}
section.sec01 .btn a:hover img {transform:rotateY(360deg);}

@media all and (min-width:768px) {
  section.sec01 .arr {display:flex; gap:0 10px; position:absolute; right:0; top:calc(50% - 20px);}
  section.sec01 .arr span {display:flex; align-items:center; justify-content:center; color:#fff; background:#cececf; border-radius:100%; width:40px; height:40px; cursor:pointer; transition:background-color 0.3s;}
  section.sec01 .arr span:hover {background:#3D3D40;}
  section.sec01 .arr span:after {font-family:var(--ic);}
  section.sec01 .arr span.prev:after {content:'keyboard_arrow_up';}
  section.sec01 .arr span.next:after {content:'keyboard_arrow_down';}
  section.sec01 .product {display:flex; align-items:center; flex-direction:row-reverse; padding-left:60px;}
  section.sec01 .product #product {width:70%;}
  section.sec01 ul dl {height:280px;}
  section.sec01 ul dt {width:50%; padding:20px;}
  section.sec01 ul dt em {font-size:1em;}
  section.sec01 ul dt h5 {font-size:1.5em;}
  section.sec01 ul dt a {right:unset; left:20px; bottom:20px;}
  section.sec01 ul dd {width:50%;}
  section.sec01 .dots {width:30%;}
  section.sec01 .slick-dots {margin:0; flex-wrap:wrap;}
  section.sec01 .slick-dots li {width:100%; height:50px; display:flex; align-items:center; gap:0 20px;}
  section.sec01 .slick-dots li:before {width:20px; height:20px; border:6px solid #fff; box-sizing:border-box; transition:0.3s;}
  section.sec01 .slick-dots .slick-active:before {background:#fff; border-color:var(--col01);}
  section.sec01 .slick-dots li span {display:block; color:#40404066; font-weight:600;}
  section.sec01 .slick-dots .slick-active span {color:unset;}
  section.sec01 .btn {margin:60px 0 0; padding-left:60px; flex-wrap:nowrap;}
  section.sec01 .btn a {width:unset; flex:1; height:180px;}
  section.sec01 .btn a h5 {font-size:1.5em;}
  section.sec01 .btn a p {font-size:1em;}
}

@media all and (min-width:1200px) {
  section.sec01 .product {padding-left:80px;}
  section.sec01 .product #product {width:75%;}
  section.sec01 ul dl {height:360px;}
  section.sec01 ul dt {padding:30px 20px;}
  section.sec01 ul dt h5 {font-size:2em; margin:15px 0 0;}
  section.sec01 ul dt a {width:60px; height:60px;}
  section.sec01 .dots {width:25%;}
  section.sec01 .slick-dots li span {font-size:1.1em;}
  section.sec01 .btn {padding-left:80px;}
  section.sec01 .btn a {padding:20px 40px;}
  section.sec01 .btn a em {width:100px; vertical-align:text-bottom; display:inline-block;}
  section.sec01 .btn a h5 {font-size:1.75em; margin:0; display:inline-block;}
  section.sec01 .btn a p {margin:15px 0 0 100px;}
  section.sec01 .btn a img {width:50px;}
}


section.sec02 {background:url('../img/main/sec02_bg.jpg') no-repeat center center / cover;}
section.sec02 .sectit {color:#fff;}
section.sec02 .sectit .t01 {color:#fff !important;}
section.sec02:before {background:#ffffff26 !important;}


section.sec03 .tab {display:flex; gap:0 10px; position:relative; margin:0 0 20px;}
section.sec03 .tablinks {cursor:pointer; font-weight:700; font-size:1.25em; opacity:0.4;}
section.sec03 .tablinks.on {opacity:1;}
section.sec03 .tablinks + .control {display:none;}
section.sec03 .tablinks.on + .control {display:flex;}
section.sec03 .control {gap:0 6px; position:absolute; right:0; top:calc(50% - 15px);}
section.sec03 .control span,
section.sec03 .control a {display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:100%; background:#3D3D4040; color:#fff; transition:0.3s; cursor:pointer;}
section.sec03 .control span:hover,
section.sec03 .control a:hover {background:#3D3D40;}
section.sec03 .control span:after,
section.sec03 .control a:after {font-family:var(--ic);}
section.sec03 .control .prev:after {content:'chevron_left';}
section.sec03 .control .next:after {content:'chevron_right';}
section.sec03 .control a:after {content:'add';}
section.sec03 .tabcontent {margin:0 -10px;}
section.sec03 .tabcontent a {margin:20px 10px; background:#fff; border-radius:16px; padding:20px; -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.08); -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.08); box-shadow:0 0 10px 0 rgba(0,0,0,0.08); display:flex; flex-wrap:wrap; align-items:center; gap:10px 0;}
section.sec03 .tabcontent a h5 {width:100%; font-weight:700; font-size:1.1em; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; word-break:break-all;}
section.sec03 .tabcontent a p {width:100%; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; word-break:break-all; color:#666;}
section.sec03 .tabcontent a > span {width:50%;}
section.sec03 .tabcontent a .cat {font-weight:600; color:var(--col01);}
section.sec03 .tabcontent a .date {color:#aaa; font-size:0.9em; text-align:right;}
section.sec03 .bbs .btn {display:flex; flex-wrap:wrap; gap:20px; margin:20px 0 0;}
section.sec03 .bbs .btn a {display:flex; align-items:center; justify-content:space-between; width:calc(50% - 10px); height:60px; border-bottom:2px solid var(--col04); padding:0 10px; font-weight:700;}
section.sec03 .bbs .btn a:after {content:'arrow_outward'; font-family:var(--ic); transition:0.3s;}
section.sec03 .bbs .btn a:hover:after {transform:rotate(45deg);}
section.sec03 .cs {margin:40px 0 0; border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; align-items:center; flex-wrap:wrap;}
section.sec03 .cs > * {width:100%;}
section.sec03 .cs h3 {font-size:1.25em; font-weight:700;}
section.sec03 .cs ul {margin:20px 0;}
section.sec03 .cs li:not(:last-child) {border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:10px;}
section.sec03 .cs li .t01 {font-weight:600; line-height:1.2;}
section.sec03 .cs li .t02 {font-weight:700; color:var(--col01); font-size:1.25em;}
section.sec03 .cs a {background:var(--col01); color:#fff; display:flex; align-items:center; justify-content:center; height:50px;  padding:0 20px; border-radius:8px; text-align:center; font-weight:600; transition:0.3s;}
section.sec03 .cs a:hover {transform:translateY(-5px);}

@media all and (min-width:768px) {
  section.sec03 .bbs {padding-left:60px;}
  section.sec03 .tab {gap:0 30px;}
  section.sec03 .control {gap:0 10px;}
  section.sec03 .tabcontent a h5 {font-size:1.25em;}
  section.sec03 .bbs .btn {flex-wrap:nowrap; width:unset; flex:1;}
  section.sec03 .bbs .btn a {height:80px; font-size:1.1em;}
  section.sec03 .cs {padding:30px; margin-left:60px;}
  section.sec03 .cs h3 {font-size:1.5em;}
  section.sec03 .cs li {display:flex; align-items:center; justify-content:space-between;}
}

@media all and (min-width:1200px) {
  section.sec03 > .pdinner {display:flex; flex-wrap:wrap;}
  section.sec03 .sectit {width:100%;}
  section.sec03 .bbs {width:min(75%, 1020px); padding-left:80px;}
  section.sec03 .tablinks {font-size:1.5em;}
  section.sec03 .tabcontent a {height:280px; padding:30px;}
  section.sec03 .tabcontent a h5 {margin:0;}
  section.sec03 .tabcontent a p {margin:0 0 auto;}
  section.sec03 .tabcontent a > span {margin:0;}
  section.sec03 .cs {width:max(calc(25% - 60px), calc(100% - 1080px)); margin-top:0;}
  section.sec03 .cs li {display:block;}
  section.sec03 .cs li .t02 {font-size:1.5em;}
}


section.sec04 {background:url('../img/main/sec04_bg.jpg') no-repeat center center / cover;}
section.sec04 .sectit {color:#fff;}
section.sec04 .sectit .t01 {color:var(--col02) !important;}
section.sec04:before {background:#ffffff26 !important;}


/*footer*/
#footer {background:#2A2A2C; color:#fff; padding:40px 0;}
#footer ul.bottom_li {display:flex; justify-content:flex-start; align-items:center; gap:0 20px; margin:0 0 40px;}
#footer ul.bottom_li li a {color:#fff; font-weight:600;}
#footer .info {display:flex; flex-wrap:wrap; flex-direction:column; gap:20px;}
#footer .info ul li:nth-child(1) {font-weight:700; margin:0 0 10px;}
#footer .info ul li {width:100%; display:flex; width:100%;}
#footer .info ul li b {font-weight:600; width:2.5em;}
#footer p {font-size:0.9em; opacity:0.6; margin:40px 0 0;}
#pageup {position:fixed; z-index:999; right:min(3%, 20px); bottom:40px; width:60px; height:60px; background:var(--col02); display:none; cursor:pointer; border-radius:100%;}
#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:560px) {
  #footer .info {flex-direction:row;}
  #footer .info ul {width:calc(50% - 10px);}
}

@media all and (min-width:768px) {
	#footer {padding:60px 0;}
  #footer ul.bottom_li {position:relative;}
  #footer ul.bottom_li:after {content:''; display:inline-block; width:120px; height:30px; background:url('../img/logo_w.png') no-repeat center center / 100%; opacity:0.8; position:absolute; right:0; top:calc(50% - 15px);}
  #footer .info {flex-wrap:nowrap; justify-content:flex-start; gap:0 40px;}
  #footer .info ul {width:unset;}
  #pageup {bottom:60px;}
}

@media all and (min-width:1200px) {
  #footer ul.bottom_li:after {width:160px; height:40px; top:calc(50% - 20px);}
  #footer .info {gap:0 60px;}
  #footer p {margin:60px 0 0;}
}


/* Common Layout CSS _ 15.05.18 */
.wrap {max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative;}
.inner {max-width:1440px; width:100%; position:relative; margin: 0 auto;}
.pdinner {max-width:1440px; 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%;}
	.pdinner {padding:0 3%;}
}

@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; padding-left:10px; position:relative;}
.dot_li li:before {content:'\00B7'; position:absolute; left:0; top:0;}
.img_li {display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; gap:20px 2%;}
.img_li li {width:49%; text-align:center;;}
.img_li li img {width:100%; border-radius:8px; border:1px solid var(--border);}
.img_li li p {padding-top:10px; font-weight:600; font-size:0.9em;}
.tit_dot {font-size:1.4em; padding-left:30px; background:url('../img/tit_dot.png') no-repeat left center; font-weight:700;}

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

@media all and (min-width:1200px) {
	.img_li.col04 li {width:23.5%;}
}


/* 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(105%);}
  to {-webkit-transform:scale(100%);}
}
@keyframes visbg {
  from {transform:scale(105%);}
  to {transform:scale(100%);}
}
@-webkit-keyframes anim01 {
	0% {opacity:0; -webkit-transform:translateY(30px);}
	100% {-webkit-transform:translateY(0); opacity:1;}
}
@keyframes anim01 {
	0% {opacity:0; transform:translateY(30px);}
	100% {transform:translateY(0); opacity:1;}
}
@-webkit-keyframes scroll {
	0% {-webkit-transform:translateY(0);}
	30% {-webkit-transform:translateY(5px);}
	100% {-webkit-transform:translateY(0);}
}
@keyframes scroll {
	0% {transform:translateY(0);}
	30% {transform:translateY(5px);}
	100% {transform:translateY(0);}
}


/* 서브레이아웃 */
#sub_vis {position:relative; padding:110px 0 50px; background:var(--col04) no-repeat center center / cover; color:#fff; text-align:center; color:#fff;}
#sub_vis h3 {font-size:1.1em; font-weight:600;}
#sub_vis h2 {font-size:1.75em; font-weight:700;}
#sub_vis .ref {position:absolute; right:10px; bottom:10px; font-size:min(0.8em, 14px); opacity:0.8;}

@media all and (min-width:768px) {
	#sub_vis {padding:140px 0 80px;}
	#sub_vis h3 {font-size:1.25em;}
	#sub_vis h2 {font-size:2.5em;}
}

@media all and (min-width:1200px) {
	#sub_vis {padding:160px 0 80px;}
	#sub_vis h2 {font-size:2.75em;}
}


#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:60px 0 80px; overflow:hidden;}
.subwrap {margin:0 auto;}
.sub_tit {font-size:1.5em; font-weight:700; margin:0 0 30px;}

@media all and (min-width:768px) {
	.sub_tit {font-size:2em; margin:0 0 40px;}
}

@media all and (min-width:1200px) {
  #sub {min-height:650px; padding:80px 0 100px;}
  .sub_tit {font-size:2.5em;}
}


/*서브메뉴 - 공통 */
.menu_wrap {height:50px;}
.menu_wrap .inner {background:#fff;}

@media all and (min-width:768px) {
  .menu_wrap {height:60px;}
}

@media all and (min-width:1200px) {
}


/*서브메뉴*/
#sub_drop {display:flex; width:100%; z-index:100; height:50px; border-bottom:2px solid var(--col04); margin:20px 0 0;}
#sub_drop .dropdown.home {width:30px; height:100%; overflow:hidden;}
#sub_drop .dropdown.home a {display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:1.1em;}
#sub_drop .dropdown.home a:after {content:"home"; font-family:var(--ic); -webkit-font-feature-settings:'liga';font-variation-settings:'FILL' 1;}
#sub_drop .dropdown {position:relative; z-index:101; height:50px;}
#sub_drop .dropdown.deph01 {width:calc(50% - 30px); max-width:200px;}
#sub_drop .dropdown.deph02 {width:50%; max-width:240px;}
#sub_drop .dropbtn {width:100%; display:inline-block; position:relative; padding:0 2em 0 1em; cursor:pointer;  text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; height:50px; line-height:50px; font-weight:600;}
#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; border-radius:0 0 16px 16px; background:#fff; border:1px solid var(--border); border-top:0; box-sizing:border-box;}
#sub_drop .dropdown ul {margin:10px 0;}
#sub_drop .dropdown ul li a {display:block; font-weight:600; padding:5px 20px; transition:0.3s;}
#sub_drop .dropdown ul li:hover a {color:var(--col01);}
#sub_drop .dropmenu {display:none; box-sizing:content-box; width:100%; overflow:hidden;}

@media all and (min-width:768px) {
  #sub_drop {height:60px;}
  #sub_drop .dropdown {height:60px;}
  #sub_drop .dropbtn {height:60px; line-height:60px;}
  #sub_drop .dropdown .show {top:60px;}
}