@charset "utf-8";

:root {
  --col01:#635242;
  --col02:#382F2D;
  --red:#ac0000;
  --border:#e9e7e7;
  --lbg:#F9F8F7;
  --ic:'Material Symbols Outlined';
}

/* main */
#main .main_wrap {overflow:hidden; background:var(--lbg);}
#main .visual {width:100%; position:relative; z-index:0;}
#main .visual_wrap {width:100%;}
#main .visual dd {height:400px; 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; text-align:center; display:flex; align-items:center; justify-content:center; height:100%;}
#main .visual dd div.txt p.t01 {font-size:2em; line-height:1.25; margin-bottom:20px;}
#main .visual dd.slick-active div.txt p.t02 {animation-delay:2s;}
#main .visual dd.slick-active div.bg {animation:visbg 1s ease-in-out infinite alternate; animation-iteration-count:1;}
#main .visual dd.slick-active div.txt p {animation-name:anim01; animation-duration:2s; animation-fill-mode:both; animation-delay:1s;}
#main .control {display:flex; align-items:center;}
#main .control .dots {position:absolute; left:0; bottom:40px; width:100%; text-align:center;}
#main .control .dots > ul {display:flex; align-items:center; justify-content:center; gap:0 14px;}
#main .control .dots li {display:inline-block; width:12px; height:12px; border-radius:100%; cursor:pointer; background:#fff; opacity:0.4; position:relative;}
#main .control .dots li.slick-active {opacity:1;}

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

@media all and (min-width:1200px) {
  #main .visual dd {height:720px;}
  #main .visual dd div.txt p.t01 {font-size:3.5em;}
  #main .visual dd div.txt p.t02 {font-size:1.25em;}
  #main .control .dots {bottom:80px;}
}


