@charset "utf-8";

.intro-wrap {position: relative; height:100%; background: #E7378C;}
.intro-wrap > .inner {display: flex; max-width:1920px; width:100%; margin:0 auto;}
.intro-wrap > .inner::after {content:''; display: block; clear:both;}
.intro-wrap .left {width:66.14%; text-align: center; float:left; font-size: 0; background: #E7378C;}
.intro-wrap .left {position: relative;}
.intro-wrap .left-inner {}
/* 섹션 탭 20240116    */
.intro-wrap .tab {position: absolute;  width:100%; margin-top:50px; z-index: 10; padding-left:80px;}
.intro-wrap .tab .tab-box {max-width:600px; width:100%; background:#fff; border-radius: 30px; margin:0 auto; height:45px;}
.intro-wrap .tab ul {display:flex; align-items: center; justify-content: center; height:100%;}
.intro-wrap .tab li {width:33.3333%; text-align: center;padding:1px;}
.intro-wrap .tab li.active {height:calc(100% + 10px); }
.intro-wrap .tab button {font-size: 18px; font-family: 'Dream Medium'; color:#000; width:100%; letter-spacing: 0; padding:9px 0;}
.intro-wrap .tab li.active button {color:#fff; background:#E6378D; border-radius:30px; height:100%; border:1px solid #fff;}
.intro-wrap .tab button:hover {background:rgba(230,55,141,0.5); border-radius: 30px; color:#fff;}
/* section1 */
.intro-wrap .section1 { padding:140px 0 40px 0px; background: #E6378D;}
.intro-wrap .section1-inner {padding-left:80px;}

/* 비디오 */
.intro-wrap .gemflix {padding:0 55px;}
.intro-wrap .video-frame {max-width:1080px; width:100%; margin:0 auto;}
.intro-wrap .video-frame .yt-container {position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
.intro-wrap .video-frame iframe,
.intro-wrap .video-frame object,
.intro-wrap .video-frame embed {position:absolute; top:0; left:0; width:100%; height:100%;}
/* 비디오 리스트 탭 */
.intro-wrap .video-tab {position: relative; margin:35px 0 30px 0;}
.intro-wrap .video-tab ul{display: flex; align-items: center; justify-content: center;}
.intro-wrap .video-tab li {position: relative;  opacity:0.3;}
.intro-wrap .video-tab li::after {content:''; width:2px; height:0px; position: absolute; left:0; bottom:0; background:#fff; transition:height .3s;}
.intro-wrap .video-tab li::before {content:''; width:2px; height:0px; position: absolute; right:0; bottom:0; background:#fff;transition:height .3s;}
.intro-wrap .video-tab li.active {opacity:1;}
.intro-wrap .video-tab li.active::after {height:18px;}
.intro-wrap .video-tab li.active::before {height:18px;}
.intro-wrap .video-tab button {font-size: 16px; font-family: 'Dream Medium'; line-height: 20px; letter-spacing: -.05em; color:#fff; width:100%;padding:6px 20px; transition: all .3s;}
.intro-wrap .video-tab button::after {content:''; width:0%; height:2px; left:50%; bottom:0; background:#fff; position: absolute; transition:all .3s;}
.intro-wrap .video-tab button:hover {animation: upDown 2s infinite linear; opacity:1;}
.intro-wrap .video-tab li.active button {opacity:1;}
.intro-wrap .video-tab li.active button:hover {animation:none;}
.intro-wrap .video-tab li.active button::after {left:0; width:100%;}
@keyframes upDown {
  0% {transform:translateY(0px);}
  50% {transform:translateY(-5px);}
  100% {transform:translateY(0px);}
}
/* 비디오 리스트 */
.intro-wrap .row {position: relative;}
.intro-wrap .row > li.active {display: block;}
.intro-wrap .info {width:100%; margin:0 auto; padding:0 55px; display: none;}
.intro-wrap .info .slider {margin:0 -9px;}
.intro-wrap .info .slider .slick-slide {margin:0 9px; cursor: pointer;}

.intro-wrap .info .con {position: relative; border-radius:10px; overflow:hidden;}
.intro-wrap .info .con p {font-size: 10px; font-family: 'Dream Regular'; color:#fff; letter-spacing: -.05em; position: absolute; top:0; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; padding:0 10px;}
.intro-wrap .info .controls button{display:inline-block; text-indent: -9999px; width:55px; height:100%; background:url('/sites/ko/intro/images/video-arrow.png') no-repeat; position:absolute; top:0;}
.intro-wrap .info .controls .prev-btn {background-position:left 20px center; left:0;}
.intro-wrap .info .controls .next-btn {background-position:right 20px center; right:0;}
.intro-wrap .info .controls button:hover {background:url('/sites/ko/intro/images/video-arrow-on.png') no-repeat;}
.intro-wrap .info .controls .prev-btn:hover {background-position:left 20px center; left:0;}
.intro-wrap .info .controls .next-btn:hover {background-position:right 20px center; right:0;}

/* section2 */
.section2 {position: relative; text-align: center;}
.section2 .slider {height:100%; position: relative;}
.section2 .slider .slick-slide {width:auto; height:100%;}
.section2 .slider .slick-slide img {width:100%; height:100%; object-fit: cover; object-position: left 0;}
.section2 .slider .img-box {font-size: 0;}
.section2 .controls {position:absolute; top:50%; margin-top:-37px; width:100%; height:67px;}
.section2 .controls button {text-indent:-9999px; display:inline-block; width:55px; height:67px; background:url('/sites/ko/intro/images/video-arrow-big.png') no-repeat; position:absolute; top:50%; margin-top:-34px;}
.section2 .controls .section2-prev {background-position:left center; left:20px;}
.section2 .controls .section2-next {background-position:right center; right:20px;}
.section2 .dots {position:absolute; bottom:40px; display: block; width:100%; text-align: center;}
.section2 .dots .slick-dots {display: inline-block;}
.section2 .dots ul::after {content:''; display: block; clear:both; }
.section2 .dots li {float:left; width:12px; height:12px; background: #c8c8c8; border-radius:50px; margin-right: 5px; text-indent: -9999px; transition: all .3s; cursor:pointer;}
.section2 .dots li:hover {background:#005AFF;}
.section2 .dots li:last-child {margin-right: 0;}
.section2 .dots li.slick-active {width:40px; height:12px; background:#005AFF;}

/* Right */
.intro-wrap .right {width:calc(100% - 66.14%); float:right; padding:50px 80px 35px 80px; background: #E6378D;}
.intro-wrap .right .top-logo {text-align: right;}
/* 홈페이지 링크 3개 */
.intro-wrap .homepage-link {margin-top: 40px;}
.intro-wrap .homepage-link ul {display: flex; align-items: center; margin:0 -20px;}
.intro-wrap .homepage-link li {width:33.3333%; padding:0 20px; height: 130px; display: table;}
.intro-wrap .homepage-link li a {color:#fff; width: 100%; height: 100%; display:table-cell; vertical-align: middle; line-height: 26px;  border:1px solid #fff; border-radius:10px; background: transparent; text-align: center; font-size: 20px; font-family: 'Dream Medium'; letter-spacing: -.05em;}
.intro-wrap .homepage-link li:nth-child(1) a:hover {background:#fff; color:#E6378D;}
.intro-wrap .homepage-link li:nth-child(2) a:hover {background:#23B2E8; color:#fff; border:1px solid #23B2E8;}
.intro-wrap .homepage-link li:nth-child(3) a:hover {background:#C5D700; color:#fff; border:1px solid #C5D700;}
/* 바로가기 링크 6개 */
.intro-wrap .shortcut-link {position: relative; margin-top: 50px;}
.intro-wrap .shortcut-link li {border-bottom:1px solid rgba(255,255,255,0.3);}
.intro-wrap .shortcut-link a {width:100%; display: block; font-size: 16.98px; letter-spacing: -.05em; color:#fff; font-family: 'Dream Medium'; background:url('/sites/edu/intro/images/intro-blank.png') no-repeat right 20px center;  padding:15px 15px 15px 20px;}
.intro-wrap .shortcut-link a span {display: inline-block; position: relative;}
.intro-wrap .shortcut-link a span::after {content:''; width:0%; height:1px; background:#fff; position: absolute; bottom:0; left:0; transition:width .3s;}
.intro-wrap .shortcut-link a:hover span::after {width:100%;}
/* 푸터 */
.intro-wrap .intro-footer {position: relative;}
/* 푸터 -SNS버튼 */
.intro-wrap .footer-sns {position: relative; margin-top: 50px;}
.intro-wrap .footer-sns ul {display: flex; align-items: center;}
.intro-wrap .footer-sns li {width:32px; height:32px; text-indent: -9999px;background:url('/sites/ko/intro/images/intro-sns.png') no-repeat; margin-right: 5px;}
.intro-wrap .footer-sns li > a {display:block; width:100%; height:100%;}
.intro-wrap .footer-sns li.fb {background-position: 0 0;}
.intro-wrap .footer-sns li.insta {background-position:-37px 0;}
.intro-wrap .footer-sns li.yt {background-position:-74px 0;}
.intro-wrap .footer-sns li.blog {background-position:-111px 0;}
.intro-wrap .footer-txt {margin-top: 15px;}
.intro-wrap .address {font-family: 'Dream Regular'; font-size: 14px; color:#fff; letter-spacing: -.05em; line-height: 25px; margin-bottom: 10px;}
.intro-wrap .copyright {font-family: 'Gmarket Light'; color:#fff;font-size: 12px; line-height: 20px; text-transform: uppercase; letter-spacing: 0;}
.intro-wrap .intro-footer .reverse-response {display: none;}
@media all and (max-width:1850px) {
  .intro-wrap .tab  {padding-left:25px;}
  .intro-wrap .section1-inner {padding-left:25px;}
  .intro-wrap .right {padding: 50px 25px 40px 25px;}
  .intro-wrap .video-tab button {font-size: 15px;}
  .intro-wrap .shortcut-link {margin-top: 25px;}
  .intro-wrap .footer-sns {margin-top: 25px;}
  .section2 .slider {height:100vh; overflow:hidden;}
  .section2 .slider .slick-slide {height:100vh;}
}
@media all and (max-width:1500px) {
  .intro-wrap .shortcut-link a {padding:15px 20px 15px 15px; font-size: 15px;}
  /* .intro-wrap .address > br {display: none;} */
}
@media all and (max-width:1200px) { 
  .intro-wrap .address > br {display: none;}
  .intro-wrap .left {width:100%;}
  .intro-wrap .right {width:100%; padding:25px 25px 20px 25px;}
  .intro-wrap > .inner {flex-wrap:wrap; flex-direction: column-reverse;height:auto; position: relative;}
  .intro-wrap .video-frame .yt-container {padding-top:0; padding-bottom:56.25%;}
  .intro-wrap .section1-inner {padding:0 25px;}
  .intro-wrap .tab {margin-top: 20px; width:100%; padding-left:0; max-width:unset;}
  .intro-wrap .left-inner {padding-bottom:170px;}
  .intro-wrap .right .top-logo img {width:250px;}
  .intro-wrap .homepage-link {margin-top: 20px;}
  .intro-wrap .homepage-link li {height:65px;}
  .intro-wrap .homepage-link li a { line-height: 22px;}
  .intro-wrap .shortcut-link ul::after {content:''; display: block; clear:both;}
  .intro-wrap .shortcut-link li {width:33.3333%; float:left;}
  .intro-wrap .shortcut-link a {padding:10px 20px 10px 15px;}
  .intro-wrap .intro-footer {position:absolute; bottom:25px; width:100%; text-align: center; left:0;}
  .intro-wrap .intro-footer .reverse-response {display: block;}
  .intro-wrap .footer-sns ul {justify-content: center;}
  .intro-wrap .section1 {padding:90px 0 40px 0;}
  .section2 .slider {height:100%; margin-top: 80px;}
  .intro-wrap .copyright {font-size:11;}
  .section2 .slider .slick-slide {height:740px;}
  .section2 .slider .img-box {height:100%;}
  .intro-wrap .footer-sns li:last-child {margin-right:0;}
}
@media all and (max-width:1024px) {
  /* .intro-wrap .shortcut-link ul {display: flex; flex-wrap:wrap;}
  .intro-wrap .shortcut-link li {width:33.3333%;} */ 
  .intro-wrap .video-tab {padding-bottom:20px}
  .intro-wrap .video-tab ul {flex-wrap:wrap;}
  .intro-wrap .video-tab ul > li {margin-bottom:20px;}
  /* .intro-wrap .video-tab ul {white-space: nowrap; justify-content: unset;} */
}
@media all and (max-width:800px) {
  /* .intro-wrap .video-tab ul {flex-wrap:wrap;}
  .intro-wrap .video-tab li {width:33.3333%; margin-bottom: 15px;} */
}
@media all and (max-width:768px) {
  .intro-wrap .left-inner {padding-bottom:195px;}
  .intro-wrap .section1 {padding:70px 0 20px 0;} 
  .intro-wrap .gemflix {padding:0px;}
  .section2 .slider .slick-slide {height:450px;}
  .intro-wrap .tab {padding:0 30px; margin-top:10px;}
  .intro-wrap .video-tab {margin:15px 0 15px 0; padding:0 25px 0px 25px}
  .intro-wrap .video-tab ul > li {margin:0 10px 15px 10px;}
  .intro-wrap .video-tab li {transition:all .3s;}
  .intro-wrap .video-tab li::after {content:''; width:2px; height:18px; position: absolute; left:0; bottom:0; background:#fff; transition:all .3s; opacity:.3}
  .intro-wrap .video-tab li::before {content:''; width:2px; height:18px; position: absolute; right:0; bottom:0; background:#fff;transition:all .3s;opacity:.3}
  .intro-wrap .video-tab li:hover::after {animation: upDown 2s infinite linear; }
  .intro-wrap .video-tab li:hover::before {animation: upDown 2s infinite linear; }
  .intro-wrap .video-tab li.active::after,
  .intro-wrap .video-tab li.active:hover::after{opacity:1; animation:unset; }
  .intro-wrap .video-tab li.active::before,
  .intro-wrap .video-tab li.active:hover::before{opacity:1;animation:unset;}
  .intro-wrap .video-tab li button::after {width:100%; left:0; transition: all .3s;}
  .intro-wrap .shortcut-link li {width:50%;}
  .intro-wrap .homepage-link li a {font-size: 15px; line-height: 20px;}
  .intro-wrap .homepage-link ul {margin:0 -10px;}
  .intro-wrap .homepage-link li {padding:0 10px;}
  .intro-wrap .shortcut-link a {background: none;}
}
@media all and (max-width:600px) {
  .intro-wrap .right .top-logo {text-align: center;}
  .intro-wrap .right .top-logo img {width: 210px;}
  .intro-wrap .video-tab button {font-size: 14px;}
  .intro-wrap .tab button {font-size: 15px;}
  .intro-wrap .shortcut-link a {font-size: 13px;}
  .intro-wrap .shortcut-link ul {border:1px solid rgba(255,255,255,0.3);}
  .intro-wrap .shortcut-link li {border-bottom:unset; text-align: center; border-bottom:1px solid rgba(255,255,255,0.3); border-right:1px solid rgba(255,255,255,0.3);}
  .intro-wrap .shortcut-link li:nth-child(2n) {border-right:0;}
  .intro-wrap .shortcut-link li:nth-last-child(-n+2) {border-bottom:0;}
  .intro-wrap .info {padding:0; position: relative;}
  .section2 .dots {bottom:20px;} 
  .intro-wrap .address {font-size: 13px;}
  /*  .intro-wrap .info .slider {margin:0 55px;}
  .intro-wrap .info .slider .slick-list {overflow:unset;} */
  .intro-wrap .info {padding:0;}
  .intro-wrap .section1-inner {padding:0;}
  .intro-wrap .info .slider .slick-slide {margin:0 30px;}
  .intro-wrap .info .controls .prev-btn {left:155px;}
  .intro-wrap .info .controls .next-btn {right:155px;}
  .intro-wrap .info .controls .prev-btn:hover {left:155px;}
  .intro-wrap .info .controls .next-btn:hover {right:155px;}
  /*.intro-wrap .info .slider .slick-list {padding:70px !important;} */
  .intro-wrap .info .slider .slick-slide {opacity:.4;	-webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); transition: all 0.3s ease-in-out; z-index:1; position:relative; margin:0 -50px;}
  .intro-wrap .info .slider .slick-center {opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); z-index:2;}
    .intro-wrap .info .controls .next-btn {right:0px;}
  .intro-wrap .info .controls .prev-btn {left:0px;}
  .intro-wrap .info .controls .prev-btn:hover {left:0px;}
  .intro-wrap .info .controls .next-btn:hover {right:0px;}
}
@media all and (max-width:500px) {

  .intro-wrap .gemflix {padding:0 25px;}
  .intro-wrap .video-tab {padding: 0 25px 0px 25px;}

}

/* Font */
@font-face {
  font-family: "Noto Thin";
  font-style: normal;
  src: url(/sites/ko/intro/font/noto/NotoSans-Thin.woff2) format("woff2"), url(/sites/ko/intro/font/noto/NotoSans-Thin.woff) format("woff");
}
@font-face {
  font-family: "Noto Light";
  font-style: normal;
  src: url(/sites/ko/intro/font/noto/NotoSans-Light.woff2) format("woff2"),
    url(/sites/ko/intro/font/noto/NotoSans-Light.woff) format("woff");
}
@font-face {
  font-family: "Noto DemiLight";
  font-style: normal;
  src: url(/sites/ko/intro/font/noto/NotoSans-DemiLight.woff2) format("woff2"),
    url(/sites/ko/intro/font/noto/NotoSans-DemiLight.woff) format("woff");
}
@font-face {
  font-family: "Noto Regular";
  font-style: normal;
  src: url(/sites/ko/intro/font/noto/NotoSans-Regular.woff2) format("woff2"),
    url(/sites/ko/intro/font/noto/NotoSans-Regular.woff) format("woff");
}
@font-face {
  font-family: "Noto Medium";
  font-style: normal;
  src: url(/sites/ko/intro/font/noto/NotoSans-Medium.woff2) format("woff2"),
    url(/sites/ko/intro/font/noto/NotoSans-Medium.woff) format("woff");
}
@font-face {
  font-family: "Noto Bold";
  font-style: normal;
  src: url(/sites/ko/intro/font/noto/NotoSans-Bold.woff2) format("woff2"), url(/sites/ko/intro/font/noto/NotoSans-Bold.woff) format("woff");
}
@font-face {
  font-family: "Noto Black";
  font-style: normal;
  src: url(/sites/ko/intro/font/noto/NotoSans-Black.woff2) format("woff2"),
    url(/sites/ko/intro/font/noto/NotoSans-Black.woff) format("woff");
}

@font-face {
  font-family: "Dream Thin";
  font-style: normal;
  src: url(/sites/ko/intro/font/dream/S-CoreDream-1Thin.woff2) format("woff2"),
    url(/sites/ko/intro/font/dream/S-CoreDream-1Thin.woff) format("woff");
}
@font-face {
  font-family: "Dream ExtraLight";
  font-style: normal;
  src: url(/sites/ko/intro/font/dream/S-CoreDream-2ExtraLight.woff2) format("woff2"),
    url(/sites/ko/intro/font/dream/S-CoreDream-2ExtraLight.woff) format("woff");
}
@font-face {
  font-family: "Dream Light";
  font-style: normal;
  src: url(/sites/ko/intro/font/dream/S-CoreDream-3Light.woff2) format("woff2"),
    url(/sites/ko/intro/font/dream/S-CoreDream-3Light.woff) format("woff");
}
@font-face {
  font-family: "Dream Regular";
  font-style: normal;
  src: url(/sites/ko/intro/font/dream/S-CoreDream-4Regular.woff2) format("woff2"),
    url(/sites/ko/intro/font/dream/S-CoreDream-4Regular.woff) format("woff");
}
@font-face {
  font-family: "Dream Medium";
  font-style: normal;
  src: url(/sites/ko/intro/font/dream/S-CoreDream-5Medium.woff2) format("woff2"),
    url(/sites/ko/intro/font/dream/S-CoreDream-5Medium.woff) format("woff");
}
@font-face {
  font-family: "Dream Bold";
  font-style: normal;
  src: url(/sites/ko/intro/font/dream/S-CoreDream-6Bold.woff2) format("woff2"),
    url(/sites/ko/intro/font/dream/S-CoreDream-6Bold.woff) format("woff");
}
@font-face {
  font-family: "Dream ExtraBold";
  font-style: normal;
  src: url(/sites/ko/intro/font/dream/S-CoreDream-7ExtraBold.woff2) format("woff2"),
    url(/sites/ko/intro/font/dream/S-CoreDream-7ExtraBold.woff) format("woff");
}

@font-face {
  font-family: "Gmarket Light";
  font-style: normal;
  src: url(/sites/ko/intro/font/gmarket/Gmarket-Light.woff2) format("woff2"),
    url(/sites/ko/intro/font/gmarket/Gmarket-Light.woff) format("woff");
}
@font-face {
  font-family: "Gmarket Medium";
  font-style: normal;
  src: url(/sites/ko/intro/font/gmarket/Gmarket-Medium.woff2) format("woff2"),
    url(/sites/ko/intro/font/gmarket/Gmarket-Medium.woff) format("woff");
}
@font-face {
  font-family: "Gmarket Bold";
  font-style: normal;
  src: url(/sites/ko/intro/font/gmarket/Gmarket-Bold.woff2) format("woff2"),
    url(/sites/ko/intro/font/gmarket/Gmarket-Bold.woff) format("woff");
}

@font-face {
  font-family: "Titil ExtraLight";
  font-style: normal;
  src: url(/sites/ko/intro/font/titillium/TitilliumWeb-ExtraLight.woff2) format("woff2"),
    url(/sites/ko/intro/font/titillium/TitilliumWeb-ExtraLight.woff) format("woff");
}
@font-face {
  font-family: "Titil Light";
  font-style: normal;
  src: url(/sites/ko/intro/font/titillium/TitilliumWeb-Light.woff2) format("woff2"),
    url(/sites/ko/intro/font/titillium/TitilliumWeb-Light.woff) format("woff");
}
@font-face {
  font-family: "Titil Regular";
  font-style: normal;
  src: url(/sites/ko/intro/font/titillium/TitilliumWeb-Regular.woff2) format("woff2"),
    url(/sites/ko/intro/font/titillium/TitilliumWeb-Regular.woff) format("woff");
}
@font-face {
  font-family: "Titil SemiBold";
  font-style: normal;
  src: url(/sites/ko/intro/font/titillium/TitilliumWeb-SemiBold.woff2) format("woff2"),
    url(/sites/ko/intro/font/titillium/TitilliumWeb-SemiBold.woff) format("woff");
}
@font-face {
  font-family: "Titil Bold";
  font-style: normal;
  src: url(/sites/ko/intro/font/titillium/TitilliumWeb-Bold.woff2) format("woff2"),
    url(/sites/ko/intro/font/titillium/TitilliumWeb-Bold.woff) format("woff");
}
@font-face {
  font-family: "Titil Black";
  font-style: normal;
  src: url(/sites/ko/intro/font/titillium/TitilliumWeb-Black.woff2) format("woff2"),
    url(/sites/ko/intro/font/titillium/TitilliumWeb-Black.woff) format("woff");
}

@font-face {
  font-family: "Mont ExtraLight";
  font-style: normal;
  src: url(/sites/ko/intro/font/mont/Montserrat-ExtraLight.woff2) format("woff2"),
    url(/sites/ko/intro/font/mont/Montserrat-ExtraLight.woff) format("woff");
}
@font-face {
  font-family: "Mont Light";
  font-style: normal;
  src: url(/sites/ko/intro/font/mont/Montserrat-Light.woff2) format("woff2"),
    url(/sites/ko/intro/font/mont/Montserrat-Light.woff) format("woff");
}
@font-face {
  font-family: "Mont Regular";
  font-style: normal;
  src: url(/sites/ko/intro/font/mont/Montserrat-Regular.woff2) format("woff2"),
    url(/sites/ko/intro/font/mont/Montserrat-Regular.woff) format("woff");
}
@font-face {
  font-family: "Mont Medium";
  font-style: normal;
  src: url(/sites/ko/intro/font/mont/Montserrat-Medium.woff2) format("woff2"),
    url(/sites/ko/intro/font/mont/Montserrat-Medium.woff) format("woff");
}
@font-face {
  font-family: "Mont SemiBold";
  font-style: normal;
  src: url(/sites/ko/intro/font/mont/Montserrat-SemiBold.woff2) format("woff2"),
    url(/sites/ko/intro/font/mont/Montserrat-SemiBold.woff) format("woff");
}
@font-face {
  font-family: "Mont Bold";
  font-style: normal;
  src: url(/sites/ko/intro/font/mont/Montserrat-Bold.woff2) format("woff2"),
    url(/sites/ko/intro/font/mont/Montserrat-Bold.woff) format("woff");
}

@font-face {
  font-family: "Play Regular";
  font-style: normal;
  src: url(/sites/ko/intro/font/play/Play-Regular.woff) format("woff");
}
@font-face {
  font-family: "Play Bold";
  font-style: normal;
  src: url(/sites/ko/intro/font/play/Play-Bold.woff) format("woff");
}

@font-face {
  font-family: "Sebang Regular";
  font-style: normal;
  src: url(/sites/ko/intro/font/sebang/SEBANG-Gothic.woff) format("woff");
}
@font-face {
  font-family: "Sebang Bold";
  font-style: normal;
  src: url(/sites/ko/intro/font/sebang/SEBANG-Gothic-Bold.woff) format("woff");
}

/* Button Reset*/
button {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Copy Code */
.copyBtn {
  position: absolute;
  right: 100%;
  top: 0;
  padding-right: 10px;
}
.copyBtn span {
  display: inline-block;
  background: #fff;
  padding: 7px 15px;
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.45s;
}
.copyBtn.on span {
  opacity: 1;
}
.copyBtn:hover span {
  background: #fcaf17;
  border: 1px solid #fcaf17;
}

.wrap {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  margin-top: 20px;
}
/* 스타일가이드 입니다. */
.style-guide-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #c7c7c7;
  max-width: 1400px;
  width: 100%;
  margin: 40px auto;
}
.style-guide-wrap p {
  font-size: 30px;
  color: #000;
  font-family: "Noto Medium";
}
/* 가져가지 마세요 */

/* CSS Reset */
*,
:after,
:before,
::after,
::before {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html,
body {
  overflow: visible;
  width: 100%;
  height: 100%;
  font-family: "Dream Regular", sans-serif;
  line-height: 1.5;
  font-size: 16px;
  color: #333;
  word-wrap: break-word;
  letter-spacing: -0.5px;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
p,
button {
  margin: 0;
  padding: 0;
}
body {
  word-break: keep-all;
  overflow-x: hidden;
}
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #e6378d;
  border-radius: 3px;
}
body::-webkit-scrollbar-track {
  background-color: #4b585f;
}
header,
article,
section,
nav,
footer {
  display: block;
}
img,
fieldset,
iframe,
button {
  border: 0 none;
}
li {
  list-style: none;
}
img {
  width: auto;
  max-width: 100%;
  vertical-align: top;
}
i,
em,
address {
  font-style: normal;
}
label,
button {
  cursor: pointer;
}
button {
  font-family: "Dream Regular", sans-serif;
  background-color: transparent;
  overflow: visible;
  border: 0;
}
a,
button,
input {
  border: 0 none;
}
a:focus,
button:focus,
input:focus,
select:focus {
  outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #333;
}
a:link,
a:active,
a:visited {
  text-decoration: none;
  color: #000;
}
a:hover {
  text-decoration: none;
  color: #2247a6;
  transition: all 0.125s cubic-bezier(0.7, 0, 0.3, 1);
}
legend {
  width: 0;
  height: 0;
  font-size: 0;
  position: absolute;
  z-index: -1;
}
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
}
caption {
  width: 0;
  height: 0;
  padding: 0;
  font-size: 0;
  opacity: 0;
}
th {
  text-align: center;
}
input::-ms-clear {
  display: none;
}
input,
button {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  font-family: "Dream Regular";
}
input[type="radio"] {
  position: relative;
  top: 2px;
}
pre {
  white-space: pre-line;
  background-color: #fff;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  overflow-y: auto;
}
select::-ms-expand {
  display: none;
}
textarea {
  resize: none;
}
figure {
  text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 400;
}

/* Wizard Reset */
._objHtml {
  overflow: visible;
}
._contentBuilder ._obj ._relative {
  position: relative;
}
.simplemodal-wrap {
  font-size: 13px;
}
.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
  display: none;
}

/* Clear Fix */
.clearfix,
.clear-fix {
  zoom: 1;
}
.clearfix::after,
.clear-fix::after {
  content: "";
  display: block;
  clear: both;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}