@charset "utf-8";

:root {
  --col01:#04A7FB;
  --col02:#04AA55;
  --border:#e0e2e3;
  --lbg:#f8f8f9;
  --ic:'Material Symbols Outlined';
}

.fullpage-wrapper {overflow:hidden;}

/* main */
section.main .main_wrap {}
section.main .visual {width:100%; height:100%; display:block; position:relative; z-index:0; background:#283136;}
section.main .visual .slick-slider,
section.main .visual .slick-list,
section.main .visual .slick-track {height:100%;}
section.main .visual dl {width:100%;}
section.main .visual dd {height:100%; transition:0.5s;}
section.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;}
section.main .visual dd div.txt {position:relative; z-index:10; color:#fff; display:flex; align-items:flex-end; justify-content:flex-start; flex-wrap:wrap; height:100%; padding:200px 0; background:#283136; background:linear-gradient(200deg, #28313600 0%, #28313680 80%);}
section.main .visual dd div.txt {line-height:1.2;}
section.main .visual dd div.txt h1 {font-size:2em; font-weight:800; margin-bottom:20px; margin-top:20px;}
section.main .visual dd div.txt h2 {font-weight:600; color:var(--col01); text-transform:uppercase; font-family:'Poppins';}
section.main .visual dd.slick-active div.txt h1,
section.main .visual dd.slick-active div.txt h2 {animation-name:anim01; animation-duration:1s; animation-fill-mode:backwards; animation-delay:1s;}
section.main .visual dd.slick-active div.txt h1 {animation-delay:2s;}
section.main .visual dd.slick-active div.txt h2 {animation-delay:1.5s;}

@media all and (min-width:768px) {
  section.main .visual dd div.txt {font-size:1.1em;}
  section.main .visual dd div.txt h1 {font-size:3em; margin-top:30px;}
}

@media all and (min-width:1200px) {
  section.main .visual dd div.txt {font-size:1.25em;}
}

section.main .control {position:absolute; left:max(calc(50% - 750px), 0px); bottom:100px; width:100%; max-width:1500px; text-align:center; display:flex; align-items:center; justify-content:flex-start; padding:0 3%; position:relative;}
section.main .control .dots {display:block;}
section.main .control .dots > ul {display:flex; align-items:center; gap:20px;}
section.main .control .dots li {display:inline-block; width:8px; height:8px; border-radius:100%; background:#fff;}
section.main .control .dots li.slick-active {background:unset; width:16px; height:16px; border:4px solid var(--col01);}

@media all and (min-width:1200px) {
  section.main .control {padding:0 30px;}
}


section .swrap {padding:100px 0;}
section .sectit {text-align:center; padding:0 3%; width:100%; max-width:1500px; display:flex; flex-wrap:wrap; align-items:center; margin:0 auto 50px; position:relative; z-index:10;}
section .sectit > * {width:100%;}
section .sectit h5 {color:var(--col01); font-weight:600; margin:auto 0 10px; text-transform:uppercase; font-family:'Poppins';}
section .sectit h3 {font-size:1.5em; font-weight:800; margin:0 0 auto; position:relative;}
section .sectit h3 a.more {display:flex; align-items:center; justify-content:center; color:#fff; background:#ffffff20; backdrop-filter:blur(10px) brightness(120%); width:40px; height:40px; border-radius:100%; position:absolute; right:0; top:calc(50% - 20px); transition:0.3s;}
section .sectit h3 a.more:after {content:'add'; font-family:var(--ic); font-size:20px;}
section .sectit h3 a.more:hover {background:var(--col01);}
section .sectit .btns {display:flex; gap:10px;}
section .sectit .btns a {display:flex; align-items:center; justify-content:center; border-radius:100px; width:150px; height:50px; font-weight:600; background:#283135; color:#fff; gap:10px; transition:0.3s;}
section .sectit .btns a:after {content:'arrow_forward'; font-family:var(--ic); transform:rotate(-45deg); transition:0.3s;}
section .sectit .btns a:hover {background:var(--col01);}
section .sectit .btns a:hover:after {transform:rotate(0);}
section.sec02 .sectit {text-align:left;}
section.sec03 .sectit h3 {color:#fff;}

@media all and (min-width:768px) {
  section .sectit h3 {font-size:2em;}
  section .sectit .btns a {width:180px; height:60px;}
}

@media all and (min-width:1200px) {
  section .sectit {padding:0 30px;}
  section .sectit h5 {font-size:1.25em;}
  section .sectit h3 {font-size:2.75em;}
  section .sectit h3 a.more {width:60px; height:60px; top:calc(50% - 30px);}
  section .sectit h3 a.more:after {font-size:24px;}
}


section.sec01 {background:url('../img/main/sec01_bg.jpg') no-repeat center center / cover;}
section.sec02 {background:url('../img/main/sec02_bg.jpg') no-repeat center bottom / cover;}
section.sec03 {background:url('../img/main/sec03_bg.jpg') no-repeat center center / cover;}


section.sec01 .dots {width:94%; max-width:660px; height:60px; padding:10px; margin:0 auto 40px; background:#fff; border-radius:100px; position:relative; z-index:1; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.1); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.1); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.1);}
section.sec01 .dots .slick-dots {width:100%; height:100%; display:flex; text-align:center;}
section.sec01 .dots .slick-dots li {cursor:pointer; color:#aaa; display:flex; align-items:center; justify-content:center; border-radius:100px; flex:1; font-weight:700;}
section.sec01 .dots .slick-dots li.slick-active {background:var(--col01); color:#fff;}
section.sec01 #serviceSlide {width:94%; max-width:1280px; margin:0 auto; z-index:0;}
section.sec01 .slick-list {overflow:visible; margin:0 -20px;}
section.sec01 .slick-slide {display:block; margin:0 20px; border-radius:16px; overflow:hidden; position:relative;}
section.sec01 .slick-slide:after {content:''; display:inline-block; width:100%; height:100%; position:absolute; left:0; top:0; background:#283136; background:linear-gradient(200deg, #28313640 0%, #28313680 80%); z-index:1;}
section.sec01 .slick-slide:not(.slick-active) {opacity:0.3; filter:grayscale(1);}
section.sec01 .sv {background-repeat:no-repeat; background-position:center center; background-size:cover; height:400px; display:flex; align-items:center;}
section.sec01 .sv.sv01 {background-image:url('../img/main/sec01_i01.jpg');}
section.sec01 .sv.sv02 {background-image:url('../img/main/sec01_i02.jpg');}
section.sec01 .sv.sv03 {background-image:url('../img/main/sec01_i03.jpg');}
section.sec01 .sv.sv04 {background-image:url('../img/main/sec01_i04.jpg');}
section.sec01 .sv > div {display:flex; flex-wrap:wrap; align-items:center; color:#fff; gap:10px; padding:20px 20px 60px; z-index:2;}
section.sec01 .sv h3 {width:fit-content; font-size:1.75em; font-weight:700;}
section.sec01 .sv h5 {width:fit-content; color:var(--col01); text-transform:capitalize; font-weight:600; font-family:'Poppins';}
section.sec01 .sv p {width:100%; font-weight:600; margin-bottom:20px;}
section.sec01 .sv a {display:flex; align-items:center; justify-content:center; border-radius:100px; width:150px; height:50px; font-weight:600; background:#ffffff40; backdrop-filter:blur(10px) brightness(120%); gap:10px; position:absolute; left:20px; bottom:40px;}
section.sec01 .sv a:after {content:'arrow_forward'; font-family:var(--ic); transform:rotate(-45deg); transition:0.3s;}
section.sec01 .sv a:hover:after {transform:rotate(0);}
section.sec01 .arrow {display:flex; gap:10px; position:absolute; right:calc(3% + 20px); bottom:40px;}
section.sec01 .arrow span {display:flex; align-items:center; justify-content:center; color:#fff; background:#ffffff20; backdrop-filter:blur(10px) brightness(120%); width:50px; height:50px; border-radius:100%; cursor:pointer; transition:0.3s;}
section.sec01 .arrow span:hover {background:var(--col01);}
section.sec01 .arrow span:after {font-family:var(--ic); content:'arrow_forward_ios';}
section.sec01 .arrow span.prev:after {transform:rotate(180deg);}

@media all and (min-width:768px) {
  section.sec01 .dots {margin-bottom:-40px; height:80px;}
  section.sec01 .dots .slick-dots li {font-size:1.1em;}
  section.sec01 .sv > div {padding:80px 40px;}
  section.sec01 .sv h3 {font-size:2em;}
  section.sec01 .sv p {font-size:1.1em;}
  section.sec01 .sv a {width:180px; height:60px; font-size:1.1em; left:40px;}
  section.sec01 .arrow {right:calc(3% + 40px);}
  section.sec01 .arrow span {width:60px; height:60px;}
}

@media all and (min-width:1200px) {
  section.sec01 .sv > div {padding:80px 60px 100px;}
  section.sec01 .sv h3 {font-size:2.75em;}
  section.sec01 .sv h5 {font-size:1.1em;}
  section.sec01 .sv a {left:60px; bottom:60px;}
  section.sec01 .arrow {right:max(calc(3% + 60px), calc(50% - 580px)); bottom:60px;}
}


section.sec02 .swrap {padding:100px 3%;}
section.sec02 .sectit {margin:0;}
section.sec02 .img {margin:-20vw 0 0; text-align:center;}

@media all and (min-width:768px) {
  section.sec02 .swrap {display:flex; align-items:center;}
  section.sec02 .sectit {width:50%;}
  section.sec02 .img {margin:-100px -5%; width:60%;}
  section.sec02 .img img {max-height:100vh;}
}

@media all and (min-width:1200px) {
  section.sec02 .swrap {padding:100px max(30px, calc(50% - 720px));}
}


section.sec03 {color:#fff;}
section.sec03 .news {display:flex; flex-wrap:wrap; gap:20px; margin-bottom:60px;}
section.sec03 .news a {border:1px solid #ffffff40; border-radius:8px; padding:20px; width:100%; transition:0.3s;}
section.sec03 .news a:hover {border-color:#fff;}
section.sec03 .news a h5 {font-size:1.1em; font-weight:600; margin:0 0 10px; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; word-break:break-all;}
section.sec03 .news a p {color:#ffffff80; margin:0 0 20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
section.sec03 .news a em {color:var(--col01); font-weight:600; display:block; text-align:right;}
section.sec03 .news .none {border:1px solid #ffffff40; border-radius:8px; padding:20px; width:100%; text-align:center; color:rgba(255,255,255,0.8);}
section.sec03 .link {display:flex; flex-wrap:wrap; gap:20px;}
section.sec03 .link > * {width:100%;}
section.sec03 .link > a {background:var(--col01); padding:40px 20px; border-radius:8px; display:flex; align-items:center; gap:10px;}
section.sec03 .link > a:after {content:'arrow_forward'; font-family:var(--ic); background:#283136; display:flex; align-items:center; justify-content:center; font-size:1.25em; border-radius:100%; width:50px; height:50px; margin-left:auto; transform:rotate(-45deg); transition:0.3s; flex-shrink:0;}
section.sec03 .link > a:hover:after {transform:rotate(0);}
section.sec03 .link > a h5 {font-weight:700; font-size:1.5em;}
section.sec03 .link > a p {color:#ffffff90; font-size:0.9em;}
section.sec03 .link dl {display:flex; gap:10px;}
section.sec03 .link dl dd {flex:1; border-radius:8px; background:#ffffff20; backdrop-filter:blur(10px) brightness(120%); transition:0.3s;}
section.sec03 .link dl dd:hover {transform:translateY(-10px);}
section.sec03 .link dl dd a {height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px 0;}
section.sec03 .link dl dd a img {width:min(50%, 100px); margin-bottom:10px;}

@media all and (min-width:768px) {
  section.sec03 .news a {width:calc(50% - 10px);}
  section.sec03 .link > a {gap:30px; padding:40px;}
  section.sec03 .link > a h5 {font-size:1.75em;}
}

@media all and (min-width:1200px) {
  section.sec03 .news {gap:40px; margin-bottom:60px; flex-wrap:nowrap;}
  section.sec03 .news a {padding:30px; flex:1; min-width:0;}
  section.sec03 .news .none {padding:40px 20px;}
  section.sec03 .link {height:160px; align-items:stretch; gap:40px;}
  section.sec03 .link > * {width:calc(50% - 20px);}
  section.sec03 .link dl {gap:20px;}
}


/*footer*/
#footer {background:#283136; color:#fff; font-size:0.9em; padding:40px 0;}
#footer ul.bottom_li {display:flex; align-items:center; margin:0 0 20px; gap:1em;}
#footer ul.bottom_li li a {color:#fff; font-weight:600;}
#footer dl.info {margin-bottom:40px; display:flex; flex-wrap:wrap; text-align:left; gap:5px 0;}
#footer dl.info dt {font-weight:700; width:4em;}
#footer dl.info dd {width:calc(100% - 4em);}
#footer dl.info dd em {display:inline-block; width:4em; font-weight:700;}
#footer p {font-size:0.9em; margin-top:10px;}
#pageup {position:fixed; z-index:999; right:10px; bottom:10px; width:60px; height:60px; background:var(--col01); 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; font-size:1.25em;}

@media all and (min-width:768px) {
	#footer {padding:40px 0 60px; text-align:left;}
  #footer .pdinner {background:url('../img/logo.png') no-repeat 97% top / 220px; padding-top:20px;}
  #footer dl.info {margin-bottom:40px;}
}

@media all and (min-width:1200px) {
  #footer .pdinner {background-position:calc(100% - 30px) top;}
}


/* 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: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 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;}
.img_li li img {border:1px solid var(--border);}
.img_li li p {margin:10px 0 0;}
.tit_dot {font-size:1.4em; font-weight:700; display:flex; align-items:flex-start; gap:10px;}
.tit_dot:before {content:''; display:inline-block; width:1.45em; height:1.45em; background:url('../img/tit_dot.png') no-repeat center center / 80%; flex-shrink:0;}

@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 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:80px 0 0; text-align:center;}
#sub_vis .sub_top {background:#283135; background-position:center center; background-size:cover; color:#fff; border-radius:16px; padding:40px 20px;}
#sub_vis h2 {font-size:1.1em; font-weight:700; margin:0 0 0.1em;}
#sub_vis h3 {font-size:1.75em; font-weight:700;}

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

@media all and (min-width:1200px) {
	#sub_vis {padding:120px 0 0;}
  #sub_vis .pdinner {transition:0.3s;}
  #sub_vis .sub_top {padding:60px 40px 40px;}

  body.scroll #sub_vis .pdinner {max-width:100%;}
}


#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:40px 0 80px; overflow:hidden;}
.subwrap {margin:0 auto;}

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

@media all and (min-width:1200px) {
  #sub {min-height:650px; padding:80px 0 100px;}
}


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

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


/*서브메뉴 - type01 */
#sub_drop {display:flex; width:90%; margin:0 auto; max-width:640px; z-index:100; height:40px; gap:10px;}
#sub_drop .dropdown.home {width:40px; 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); -webkit-font-feature-settings:'liga'; color:#fff;font-variation-settings:'FILL' 1;}
#sub_drop .dropdown {position:relative; z-index:101; height:40px; border-radius:100px;}
#sub_drop .dropdown:not(.home) {background:#ffffff20; backdrop-filter:blur(10px) brightness(80%);}
#sub_drop .dropdown.deph01 {flex:2;}
#sub_drop .dropdown.deph02 {flex:3;}
#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:40px; line-height:40px; text-align:left;}
#sub_drop .dropbtn:after{font-family:var(--ic); content:'keyboard_arrow_down'; position:absolute; right:1em;}
#sub_drop .dropdown .show {display:block; position:absolute; left:0; top:50px;}
#sub_drop .dropdown ul li a {display:block; color:#fff; padding:10px; transition:0.3s;}
#sub_drop .dropdown ul li:hover a {background:var(--col01);}
#sub_drop .dropmenu {display:none; background:#283135; box-sizing:content-box; width:100%; overflow:hidden; border-radius:8px;}

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