/*sec01*/
section.sec01 {display:flex; flex-wrap:wrap; align-items:stretch; position:relative; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05);}
section.sec01 > * {display:flex; align-items:center; height:70px; padding:0 20px; gap:20px;}
section.sec01 img {width:30px;}
section.sec01 p {font-weight:700; transition:0.3s;}
section.sec01 .tel {width:100%; background:#fff;}
section.sec01 .tel h5 {margin-left:auto; color:var(--col01); font-weight:700; font-size:1.75em; text-align:right;}
section.sec01 a {width:50%; color:#fff;}
section.sec01 a.btn01 {background:var(--col01);}
section.sec01 a.btn02 {background:var(--col02);}
section.sec01 a:hover p {transform:translateX(0.5em);}

@media all and (min-width:960px) {
  section.sec01 p {font-size:1.1em;}
  section.sec01 .tel {width:50%; height:100px;}
  section.sec01 .tel h5 {font-size:1.75em;}
  section.sec01 a {width:25%; height:100px;}
}

@media all and (min-width:1200px) {
  section.sec01 {border-radius:8px; overflow:hidden; margin:-50px auto 0; width:calc(100% - 40px); max-width:1440px;}
  section.sec01 > * {padding:0 40px;}
  section.sec01 img {width:35px;}
  section.sec01 p {font-size:1.25em;}
  section.sec01 .tel h5 {font-size:2.25em;}
}


/*sec02*/
section.sec02 {padding:40px 0 60px;}
section.sec02 .tit {display:flex; align-items:center; flex-wrap:wrap;}
section.sec02 .tit h5 {font-size:1.5em; font-weight:500; margin:0 0 10px; width:100%;}
section.sec02 .tit p {opacity:0.8; width:calc(100% - 150px);}
section.sec02 .tit .control {width:150px; display:flex; justify-content:flex-end; gap:5px;}
section.sec02 .tit .control span,
section.sec02 .tit .control a {background:#D7D1CA; display:flex; align-items:center; justify-content:center; border-radius:100%; color:#fff; font-weight:700; font-size:1.25em; width:40px; height:40px; transition:0.3s; cursor:pointer;}
section.sec02 .tit .control span:hover,
section.sec02 .tit .control a:hover {background:var(--col01);}
section.sec02 .tit .control span:after,
section.sec02 .tit .control a:after {font-family:var(--ic);}
section.sec02 .tit .control .prev:after {content:'chevron_left';}
section.sec02 .tit .control .next:after {content:'chevron_right';}
section.sec02 .tit .control a:after {content:'add';}
section.sec02 .list_wrap {margin:0 -5px;}
section.sec02 .list li {width:100%;}
section.sec02 .list li > div {margin:0 5px; border:1px solid #dedede; background:#fff; border-radius:8px; overflow:hidden;}
section.sec02 .list .name {display:flex; align-items:center; gap:0 10px; margin:0 20px; padding:20px 0; border-bottom:1px solid #dedede;}
section.sec02 .list .name img {width:30px;}
section.sec02 .list .name p {font-family:"Noto Serif KR", serif; letter-spacing:-0.05em; font-weight:600; font-size:1.25em;}
section.sec02 .list .info {padding:20px; display:flex; flex-wrap:wrap; gap:10px 0;}
section.sec02 .list .info dt {color:var(--col01); font-weight:700; opacity:0.9; width:60px;}
section.sec02 .list .info dd {width:calc(100% - 60px);}
section.sec02 .list li > div > a {display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; background:#D7D2CB; font-weight:700; height:50px; transition:0.3s;}
section.sec02 .list li > div > a:hover {background:var(--col01);}

@media all and (min-width:560px) {
  section.sec02 .list li {width:50%;}
}

@media all and (min-width:768px) {
  section.sec02 {padding:60px 0 80px;}
  section.sec02 .tit {gap:0 20px;}
  section.sec02 .tit h5 {font-size:1.75em; margin:0; width:fit-content;}
  section.sec02 .tit p {width:fit-content; margin-right:auto;}
  section.sec02 .list li {width:calc(50% - 10px);}
  section.sec02 .list .name {margin:0 30px; padding:30px 0; gap:0 15px;}
  section.sec02 .list .name img {width:40px;}
  section.sec02 .list .name p {font-size:1.5em;}
  section.sec02 .list .info {padding:30px;}
  section.sec02 .list li > div > a {height:60px;}
}

@media all and (min-width:960px) {
  section.sec02 .list li {width:33.33%;}
}

@media all and (min-width:1200px) {
  section.sec02 {padding:80px 0 100px;}
  section.sec02 .tit {gap:0 40px;}
  section.sec02 .tit h5 {font-size:2.25em;}
  section.sec02 .tit .control {gap:10px;}
  section.sec02 .list_wrap {margin:0 -10px;}
  section.sec02 .list li {width:25%;}
  section.sec02 .list li > div {margin:0 10px;}
}


/*footer*/
#footer {background:#3C3B3A; color:#fff; font-size:0.9em; text-align:center; padding:40px 0;}
#footer ul.bottom_li {display:flex; justify-content:center; align-items:center; gap:0 1em; margin:0 0 10px;}
#footer ul.bottom_li li a {color:#fff; font-weight:600;}
#footer ul.info {margin-bottom:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:0 10px;}
#footer ul.info li {width:fit-content;}
#footer ul.info li.type01 {width:100%;}
#footer ul.info li b {font-weight:700; margin:0 0.2em 0 0;}
#footer p {font-size:0.9em; margin-top:10px;}
#pageup {position:fixed; z-index:999; right:10px; bottom:10px; width:50px; height:50px; border-radius:100%; background:var(--col01); 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; gap:0 2em; margin:0 0 20px;}
  #footer ul.info {justify-content:flex-start; margin-bottom:20px;}
	#footer ul.info li {margin:0 1em 0 0;}
}

@media all and (min-width:1200px) {
  #footer .pdinner {background:url('../img/logo_f.png') no-repeat calc(100% - 30px) top / min(20%, 300px);}
}


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

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


.dot_li {display:flex; flex-wrap:wrap; gap:10px;}
.dot_li li {width:100%; line-height:1.6em; text-align:left; 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;}
.dot_li li:not(:last-child) {margin-bottom:5px;}
.img_li {display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 2%;}
.img_li li {width:49%; text-align:center;}
.tit_dot {font-size:1.35em; padding-left:30px; background:url('../img/tit_dot.svg') no-repeat left center / 22px; font-weight:700;}

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

@media all and (min-width:1200px) {
	.img_li 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(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:100px 0 0; background:#eee no-repeat center center / cover; color:#fff; text-align:center;}
#sub_vis:after {content:''; display:inline-block; width:100%; height:100%; background:#20202060; position:absolute; left:0; top:0;}
#sub_vis h2 {font-size:1.75em; color:#fff; font-weight:600; position:relative; z-index:1;}
#sub_vis p {position:relative; z-index:2;}
.menu_wrap {height:50px; border-top:1px solid #ffffff20; box-sizing:border-box; margin-top:30px;}

@media all and (min-width:768px) {
	#sub_vis {padding:120px 0 0;}
	#sub_vis h2 {font-size:2em;}
  .menu_wrap {height:60px; margin-top:50px;}
}

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


#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:40px 0 80px;}
.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:60px 0 80px;}
  .sub_tit {font-size:2.5em;}
}


/*서브메뉴*/
#sub_drop {display:flex; width:100%; z-index:100; height:50px; text-align:left;}
#sub_drop > * {border-right:1px solid #ffffff20;}
#sub_drop .dropdown.home {width:50px; height:100%; overflow:hidden; border-left:1px solid #ffffff20;}
#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;}
#sub_drop .dropdown.deph01 {width:calc(50% - 50px); max-width:240px;}
#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; background:#fff; border:1px solid var(--border); border-top:0; border-bottom:0;}
#sub_drop .dropdown ul li {padding:0.5em 1em; border-bottom:1px solid var(--border);}
#sub_drop .dropdown ul li:hover {background:var(--lbg);}
#sub_drop .dropdown ul li a {display:block; color:#404040; font-weight:600;}
#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.home {width:60px;}
  #sub_drop .dropdown {height:60px;}
  #sub_drop .dropbtn {height:60px; line-height:60px;}
  #sub_drop .dropdown .show {top:60px;}
}