@charset "utf-8";

:root {
  --col01:#FF9500;
  --col02:#237FCC;
  --col03:#898176;
  --lbg:#F5F5F4;
  --border:#e2e2df;
  --ic:'Material Symbols Outlined';
}

.mainWrap > .wrap {overflow-x:hidden;}

/* main */
section.main .main_wrap {overflow:hidden;}
section.main .visual {width:100%; height:100%; display:block; position:absolute; left:0; top:0; z-index:0; background:#eee;}
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.3s;}
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.slick-active div.bg {animation:visbg 6s ease-in-out infinite alternate; animation-iteration-count:1;}

section.main .con {padding-top:120px; padding-bottom:80px;}
section.main .con .lcon .txt {color:#fff;}
section.main .con .lcon .txt .t01,
section.main .con .lcon .txt .t02,
section.main .con .lcon .txt .t03 {animation-name:anim01; animation-duration:1s; animation-fill-mode:backwards; animation-delay:1s;}
section.main .con .lcon .txt .t01 {color:var(--col01); font-weight:700; text-transform:uppercase; margin:0 0 20px;}
section.main .con .lcon .txt .t02 {font-size:1.75em; font-weight:700; margin:0 0 20px; line-height:1.25; animation-delay:1.5s;}
section.main .con .lcon .txt .t03 {font-size:1.1em; animation-delay:2s;}
section.main .con .rcon {margin:40px 0 0;}
section.main .con .rcon .btns {display:flex; flex-wrap:wrap; gap:10px; text-align:center; margin:0 0 20px;}
section.main .con .rcon .btns a {flex:1; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; border-radius:16px; background:#ffffff20; backdrop-filter:blur(10px) brightness(120%); padding:20px 0.5em; transition:0.3s;}
section.main .con .rcon .btns a:hover {background:var(--col01);}
section.main .con .rcon .btns a img {width:min(40%, 50px); margin:0 auto 10px;}
section.main .con .rcon .notice {position:relative;}
section.main .con .rcon .notice > a {background:var(--col01); color:#fff; display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:100%; position:absolute; right:0; top:0;}
section.main .con .rcon .notice > a:after {content:'arrow_forward'; font-family:var(--ic); font-size:1.25em; transform:rotate(-45deg); transition:0.3s;}
section.main .con .rcon .notice > a:hover:after {transform:rotate(0);}
section.main .con .rcon .notice .tit {background:#fff; border-radius:16px 16px 0 0; width:calc(100% - 60px); height:60px; padding:10px 30px 0; display:flex; align-items:center; position:relative;}
section.main .con .rcon .notice .tit:after {content:''; display:inline-block; width:30px; height:30px; background:url('../img/rounddeco.svg') no-repeat center center / 100%; position:absolute; left:100%; bottom:0;}
section.main .con .rcon .notice .tit p {color:var(--col01); font-weight:700;}
section.main .con .rcon .notice .txt {background:#fff; border-radius:0 16px 16px 16px; padding:10px 30px 30px;}
section.main .con .rcon .notice .txt a {font-weight:500; font-size:1.1em; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; word-break:break-all;}
section.main .con .rcon .notice .txt .date {text-align:right; color:#aaa; font-size:0.9em; margin:20px 0 0;}
section.main .control {margin:40px 0 0;}
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:10px; height:10px; border-radius:100%; cursor:pointer; background:rgba(255,255,255,0.6);}
section.main .control .dots li.slick-active {background:unset; background:url('../img/sig.svg') no-repeat center center / 100%; width:20px; height:20px;}

@media all and (min-width:768px) {
  section.main .con .lcon .txt .t02 {font-size:2.75em;}
  section.main .con .lcon .txt .t03 {font-size:1.25em;}
}

@media all and (min-width:1200px) {
  section.main .con {display:flex; align-items:center; padding-top:140px; padding-bottom:100px;}
  section.main .con .lcon {width:calc(100% - 326px);}
  section.main .con .lcon .txt .t01 {font-size:1.25em; margin:0 0 30px;}
  section.main .con .lcon .txt .t02 {font-size:3.5em; margin:0 0 30px;}
  section.main .con .lcon .txt .t03 {font-size:1.5em;}
  section.main .con .rcon {width:326px; margin:0;}
  section.main .con .rcon .btns {gap:20px; margin:0 0 30px;}
  section.main .con .rcon .btns a {flex:unset; width:calc(50% - 10px); height:153px; font-size:1.1em;}
  section.main .con .rcon .btns a img {margin-bottom:20px;}
  section.main .control {margin:100px 0 0;}
}


section .swrap {padding:100px 0;}
section .sectit {text-align:center; padding:0 3%; width:100%; max-width:1440px; 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;}
section .sectit h3 {font-size:1.5em; font-weight:800; margin:0 0 auto; position:relative;}
section.sec02 .sectit {text-align:left;}
section.sec02 .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 20px; margin-bottom:80px;}
  section .sectit h5 {font-size:1.25em;}
  section .sectit h3 {font-size:2.75em; line-height:60px;}
}


/*sec01*/
section.sec01 ul {display:flex; flex-wrap:wrap; gap:20px;}
section.sec01 ul li {width:calc(50% - 10px); flex-shrink:0; background:no-repeat center center / cover; border-radius:16px; line-height:1.25; height:240px; position:relative;}
section.sec01 ul li:before {content:''; display:inline-block; width:100%; height:100%; background:#20202060; background:linear-gradient(0deg, #20202080 30%, #20202040 100%); position:absolute; left:0; top:0; border-radius:16px;}
section.sec01 ul li:nth-child(1) {background-image:url('../img/main/sec01_i01.jpg');}
section.sec01 ul li:nth-child(2) {background-image:url('../img/main/sec01_i02.jpg');}
section.sec01 ul li:nth-child(3) {background-image:url('../img/main/sec01_i03.jpg');}
section.sec01 ul li:nth-child(4) {background-image:url('../img/main/sec01_i04.jpg');}
section.sec01 ul li:nth-child(5) {background-image:url('../img/main/sec01_i05.jpg');}
section.sec01 ul li a {display:flex; width:100%; height:100%; position:relative; z-index:10;}
section.sec01 ul li a .txt {position:absolute; left:0; bottom:0; padding:40px 20px; transition:0.3s;}
section.sec01 ul li a:hover .txt {transform:translateY(-10px);}
section.sec01 ul li a .txt p {color:var(--col01); font-weight:700; text-transform:capitalize; margin:auto 0 0;}
section.sec01 ul li a .txt h5 {color:#fff; font-size:1.25em; font-weight:700; margin:10px 0 0;}
section.sec01 ul li a .arr {display:inline-block; width:50px; height:50px; background:#fff; position:absolute; right:0; bottom:0; border-radius:50% 0 0;}
section.sec01 ul li a .arr:before,
section.sec01 ul li a .arr:after {content:''; display:inline-block; width:16px; height:16px; background:url('../img/rounddeco.svg') no-repeat center center / 100%; transform:rotate(270deg); position:absolute;}
section.sec01 ul li a .arr:before {right:0; bottom:50px;}
section.sec01 ul li a .arr:after {right:50px; bottom:0;}
section.sec01 ul li a .arr span {background:#fff; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100%; position:absolute; right:0; bottom:0; transition:0.3s; -webkit-box-shadow:0px 10px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow:0px 10px 20px 0px rgba(0,0,0,0.1); box-shadow:0px 10px 20px 0px rgba(0,0,0,0.1);}
section.sec01 ul li a:hover .arr span {background:var(--col01); color:#fff;}
section.sec01 ul li a .arr span:after {content:'arrow_forward'; font-family:var(--ic); font-size:1.25em; transform:rotate(-45deg); transition:0.3s;}
section.sec01 ul li a:hover .arr span:after {transform:rotate(0);}

@media all and (min-width:768px) {
  section.sec01 ul li {width:calc(33.3333% - 13.3333px);}
  section.sec01 ul li a .txt h5 {font-size:1.5em;}
}

@media all and (min-width:1200px) {
  section.sec01 ul {gap:32px; flex-wrap:nowrap;}
  section.sec01 ul li {flex:1; height:460px;}
  section.sec01 ul li a .txt {padding:60px 20px;}
  section.sec01 ul li a .txt h5 {font-size:2em; margin-top:20px;}
  section.sec01 ul li a .arr {width:70px; height:70px;}
  section.sec01 ul li a .arr span {width:60px; height:60px;}
  section.sec01 ul li a .arr:before {right:0; bottom:70px;}
  section.sec01 ul li a .arr:after {right:70px; bottom:0;}
}


/*sec02*/
section.sec02 {background:url('../img/main/sec02_bg.jpg') no-repeat center center / cover;}
section.sec02 .control {display:flex; align-items:center; width:100%; margin:40px 0 0;}
section.sec02 .control .dots {width:calc(100% - 90px); padding:0 40px 0 0; color:#fff; font-weight:700;}
section.sec02 .control .dots li:not(.slick-active) {display:none;}
section.sec02 .control .dots li .num {display:flex; justify-content:space-between; position:relative;}
section.sec02 .control .dots li .num:after {content:''; display:inline-block; width:calc(100% - 5em); height:1px; background:#ffffff40; position:absolute; left:2.5em; top:50%;}
section.sec02 .control .dots li .num span:nth-child(1) {color:var(--col01);}
section.sec02 .control .arr {width:90px; display:flex; align-items:center; justify-content:space-between;}
section.sec02 .control .arr span {display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100%; background:#fff; cursor:pointer; transition:0.3s;}
section.sec02 .control .arr span:hover {background:var(--col01); color:#fff;}
section.sec02 .control .arr span:after {font-family:var(--ic); font-size:1.5em;}
section.sec02 .control .arr span.prev_arr:after {content:'chevron_left';}
section.sec02 .control .arr span.next_arr:after {content:'chevron_right';}
section.sec02 .slick-list {margin:0 -20px;}
section.sec02 dd {color:#fff;}
section.sec02 dd .box {position:relative; padding:0 20px;}
section.sec02 dd .box:after {content:''; display:inline-block; width:calc(100% - 40px); height:100%; border-radius:16px; background:#ffffff20; backdrop-filter:blur(10px) brightness(120%); position:absolute; left:20px; top:0; z-index:0;}
section.sec02 dd .img {position:relative; z-index:1; padding:10px;}
section.sec02 dd .img:after {content:''; display:inline-block; width:100%; height:100%; background:#20202060; background:linear-gradient(45deg, #20202080 30%, #20202040 100%); position:absolute; left:0; top:0; border-radius:16px;}
section.sec02 dd .img img {border-radius:16px;}
section.sec02 dd .txt {position:absolute; left:0; bottom:0; z-index:2; padding:40px 60px;}
section.sec02 dd .txt h5 {font-size:1.75em; font-weight:700;}
section.sec02 dd .txt p {margin:10px 0 30px;}
section.sec02 dd .txt a {display:flex; align-items:center; justify-content:center; gap:1em; width:fit-content; height:50px; border-radius:100px; padding:0 1em 0 2em; background:var(--col01);}
section.sec02 dd .txt a:after {content:'chevron_right'; font-family:var(--ic);}

@media all and (min-width:768px) {
  section.sec02 .control .dots {font-size:1.1em;}
}

@media all and (min-width:1200px) {
  section.sec02 .control {width:340px; position:absolute; right:20px; bottom:0;}
  section.sec02 .control .dots {width:calc(100% - 140px);}
  section.sec02 .control .arr {width:140px;}
  section.sec02 .control .arr span {width:60px; height:60px;}
  section.sec02 dd .img {padding:20px;}
  section.sec02 dd .txt {padding:60px 80px;}
  section.sec02 dd .txt h5 {font-size:2em;}
  section.sec02 dd .txt a {background:#202020; backdrop-filter:blur(20px); transition:0.3s;}
  section.sec02 dd .txt a:hover {background:var(--col01);}
}


/*footer*/
#footer {background:#2A2824; color:#fff; font-size:0.9em; padding:40px 0; letter-spacing:0;}
#footer .pdinner {max-width:1800px;}
#footer .logo {margin:0 0 40px;}
#footer .logo img {width:100%; max-width:140px;}
#footer ul.bottom_li {display:flex; align-items:center; justify-content:flex-start; margin:0 0 20px; gap:10px;}
#footer ul.bottom_li li a {color:#fff; font-weight:600;}
#footer .info {align-items:flex-start;}
#footer .info dl {display:flex; flex-wrap:wrap;}
#footer .info dl dt,
#footer .info dl dd {padding-bottom:5px;}
#footer .info dl dt {width:5em;}
#footer .info dl dd {width:calc(100% - 5em);}
#footer .info dl dd.email {letter-spacing:0.05em;}
#footer p.copy {font-size:0.9em; margin-top:40px; opacity:0.8;}
#pageup {position:fixed; z-index:999; right:20px; bottom:20px; width:60px; height:60px; 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; font-size:1.25em;}

@media all and (min-width:768px) {
	#footer {padding:60px 0;}
  #footer .pdinner {display:flex; align-items:flex-start; gap:60px;}
  #footer ul.bottom_li {margin:0 0 40px; gap:30px;}
  #footer .info {display:flex; justify-content:flex-start;}
  #footer .info dl {width:min(50%, 360px);}
}


/* Common Layout CSS _ 15.05.18 */
.wrap {max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative;}
.inner {max-width:1440px; width:100%; position:relative; margin: 0 auto;}
.pdinner {max-width:1440px; 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: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 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 40px; background:#eee no-repeat center center / cover;}
#sub_vis:after {content:''; display:inline-block; width:100%; height:100%; background:#202020; opacity:0.8; position:absolute; left:0; top:0; z-index:1;}
#sub_vis .pdinner {z-index:2;}
#sub_vis h5 {font-size:1.1em; color:var(--col01); font-weight:700;}
#sub_vis h3 {font-size:1.5em; color:#fff; font-weight:700;}

@media all and (min-width:768px) {
  #sub_vis:after {border-radius:0 0 128px;}
	#sub_vis {padding:120px 0 40px; border-radius:0 0 128px;}
  #sub_vis h5 {font-size:1.25em;}
	#sub_vis h3 {font-size:2.25em;}
}

@media all and (min-width:1200px) {
	#sub_vis {padding:160px 0 60px;}
  #sub_vis h5 {font-size:1.5em;}
	#sub_vis h3 {font-size:3em;}
}


#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:60px 0 80px;}
}


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


/*서브메뉴 - type01 */
#sub_drop {display:flex; gap:10px; width:100%; z-index:100; height:50px;}
#sub_drop .dropdown.home {width:50px; border-radius:100%; 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;}
#sub_drop .dropdown {position:relative; z-index:101; height:50px; background:rgba(32,32,32,0.5); backdrop-filter:blur(20px); border-radius:16px; color:#fff;}
#sub_drop .dropdown.deph01 {width:calc(50% - 70px); max-width:200px;}
#sub_drop .dropdown.deph02 {width:50%; max-width:300px;}
#sub_drop .dropbtn {width:100%; display:flex; align-items:center; position:relative; padding:0 2em 0 1em; cursor:pointer; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; height:50px; font-weight:700;}
#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:55px;}
#sub_drop .dropdown ul {display:flex; flex-wrap:wrap; gap:10px; padding:20px 1em;}
#sub_drop .dropdown ul li {width:100%;}
#sub_drop .dropdown ul li a {display:block; transition:0.3s;}
#sub_drop .dropdown ul li:hover a {color:var(--col01); font-weight:700;}
#sub_drop .dropmenu {display:none; background:rgba(32,32,32,0.95); backdrop-filter:blur(20px); border-radius:16px; box-sizing:content-box; width:100%; overflow:hidden; text-align:center;}

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