/* layout */ body{width:100%; -webkit-text-size-adjust:none; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;} #wrap{ overflow:hidden; position:relative;width:100%; min-width:320px; background:#F7F7F8} #header{width:100%;border-bottom: 1px solid #ccc; } #visual{width:100%;} #contents{position:relative; width:100%;} #footer{width:100%; background:#fff;border-top: 1px solid #cecece;} .in_Layer{ width: 100%;max-width:1280px;margin:0 auto;} .clear_obj:after{content:""; display:block; clear:both;} .top_center{top:50%; -webkit-transform:translate3d(0,-50%,0); -moz-transform:translate3d(0,-50%,0); -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); } .ef-3{ -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s; } .ef-5{ -webkit-transition:all .5s; -moz-transition:all .5s; transition:all .5s; } #skip a{ overflow:hidden;display:block; position:absolute; top:0; left:0; width:100%; height:0; font-size:0; text-align:center; white-space:nowrap;} #skip a:active, #skip a:focus{position:relative; top:0; left:0; width:100%; height:32px; padding:8px 0 0 0; background-color:#333; font-size:18px; font-weight:600; color:#fff;} @media(max-width:1280px) { .in_Layer{ width:100%;margin:0 auto; padding:0 16px; } } @media(max-width:1080px) { header{height:66px;} } .clamp3{ overflow:hidden; display:-webkit-box; white-space:normal; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient: vertical; } .left_Box{position:fixed; top:0; left:-100%; width:78%; height:100%; min-width:250px; z-index:500; } .left_Box .nav_in{position:absolute; top:0; left:0; width:100%; height:100%; padding:65px 0 0 0; background:#fff; z-index:600; overflow-x:hidden; overflow-y:auto; } .left_Box .loginTop{width:100%; height:55px; padding:0 15px; background:#2f4260; } .left_Box .loginTop:after{content:""; display:block; clear:both;} .left_Box .loginTop .login{ line-height:55px;float:left; } .left_Box .loginTop .login a{display:block; font-size:18px; line-height:55px; color:#fff;} .left_Box .loginTop .login a img{width:16px; margin-top:-4px; margin-right:4px; vertical-align:middle;} .left_Box .loginTop .myPage{ padding:15px 0;float:right; } .left_Box .loginTop .myPage a{display:block; width:28px;} .left_Box .loginTop .myPage a img{display:block; width:100%; } .left_Box ul.gnb_m{width:100%;} .left_Box ul.gnb_m li{width:100%;} .left_Box ul.gnb_m > li > a{display:block; position:relative; width:100%; padding:12px 45px 12px 15px; border-bottom:1px solid #eee; font-size:16px; font-weight:400; } .left_Box ul.gnb_m > li > a.activeOn + ul.depth_m{display:block; } .left_Box ul.gnb_m > li > a.depth_has:before{content:""; display:block; position:absolute; top:50%; right:15px; width:13px; height:1px; margin-top:-0.5px; background:#32186d;} .left_Box ul.gnb_m > li > a.depth_has:after{content:""; display:block; position:absolute; top:50%; right:15px; width:13px; height:1px; margin-top:-0.5px; background:#32186d; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s; -webkit-transform: rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .left_Box ul.gnb_m > li > a.depth_has.active:after{ - webkit-transform: rotate(0); -moz-transform:rotate(0); -ms-transform:rotate(0); -o-transform: rotate(0); transform: rotate(0); } .left_Box ul.gnb_m > li > a.en{ font-weight:600;color:#ab0c24; } .left_Box ul.gnb_m ul.depth_m{display:none; width:100%; padding:15px 0; background:#f8f8f8; border-bottom:1px solid #eee;} .left_Box ul.gnb_m ul.depth_m li{width:100%;} .left_Box ul.gnb_m ul.depth_m li a{display:block; position:relative; width:100%; padding:8px 15px 8px 25px; font-size:14px; font-weight:400; } .left_Box ul.gnb_m ul.depth_m li a.active{ font-weight:600;color:#32186d;} .left_Box ul.gnb_m ul.depth_m li a:before{content:""; display:block; position:absolute; top:50%; left:15px; width:2px; height:2px; background:#000; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius:1px ; } .box_lang{display:table; width:100%; margin:20px 0 0 0; padding:0 10px; font-size:0; text-align:center;} .box_lang li{display:table-cell; padding:0 10px; } .box_lang li:last-child{border-right:none; } .box_lang li a{display:table; width:100%; padding:10px 0; border:1px solid #de1e43;} .box_lang li a span{display:table-cell; font-size:14px; font-weight:600; color:#de1e43; vertical-align:middle; } .wrap_bg{display:none; position:fixed; top:65px; left:0; width:100%; height:100%; background:rgba(0,0,0, 0.7); z-index:115; } #header{position: fixed; top:0; left:0; width:100%; } #header{position:fixed; top:0; left:0;z-index:300; width:100%; background:#fff;} .head_in{position:relative; width:100%; height:140px; } .head_top {position: relative;height:58px;max-width: 1280px;margin: 0 auto;z-index: 600;} .head_top:after {content:'';display: block;clear:both;} .head_top .logo {display: flex;align-items: center;position: absolute;height: 58px;} .head_top .logo a {font-size: 0;height: 100%;display: flex;align-items: center;} .head_top .logo img {max-height:80%;} .head_top .logo img.logo_color {display: none;} .head_top .util_right {margin-top: 17px;font-size: 0;float: right;} .head_top .util_right > li {display: inline-block;position: relative;padding-bottom: 6px;vertical-align: middle;} .head_top .util_right > li + li:before {content:'';position: absolute;top: calc(50% - 3px);left: 0;width: 1px;height:14px;background: #ececec;transform: translate(0,-50%);} .head_top .util_right > li > a {display: block;position: relative;padding: 0 9px;font-size: 15px;font-weight: 300;color: #000;} .head_top .util_right .dep2_wrap {min-width: 108px;} .head_top .util_right > li.dep2_wrap > a:after {content:'';position: absolute;top: 50%;right:10px;width: 9px;height: 6px;background:url('/template/resp/images/ico_top_arr.png') 0 0 no-repeat;transform: translate(0,-50%);opacity: 0.3;} .head_top .util_right > li.dep2_wrap:hover > a:after {opacity: 1;} .head_top .util_right > li.dep2_wrap.active > a:after {opacity: 1;transform:translate(0,-50%) rotate(180deg);} .head_top .util_right .dep2 {display: none;position: absolute;top: 100%;left: 50%;width: 131px;padding:10px 17px;background: #fff;border: 1px solid #cecece;z-index: 1;transform: translate(-50%,0);} .head_top .util_right .active .dep2 {display: block;} .head_top .util_right .dep2:before {content:'';position: absolute;top: -7px;left: 50%; width: 0px;height: 0px;border-right: 4px solid transparent;border-bottom: 7px solid #cecece;border-left: 4px solid transparent;transform: translate(-50%,0);} .head_top .util_right .dep2:after {content:'';position: absolute;top: -7px;left: 50%;width: 0;height: 0;border-right: 2px solid transparent;border-bottom: 7px solid #fff;border-left: 2px solid transparent;transform: translate(-50%,0);} .head_top .util_right .dep2 > li {} .head_top .util_right .dep2 > li > a {font-size: 14px;line-height: 28px;color: #999999;} .head_top .util_right .dep2 > li:hover > a {color: #2f4260;} .head_top .util_right .cart { margin-left: 3px;font-size: 15px;font-weight: 700;color: #fe0000;} .head_top .util_right .cart .cart_cnt {display: inline-block;min-width: 9px;} .head_gnb {max-width:1280px;margin:0 auto;} /* .logo{display:table; position:absolute; top:0; left:20px; width:229px; height:100%;} .logo img{display:block; width:100%; } .logo a{display:table-cell; vertical-align:middle; } .logo .logo_color{display:none;} .util_right{position:absolute; top:50%; right:20px; -webkit-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); -o-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .util_right:after{content:""; display:block; clear:both;} .util_right .util_nav{position:relative; float:left; width:70px; height:30px; border-bottom:1px solid #fff; } .util_right .util_nav p.target_txt{font-size:18px; font-weight:500; color:#fff; background:url("../image/ico_arrow_down_w.png") 95% center no-repeat;} .util_right .util_nav > ul{display:none; position:absolute; top:100%; left:0; width:100%; padding:4px; background-color: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; } .util_right .util_nav > ul li{width:100%;} .util_right .util_nav > ul li a{display:block; width:100%; padding:2px 0; font-size:15px; color:#000; } .util_right .login_box{float:left; padding:4px 0 0 0; } .util_right .login_box:after{content:""; display:block; clear:both; } .util_right .login_box li{float:left; margin-left:20px;} */ .down .head_in{height:80px;} .fixed .head_in{background-color: #fff; border-bottom:none; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; } .fixed .head_in.no_shadow{ border-bottom:1px solid #ccc; box-shadow:inherit; -webkit-box-shadow:inherit; -moz-box-shadow:inherit; } .fixed .logo .logo_basic{display:none;} .fixed .logo .logo_color{display:block;} /* .fixed .util_right .util_nav{border-bottom:1px solid #ccc;} .fixed .util_right .util_nav p.target_txt{color:#000; background:url("../image/ico_arrow_down_b.png") 95% center no-repeat;} */ @media(max-width:1280px) { /* .head_in{height:95px} .logo{width:170px;} .util_right .util_nav{width:58px;} .util_right .util_nav p.target_txt{padding:4px 0 0 0; font-size:14px; -webkit-background-size: 8px; background-size:8px;} .util_right .util_nav > ul li a{font-size:13px;} */ } @media(max-width:1280px) { #header{position:relative;} .down .head_in{height:65px;} .head_in{height:65px; background-color: #fff; border-bottom:none; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; } .logo{left:50%; -webkit-transform: translate3d(-50%,0,0); -moz-transform: translate3d(-50%,0,0); -ms-transform: translate3d(-50%,0,0); -o-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } .logo .logo_color{display:block;} .head_top {height: 65px;} .head_top .logo {height: 65px;max-width: 80%;} } .head_gnb {} .head_gnb:after {content:'';display: block;clear: both;} .gnb_area{margin-top: 8px;float: left;} .gnb {} .gnb > li {position: relative;z-index: 400;float: left;} .gnb > li > a {display: block;padding: 18px 35px;font-size: 18px;color: #000;} .gnb > li:hover > a {color: #00a2ff;} /* .gnb > li:hover .depth_box {display: block;} */ .gnb > li:after {content:'';position: absolute;bottom: -4px;left: 50%;width: 0;height: 4px;background: #2f4260;transform: translate(-50%,0);transition: all 0.3s;} .gnb > li:hover:after{width: 100px;} .gnb .depth_box {display: none;position: absolute;top: 100%;left: 50%;min-width: 182px;padding: 18px 0 6px;background: #fff;border: 1px solid #2f4260;transform: translate(-50%,0);} .gnb .depth_box:before {} .gnb .depth {text-align: center;} .gnb .depth > li {} .gnb .depth > li a {font-size: 16px;line-height: 43px;color: #999999;} .gnb .depth > li:hover a {color: #2f4260;} .head_search {position: relative;margin-top: 17px;border-bottom: 2px solid #000;font-size: 0;float: right;} .head_search select {width: 115px;;height: 44px;padding-left: 7px;background:url('/template/resp/images/ico_arr01.png') calc(100% - 12px) center no-repeat;border: none;font-size: 18px;color: #c5c5c5;} .head_search select:focus, .head_search select:hover {background-image: url('/template/resp/images/ico_arr01_on.png');} .head_search input[type="text"] {width: 250px;height: 44px;padding-right: 40px;border: none;font-size: 18px;font-weight: 400;letter-spacing:-0.05em;color: #000;text-align: right;} .head_search input[type="text"]::placeholder{color: #000;} .head_search .division {content:'';display: inline-block;width: 1px;height: 18px;background: #d6e0e6;vertical-align: middle;} .head_search .btn_submit {position: absolute;right: 9px;bottom: 11px;width: 20px;height: 18px;background:url('/template/resp/images/ico_search.png') 0 0 no-repeat;font-size: 0;text-indent: -999em;} /* .gnb_area{width:100%; height:100%; padding:0 200px 0 270px;} .gnb{width:100%; height:100%; font-size:0; text-align:center; } .gnb:after{content:""; display:block; clear:both;} .gnb > li{float:left; position:relative; width:calc(100% / 6 - 0.01px); height:100%; } */ /* .gnb{display:table; width:100%; height:100%; font-size:0; text-align:center; } .gnb > li{display:table-cell; position:relative; width:calc(100% / 6 - 0.01px); height:100%; } */ /* .gnb{width:100%; font-size:0; text-align:center; } .gnb > li{display:inline-block; *display:inline; *zoom:1; width:14%; } */ /* .gnb > li > a{display:table; width:100%; height:100%; font-size:18px; font-weight:500; color:#fff;} .gnb > li > a span{display:table-cell; position:relative; vertical-align:middle; } .gnb > li > a span:after{content:""; display:block; position:absolute; bottom:0; left:50%; width:45px; height:3px; margin-left:-22.5px; background-color: #fff; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scale(0,1); -moz-transform: scale(0,1); -ms-transform: scale(0,1); -o-transform: scale(0,1); transform: scale(0,1); } .gnb > li > a.active span:after, .gnb > li > a:hover span:after{ -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } .gnb .depth_box{display:none; position:absolute; top:100%; left:0; z-index:15; width:calc(100% + 1px); margin-right:-1px; border-right:1px solid #ccc; border-left:1px solid #ccc;-webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .gnb li:first-child .depth_box{border-left:1px solid #ccc; } .gnb .depth_box ul.depth{width:100%; padding:12px 0 40px; } .gnb .depth_box ul.depth li{width:100%; padding:8px 0;} .gnb .depth_box ul.depth li a{display:block; width:100%; padding:0 5px; font-size:16px; color:#383b44; } .depth_bg{display:none; position:absolute; top:100%; left:0; width:100%; background-color: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) ; } .fixed .gnb > li > a{color:#000;} .fixed .gnb > li > a span:after{background-color: #de1e43; } */ @media(max-width:1280px) { /* .gnb_area{padding:0 180px 0 200px;} .gnb > li > a{font-size:16px; } .gnb > li > a span:after{width:40px; margin-left:-20px; } .gnb .depth_box ul.depth li{padding:6px 0;} .gnb .depth_box ul.depth li a{padding:0 5px; font-size:14px; letter-spacing:-0.5px;} */ .gnb_area{display:none; } /* .head_search {display: none;} */ .util_right {display: none;} } .lms .head_point {margin-top: 36px;} .head_point {display: flex; float: right;margin-top: 20px;} .head_point > li {position: relative;padding:0 11px 0 10px;font-size: 15px; color: #000000; line-height: 1;} .head_point > li:before {position: absolute;content:'';right: 0;top: 50%;transform: translate(0,-50%); content:'';width: 1px;height: 14px;background: #ececec;} .head_point > li a {display: flex;align-items: center;} .head_point > li img {margin-right: 5px;} .m_top_util{display:none; } .head_in .menuOpen{position:absolute; top:50%; left:15px; width:30px; height:21px; z-index: 600; -webkit-transform:translate3d(0,-50%,0); -moz-transform:translate3d(0,-50%,0); -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); } .head_in .menuOpen > span{display:block; position:absolute; left:0; width:100%; height:3px; background:#2f4260; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; -webkit-transform: rotate(0); -moz-transform:rotate(0); -ms-transform:rotate(0); -o-transform: rotate(0); transform: rotate(0); } .head_in .menuOpen > span.line1{top:0; } .head_in .menuOpen > span.line2{top:50%; -webkit-transform:translate3d(0,-50%,0); -moz-transform:translate3d(0,-50%,0); -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); } .head_in .menuOpen > span.line3{bottom:0; } .head_in .menuOpen.active > span.line1{top:50%; -webkit-transform:translate3d(0,-50%,0); -moz-transform:translate3d(0,-50%,0); -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); -webkit-transform: rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .head_in .menuOpen.active > span.line2{width:0;} .head_in .menuOpen.active > span.line3{top:50%; bottom:auto; -webkit-transform:translate3d(0,-50%,0); -moz-transform:translate3d(0,-50%,0); -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); -webkit-transform: rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .head_in .myPage{position:absolute; top:50%; right:15px; width:22px; height:22px; z-index: 600; -webkit-transform:translate3d(0,-50%,0); -moz-transform:translate3d(0,-50%,0); -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); } .head_in .myPage a{display:block; width:100%; height:100%; background:url("../image/myPageLogin_on.png") 0 0 no-repeat; -webkit-background-size: 100%; background-size:100% ; font-size:0; text-indent:-9999px; } .head_in .myPage.active a{background:url("../image/myPageLogout_on.png") 0 0 no-repeat; -webkit-background-size: 100%; background-size:100% ; } @media(max-width:1280px) { .m_top_util{display:block; } .head_point {display: none;} .head_point_mo {display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #efefef;} .head_point_mo > li {position: relative;width: 50%;text-align: center;font-size: 16px; color: #000000; line-height: 1;} .head_point_mo > li + li:before {position: absolute;content:'';left: 0;top: 50%;transform: translate(0,-50%); width: 1px;height: 14px;background: #ececec;} .head_point_mo > li a {display: flex;padding: 12px 0;justify-content: center;align-items: center;text-align: center;} .head_point_mo > li img {margin-right: 10px;} } .grdH{position:absolute; top:0; width:25px; height:100%; z-index:10;} .grdH.prevH{left:0; /* background-image:-webkit-gradient(linear,left top,right top,from(#e3052a),to(rgba(277,5,42,0))); background-image:-webkit-linear-gradient(left,#e3052a,rgba(277,5,42,0)); background-image:-moz-linear-gradient(left,#e3052a,rgba(277,5,42,0)); background-image:-o-linear-gradient(left,#e3052a,rgba(277,5,42,0)); background-image:-ms-linear-gradient(left,#e3052a,rgba(277,5,42,0)); background-image:linear-gradient(to right,#e3052a,rgba(277,5,42,0)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3052a', endColorstr='#e3052a', gradientType=1); */ } .grdH.nextH{right:0; /* background-image:-webkit-gradient(linear,right top,left top,from(#774eef),to(rgba(120,83,241,0))); background-image:-webkit-linear-gradient(right,#774eef,rgba(120,83,241,0)); background-image:-moz-linear-gradient(right,#774eef,rgba(120,83,241,0)); background-image:-o-linear-gradient(right,#774eef,rgba(120,83,241,0)); background-image:-ms-linear-gradient(right,#774eef,rgba(120,83,241,0)); background-image:linear-gradient(to left,#774eef,rgba(120,83,241,0)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#774eef', endColorstr='#774eef', gradientType=1); */ } .plus .grdH.nextH{right:30px; } .topFixedGnb{display:none; width:100%; height:50px;} .fixedGnbIn{position:relative; width:100%; height:50px; background: #2f4260; /* background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e3052a), color-stop(0.9500000000000001, #774eef)); background: -moz-linear-gradient(145deg, #e3052a 0%, #774eef 95%); background: -webkit-linear-gradient(145deg, #e3052a 0%, #774eef 95%); background: -o-linear-gradient(145deg, #e3052a 0%, #774eef 95%); background: -ms-linear-gradient(145deg, #e3052a 0%, #774eef 95%); background: linear-gradient(145deg, #e3052a 0%, #774eef 95%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3052a', endColorstr='#774eef', gradientType=1); */ } .fixedGnbIn.fixed{position:fixed; top:0; left:0; z-index:150;} .fixedGnbIn.plus{padding-right:40px;} .fixedGnbIn.plus .backPlus{display:block; } .fixedGnbIn .backPlus{display:none; position:absolute; top:0; right:0; width:35px; height:100%; background:#774eef; z-index:30;} .fixedGnbIn .backPlus:before{content:""; display:block; position:absolute; top:50%; right:10px; width:13px; height:2px; margin-top:-1px; background:#fff; z-index:20;} .fixedGnbIn .backPlus:after{content:""; display:block; position:absolute; top:50%; right:10px; width:13px; height:2px; margin-top:-1px; background:#fff; z-index:20; -webkit-transform: rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .fixedGnbIn ul{ display:-webkit-inline-box; display:-webkit-inline-flex; display:inline-flex; -webkit-justify-content: space-between; justify-content: space-between;min-width:100%; -webkit-box-pack:justify; } .fixedGnbIn ul:before, .fixedGnbIn ul:after{content:""; display:block; clear:both;} .fixedGnbIn ul li{position:relative;width: auto;} .fixedGnbIn ul li.active:after{content:""; display:block; position:absolute; bottom:-1px; left:50%; width:42px; height:4px; margin-left:-21px; background:#fff;} .fixedGnbIn ul li a{display:block; height:100%; padding:0 25px; font-size:16px; font-weight:500; line-height:50px; color:#fff; text-align:center; white-space: nowrap; } @media(max-width:1280px) { .topFixedGnb{display:block; } } #visual{background-color: #000;} #visual .main_visual{position:relative; width:100%; height:560px; margin:0 auto; } #visual .main_visual .slick-track, #visual .main_visual .slick-list{ overflow:hidden;width:100%; height:100%;} #visual .main_visual .slick-slide div{width:100%; height:100%;} #visual .main_visual .pic{position:relative; width:100%; height:100%;background-position: center center; -webkit-background-size: cover !important; background-size: cover !important;background-repeat: no-repeat; -webkit-transform:scale(1.05); -ms-transform:scale(1.05); -moz-transform:scale(1.05); -o-transform:scale(1.05); transform:scale(1.05); -webkit-transition:all 1.5s cubic-bezier(.58, .36, .84, .87); -moz-transition:all 1.5s cubic-bezier(.58, .36, .84, .87); -ms-transition:all 1.5s cubic-bezier(.58, .36, .84, .87); -o-transition:all 1.5s cubic-bezier(.58, .36, .84, .87); transition:all 1.5s cubic-bezier(.58, .36, .84, .87); } #visual .main_visual .slick-active .pic{ -webkit-transform:scale(1.0); -ms-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); } #visual .main_visual a{height:100%;} #visual .main_visual .slick-arrow{position:absolute; top:50%; width:31px; height:60px; margin-top:-30px; padding:0; background-position: 0 0; -webkit-background-size: 100%; background-size:100%; background-repeat: no-repeat; background-color:rgba(0,0,0,0); border:none; font-size:0; z-index:20; cursor:pointer;} #visual .main_visual .slick-arrow.slick-prev{left:50px; background-image:url("../image/visualPrev.png");} #visual .main_visual .slick-arrow.slick-next{right:50px; background-image:url("../image/visualNext.png");} @media(max-width:1280px) { #visual .main_visual{height:auto;} #visual .main_visual .slick-slide > div {padding-bottom: 41.094%;font-size: 0;} #visual .main_visual .pic {position: absolute;} /* #visual .main_visual .slick-slide:before{content:""; display:block; position:absolute; top:0; left:0; z-index:300; width:100%; height:100%; background-color:rgba(0,0,0,0.8);} */ #visual .main_visual .slick-arrow{width:24px; height:46px; margin-top:-23px;} #visual .main_visual .slick-arrow.slick-prev{left:20px; } #visual .main_visual .slick-arrow.slick-next{right:20px; } } @media(max-width:767px) { } /* 슬라이드 기본 dot arrow */ .slick-arrow{position:absolute; padding:0; background-position: 0 0; -webkit-background-size:100%; background-size:100%; background-repeat: no-repeat; background-color:rgba(0,0,0,0); border:none; font-size:0; z-index:80; cursor:pointer;} .slick-dots{position:absolute; left:0; width:100%; font-size:0; text-align:center; } .slick-dots li{display:inline-block; *display:inline; *zoom:1; cursor:pointer;} .slick-dots li button{ width:100%; height:100%;margin:0; padding:0; font-size:0; } .col1{color:#e3052a;} .tit_txt_01{width:100%; margin-bottom:8%; padding:0 15px; font-size:40px; font-weight:300; color:#000; text-align:center;} .tit_txt_02{padding-bottom:5px; font-size:26px; font-weight:500; color:#000;} .tit_txt_02 span.cap{display:inline-block; padding-left:15px; font-size:18px; font-weight:300; color:#000; } @media(max-width:1080px) { .tit_txt_01{font-size:30px;} .tit_txt_02{font-size:22px;} .tit_txt_02 span.cap{padding-left:12px; font-size:16px;} } @media(max-width:767px) { .tit_txt_01{font-size:25px; } .tit_txt_02{font-size:18px; } .tit_txt_02 span.cap{display:block; padding-left:0; font-size:14px;} } .ico_condition{display:inline-block; height:22px; margin-right:5px; padding:1px 6px; font-size:15px; font-weight:600; line-height:22px; color:#fff; text-align:center; } .ico_condition:last-child{margin-right:0; } .bg_red01{background-color: #e3052a;} .bg_blue01{background-color: #00bbff;} .bg_black01{background-color: #000;} @media(max-width:1080px) { .ico_condition{height:20px; font-size:13px; line-height:20px; } } .main_sec{width:100%; } .main_sec01{padding:8% 0 12% 0; background: url("../image/bg_sec_01.jpg") center center no-repeat; -webkit-background-size:cover; background-size:cover;} .main_sec01 .tit_txt{padding-bottom:3%; font-size:50px; font-weight:600; color:#fff; text-align:center; } .main_sec01 .cap_txt{font-size:18px; font-weight:100; line-height:30px; color:rgba(255,255,255,0.6); text-align:center; } .main_sec01 ul.list_soliution{width:100%; padding:10% 0 0 0; font-size:0; text-align:center; } .main_sec01 ul.list_soliution li{display:inline-block; *display:inline; width:calc(100% / 4 - 20.1px); margin:0 10px; *zoom:1; } .main_sec01 ul.list_soliution li img{display:block; width:100%; } @media(max-width:1080px) { .main_sec01 .tit_txt{font-size:35px;} .main_sec01 .cap_txt{font-size:16px; line-height:28px;} .main_sec01 ul.list_soliution li{width:calc(100% / 4 - 10.01px); margin:0 5px; } } @media(max-width:767px) { .main_sec01 .tit_txt{font-size:25px;} .main_sec01 .cap_txt{font-size:14px; line-height:26px;} .main_sec01 ul.list_soliution li{width:calc(100% / 2 - 20.01px); max-width:250px; margin:0 10px; } } .main_sec02{padding:100px 0 150px 0;} .main_sec02 .tit_txt_01{position:relative; padding:0 150px; } .main_sec02 .tit_txt_01:before, .main_sec02 .tit_txt_01:after{content:""; display:block; position:absolute; top:50%; width:130px; height:1px; margin-top:-0.5px; background-color: #c8c8c8;} .main_sec02 .tit_txt_01:before{left:0; } .main_sec02 .tit_txt_01:after{right:0; } .main_sec02 ul.list_event{width:calc(100% + 13px); margin-left:-13px;} .main_sec02 ul.list_event:after{content:""; display:block; clear:both;} .main_sec02 ul.list_event li{ width:calc(100% / 4 - 13.01px); margin-left:13px;float:left; } .main_sec02 ul.list_event li a{display:block; position:relative; width:100%; } .main_sec02 ul.list_event .box_img{position:relative; width:100%; margin-bottom:20px; padding-top:100%; } .main_sec02 ul.list_event .box_img img{display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;} .main_sec02 ul.list_event .box_txt{width:100%; padding:0 8px;} .main_sec02 ul.list_event .box_txt dt{ overflow:hidden;width:100%; padding-bottom:10px; font-size:20px; font-weight:500; color:#000; text-overflow:ellipsis; white-space:nowrap; } .main_sec02 ul.list_event .box_txt dd{height:72px; font-size:16px; font-weight:300; line-height:24px; color:#666;} .main_sec02 ul.list_event .obj_over{position:absolute; top:0; left:0; width:100%; height:100%; background:url("../image/obj_event_over.jpg") center center no-repeat; -webkit-background-size: cover; background-size:cover; opacity:0; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); -o-transform:scale(1,0); transform:scale(1,0); -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; -o-transform-origin:center top; transform-origin:center top; } .main_sec02 ul.list_event a:hover .obj_over{opacity:1; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1);} .main_sec02 ul.list_event .obj_over .in{position:absolute; top:50%; left:0; width:100%; padding:0 25px; text-align:center; -webkit-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); -o-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .main_sec02 ul.list_event .obj_over .in p{width:100%; margin-bottom:25px; font-size:30px; font-weight:100; color:#fff; } .main_sec02 ul.list_event .obj_over .in .btn_more{width:100%; height:42px; max-width:154px; margin:0 auto; border:1px solid #fff; font-size:13px; font-weight:300; line-height:40px; color:#fff; text-align:center; } @media(max-width:1080px) { .main_sec02 ul.list_event .box_txt dt{font-size:18px;} .main_sec02 ul.list_event .box_txt dd{height:66px; font-size:14px; line-height:22px;} .main_sec02 ul.list_event .obj_over{display:none; } } @media(max-width:767px) { .main_sec02{padding:80px 0 80px 0;} .main_sec02 .tit_txt_01{padding:0 40px;} .main_sec02 .tit_txt_01:before, .main_sec02 .tit_txt_01:after{width:30px;} .main_sec02 ul.list_event{width:100%; margin-left:0;} .main_sec02 ul.list_event li{width:calc(100% / 2 - 10.01px); margin:0 5px 25px; } .main_sec02 ul.list_event .box_img{margin-bottom:10px;} .main_sec02 ul.list_event .box_txt dt{padding-bottom:5px; } } .gray_area{width:100%; background:#fff url("../image/gd_bg.jpg") left 42% repeat-x;} .main_sec03{position:relative; padding:0 0 280px 0;} .slider_sample{position:relative; width:100%;} .slider_sample .slick-slide{ -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; } .slider_sample .slick-slide, .slider_sample .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"]{ -webkit-transform: scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform: scale(0.7,0.7); -o-transform: scale(0.7,0.7); transform: scale(0.7,0.7); } .slider_sample .slick-center, .slider_sample .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"]{ -webkit-transform: scale(0.9,0.9); -moz-transform:scale(0.9,0.9); -ms-transform: scale(0.9,0.9); -o-transform: scale(0.9,0.9); transform: scale(0.9,0.9); } .slider_sample .slick-slide a{display:block; position:relative; width:100%; padding-top:56%; } .slider_sample .slick-slide img{display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;} .slider_sample .slick-arrow{top:50%; width:18px; height:33px; margin-top:-16.5px;} .slider_sample .slick-arrow.slick-prev{left:25%; background-image:url("../image/btn_prev.png");} .slider_sample .slick-arrow.slick-next{right:25%; background-image:url("../image/btn_next.png");} .slider_sample .slick-dots{bottom:-14%; } .slider_sample .slick-dots li{width:12px; height:12px; margin:0 20px; } .slider_sample .slick-dots li button{background-color: #fff; border:1px solid #6d6d6d; border-radius:6px;} .slider_sample .slick-dots li.slick-active button{background-color: #030303; border:1px solid #030303;} @media(max-width:1080px) { .main_sec03{padding:0 0 180px 0;} .slider_sample .slick-arrow.slick-prev{left:12%;} .slider_sample .slick-arrow.slick-next{right:12%;} } @media(max-width:767px) { .main_sec03{padding:0 0 100px 0;} .slider_sample .slick-arrow{width:14px; height:26px; margin-top:-13px;} .slider_sample .slick-arrow.slick-prev{left:55px;} .slider_sample .slick-arrow.slick-next{right:55px;} .slider_sample .slick-dots li{margin:0 10px; } } @media(max-width:375px) { .slider_sample .slick-arrow.slick-prev{left:35px;} .slider_sample .slick-arrow.slick-next{right:35px;} } .main_sec04{position:relative; padding-bottom:15%; } ul.slider_teacher{width:calc(100% + 40px); margin-left:-40px; padding-top:40px; } ul.slider_teacher .slick-slide{margin:0 0 0 40px; } ul.slider_teacher .slick-slide a{display:block; width:100%;} ul.slider_teacher .slick-slide .imgD{width:100%; margin-bottom:25px;} ul.slider_teacher .slick-slide .imgD img{display:block; width:100%;} ul.slider_teacher .slick-slide p{padding-bottom:8px; font-size:18px; font-weight:400; } ul.slider_teacher .slick-slide p.name{position:relative; padding-bottom:35px;} ul.slider_teacher .slick-slide p.name:after{content:""; display:block; position:absolute; bottom:16px; left:0; width:67px; height:2px; background:#770ad2;} ul.slider_teacher .slick-slide p.name span{font-size:24px; font-weight:400;} ul.slider_teacher .slick-arrow{position:absolute; top:-45px; width:56px; height:56px; padding:0; background:#fff; border:1px solid #a4a4a4; font-size:0; z-index:20; cursor:pointer; opacity:0.3; filter:alpha(opacity=30); -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition:all .3s; } ul.slider_teacher .slick-arrow:hover{opacity:1; filter:alpha(opacity=100);} ul.slider_teacher .slick-arrow.slick-prev{right:55px; background:#fff url("../image/prev.png") center center no-repeat;} ul.slider_teacher .slick-arrow.slick-next{right:0; background:#fff url("../image/next.png") center center no-repeat;} @media(max-width:1080px) { ul.slider_teacher{width:calc(100% + 20px); margin-left:-20px;} ul.slider_teacher .slick-slide{margin:0 0 0 20px; } ul.slider_teacher .slick-slide .imgD{margin-bottom:15px;} ul.slider_teacher .slick-slide p{padding-bottom:6px; font-size:14px;} ul.slider_teacher .slick-slide p.name{padding-bottom:20px;} ul.slider_teacher .slick-slide p.name:after{bottom:10px; width:35px; height:2px;} ul.slider_teacher .slick-slide p.name span{font-size:18px;} ul.slider_teacher .slick-arrow{top:0; width:36px; height:36px; -webkit-background-size:100%; background-size:100%;} ul.slider_teacher .slick-arrow.slick-prev{right:35px; } ul.slider_teacher .slick-arrow.slick-next{right:0; } } .main_sec05{position:relative; padding:6% 0 10% 0; } .main_sec05 .in_Layer{position:relative; } .main_sec05 h3.reviewTitle{ display:inline-block; *display:inline;position:absolute; top:187px; left:0; font-size:26px; font-weight:100; color:#ff85a8; z-index:20; *zoom:1; transform: rotate(-90deg) translate(0,0); -webkit-transform: rotate(-90deg) translate(0,0); -moz-transform: rotate(-90deg) translate(0,0); transform-origin: left top; } .main_sec05 h3.reviewTitle b{font-weight:600; color:#fff; } .slider_review{ overflow:hidden;position:relative; width:calc(100% - 75px); margin-left:75px; padding-bottom:50px; z-index:30;} .slider_review ul.swiper-wrapper{} .slider_review li{padding:60px 30px; background-color: #fff; border:1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) ; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) ; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) ; } .slider_review dl{width:100%;} .slider_review dl dt{padding-bottom:30px; font-size:18px; font-weight:600; color:#000;} .slider_review dl dd{font-size:16px; font-weight:100;} .slider_review dl dd.txt_area{height:90px; margin-bottom:40px; line-height:30px; color:#000; } .slider_review dl dd.data{color:#a0a0a0;} .slider_review .swiper-scrollbar1{position:absolute; bottom:0; left:0; width:100%; height:5px; background-color: #eaeaea;} .slider_review .swiper-scrollbar1 .swiper-scrollbar-drag{position:relative; top:0; left:0; width:100%; height:100%; background:#000;} .main_sec05 .grd_bg{position:absolute; top:0; right:45%; width:1180px; height:calc(100% + 80px); margin-left:0; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #774eef), color-stop(1, #e3052a)); background: -moz-linear-gradient(-45deg, #774eef 0%, #e3052a 100%); background: -webkit-linear-gradient(-45deg, #774eef 0%, #e3052a 100%); background: -o-linear-gradient(-45deg, #774eef 0%, #e3052a 100%); background: -ms-linear-gradient(-45deg, #774eef 0%, #e3052a 100%); background: linear-gradient(-45deg, #774eef 0%, #e3052a 100%); z-index:10; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#774eef', endColorstr='#e3052a', gradientType=1); } @media(max-width:1080px) { .main_sec05{padding:60px 0 8% 0; } .main_sec05 h3.reviewTitle{position:inherit; top:0; padding-bottom:20px; font-size:22px; transform: rotate(0) translate(0,0); -webkit-transform: rotate(0) translate(0,0); -moz-transform: rotate(0) translate(0,0); } .slider_review{width:100%; margin-left:0; padding-bottom:30px;} .slider_review li{padding:40px 20px;} .slider_review dl dt{padding-bottom:20px; font-size:16px;} .slider_review dl dd{font-size:14px;} .slider_review dl dd.txt_area{height:78px; margin-bottom:20px; line-height:26px; } .main_sec05 .grd_bg{right:45%; width:900px; } } @media(max-width:767px) { .main_sec05{padding:30px 0 15% 0; } .main_sec05 .grd_bg{right:25%; width:670px; height:calc(100% + 30px); } } .main_sec06{padding:150px 0 13% 0; background-color: #f7f7f7;} ul.slider_lecture{width:calc(100% + 28px); margin-left:-28px; padding-top:40px; } ul.slider_lecture .slick-slide{margin:0 0 0 28px; } ul.slider_lecture .slick-slide a{display:block; width:100%;} ul.slider_lecture .slick-slide .imgD{width:100%; margin-bottom:25px;} ul.slider_lecture .slick-slide .imgD img{display:block; width:100%;} ul.slider_lecture .slick-slide .box_txt{width:100%;} ul.slider_lecture .slick-slide .box_txt dt{ overflow:hidden;padding-bottom:5px; font-size:18px; font-weight:500; color:#000; text-overflow:ellipsis; white-space:nowrap; } ul.slider_lecture .slick-slide .box_txt dd.cap{padding-bottom:20px; font-size:18px; color:#666;} ul.slider_lecture .slick-slide .box_txt dd.box_price:after{content:""; display:block; clear:both;} ul.slider_lecture .slick-slide .box_txt dd.box_price .box_condition{ padding-bottom:5px; font-size:0;float:left; } ul.slider_lecture .slick-slide .box_txt dd.box_price .price{ font-size:18px; font-weight:500; color:#d70303;float:right;} ul.slider_lecture .slick-arrow{position:absolute; top:-45px; width:56px; height:56px; padding:0; background:#fff; border:1px solid #a4a4a4; font-size:0; z-index:20; cursor:pointer; opacity:0.3; filter:alpha(opacity=30); -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition:all .3s; } ul.slider_lecture .slick-arrow:hover{opacity:1; filter:alpha(opacity=100);} ul.slider_lecture .slick-arrow.slick-prev{right:55px; background:#fff url("../image/prev.png") center center no-repeat;} ul.slider_lecture .slick-arrow.slick-next{right:0; background:#fff url("../image/next.png") center center no-repeat;} @media(max-width:1080px) { ul.slider_lecture{width:calc(100% + 20px); margin-left:-20px;} ul.slider_lecture .slick-slide{margin:0 0 0 20px; } ul.slider_lecture .slick-slide .imgD{margin-bottom:15px;} ul.slider_lecture .slick-slide .box_txt dt{font-size:16px; } ul.slider_lecture .slick-slide .box_txt dd.cap{padding-bottom:15px; font-size:16px;} ul.slider_lecture .slick-slide .box_txt dd.box_price .price{font-size:16px;} ul.slider_lecture .slick-arrow{top:0; width:36px; height:36px; -webkit-background-size:100%; background-size:100%;} ul.slider_lecture .slick-arrow.slick-prev{right:35px; } ul.slider_lecture .slick-arrow.slick-next{right:0; } } @media(max-width:767px) { .main_sec06{padding:100px 0 16% 0; background-color: #f7f7f7;} ul.slider_lecture{width:calc(100% + 10px); margin-left:-10px;} ul.slider_lecture .slick-slide{margin:0 0 0 10px; } ul.slider_lecture .slick-slide .box_txt dd.cap{font-size:14px;} ul.slider_lecture .slick-slide .box_txt dd.box_price .price{font-size:14px;} } #contents .noS .slick-arrow{position:absolute; top:-45px; width:56px; height:56px; padding:0; background:#fff; -webkit-background-size: 100%; background-size:100%; border:1px solid #a4a4a4; font-size:0; z-index:20; cursor:pointer; opacity:0.3; filter:alpha(opacity=30); -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition:all .3s; } #contents .noS .slick-arrow:hover{opacity:1; filter:alpha(opacity=100);} #contents .noS .slick-arrow.slick-prev{right:55px; background:#fff url("/template/1/type1/images/prev.png") center center no-repeat;} #contents .noS .slick-arrow.slick-next{right:0; background:#fff url("/template/1/type1/images/next.png") center center no-repeat;} #contents .m_reviewArea{position:relative; width:100%; height:752px; margin-bottom:100px;} #contents .m_reviewArea:after{content:""; display:block; position:absolute; top:0; left:0; width:50%; height:752px; margin-left:-324px; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8100d1), color-stop(1, #4247db)); background: -moz-linear-gradient(-30deg, #8100d1 0%, #4247db 100%); background: -webkit-linear-gradient(-30deg, #8100d1 0%, #4247db 100%); background: -o-linear-gradient(-30deg, #8100d1 0%, #4247db 100%); background: -ms-linear-gradient(-30deg, #8100d1 0%, #4247db 100%); background: linear-gradient(-30deg, #8100d1 0%, #4247db 100%); z-index:10; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8100d1', endColorstr='#4247db', gradientType=1); } #contents .m_reviewArea .in_Layer{position:relative; height:100%; z-index:140; } /* #contents .m_reviewArea .in_Layer:after{content:""; display:block; position:absolute; top:0; left:-374px; z-index:10; width:730px; height:752px; background:url("/template/1/type1/images/m4Bg.jpg") 0 0 no-repeat;} */ #contents .m_reviewArea h3.reviewTitle{ display:inline-block; *display:inline;position:relative; top:45px; left:-158px; font-size:26px; font-weight:100; color:#bbb9ff; z-index:20; *zoom:1; transform: rotate(-90deg) translate(0,0); -webkit-transform: rotate(-90deg) translate(0,0); -moz-transform: rotate(-90deg) translate(0,0); transform-origin: 100% 100%; } #contents .m_reviewArea h3.reviewTitle b{font-weight:600; color:#fff; } #contents .m_reviewArea .reviewSlider{position:relative; top:45px; padding-left:60px; z-index:100; } #contents .m_reviewArea .reviewSlider:before{content:""; display:block; position:absolute; top:0; left:0; width:333px; height:267px; background:#fff; z-index:1;} #contents .m_reviewArea .reviewB{position:relative; top:45px; left:60px; width:640px; padding:80px 60px; background:#2c2c2d url("/template/1/type1/images/conLogo.png") 92% 92% no-repeat; z-index:100;} #contents .m_reviewArea .reviewB:before{content:""; display:block; position:absolute; top:-57px; right:0; width:100px; height:57px; background:url("/template/1/type1/images/reviewshow.png") 0 0 no-repeat; -webkit-background-size: 100%; background-size:100%;} #contents .m_reviewArea .reviewB .slick-list{ overflow:hidden;width:100%; height:100%;} #contents .m_reviewArea .reviewB .slick-arrow{position:absolute; top:auto; right:-420px; bottom:0; } #contents .m_reviewArea .reviewB .slick-arrow.slick-prev{right:-365px;} #contents .m_reviewArea .reviewB .title{ overflow:hidden;width:100%; padding:0 0 50px 0; font-size:26px; font-weight:500; color:#fff; text-overflow:ellipsis; white-space:nowrap; } #contents .m_reviewArea .reviewB .area{ overflow:hidden; display:-webkit-box;width:100%; height:315px; margin-bottom:32px; font-size:18px; font-weight:100; line-height:24px; color:#666; white-space:normal; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:13; -webkit-box-orient: vertical; } #contents .m_reviewArea .reviewB .area span{font-size:100%; color:#978eff; } #contents .m_reviewArea .reviewB .caption{font-size:18px; color:#aaa;} #contents .m_reviewArea .reviewB .caption span.bul{display:inline-block; padding:0 8px; } #contents .m_reviewArea .reviewB .caption span.w{color:#fff; } #contents .m_reviewArea .reviewNav{ overflow:hidden;position:absolute; top:26px; left:268px; width:1330px; height:267px; background:#333;} #contents .m_reviewArea .reviewNav:before{content:""; display:block; position:absolute; top:0; left:0; width:333px; height:267px; background:#fff; z-index:1;} #contents .m_reviewArea .reviewNav .slick-list, #contents .m_reviewArea .reviewNav .slick-track, #contents .m_reviewArea .reviewNav .slick-slide div, #contents .m_reviewArea .reviewNav .slick-slide li{ overflow:hidden;height:100%;} #contents .m_reviewArea .reviewNav li{padding:6px 5px;} #contents .m_reviewArea .reviewNav li a{display:block; width:100%; height:100%; padding:95px 0; background: url("/template/1/type1/images/reviewNav.gif") 0 0 no-repeat; -webkit-background-size: 100%; background-size: 100%; font-size:18px; font-weight:100; color:#606060; text-align:center; } #contents .m_reviewArea .reviewNav li a span{display:block; font-size:100%; color:#978eff; } #contents .m_reviewArea .inTextBox{position:absolute; right:0; bottom:58px; width:425px; height:270px;} #contents .m_reviewArea .inTextBox .title{padding-bottom:28px; font-size:20px; font-weight:100; color:#141414; } #contents .m_reviewArea .inTextBox p{font-size:16px; font-weight:100; color:#141414;} #contents .m_reviewArea .inTextBox strong{font-size:20px; font-weight:500; color:#141414;} #contents .m_reviewArea .inTextBox .more{position:absolute; bottom:0; left:0; } #contents .m_reviewArea .inTextBox .more a{display:block; font-size:16px; font-weight:800; letter-spacing:-0.5px; color:#000; } #contents .m_reviewArea .inTextBox .more a img{display:inline-block; margin-left:8px; vertical-align:middle; } @media(max-width:1280px){ #contents .m_reviewArea{height:510px;} #contents .m_reviewArea h3.reviewTitle{top:0; left:0; color:#000; z-index:20; transform: rotate(0) translate(0,0); -webkit-transform: rotate(0) translate(0,0); -moz-transform: rotate(0) translate(0,0); } #contents .m_reviewArea h3.reviewTitle b{color:#000; } #contents .m_reviewArea:after{display:none; } #contents .m_reviewArea .reviewB{ top:45px;left:0; width:600px; padding:32px 30px; } #contents .m_reviewArea .reviewB:before{top:-42px; width:74px; height:42px;} #contents .m_reviewArea .reviewB .slick-arrow{right:auto; left:calc(100% + 70px); } #contents .m_reviewArea .reviewB .slick-arrow.slick-prev{right:auto; left:calc(100% + 10px); } #contents .m_reviewArea .reviewB .title{padding:0 0 40px 0; font-size:24px; font-weight:500; color:#fff; } #contents .m_reviewArea .reviewB .area{ height:242px;font-size:16px; -webkit-line-clamp:10; } #contents .m_reviewArea .reviewB .caption{font-size:16px;} #contents .m_reviewArea .reviewNav{top:37px; left:292px; width:1000px; height:202px; } #contents .m_reviewArea .reviewNav:before{width:250px; height:202px; } #contents .m_reviewArea .reviewNav li a{padding:68px 0; font-size:16px;} #contents .m_reviewArea .inTextBox{ right:15px;bottom:0; width:auto; height:auto; margin-top:0;} #contents .m_reviewArea .inTextBox .title{display:none;} #contents .m_reviewArea .inTextBox p{display:none;} #contents .m_reviewArea .inTextBox strong{display:none;} #contents .m_reviewArea .inTextBox .more{position:relative; padding:0; } } @media(max-width:920px){ #contents .noS .slick-arrow{width:45px; height:45px;} #contents .m_reviewArea .reviewB{width:500px; } #contents .m_reviewArea .reviewB .slick-arrow{left:calc(100% + 10px); } #contents .m_reviewArea .reviewB .slick-arrow.slick-prev{display:none !important; } #contents .m_reviewArea .reviewNav{left:192px;} #contents .m_reviewArea .inTextBox .more a img{display:block; margin:0; } } @media(max-width:680px){ #contents .noS .slick-arrow{width:40px; height:40px;} #contents .m_reviewArea{height:424px;} #contents .m_reviewArea h3.reviewTitle{ font-size:24px;} #contents .m_reviewArea .reviewB{width:calc(100% - 132px); } #contents .m_reviewArea .reviewB .slick-arrow{left:calc(100% + 5px); } #contents .m_reviewArea .reviewB .title{padding:0 0 30px 0; font-size:20px;} #contents .m_reviewArea .reviewB .area{ height:172px;font-size:14px; -webkit-line-clamp:7; } #contents .m_reviewArea .reviewB .caption{font-size:14px;} #contents .m_reviewArea .reviewNav{top:35px; right:0; left:auto; width:440px; height:178px; } #contents .m_reviewArea .reviewNav:before{width:220px; height:178px; } #contents .m_reviewArea .reviewNav li a{padding:60px 0; font-size:14px;} } @media(max-width:470px){ #contents .m_reviewArea{height:350px;} #contents .m_reviewArea .reviewB{width:calc(100% - 64px); -webkit-background-size: 130px; background-size:130px; } #contents .m_reviewArea .reviewB:before{top:-26px; width:46px; height:26px;} #contents .m_reviewArea .reviewB .slick-arrow{display:none !important; } #contents .m_reviewArea .reviewB .area{height:98px; -webkit-line-clamp:4; } #contents .m_reviewArea .reviewNav{top:50px; right:-95px;} #contents .m_reviewArea .reviewNav li a{padding:60px 0 60px 48px; text-align:left; } #contents .m_reviewArea .inTextBox{right:5px;} #contents .m_reviewArea .inTextBox .more a{font-size:14px; } } .dis_in{display:block; } #contents .mSec3{ overflow:hidden;position:relative; width:100%; margin-bottom:100px; padding:105px 0; background:#f2f2f2;} #contents .mSec3 > .in_Layer:after{content:""; display:block; clear:both;} #contents .mSec3 .textBox{ width:238px; padding-top:130px;float:left;} #contents .mSec3 .textBox strong{display:block; margin-bottom:15px; font-size:30px; font-weight:400; color:#000;} #contents .mSec3 .textBox p{font-size:16px; font-weight:400; } #contents .mSec3 .move1Slider{position:relative; width:942px; float:left;} #contents .mSec3 .move1Slider ul.movieB{ overflow:hidden;position:relative; width:702px; background:#fff; font-size:0; z-index:100;} #contents .mSec3 .move1Slider ul.movieB .slick-list{overflow:hidden; } #contents .mSec3 .move1Slider ul.movieB li a, #contents .mSec3 .move1Slider ul.movieB li img{display:block; width:100%;} #contents .mSec3 .move1Slider ul.movieNav{ overflow:hidden;position:absolute; top:50%; right:-394px; width:950px; font-size:0; -webkit-transform:translate(0,-50%); -moz-transform:translate(0,-50%); -ms-transform:translate(0,-50%); -o-transform:translate(0,-50%); transform:translate(0,-50%); } #contents .mSec3 .move1Slider ul.movieNav .slick-list{overflow:hidden;} #contents .mSec3 .move1Slider ul.movieNav .slick-list, #contents .mSec3 .move1Slider ul.movieNav .slick-track, #contents .mSec3 .move1Slider ul.movieNav .slick-slide div, #contents .mSec3 .move1Slider ul.movieNav .slick-slide li{height:100%;} #contents .mSec3 .move1Slider ul.movieNav li{padding:0 9px; cursor:pointer; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #contents .mSec3 .move1Slider ul.movieNav li a, #contents .mSec3 .move1Slider ul.movieNav li img{display:block; width:100%; } #contents .mSec3 .move1Slider .sampleBtn{position:absolute; bottom:-52px; left:-35px; width:124px; z-index:100; } #contents .mSec3 .move1Slider .sampleBtn a, #contents .mSec3 .move1Slider .sampleBtn img{display:block; width:100%; } @media(max-width:1280px){ .dis_in{display:inline-block; } #contents .mSec3 .textBox{ width:100%; margin-bottom:25px; padding:0; text-align:center;float:none; } #contents .mSec3 .textBox strong{font-size:28px;} #contents .mSec3 .textBox p{font-size:14px;} #contents .mSec3 .move1Slider{left:-50px; width:640px; max-width:80%; margin:0 auto; float:none; } #contents .mSec3 .move1Slider ul.movieB{width:100%; } #contents .mSec3 .move1Slider ul.movieNav{right:-536px; width:800px; } } @media(max-width:780px){ #contents .mSec3 .textBox strong{margin-bottom:12px; font-size:25px;} #contents .mSec3 .move1Slider{left:0; max-width:70%; } #contents .mSec3 .move1Slider .sampleBtn{bottom:-42px; left:-25px; width:95px; } } @media(max-width:767px){ .re_dis_block{display:block; } #contents .mSec3{margin-bottom:50px; padding:60px 0; } #contents .mSec3 .tit_txt_01{margin-bottom:24px;} #contents .mSec3 .textBox strong{font-size:24px;} #contents .mSec3 .move1Slider{min-width:290px;} } #footer .topInfo{width:100%; } #footer .topInfo .in_Layer{position:relative; padding-top:65px; padding-bottom:45px; } #footer .topInfo .in_Layer:after{content:""; display:block; clear:both;} #footer .topInfo .topmove{position:absolute; top:-1px; right:0; width:63px; cursor:pointer; } #footer .topInfo .topmove img{display:block; width:100%; } #footer .topInfo .contactUs{position:relative; width:400px; float:left;} #footer .topInfo .contactUs:after{content:""; display:block; position:absolute; top:9px; right:1px; width:1px; height:90%;background:#eeeeee;} #footer .topInfo h3{padding-bottom:25px; font-size:20px; font-weight:300; color:#999999;} #footer .topInfo p{font-size:16px;font-weight: 300; line-height:26px; color:#000000; } #footer .topInfo .contactUs strong{display:block; padding-bottom:6px; font-size:40px; font-weight:800; color:#000000; } #footer .topInfo .info{ width:calc(100% - 400px);padding-left: 55px; font-size:0;float:right;word-break: keep-all;} #footer .topInfo .info:after{content:""; display:block; clear:both;} #footer .topInfo .info div{ width:54%;float:left; } #footer .topInfo .info div.right{ width:46%;float:right;} #footer .fNav{position:absolute; bottom:55px; left:0; width:100%; padding-top:25px; font-size:0; } #footer .fNav span{ display:inline-block; margin-right:3px; border:1px solid #777; } #footer .fNav span a{display:inline-block; height:35px; padding:0 20px; font-size:16px; line-height:33px; color:#fff; } #footer .bottomInfo{width:100%; padding:18px 0; border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee; } #footer .bottomInfo .in_Layer:after{content:""; display:block; clear:both;} #footer .bottomInfo .bNav{ font-size:0;float:left; } #footer .bottomInfo .bNav span{display:inline-block; margin-right:24px; } #footer .bottomInfo .bNav span a{font-size:16px;font-weight: 300;color:#000; } #footer .bottomInfo .bNav span.bold a{color:#00a2ff;} #footer .bottomInfo .copy{ font-size:16px; color:#585858;float:right; } @media(max-width:1280px) { #footer .topInfo .in_Layer{padding-top: 25px; padding-bottom:25px; } #footer .topInfo .contactUs{position:inherit; width:285px; border-right:none; } #footer .topInfo h3{padding-bottom:12px; font-size:18px;} #footer .topInfo p{font-size:14px;} #footer .topInfo .contactUs strong{padding-bottom:6px; font-size:28px;} #footer .topInfo .info{ width:calc(100% - 360px); padding-left: 40px;float:left;} #footer .topInfo .info div{ width:100%;float:none; } #footer .topInfo .info div.right{ width:100%;float:none;} #footer .fNav{top:20px; bottom:auto; padding-top:0; text-align:center; } #footer .fNav span{display:inline-block; width:calc(100% / 3 - 12.01px); margin:0 6px; } #footer .fNav span a{display:inline-block; width:100%; height:45px; padding:0; font-size:14px; line-height:43px; } #footer .bottomInfo .bNav{ width:100%; padding-bottom:10px; text-align:center;float:none; } #footer .bottomInfo .bNav span{margin:0 10px; } #footer .bottomInfo .bNav span a{font-size:14px; } #footer .bottomInfo .copy{ width:100%; font-size:14px; text-align:center;float:none; } } @media(max-width:767px) { .hidden_m{display:none; } #footer .topInfo .contactUs:after{display:none; } #footer .topInfo {padding-bottom:5px; } #footer .topInfo h3{font-size:16px;} #footer .topInfo .topmove{bottom:-18px; width:50px; } #footer .topInfo .contactUs{ width:100%; padding-bottom:20px;float:none; } #footer .topInfo .contactUs strong{font-size:22px;} #footer .topInfo .info{ width:100%; padding-right:50px;padding-left: 0;float:none; } #footer .fNav span a{height:40px; line-height:38px; } #footer .bottomInfo .in_Layer{padding-right:50px; } #footer .bottomInfo .copy{text-align:left; } } #header.lms {border-bottom: 1px solid #000;} #header.lms:after {content:'';position: absolute;top: 80px;left: 0;width: 100%;height: 1px;background: #ececec;} .lms .head_top {height: 80px;} .lms .head_top .logo {height: 80px;} .lms .head_top .util_right {margin-top: 33px;} .lms .head_top .util_right > li > a {padding: 0 20px;font-weight:400;} .btn_search span {display: inline-block;width: 20px;height: 18px;margin-top: 1px;background:url('/template/resp/images/ico_search02.png') 0 0 no-repeat;font-size: 0;vertical-align: top;text-indent: -999em;} .btn_search.active span {background:url('/template/resp/images/ico_close.png') 0 0 no-repeat;} .lms .head_search_bg {display: none;position: absolute;left: 0;width: 100%;background: #f3f8fe;border-top: 1px solid #ececec;border-bottom: 1px solid #ececec;z-index:400;} .lms .head_search {width: 640px;height: 70px;margin:103px auto;background: #fff;border: 1px solid #dedede;float: none;} .lms .head_search select {width: 155px;height: 68px;padding-left: 28px;font-size: 20px;color: #000;} .lms .head_search .btn_submit {position: static;width: 132px !important;width: 132px;height: 68px;padding-left: 33px;background-position:0 center;font-size: 20px;color: #000;text-align: left;float: right; text-indent: 0;} .lms .head_search input[type="text"] {width: 340px;height: 68px;padding:0 20px;font-size: 20px;text-align: left;} .lms .gnb_area {display: flex;position: relative;margin-top: 0;width: 100%;} .lms .all_menu_btn {display: flex;justify-content: center;align-items: center;width: 60px;height: 60px;border: 1px solid #dedede;border-top: none;cursor: pointer;} .lms .all_menu_btn .whzbtn {position: relative;width:21px; height:17px;} .lms .all_menu_btn .whzbtn > span{display:block; position:absolute; left:0; width:100%; height:3px; background:#000000;border-radius:1px;transition:all .5s;transform: rotate(0);} .lms .all_menu_btn .whzbtn > span.line1{top:0; } .lms .all_menu_btn .whzbtn > span.line2{top:50%;transform:translate3d(0,-50%,0);} .lms .all_menu_btn .whzbtn > span.line3{bottom:0; } .lms .all_menu_btn.active .whzbtn > span.line1{top:50%;transform:translate3d(0,-50%,0);transform: rotate(45deg);} .lms .all_menu_btn.active .whzbtn > span.line2{width:0;} .lms .all_menu_btn.active .whzbtn > span.line3{top:50%; bottom:auto;transform:translate3d(0,-50%,0);transform: rotate(-45deg);} .lms .gnb {display: flex;width: calc(100% - 60px);} .lms .gnb > li {flex-grow: 1;text-align: center;float: none;} .lms .gnb > li > a {padding: 17px 40px 16px; white-space: nowrap; } .lms .gnb > li:after {background-color: #00a2ff;} .lms .gnb > li.mypage {} .lms .gnb > li.mypage:after {display: none;} .lms .gnb > li.mypage a {padding:17px 48px 16px;height: 60px;background: #00a2ff;font-size: 18px;font-weight: 700;color: #fff;} .lms .gnb .depth_box {padding: 18px 0;} .lms .head_in {z-index:500;} .lms .all_menu {display: none;position: absolute;top:calc(100% - 1px);left: 0;width: 100%;background: #f9f9f9;border: 1px solid #dedede;z-index:400;} .lms .all_menu .in_Layer {display: flex;} .lms .all_menu .depth_box {display: flex !important; align-items: center;opacity: 1 !important;} .lms .all_menu .tit_all {padding-top: 93px;display: block;min-width: 318px;font-size: 18px;color: #666666;text-align: center;} .lms .all_menu .tit_all img {margin-bottom: 8px;} .lms .all_gnb {width:calc(100% - 318px);margin: 0 auto;background: #ffffff;} .lms .all_gnb > li {display: flex;border: 1px solid #dedede;} .lms .all_gnb > li:first-child {border-top: none;} .lms .all_gnb > li:last-child {border-bottom: none;} .lms .all_gnb > li + li {border-top: none;} /* .lms .all_gnb > li:nth-child(-n+5) {border-top: none;} .lms .all_gnb > li:nth-child(5n) {border-right: 1px solid #dedede;} */ .lms .all_gnb > li > a {display: block;min-width: 157px;padding:13px 33px;border-right: 1px solid #dedede;font-size: 16px;color: #666666;} .lms .all_gnb > li:hover > a {color: #000;} .lms .all_gnb > li .depth {padding: 10px;} .lms .all_gnb > li .depth > li {display: inline-block;} .lms .all_gnb > li .depth > li a {display: block;padding: 3px 10px;font-size: 16px; font-weight: 400;color: #999999;} .lms .all_gnb > li .depth > li:hover a {content:'';color: #00a2ff;} @media(min-width:1281px) { .head_search_bg.type_book {display: block!important} } @media(max-width: 1280px) { .lms .head_top {height: 65px;} .lms .head_top .logo {height: 65px;} .lms .gnb_area {display: none;} .lms .head_top .logo {height: 65px;} .lms .head_top .util_right {display: block;} .lms .head_top .util_right {position: absolute;top: 23px;right: 50px;margin-top: 0;} .lms .head_top .util_right > li {display: none;} .lms .head_top .util_right > li.search {display: block;} .lms .head_top .util_right > li.search a {padding: 0;} .m_top_util .btn_search {position: absolute;top: 23px;right: 50px;z-index: 600;} .head_search_bg.type_book {display: none;position: absolute;left: 0;width: 100%;background: #f3f8fe;border-top: 1px solid #ececec;border-bottom: 1px solid #ececec;z-index:400;} .type_book .head_search {float: none;width: 512px;height: 56px;margin:82px auto;background: #fff;border: 1px solid #dedede;} .type_book .head_search select { background: #fff; width: 124px; height: 54px; padding-left: 22px; font-size:16px; color: #000; } .type_book .head_search .btn_submit { position: static; float: right; top: 0; right: 0; width: 105px !important; height: 54px; padding-left: 26px; font-size: 16px; color: #000; text-indent: 0; background-position: 0 center; text-align: left; } .type_book .head_search input[type="text"] { text-align: left; width: 272px; height: 54px; padding:0 16px; font-size: 16px; } .lms .head_search { float: none; width: 512px; height: 56px; margin:82px auto; } .lms .head_search select { background: #fff; width: 124px; height: 54px; padding-left: 22px; font-size:16px; } .lms .head_search .btn_submit { width: 105px !important; height: 54px; padding-left: 26px; font-size: 16px } .lms .head_search input[type="text"] { width: 272px; height: 54px; padding:0 16px; font-size: 16px; } } @media(max-width: 767px) { .type_book .head_search {width: 448px;height:49px;max-width:90vw; margin:50px auto;} .type_book .head_search select {width: 108px;height: 47px;padding-left: 19px;font-size:14px;} .type_book .head_search .btn_submit {width: 31px !important;height: 47px;padding-left: 22px;font-size: 0} .type_book .head_search input[type="text"] {width: calc(100% - 140px);height: 47px;padding:0 14px;font-size: 14px;} .lms .head_search {width: 448px;height:49px;max-width:90vw; margin:50px auto;} .lms .head_search select {width: 108px;height: 47px;padding-left: 19px;font-size:14px;} .lms .head_search .btn_submit {width: 31px !important;height: 47px;padding-left: 22px;font-size: 0} .lms .head_search input[type="text"] {width: calc(100% - 140px);height: 47px;padding:0 14px;font-size: 14px;} } .head_search.mypage{ margin-bottom: 10px; border: 1px solid #dedede; } .head_search.mypage input[type="text"]{ text-align:left; } /* header */ .header {position:relative; height:51px;} .header .title {line-height:51px; font-size:16px; font-weight:700; color:#111; text-align:center;} .header .btn_back {position:absolute; top:50%; left:16px; width:24px; height:24px; font-size:0; text-indent:-9999em; background:url(/USER_SKIN/danjionly/images/common/icon_back.png) no-repeat center/contain; transform:translateY(-50%);} .header .btn_alarm {display:none;position:absolute; top:50%; right:16px; width:24px; height:24px; font-size:0; text-indent:-9999em; background:url(/USER_SKIN/danjionly/images/common/icon_alarm.png) no-repeat center/contain; transform:translateY(-50%);} .header .btn_back2 {position:absolute; top:50%; left:16px; width:24px; height:24px; font-size:0; text-indent:-9999em; background:url(/USER_SKIN/danjionly/images/common/icon_back.png) no-repeat center/contain; transform:translateY(-50%);} /* navigation bar*/ .navbar_bottom {position:fixed; bottom:0; left:0; width:100%; background:#FFF; border-radius:20px 20px 0 0; box-shadow:0px -1px 1px 0px rgba(201, 201, 201, 0.12); z-index:1;} .nav_list {display:flex; justify-content:space-between; gap:20px; padding:8px 52px;} .nav_list li {position:relative;} .nav_list .btn_nav {display:flex; flex-direction:column; align-items:center; gap:4px; width:50px; height:44px;} .nav_list .btn_nav .icon {display:block; width:24px; height:24px; background:url(/USER_SKIN/danjionly/images/common/icon_home.png) no-repeat center/contain;} .nav_list .btn_nav.laundry {position:absolute; bottom:-2px; left:50%; justify-content:center; width:70px; height:70px; background:linear-gradient(131.5deg, #0079FA 14.62%, #0073ED 84.88%); box-shadow: 0px 0px 4.38px 0px rgba(0, 0, 0, 0.2); border-radius:50%; transform:translateX(-50%);} .nav_list .btn_nav.laundry .icon {width:35px; height:35px; background-image:url(/USER_SKIN/danjionly/images/common/icon_laundry.png)} .nav_list .btn_nav.laundry .txt {color:#FFF;} .nav_list li:has(.btn_nav.laundry) {flex-shrink:0; width:50px;} .nav_list .btn_nav.user .icon {background-image:url(/USER_SKIN/danjionly/images/common/icon_user.png)} .nav_list .btn_nav .txt {font-size:10px; font-weight:700; color:#999; text-align:center;} .nav_list .btn_nav.active .txt {color:#007AFF;} .nav_list .btn_nav.active .icon {width:24px; height:24px; background-image:url(/USER_SKIN/danjionly/images/common/icon_home_active.png)} .nav_list .btn_nav.user.active .icon {background-image:url(/USER_SKIN/danjionly/images/common/icon_user_active.png)} .nav_list .btn_nav.laundry.active {position:static; width:50px; height:inherit; transform:none; background:transparent; box-shadow:none;} .nav_list .btn_nav.laundry.active .icon {background-image:url(/USER_SKIN/danjionly/images/common/icon_laundry_active.png)} @media(max-width: 340px) { .nav_list {padding-left:32px; padding-right:32px;} }