@charset "utf-8";

:root {
  --col01:#741513;
  --border:#e0e0e0;
  --ic:'Material Symbols Outlined';
}

/* main */
#main .main_wrap {overflow:hidden;}
#main .visual {width:100%; position:relative; z-index:0; background:#eee;}
#main .visual dd {height:360px; transition:0.2s; position:relative;}
#main .visual dd:after {content:''; display:inline-block; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0; left:0;}
#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; justify-content:flex-start; height:100%; font-size:2em;}
#main .visual dd div.txt > div {width:min(94%, 1160px); margin:0 auto;}
#main .visual dd div.txt .t01 {font-weight:800;}
#main .visual dd div.txt .t02 {font-size:0.47em;}
#main .visual dd div.txt a {font-size:0.5em; display:inline-block; background:var(--col01); color:#fff; padding:10px 25px; transition:0.3s;}
#main .visual dd div.txt a:hover {background:#631110;}
#main .visual dd.slick-active div.txt {animation-name:anim01; animation-duration:1s; animation-fill-mode:both; animation-delay:1s;}
#main .visual .control {display:flex; align-items:center;}
#main .visual .control .dots {position:absolute; left:0; bottom:40px; width:100%; text-align:center;}
#main .visual .control .dots > ul {display:flex; justify-content:center; gap:10px;}
#main .visual .control .dots li {display:inline-block; width:12px; height:12px; border-radius:100%; cursor:pointer; background:rgba(255,255,255,0.4); position:relative;}
#main .visual .control .dots li.slick-active {background:var(--col01);}

@media all and (min-width:768px) {
  #main .visual dd {height:640px;}
  #main .visual dd div.txt {font-size:2.5em;}
  #main .visual dd div.txt a {font-size:0.4em;}
}

@media all and (min-width:1200px) {
  #main .visual dd {height:780px;}
  #main .visual dd div.txt {font-size:3em;}
  #main .visual dd div.txt a {font-size:0.33em; padding:15px 25px;}
  #main .visual .control .dots {bottom:80px;}
}


#main section {padding:40px 0;}

@media all and (min-width:768px) {
  #main section {padding:60px 0;}
}

@media all and (min-width:1200px) {
  #main section {padding:80px 0;}
}


#main .sec01 .pdinner {position:relative;}
#main .sec01 h3 {font-size:1.1em; font-weight:600; margin-bottom:1em; line-height:40px;}
#main .sec01 .txt h4 {font-size:1.75em; font-weight:800; color:var(--col01);}
#main .sec01 .txt h5 {font-size:1.1em; font-weight:800; margin-bottom:0.5em;}
#main .sec01 .txt p {color:#999; margin-bottom:1.5em;}
#main .sec01 .txt a {font-weight:800; display:flex; align-items:center; gap:0.5em;}
#main .sec01 .txt a:after {font-family:var(--ic); content:'arrow_forward'; transition:0.3s;}
#main .sec01 .txt a:hover:after {transform:translateX(10px);}
#main .sec01 .img {background:#f2f2f2; padding:20px; margin-top:40px;}
#main .sec01 .img img {width:100%; max-width:480px; margin:0 auto;}
#main .sec01 .control {position:absolute; right:3%; top:0; display:flex; gap:0.5em; line-height:40px;}
#main .sec01 .control span {cursor:pointer; font-size:1.5em;}
#main .sec01 .control span:after {font-family:var(--ic);}
#main .sec01 .control span.prev:after {content:'chevron_left';}
#main .sec01 .control span.next:after {content:'chevron_right';}

@media all and (min-width:768px) {
  #main .sec01 dd {display:flex; align-items:center; gap:0 10%;}
  #main .sec01 .txt,
  #main .sec01 .img {flex:1; margin-top:0;}
}

