@import url("common.css"); .bottom_quick {width:100%; position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:9999; transition:all 0.6s ease;} .bottom_quick.close {bottom:-75px; transition:all 0.6s ease;} .bottom_quick .quick_close {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:75px; height:25px; border-radius:15px 15px 0 0; background:Var(--main); margin:0 auto;} .bottom_quick .quick_close::before {content:'\e313'; font-size:22px; line-height:22px; height:22px; color:var(--white); font-family:var(--icon); transition:all 0.6s ease;} .bottom_quick.close .quick_close::before {transform:rotate(180deg); transition:all 0.6s ease;} .bottom_quick .bottom_quick_in {width:100%; height:75px; background:var(--main); border-radius:20px 20px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:0 40px; box-sizing:border-box;} .bottom_quick .bottom_quick_in h4 {display:flex; flex-wrap:wrap; align-items:center; font-size: 1.764rem; font-weight: 400; line-height:146.667%; letter-spacing: -2.1px; color:var(--white); margin-right:28px;} .bottom_quick .bottom_quick_in h4 img {margin-right:8px;} .bottom_quick .bottom_quick_in .quick_form {width:calc(100% - 448px); display:flex; flex-wrap:wrap; } .bottom_quick .bottom_quick_in .quick_form .input {height:40px; border:0; background:var(--white); border-radius: 5px; display:block; padding:0 15px; box-sizing:border-box; color: var(--black); font-size: 0.882rem; font-weight: 400; line-height:166.667%; letter-spacing: -0.9px;} .bottom_quick .bottom_quick_in .quick_form .input.ver1 {max-width:160px; width:30%;} .bottom_quick .bottom_quick_in .quick_form .input.ver2 {max-width:430px; margin:0 5px; width:calc(70% - 60px);} .bottom_quick .bottom_quick_in .quick_form .input:placeholder {color: var(--black); font-size: 0.882rem; font-weight: 400; line-height:166.667%; letter-spacing: -0.9px;} .bottom_quick .bottom_quick_in .quick_form .submit {width: 100px; height: 40px; border-radius: 5px; background:#FC397C; border-radius: 5px; font-size: 15px; font-weight: 400; line-height:166.667%; letter-spacing: -0.9px; text-align:center; border:0; color:var(--white);} .bottom_quick .bottom_quick_in .quick_info {display:flex; flex-wrap:wrap; align-items:center; } /* .bottom_quick .bottom_quick_in .quick_info::before {content:''; display:block; width:1px; height:40px; background:rgba(255,255,255,0.3); position:relative; margin:0 30px;} */ .bottom_quick .bottom_quick_in .quick_info a {font-size: 1.764rem; font-weight: 400; line-height: 1; color:var(--white); display:inline-block; vertical-align:middle; margin-left:15px;} /* VISUAL */ #visual {position:relative; width:100%; height:680px; background:url('/img/visual_bg.jpg')no-repeat center; background-size:cover;} #visual .slick-slider {position: relative; display: block; outline:none;} #visual .slick-list {position: relative; display: block; overflow: hidden;} #visual .slick-slide {display: none; float: left; height:800px;} #visual .slick-initialized .slick-slide{display: block;} #visual .slick-vertical .slick-slide{display: block;} #visual .sub_imgbox {position:relative; width:100%; height:100%;} #visual .sub_imgbox > li {position:relative; width:100%; height:100%;} #visual .sub_imgbox > li .basic_in {height:100%; width:94%; max-width:1230px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} /* Dots */ #visual .slick-dots {position: absolute; z-index:100; bottom:40px; left:50%; transform:translateX(-50%); padding-right:30px;} /* #visual .slick-dots::after {content:''; width:22px; height:22px; border:1px solid #bbc3ca; position:relative; margin-left:10px; display:inline-block; border-radius:100%; vertical-align:middle;} */ #visual .slick-dots li {position: relative; display: inline-block; cursor: pointer; width:80px; height:2px; overflow:hidden; margin-right:3px; overflow:hidden; vertical-align:middle;} #visual .slick-dots li:after {content:''; width:0; height:100%; background:#0eb3d3; position:absolute; top:0; left:0;} #visual .slick-dots li:last-child {margin-right:0;} #visual .slick-dots li button{width:80px !important; height:2px; font-size: 0; line-height: 0; display: block;cursor: pointer; border: 0; outline: none; background:#dae1e5; } #visual .slick-dots li.slick-active {width:80px; height:4px;} #visual .slick-dots li.slick-active:after {animation:slick-dots 6.5s linear; animation-delay:0;} #visual.paused .slick-dots li.slick-active:after {animation-play-state: paused; animation-delay:0;} #visual .slick-dots li.slick-active button{width:80px; height:4px;} @keyframes slick-dots { 0% {width:0;} 100% {width:120%;} } #visual .visual_num {display:flex; flex-wrap:wrap; margin:30px 0 70px; position:relative; top:-100px; opacity: 0;} #visual .visual_num li {position:relative; text-align:center; display:flex; flex-wrap:wrap; padding-right:100px; box-sizing:Border-box; flex-direction: column;} #visual .visual_num li:last-of-type {padding-right:0;} #visual .visual_num li::after {content:''; width:1px; height:80px; background:#ddd; position:absolute; top:0; right:50px;} #visual .visual_num li:last-of-type::after {display:none;} #visual .visual_num li > span {width:100%; display:block; font-weight: 700; color:#222;} #visual .visual_num li > span b {position:relative; top:7px; color:#0EB3D3; font-size: 2rem; font-weight: 700; line-height: 1.3; display:inline-block; margin-right:4px; vertical-align:bottom;} #visual .visual_num li > span b * {line-height:inherit;} #visual .visual_num li p {width:100%; color:#222; font-size: 0.941rem; font-weight: 400; line-height:156.25%; letter-spacing: -0.96px; margin:8px 0 0;} .b_btn {position:absolute; z-index:9999; bottom:32px; right:50%; margin-right:-140px; width:22px; height:22px; border:1px solid #bbc3ca; border-radius:100%; background-repeat:no-repeat; background-position:center;background:url('/img/btn-play.png')no-repeat center;} #visual li .img_area {/* position: absolute; right: 50%; top:0; */ margin-top:60px; width: 50%; max-width:565px; text-align:right; aspect-ratio:3 / 2.6549; overflow:hidden; position:relative; } #visual li .img_area::before {content:''; width:100%; height:80px; position:absolute; top:0; left:0; background: linear-gradient(180deg, #EEFCFF 20%, rgba(238, 252, 255, 0.00) 100%); z-index:50;} #visual li .img_area::after {content:''; width:100%; height:80px; position:absolute; bottom:0; left:0; background: linear-gradient(180deg, #EEFCFF 20%, rgba(238, 252, 255, 0.00) 100%); z-index:50; transform: scaleY(-1);} #visual li .img_area img{max-width:100%; position: relative; top:-100px; opacity: 0; animation:img_area 1s linear forwards;} /* #visual li.action .img_area img{animation:img_area 1s linear forwards;} */ #visual li .img_area .img {position: relative; max-width:100%;} #visual li .img_area .marquee {display:flex; flex-wrap:wrap; justify-content:space-between; } #visual li .img_area .marquee .marquee_in.ver1 {-webkit-animation:marquee calc(var(--length) * 4) linear infinite; animation: marquee calc(var(--length) * 4) linear infinite;} #visual li .img_area .marquee .marquee_in.ver2 {-webkit-animation:marquee_down calc(var(--length2) * 4) linear infinite; animation: marquee_down calc(var(--length2) * 4) linear infinite;} #visual li .img_area .marquee .marquee_in.ver3 {-webkit-animation:marquee calc(var(--length3) * 4) linear infinite; animation: marquee calc(var(--length3) * 4) linear infinite;} #visual li .img_area .marquee .marquee_in.ver4 {-webkit-animation:marquee_down calc(var(--length4) * 4) linear infinite; animation: marquee_down calc(var(--length4) * 4) linear infinite;} #visual li .img_area .marquee li {width:calc((100% - 45px) / 4);} #visual li .img_area .marquee li span {display:block; width:100%; padding-bottom:15px;} #visual li .img_area .marquee li span img {width:100%; border-radius:20px;} @-webkit-keyframes marquee { 0% { -webkit-transform:translateY(0); transform:translateY(0) } to { -webkit-transform:translateY(-100%); transform:translateY(-100%) } } @keyframes marquee { 0% { -webkit-transform:translateY(0); transform:translateY(0) } to { -webkit-transform:translateY(-100%); transform:translateY(-100%) } } @-webkit-keyframes marquee_down { 0% { -webkit-transform:translateY(-100%); transform:translateY(-100%) } to { -webkit-transform:translateY(0); transform:translateY(0) } } @keyframes marquee_down { 0% { -webkit-transform:translateY(-100%); transform:translateY(-100%) } to { -webkit-transform:translateY(0); transform:translateY(0) } } /* #visual li.action .img_area .img1{animation-delay:1s; animation: bounce 2s ease infinite alternate;} #visual li.action .img_area .img2{animation-delay:1.2s; animation: bounce 1.4s ease infinite alternate;} #visual li.action .img_area .img3{animation-delay:1.6s; animation: bounce 1.6s ease infinite alternate;} #visual li.action .img_area .img4{animation-delay:1.4s; animation: bounce 1.8s ease infinite alternate;} #visual li.action .img_area .img5{animation-delay:2s; animation: bounce 1.5s ease infinite alternate;} */ #visual li .img_area .img1 img{animation-delay:0.2s;} #visual li .img_area .img2 img{animation-delay:0.5s;} #visual li .img_area .img3 img{animation-delay:0.8s;} #visual li .img_area .img4 img{animation-delay:1s;} #visual li .img_area .img5 img{animation-delay:1.2s;} @keyframes bounce { 100% {transform:translateY(50px);} } @keyframes img_area { 0% {top:-100px; opacity: 0;} 100% {top:0; opacity: 1;} } @keyframes img_ani { 0%,100% {transform:translateY(-15px);} 50% {transform:translateY(15px);} } #visual li.cover01 .img_area .img1{left:50%; margin-left: -540px; top:120px;} #visual li.cover01 .img_area .img2{left: 50%; margin-left: -850px; bottom: 0;} #visual li.cover01 .img_area .img3{left: 50%; margin-left: -300px; bottom: 100px;} #visual li.cover02 .img_area .img1{left:50%; margin-left: -540px; top:190px;} #visual li.cover02 .img_area .img2{left:50%; margin-left: -570px; bottom: 410px; } #visual li.cover02 .img_area .img3{left:50%; margin-left: -150px; bottom: 436px;} #visual li.cover02 .img_area .img4{left:50%; margin-left: -630px; bottom: 165px;} #visual li.cover02 .img_area .img5{left:50%; margin-left: -150px; bottom: 165px;} #visual li .text_area {/* position:absolute; left:50%; margin-left:-610px; top:50%; transform:translateY(-50%); */padding-left:0; box-sizing:border-box; margin-top:50px; width:50%; padding-right:5%;} #visual li .text_area > span {position:relative; font-size:1.412rem; font-weight:400; color:#0eb3d3; letter-spacing:-0.8pt; line-height:1.6; top:-30px; opacity:0;} #visual li .text_area > span:after {content:''; width:100%; height:1px; background:#0eb3d3; position:absolute; bottom:0; left:0;} #visual li .text_area h2 {position:relative; font-size:2.706rem; line-height:1.3; color:#222; font-weight:bold; letter-spacing:-1.8pt; top:-30px; opacity:0;} #visual li .text_area h2 b {line-height:inherit; letter-spacing:inherit; color:#0EB3D3;} #visual li .text_area > p {position:relative; color:rgba(34,34,34,0.7); line-height:1.7; letter-spacing:-0.8pt; top:-30px; opacity:0;} #visual li .text_area .moreBtn {opacity:0; margin:0; width:200px;} #visual li .videoArea {position:absolute; top:50%; transform:translateY(-50%); left:50%; margin-left:-590px; max-height:50%; background:#222; border-radius:10px 80px 10px 10px; overflow:hidden;} #visual li .videoArea img {opacity:0.8; background-repeat:no-repeat; background-size:center; background-size:cover;} #visual li .videoArea a:after {content:''; width:79px; height:79px; background:url('/img/v_play.png')no-repeat center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-size:100% !important} /*#visual li.action .text_area span {top:0; opacity:1; transition:all 1s;} #visual li.action .text_area h2 {top:0; opacity:1; transition:all 1s; transition-delay:0.2s;} #visual li.action .text_area p {top:0; opacity:1; transition:all 1s; transition-delay:0.4s;} #visual li.action .text_area .moreBtn {opacity:1; transition:all 1s; transition-delay:1s;}*/ #visual li .text_area > span {animation:img_area 1s linear forwards; animation-delay:0.4s;} #visual li .text_area h2 {animation:img_area 1s linear forwards; animation-delay:0.7s;} #visual li .text_area > p { animation:img_area 1s linear forwards; animation-delay:1s;} #visual li .text_area .visual_num {animation:img_area 1s linear forwards; animation-delay:0.8s;} #visual li .text_area .moreBtn {display:inline-block;margin-left:10px;animation:img_area 1s linear forwards; animation-delay:1s;} #visual li .text_area .moreBtn.direct:after {content:''; width:100%; height:100%; background-image: linear-gradient(to right, #0EB3D3, #FC397C); background-size: 300%; background-position: 0 0; position:absolute; top:0; left:0; z-index:-1; animation: gradients 6s linear 1s infinite;} @keyframes text_area { 0% {top:-30px; opacity: 0;} 100% {top:0; opacity: 1;} } #visual .vt_wrap {width:1230px; position:absolute; bottom:85px; left:50%; transform:translateX(-50%); } #visual .vt_wrap .theme_icon {position:absolute; top:-58px; left:-25px; z-index:99;} #visual .visual_tab {position:relative; width:100%; height:70px; background:#0eb3d3; border-radius:50px; display:flex; flex-wrap:wrap; overflow:hidden; box-shadow:0 8px 15px rgba(0,0,0,0.08);} #visual .visual_tab:before {content:''; width:240px; height:150px; position:absolute; bottom:-80px; left:50%; background: radial-gradient( #7ee495, transparent , transparent ); transition:all 0.3s linear; transform:translateX(-50%); opacity:0.7;} #visual .visual_tab a {position:relative; z-index:9; width:25%; text-align:center; border-right:1px solid rgba(255,255,255,0.3); box-sizing:border-box;} #visual .visual_tab a span {display:inline-block; color:#fff; letter-spacing:-0.6pt; line-height:70px; padding-right:25px; background:url("/img/small_arrow.png")no-repeat center right; transition:all 0.3s;} #visual .visual_tab a span img {display:inline-block; vertical-align:middle; margin-right:10px;} /* #visual .visual_tab a:hover span {padding-right:35px; transition:all 0.3s;} */ /* VISUAL */ /* 공통 CSS */ h3.title {font-size:2.235rem; line-height:1.2; letter-spacing:-1pt; color:#222; font-weight:200; text-align:center; margin:0 0 55px;} h3.title b {font-size:inherit; line-height:inherit; letter-spacing:inherit;} p.stxt {font-size:1rem; letter-spacing:-0.7pt; line-height:1.8; word-break: keep-all;} .ani_effect { transition:all 1s;} .ani_effect h3.title {position:relative; top:50px; opacity:0; transition:all 0.5s linear;} .ani_effect.action h3.title {top:0; opacity:1; transition:all 0.5s linear;} .effect_cont {position:relative; top:50px; opacity:0; transition:all 0.5s linear;} .ani_effect.action .effect_cont {top:0; opacity:1; transition:all 0.5s linear;} .ani_effect.action:after {height:100% !important; transition:all 1s;} .delay1{transition-delay:0.4s !important;} .delay2{transition-delay:0.7s !important;} .delay3{transition-delay:0.9s !important;} /* 공통 CSS */ /* 홍보 배너 */ #event_banner .banner_list .slick-arrow{position:absolute; display:block; width:40px; height:80px; border:0; background-color:#fff; border-radius:100%; font-size:0; background-repeat:no-repeat; top:50%; transform:translateY(-50%); cursor:pointer; transition:all 0.3s linear; z-index:999 !important;} #event_banner .banner_list .slick-prev{left:-50px; background-image:url(/img/prevArrow.png); box-shadow:-10px 0 15px rgb(0 0 0 / 6%); background-position:center right; border-radius:100px 0 0 100px;} #event_banner .banner_list .slick-next{right:-50px; background-image:url(/img/nextArrow.png); box-shadow:10px 0 15px rgb(0 0 0 / 6%); background-position:center left; border-radius:0 100px 100px 0;} #event_banner .banner_list .slick-list{overflow:hidden;} #event_banner .banner_list .slick-track{display:flex;gap:0 20px;} #event_banner .banner_list li{display:none;} #event_banner .banner_list li:first-child{display:block;} #event_banner .banner_list .slick-slide{display:block;} #event_banner .banner_list li a{display:flex;gap:16px;padding:20px;height:100%;border:1px solid transparent;border-radius:15px;color:#fff;transition:all 0.4s ease;} #event_banner .banner_list li .bg01{background-color:#4BCEB1;} #event_banner .banner_list li .bg02{background-color:#0EB3D3;} #event_banner .banner_list li .bg03{background-color:#1198DA;} #event_banner .banner_list li .bg04{background-color:#2BC0C3;} #event_banner .banner_list li .bg05{background-color:rgb(32, 164, 186);} #event_banner .banner_list li:hover a{background-color:#fff;} #event_banner .banner_list li:hover .bg01{border-color:#4BCEB1;color:#4BCEB1;} #event_banner .banner_list li:hover .bg02{border-color:#0EB3D3;color:#0EB3D3;} #event_banner .banner_list li:hover .bg03{border-color:#1198DA;color:#1198DA;} #event_banner .banner_list li:hover .bg04{border-color:#2BC0C3;color:#2BC0C3;} #event_banner .banner_list li:hover .bg05{border-color:rgb(32, 164, 186);color:rgb(32, 164, 186);} #event_banner .banner_list li:hover .bg01 img{content:url(/img/ico_unlimited_bg.png);} #event_banner .banner_list li:hover .bg02 img{content:url(/img/ico_palette_bg.png);} #event_banner .banner_list li:hover .bg03 img{content:url(/img/ico_free_bg.png);} #event_banner .banner_list li .img_area{overflow:hidden;flex-shrink:0;align-self:center;max-width:80px;border-radius:12px;} #event_banner .banner_list li .bg05 .img_area{display: flex;background-color: #fff;height: 80px;border-radius: 50%;justify-content: center;align-items: center;} #event_banner .banner_list li .text_area{line-height:1.4;} #event_banner .banner_list li .text_area p{margin-top:8px;} #event_banner .banner_list li .text_area strong{text-decoration:underline;} /* 홍보 배너 */ .link_banner_in {display:flex; flex-wrap:wrap; justify-content:space-between;} .link_banner_in li {width:calc((100% - 90px) / 4); text-align:center;} .link_banner_in li a {display:block; width:100%; height:100%; padding:40px 20px; box-sizing:border-box; border-radius: 30px; border: 1px solid #ddd; transition:all 0.4s ease;} .link_banner_in li span {width: 105px; height: 105px; background:#F1F7F9; border-radius:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:Center; margin:0 auto; transition:all 0.4s ease;} .link_banner_in li h4 {font-size: 1.529rem; font-weight: 400; line-height: 146.154%; letter-spacing: -1.56px; color:#222; margin:30px 0 10px; transition:all 0.4s ease;} .link_banner_in li p {font-weight: 400; line-height:152.941%; letter-spacing: -1.02px; transition:all 0.4s ease;} .link_banner_in li:hover a {border:1px solid #0EB3D3; background:#0EB3D3; transition:all 0.4s ease;} .link_banner_in li:hover a span {background:#fff; transition:all 0.4s ease;} .link_banner_in li:hover a h4 {color:#fff; transition:all 0.4s ease;} .link_banner_in li:hover a p {color:#fff; transition:all 0.4s ease;} /* 섹션 퀵메뉴 */ .section_quick {position:fixed; left:0; top:50%; transform:translate(0,-50%); background:rgba(255,255,255,0.8); padding:12px 15px 12px 22px; box-sizing:border-box; z-index:999; display:none} .section_quick ul {border-left:1px solid #d9dde4; padding:7px 0 10px;} .section_quick li {margin:0 0 3px; padding-left:15px; box-sizing:border-box; position:relative; } .section_quick li:last-child {margin:0;} .section_quick li a {font-size:15px; letter-spacing:-0.7pt; line-height:1; font-weight:300; position:relative; transition:all 0.3s linear;} .section_quick li a:hover {color:#222; transition:all 0.3s linear;} .section_quick li a:before {content:''; width:5px; height:5px; background:#fff; position:absolute; top:9px; left:-18px; z-index:10; transition:all 0.3s linear;} .section_quick li a:after {content:''; width:11px; height:11px; background:rgba(119,119,119,0.23); border-radius:3px; position:absolute; top:6px; left:-21px; z-index:5; transition:all 0.3s linear;} .section_quick li a.mPS2id-highlight {color:#222; text-decoration:underline; font-weight:400; transition:all 0.3s linear;} .section_quick li a.mPS2id-highlight:before {width:7px; height:7px; background:#0eb3d3; top:10px; left:-19px; transition:all 0.3s linear;} .section_quick li a.mPS2id-highlight:after {width:15px; height:15px; background:rgba(14,179,211,0.20); left:-23px; transition:all 0.3s linear;} /* 섹션 퀵메뉴 */ /* 포트폴리오 */ #portfolio {overflow:hidden;} #portfolio .portCount {width:98%; max-width:900px; margin:0 auto 70px auto; display:flex; flex-wrap:wrap; justify-content: center;} #portfolio .portCount li {width:33.3%; box-sizing:border-box; padding:15px 10px; border-right:1px solid #ddd; text-align:center;} #portfolio .portCount li:last-child {border-right:0;} #portfolio .portCount li p {font-size:1.176rem; font-weight:600; line-height:100%; margin-bottom:15px; color:#222; min-width:170px;} #portfolio .portCount li strong {display:inline-block; font-size:2.235rem; color:#0eb3d3; line-height:100%; margin-right:5px;} #portfolio .portCount li span {line-height:100%; letter-spacing:-0.5pt; color:#222;} #portfolio .list_cont {height: 357px} #portfolio .list_cont:after {content:''; display:block; clear:both;} #portfolio .list_cont dl {position:relative; border-radius:30px; overflow:hidden; margin-right:30px; float:left; width:286px;} #portfolio .list_cont dl dt > img {width:100%;height: 219px} #portfolio .list_cont dl dt {position:relative; overflow:hidden;} #portfolio .list_cont dl dt .hover {position:absolute; top:50%; left:0; width:100%; height:100%; padding:25% 25px 25px; box-sizing:border-box; background:rgba(14,179,211,0.95);transition:all 0.2s linear; opacity:0;} #portfolio .list_cont dl dt .hover p,#portfolio .list_cont dl dt .hover span {color:#fff; letter-spacing:-0.6pt; line-height:1.4;} #portfolio .list_cont dl dt .hover span {position:absolute; right:25px; bottom:25px;} #portfolio .list_cont dl dt .hover span img {margin-left:5px;} #portfolio .list_cont dl:hover span.cate {background:#fff; color:#26b9d4; transition:all 0.3s linear;} #portfolio .list_cont dl:hover dt .hover {top:0; transition:all 0.2s linear; opacity:1;} #portfolio .list_cont dl dd {border-radius:0 0 30px 30px; border:1px solid #dddfe3; border-top:0; padding:30px 25px; box-sizing:border-box; text-align:center;} #portfolio .list_cont dl dd p {font-size:0.882rem; letter-spacing:-0.6pt; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 1.4rem;} #portfolio .list_cont dl dd h4 {font-size:1.176rem; color:#222; color:#222;letter-spacing:-0.6pt; font-weight:400; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 1.6rem; margin:-4px 0 0;} #mCSB_1_container {margin-bottom:30px;} #mCSB_1_scrollbar_horizontal {width:1230px !important; margin:0 auto !important; height:5px !important;} #mCSB_1_scrollbar_horizontal .mCSB_draggerRail {margin:0; height:5px !important; border-radius:50px; background:#ecf1f1 !important;} #mCSB_1_scrollbar_horizontal .mCSB_dragger_bar {margin:0; height:5px !important; border-radius:50px; background:#26b9d4 !important;} /* 포트폴리오 */ /* 파트너사 */ #partner {position:relative;} #partner:after {content:''; width:100%; height:0; background:#eff6f8; position:absolute; top:0; left:0; z-index:-1;} #partner .partner_cont {display:flex; flex-wrap:wrap;} #partner .partner_cont dl {width:calc((100% - 90px) / 4); border-radius:30px; overflow:hidden; margin-right:30px; background:#fff; position:relative; top:0; transition:all 0.2s linear;} #partner .partner_cont dl:last-child {margin-right:0;} #partner .partner_cont dl:hover {box-shadow:0 10px 20px rgb(0 0 0 / 16%); transition:all 0.2s linear; top:-20px;} #partner .partner_cont dl dt img {width:100%;} #partner .partner_cont dl dd {border-top:1px dashed #d8d9dc; padding:25px; box-sizing:border-box; color:#222; letter-spacing:-0.7pt; line-height:1.4; text-align:center;} /* 파트너사 */ /* 수상&인증 */ #certification .certi_cont .list {margin:0 -22px;} #certification .certi_cont .list figure {float:left; margin:0 22px;} #certification .certi_cont .list figure:last-child {margin-right:0;} #certification .certi_cont .list dl {width:98%; margin:0 auto;} #certification .certi_cont .list dl dt {position:relative; margin-bottom:30px; text-align:center;} #certification .certi_cont .list dl dt .ico {position:absolute; right:-15px; bottom:-20px; z-index:5;} #certification .certi_cont .list dl dt .ico img {border-radius:100%; box-shadow:0 10px 20px rgba(0,0,0,0.05);} #certification .certi_cont .list dl dt > img {box-shadow:0 20px 20px rgba(0,0,0,0.05);} #certification .certi_cont .list dl dd {text-align:center; line-height:140%; font-size:1.176rem; font-weight:500; color:#333; letter-spacing:-.8pt;} #certification .certi_cont .slick-dots {display:flex; flex-wrap:wrap; justify-content:center; padding-top:30px; border:1px solid transparent} #certification .certi_cont .slick-dots li {margin:0 5px; font-size:0; line-height:0; } #certification .certi_cont .slick-dots li button { width:12px; height:12px; line-height:100%; background:#aaa; border:none; text-indent:-222222px; cursor:pointer; transition:all 0.3s ease-out; border-radius:100%; font-size:0; padding:0;} #certification .certi_cont .slick-dots li button:hover {background:#42b3f7;} #certification .certi_cont .slick-dots li.slick-active button {background:#42b3f7;} #certification .effect dl {display:flex; flex-wrap:wrap;} #certification .effect dl dt, #certification .effect dl dd {width:50%;} #certification .effect dl dt {position:relative; background-color: #14c9e2; background-image: linear-gradient(135deg, #14c9e2 0%, #01a8f5 100%); border-radius:50px 30px 50px 30px; text-align:center; color:#fff; padding:50px 5vw 60px 5vw; box-sizing:border-box;} #certification .effect dl dt:before {position:absolute; content:""; right:0; bottom:0; width:271px; height:162px; background:url('../../img/effect_cloud.png') left top no-repeat; bottom:30px; right:-80px; z-index:5;} #certification .effect dl dt:after {position:absolute; content:"VS"; width:108px; height:108px; line-height:88px; font-size:1.765rem; font-weight:600; box-sizing:border-box; overflow:hidden; background:#00a6f6; border-radius:100%; border:8px solid #fff; right:-50px; top:50%; transform:translateY(-50%); z-index:10;} #certification .effect dl dt h4 {background:url('../../img/effect_icon.png') top center no-repeat; line-height:100%; letter-spacing:-.5pt; padding-top:65px; text-align:center; font-size:1.588rem;} #certification .effect dl dt ul {margin-top:20px;} #certification .effect dl dt ul li {position:relative; border-bottom:1px solid rgba(255,255,255,0.2); padding:17px 0 17px 35px; font-size:1.176rem; letter-spacing:-0.5pt; line-height:120%; text-align:left;} #certification .effect dl dt ul li:before {position:absolute; content:""; left:0; top:50%; transform:translateY(-50%); z-index:5; width:21px; height:21px; background:url('../../img/icon_check_w.png') left center no-repeat;} #certification .effect dl dt ul li:last-child {border-bottom:none;} #certification .effect dl dd {padding:50px 0;} #certification .effect dl dd figure {background:#f4f7f9; border-radius:30px; padding:65px 5.7vw 45px 6vw;} #certification .effect dl dd h4 {line-height:100%; letter-spacing:-.5pt; font-weight:500; text-align:center; font-size:1.412rem;} #certification .effect dl dd ul {margin-top:20px;} #certification .effect dl dd ul li {position:relative; border-bottom:1px solid #dee3e6; padding:16px 0 16px 30px; color:#60747d; letter-spacing:-0.5pt; line-height:120%; text-align:left;} #certification .effect dl dd ul li:before {position:absolute; content:""; left:0; top:50%; transform:translateY(-50%); z-index:5; width:21px; height:21px; background:url('../../img/icon_hipen.png') left center no-repeat;} #certification .effect dl dd ul li:last-child {border-bottom:none;} /* 수상&인증 */ /* 이러닝 서비스 */ #service {overflow:hidden;} #service .slick-list {overflow:hidden;} #service .slick-dots {position:relative; margin-bottom:100px; } #service .slick-dots .slick-arrow {display:none !important;} /* #service .slick-dots .slick-prev {left:0; background-image:url('/img/prevArrow.png'); box-shadow:-10px 0px 15px rgb(0 0 0 / 6%);} #service .slick-dots .slick-next {right:0; background-image:url('/img/nextArrow.png'); box-shadow:10px 0px 15px rgb(0 0 0 / 6%);} */ #service .slick-dots li::before {content:''; position:relative; width:105px; height:105px; border:1px solid #dfe1e5; border-radius:100%; box-sizing:border-box; display:block; background-repeat:no-repeat; background-position:center; margin:0 auto 17px; transition:all 0.3s linear;} #service .slick-dots li::after {content:''; width:105px; height:105px; border-radius:100%; background:linear-gradient(45deg, #10b4d2 , #4fcfaf ); position:absolute; z-index:-1; display:block; top:0; left:50%; transform:translateX(-50%); opacity:0; transition:all 0.3s linear; background-repeat:no-repeat !important; background-size:100% !important;} #service .slick-dots li:hover::before {border:1px solid transparent; transition:all 0.3s linear;} #service .slick-dots li.slick-current::before {border:1px solid transparent !important; transition:all 0.3s linear;} #service .slick-dots li:hover::after {opacity:1; transition:all 0.3s linear;} #service .slick-dots li.slick-current::after {opacity:1 !important; transition:all 0.3s linear;} #service .slick-dots li {position:relative; box-sizing:border-box; text-align:center; cursor:pointer; display:inline-block;} #service .slick-dots li:last-child {margin-right:0;} #service .slick-dots li a {color:#222; letter-spacing:-0.7pt; line-height:1.4; transition:all 0.2s linear;} #service .slick-dots li:hover a {color:#0eb3d3; transition:all 0.2s linear;} #service .slick-dots li.slick-current a {color:#0eb3d3 !important; transition:all 0.2s linear;} #service .slick-dots li.one::before {background-image:url('/img/service_icon01.png');} #service .slick-dots li.one:hover::before {background-image:url('/img/service_icon01_up.png');} #service .slick-dots li.one.slick-current::before {background-image:url('/img/service_icon01_up.png') !important;} #service .slick-dots li.two::before {background-image:url('/img/service_icon02.png');} #service .slick-dots li.two:hover::before {background-image:url('/img/service_icon02_up.png');} #service .slick-dots li.two.slick-current::before {background-image:url('/img/service_icon02_up.png') !important;} #service .slick-dots li.three::before {background-image:url('/img/service_icon03.png');} #service .slick-dots li.three:hover::before {background-image:url('/img/service_icon03_up.png');} #service .slick-dots li.three.slick-current::before {background-image:url('/img/service_icon03_up.png') !important;} #service .slick-dots li.four::before {background-image:url('/img/service_icon04.png');} #service .slick-dots li.four:hover::before {background-image:url('/img/service_icon04_up.png');} #service .slick-dots li.four.slick-current::before {background-image:url('/img/service_icon04_up.png') !important;} #service .slick-dots li.five::before {background-image:url('/img/service_icon05.png');} #service .slick-dots li.five:hover::before {background-image:url('/img/service_icon05_up.png');} #service .slick-dots li.five.slick-current::before {background-image:url('/img/service_icon05_up.png') !important;} #service .slick-dots li.six::before {background-image:url('/img/service_icon06.png');} #service .slick-dots li.six:hover::before {background-image:url('/img/service_icon06_up.png');} #service .slick-dots li.six.slick-current::before {background-image:url('/img/service_icon06_up.png') !important;} .service_cont .slick-arrow {position:absolute; display:block; width:40px; height:80px; border:0; background:#fff; border-radius:100%; font-size:0; background-repeat:no-repeat; top:41%; cursor:pointer; transition:all 0.3s linear; z-index:999 !important;} .service_cont .slick-prev {left:-50px; background-image:url('/img/prevArrow.png'); box-shadow:-10px 0px 15px rgb(0 0 0 / 6%); background-position:center right; border-radius:100px 0 0 100px;} .service_cont .slick-next {right:-50px; background-image:url('/img/nextArrow.png'); box-shadow:10px 0px 15px rgb(0 0 0 / 6%); background-position:center left; border-radius:0 100px 100px 0;} #service .service_cont {position:relative;} #service .service_cont dl {display:table; width:100%;} #service .service_cont dt {display:table-cell; width:50%; vertical-align:middle;} #service .service_cont dt img {display:block; margin:0 auto; max-width:100%;} #service .service_cont dd {display:table-cell; width:50%; vertical-align:middle; padding:0 60px; box-sizing:border-box;} #service .service_cont dd h4 {font-size:1.765rem; color:#222; letter-spacing:-0.7pt; line-height:1.2; font-weight:400;} #service .service_cont dd p {margin:17px 0 15px;} #service .service_cont dd p b {font-size:inherit; font-weight:inherit; line-height:inherit; color:#0eb3d3; letter-spacing:inherit;} #service .service_cont dd ul {font-size:0;} #service .service_cont dd li {display:inline-block; font-size:1rem; color:#0eb3d3; letter-spacing:-0.6pt; line-height:1; margin:5px 0; margin-right:20px;} #service .service_cont dd li:last-child {margin-right:0;} #service .service_cont dd div {margin:30px 0 0;} #service .service_cont dd a {display:inline-block;; width:220px; line-height:53px; border:1px solid #0eb3d3; color:#0eb3d3; letter-spacing:-0.6pt; font-size:0.882rem; border-radius:50px; padding:0 30px; box-sizing:border-box; background:url('/img/moreArrow_blue.png')no-repeat center right 30px; transition:all 0.3s linear; margin:2px 0;} #service .service_cont dd a:hover {background:#0eb3d3 url('/img/moreArrow.png')no-repeat center right 30px; color:#fff; transition:all 0.3s linear;} /* 이러닝 서비스 */ /* 이러닝 솔루션 */ #solution {position:relative; } #solution:after {content:''; width:100%; height:0; background:#eff6f8; position:absolute; top:0; left:0; z-index:-1;} #solution .solution {border-radius:30px; overflow:hidden; display:flex; flex-wrap:wrap; background:#fff; margin:0 0 4px;} #solution .solution dl {position:relative; width:20%; box-sizing:border-box; border-right:1px dashed #d4d4d4;} #solution .solution dl.dep_con > a {display:block; width:100%; height:100%; padding:55px 40px;} #solution .solution dl.four, #solution .solution dl.seven, #solution .solution dl.six, #solution .solution dl.three {border-right:0;} #solution .solution dl dt {width:105px; height:105px; border:1px solid #e0e2e5; border-radius:100%; box-sizing:border-box; background-repeat:no-repeat; background-position:center; margin:0 auto; transition:all 0.3s;} #solution .solution dl:hover dt {border:1px solid #0eb3d3; transition:all 0.3s;} #solution .solution dl.one dt {background-image:url('/img/solution_img01.png');} #solution .solution dl.one:hover dt {background-image:url('/img/solution_img01_up.png'); transition:all 0.3s;} #solution .solution dl.two dt {background-image:url('/img/solution_img02.png');} #solution .solution dl.two:hover dt {background-image:url('/img/solution_img02_up.png'); transition:all 0.3s;} #solution .solution dl.three dt {background-image:url('/img/solution_img03.png');} #solution .solution dl.three:hover dt {background-image:url('/img/solution_img03_up.png'); transition:all 0.3s;} #solution .solution dl.four dt {background-image:url('/img/solution_img04.png');} #solution .solution dl.four:hover dt {background-image:url('/img/solution_img04_up.png'); transition:all 0.3s;} #solution .solution dl.five dt {background-image:url('/img/solution_img05.png');} #solution .solution dl.five:hover dt {background-image:url('/img/solution_img05_up.png'); transition:all 0.3s;} #solution .solution dl.six dt {background-image:url('/img/solution_img06.png');} #solution .solution dl.six:hover dt {background-image:url('/img/solution_img06_up.png'); transition:all 0.3s;} #solution .solution dl.seven dt {background-image:url('/img/solution_img07.png');} #solution .solution dl.seven:hover dt {background-image:url('/img/solution_img07_up.png'); transition:all 0.3s;} #solution .solution dl dd {text-align:center;} #solution .solution dl dd h4 {color:#222; letter-spacing:-0.5pt; line-height:1; font-weight:400; margin:15px 0 12px;} #solution .solution dl dd span {position:relative; font-size:0.882rem; letter-spacing:-0.6pt; line-height:1; color:#0eb3d3; transition:all 0.3s linear;} #solution .solution dl dd span:after {content:''; width:100%; height:1px; background:#0eb3d3; position:absolute; bottom:-1px; left:0;} #solution .solution dl.dep_tit {background:#e5eef1; border-right:0;} #solution .solution dl.dep_tit a {display:block; width:100%; height:100%; padding:55px 40px;} #solution .solution dl.dep_tit h4 {color:#222; letter-spacing:-0.6pt; line-height:1.15; font-size:1.529rem; font-weight:300;} #solution .solution dl.dep_tit .btnCircle {margin:30px 0 0;} #solution .solution dl.dep_tit img {position:absolute; bottom:50px; right:40px;} /* 이러닝 솔루션 */ /* 추천사 */ #recommendation .recomm_list{display:flex;gap:15px;} #recommendation .recomm_list li{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:60px;padding:50px 40px;width:calc((100% - 30px) / 3);background:#F8F8F8;} #recommendation .recomm_list li p{position:relative;padding-top:28px;} #recommendation .recomm_list li p:before{content:url(/img/quote-left-solid.svg);position:absolute;left:-8px;top:0;display:block;width:20px;} #recommendation .recomm_list li img{width:160px;height:40px;object-fit:contain;} #recommendation .recomm_list li:nth-child(2) img{height:30px;margin-bottom:8px;} #recommendation .recomm_list li:last-child img{transform:scale(1.1);} /* 추천사 */ #e_edu {position:relative; overflow:hidden;} #e_edu:after {content:''; width:100%; height:0; background:#eff6f8; position:absolute; top:0; left:0; z-index:-1;} #e_edu .e_eduList {display:flex; flex-wrap:wrap; justify-content:space-between;} #e_edu .e_eduList dl {position:relative; z-index:10; width:calc((100% - 60px) / 3); overflow:hidden; border-radius: 30px;} #e_edu .e_eduList dl:nth-of-type(-n+3) {margin-bottom:30px;} #e_edu .e_eduList dl::after {content:''; width:100%; height:100%; background:var(--white); border-radius: 30px; border: 1px solid #ddd; box-sizing:border-box; position:absolute; top:0; left:0px; z-index:-1; transition:all 0.4s ease;} #e_edu .e_eduList dl dt {aspect-ratio:3 / 1.9232; overflow:hidden;} #e_edu .e_eduList dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.4s ease;} #e_edu .e_eduList dl dd {padding:40px; box-sizing:border-box; } #e_edu .e_eduList dl dd h4 {font-size: 1.529rem; font-weight: 400; line-height:146.154%; letter-spacing: -1.56px; color:#222; text-align:center; transition:all 0.4s ease;} #e_edu .e_eduList dl dd p {line-height:152.941%; letter-spacing: -1.02px; text-align:center; margin:10px 0 20px; transition:all 0.4s ease;} #e_edu .e_eduList dl dd .checkList {margin:0 0 30px;} #e_edu .e_eduList dl dd .checkList li {position:relative; padding-left:24px; box-sizing:border-box; font-size: 0.882rem; font-weight: 400; line-height:166.667%; letter-spacing: -0.9px; transition:all 0.4s ease;} #e_edu .e_eduList dl dd .checkList li::before {font-size:24px; content:'\f88b'; font-family:var(--icon); color:#4C5360; position:absolute; top:0; left:0; transition:all 0.4s ease;} #e_edu .e_eduList dl dd a {display:block; width:100%; height:55px; border:1px solid var(--main); color:var(--main); padding:0 30px; box-sizing:border-box; letter-spacing: -0.9px; font-size: 0.882rem; border-radius:50px; line-height:53px; background-image: url('/img/moreArrow_blue.png'); background-repeat:no-repeat; background-position:center right 30px; background-color:#fff; transition:all 0.4s ease;} #e_edu .e_eduList dl:hover::after {border:1px solid var(--main); background:var(--main); transition:all 0.4s ease;} #e_edu .e_eduList dl:hover dt img {transform:scale(1.1); transition:all 0.4s ease;} #e_edu .e_eduList dl:hover dd h4 {color:var(--white); transition:all 0.4s ease;} #e_edu .e_eduList dl:hover dd p {color:var(--white); transition:all 0.4s ease;} #e_edu .e_eduList dl:hover dd .checkList li {color:var(--white); transition:all 0.4s ease;} #e_edu .e_eduList dl:hover dd .checkList li::before {color:var(--white); transition:all 0.4s ease;} #e_edu .e_eduList dl:hover dd a {background-image:url('/img/moreArrow.png'); background-color:rgba(255,255,255,0.3); color:var(--white); transition:all 0.4s ease;} /* 데모체험 */ #demo {} #demo ul {display:flex; flex-wrap:wrap;} #demo ul li {width:calc((100% - 30px) / 2); text-align:center; box-sizing:border-box; margin-right:30px;} #demo ul li .theme_icon {position:absolute; top:-33px; right:-20px; z-index:90;} #demo ul li:last-child {margin-right:0;} #demo ul li .thumnail {position:relative; height:320px; border:1px solid #ddd; border-radius:10px; box-sizing:border-box; } #demo ul li .thumnail > a {position:relative; display:block; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center;} #demo ul li .thumnail > a::before {content:''; width:79px; height:79px; background:url('/img/v_play.png')no-repeat center; position:absolute; top:50%; left:50%; margin:-39px 0 0 -39px; border-radius:100%; box-shadow:0 8px 15px rgba(0,0,0,0.16);} #demo ul li .thumnail .qr_code {position:absolute; bottom:35px; right:35px; padding:5px; background:#fff; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,0.19);} #demo ul li .thumnail .qr_code img{display:inline-block;width:70px;height:auto;} #demo ul li img {display:block; margin:0 auto;} #demo ul li a.moreBtn {margin:30px auto 0; width:200px; text-align:left !important; display:inline-block;} #demo ul li p {font-size:0.882rem; letter-spacing:-0.6pt; line-height:1.6; margin:5px 0 0;} #demo ul li .btn_list {display:inline-block;} #demo ul li .btn_list p {margin:5px 0 0 auto; width:200px;} #demo dl {font-size:0; text-align:center; border-top:1px solid #dddfe3; padding-top:40px; margin:55px 0 0;} #demo dl dt {displaY:inline-block; vertical-align:middle; font-size:1.176rem; color:#222; letter-spacing:-0.7pt; line-height:1; margin-right:50px;} #demo dl dd {displaY:inline-block; vertical-align:middle;} #demo dl a {display:inline-block; margin:0 5px; text-align:left;} /* 데모체험 */ /* 가격 */ #price {position:relative; overflow:hidden;} #price:after {content:''; width:100%; height:0; background:#eff6f8; position:absolute; top:0; left:0; z-index:-1;} #price .theme_con {margin:30px 0 0;} .price_sub_title{margin:32px 0;font-size:1.647rem;color:#222;text-align:center;} .price_member{display:inline-block;margin:20px 0 0;color:#222;text-decoration:underline;} .price_member + .moreBtn_plus{text-align:left;} .price_cont {display:flex; flex-wrap:wrap; margin:30px 0 0;} .price_cont dl {position:relative; width:calc((100% - 90px) / 4); background:#fff; border:1px solid #d1d3d6; box-sizing:border-box; margin-right:30px; transition:all 0.2s linear; top:0; padding:40px 20px 30px; border-radius:25px;} .price_cont dl.best:before {content:'HIT'; font-family: 'Play', sans-serif; color:#fff; position:absolute; top:16px; right:16px; transform:rotate(45deg); z-index:10;} .price_cont dl.best:after {content:''; /* width:125px; height:125px; */ transform:rotate(45deg); position:absolute; top:-10px; right:-40px; z-index:5; border-bottom: 60px solid #fc397c;border-left: 60px solid transparent;border-right: 60px solid transparent;} .price_cont dl.best.on:before{top:14px; right:14px;} .price_cont dl.best.on:after{top:-12px;right:-42px;} .price_cont dl.best.on dt:after{top:17px; right:17px;} .price_cont dl:last-child {margin-right:0;} .price_cont dl dt {font-size:1.529rem; color:#222; letter-spacing:-0.7pt; line-height:1.4; font-weight:400; padding-left:15px; transition:all 0.2s linear;text-align:center;} .price_cont dl.best dt:after {content:''; width:3px; height:3px; background:#fff; position:absolute; top:19px; right:19px; z-index:20;} .price_cont dl dt span {display:block; line-height:inherit; font-weight:bold; letter-spacing:0;} .price_cont dl dt .sexp_recomm{font-size:1rem;font-weight:400;} .price_cont dl dt i {font-size:1rem; font-style:normal; font-weight:300; display:inline-block; margin-left:5px;} .price_cont dl dd > ul {background:#f1f3f6; border-radius:15px; padding:15px 10px 15px 15px; box-sizing:border-box; margin:17px 0 0; min-height:280px/*335px*/;} .price_cont dl dd > ul ul {border-top:1px solid #e7e9e9; margin:20px 0 0;} .price_cont dl dd > ul h4 {font-size:1rem; color:#222; letter-spacing:-0.7pt; line-height:1; margin:14px 0; font-weight:400;} .price_cont dl dd > ul li {display:flex;justify-content:space-between; width:100%; margin:0 0 7px; word-break: break-all;} .price_cont dl dd > ul li span {display:table-cell; vertical-align:top; /*width:85px;*/ line-height:1.3; color:#888; letter-spacing:-0.6pt; font-size:0.824rem; transition:all 0.2s linear;} .price_cont dl dd > ul li .sexp {/* display:block; */font-size:0.7rem; padding:5px 0 0; word-break: break-all;} .price_cont dl dd > ul li i {position:relative; display:inline-block; width:16px; height:16px; border: 1px solid #fc397c; border-radius:100%; background:#fff; color:#fc397c; font-weight:bold; text-align:center; line-height:14px; font-style:normal; font-size:12px; margin-left:2px;transition:all 0.2s linear;} .price_cont dl.on dd > ul li i{color:#fff;} .price_cont dl dd > ul li i .layer {opacity:0; visibility:hidden; border-radius:5px; border:1px solid #ddd; background:#fff; padding:8px; position:absolute; top:25px; left:-10px; color:#777 !important; display:block;width:180px; font-size:0.706rem; font-weight:400; letter-spacing:-0.5pt; line-height:1.3; text-align:left; transition:all 0.2s linear;z-index:10;} .price_cont dl dd > ul li i .layer:before{content:'';display:block;width:10px;height:10px;background-color:#fff;border-top:1px solid #ddd;border-left:1px solid #ddd;transform:rotate(45deg);position:absolute;left:12px;top:-7px;} .price_cont dl dd > ul li i:hover .layer {opacity:1; visibility:visible; transition:all 0.2s linear;} .price_cont dl dd > ul li i .layer_title{display:flex;justify-content:space-between;font-size:0.824rem;font-weight:700;color:#222 !important;} .price_cont dl dd > ul li i .layer_title > a{font-size:0.706rem;font-weight:400;color:#0fb3d3;text-decoration:underline;} .price_cont dl dd > ul li p {display:table-cell; vertical-align:top; /*width:calc(100% - 85px);*/ line-height:1.3; font-size:0.824rem; color:#222; transition:all 0.2s linear;} .price_cont dl .priceBtn {display:block; width:100%; line-height:53px; border:1px solid #a4a9b3; color:#a4a9b3; letter-spacing:-0.6pt; font-size:0.882rem; border-radius:50px; padding:0 30px; box-sizing:border-box; background:url('/img/moreArrow_g.png'); margin:20px 0 0; transition:all 0.2s linear; font-style:normal; text-align:left !important; background-repeat:no-repeat !important; background-position:center right 30px !important;} .price_cont dl .priceBtn + .priceBtn{margin-top:15px;} /*.price_cont dl .priceBtn:hover {background:#a4a9b3 url('/img/moreArrow.png'); color:#fff; transition:all 0.2s linear;}*/ .price_cont dl .priceBtn:hover{background:#0fb3d3 url('/img/moreArrow.png')no-repeat center right 30px; color:#fff; transition:all 0.2s linear; border:1px solid #0fb3d3;} .price_cont dl.on {top:-20px; box-shadow:0 10px 20px rgb(0 0 0 / 16%); transition:all 0.2s linear; border:1px solid #0eb3d3;outline:2px solid #0fb3d3; box-sizing:border-box;} .price_cont dl.on a::before {opacity:1; transition:all 0.2s linear;} .price_cont dl.on dt, .price_cont dl.on dd li span, .price_cont dl.on dd li p, .price_cont dl.on dt h4 , .price_cont dl.on dt .price_sub, .process_cont dl.on dd ul li, .price_cont dl.on dd > ul h4 {color:#0fb3d3 !important; transition:all 0.2s linear;} .price_cont dl.on dd > ul li i {background:#fc397c; transition:all 0.2s linear;} /*.price_cont dl.on .priceBtn {background:#0fb3d3 url('/img/moreArrow.png')no-repeat center right 30px; color:#fff; transition:all 0.2s linear; border:1px solid #0fb3d3;}*/ .price_cont + .flex_box{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:50px;} .price_cont + .flex_box .moreBtn_plus{margin:0;} .process_cont{flex-wrap:nowrap;gap:10px;} .process_cont dl {/*display:table;*/ display:flex; flex-direction:column; margin:0; width:100% !important; padding:60px; border:1px solid #0eb3d3;} .process_cont dl dt {/*display:table-cell;*/ width:100%; padding:0 0 30px; vertical-align:middle; text-align:center; /*padding-right:60px;*/} .process_cont dl dt .priceBtn {width:250px; display:block; margin:30px auto 0; /*color:#fff; background:#0eb3d3 url('/img/moreArrow.png'); border:1px solid #0eb3d3;*/} .process_cont dl dt .price_tit {font-size:inherit; letter-spacing:inherit; line-height:inherit; font-weight:inherit; border-bottom:1px solid #dfe1e5; padding-bottom:20px; margin-bottom:20px; line-height:1;} .process_cont dl dt span {display:block; margin:10px 0; font-size:1.529rem; color:#0eb3d3; line-height:1;} .process_cont dl dt .price_sub {font-size:0.882rem; color:#0eb3d3; letter-spacing:-0.5pt; line-height:1;} .process_cont dl dt h4 {position:relative; display:inline-block; color:#999; font-weight:400; font-size:1rem;} .process_cont dl dt h4:after {content:''; width:100%; height:1px; background:#999; position:absolute; left:0; top:50%; } .process_cont dl dd {/*display:table-cell;*/ width:100%; vertical-align:middle;} .process_cont dl dd ul {margin:0; padding:30px; min-height:auto !important; box-sizing:border-box;} .process_cont dl dd ul li {position:relative; font-size:1rem; letter-spacing:-0.7pt; line-height:1.4; margin:0 0 4px; color:#222; padding-left:13px; transition:all 0.2s linear; box-sizing:border-box;} .process_cont dl dd ul li:after {content:''; width:4px; height:4px; background:#aaa; position:absolute; top:11px; left:0; border-radius:100%;} .process_cont dl dd ul li p {display:block; box-sizing:border-box; margin:0 0 3px; font-size:0.882rem; color:#777; line-height:1.4; letter-spacing:-0.5pt; width:100%; transition:all 0.2s linear;} .process_cont dl dd ul li p.sub_txt {margin:10px 0 0;font-size:14px;} .process_cont dl dd ul li:last-child{display:table;margin:0;} .process_cont dl dd ul li.sub_list {display:table;margin:10px 0 7px;} .process_cont dl dd ul li.sub_list:after {display:none;} .process_cont dl.on {top:0 !important;} .price_banner {margin:50px 0 0;} .price_banner h4 {font-size:1.529rem; background:#0eb3d3; color:#fff; letter-spacing:-0.7pt; line-height:1.4; padding:17px 20px; box-sizing:border-box; font-weight:300; text-align:center; margin:0 0 5px;} .price_banner h4 span {font-size:inherit; color:#fff21e; letter-spacing:inherit; line-heighT:inherit; font-weight:bold;} .price_banner .price_banner_in {display:flex; flex-wrap:wrap; border:1px solid #0eb3d3;} .price_banner .price_banner_in dl {position:relative; text-align:center; width:33.33%; border-right:1px solid #0eb3d3; padding:35px 15px; box-sizing:border-box; background:#fff;} .price_banner .price_banner_in dl::after {content:'+'; width:60px; height:60px; line-height:60px; background:#fff; color:#0eb3d3; font-size:1.765rem; text-align:center; position:absolute; top:50%; right:100%; transform:translate(50%,-50%); box-shadow:0 0 20px rgba(0,0,0,0.1); border-radius:100%;} .price_banner .price_banner_in dl:first-child::after {display:none;} .price_banner .price_banner_in dl:last-child {border-right:0;} .price_banner .price_banner_in dl i {width:70px; height:70px; background:#0eb3d3; color:#fff; font-weight:bold; color:#fff; line-height:1; position:absolute; top:-1px; left:-1px; text-align:left; font-style:normal; padding:13px 0 0 13px; overflow:hidden;} .price_banner .price_banner_in dl i::after {content:''; width:150%; height:150%; background:#fff; position:absolute; bottom:-52px; right:-58px; transform:rotate(45deg);} .price_banner .price_banner_in dl dd {color:#222; font-weight:400; font-size:1.176rem; letter-spacing:-0.7pt; line-height:1.3; margin:15px 0 0;} .price_banner .price_banner_in dl dd span {font-size:inherit; font-weight:bold; color:#0eb3d3; letter-spacing:inherit; line-height:inherit;} /* 가격 */ /* 소식&언론보도 */ #news {position:relative;overflow:hidden;} #news:after {content:''; width:100%; height:0; background:#eff6f8; position:absolute; top:0; left:0; z-index:-1;} .news_cont {display:flex; flex-wrap:wrap;} .news_cont dl {position:relative; width:calc((100% - 90px) / 4); margin-right:30px;} .news_cont dl dt {position:relative; background:#222;} .news_cont dl dt img {transition:all 0.3s linear; object-fit:cover; aspect-ratio:286/200;} .news_cont dl.play dt img {opacity:0.6;} .news_cont dl.play a dt::before {content:''; width:58px; height:58px; background:url('/img/playBtn.png')no-repeat center; background-size:100% !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:99;} .news_cont dl:last-child {margin-right:0;} .news_cont dl dt {border-radius:10px; overflow:hidden; margin:0 0 25px;} .news_cont dl dd p {font-size:0.882rem; letter-spacing:-0.3pt; line-height:1; transition:all 0.3s linear;} .news_cont dl dd h4 {font-size:1.176rem; color:#222; letter-spacing:-0.6pt; font-weight:400; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height:1.55rem; transition:all 0.3s linear;} .news_cont dl:hover dd p, .news_cont dl:hover dd h4 {color:#0eb3d3; transition:all 0.3s linear;} .news_cont dl:hover dt img {transform:scale(1.2); transition:all 0.3s linear;} /* 소식&언론보도 */ /* 다이렉트 배너 */ .direct_banner_in{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:24px 80px;line-height:1.4;border-radius:25px;background-color:#0eb3d3;} .direct_banner_in .direct_text{color:#fff;text-align:left;} .direct_banner_in .direct_text strong{color:#FFFF00;} .direct_banner_in .direct_text h4{font-size:2.235rem;} .direct_banner_in .direct_text h4 span{color:#692498;} /*.direct_banner_in .direct_link{display:flex;align-items:center;gap:10px;justify-content:space-between;width:100%;}*/ .direct_banner_in .direct_link_btn{display:flex;align-items:center;gap:10px;padding:8px 20px;border-radius:25px;background-color:#fff;} .direct_banner_in .direct_link_btn:after{content:'';display:inline-block;width:13px;height:7px;background:url(/html/cloud/img/faq_arrow.png) no-repeat 50% 50%;transform:rotate(-90deg);} /* 다이렉트 배너 */ /******************************************************************************* @media ~1300px *******************************************************************************/ @media all and (max-width:1300px) { .bottom_quick .bottom_quick_in .quick_form .input.ver1 {width:30%; max-width:100%;} .bottom_quick .bottom_quick_in .quick_form .input.ver2 {width:calc(70% - 110px); max-width:100%;} .bottom_quick .bottom_quick_in .quick_form .submit {} /* VISUAL */ #visual li {background-size:120% !important;} #visual li .img_area {/* right:3%; */ margin-top:20px; margin-right:0;} #visual li .text_area {/* left:3%; */ margin-left:0;} #visual li .videoArea {width:50%; left:3%; margin-left:0;} #visual li .videoArea img {width:100%;} #visual .visual_num li {padding-right:60px;} #visual .visual_num li::after {right:30px; height:90px;} /* #visual li .img_area {max-width:calc(100% - 500px);} #visual li.cover01 .img_area .img1{left:50%; margin-left: -160px; top:140px; width: 500px;} #visual li.cover01 .img_area .img2{left:50%; margin-left: -290px; bottom: 130px; width: 400px;} #visual li.cover01 .img_area .img3{left:50%; margin-left: 80px; bottom: 140px; width: 120px;} #visual li.cover02 .img_area .img1{left:50%; margin-left: -230px; top:190px; width: 450px;} #visual li.cover02 .img_area .img2{left:50%; margin-left: -240px; bottom: 440px; width: 120px;} #visual li.cover02 .img_area .img3{left:50%; margin-left: 100px; bottom: 455px; width: 170px;} #visual li.cover02 .img_area .img4{left:50%; margin-left: -290px; bottom: 227px; width: 120px;} #visual li.cover02 .img_area .img5{left:50%; margin-left: 104px; bottom: 225px; width: 120px;} */ #visual .vt_wrap {width:94%;} /* VISUAL */ /* 홍보 배너 */ #event_banner .banner_list .slick-list{margin:0 50px;} #event_banner .banner_list .slick-prev{left:-10px;} #event_banner .banner_list .slick-next{right:-10px;} /* 홍보 배너 */ .link_banner_in li a br {display:none;} /* 포트폴리오 */ #mCSB_1_scrollbar_horizontal {width:94% !important;} #portfolio .list_cont {height: 313px} #portfolio .list_cont dl dt > img {height: 175px} /* 포트폴리오 */ /* 이러닝 서비스 */ /* #service .slick-dots li {margin-right:80px;} */ #service .slick-arrow {height:75px;} #service .slick-prev {left:-10px;} #service .slick-next {right:-10px;} #service .slick-list {margin:0 50px !important;} #service .service_cont dd {padding:0 0 0 40px;} /* 이러닝 서비스 */ /* 가격 */ .price_cont dl {width:calc((100% - 30px) / 2); margin-right:30px; margin-bottom:30px;} .price_cont dl:nth-child(2n) {margin-right:0;} /*.price_cont dl dd > ul li i .layer {transform:translateX(50%);}*/ /*.price_cont dl dd > ul li span {width:130px;}*/ /*.price_cont dl dd > ul li p {width:calc(100% - 130px);}*/ .process_cont dl{margin:0;} /* 가격 */ /* 데모체험 */ #demo ul {padding:0;} /* 데모체험 */ /* #certification {display:none;}*/ #news {display:none;} } /******************************************************************************* @media ~1100px *******************************************************************************/ @media all and (max-width:1100px) { } /******************************************************************************* @media 769~980px *******************************************************************************/ @media all and (max-width:980px) { .bottom_quick.close {bottom:-94px;} .bottom_quick .bottom_quick_in {justify-content:space-between;} .bottom_quick .bottom_quick_in h4 {display:flex; flex-wrap:Wrap; align-items:center; order:1; font-size:1.3rem;} .bottom_quick .bottom_quick_in img {max-width:20px; height:auto;} .bottom_quick .bottom_quick_in .quick_info {order:2;} .bottom_quick .bottom_quick_in .quick_info a {font-size:1.3rem;} .bottom_quick .bottom_quick_in .quick_info::before {display:none;} .bottom_quick .bottom_quick_in .quick_form {order:3; width:100%; margin:5px 0 0;} .bottom_quick .bottom_quick_in {padding:10px 20px; height:auto; } /* VISUAL */ #visual {height:650px;} #visual .slick-slide {height:650px;} #visual li {background-size:120% !important;} #visual li .text_area {width:40%;} #visual li .text_area br {display:none;} #visual li .text_area > span {font-size:1.2rem;} #visual li .text_area h2 {font-size:2.2rem; line-height:1.3; margin:15px 0 30px;} #visual li .text_area h2 br {display:none;} #visual li .videoArea {width:50%;} #visual li .videoArea:after {width:60px; height:60px;} #visual .visual_num {/* justify-content:center; */ margin:15px 0 20px;} #visual .visual_num li {padding-right:50px;} #visual .visual_num li::after {right:25px; height:60px;} #visual .visual_num li span {} #visual .visual_num li span b {font-size:1.5rem; top:0;} #visual .visual_num li p {margin:4px 0 0;} /* #visual li .img_area {max-width:calc(100% - 400px); height: 650px;} #visual li.cover01 .img_area .img1{margin-left: -100px; top:130px; width: 300px;} #visual li.cover01 .img_area .img2{margin-left: -150px; bottom: 210px; width: 200px;} #visual li.cover01 .img_area .img3{margin-left: 50px; bottom: 190px; width: 80px;} #visual li.cover02 .img_area .img1{margin-left: -100px; top:190px; width: 300px;} #visual li.cover02 .img_area .img2{margin-left: -130px; bottom: 350px; width: 90px;} #visual li.cover02 .img_area .img3{margin-left: 130px; bottom: 363px; width: 120px;} #visual li.cover02 .img_area .img4{margin-left: -130px; bottom: 207px; width: 90px;} #visual li.cover02 .img_area .img5{margin-left: 114px; bottom: 215px; width: 90px;} */ #visual .vt_wrap .theme_icon {width:70px; height:70px;top:-45px; left:-10px;} #visual .visual_tab {height:60px;} #visual .visual_tab a span {line-height:60px;} /* VISUAL */ /* 공통 CSS */ h3.title {font-size:2rem; margin:0 0 45px;} h3.title b {font-size:inherit; line-height:inherit; letter-spacing:inherit;} /* 공통 CSS */ /* 홍보 배너 */ #event_banner .banner_list li a{flex-wrap:wrap;justify-content:center;} #event_banner .banner_list li .img_area{} /* 홍보 배너 */ .link_banner_in li {width:calc((100% - 45px) / 4);} .link_banner_in li a {padding:25px 15px;} .link_banner_in li span {width:90px; height:90px;} .link_banner_in li h4 {font-size:1.3rem; margin:20px 0 10px;} /* 포트폴리오 */ #portfolio .portCount {margin:0 auto 50px auto;} #portfolio .portCount li p {font-size:1.176rem; font-weight:600; line-height:100%; margin-bottom:15px; color:#222; min-width:170px;} #portfolio .list_cont dl {margin-right:20px; width:230px;} #portfolio .list_cont dl dd {padding:20px 15px;} #portfolio .list_cont dl dd h4 {margin:0px 0 0;} /* 포트폴리오 */ #e_edu .e_eduList dl {width:calc((100% - 30px) / 3);} #e_edu .e_eduList dl:nth-of-type(-n+3) {margin-bottom:15px;} #e_edu .e_eduList dl dd {padding:20px;} #e_edu .e_eduList dl dd br {display:none;} /* 파트너사 */ #partner .partner_cont dl {width:calc((100% - 60px) / 4); margin-right:20px;} #partner .partner_cont dl br {display:none;} #partner .partner_cont dl dd {padding:15px 10px;} /* 파트너사 */ /* 수상&인증 */ #certification {overflow:hidden;} #certification .certi_cont .list{margin: 0 -32px;} #certification .certi_cont .list figure {float:left; margin:0 15px;} #certification .effect dl dt {padding: 35px 4vw 45px 4vw;} #certification .effect dl dt h4 {padding-top:48px; background-size:auto 35px;} #certification .effect dl dt ul li {padding:14px 0 14px 30px;} #certification .effect dl dd {padding:35px 0} #certification .effect dl dd ul li {padding:13px 0 13px 30px;} #certification .effect dl dd figure {padding:55px 4.7vw 35px 5vw;} #certification .effect dl dt:after {width:68px; height:68px; border-width:4px; line-height:60px; right:-34px; font-size:1.176rem;} #certification .effect dl dt:before {width:134px; height:80px; background-size:134px auto; right:-60px;} /* 수상&인증 */ /* 이러닝 서비스 */ #service .slick-dots {margin:0 0 75px;} #service .slick-dots li::before {width:90px; height:90px; margin:0 auto 13px;} #service .slick-dots li::after {width:90px; height:90px; background-size:50px;} #service .slick-dots li {position:relative; padding:0 9px; box-sizing:border-box; text-align:center; cursor:pointer; margin-right:30px;} #service .service_cont dd h4 {font-size:1.5rem;} #service .service_cont dd a {width:200px; line-height:48px; padding:0 20px; background:url('/img/moreArrow_blue.png')no-repeat center right 20px;} #service .service_cont dd a:hover {background:#0f91d0 url('/img/moreArrow.png')no-repeat center right 20px; color:#fff; transition:all 0.3s linear;} /* 이러닝 서비스 */ /* 이러닝 솔루션 */ #solution .solution dl.dep_con > a {padding:35px 10px;} #solution .solution dl.dep_tit {} #solution .solution dl.dep_tit a {padding:35px 25px;} #solution .solution dl.dep_tit img {bottom:40px; right:25px; max-width:50px;} #solution .solution dl.dep_tit h4 {font-size:1.3rem;} #solution .solution dl dt {width:85px; height:85px;} #solution .solution dl dd h4 {margin:12px 0 9px;} /* 이러닝 솔루션 */ /* 추천사 */ #recommendation .recomm_list li{gap:40px;} /* 추천사 */ /* 데모체험 */ #demo ul {} #demo ul li {width:calc((100% - 15px) / 2); margin-right:15px;} #demo ul li .theme_icon {width:70px; height:70px; top:-33px; right:-20px; } #demo ul li .thumnail {height:235px;} #demo ul li .thumnail > a::before {width:60px; height:60px; background-size:100% !important; margin:-30px 0 0 -30px;} #demo ul li .thumnail .qr_code {bottom:20px; right:20px;} #demo ul li .thumnail .qr_code img {max-width:100%;;} #demo ul li img {max-width:80%;} #demo ul li a.moreBtn {width:170px;} #demo dl {margin:40px 0 0;} #demo dl dt {margin-right:25px;} #demo dl dd a {width:235px; margin:3px 2px;} /* 데모체험 */ /* 가격 */ .price_cont {margin:45px 0 0;} .price_cont dl {} .price_cont dl dd ul li span {font-size:0.9rem;} .price_cont dl dd ul li p {font-size:0.9rem;} .price_cont dl .priceBtn {line-height:46px; padding:0 20px; background:url('/img/moreArrow_g.png')no-repeat center right 20px; color:#a4a9b3;} .price_cont dl:hover .priceBtn {border-color:#0FB3D3;background:#0FB3D3 url('/img/moreArrow.png')no-repeat center right 20px;color:#fff;} .price_cont dl.on .priceBtn{border-color:#0FB3D3;background:#0FB3D3;color:#fff;} .process_cont{flex-wrap:wrap;} .process_cont dl {padding:40px;} .process_cont dl dt {padding-right:40px;} .process_cont dl dd ul li:after {top:9px;} .price_banner h4 {font-size:1.3rem; padding:13px 15px;} .price_banner .price_banner_in dl br {display:none;} .price_banner .price_banner_in dl i {padding:9px 0 0 9px; width:55px; height:55px; } .price_banner .price_banner_in dl i::after {bottom:-43px; right:-44px;} .price_banner .price_banner_in dl img {max-width:85px;} .price_banner .price_banner_in dl::after {width:50px; heighT:50px; line-height:50px;} .price_banner .price_banner_in dl dd {font-size:1.1rem;} /* 가격 */ /* 소식&언론보도 */ .news_cont dl {position:relative; width:calc((100% - 60px) / 4); margin-right:20px;} .news_cont dl dt {margin:0 0 20px;} /* 소식&언론보도 */ } /******************************************************************************* @media 681 ~ 768px *******************************************************************************/ @media all and (max-width:768px) { /* 수상&인증 */ #certification .certi_cont .list dl dt .ico img {max-width:100px;} #certification .effect dl dt, #certification .effect dl dd {width:100%;} #certification .effect dl dt {padding:35px 30px 45px 30px;} #certification .effect dl dt:after {right:auto; top:auto; bottom:-35px; left:50%; transform:translateY(0) translateX(-50%); font-size:1.176rem;}/* width:68px; height:68px; border-width:4px; line-height:60px; */ #certification .effect dl dt:before {display:none;} #certification .effect dl dt ul {margin-top:15px;} #certification .effect dl dd {padding:5px 0 0 0;} #certification .effect dl dd figure {padding:45px 30px 35px 30px;} /* 수상&인증 */ #e_edu .e_eduList dl {width:calc((100% - 15px) / 2); border-radius:15px;} #e_edu .e_eduList dl::after {border-radius:15px;} #e_edu .e_eduList dl:nth-of-type(-n+4) {margin-bottom:15px;} #e_edu .e_eduList dl dd {padding:20px;} #e_edu .e_eduList dl dd br {display:none;} #e_edu .e_eduList dl dd a {height:42px; line-height:40px; padding:0 15px; background-position:center right 15px;} #e_edu .e_eduList dl dd p {margin:6px 0 10px;} #e_edu .e_eduList dl dd .checkList {margin:0 0 20px;} #e_edu .e_eduList dl dd .checkList li {font-size:1rem;} #e_edu .e_eduList dl dd .checkList li::before {font-size:20px; top:1px;} #e_edu .e_eduList dl dd h4 {font-size:1.3rem;} /* 데모체험 */ #demo ul li {width:100%; margin-right:0; margin-bottom:50px;} #demo ul li:last-child {margin-bottom:0;} #demo ul li .thumnail {height:210px; padding:0 30px;} #demo ul li .thumnail > a::before {width:42px; height:42px; margin:-21px 0 0 -21px;} #demo ul li .thumnail img {max-width:100%;} #demo ul li .thumnail .qr_code {bottom:10px; right:-15px;} #demo ul li .btn_list p {width:140px;} #demo ul li a.moreBtn {margin:20px 0 0 ; width:140px;} /* 다이렉트 배너 */ .direct_banner_in{flex-direction:column;gap:12px;padding:24px;} /* 다이렉트 배너 */ } /******************************************************************************* @media 481~680px *******************************************************************************/ @media all and (max-width:680px) { .bottom_quick .quick_close {width:60px;} .bottom_quick .bottom_quick_in .quick_form .input {height:36px;} .bottom_quick .bottom_quick_in .quick_form .input.ver2 {width:calc(70% - 90px);} .bottom_quick .bottom_quick_in .quick_form .submit {width:80px; font-size:12px; height:36px;} /* VISUAL */ #visual {height:auto; padding:90px 0 40px;;} #visual .slick-slide {height:100%;} #visual .sub_imgbox > li .basic_in {display:block;} #visual .slick-dots{bottom:23px; padding-right:15px;} #visual .slick-dots li {width:40px;} #visual .slick-dots li.slick-active {width:40px;} #visual .visual_num {justify-content:center;} #visual .visual_num li::after {display:none;} #visual li .img_area {width:90%; margin:0 auto;} #visual li {} #visual li.cover01, #visual li.cover02 {background:transparent;} /* #visual li:after {content:''; display:block; width:94%; position:relative; left:3%; background-size:80% !important; transition:all 0.5s; opacity:0; aspect-ratio:3 / 3} #visual li.cover01:after {background-position:bottom 12% left 15% !important; background:url('/img/visual_img01.png')no-repeat;} #visual li.cover02:after {background-position:bottom 12% left 22% !important; background:url('/img/visual_img02.png')no-repeat; } #visual li.cover04:after {background-position: center !important; background:url('/img/cover05_img01.png')no-repeat; animation:text_area 1s linear forwards; animation-delay:1.5s;} */ #visual li .text_area .moreBtn {width:150px; margin:0 auto;} #visual .visual_num li {padding-right:30px;} .b_btn {bottom:15px; margin-right:-85px; width:20px; height:20px;} /* #visual li .img_area{display: none;} */ #visual li .text_area {transform:translateY(0); position:relative; width:94%; top:0; text-align:center; z-index:10; padding:0; margin:0 0 25px;} #visual li .img_area .marquee li span img {border-radius:8px;} #visual li .text_area > span {font-size:1.1rem;} #visual li .text_area > span:after {bottom:0;} #visual li .text_area h2 {font-size:1.6rem; line-height:1.3; margin:10px 0;} #visual li .text_area h2 br{display: block;} #visual li.action .text_area span {top:0; opacity:1; transition:all 0s;} #visual li.action .text_area h2 {top:0; opacity:1; transition:all 0s; transition-delay:0;} #visual li.action .text_area p {top:0; opacity:1; transition:all 0s; transition-delay:0;} #visual li.action .text_area .moreBtn {opacity:1; transition:all 0s; transition-delay:0;} #visual li .videoArea {width:94%; top:70%; opacity:0;} #visual li.action .videoArea {opacity:1; transition:1.5s;} #visual li .videoArea:after {width:40px; height:40px;} #visual li .moreBtn {margin:20px auto 0;} #visual .vt_wrap {bottom:40px;} #visual .vt_wrap .theme_icon {width:50px; height:50px; top:-35px; left:0;} #visual .visual_tab {height:auto; border-radius:15px;} #visual .visual_tab a {width:50%;} #visual .visual_tab a:nth-child(-n+2) {border-bottom:1px solid rgba(255,255,255,0.3);} #visual .visual_tab a:nth-child(2n) {border-right:0;} #visual .visual_tab a span {line-height:44px; font-size:13px; padding-right:20px;} #visual .visual_tab a span img {max-width:20px;} #visual .visual_tab a:hover span {padding-right:30px;} /* VISUAL */ /* 공통 CSS */ h3.title {font-size:1.7rem; margin:0 0 30px; line-height:1.3} /* 공통 CSS */ .link_banner_in li {width:calc((100% - 15px) / 2);} .link_banner_in li:nth-of-type(-n+2) {margin-bottom:15px;} .link_banner_in li a {padding:25px 15px; border-radius:15px;} .link_banner_in li span {width:90px; height:90px;} .link_banner_in li span svg {width:40px; height:auto;} .link_banner_in li h4 {font-size:1.2rem; margin:15px 0 8px;} /* 섹션 퀵메뉴 */ .section_quick {display:none !important;} /* .section_cont ul {padding:7px 0 10px;} .section_cont li {margin:0 0 3px; padding-left:15px; box-sizing:border-box; position:relative; } .section_cont li a {font-size:12px;} .section_cont li a:hover {color:#222; transition:all 0.3s linear;} .section_cont li a:before {width:4px; height:4px; top:8px; left:-17px;} .section_cont li a:after {width:10px; height:9px; top:6px; left:-20px;} .section_cont li a.mPS2id-highlight {color:#222; text-decoration:underline; font-weight:400; transition:all 0.3s linear;} .section_cont li a.mPS2id-highlight:before {width:7px; height:7px; background:#0eb3d3; top:10px; left:-19px; transition:all 0.3s linear;} .section_cont li a.mPS2id-highlight:after {width:15px; height:15px; background:rgba(14,179,211,0.20); left:-23px; transition:all 0.3s linear;} */ /* 섹션 퀵메뉴 */ /* 홍보 배너 */ #event_banner .banner_list li a{flex-wrap:nowrap;} #event_banner .banner_list .slick-arrow{width:30px;height:50px;background-size:10px;} /* 홍보 배너 */ /* 포트폴리오 */ #portfolio .port_txt {position:relative; display:block; text-align:center; margin-top:5px;} #portfolio .portCount {margin:0 auto 35px auto;} #portfolio .portCount li strong {font-size:2.035rem;} #portfolio .portCount li p {font-size:1.059rem; margin-bottom:10px; min-width:120px;} #portfolio .list_cont {display:flex; flex-wrap:wrap; width:94%; margin:0 auto;} #portfolio .list_cont dl {margin-right:15px; width:calc((100% - 15px) / 2); margin-bottom:30px; border-radius:20px;} #portfolio .list_cont dl:nth-child(n+5) {display:none;} #portfolio .list_cont dl:nth-child(2n) {margin-right:0;} #portfolio .list_cont dl dt .hover {padding:25% 10px 20px;} #portfolio .list_cont dl dt .hover span {right:10px; bottom:20px;} #portfolio .list_cont dl dt .hover span img {width:13px;} #portfolio .list_cont dl dd {padding:16px 15px; border-radius:0 0 20px 20px;} #portfolio .list_cont dl dd p {font-size:13px;} #portfolio .list_cont dl dd h4 {margin:0px 0 0;} #portfolio #mCSB_1_container {width:100% !important; margin-bottom:0 !important;} #portfolio .list_cont {height: inherit} #portfolio .list_cont dl dt > img {height: 170px} /* 포트폴리오 */ /* 파트너사 */ #partner .partner_cont dl {width:calc((100% - 15px) / 2); margin-right:15px; margin-bottom:20px; border-radius:20px;} #partner .partner_cont dl:nth-child(2n) {margin-right:0;} #partner .partner_cont dl dd {padding:15px 10px;} /* 파트너사 */ /* 이러닝 서비스 */ #service .slick-dots {margin:0 0 50px;} #service .slick-dots li::before {width:75px; height:75px; margin:0 auto 13px; background-size:35px;} #service .slick-dots li::after {width:75px; height:75px; background-size:50px; background-size:35px;} #service .slick-dots li {position:relative; padding:0 9px; box-sizing:border-box; text-align:center; cursor:pointer; margin-right:15px;} #service .slick-dots li br {display:none;} #service .slick-arrow { width:30px; height:50px; background-size:10px; top:23%;} #service .slick-dots li:hover a {color:#222;} #service .slick-dots li:hover::after {opacity:0;} #service .slick-dots li:hover::before {border:1px solid #dfe1e5;} #service .slick-dots li.one:hover::before {background-image:url('/img/service_icon01.png');} #service .slick-dots li.two:hover::before {background-image:url('/img/service_icon02.png');} #service .slick-dots li.three:hover::before {background-image:url('/img/service_icon03.png');} #service .slick-dots li.four:hover::before {background-image:url('/img/service_icon04.png');} #service .slick-dots li.five:hover::before {background-image:url('/img/service_icon05.png');} #service .slick-dots li.six:hover::before {background-image:url('/img/service_icon06.png');} #service .slick-list {margin:0 0 !important;} #service .service_cont {} #service .service_cont dl {display:block;} #service .service_cont dl dt {display:block; width:100%;} #service .service_cont dl dt img {max-width:90%; max-height:250px;} #service .service_cont dl dd {display:block; width:100%; padding:0; margin:30px 0 0;} #service .service_cont dd h4 {font-size:1.4rem;} #service .service_cont dd p {margin:10px 0;} #service .service_cont dd li {margin-right:15px;} #service .service_cont dd div {margin:20px 0 0;} #service .service_cont dd a {width:180px; height:44px; line-height:42px; padding:0 15px; background:url('/img/moreArrow_blue.png')no-repeat center right 15px;} #service .service_cont dd a:hover {background:#0f91d0 url('/img/moreArrow.png')no-repeat center right 15px;} /* 이러닝 서비스 */ /* 이러닝 솔루션 */ #solution .solution {display:block; font-size:0; margin:0 0 10px; border-radius:20px;} #solution .solution dl {display:inline-block; width:50%;} #solution .solution dl.dep_con > a {padding:20px 10px;} #solution .solution dl.five, #solution .solution dl.six {border-bottom:0 !important;;} /* #solution .solution dl:nth-child(-n+3) {border-bottom:1px dashed #d4d4d4;} */ #solution .solution dl.dep_tit {display:block; width:100% !important; border-bottom:0;} #solution .solution dl.dep_tit a {padding:20px 15px;} #solution .solution dl.dep_tit img {bottom:10px; right:10px; max-width:30px;} #solution .solution dl.dep_tit h4 {font-size:1.3rem; display:inline-block; vertical-align:middle;} #solution .solution dl.dep_tit .btnCircle { display:inline-block; vertical-align:middle; margin:0; margin-left:15px;} #solution .solution dl.dep_tit h4 br {display:none;} #solution .solution dl dt {width:70px; height:70px; background-size:35px;} #solution .solution dl dd h4 {margin:12px 0 9px; font-size:1.1rem;} #solution .solution dl.five dt {background-size:25px;} /* 이러닝 솔루션 */ /* 추천사 */ #recommendation .recomm_list{flex-direction:column;} #recommendation .recomm_list li{align-items:flex-start;padding:30px;width:100%;} #recommendation .recomm_list li img{margin:0 auto;width:120px;height:30px;} /* 추천사 */ /* 데모체험 */ #demo ul {} #demo ul li {} #demo ul li .theme_icon {width:55px; height:55px; top:-25px; right:0; } #demo ul li .theme_icon img {width:100%; max-width:100%;} #demo ul li img {} #demo ul li a {width:100%;} #demo dl {margin:20px 0 0;} #demo dl dt {margin-right:0px; display:block; margin-bottom:25px;} #demo dl dd {display:block;} #demo dl dd a {width:48%; margin:3px 1%;} /* 데모체험 */ /* 가격 */ .price_cont {margin:30px 0 0; margin-left:-10px; display:block; padding:0 5%; box-sizing:border-box;} .price_cont .slick-list {padding-right:2px !important; box-sizing:border-box;} .price_cont .slick-track::after {content:''; display:block; clear:both;} .price_cont dl {float:left; margin-right:0 !important; margin-left:10px; margin-bottom:0 !important; padding:20px 10px 15px; box-sizing:border-box;} .price_cont dl.on {top:0; border:1px solid #0FB3D3;} .price_cont dl.best:before {top:19px; right:19px;} .price_cont dl.best.on:before{top:19px; right:19px;} .price_cont dl.best.on:after{top:-10px;right:-40px;} .price_cont dl.best.on dt:after{top:19px; right:19px;} .price_cont dl dt {font-size:1.3rem;} .price_cont dl dt .sexp_recomm{font-size:1.077rem;} .price_cont dl dd ul {min-height:290px;} .price_cont dl dd ul li span {font-size:1.077rem;} .price_cont dl dd ul li p {font-size:1.077rem;} .price_cont dl dd > ul li i .layer{font-size:0.923rem;} .price_cont dl dd > ul li i .layer_title{font-size:1rem;} .price_cont dl dd > ul li i .layer_title > a{font-size:0.923rem;} .price_cont dl .priceBtn {line-height:34px; padding:0 15px; background:url('/img/moreArrow_g.png')no-repeat center right 15px;font-size:1rem;} .price_cont dl:hover .priceBtn {background:#0FB3D3 url('/img/moreArrow.png')no-repeat center right 15px;} .price_cont .slick-dots {overflow:hidden; margin:20px 0 0; width:calc(100% - 10px); margin-left:10px; border-radius:10px;} .price_cont .slick-dots li {font-size:0; border:0; background:#fff; float:left; width:25%; height:3px; } .price_cont .slick-dots li.slick-active {background:#0FB3D3; border-radius:10px;} .price_cont .slick-dots li button {font-size:0; border:0; display:none;} .process_cont {display:flex;margin-left:0;} .process_cont dl {float:none; display:block; padding:30px 20px; margin-left:0 !important; border:1px solid #0FB3D3;} .process_cont dl.on {top:0; border:1px solid #0FB3D3;} .process_cont dl dt {display:block; width:100%; padding:0 15px;} .process_cont dl dt .priceBtn {width:160px; display:block; margin:20px auto;} .process_cont dl dd ul {padding:20px;} .process_cont dl dd ul li {padding-lefT:8px;} .process_cont dl dd ul li:after {top:8px; width:3px; height:3px;} .price_banner h4 {font-size:1.1rem; padding:10px 12px;} .price_banner .price_banner_in dl {width:100%; border-right:0; border-bottom:1px solid #0FB3D3; padding:30px 15px 25px;} .price_banner .price_banner_in dl:last-child {border-bottom:0;} .price_banner .price_banner_in dl i {padding:9px 0 0 9px; width:55px; height:55px; } .price_banner .price_banner_in dl i::after {bottom:-43px; right:-44px;} .price_banner .price_banner_in dl img {max-width:65px;} .price_banner .price_banner_in dl::after {width:35px; heighT:35px; line-height:35px; left:50%; top:0; transform:translate(-50%,-50%);} .price_banner .price_banner_in dl dd {font-size:1.1rem;} /* 가격 */ /* 소식&언론보도 */ .news_cont dl {position:relative; width:calc((100% - 15px) / 2); margin-right:15px; margin-bottom:25px;} .news_cont dl:nth-child(2n) {margin-right:0;} .news_cont dl dt {margin:0 0 15px;} .news_cont dl.play a dt::before {width:35px; height:35px;} .news_cont dl dd p {margin:0 0 3px;} /* 소식&언론보도 */ } /******************************************************************************* @media 361~480px *******************************************************************************/ @media all and (max-width:480px) { /* VISUAL */ #visual {/* height:700px; */} #visual .slick-slide {/* height:700px; */} /* #visual li:after {background-size:220% !important;} */ #visual li.cover01:after {background-position:bottom 12% left 22% !important;} #visual li.cover02:after {background-position:bottom 12% left 27% !important;} /* VISUAL */ /* 홍보 배너 */ #event_banner .banner_list li a{flex-wrap:wrap;} /* 홍보 배너 */ /* 이러닝 서비스 */ #service .service_cont dl dt img {max-width:90%; max-height:220px;} /* 이러닝 서비스 */ #e_edu .e_eduList dl {width:100%;} #e_edu .e_eduList dl:nth-of-type(-n+5) {margin-bottom:15px;} /* 수상&인증 */ #certification .certi_cont .list{margin: 0 -22px;} #certification .certi_cont .list figure {margin:0 10px;} #certification .certi_cont .list dl dt .ico img {max-width:70px;} #certification .effect dl dt {padding:30px 20px 35px 20px;} #certification .effect dl dt:after {width:50px; height:50px; border-width:3px; line-height:44px; bottom:-22px} #certification .effect dl dt ul li {padding:10px 0 10px 23px;} #certification .effect dl dt ul li:before {width:16px; height:16px; background-size:auto 16px;} #certification .effect dl dd figure {padding:35px 20px 25px 20px;} #certification .effect dl dd ul li {padding:9px 0 9px 23px;} #certification .effect dl dd ul li:before {width:16px; height:16px; background-size:auto 16px;} /* 수상&인증 */ /*portfolio*/ #portfolio .portCount {background:#f6f6f6; border-radius:20px; padding:20px 10px; box-sizing:border-box; margin:0 auto 20px auto;} #portfolio .portCount li {width:100%; border-right:0; padding:0 0 10px 0;} #portfolio .portCount li:last-child {padding:0;} #portfolio .portCount li p {font-size:1rem; margin-bottom:5px;} #portfolio .portCount li strong {font-size:1.5rem;} /*portfolio*/ } /******************************************************************************* @media ~420px *******************************************************************************/ @media all and (max-width:420px) { /* 포트폴리오 */ #portfolio .list_cont dl {margin-right:10px; width:calc((100% - 10px) / 2); margin-bottom:25px;} #portfolio .list_cont dl dd {padding:15px 10px;} #portfolio .list_cont dl dd p {font-size:13px;} #portfolio .list_cont dl dd h4 {margin:0px 0 0;} #portfolio .list_cont dl dt > img {height: 120px} /* 포트폴리오 */ }