/* 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;} #header{width:100%;} #visual{width:100%;} #contents{position:relative; width:100%;} #footer{width:100%; background:#fff;border-top: 1px solid #cecece;} .in_Layer{ width: 100%;max-width:1180px;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:1180px) { .in_Layer{ width:100%;margin:0 auto; padding:0 32px; } } @media(max-width:1080px) { /* header{height:66px;} */ } @media(max-width:480px) { .in_Layer{padding:0 16px; } } .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; width:100%; height:100%; min-width:300px; z-index:500; display:none;} .left_Box .nav_in{position:absolute; top:0; left:0; width:100%; height:100%; padding:52px 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; display:none;} .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 55px 12px 32px; line-height:1.2em; font-size:20px; font-weight:bold; color:#1e1e1e;} .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:31px; width:17px; height:9px; background:url(/USER_SKIN/moate24/images/common/icon_arrow_black_big.png) center/contain no-repeat; transition:all .3s; transform:translateY(-50%) rotate(90deg);} .left_Box ul.gnb_m > li.gnb_curriculum > a.depth_has:after{right:34px; transform:translateY(-50%) rotate(180deg);} .left_Box ul.gnb_m > :is(li,li.gnb_curriculum) > a.depth_has.active:after {right:34px; transform:translateY(-50%) rotate(0deg);} .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:#f4f4f4;} .left_Box ul.gnb_m ul.depth_m li{width:100%;} .left_Box ul.gnb_m ul.depth_m li + li {margin-top:16px;} .left_Box ul.gnb_m ul.depth_m li a{display:block; position:relative; width:100%; padding:3px 55px 3px 40px; line-height:1.5em; font-size:16px; font-weight:400; color:#1e1e1e;} .left_Box ul.gnb_m ul.depth_m li a.active{color:#00a2ff;} .left_Box ul.gnb_m ul.depth_m li a:after{content:""; display:block; position:absolute; top:50%; right:40px; width:6px; height:11px; background:url(/USER_SKIN/moate24/images/common/icon_arrow_gray.png) center/contain no-repeat; transform:translateY(-50%);} .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; } .shop_page:has(.lectureViewTop) header { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05); } #header{position: relative; top:0; left:0; width:100%;} #header.active_menu .head_top {display:none;} #header.active_menu .head_utils :is(.mypage,.search) {display:none;} .head_in{position:relative; width:100%; } .head_top {display:flex; align-items:center; gap:16px; position:relative; max-width:1180px; margin:auto; height:35px; z-index: 601;} .head_top .top_menu_wrap {display:flex;} .head_top .top_menu_wrap > li {position: relative;} .head_top .top_menu_wrap > li + li:before {content:'';position: absolute;top:50%;left: 0;width: 1px;height:8px;background:#e4e4e4; transform: translate(0,-50%);} .head_top .top_menu_wrap > li > a {display: block;position: relative;padding:1px 8px 0; line-height:20px; font-size: 14px;font-weight:500; color:#808080;} .head_top .dropdown_menu {position:relative;} .head_top .dropdown_menu .btn_menu {display:flex; gap:5px; line-height:20px; font-size: 14px;font-weight:500; color:#808080;} .head_top .dropdown_menu .btn_menu:after {content:'▼'; display:inline-block; font-size:13px;} .head_top .dropdown_menu .btn_menu.active:after {content:'▲'} .head_top .dropdown_menu .menu_list {position:absolute; top:calc(100% + 5px); left:50%; width:126px; padding:16px 8px; border-radius:4px; background:#fff; box-shadow:var(--shadow5); transform:translateX(-50%); display:none;} .head_top .dropdown_menu .menu_list a {display:block; padding:4px 8px; line-height:22px; font-size:16px; font-weight:500; color:#1e1e1e; text-align:center;} .head_top .dropdown_menu .menu_list a:hover {background:#f4f4f4; border-radius:4px;} .head_top .dropdown_menu .menu_list.academy_list {width:170px;} .head_top .login_wrap {margin-left:auto;} .head_top .head_login_wrap .dep2_wrap {min-width: 108px;} .head_top .head_login_wrap > 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 .head_login_wrap > li.dep2_wrap:hover > a:after {opacity: 1;} .head_top .head_login_wrap > li.dep2_wrap.active > a:after {opacity: 1;transform:translate(0,-50%) rotate(180deg);} .head_top .head_login_wrap .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 .head_login_wrap .active .dep2 {display: block;} .head_top .head_login_wrap .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 .head_login_wrap .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 .head_login_wrap .dep2 > li {} .head_top .head_login_wrap .dep2 > li > a {font-size: 14px;line-height: 28px;color: #999999;} .head_top .head_login_wrap .dep2 > li:hover > a {color: #2f4260;} .head_top .head_login_wrap .cart { margin-left: 3px;font-size: 15px;font-weight: 700;color: #fe0000;} .head_top .head_login_wrap .cart .cart_cnt {display: inline-block;min-width: 9px;} .head_in .head_top .logo{height:16px;} .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;} .book_page .head_top .logo, .head_top .search {display: none;} .book_page .head_title {display: none;} @media(max-width:1180px) { #header{position:relative;} /*.head_top {position: relative;padding: 0 32px;gap:5px;}*/ .head_top {position: relative;padding: 0 32px;gap:5px; justify-content:space-between;} /* 24.09 헤더 레이아웃 수정 by JH.Choi */ .head_top .search { display: block; margin-left: auto; } .head_top .search + .login_wrap {margin-left: 0;} .head_top::after {position: absolute;bottom: -1px;left: 32px;content:'';width: calc(100% - 64px);height: 1px;background: #f4f4f4;} .book_page .head_top .logo { display: block; } .head_gnb .btn_search { display: none; } .head_gnb .btn_search.active { display: block; } .book_page .head_gnb .logo { display: none; } .book_page .head_title {display: block;font-size:24px; font-weight:800; line-height:1.167em; color:#000; text-align:center;} .down .head_in{height:65px;} .shop_page .head_in .head_top .logo {height: 13px;} /* .shop_page:has(.subContents) .head_in .head_top .logo { display: none; } */ /* 24.09 헤더 레이아웃 수정 by JH.Choi .start*/ /* .shop_page:has(.subContents) .head_in .head_top .logo { display: none; } */ /*.head_top .logo {height: 65px;max-width: 80%;}*/ .head_top .logo {height: 65px;max-width: 80%;} /* 24.09 헤더 레이아웃 수정 by JH.Choi .end*/ .head_top .head_dropdown_menu .menu_list {right:3px; left:auto; transform:none;} } @media(max-width:767px) { .left_Box .nav_in {padding-top:48px} .left_Box ul.gnb_m > li > a {font-size:20px;} .left_Box ul.gnb_m > li > a.depth_has:after{width:17px; height:9px;} .left_Box ul.gnb_m ul.depth_m{padding:15px 0;} .left_Box ul.gnb_m ul.depth_m li + li {margin-top:16px;} .left_Box ul.gnb_m ul.depth_m li a{font-size:16px;} .left_Box ul.gnb_m ul.depth_m li a:after{width:6px; height:11px;} .book_page .head_title {font-size: 17px;} } @media(max-width:480px) { .head_top {padding: 0 16px;} .head_top::after {left: 16px;width: calc(100% - 32px);} .left_Box ul.gnb_m > li > a {padding-left:16px;} .left_Box ul.gnb_m > li > a.depth_has:after{right:15px;} .left_Box ul.gnb_m > li.gnb_curriculum > a.depth_has:after{right:19px;} .left_Box ul.gnb_m > :is(li,li.gnb_curriculum) > a.depth_has.active:after {right:19px;} .left_Box ul.gnb_m ul.depth_m li a{padding-left:24px;} .left_Box ul.gnb_m ul.depth_m li a:after{right:24px;} } .head_gnb {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; width:100%; max-width:1180px;margin:0 auto; } .head_in .logo {display: flex;align-items: center; /*height: 58px;*/} /* .head_in .logo a {font-size: 0;height: 100%;display: flex;align-items: center;} .head_in .logo img {max-height:100%;} */ /* 24.09 헤더 레이아웃 수정 by JH.Choi .start*/ .head_in .logo a {font-size: 0;width: 100%; height:100%; display: flex;align-items: center;} .head_in .logo img {max-width:100%; max-height:100%;} /* 24.09 헤더 레이아웃 수정 by JH.Choi .end*/ .head_in .logo img.logo_color {display: none;} .gnb_area{} .gnb {} .gnb > li {position: relative;z-index: 400;} .gnb > li > a {display: block;padding: 18px 24px; font-weight:bold; font-size:20px;color:#1e1e1e; white-space: nowrap;} .gnb > li:hover > a {color: #00a2ff;} /* .gnb > li:hover .depth_box {display: block;} */ .gnb > li:after {content:'';position: absolute;bottom:0;left: 50%;width: 0;height: 4px;background: #2f4260;transform: translate(-50%,0);transition: all 0.3s;} .gnb > li:hover:after{width: 100%;} .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;} .gnb .gnb_text {position:absolute; top:0; left:50%; height:16px; padding:0 3px; line-height:16px; font-size:12px; font-weight:500; color:#fff; background:#3b93ef; border-radius:3px; transform:translateX(-50%);} .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: 16px;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: 13px;width: 20px;height: 18px;background:url('/template/resp/images/ico_search.png') 0 0 no-repeat;font-size: 0;text-indent: -999em;} .head_gnb .head_main {display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:78px;} .head_gnb .head_utils {display:flex; align-items:center; gap:14px;} .head_utils .mypage a {display:block; padding:6px 8px; line-height:1; font-size:14px; font-weight:500; color:#fff; background:#3b92ef; border-radius:4px;} .head_main .menu_logo {display:none;} .active_menu .head_main .menu_logo {display:block;} .active_menu .head_main .head_title {display:none;} .head_main .head_title {font-size:36px; font-weight:800; line-height:1.167em; color:#000; text-align:center;} .head_main .head_utils {position:absolute; top:9px; right:0; align-items:flex-start; gap:10px;} .head_main .head_utils .mypage a {padding:0; font-size:12px; font-weight:500; color:var(--color-disabled); background:transparent;} .head_main .head_utils .mypage a:before {content:''; display:block; width:44px; height:44px; margin:0 auto 7px; background:#3b92ef url(/USER_SKIN/moate24/images/common/icon_lecture_room.png) center no-repeat; background-size:24px; border-radius:50%;} .head_main .head_utils .btn_search {display: none;} .head_main .head_utils .btn_search span {background:none; width:100%; height:auto; text-indent:0; font-size:12px; line-height: 1; text-align:center;} .head_main .head_utils .btn_search {padding:0; font-size:12px; font-weight:500; color:var(--color-disabled); background:transparent;} .head_main .head_utils .btn_search:before {content:''; display:block; width:44px; height:44px; margin:0 auto 7px; background:#e1e1e1 url(/USER_SKIN/moate24/images/common/icon_search.png) center no-repeat; background-size:20px; border-radius:50%;} .head_main .head_utils .btn_search.active {top: 35px;margin-right: -593px; padding: 2px;} .head_main .head_utils .btn_search.active::before { display: none; } .head_main .head_utils .btn_search.active span { width:21px; height:21px; background:url('/USER_SKIN/moate24/images/common/icon_close.png') center/contain no-repeat;text-indent: -999em;} .btn_search {padding:2px;} .btn_search span {display: inline-block;width: 20px;height:20px;background:url('/USER_SKIN/moate24/images/common/icon_search.png') center/contain no-repeat;font-size: 0;vertical-align: top;text-indent: -999em;} .btn_search.active {position:fixed; top:35px; right:50%; margin-right:-593px; z-index:603;} .btn_search.active span {width:21px; height:21px; background:url('/USER_SKIN/moate24/images/common/icon_close.png') center/contain no-repeat;} .gnb > li:hover .gnb_depth_box {display:block;} .gnb_depth_box {position:fixed; top:97px; left:50%; width:100%; /*height:65px;*/ background:#f8f8f8; transform:translateX(-50%); display:none;} .gnb_depth_box .depth_list {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; height:100%;} .gnb_depth_box .depth_list li {margin:0 10px; padding:15px 0;} .gnb_depth_box .depth_list a {display:block; padding:5px 18px; font-size:16px; font-weight:500; color: #1e1e1e;;} .gnb_depth_box .depth_list a:hover {color:#3b92ef;} @media(max-width:1180px) { .gnb_area{display:none; } .head_gnb {padding:12px 32px;background:#fff;} .btn_search.active {top:29px; right:32px; margin-right:0;} .head_gnb .head_main {justify-content:flex-start; height:auto;} .head_gnb .head_utils {gap:0;} .head_gnb .head_utils .mypage {margin-right: 14px;} .head_main .head_utils {position:static; margin-left:auto; align-items:center;} .head_main .head_utils .mypage {order:1;} .head_main .head_utils .mypage a {display:block; padding:6px 8px; line-height:1; font-size:14px; font-weight:500; color:#fff; background:#3b92ef; border-radius:4px;} .head_main .head_utils .mypage a:before {display: none;width:28px; height:28px; margin-bottom:0; background-size:14px;} .head_main .head_utils .btn_search {display: none;order:2;} .head_main .head_utils .btn_search.active {display: block;} .head_main .head_utils .btn_search:before {width:28px; height:28px; margin-bottom:0; background-color:transparent; background-size:24px;} .head_main .head_utils .btn_search span {display:none;} .head_main .head_utils .btn_search.active {top: 29px;right: 32px;margin-right: 0;} .head_main .head_utils .btn_search.active span {display: block;} .head_main .head_utils .menuOpen {order:3;} .head_main .head_title {font-size:24px; text-align:left;} } @media(max-width:767px) { .gnb_area{display:none; } /*.head_in .logo {height:3.5821rem;}*/ .head_in .logo {width:32.15rem;} /* 24.09 헤더 레이아웃 수정 by JH.Choi*/ .btn_search.active {top:19px;} .head_main .head_utils .btn_search.active {top: 19px;} } @media(max-width:480px) { .head_gnb {padding-left:16px; padding-right:16px;} .btn_search.active {top:19px; right:16px;} .head_main .head_utils .btn_search.active {right: 16px;} .head_main .head_title {font-size: 17px;} } .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:relative; width:22px; height:17px; z-index:600; cursor:pointer; display:none;} .head_in .menuOpen > span{display:block; position:absolute; left:0; width:100%; height:2.5px; background:#1e1e1e; border-radius:2px; -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:6.5px;} .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:1180px) { .head_in .menuOpen{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;} } @media(max-width:767px) { .head_in .menuOpen > span {height:2.4px;} .head_in .menuOpen > span.line2 {top:7.5px;} } /* #header.lms {border-bottom: 1px solid #000;} */ #header.lms:after {content:'';position: absolute;top:35px; left: 0;width: 100%;height: 1px;background: #ececec;} .lms .head_search_bg {display: none;position:fixed; top:0; left: 0;width:100%; height:100%; margin-top:0; background:rgba(0,0,0,0.6); z-index:602;} .lms .head_search {width: 100%; margin-top:0; float:none; background:#fff; border-bottom:1px solid #f4f4f4;} .lms .head_search .search_form {display:flex; align-items:center; gap:24px; padding:34px 0; margin-right:44px;} .lms .head_search .search_form:before {content:''; display:block; width:22px; height:22px; background:url('/USER_SKIN/moate24/images/common/icon_search.png') center/contain no-repeat; filter:brightness(0) saturate(100%) invert(76%) sepia(2%) saturate(4%) hue-rotate(321deg) brightness(86%) contrast(89%);} .lms .head_search select {width: 155px;height: 68px;padding-left: 28px;font-size: 20px;color: #000; display:none;} .lms .head_search .btn_submit {flex-shrink:0; position: static; width:22px; height:22px; background:url('/USER_SKIN/moate24/images/common/icon_search.png') center/contain no-repeat; text-indent:-9999em; font-size:0;} .lms .head_search input[type="text"] {flex-grow:1; width:100%;height:28px;padding:0;font-size: 20px;text-align: left; color:#.lms .all_menu_btn .btn > span; border-left:none; letter-spacing:-.015em;} .lms .head_search input[type="text"]::placeholder {color:var(--color-disabled)} .lms .gnb_area {display: flex;position: relative; /*width:calc(100% - 500px);*/} .lms .all_menu_btn {display: flex;justify-content: center;align-items: center; height: 60px; cursor: pointer;} .lms .all_menu_btn .btn {position: relative;width:22px; height:17px;} .lms .all_menu_btn .btn > span{display:block; position:absolute; left:0; width:100%; height:2.5px; background:#1e1e1e;border-radius:2px;transition:all .5s;transform: rotate(0);} .lms .all_menu_btn .btn > span.line1{top:0; } .lms .all_menu_btn .btn > span.line2{top:6px;} .lms .all_menu_btn .btn > span.line3{bottom:0; } .lms .all_menu_btn.active .btn > span.line1{top:50%;transform:translate3d(0,-50%,0);transform: rotate(45deg);} .lms .all_menu_btn.active .btn > span.line2{width:0;} .lms .all_menu_btn.active .btn > 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;} .lms .gnb > li:after {background-color: #3b93ef;} .lms .gnb > li.mypage {display:none;} .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; display:none;} .lms .head_in {z-index:500;} .lms .all_curriculum {display: none;position: absolute;top:calc(100% - 1px);left: 0;width: 100%;background: #fff;z-index:400;} .lms .all_menu {display: none;} /* .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;} .all_gnb {display:none;} .all_curriculum {padding-bottom:28px; border-top:1px solid #f4f4f4; box-shadow:var(--shadow4); display:none;} .curriculum_tab_area {display:flex; border-bottom:1px solid #f4f4f4;} .curriculum_tab_area .curriculum_tab {width:25%;} .curriculum_tab_area .curriculum_tab {width:33.33%;} .curriculum_tab_area .curriculum_tab a {display:block; height:56px; line-height:56px; font-weight:bold; font-size:20px; text-align:center; color:#808080;} .curriculum_tab_area .curriculum_tab.active a {border-bottom:2.5px solid #3b93ef; color:#3b93ef;} .curriculum_list .curriculum_box>a {display:none;} .curriculum_list .curriculum_box .curriculum_sub_area {display:none;} .curriculum_list .curriculum_box .sub_list {width:100%; max-width:1180px; margin:0 auto; padding-top:28px; display:flex; flex-wrap:wrap; row-gap:16px;} .curriculum_list .curriculum_box .sub_list li {width:25%;} .curriculum_list .curriculum_box .sub_list a {display:block; line-height:32px; font-size:20px; color:#000; text-align:center;} .curriculum_list .curriculum_box.active .curriculum_sub_area {display:block;} @media(min-width:1281px) { .head_search_bg.type_book {display: block!important} } @media(max-width: 1280px) { /* .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 {width:100%;} .lms .head_search select { background: #fff; width: 124px; height: 54px; padding-left: 22px; font-size:16px; } } @media(max-width: 1180px) { .lms .gnb_area {display: none;} .lms .all_menu_btn {display:none;} .lms .head_search .search_form {padding-top:28px; padding-bottom:28px;} } @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 {border-bottom:none;} .lms .head_search .search_form {margin-right:36px; padding-top:18px; padding-bottom:18px; gap:10px;} .lms .head_search select {width: 108px;height: 47px;padding-left: 19px;font-size:14px;} .lms .head_search .btn_submit {} .lms .head_search input[type="text"] {} } @media(max-width: 480px) { } .head_search.mypage{ overflow: hidden; margin-bottom: 10px; border: 1px solid #ddd; border-radius:8px; } .head_search.mypage input[type="text"]{ text-align:left; } .grdH{position:absolute; top:0; width:25px; height:100%; z-index:10;} .grdH.prevH{left:0; } .grdH.nextH{right:0; } .plus .grdH.nextH{right:30px; } .topFixedGnb{display:none; width:100%; height:50px;} .fixedGnbIn{position:relative; width:100%; height:50px; background: #fff; /*border-top:1px solid #e4e4e4;*/ border-bottom:1px solid #e4e4e4;} .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;} .fixedGnbIn ul li.active:after{content:""; display:block; position:absolute; bottom:-1px; left:50%; width:calc(100% - 50px); height:4px; transform: translate(-50%,0); background:#3b93ef;} .fixedGnbIn ul li a{display:block; height:100%; padding:0 25px; font-size:16px; font-weight:500; line-height:50px; color:#1e1e1e; text-align:center; white-space: nowrap; } @media(max-width:1180px) { .shop_page .topFixedGnb{display:block;} .shop_page .head_top .top_menu_wrap:first-of-type {display:none;} #wrap:has(.bookViewTop) .topFixedGnb { display: block; } } /*상점헤더*/ .shop_page .gnb_area {margin:auto;} .shop_page .all_curriculum {top:35px;} #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:1180px) { #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:1180px){ #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:1180px){ .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;} } .is_mo {display:none;} /* footer */ .footer .mo_topmove {display: none;position: fixed;bottom: 32px;right: 32px;z-index: 100;} .footer {padding-top:40px; padding-bottom:120px; background-color:#f4f4f4;} .footer .menu_area {display:flex; justify-content:space-between;} .footer .menu_area .footer_menu {display:flex; align-items:center; flex-wrap:wrap;} .footer .menu_area .footer_menu li {position:relative; line-height:1em;} .footer .menu_area .footer_menu li + li {padding-left:25px;} .footer .menu_area .footer_menu li + li:before {content:''; position:absolute; top:50%; left:12px; width:1px; height:14px; background:#1e1e1e; transform:translateY(-50%);} .footer .menu_area .footer_menu li a {font-size:var(--font-subtitle2);font-weight:500;color:#1e1e1e;} .footer .footer_btn_area {display:flex; gap:16px;} .footer .footer_btn_area .familysite {position:relative;} .footer .footer_btn_area .familysite .btn {display:flex; align-items:center; gap:10px; padding:4.2px 16px; font-size:16px; font-weight:500; color:#1e1e1e; border:1px solid #808080; border-radius:8px; background:transparent; cursor:pointer;} .footer .footer_btn_area .familysite .btn:after {content:''; width:7px; height:13px; background:url(/USER_SKIN/moate24/images/common/icon_arrow_black.png) center/contain no-repeat; transform:rotate(90deg);} .footer .footer_btn_area .familysite .btn.active:after {transform:rotate(270deg);} .footer .footer_btn_area .familysite .select_list {display:none; position:absolute; top:100%; width:100%; margin-top:-1px; padding:10px 7px; border:1px solid #808080; border-radius:8px; background:#fff;} .footer .footer_btn_area .familysite.on .select_list {display:block;} .footer .footer_btn_area .familysite .select_list li + li {margin-top:5px;} .footer .footer_btn_area .familysite .select_list li a {line-height:1.2em; font-size:15px; font-weight:500; color:#1e1e1e;} .footer .footer_btn_area .btn_top {display:flex; align-items:center; gap:4px; padding:4.2px 16px; font-size:16px; font-weight:500; color:#1e1e1e; border:1px solid #808080; border-radius:8px;} .footer .footer_btn_area .btn_top:after {content:''; width:12px; height:13px; background:url(/USER_SKIN/moate24/images/common/icon_top.png) center/contain no-repeat;} .footer .info_area {margin-top:56px; width:100%; max-width:800px;} .footer .info_area a .footer_title {font-size:var(--font-h4); font-weight:bold;} .footer .info_area .dropdown_btn {display:none;} .footer .info_area .footer_info {margin-top:16px;} .footer .footer_info {display:block;} .footer .footer_info.on {display:none;} .footer .footer_info p {line-height:1.5em; font-size:var(--font-subtitle2);font-weight:500;color:#808080;} .footer .footer_info .copy {margin-top:16px; line-height:1.188em; font-size:var(--font-subtitle2);font-weight:500;color:#808080;} @media(max-width:1180px) { .footer .mo_topmove {display: block;} .footer .mo_topmove img {width: 45px;} } @media(max-width:767px) { .hidden_m{display:none;} .is_pc {display:none;} .is_mo {display:block;} .footer {padding-top:4.7761rem; padding-bottom:4.7761rem;} .footer .menu_area { position: relative; } .footer .menu_area .footer_menu { margin-top: 45px; } .footer .menu_area .footer_menu li + li {padding-left:2.5373rem;} .footer .menu_area .footer_menu li + li:before {left:1.194rem; height:1.9403rem; background:#808080;} .footer .menu_area .footer_menu li a {font-size:2.0896rem; color:#808080;} .footer .footer_btn_area { position: absolute; top: 0; left: 0; } .footer .footer_btn_area .btn_top { display: none; } .footer .footer_btn_area .familysite .btn { gap: 9px; padding: 4px 14px; font-size: 14px; border-radius: 7px; } .footer .footer_btn_area .familysite .btn:after { width: 6px; height: 11px; } .footer .footer_btn_area .familysite .select_list { padding: 9px 6px; border-radius: 7px; } .footer .footer_btn_area .familysite .select_list li a { font-size: 13px; } .footer .info_area {width:100%; margin-top:2.3881rem;} .footer .info_area a .footer_title_box {display:flex; align-items:center; gap:1.791rem;} .footer .info_area a .footer_title {font-size:4.1791rem;} .footer .info_area a .footer_title_box .btn_arrow {display:block; width:4.0299rem; height:4.4776rem;} .footer .info_area a .footer_title_box .btn_arrow:after {content:''; display:block; width:2.5373rem; height:100%; margin:auto; background:url(/USER_SKIN/moate24/images/common/icon_arrow_black_big.png) center/contain no-repeat; transform:rotate(180deg);} .footer .info_area .dropdown_btn {display:block;} .footer .info_area .dropdown_btn.active:after {transform:rotate(0deg);} .footer .info_area .footer_info span {display:none;} .footer .info_area.on .footer_info {display:none;} .footer .info_area.on .copy {display:none;} .footer .info_area :is(.footer_info p,.copy) {font-size:2.0896rem; color:#a4a4a4;} } @media(max-width:480px) { .footer .mo_topmove {bottom: 16px;right: 16px;} } /* pc 공지사항 */ /*게시판*/ .main_board_wrap {padding:44px 0;} .main_board_wrap .in_Layer {display:flex; gap:22px;} .main_board_wrap .board_area {display:flex; flex-direction:column; width:50%; padding:26px 34px; border:1px solid #e1e1e1; border-radius:16px;} .board_area .board_title_box {display:flex; justify-content:space-between; align-items:center;} .board_area .board_title_box .board_title {line-height:1.333em; font-size:32px; font-weight:bold;} .board_area .board_title_box .btn_more {width:40px; height:40px; border-radius:50%; background:#3b92ef;} .board_area .board_title_box .btn_more:before {content:''; position:relative; top:50%; display:block; margin:auto; width:24px; height:24px; background:url(/USER_SKIN/moate24/images/main/icon_more.png) center/contain no-repeat; transform:translateY(-50%);} .board_area .board_title_box .btn_more span {font-size:0; text-indent:-9999em;} .board_area .board_list {margin-top:28px;} .board_area .board_list:has(+ .btn_board) {margin-bottom: 30px;} .board_area .board_list li + li {margin-top:8px;} .board_area .board_list .board_item {display:flex; justify-content:space-between; align-items:center; gap:13px;} .board_area .board_item .subject {display:inline-flex; align-items:center; width:calc(100% - 133px); gap:13px;} .board_area .board_item .subject h4 {line-height:1; font-weight:400; font-size:16px; color:#1e1e1e; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .board_area .board_item .subject .new {flex-shrink:0; width:20px; height:20px; line-height:20px; font-size:12px; color:#fff; font-weight:500; text-align:center; border-radius:50%; background:#ff462d;} .board_area .board_item .writer {margin-left:auto; font-size:16px; color:var(--color-disabled); text-align:right; flex-shrink:0;} .board_area .board_item .date {font-weight:bold; font-size:16px; color:var(--color-disabled); flex-shrink:0;} .board_area.online_consult .board_item .subject{width:calc(100% - 266px);} .board_area .btn_board {display:block; width:100%; margin-top:auto; line-height:48px; font-size:20px; font-weight:bold; color:#fff; text-align:center; border-radius:8px; background:#3b92ef;} /*고객센터*/ .main_cs_wrap {padding-top:50px; padding-bottom:50px; background:#3d3d3d;} .main_cs_wrap .in_Layer {display:flex; align-items:center; justify-content:space-between; gap:41px 18px;} .main_cs_wrap .cs_info_area {color:#fff; text-align:center;} .cs_info_area .cs_title {line-height:34px; font-size:25px; font-weight:bold;} .cs_info_area .cs_phone_number {margin-top:6px; line-height:52px; font-size:43px; font-weight:bold;} .cs_info_area .cs_info {margin-top:32px;} .cs_info_area .cs_info p {line-height:22px; font-size:18px} .cs_info_area .cs_info p + p {margin-top:4px;} .cs_menu_area .cs_menu_list {display:flex; align-items:center; gap:43px;} .cs_menu_list .cs_menu {position:relative; width:108px;} .cs_menu_list .cs_menu + .cs_menu:before {content:''; position:absolute; top:50%; left:-22px; width:1px; height:58px; background:#dedede; transform:translateY(-50%);} .cs_menu_list .cs_menu a {display:flex; gap:14px; flex-direction:column; align-items:center; line-height:22px; font-size:18px; color:#fff;} .cs_menu_list .cs_menu a:before {content:''; display:block; width:100%; height:72px; background:url(/USER_SKIN/moate24/images/main/icon_faq_big.png) center/contain no-repeat;} .cs_menu_list .cs_menu.kkotalk a:before {background-image:url(/USER_SKIN/moate24/images/main/icon_kkotalk_big.png);} .cs_menu_list .cs_menu.consult a:before {background-image:url(/USER_SKIN/moate24/images/main/icon_reserve_big.png);} .cs_menu_list .cs_menu.pc_support a:before {background-image:url(/USER_SKIN/moate24/images/main/icon_pc_fix_big.png);} /*SNS 공식채널*/ .main_sns_wrap {padding:75px 0;} .main_sns_wrap .sns_title_box {display:flex; justify-content:space-between;} .sns_title_box .sns_title {line-height:1.357em; font-size:28px; font-weight:bold;} .sns_list_area {margin-top:24px; overflow:hidden;} .sns_list_area .sns_list {display:flex;} .sns_list_area .sns_list .sns_box .channel_image {width:80px; height:auto; margin:0 auto; aspect-ratio:1/1;} .sns_list_area .sns_list .sns_box .channel_image img {width:100%; height:100%; object-fit:cover;} .sns_list_area .sns_list .sns_box .channel_name {margin-top:8px; line-height:1.375em; font-size:16px; font-weight:500; text-align:center; word-break:keep-all;} .slider_btn_area {display:flex; gap:24px;} .slider_btn_area :is(.slide_prev,.slide_next) {display:flex; padding:0; margin:0; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#3b92ef; border:none; cursor:pointer;} .slider_btn_area :is(.slide_prev,.slide_next):before {content:''; display:block; width:11px; height:18px; background:url(/USER_SKIN/moate24/images/main/icon_slide_arrow.png) center/contain no-repeat;} .slider_btn_area .slide_next:before {transform:rotate(180deg);} /*상담예약팝업*/ .reserve_popup {display: none;width: 100%;max-width: 650px;} .reserve_popup .popup_contents { width: 520px; max-width: 100%; padding:35px 40px 28px; background:#fff; border:2px solid #3b93ef; /*border-radius:8px;*/} .reserve_popup .reserve_form li {display:flex;} .reserve_popup .reserve_form li + li {margin-top:12px;} .reserve_popup .reserve_form .form_title {width:84px; flex-shrink:0; font-size:20px; color:#1e1e1e; font-weight:bold;} .reserve_popup .reserve_form .form_input_box {flex-grow:1;} .reserve_popup .reserve_form .form_input_box input[type=text] {width:100%; height:33px; padding: 0 16px; font-size:20px; color:#1e1e1e; font-size:14px; font-weight:500; border:1px solid #a4a4a4; border-radius:4px;} .reserve_popup .reserve_form .form_input_box input[type=text]::placeholder {color:#a4a4a4;} .reserve_popup .reserve_form .form_input_box.phone_number {display:flex; align-items:center; gap:7px;} .reserve_popup .reserve_form .form_input_box.phone_number input {width:35%;} .reserve_popup .reserve_form .form_input_box.phone_number input:first-child {width:30%;} .reserve_popup .reserve_form .form_input_box.phone_number .hyphen {font-size:20px; font-weight:bold;} .reserve_popup .agree_box {display:flex; margin-top:30px; flex-wrap:wrap; gap:8px 15px;} .reserve_popup .agree_box .agree_text {flex-grow:1; font-size:16px; color:#1e1e1e;} .reserve_popup .agree_box .agree_text input[type=checkbox] {display:none; visibility:hidden;} .reserve_popup .agree_box .check_box {display:inline-block; width:18px; height:18px; margin-top: -2px; margin-left:9px; border:1px solid #3b93ef; border-radius:4px; vertical-align:middle;} .reserve_popup .agree_box .agree_text input[type=checkbox]:checked ~ .check_box {background:rgba(59, 147, 239, 0.15) url(/USER_SKIN/moate24/images/common/icon_check.png) center no-repeat; background-size:13px 10px;} .reserve_popup .agree_box .popview {margin-left:auto; font-size:14px; font-weight:500; color:#3b93ef;} .reserve_popup .popup_btn_area {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:32px;} .reserve_popup .popup_btn_area .btn {display:flex; justify-content:center; align-items:center; width:100%; height:48px; font-size:24px; font-weight:bold; color:#fff; background-color:#3b93ef; border-radius:8px;} @media(max-width: 1180px) { /*SNS 공식채널*/ .sns_list_area .sns_list .sns_box .channel_image {width:75px; height:auto;} } @media(max-width: 1023px) { /*게시판 ~1023px*/ .main_board_wrap .in_Layer {gap:18px;} .main_board_wrap .board_area {padding:20px 25px;} .board_area .board_title_box .board_title {font-size:28px;} .board_area .board_title_box .btn_more {width:35px; height:35px;} .board_area .board_title_box .btn_more:before {width:22px; height:22px;} .board_area .board_list {margin-top:21px;} .board_area .board_list:has(+ .btn_board) {margin-bottom: 24px;} .board_area .board_list li + li {margin-top:5px;} .board_area .board_list .board_item {gap:10px;} .board_area .board_item .subject {width:calc(100% - 100px);} .board_area .board_item .subject h4 {font-size:14px;} .board_area .board_item .writer {font-size:14px;} .board_area .board_item .date {font-size:14px;} .board_area.online_consult .board_item .subject {width:calc(100% - 142px);} .board_area .btn_board {line-height:42px;} /*고객센터 ~1023px*/ .main_cs_wrap {padding-top:42px; padding-bottom:42px;} .main_cs_wrap .in_Layer {flex-direction:column; row-gap:33px;} .main_cs_wrap .cs_info_area {display:flex; align-items:center; gap:27px;} .cs_info_area .cs_title {font-size:21px;} .cs_info_area .cs_phone_number {font-size:36px;} .cs_info_area .cs_info {margin-top:0;} .cs_info_area .cs_info p {font-size:14px;} .cs_menu_area .cs_menu_list {justify-content:center; gap:34px;} .cs_menu_list .cs_menu {width:99px;} .cs_menu_list .cs_menu + .cs_menu:before {left:-17px;} .cs_menu_list .cs_menu a {font-size:14px;} .cs_menu_list .cs_menu a:before {height:59px;} /*SNS 공식채널*/ .sns_list_area .sns_list .sns_box .channel_image {width:70px; height:auto;} } @media(max-width: 767px) { /*게시판 ~767px*/ .main_board_wrap {padding:3.5821rem 0;} .main_board_wrap .in_Layer {flex-direction:column; gap:4.7761rem;} .main_board_wrap .board_area {width:100%; padding:3.4328rem 3.5821rem;} .board_area .board_title_box .board_title {font-size:3.1865rem;} .board_area .board_title_box .btn_more {width:4.7761rem; height:4.7761rem;} .board_area .board_title_box .btn_more:before {width:2.3881rem; height:2.3881rem;} .board_area .board_list {margin-top:2.3881rem;} .board_area .board_list:has(+ .btn_board) {margin-bottom: 0;} .board_area .board_list li + li {margin-top:0;} .board_area .board_list .board_item {gap:8px;} .board_area .board_item .subject {width:calc(100% - 14.9254rem);} .board_area .board_item .subject h4 {font-size:2.1493rem; font-weight:500;} .board_area .board_item .subject .new {width:2.9851rem; height:2.9851rem; line-height:20px; font-size:1.791rem;} .board_area .board_item .writer {font-size:2.1493rem; font-weight:500;} .board_area .board_item .date {font-weight:400; font-size:2.1493rem;} .board_area.online_consult .board_item .subject {width:calc(100% - 120px)} .board_area .btn_board {margin-top:16px; height:5.9701rem; line-height:5.6716rem; font-size:2.9851rem;} /*고객센터 ~767px*/ .main_cs_wrap {padding-top:3.6269rem; padding-bottom:4.2985rem;} .main_cs_wrap .in_Layer {row-gap:1.4776rem;} .main_cs_wrap .cs_info_area {width:100%; text-align:left;} .cs_info_area .cs_title {line-height:1.15em; font-size:4.8358rem;} .cs_info_area .cs_title span {display:inline-block;} .cs_menu_area .cs_menu_list {flex-wrap:wrap; justify-content:flex-start; gap:0;} .cs_menu_list .cs_menu + .cs_menu:before {display:none;} .cs_menu_list .cs_menu a {gap:7px;} .cs_menu_list .cs_menu.cs_faq {order:1;} .cs_menu_list .cs_menu.consult {order:2; margin-left:7px;} .cs_menu_list .cs_menu.phone_consult {order:3; width:100%; } .cs_menu_list .cs_menu.kkotalk {order:4;width:100%; } .cs_menu_list .cs_menu:is(.cs_faq,.consult) {width:auto;} .cs_menu_list .cs_menu:is(.cs_faq,.consult) a {flex-direction:row; padding:0.9403rem 2.1493rem; line-height:1.35em; font-size:2.1493rem; font-weight:500; background:#646464; border-radius:7px;} .cs_menu_list .cs_menu:is(.cs_faq,.consult) a:before {width:2.1493rem; height:2.1493rem;} .cs_menu_list .cs_menu.cs_faq a:before {background-image:url(/USER_SKIN/moate24/images/main/icon_question.png); filter:brightness(0) invert(1);} .cs_menu_list .cs_menu.consult a:before {background-image:url(/USER_SKIN/moate24/images/main/icon_headset.png); filter:brightness(0) invert(1);} .cs_menu_list .cs_menu:is(.phone_consult,.kkotalk) {display:flex; justify-content:space-between; align-items:center; padding:3.2239rem 0;} .cs_menu_list .cs_menu.kkotalk {padding:3.6269rem 0;} .cs_menu_list .cs_menu.kkotalk:before {display:block; top:0; left:0; width:100%; height:1px; background-color:#646464; transform:translateY(0);} .cs_menu_list .cs_menu:is(.phone_consult,.kkotalk) a {justify-content:center; width:8.597rem; height:8.597rem; background:#fff; border-radius:50%; box-shadow:var(--shadow6);} .cs_menu_list .cs_menu:is(.phone_consult,.kkotalk) a span {display:none;} .cs_menu_list .cs_menu.phone_consult a:before {width:4.7015rem; height:4.7015rem; background-image:url(/USER_SKIN/moate24/images/main/icon_phone_big.png);} .cs_menu_list .cs_menu.kkotalk a:before {width:5.2388rem; height:5.2388rem; background-image:url(/USER_SKIN/moate24/images/main/icon_speech_bubble_big.png);} .cs_menu_list .cs_menu .menu_info {color:#fff;} .cs_menu_list .cs_menu .menu_title {font-size:3.2239rem; line-height:1.125em;} .cs_menu_list .cs_menu .menu_title + .menu_text {margin-top:6px;} .cs_menu_list .cs_menu .menu_text {margin-top:4px; font-size:2.1493rem;} /*SNS 공식채널*/ .main_sns_wrap {padding:4.0299rem 0 8.806rem;} .main_sns_wrap .in_Layer {padding-right:0;} .sns_title_box .sns_title {line-height:1.5em; font-size:2.9851rem;} .sns_list_area .sns_list .sns_box .channel_image {width:11.9403rem;} .sns_list_area .sns_list .sns_box .channel_name {margin-top:8px; font-size:2.3881rem; font-weight:500; text-align:center; word-break:keep-all;} .slider_btn_area {display:none;} /*상담예약*/ .reserve_popup .popup_contents {padding:3.7313rem 4.4776rem 2.9851rem;} .reserve_popup .reserve_form .form_title {width:76px; font-size:16px;} .reserve_popup .agree_box {margin-top:3.7313rem;} .reserve_popup .agree_box .agree_text {font-size:15px;} .reserve_popup .agree_box .check_box {width:16px; height:16px;} .reserve_popup .agree_box .agree_text input[type=checkbox]:checked ~ .check_box {background-size:11px 8px;} .reserve_popup .popup_btn_area {margin-top:4.0299rem;} .reserve_popup .popup_btn_area .btn {height:5.9701rem; font-size:2.9851rem;} }