@charset "utf-8";

/* main */
#main .visual {width:100%; position:relative; z-index:0; background:#eee;}
#main .visual_wrap {width:100%;}
#main .visual dd {height:calc(100vh - 60px); min-height:540px; 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; justify-content:center; height:100%;}
#main .visual dd div.txt p.t01 {font-size:2.25em; font-weight:800; text-transform:uppercase; line-height:1.25; margin:0 0 20px;}
#main .visual dd div.txt p.t02 {font-size:1.1em; font-weight:600;}
#main .visual dd.slick-active div.bg {animation:visbg 6s ease-in-out 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.slick-active div.txt p.t01 {animation-delay:1s;}
#main .visual dd.slick-active div.txt p.t02 {animation-delay:2s;}

#main .visual .controls {display:flex; align-items:center; width:100%; height:200px; margin-top:-200px; position:relative; z-index:1;}
#main .visual .controls .dots ul {color:#fff; width:100px;}
#main .visual .controls .dots li,
#main .visual .controls .dots li span {display:flex; align-items:center; justify-content:center;}
#main .visual .controls .dots li:not(.slick-active) {display:none;}
#main .visual .controls .dots li .t01 {font-weight:800;}
#main .visual .controls .dots li .t01:after {content:''; display:inline-block; width:1px; height:0.8em; background:#fff; margin:0 0.5em; opacity:0.4;}
#main .visual .controls .dots li .t02 {opacity:0.6;}
#main .visual .controls .prev:before,
#main .visual .controls .next:before {font-family:'xeicon'; cursor:pointer;}
#main .visual .controls .prev:before {content:'\e93b';}
#main .visual .controls .next:before {content:'\e93e';}
#main .visual .controls .arr {display:flex; align-items:center; justify-content:center; width:40px; height:40px; transition:0.3s; opacity:0.8; color:#fff; font-size:1.25em;}
#main .visual .controls .arr:hover {opacity:1;}
#main .visual .controls .progress {position:relative; display:block; width:100%; height:5px; margin:0 40px 0 0; overflow:hidden; background-image:linear-gradient(to right, #2747a5, #6699ff); background-repeat:no-repeat; background-size:0 100%; transition:background-size .4s ease-in-out;}
#main .visual .controls .progress:before {content:''; width:100%; height:5px; background:rgba(255,255,255,0.2); position:absolute; left:0; z-index:-1;}

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

@media all and (min-width:1200px) {
  #main .visual dd {height:100vh; min-height:840px;}
  #main .visual dd div.txt p.t01 {font-size:3em;}
  #main .visual dd div.txt p.t02 {font-size:1.5em;}
}

@media all and (min-width:1600px) {
  #main .visual dd div.txt p.t01 {font-size:3.5em;}
  #main .visual dd div.txt p.t02 {font-size:1.75em;}
}


#main section {width:100%; padding:60px 0 80px;}
#main section .sectit .t01 {font-size:1.1em; margin:0 0 20px; font-weight:800;}
#main section .sectit .t02 {font-size:1.5em; font-weight:800; margin:0 0 40px;}
#main section .sectit .t01 .gra {word-break:break-all;}

@media all and (min-width:768px) {
  #main section {padding:80px 0 100px;}
  #main section .sectit {display:flex;}
  #main section .sectit .t01 {width:15%; font-size:1.5em; padding-right:1em;}
  #main section .sectit .t02 {width:85%; font-size:2em; margin:0 0 60px;}
}

@media all and (min-width:1200px) {
  #main section {padding:100px 0 120px;}
  #main section .sectit .t01 {font-size:1.75em;}
  #main section .sectit .t02 {font-size:2.25em;}
}


