@charset "utf-8";

:root {
  --col01:#232d8e;
  --col02:#c32727;
  --col03:#231815;
  --border:#e0e0e0;
  --ic:'Material Symbols Outlined';
}

/* main */
.section {overflow:hidden;}
.section .tit {text-align:center;}
.section .tit h3 {font-size:2.25em; font-weight:700;}
.section .tit h4 {font-weight:600;}
.section .pager {display:none; flex-wrap:wrap; align-items:center; justify-content:center; width:10px; height:130px; position:absolute; left:30px; top:calc(50% - 65px); z-index:999;}
.section .pager a {display:inline-block; width:10px; height:10px; border-radius:100%; background:#fff; opacity:0.3;}
.section .pager a.active {opacity:1;}
body.fp-viewing-1st .section .pager a {background:var(--col03);}

@media all and (min-width:768px) {
  .section .tit h3 {font-size:3em;}
  .section .tit h4 {font-size:1.35em;}
  .section .tit p {font-size:1.1em;}
}

@media all and (min-width:1200px) {
  .section .tit h3 {font-size:3.25em;}
  .section .tit h4 {font-size:1.45em;}
  .section .tit p {font-size:1.5em;}
}

@media all and (min-width:1600px) {
  .section .pager {display:flex;}
}


#secmain .visual {width:100vw; height:100%; position:relative; z-index:0;}
#secmain .visual dd {transition:0.2s; height:100vh; min-height:480px;}
#secmain .visual dd:after {content:''; display:inline-block; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.4); background:linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.0) 100%);}
#secmain .visual dd div.bg {display:inline-block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-size:cover;}
#secmain .visual dd div.txt {position:relative; z-index:10; display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; height:100%; padding:0 max(calc(50% - 760px), 50px) 50px;}
#secmain .visual dd div.txt p {color:transparent; line-height:1.1; font-weight:400; transition:0.3s; font-size:2em; width:100%; margin:auto 0 1em;}
#secmain .visual dd div.txt p b {font-weight:800;}
#secmain .visual dd div.txt a {border:2px solid #fff; display:inline-block; padding:10px 20px; color:#fff; margin:0 0 auto; transition:0.3s;}
#secmain .visual dd div.txt a:after {content:'north_east'; font-family:var(--ic); -webkit-font-feature-settings:'liga'; font-variation-settings:'wght' 500; margin-left:1em; font-size:1.1em; vertical-align:middle;}
#secmain .visual dd div.txt a:hover {background:#fff; color:var(--col03);}
#secmain .visual dd.slick-active div.bg {animation:visbg 4s ease-in-out infinite alternate; -webkit-animation:visbg 4s ease-in-out infinite alternate; animation-iteration-count:1;}
#secmain .visual dd.slick-active div.txt p {animation:anim02 6s ease-out infinite; -webkit-animation:anim02 6s ease-out infinite;}
#secmain .control {display:flex; align-items:center; position:absolute; left:max(calc(50% - 760px), 50px); bottom:100px;}
#secmain .control .dots {color:#fff; text-align:center; font-weight:500; width:100px;}
#secmain .control .dots li:not(.slick-active) {display:none;}
#secmain .control .dots li span {font-weight:700;}
#secmain .control .dots li span:after {content:'/'; margin:0 0.5em; font-weight:300;}
#secmain .control .prev:after,
#secmain .control .next:after {font-family:var(--ic); -webkit-font-feature-settings:'liga'; font-variation-settings:'wght' 300; color:#fff; cursor:pointer;}
#secmain .control .prev:after {content:'arrow_back_ios';}
#secmain .control .next:after {content:'arrow_forward_ios';}
#secmain .scroll {display:flex; align-items:center; position:absolute; right:max(calc(50% - 760px), 50px); bottom:100px; color:#fff; font-size:0.8em;}
#secmain .scroll:after {content:'mouse'; font-family:var(--ic); -webkit-font-feature-settings:'liga'; font-variation-settings:'wght' 300; font-size:1.5em; margin-left:0.5em; animation:scroll 3s infinite alternate; -webkit-animation:scroll 3s infinite alternate;}

@media all and (min-width:768px) {
  #secmain .visual dd {min-height:720px;}
  #secmain .visual dd div.txt p {font-size:2.5em;}
}

@media all and (min-width:1200px) {
  #secmain .visual dd div.txt p {font-size:3.75em;}
}


#sec01 {background:#F7F7F7;}
#sec01 .wrap {padding:80px 0 40px;}
#sec01 .tit {position:relative;}
#sec01 .control {display:flex; align-items:center; justify-content:center; gap:0 10px; margin:40px 0 0;}
#sec01 .control span {display:flex; align-items:center; justify-content:center; color:var(--col03); border:1px solid var(--col03); border-radius:100%; width:50px; height:50px; cursor:pointer;}
#sec01 .control span:after {font-family:var(--ic); -webkit-font-feature-settings:'liga'; font-variation-settings:'wght' 300; font-size:1.5em;}
#sec01 .control .prev:after {content:'arrow_left_alt';}
#sec01 .control .next:after {content:'arrow_right_alt';}
#sec01 .product .slick-track {display:flex !important;}
#sec01 .product .slick-slide {margin:0 20px 40px; height:inherit !important;}
#sec01 .product .slick-list {margin:0 -20px;}
#sec01 .product .box {background:#fff; padding:20px; height:100%; display:flex; flex-wrap:wrap; transition:0.3s; box-shadow:0 10px 20px 0 rgba(0,0,0,0.1); -webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 10px 20px 0 rgba(0,0,0,0.1);}
#sec01 .product .img {width:100%; text-align:center;}
#sec01 .product .img img {width:100%; max-width:320px; margin:0 auto !important;}
#sec01 .product .txt {width:100%; margin:20px 0 0;}
#sec01 .product .txt h5 {font-weight:700; font-size:1.1em; line-height:1.25; display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;}
#sec01 .product .txt p {color:#999; font-size:0.9em; margin:10px 0 0; display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;}
#sec01 .product .box:hover {flex-direction:column-reverse; background:var(--col01) url('../img/main/pr_bg.png') no-repeat center bottom / 100%;}
#sec01 .product .box:hover .txt {margin:0 0 auto;}
#sec01 .product .box:hover .txt h5,
#sec01 .product .box:hover .txt p {color:#fff;}
#sec01 .product .box:hover .txt p {opacity:0.6;}

@media all and (min-width:768px) {
  #sec01 .control {margin:0; position:absolute; right:0; bottom:10px;}
  #sec01 .control span {width:60px; height:60px;}
}

@media all and (min-width:1200px) {
  #sec01 .wrap {padding:120px 0 80px;}
  #sec01 .product .box {padding:30px 40px;}
  #sec01 .product .txt h5 {font-size:1.5em;}
  #sec01 .product .txt p {font-size:1em;}
}


#sec02 {background:url('../img/main/eq_bg.jpg') no-repeat center center / cover;}
#sec02 .wrap {display:flex; flex-wrap:wrap; height:100%;}
#sec02 .tit {background:url('../img/main/eq_bg.png') no-repeat right center / auto 100%; width:100%; height:240px; border-top:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center;}
#sec02 .tit h3,
#sec02 .tit h4 {color:#fff;}
#sec02 .links {color:#fff; width:100%; height:calc(100% - 240px); text-align:center; border-top:1px solid rgba(255,255,255,0.1);}
#sec02 .links > div {display:flex; flex-wrap:wrap; align-items:stretch; height:100%;}
#sec02 .links > div a {width:50%; padding:20px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(255,255,255,0.1); transition:0.3s;}
#sec02 .links > div a:hover {background:rgba(195,39,39,0.5); background:linear-gradient(0deg, rgba(195,39,39,0) 0%, rgba(195,39,39,1) 100%);}
#sec02 .links > div a:nth-child(1),
#sec02 .links > div a:nth-child(3) {border-right:1px solid rgba(255,255,255,0.1);}
#sec02 .links > div img {width:60px; margin:0 0 20px;}
#sec02 .links > div p {font-size:1.1em; font-weight:700;}
#sec02 .links > div .arr {display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,0.1); border-radius:100%; width:50px; height:50px; cursor:pointer; margin:20px auto 0; transition:0.3s;}
#sec02 .links > div .arr:after {content:'arrow_right_alt'; font-family:var(--ic); -webkit-font-feature-settings:'liga'; font-variation-settings:'wght' 300; font-size:1.5em;}
#sec02 .links > div a:hover .arr {background:#fff;}
#sec02 .links > div a:hover .arr:after {color:var(--col03);}

@media all and (min-width:768px) {
  #sec02 .tit {height:45%;}
  #sec02 .links {height:55%;}
  #sec02 .links > div a {flex:1; border-bottom:0;}
  #sec02 .links > div a:nth-child(2) {border-right:1px solid rgba(255,255,255,0.1);}
  #sec02 .links > div p {font-size:1.25em;}
}

@media all and (min-width:1200px) {
  #sec02 .wrap {min-height:720px;}
  #sec02 .tit {margin:100px 0 0; height:calc(45% - 100px);}
  #sec02 .links > div img {width:100px; margin:0 0 40px;}
  #sec02 .links > div p {font-size:1.5em;}
  #sec02 .links > div .arr {margin-top:40px;}
}

@media all and (min-width:1600px) {
  #sec02 .links > div a {border-right:1px solid rgba(255,255,255,0.1);}
  #sec02 .links > div a:nth-child(1) {border-left:1px solid rgba(255,255,255,0.1);}
}


#sec03 .wrap {display:flex; flex-wrap:wrap; height:100%;}
#sec03 .tit {background:url('../img/main/sf_bg.jpg') no-repeat center center / cover; color:#fff; padding:80px 0 60px; width:100%; display:flex; align-items:flex-end;}
#sec03 .btns {margin:40px 0 0; display:flex; align-items:center; justify-content:center; gap:0 20px;}
#sec03 .btns a {border:2px solid #fff; display:flex; align-items:center; justify-content:space-between; padding:10px 20px; color:#fff; margin:0 0 auto; transition:0.3s; width:40%;}
#sec03 .btns a:after {content:'north_east'; font-family:var(--ic); -webkit-font-feature-settings:'liga'; font-variation-settings:'wght' 500; margin-left:1em; font-size:1.1em; vertical-align:middle;}
#sec03 .btns a:hover {background:#fff; color:var(--col03);}
#sec03 .links {width:100%; padding:60px 0 80px;}
#sec03 .links .pdinner {display:flex; flex-wrap:wrap; gap:20px 2%; align-items:center;}
#sec03 .links .pdinner a {width:49%; border:1px solid var(--border); padding:20px; display:flex; align-items:center; justify-content:space-between; font-weight:700;}
#sec03 .links .pdinner a img {width:40px; margin-left:1em; transition:0.3s;}
#sec03 .links .pdinner a:hover img {transform:scale(1.1);}

@media all and (min-width:768px) {
  #sec03 .tit {text-align:left; height:62.5%;}
  #sec03 .tit > .pdinner {display:flex; align-items:flex-end; justify-content:space-between;}
  #sec03 .btns {margin:0; gap:0 30px; width:40%; max-width:430px;}
  #sec03 .btns a {flex:1;}
  #sec03 .links {height:37.5%;}
  #sec03 .links .pdinner a {width:32%;}
  #sec03 .links .pdinner a img {width:60px;}
}

@media all and (min-width:1200px) {
  #sec03 .tit {padding:120px 0 80px;}
  #sec03 .links {padding:80px 0 120px;}
  #sec03 .links .pdinner a {flex:1; font-size:1.1em;}
}

@media all and (min-width:1600px) {
  #sec03 .links .pdinner a img {width:80px;}
}


#sec04 {background:url('../img/main/news_bg.jpg') no-repeat center center / cover;}
#sec04 .wrap {padding:80px 0 40px;}
#sec04 .tit {color:#fff;}
#sec04 .control {display:flex; align-items:center; justify-content:center; gap:0 10px; margin:40px 0 0;}
#sec04 .control span {display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid #fff; border-radius:100%; width:50px; height:50px; cursor:pointer;}
#sec04 .control span:after {font-family:var(--ic); -webkit-font-feature-settings:'liga'; font-variation-settings:'wght' 300; font-size:1.5em;}
#sec04 .control .prev:after {content:'arrow_left_alt';}
#sec04 .control .next:after {content:'arrow_right_alt';}
#sec04 .news .slick-track {display:flex !important;}
#sec04 .news .slick-slide {margin:0 10px 40px; height:inherit !important;}
#sec04 .news .slick-list {margin:0 -10px;}
#sec04 .news .box {background:#fff; padding:20px; height:100%; display:flex; flex-wrap:wrap; transition:0.3s; box-shadow:0 10px 20px 0 rgba(0,0,0,0.1); -webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 10px 20px 0 rgba(0,0,0,0.1);}
#sec04 .news .box .img {margin:0 0 20px; overflow:hidden;}
#sec04 .news .box .img img {transition:0.3s;}
#sec04 .news .box:hover .img img {transform:scale(1.1);}
#sec04 .news .box .cat {font-size:0.9em; font-weight:700; color:var(--col02); margin:0 0 10px; text-transform:uppercase;}
#sec04 .news .box .title {font-size:1.1em; font-weight:700; line-height:1.25; height:2.5em; display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; margin:0 0 20px; word-break:break-all;}
#sec04 .news .box .date {font-size:0.9em; color:#999;}
#sec04 .news .none {display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,0.1); text-align:center; padding:20px;}

@media all and (min-width:960px) {
  #sec04 .news .slick-slide {margin:0 20px 40px;}
  #sec04 .news .slick-list {margin:0 -20px;}
  #sec04 .wrap .pdinner {display:flex;}
  #sec04 .tit {text-align:left; width:25%;}
  #sec04 .tit .pEnter {display:block;}
  #sec04 .control {justify-content:flex-start;}
  #sec04 .news {width:75%;}
  #sec04 .news .box .cat {font-size:1em;}
  #sec04 .news .box .title {font-size:1.25em;}
  #sec04 .news .box .date {font-size:1em;}
  #sec04 .news .none {min-height:250px;}
}

@media all and (min-width:1200px) {
  #sec04 .wrap {padding:120px 0 80px;}
  #sec04 .news .box {padding:30px;}
  #sec04 .news .box .img {margin:0 0 30px;}
  #sec04 .news .box .title {font-size:1.5em;}
}

@media all and (min-width:1600px) {
  #sec04 .wrap .pdinner {padding-right:0; max-width:calc(780px + 50%); margin:0 0 0 auto;}
  #sec04 .tit {flex-shrink:0;}
  #sec04 .news {width:1480px; flex-shrink:0;}
}


/*footer*/
#footer {background:#fff; font-size:0.9em; text-align:left; padding:40px 0;}
body:not(.mainWrap) #footer {border-top:1px solid var(--border);}
#footer .left {margin:0 0 40px;}
#footer .left p {margin:0 0 20px;}
#footer .left dl {display:flex; flex-wrap:wrap; gap:5px 1em;}
#footer .left dt {width:4em; font-weight:700;}
#footer .left dd {width:calc(100% - 5em);}
#footer .right .logo {display:none; transition:0.3s;}
#footer .right ul {display:flex; align-items:center; justify-content:flex-start; margin:0 0 20px;}
#footer .right li {display:flex; align-items:center; font-weight:700;}
#footer .right li:not(:last-child):after {content:''; display:inline-block; width:1px; height:0.8em; background:var(--border); margin:0 10px;}
#footer .right .copy {color:#999;}
#pageup {position:fixed; z-index:999; right:10px; bottom:10px; 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:768px) {
  #footer {padding:60px;}
  #footer .pdinner {display:flex; justify-content:space-between;}
  #footer .right {text-align:right;}
  #footer .right .logo {display:inline-block; width:120px; margin:0 0 60px;}
  #footer .right ul {justify-content:flex-end;}
}