@media all and (min-width:1200px) {
  #main .sec01 .txt h4 {font-size:2.5em;}
  #main .sec01 .txt h5 {font-size:1.25em;}
  #main .sec01 .control {right:20px;}
  #main .sec01 .control span {font-size:1.75em;}
}


#main .sec02 {background:url('../img/main/bg01.jpg') no-repeat center center / cover; color:#fff; text-align:center;}
#main .sec02 h3 {font-size:2em; font-weight:800;}
#main .sec02 h4 {opacity:0.8; font-weight:600; margin-bottom:40px;}
#main .sec02 ul {text-align:left; display:flex; flex-wrap:wrap; align-items:center; gap:20px 5%; margin-bottom:40px;}
#main .sec02 li {width:100%;}
#main .sec02 li:nth-child(2) {line-height:1.8;}
#main .sec02 li h5 {font-size:1.5em; font-weight:800;}
#main .sec02 li h5 ~ p {font-size:0.8em; opacity:0.8;}
#main .sec02 li p {display:flex;}
#main .sec02 li p b {display:inline-block; width:4em;}
#main .sec02 .quick {display:flex; gap:10px;}
#main .sec02 .quick a {flex:1; display:flex; align-items:center; justify-content:center; padding:10px 0; border:1px solid rgba(255,255,255,0.8); transition:0.3s;}
#main .sec02 .quick a:hover {background:#fff; color:#000;}
#main .sec02 .quick a:last-child {border-color:var(--col01); background:var(--col01);}
#main .sec02 .quick a:last-child:hover {background:#631110; border-color:#631110; color:#fff;}

@media all and (min-width:768px) {
  #main .sec02 .pdinner {display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 4%;}
  #main .sec02 h3 {font-size:2.5em; width:100%;}
  #main .sec02 h4 {width:100%; margin-bottom:60px;}
  #main .sec02 ul {width:44%; margin-bottom:0;}
  #main .sec02 li h5 {font-size:1.75em;}
  #main .sec02 .quick {width:52%;}
}

@media all and (min-width:1200px) {
  #main .sec02 .pdinner {align-items:center;}
  #main .sec02 ul {width:58%;}
  #main .sec02 li {width:auto;}
  #main .sec02 .quick {width:36%;}
  #main .sec02 .quick a {padding:15px 0;}
}


#main .sec03 {text-align:center; background:#f6f2f2;}
#main .sec03 h3 {font-size:2em; font-weight:800; margin-bottom:40px;}
#main .sec03 .quick {display:flex; flex-wrap:wrap; gap:20px 2%;}
#main .sec03 .quick a {width:32%;}
#main .sec03 .quick img {width:60%; max-width:100px; margin:0 auto 1em; display:block;}
#main .sec03 .quick p {font-weight:600; position:relative; padding-bottom:6px; display:inline-block;}
#main .sec03 .quick p:after {content:''; display:inline-block; width:0; height:3px; background:var(--col01); position:absolute; left:50%; bottom:0; transition:0.3s;}
#main .sec03 .quick a:hover p:after {left:0; width:100%;}

@media all and (min-width:768px) {
  #main .sec03 h3 {font-size:2.5em; margin-bottom:60px;}
  #main .sec03 .quick a {flex:1;}
}


#main .sec04 .pdinner {display:flex; flex-wrap:wrap; align-items:stretch; gap:20px 2%;}
#main .sec04 a {width:100%; display:flex; align-items:center; justify-content:flex-start; padding:30px; color:#fff; transition:0.3s;}
#main .sec04 a.type01 {background:var(--col01);}
#main .sec04 a.type01:hover {background:#631110;}
#main .sec04 a.type02 {background:#303030;}
#main .sec04 a.type02:hover {background:#202020;}
#main .sec04 a div {width:100%; padding-right:80px; position:relative;}
#main .sec04 a div:after {font-family:var(--ic); content:'arrow_forward'; transition:0.3s; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100%; border:1px solid #fff; position:absolute; right:0; top:calc(50% - 20px);}
#main .sec04 a:hover div:after {background:#fff;}
#main .sec04 a.type01:hover div:after {color:var(--col01);}
#main .sec04 a.type02:hover div:after {color:#303030;}
#main .sec04 a h5 {font-size:1.25em; font-weight:800; margin-bottom:0.2em;}
#main .sec04 a p {opacity:0.8; font-size:0.9em;}