#main .sec01 {background:#171f22 url('../img/main_sec01_bg.jpg') no-repeat center top / 100%; color:#fff;}
#main .sec01 .info01 ul {display:flex; flex-wrap:wrap; margin:-20px -1%;}
#main .sec01 .info01 li {width:48%; margin:20px 1%; text-transform:uppercase;}
#main .sec01 .info01 li a {display:block; font-weight:600;}
#main .sec01 .info01 img {margin:0 0 20px; border-radius:10px;}
#main .sec01 .info01 .t01 {font-size:0.9em; transition:0.3s;}
#main .sec01 .info01 a:hover .t01 {background:linear-gradient(to right, #2747a5, #6699ff); color:transparent; -webkit-background-clip:text;}
#main .sec01 .info01 .t02 {font-size:1.25em; display:flex; align-items:center; justify-content:space-between; align-items:flex-end; position:relative;}
#main .sec01 .info01 .t02:before {content:''; display:inline-block; width:0; height:3px; background-image:linear-gradient(to right, #2747a5, #6699ff); position:absolute; left:0; bottom:-10px; transition:0.3s;}
#main .sec01 .info01 a:hover .t02:before {width:100%;}
#main .sec01 .info01 .t02:after {content:'\e9c5'; font-family:'xeicon'; font-size:0.8em;}

@media all and (min-width:768px) {
  #main .sec01 .info01 {padding:0 0 0 15%;}
  #main .sec01 .info01 img {margin:0 0 40px; transition:0.3s;}
  #main .sec01 .info01 .t02 {font-size:1.5em;}
}

@media all and (min-width:1200px) {
  #main .sec01 .info01 ul {align-items:flex-end;}
  #main .sec01 .info01 li {width:31.33%; margin:40px 1%;}
  #main .sec01 .info01 li:hover img {transform:translateY(-10px);}
}


#main .sec02 {background:#f4f6f7 url('../img/main_sec02_bg.jpg') no-repeat center top / 100%;}
#main .sec02 .info01 ul {display:flex; flex-wrap:wrap; font-weight:600; margin:0 -1%;}
#main .sec02 .info01 li {width:48%; margin:1vw 1%; text-align:center; transition:0.3s; border-radius:10px; background:rgba(255,255,255,0.6); -webkit-box-shadow:0 0 30px 0 rgba(0,0,0,0.05); -moz-box-shadow:0 0 30px 0 rgba(0,0,0,0.05); box-shadow:0 0 30px 0 rgba(0,0,0,0.05); position:relative;}
#main .sec02 .info01 li:hover {background:#fff; webkit-box-shadow:0 0 60px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 0 60px 0 rgba(0,0,0,0.05); box-shadow:0 0 30px 0 rgba(0,0,0,0.1); transform:translateY(-10px);}
#main .sec02 .info01 li a {display:block; padding:20px;}
#main .sec02 .info01 li img {max-width:80px;}
#main .sec02 .info01 li .t01 {margin:10px 0 0; font-size:0.9em; color:#dfe2e4; text-transform:uppercase;}
#main .sec02 .info01 li .t02 {font-size:1.1em; transition:0.3s;}

@media all and (min-width:768px) {
  #main .sec02 .info01 ul {padding:0 0 0 15%;}
  #main .sec02 .info01 li .t02 {font-size:1.25em;}
}

@media all and (min-width:1200px) {
  #main .sec02 .info01 li {flex:1; margin:0 1%;}
  #main .sec02 .info01 li a {padding:60px 20px;}
  #main .sec02 .info01 li .t02 {font-size:1.5em;}
}


#main .sec03 {position:relative; background:#fff;}
#main .sec03 .info01 ul {display:flex; flex-wrap:wrap; justify-content:space-between;}
#main .sec03 .info01 li {width:100%; background:#fff; margin:10px 0; border:1px solid #e0e0e0; border-radius:10px; font-weight:600;}
#main .sec03 .info01 li.none {text-align:center; width:100%; padding:30px 0; color:#888;}
#main .sec03 .info01 li a {display:flex; flex-wrap:wrap; align-items:center; padding:20px;}
#main .sec03 .info01 li .t01 {color:#cacfd2;}
#main .sec03 .info01 li .t02 {margin:0 0 0 auto; width:2em; height:2em; display:flex; align-items:center; justify-content:center; background:#2747a5; color:#fff; border-radius:10px;}
#main .sec03 .info01 li .t03 {width:100%; margin:10px 0 0; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}