@media all and (min-width:1200px) {
  #footer {padding:80px;}
  #footer .right .logo {width:180px; margin:0 0 80px;}
}


/* Common Layout CSS _ 15.05.18 */
.wrap {max-width:2000px; min-width:320px; width:100%; margin:0 auto; position:relative;}
.inner {max-width:1560px; width:100%; position:relative; margin:0 auto;}
.pdinner {max-width:1560px; 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; 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:20px 2%;}
.img_li li {width:49%; text-align:center;}
.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 li {width:23.5%;}
  .img_li.type01 li {width:18.4%;}
}


/* 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(120%);}
  to {-webkit-transform:scale(100%);}
}
@keyframes visbg {
  from {transform:scale(120%);}
  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;}
}
@keyframes anim02 {
	0% {text-shadow:0 0 100px #fff; opacity:0;}
	5% {text-shadow:0 0 90px #fff;}
	30%,
  100% {text-shadow:0 0 0px #fff; opacity:1;}
}
@-webkit-keyframes anim02 {
	0% {text-shadow:0 0 100px #fff; opacity:0;}
	5% {text-shadow:0 0 90px #fff;}
	30%,
  100% {text-shadow:0 0 0px #fff; opacity:1;}
}
@-webkit-keyframes scroll {
	0% {-webkit-transform:translateY(-10px);}
	30% {-webkit-transform:translateY(10px);}
	100% {-webkit-transform:translateY(-10px);}
}
@keyframes scroll {
	0% {-webkit-transform:translateY(-10px);}
	30% {-webkit-transform:translateY(10px);}
	100% {-webkit-transform:translateY(-10px);}
}


/* 서브레이아웃 */
#sub_vis {position:relative; padding:100px 0 0; background:#222 no-repeat center center / cover; color:#fff;}
#sub_vis h2 {font-size:1.5em; color:#fff; font-weight:700; margin:0 0 30px;}
#sub_vis h2::first-letter {border-bottom:2px solid #fff;}