@media all and (min-width:768px) {
  #main .sec04 a {flex:1;}
}

@media all and (min-width:768px) {
  #main .sec04 a {padding:40px;}
  #main .sec04 a h5 {font-size:1.5em;}
  #main .sec04 a p {font-size:1em;}
}


/*footer*/
#footer {background:#202020; color:#fff; font-size:0.9em; text-align:center; padding:40px 0;}
#footer .info dl {margin-bottom:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:5px 10px;}
#footer .info dl dd.type01 {width:100%;}
#footer .info dl dd b {font-weight:700; margin:0 0.2em 0 0;}
#footer .info ul {display:flex; justify-content:center; align-items:center; margin-bottom:10px; gap:10px;}
#footer .info ul li a {color:#fff; font-weight:600;}
#footer .info p {font-size:0.9em; margin-top:10px; opacity:0.6;}
#footer .sitemap {display:none;}
#pageup {position:fixed; z-index:999; right:10px; bottom:10px; width:60px; height:60px; 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 .info dl {justify-content:flex-start; margin-bottom:20px;}
  #footer .info ul {justify-content:flex-start; margin-bottom:20px;}
}

@media all and (min-width:1200px) {
  #footer .pdinner {display:flex; gap:5%; max-width:1400px;}
  #footer .sitemap {display:block; width:60%;}
  #footer .sitemap ul {display:flex; gap:2em; justify-content:space-between;}
  #footer .sitemap h5 {font-weight:800; margin-bottom:20px;}
  #footer .sitemap dd {margin-bottom:0.2em;}
  #footer .sitemap a {word-break:break-all; opacity:0.8;}
}


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


/* 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 anim01 {
	0% {opacity:0; -webkit-transform:translateY(10px);}
	100% {-webkit-transform:translateY(0); opacity:1;}
}
@keyframes anim01 {
	0% {opacity:0; transform:translateY(10px);}
	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 40px; background:#eee no-repeat center center / cover; color:#fff;}
#sub_vis h2 {font-size:1.5em; color:#fff; font-weight:800;}
#sub_vis p {font-size:0.9em; opacity:0.8; margin-top:0.5em;}

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

@media all and (min-width:1200px) {
	#sub_vis {padding:140px 0 80px;}
}


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


/*서브메뉴 - 공통 */
.menu_wrap {height:50px; border-bottom:1px solid var(--border);}

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

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


/*서브메뉴 - type01 */
#sub_drop {display:flex; width:100%; z-index:100; height:50px;}
#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%; background:var(--col01);}
#sub_drop .dropdown.home a:after {content:"home"; font-family:var(--ic); color:#fff; font-variation-settings:'FILL' 1;}
#sub_drop .dropdown {position:relative; z-index:101; height:50px; border-right:1px solid var(--border);}
#sub_drop .dropdown.deph01 {width:calc(50% - 50px); max-width:200px;}
#sub_drop .dropdown.deph02 {width:50%; max-width:300px;}
#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:-1px; top:50px;}
#sub_drop .dropdown ul {padding:10px 0;}
#sub_drop .dropdown ul li {padding:5px 1em; transition:0.3;}
#sub_drop .dropdown ul li:hover {color:var(--col01);}
#sub_drop .dropdown ul li a {display:block;}
#sub_drop .dropmenu {display:none; background:#fff; border:1px solid var(--border); border-top:0; 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;}
}

/*서브메뉴 - 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'; font-variation-settings:'FILL' 1;}
#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'; 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;}
}