@media all and (min-width:768px) {
  #main .sec03 .info01 {padding:0 0 0 15%;}
  #main .sec03 .info01 li {width:49%; margin:0; transition:0.3s;}
  #main .sec03 .info01 li:not(.none):hover {transform:translateY(-10px);}
  #main .sec03 .info01 li a {padding:30px;}
  #main .sec03 .info01 li .t03 {font-size:1.1em;}
}


/*footer*/
#footer {background:#070a0b; color:#fff; font-size:0.9em; text-align:center; padding:40px 0;}
#footer .pdinner {max-width:1800px;}
#footer ul.bottom_li {display:flex; justify-content:center; align-items:center; margin:0 0 10px;}
#footer ul.bottom_li li {margin: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;}
#footer ul.info li {margin:0 0.5em;}
#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:60px; height:60px; background:#2747a5; display:none; cursor:pointer;}
#pageup:after {content:'\e909';font-family:'xeicon'; 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 ul.info {justify-content:flex-start; margin-bottom:20px;}
	#footer ul.info li {margin:0 1em 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: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%;}
	.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;}
.img_li li {width:48%; text-align:center; margin:0 1% 10px;}
.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:31.33%;}
}

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


/* 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:90px 0 30px; background:#eee no-repeat center center / cover; color:#fff; text-align:center;}
#sub_vis h2 {font-size:1.5em; color:#fff; font-weight:700; text-transform:uppercase;}

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

@media all and (min-width:960px) {
	#sub_vis {padding:180px 0 120px;}
}


#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:40px 0 80px;}
#sub.pb0 {padding-bottom:0;}
.subwrap {margin:0 auto;}
.sub_tit {display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; border-bottom:1px solid #e0e0e0; padding-bottom:20px;}
.sub_tit .t01 {font-size:1.5em; font-weight:800;}
.sub_tit .t02 {text-transform:uppercase; font-size:1.1em; font-weight:600; color:#c7d1d6;}

@media all and (min-width:768px) {
  .sub_tit {margin-bottom:60px;}
	.sub_tit .t01 {font-size:2em;}
  .sub_tit .t02 {font-size:1.25em;}
}

@media all and (min-width:1200px) {
  #sub {min-height:650px; padding:60px 0 80px;}
  .sub_tit .t01 {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:960px) {
  .menu_wrap {margin-top:-60px;}
}


/*서브메뉴 - 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:#2747a5;}
#sub_drop .dropdown.home a:after {content:'\e900'; font-family:'xeicon'; color:#fff;}
#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: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:'xeicon'; content:'\e942'; 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:#333;}
#sub_drop .dropdown ul li a {display:block; color:#fff;}
#sub_drop .dropmenu {display:none; background:#444; 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:#2747a5;}
#submenu a.home:after {content:'\e900'; font-family:'xeicon'; color:#fff;}
#submenu a.arr {display:flex; width:calc(100% - 50px); line-height:50px; padding:0 2em 0 1em; background:#070a0b; color:#fff;}
#submenu a.arr:after {font-family:'xeicon'; content:'\e942'; position:absolute; right:1em; top:0; transition:0.2s;}
#submenu .list {display:none; position:absolute; left:50px; top:50px; width:calc(100% - 50px); background:#070a0b; z-index:99;}
#submenu .list a {text-align:left; display:flex; align-items:center; justify-content:flex-start; height:50px; color:#fff; padding:0 10px; cursor:pointer;}
#submenu .list a:hover {color:#6699ff;}
#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 {display:none;}
  #submenu a.arr {display:none;}
  #submenu .list {display:flex; width:100%; position:absolute; left:0; top:0; border:0; padding:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(10px);}
  #submenu .list a {font-weight:600; flex:1; text-align:center; color:#fff; justify-content:center; height:60px; line-height:1.2;}
  #submenu .list a.on {display:flex; color:#fff; background:#2747a5;}
}

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