@media all and (min-width:768px) {
	#sub_vis {padding:120px 0 0;}
	#sub_vis h2 {font-size:2em; margin:0 0 40px;}
}

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


#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:40px 0 80px; overflow:hidden;}
.sub_con.pb0 {padding-bottom:0 !important;}
.subwrap {margin:0 auto;}
.sub_tit {display:inline-block; font-size:1.5em; font-weight:700; margin:0 0 40px; background:url('../img/tit_deco.svg') no-repeat right top / auto 0.4em; padding-top:0.2em;}

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

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


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

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


/*서브메뉴 - type01 */
#sub_drop {display:flex; width:100%; z-index:100; height:50px;}
#sub_drop .dropdown:not(:last-child) {position:relative;}
#sub_drop .dropdown:not(:last-child):after {content:''; display:inline-block; width:1px; height:20px; background:rgba(255,255,255,0.4); position:absolute; right:0; top:calc(50% - 10px);}
#sub_drop .dropdown.home {width:50px; height:100%; overflow:hidden;}
#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); -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% - 50px); max-width:200px;}
#sub_drop .dropdown.deph02 {width:50%; max-width:280px;}
#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;}
#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 li {padding:10px;}
#sub_drop .dropdown ul li:hover {background:#f5f5f5;}
#sub_drop .dropdown ul li a {display:block; color:#444;}
#sub_drop .dropmenu {display:none; background:#fff; box-sizing:content-box; width:100%; overflow:hidden; border:1px solid var(--border); border-top:0;}

