@charset "utf-8";

/*공통*/
h2 { font-family:'SCDream', 'NotoSansKR', sans-serif; font-size:4.5rem; margin:0 0 4rem;  }
h2 span { font-family:'NotoSansKR', sans-serif; font-size:2rem; color:#666; font-weight:400; margin:0 0 0 2rem;}
@media all and (max-width:768px){
  h2 span {display:block; margin:1rem 0 0 ;}
}

.visual {position:relative; margin:0 0 9rem; }
.visual > a.control { position:absolute; left:2rem; top:50%; color:#fff; line-height:6rem; height:6rem; text-transform:uppercase; font-size:1.5rem; padding:0 0 0 7.5rem; transform:translate(0, -50%); z-index:10; }
.visual > a.control::before {content:''; position:absolute; left:0; top:0; width:6rem; height:6rem; border:1px solid rgba(255,255,255,0.3); border-radius:50%; }
.visual > a.control::after { content:''; position:absolute; left:2.8rem; top:2.5rem; width:1rem; height:1rem; border-top:3px solid #fff; border-left:3px solid #fff; transform:rotate(-45deg); }
.visual > a.control.next { left:auto; right:2rem; padding:0 7.5rem 0 0;}
.visual > a.control.next::before {left:auto; right:0;}
.visual > a.control.next::after {left:auto; right:2.8rem; transform:rotate(135deg);}
.visual .paging { position:absolute; width:auto; max-width:none; left:50%; bottom:10rem; z-index:20; transform:translate(-50%, 0); }
.visual .paging a {display:inline-block; width:3rem; height:3rem; background:url('/img/main/control.png') no-repeat 0 0/200% auto; text-indent:-9999px; vertical-align:top; }
.visual .paging a.play { display:none; background-position:100% 0;}
.visual .paging .slick-dots {display:inline-block; vertical-align:top; margin:0.5rem 0 0; }
.visual .paging .slick-dots li { float:left; background:transparent; height:auto; padding:0 0.5rem; }
.visual .paging .slick-dots li button { width:2rem; height:2rem; border:3px solid #fff; cursor:pointer; background:transparent; text-indent:-9999px; border-radius:50%; vertical-align:top; }
.visual .paging .slick-dots li.slick-active button {background:#00d876;}
.visual_ul li { float:left; position:relative; height:90rem; background:#000; }
.visual_ul li.bg1 {background:url('/img/main/visual_bg.jpg') no-repeat center/cover; }
.visual_ul .wrap { position:relative; height:90rem; }
.visual_ul dl { position:absolute; width:90%; left:5%; top:50%; transform:translate(0, -50%); font-family:'SCDream', 'NotoSansKR', sans-serif; font-size:2.5rem; color:#fff; text-shadow:0 0 1rem rgba(0,0,0,0.5); text-align:center; z-index:20; }
.visual_ul dl dd { font-size:4rem; font-weight:600; line-height:1.4; margin:3rem 0 0; }
.visual_ul dl dd span {color:#00d876;}
.visual_ul video { position:absolute; left:50%; top:50%; width:100%; transform:translate(-50%, -50%); z-index:10; }
.visual_ul ul.item { display:inline-block; overflow:hidden; margin:2rem 0 0; }
.visual_ul ul.item li { float:left;height:auto; background:transparent; }
.visual_ul ul.item li img {width:25rem;}
.visual_ul ul.item li a { position:relative; display:block; border:1px solid rgba(255,255,255,0.1); box-shadow:0 0 1rem rgba(0,0,0,0.3); border-radius:50%; margin:2rem; transition:0.3s; }
.visual_ul ul.item li a span {position:absolute; display:inline-block; right:0; bottom:-1rem; background:#00d876; color:#fff; border-radius:3rem; text-shadow:none; font-size:1.7rem; font-weight:400; text-transform:uppercase; padding:1rem 3.5rem 1rem 2rem; letter-spacing:0; opacity:0; transition:0.5s; }
.visual_ul ul.item li a span::before {content:''; position:absolute; right:2rem; top:1.8rem; width:0.7rem; height:0.7rem; background:linear-gradient(45deg, transparent 50%, #fff 50%); opacity:1; transform:rotate(45deg);}
.visual_ul ul.item li a:hover { background:#fff; }
.visual_ul ul.item li a:hover span { opacity:1; bottom:0;}
.visual_ul a.item {display:none;}
@media all and (max-width:1700px){
  .visual > a.control {display:none !important;}
}
@media all and (max-width:1600px){
  .visual_ul video {width:auto; height:100%;}
}
@media all and (max-width:1200px){
  .visual_ul .wrap, .visual_ul li.slick-slide  {height:80rem;}
}
@media all and (max-width:1023px){
  .visual .paging {bottom:5rem;}
  .visual_ul .wrap, .visual_ul li.slick-slide  {height:65rem;}
  .visual_ul ul.item li img {width:20rem;}
}
@media all and (max-width:768px){
  .visual_ul .wrap, .visual_ul li.slick-slide  {height:50rem;}
  .visual_ul dl dd {font-size:3.2rem;}
  .visual_ul ul.item {display:none;}
  .visual_ul a.item { position:relative; display:inline-block; background:#00d876; border-radius:3rem; font-size:1.7rem; font-weight:400; padding:1rem 3.5rem 1rem 2rem; margin:3rem 0 0; }
  .visual_ul a.item::before {content:''; position:absolute; right:2rem; top:1.8rem; width:0.7rem; height:0.7rem; background:linear-gradient(45deg, transparent 50%, #fff 50%); opacity:1; transform:rotate(45deg);}
  .visual_ul a.item span { color:#fff; }
}
@media all and (max-width:480px){
  .visual_ul dl dd p { display:inline; }
}

.product { position:relative; padding:0 0 8rem; margin:0 auto 9rem; }
.product li { float:left; position:relative; padding:0 2rem; }
.product li dl {float:left; width:50%; }
.product li dt { font-family:'SCDream', 'NotoSansKR', sans-serif; font-size:3rem; font-weight:600; }
.product li dd ul { overflow:hidden; margin:4rem 0 3rem; }
.product li dd li { position:relative; font-size:1.8rem; padding:0.5rem 0 0.5rem 35rem; }
.product li dd li::before {content:''; position:absolute; left:0; top:1.8rem; width:0.6rem; height:0.6rem; background:#00d876; border-radius:50%; }
.product li dd li strong {position:absolute; left:1.5rem; top:0.5rem;}
.product li dd a { position:relative; display:inline-block; background:#02c46c; color:#fff; padding:1rem 6rem 1rem 2rem; border-radius:1rem; }
.product li dd a::before {content:''; position:absolute; right:1.5rem; top:0.9rem; width:3rem; height:3rem; background:#49e09b; border-radius:50%; }
.product li dd a::after { content:''; position:absolute; top:1.7rem; right:2.5rem; width:0.7rem; height:0.7rem; border-bottom:3px solid #fff; border-left:3px solid #fff; transform:rotate(-45deg); }
.product li p.img { display:flex; align-items:center; position:absolute; right:0; top:0; width:45%; height:100%; background:#e3e5e8; }
.product li p.img img {margin:0 auto;}
.product .paging {position:absolute; left:0; bottom:1rem; width:calc(100% - 13rem); height:1rem; background:#e3e5e8; border-radius:0.5rem; overflow:hidden; }
.product .paging li {float:left;}
.product .paging li.slick-active {background:#02c46c;}
.product .paging button {width:100%; border:0; text-indent:-9999px; background:transparent; cursor:pointer; }
.product a.control { display:block; position:absolute; right:5rem; bottom:0; width:4rem; height:4rem; text-indent:-9999px; overflow:hidden; }
.product a.control.next { right:0; transform:rotate(180deg); }
.product a.control::before {content:''; position:absolute; left:1.5rem; top:1rem; width:1.5rem; height:1.5rem; border-top:3px solid #444; border-left:3px solid #444; transform:rotate(-45deg);}
.product a.more { position:absolute; right:0; top:1.5rem; text-indent:-99999px; width:4rem; height:4rem; overflow:hidden; }
.product a.more::before {content:'+'; position:absolute; left:0; top:0; width:100%; height:100%; font-size:3rem; background:#e3e5e8; color:#333; text-indent:0; text-align:center; line-height:4rem; }
@media all and (max-width:1023px){
  .product li {padding:0;}
  .product li dl { float:none; width:100%; }
  .product li p.img { position:relative; right:auto; top:auto; width:100%; height:30rem; margin:3rem 0 0;  }
}
@media all and (max-width:480px){
  .product li dd li strong {position:relative; left:auto; top:auto; margin:0 1rem 0 0; }
  .product li dd li { padding:0.5rem 0 0.5rem 1.5rem; }
}

.whyL { position:relative; margin:0 auto 9rem; }
.whyL a.control {position:absolute; left:-8rem; top:55%; width:6rem; height:6rem; background:rgba(0,0,0,0.5); text-indent:-9999px; z-index:20; overflow:hidden;}
.whyL a.control::before {content:''; position:absolute; left:2.5rem; top:2.2rem; width:1.3rem; height:1.3rem; border-top:3px solid #fff; border-left:3px solid #fff; transform:rotate(-45deg); }
.whyL a.control.next {left:auto; right:-8rem; transform:rotate(180deg);}
.whyL_ul .slick-list { overflow:inherit; }
.whyL_ul li { float:left; width:0; padding:0 2rem;}
.whyL_ul li > div { position:relative; text-align:center; background:#000; color:#fff; height:60rem; padding:5rem; opacity:0.3;}
.whyL_ul li > div::before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.5; z-index:10; }
.whyL_ul li > div.bg1::before { background:url('/img/main/why_bg1.jpg') no-repeat center; }
.whyL_ul li > div.bg2::before { background:url('/img/main/why_bg2.jpg') no-repeat center; }
.whyL_ul li > div.bg3::before { background:url('/img/main/why_bg3.jpg') no-repeat center; }
.whyL_ul li > div > * { position:relative; z-index:20; }
.whyL_ul li.slick-active > div {opacity:1;}
.whyL_ul li h3 {font-size:3.5rem; }
.whyL_ul li p {font-size:2rem; margin:2rem 0 4rem; }
.whyL_ul li img {display:block; margin:0 auto;}
.whyL_ul li > div.bg3 div img { display:inline-block; margin:0; vertical-align:top; }
.whyL_ul li > div.bg3 div ul { display:inline-block; vertical-align:top; margin:3rem 0 0 1rem; }
.whyL_ul li > div.bg3 div ul li { position:relative; float:none; width:auto; font-family:'SCDream', 'NotoSansKR', sans-serif; font-size:2rem; font-weight:600; padding:1rem 0 1rem 15rem; text-align:left; }
.whyL_ul li > div.bg3 div ul li strong {position:absolute; left:0; top:1rem; color:#02c46c;}
@media all and (max-width:1600px){
  .whyL a.control {left:0;}
  .whyL a.control.next {right:0; }
  .whyL_ul .slick-list { overflow:hidden; }
  .whyL_ul li {padding:0;}
  .whyL_ul li > div {opacity:1;}
}
@media all and (max-width:1023px){
  .whyL_ul li > div.bg3 div ul {float:right; width:23rem; }
}
@media all and (max-width:768px){
  .whyL_ul li > div.bg3 div ul {float:none; width:100%; margin:0; }
  .whyL_ul li > div.bg3 div ul li {float:left; width:25%; padding:3rem 0 0 ; text-align:center;}
  .whyL_ul li > div.bg3 div ul li strong { display:block; position:relative; left:auto; top:auto;  }
}
@media all and (max-width:480px){
  .whyL_ul li p { margin:2rem 0 3rem; }
  .whyL_ul li > div {height:50rem;}
  .whyL_ul li > div.bg3 div ul li {width:50%; padding:1rem 0 0 ; }
}

.part {margin:0 auto 9rem;}
.part ul { height:40rem; }
.part li {float:left; width:48%;}
.part li:first-of-type { margin: 0 4% 0 0;}
.part li h3 {font-size:2.8rem; margin:0 0 2rem; }
.part a { float:left; width:48.5%; height:34rem; background:#e3e5e8; padding:3rem; margin:0 0 0 3%; transition:all 0.5s; }
.part a:first-of-type { margin:0; }
.part a img {display:block; margin:0 auto; border-radius:50%; }
.part a p { font-size:2rem; font-weight:600; margin:2rem 0 0; }
.part a.on {box-shadow:1px 1px 12px rgba(0,0,0,0.2); background:#fff; }
@media all and (max-width:768px){
  .part ul {overflow:hidden; height:auto; }
  .part li {width:100%;}
  .part li:first-of-type { margin: 0 0 2rem;}
  .part a {height:auto; }
  .part a.on {box-shadow:none; border:1px solid #ddd; background:#fff; }
}
@media all and (max-width:480px){
  .part a {padding:2rem;}
  .part a img { width:100%;}
  .part a dl { width:100%; }
}

.video {background:#e3e5e8; padding:9rem 0;}
.video {overflow:hidden;}
.video iframe {float:left; width:47%; height:40rem; }
.video .wrap > a { display:block; float:right; width:47%; min-height:17rem; }
.video .wrap > a dt {font-size:2.2rem; font-weight:600; margin:0 0 1rem;}
.video a.news { background:#fff; padding:3rem 4rem 0; }
.video a.news dt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video a.news dt span {display:inline-block; background:#02c46c; color:#fff; font-size:1.4rem; padding:0.3rem 0.5rem; }
.video a.news dd { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video a.down { position:relative; background:#02c46c; padding:4rem 4rem 0; margin:6rem 0 0; }
.video a.down::before {content:''; position:absolute; right:4rem; top:7rem; width:6rem; height:6rem; background:#114f33; border-radius:50%; opacity:0; transition:all 0.5s;}
.video a.down::after { content:''; position:absolute; top:9.2rem; right:6.4rem; width:1.2rem; height:1.2rem; border-top:3px solid #fff; border-right:3px solid #fff; transform:rotate(45deg); opacity:0; transition:all 0.5s; }
.video a:hover.down::before {top:5rem; opacity:1; }
.video a:hover.down::after {top:7.2rem; opacity:1; }
.video a.down dl {background:url('/img/main/bookIcon.png') no-repeat left center; padding:0 0 0 9rem; color:#fff; }
@media all and (max-width:1023px){
  .video iframe {width:100%;}
  .video .wrap > a { float:left; width:48%; }
  .video a.news { margin:4rem 4% 0 0; }
  .video a.down { margin:4rem 0 0; }
}
@media all and (max-width:768px){
  .video .wrap > a { width:100%; margin:3rem 0 0 !important; }
}