@media all and (min-width:768px) {
  #sub_drop {height:60px; border-bottom:0; justify-content:flex-end;}
  #sub_drop .dropdown.home {width:60px;}
  #sub_drop .dropdown {height:60px;}
  #sub_drop .dropbtn {height:60px; line-height:60px;}
  #sub_drop .dropdown .show {top:60px;}
}

/*서브메뉴 - type02 */
#submenu {display:flex;}
#submenu a.home {display:flex; align-items:center; justify-content:center; width:50px; height:50px; background:var(--col01);}
#submenu a.home:after {font-family:var(--ic); content:'home'; -webkit-font-feature-settings:'liga';}
#submenu a.arr {display:flex; width:calc(100% - 50px); line-height:50px; padding:0 2em 0 1em; background:rgba(255,255,255,0.6);}
#submenu a.arr:after {font-family:var(--ic); content:'keyboard_arrow_down'; -webkit-font-feature-settings:'liga'; position:absolute; right:1em; top:0; transition:0.2s;}
#submenu .list {display:none; position:absolute; left:50px; top:50px; width:calc(100% - 50px); background:#444; z-index:99;}
#submenu .list a {text-align:left; display:block; color:#fff; padding:0 10px; line-height:50px; cursor:pointer;}
#submenu .list a:hover {background:#333;}
#submenu .list a.on {display:none;}
#submenu.on .list {display:block;}
#submenu.on a.arr:after {-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}

@media screen and (min-width:960px) {
  #submenu a.home {width:60px; height:60px;}
  #submenu a.arr {display:none;}
  #submenu .list {display:flex; width:calc(100% - 60px); position:absolute; left:60px; top:0; border:0; padding:0; background:rgba(255,255,255,0.6);}
  #submenu .list a {line-height:60px; font-size:1.1em; font-weight:500; flex:1; text-align:center; color:#888; background:#fafafa;}
  #submenu .list a:hover {background:0;}
  #submenu .list a.on {display:block; color:var(--col01); background:#fff;}
}

@media screen and (min-width:1200px) {
  #submenu .list a {background:0;}
}