/*#header.fixed {position:absolute !important; top:0 !important;}*/ /*** 공통 CSS ***/ input { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } input[type="checkbox"] {display:inline-block; width:20px; height:20px; border:1px solid #bbb; border-radius:5px; position:relative; top:-3px; background:#fff;} input[type='checkbox']:checked {background:#222 url('/theme/6/img/main/check_icon.png')no-repeat center; border:1px solid #222;} .readonly {background:#ebebeb url('/theme/6/img/main/check_icon_g.png')no-repeat center !important; border:1px solid #bbb !important;} .hash {font-size:0;} .hash span {display:inline-block; color:inherit; font-size:15px; font-weight:400; margin:2px 0; margin-right:9px;} .star {font-size:15px; line-height:1; vertical-align:middle; font-weight:400;} .star dd {display:inline-block; vertical-align:middle;} .star .svg {width:17px; /* filter: invert(100%) sepia(0%) saturate(7488%) hue-rotate(311deg) brightness(98%) contrast(104%); */} /* Arrows */ .slick-prev, .slick-next {position:absolute; z-index:9999 !important; top:50%; margin-top:-32px; font-size:0; width:65px; height:65px; outline:none; border:0; cursor:pointer; z-index:100; transition:all 0.3s; border-radius:100%; box-shadow:0 5px 12px rgb(0 0 0 / 5%);} .slick-prev {left:0; background:#fff url('/theme/6/img/main/prevArrow.png')no-repeat center; } .slick-next {right:0; background:#fff url('/theme/6/img/main/nextArrow.png')no-repeat center;} .view_cont {position:relative; letter-spacing:-0.5pt; line-height:1.7;} .cont_tit {font-size:1.176rem; color:#222; letter-spacing:-0.5pt; line-height:1; font-weight:500; margin:0 0 25px;} .cont_tit span {font-size:1rem; font-weight:400; letter-spacing:inherit; line-height:inherit; display:inline-block; margin-left:5px;} a.more {display:inline-block; width:90px; height:30px; line-height:28px; border:1px solid #ddd; box-sizing:border-box; text-align:center; font-size:13px; font-weight:400; color:#666; border-radius:50px; margin-left:10px;} .mart100 {margin:90px 0 0;} .none_cont {border:1px solid #ddd; border-radius:20px; text-align:center; padding:60px 15px; letter-spacing:-0.5pt; line-height:1.5; margin-bottom:10px; display:none;} .view_cont .cont_sel {position:absolute; right:0; top:-15px;} /*.view_cont .cont_sel .selectBox {width:auto !important; margin-right:10px;}*/ .view_cont .cont_sel .selectBox {width:100% !important; margin-right:10px;} .view_cont .cont_sel .selectBox .label {position:relative; padding:0 40px 0 20px;} .view_cont .cont_sel label {position:relative; top:2px; letter-spacing:-0.5pt; font-size:15px;} .view_cont .cont_sel input[type="checkbox"] {margin-right:5px;} /* 맛보기 */ .sample_lesson {/* position:relative; */ display: inline-block; min-width:130px;height: 45px;border-radius: 50px;line-height: 45px;color: #fff; padding:0 24px; /* padding-left: 60px; */ font-weight: 400;box-sizing: border-box;} .sample_lesson::before{content: ""; display:inline-block; /* position: absolute;top: 23%; left: 26px; */ margin:0 8px -6px 0; width: 24px; height: 24px; background:url(/theme/6/img/main/videoBtn.svg) no-repeat 50% 50% / 24px 24px; filter: invert(100%) contrast(200%);} /* 미리보기 */ .sample_book {/* position:relative; */ display: inline-block; min-width:110px; /* width:146px; */ height: 45px;border-radius: 50px;line-height: 45px;color: #fff; padding:0 24px; /* padding-left: 60px; */ font-weight: 400;box-sizing: border-box;} .sample_book::before{content: ""; display:inline-block; /* position: absolute;top: 23%; left: 26px; */ margin:0 8px -6px 0; width: 24px; height: 24px; background:url(/theme/6/img/main/videoBtn.svg) no-repeat 50% 50% / 24px 24px; filter: invert(100%) contrast(200%);} .eventTxt {color:#f02c78;font-size:15px;font-weight:400;} /*** 공통 CSS ***/ /*** A 타입 ***/ .apply_table {display:table; width:100%;} .apply_table *{word-break:break-word;} .apply_view .photo_list dl dd {padding:20px 20px 25px;} .apply_view .imgCont {position:relative; display:table-cell; width:600px; vertical-align:middle;} .apply_view .imgCont .view_img {width:100%; border-radius:20px; overflow:hidden; background-repeat:no-repeat; background-size:cover; background-position:center;} .apply_view .txtCont {position:relative; display:table-cell; width:calc(100% - 600px); padding-left:60px; box-sizing:border-box; vertical-align:middle;} .apply_view .txtCont h4 {font-size:1.765rem; color:#222; font-weight:bold; letter-spacing:-0.7pt; line-height:1.2; margin:0 0 5px;} .view_info {margin:25px 0 45px;} .view_info dl {display:table; width:100%; margin:0 0 17px;} .view_info dl dt {display:table-cell; font-weight:400; color:#222; letter-spacing:-0.5pt; width:85px; vertical-align:top; line-height:1;} .view_info dl dd { letter-spacing:-0.5pt; display:table-cell; width:calc(100% - 85px); vertical-align:top; line-height:1;} .v_util {position:absolute; right:0; bottom:35px; font-size:0;} .v_util > span {position:relative; display:inline-block; margin-left:20px; width:25px; vertical-align:middle; cursor:pointer;} .v_util .share {} .v_util .share ul {width:200px; opacity:0; visibility:hidden; position:absolute; top:-65px; right:0; transition:all 0.3s; font-size:0; background:#fff; border-radius:50px;box-shadow:0 3px 8px rgb(0 0 0 / 8%); text-align:center; padding:10px 0;} .v_util .share ul li {display:inline-block; vertical-align:middle; margin-right:2px;} .v_util .share ul li:last-child {margin-right:0;} .v_util .svg {width:25px; } .v_util .share:hover ul {opacity:1; visibility:visible; transition:all 0.3s;} .price_table {border-radius:20px; padding:10px; box-sizing:border-box; margin:50px 0 0;} .price_table ul li {position:relative; background:#fff; border-radius:10px; margin:0 0 4px; padding:17px 180px 17px 60px; box-sizing:border-box; color:#222; letter-spacing:-0.5pt; line-height:1.2;} .price_table ul li .cate {position:relative; bottom:0; right:0; width:65px; height:32px; line-height:30px; font-size:14px; padding:0; text-align:center;} .price_table .sale {padding:8px 13px; box-sizing:border-box; displaY:inline-block; border:1px solid #f02c78; color:#f02c78; font-size:14px; border-radius:50px; font-weight:400; line-height:1; vertical-align:middle; margin-left:7px; background:#Fff;} .price_table ul li .price {position:absolute; right:20px; top:50%; transform:translateY(-50%);} .price_table ul li input[type="checkbox"] {position:absolute; top:46%; left:20px; transform:translateY(-50%);} .total {text-align:right;} .total p {letter-spacing:-0.5pt; line-height:1; color:#666; border-bottom:1px solid #ddd; padding:30px 5px 25px 40px; box-sizing:border-box;} .total p .red_s {font-size:15px; margin:0;} .total p .txt_red {color:#e11919; font-weight:400; letter-spacing:-0.5pt; line-height:1; display:inline-block; vertical-align:middle; margin-right:0;} .total p b {position:relative; top:-2px; font-weight:400; color:#222; display:inline-block; vertical-align:middle; margin:0 15px 0 60px;} .total p span.price_item {position:relative; width:27px; height:27px; border-radius:100%; background:#222; display:inline-block; vertical-align:middle; margin-right:15px;} .total p span.price_item::after {content:''; width:9px; height:1px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(-4px,0);} .total p span.price_item::before {content:''; width:1px; height:9px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(0,-4px);} /*.total p span {position:relative; width:27px; height:27px; border-radius:100%; background:#222; display:inline-block; vertical-align:middle; margin-right:15px;}*/ /*.total p span::after {content:''; width:9px; height:1px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(-4px,0);}*/ /*.total p span::before {content:''; width:1px; height:9px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(0,-4px);}*/ .total p span.minus {background:#e11919;} .total p span.minus::before {display:none;} .total h4 {letter-spacing:-0.5pt; color:#666; line-height:1; font-weight:300; margin:30px 0; padding:0 18px; box-sizing:border-box;} .total h4 .price {display:inline-block; margin-left:20px;} .applyBtn {text-align:center; margin:30px 0 0;display: flex;align-items: center;justify-content: center;} .applyBtn.fixed {position:fixed; left:0; bottom:0; width:100%; background:#f3f6fa; z-index:999; margin:0; padding:20px 0; min-width:320px; z-index:99999;} .applyBtn a {display:inline-block; padding:0 20px; min-width:200px; width:auto; height:60px; line-height:58px; border-radius:50px; vertical-align:middle; background-repeat:no-repeat;box-sizing:border-box; letter-spacing:-0.5pt; font-weight:400; background-color:#fff; color:#fff; white-space:nowrap;} .applyBtn a.learn {background-color:#f02c78;} /*background-image:url('/theme/6/img/apply/learn.png');}*/ .applyBtn a.end {background-color:#3c3e40; /* padding:0 !important; */} .applyBtn a .svg {width:15px; margin-right:15px;margin-bottom:4px;} .applyBtn a.sub {background-color:#2a4c81;} .applyBtn a.sub2 {background-color:#f02c78;} .applyBtn a + a{margin-left:10px;} .subPay_info {} .subPay_info dl {display:flex; flex-wrap:wrap; margin:25px 0 10px;} .subPay_info dl dt {width:70px; color:#222; font-size:15px; font-weight:400; letter-spacing:-0.5pt;} .subPay_info dl dd {width:calc(100% - 70px); font-size:15px; font-weight:bold; letter-spacing:-0.5pt;} .subPay_info p {font-size:15px; font-weight:400; letter-spacing:-0.5pt; line-height:1.6; margin:0 0 30px;} .subPay_info p b {line-height:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; color:#222;} /*** Lnb_tab ***/ .is-sticky {z-index:999; position:relative;} .is-sticky .lnb_tab {top:0 !important; margin:0 !important;} .lnb_tab {border:1px solid #ddd; border-radius:20px; font-size:0; text-align:center; background:#fff; margin:70px 0 0;} .lnb_tab li {display:inline-block; margin:0 40px;} .lnb_tab li a {font-size:1.2rem; letter-spacing:-0.5pt; display:block; line-height:80px; position:relative; } .lnb_tab li a::after {content:''; width:0; height:3px; position:absolute; bottom:-1px; left:0; transition:all 0.3s; z-index:10;} .lnb_tab li a.mPS2id-highlight {font-weight:bold;} .lnb_tab li a.mPS2id-highlight::after { width:100%; transition:all 0.3s;} /*** 과정소개 ***/ #process {padding-top:55px;} #process .slick-prev {left:-65px;} #process .slick-next {right:-95px;} #process .cont_tit {margin:50px 0 10px;} #process .photo_list {display:block; border-top:0; padding-top:10px; margin-left:-30px;} #process .photo_list .slick-list {overflow:hidden; padding-right:5px !important;} #process .photo_list dl {margin-right:0 !important; margin-bottom:0; margin-left:30px;} .view_cont p img {width:100%; height:auto;} .view_cont iframe {width:100%;} /* content 내부 iframe 사이즈 조정 .view_cont p:has(iframe) {position:relative;width:100%;padding-bottom:56.25%;} .view_cont p > iframe {position:absolute;width:100%;height:100%;left:0;} */ #process .bbs_list {display:flex !important; flex-wrap:wrap; margin-left:0 !important;} #process .bbs_list dl {width:calc((100% - 90px) / 4); margin-right:30px !important; margin-left:0 !important; margin-bottom:30px;} #process .bbs_list dl:nth-child(4n) {margin-right:0 !important;} .view_B_type #process .bbs_list dl {width:calc((100% - 60px) / 3); margin-right:30px !important; margin-left:0 !important; margin-bottom:30px;} .view_B_type #process .bbs_list dl:nth-child(4n) {margin-right:30px !important;} .view_B_type #process .bbs_list dl:nth-child(3n) {margin-right:0 !important;} /*** 강의목차 ***/ #table {} #table dl {overflow:hidden; border:1px solid #c9c9c9; box-sizing:border-box; border-radius:20px; margin-bottom:10px;} #table dl dt {position:relative; padding:17px 25px; box-sizing:border-box; color:#222; letter-spacing:-0.7pt; line-height:1.5; position:relative; cursor:pointer; font-size:1rem;} #table dl dt .svg {height:15px; position:absolute; top:50%; right:33px; transform:rotate(90deg); transition:all 0.3s; margin-top:-7px;} #table dl dt.on .svg {transition:all 0.3s; transform:rotate(270deg);} #table dl dd {position:relative; padding:0 25px; display:none; border-top:0; width:100%; color:#777; box-sizing:border-box; word-break: keep-all; background:#f8f9fc; border-top:1px solid #c9c9c9;} #table dl dd p {position:relative; padding:18px 260px 18px 0; line-height:1.2; font-size:15px; font-weight:400; border-bottom:1px solid #eaebec; letter-spacing:-0.5pt;} #table dl dd p a {line-height:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit;} #table dl dd p:last-child {border-bottom:0;} #table dl dd p span {position:absolute; right:0; top:50%; transform:translateY(-50%);} #table dl.no_title dd {display:block; border-top:0;} /*** 교재정보 ***/ #information {} #information .information {display:flex; flex-wrap:wrap;} #information .information dl {width:calc((100% - 30px) / 2); margin-right:30px; display:table;padding-bottom:20px;} #information .information dl:nth-child(2n) {margin-right:0;} #information .information dl:last-child {margin-right:0;} #information .information dl dt {display:table-cell; width:208px; border:1px solid #ddd; box-sizing:border-box; border-radius:20px; vertical-align:middle; overflow:hidden;} #information .information dl dt img {width:100%; background-repeat:no-repeat; background-size:contain; background-position:center;} #information .information dl dd {display:table-cell; width:calc(100% - 208px); vertical-align:middle; padding-lefT:40px; box-sizing:border-box;} #information .information dl dd h4 {font-size:1.176rem; color:#222; line-height:1.3; letter-spacing:-0.5pt;} #information .information dl dd p {font-size:15px; letter-spacing:-0.5pt; font-weight:400; line-height:1.5; margin:8px 0 17px; overflow:hidden; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow:ellipsis;} #information .information dl dd ul {margin:0 0 35px;} #information .information dl dd li{position:relative;margin:0 0 5px;line-height:1.2;font-size:15px;font-weight:400;} #information .information dl dd li:last-child {margin:0;} #information .information dl dd li span {color:#222; line-height:inherit;} .gradeCont {display:table; width:100%; margin:0 0 10px;} .gradeCont .re_num {display:table-cell; width:390px; margin-right:30px; border:1px solid #dddfe3; border-radius:20px; vertical-align:middle; text-align:center;} .gradeCont .re_num b {font-size:2.647rem; font-weight:bold; line-height:1;} .gradeCont .re_num p {color:#222; letter-spacing:-0.5pt; line-height:1; margin:15px 0 10px;} .gradeCont .re_graph {display:table-cell; width:calc(100% - 390px); vertical-align:middle;} .gradeCont .re_graph .graph_in {margin-left:30px; width:calc(100% - 30px);border-radius:20px; text-align:center; font-size:0; padding:40px 30px; box-sizing:border-box;} .gradeCont .re_graph .graph_in li {margin:0 0 9px;} .gradeCont .re_graph .graph_in li:last-child {margin:0;} .gradeCont .re_graph .graph_in span {display:inline-block; vertical-align:middle; width:30px; font-size:13px; font-weight:400; color:#222; text-align:left;} .gradeCont .re_graph .graph_in span.total_num {width:60px; text-align:right;} .gradeCont .re_graph .graph_in div {display:inline-block; vertical-align:middle; width:50%; background:#fff; height:20px; text-align:left;} .gradeCont .re_graph .graph_in div .bgColor {width:0;} .gradeCont .re_graph .graph_in div .w100 {width:100%;} .gradeCont .re_graph .graph_in div .w80 {width:80%;} .gradeCont .re_graph .graph_in div .w60 {width:60%;} .gradeCont .re_graph .graph_in div .w40 {width:40%;} .gradeCont .re_graph .graph_in div .w20 {width:20%;} /*** 수강후기 ***/ #review .all_review {border-top:0;} #review .all_review li {padding:0;} #review .all_review .re_info {display:inline-block; height:auto !important; vertical-align:top;} #review .all_review .re_info span {} #review .all_review .re_info span.date {position:relative; padding-left:0; background:#fff; margin-left:35px; letter-spacing:0;} #review .all_review .re_info span.date::after {content:''; width:1px; height:15px; background:#bbb; position:absolute; top:1px; left:-20px;} #review .all_review .star {margin:0 0 13px; vertical-align:top;} #review .all_review li {padding:25px 10px; display:block; box-sizing:border-box;} #review .all_review h4 {margin:0 0 5px;} .showstep1{ max-height: 300px; overflow: hidden; } .showstep2{ max-height: 600px; overflow: hidden; } .content{ height: 1000px; background-color: #a00; } .hide{ display: none; } /*** A 타입 ***/ /*** B 타입 ***/ .view_B_type {position:relative; } .view_B_type .apply_view {width:calc(100% - 460px); display:block;} .view_B_type .apply_view .imgCont {display:block; width:100%;} .view_B_type .apply_view .txtCont {display:block; width:100%; padding-left:0; padding-top:35px;} .view_B_type .apply_view .txtCont .hash {margin:0 0 20px;} .view_B_type .apply_table .txtCont .v_util {bottom:0;} .fixed_cont {position:absolute; width:390px; right:0; top:60px; height:100%;} .fixed_cont .price_table.fixed {position:fixed; right:50%; margin-right:-615px; top:30px; width:390px;} .fixed_cont .price_table.abs {position:absolute; right:0; top:auto; bottom:180px; width:390px;} .view_B_type .view_info {border:1px solid #ddd; border-radius:20px; padding:40px 35px; margin:0 0 10px; background:#fff;} .view_B_type .view_info dl:last-child {margin:0;} .view_B_type .view_info h4 {font-size:1.294rem; color:#222; font-weight:500; letter-spacing:-0.7pt; line-height:1; margin:0 0 22px;} .price_scroll {height:auto;} .price_ver2 .price_scroll #mCSB_1 {padding-right:15px; box-sizing:border-box;} .price_ver2 .price_table {margin:0; padding:30px;} .price_ver2 .price_table .price_in p {font-size:15px; font-weight:400; letter-spacing:-0.5pt; line-height:1.5; margin:10px 0;} a.close {width:30px; height:30px; background-color:#c6c6d0; border-radius:100%; display:inline-block; vertical-align:middle; background-image:url('/theme/6/img/main/com_close.png'); background-repeat:no-repeat; background-position:center; border-right:1px solid #bbb; border-bottom:1px solid #bbb; box-sizing:border-box; margin-left:5px; margin-top:-2px;text-indent:-9999em;} .price_ver2 .price_table .selectBox {width:100% !important;} .price_ver2 .price_table .price_in h4 {/* position:relative; */ display:flex; flex-direction:column; gap:10px; font-weight:400; letter-spacing:-0.7pt; line-height:1; color:#222; margin:0 0 20px;} .price_ver2 .price_table .price_in h4 .sale {/* position:absolute; top:0; right:0; */ align-self:flex-end;} .price_ver2 .price_table .price_in .price {text-align:right; margin:0 0 20px;} .price_ver2 .total {background:#fff; padding:25px 30px; border-radius:20px;} .price_ver2 .total p {display:block; text-align:left; padding:0; border:0; font-size:0; margin:0 0 14px;} .price_ver2 .total p .red_s {width:auto;} .price_ver2 .total i {display:inline-block; font-size:1rem; width:130px; font-style:normal; line-height:1; letter-spacing:-0.5pt; text-align:left; vertical-align:top;} .price_ver2 .total i b {font-size:15px !important; } .price_ver2 .price_table .total i b {top:1px; margin-left:3px;} .price_ver2 .total h4 {font-size:0; padding:15px 0 0; margin:15px 0 0; border-top:1px solid #ddd;} .price_ver2 .total h4 .price {display:inline-block; font-size:1rem; width:calc(100% - 130px); text-align:right; margin-left:0;} .price_ver2 .total p b {display:inline-block; margin:0; width:calc(100% - 130px); text-align:right; line-height:1; vertical-align:top; font-size:1rem;} .view_B_type .applyBtn {font-size:0; margin:20px 0 0; flex-wrap:wrap; gap:10px;} .view_B_type .applyBtn a{padding:0 15px; min-width:130px; width:auto; font-size:1rem;} .view_B_type .applyBtn a.cart{min-width:120px;} .view_B_type .applyBtn a + a{margin:0;} /*.view_B_type .applyBtn a {width:calc((100% - 4px) / 2);}*/ .view_B_type .applyBtn a .svg{margin-right:10px;} .view_B_type .lnb_tab {margin:50px 0 0;} .view_B_type #process .slick-prev {left:-5px; background:rgba(255,255,255,0.9) url('/theme/6/img/main/prevArrow.png')no-repeat center; } .view_B_type #process .slick-next {right:-30px; background:rgba(255,255,255,0.9) url('/theme/6/img/main/nextArrow.png')no-repeat center; } .view_B_type #information .information {display:block;} .view_B_type #information .information dl {width:100%; margin-right:0; padding:30px 0 30px; border-bottom:1px solid #ddd;} .view_B_type #information .information dl:last-child {border-bottom:0; padding:30px 0 0;} .view_B_type #information .information dl dd {position:relative; padding-right:150px;} .view_B_type #information .information dl dd .more {position:absolute; right:0; top:50%; transform:translateY(-50%); width:130px; height:48px; line-height:48px; color:#fff; text-align:center; font-size:15px; font-weight:400; letter-spacing:-0.5pt;} .view_B_type .gradeCont .re_num {width:230px;} .view_B_type .gradeCont .re_graph .graph_in {margin-left:20px;} /*** B 타입 ***/ .view_C_type .apply_view .txtCont .v_util {bottom:10px;} .view_C_type .apply_view .txtCont .v_util .star {display:inline-block;} .view_C_type .apply_view .txtCont .v_util .star .svg {width:17px;} .view_C_type .apply_view {display:block;} .view_C_type .apply_view .imgCont {display:block; width:100%;} .view_C_type .apply_view .txtCont {display:block; width:100%; padding-left:0; margin:0 0 25px;} .view_C_type form .price_table .price_in h4 .sale {position:relative; top:-2px;} .view_C_type form .price_table .price_in > div {position:relative; } .view_C_type form .price_table .price_in > div .price {position:absolute; top:auto; right:0; bottom:0; margin:0;} .view_C_type .apply_table {display:flex; flex-wrap:wrap;} .view_C_type .apply_table .leftCont {width:calc((100% - 30px) / 2); margin-right:30px;} .view_C_type .apply_table .rightCont {width:calc((100% - 30px) / 2); border:1px solid #ddd; border-radius:20px; box-sizing:border-box; padding:30px; overflow:hidden;} .view_C_type .total {margin:30px 0 0;} .view_C_type .view_info {margin:0; padding:40px 0 23px;} .view_C_type .price_table {margin:50px 0 0; width:100%;} .view_C_type .applyBtn {margin:20px 0 0;} .view_C_type #table .cont_tit {padding-bottom:20px; margin:0;} .view_C_type #table dl dd p {padding:18px 68px 18px 0;} .view_C_type .view_cont .cont_sel {position:relative; right:0; top:0; margin:0 0 30px; text-align:right;} /******************************************************************************* @media ~1500px *******************************************************************************/ @media all and (max-width:1500px) { #process .slick-prev, #process .slick-next {top:-45px;} #process .slick-prev {left:auto; right:80px;} #process .slick-next {right:0;} .view_B_type #process .slick-prev, .view_B_type #process .slick-next {top:-30px; background-size:12px;} .view_B_type #process .slick-prev {left:auto; right:60px;} .view_B_type #process .slick-next {right:0;} } /******************************************************************************* @media ~1300px *******************************************************************************/ @media all and (max-width:1300px) { .apply_table .view_cont .cont_sel {position:relative; text-align:right; margin:5px 0 0;} .apply_view .photo_list dl dd {padding:10px 10px 15px;} /*** A 타입 ***/ .apply_view .imgCont {width:500px;} .apply_view .txtCont {width:calc(100% - 500px); padding-left:30px;} .apply_view .txtCont h4 {font-size:1.4rem;} .view_info {margin:15px 0 30px;} .view_info dl {margin:0 0 10px;} .applyBtn a {min-width:170px; height:50px; line-height:48px;} /*** A 타입 ***/ /*** B 타입 ***/ .view_B_type .apply_view {width:calc(100% - 360px);} .view_B_type .applyBtn{gap:5px;} .view_B_type .applyBtn a.cart{margin:0;} /*.view_B_type .applyBtn a + a{margin:5px 0 0;}*/ .view_B_type .view_info {padding:30px 20px;} .fixed_cont {width:335px;} .fixed_cont .price_table.fixed {width:335px; right:4%; margin-right:0;} .fixed_cont .price_table.abs {width:335px; } /*** B 타입 ***/ .view_C_type .view_cont .cont_sel {margin:0 0 20px; font-size:0;} } /******************************************************************************* @media ~1100px *******************************************************************************/ @media all and (max-width:1100px) { .view_cont iframe {max-height:50vw;} } /******************************************************************************* @media 769~980px *******************************************************************************/ @media all and (max-width:980px) { /*** 공통 CSS ***/ .hash span {font-size:1rem;} .star {font-size:1rem;} .mart100 {margin:70px 0 0;} .eventTxt {font-size:1rem;} /* Arrows */ .slick-prev, .slick-next {width:50px; height:50px; background-size:12px !important;} .view_cont .cont_sel .selectBox .label {padding:0 35px 0 15px;} .sample_lesson {min-width:120px;height: 40px;line-height: 40px; /* padding-left: 55px; */} /*.sample_lesson::before{top: 22%; left: 25px;}*/ .sample_book {/* width:134px; */ height: 40px;line-height: 40px; /* padding-left: 55px; */} /*.sample_book::before{top: 22%; left: 25px;}*/ /*** 공통 CSS ***/ /*** A 타입 ***/ .apply_view .imgCont {width:360px;} .apply_view .txtCont {width:calc(100% - 360px); padding-left:20px;} .apply_view .txtCont h4 {font-size:1.2rem;} .view_info {margin:10px 0 25px;} .view_info dl {margin:0 0 10px;} .view_info dl dt {width:70px;} .view_info dl dd {width:calc(100% - 70px);} .v_util {bottom:10px;} .v_util > span {margin-left:10px;} .v_util .svg {width:20px;} .v_util .share ul {width:175px;} .v_util .share ul li img {width:30px;} .price_table ul li .cate {width:50px; height:28px; line-height:26px; font-size:13px;} .price_table .sale {padding:5px 10px; font-size:13px;} .price_table ul li .price {position:absolute; right:20px; top:50%; transform:translateY(-50%);} .total p .red {font-size:1rem;} .total p {padding:20px 10px 20px 20px; line-height:1.8;} .total p span.price_item {width:20px; height:20px;} .total p b {margin:0 10px 0 20px; line-height:inherit;} .applyBtn a {min-width:140px; height:50px; line-height:48px;} .applyBtn a .svg {width:1rem; margin-right:10px;} /*** Lnb_tab ***/ .lnb_tab li {margin:0 20px;} .lnb_tab li a {line-height:65px;} /*** 과정소개 ***/ #process .slick-prev, #process .slick-next {top:-30px} #process .slick-prev {right:60px;} #process .photo_list {margin-left:-15px;} #process .photo_list dl {margin-left:15px;} #process .bbs_list {display:flex !important; flex-wrap:wrap;} #process .bbs_list dl {width:calc((100% - 30px) / 3); margin-right:15px !important; margin-bottom:20px;} #process .bbs_list dl:nth-child(4n) {margin-right:15px !important;} #process .bbs_list dl:nth-child(3n) {margin-right:0 !important;} .view_B_type #process .bbs_list dl {width:calc((100% - 15px) / 2); margin-right:15px !important; margin-left:0 !important; margin-bottom:15px;} .view_B_type #process .bbs_list dl:nth-child(4n) {margin-right:15px !important;} .view_B_type #process .bbs_list dl:nth-child(3n) {margin-right:15px !important;} .view_B_type #process .bbs_list dl:nth-child(2n) {margin-right:0 !important;} /*** 강의목차 ***/ #table {} #table dl {} #table dl dt {padding:13px 20px;} #table dl dt .svg {right:23px;} #table dl dd {padding:0 15px;} #table dl dd p {position:relative; padding:12px 10px 0px; font-size:1rem;} #table dl dd p span {position:relative; display:block; margin:13px 0 0;} /*** 교재정보 ***/ #information .information dl {width:calc((100% - 15px) / 2); margin-right:15px;} #information .information dl dt {width:180px;} #information .information dl dd {width:calc(100% - 180px); padding-lefT:20px; } #information .information dl dd h4 {font-size:1.14rem;} #information .information dl dd p {font-size:1rem; margin:5px 0 12px;} #information .information dl dd ul {margin:0 0 20px;} #information .information dl dd li {font-size:1rem; font-weight:400;} /*** 수강후기 ***/ .gradeCont .re_num {width:300px; margin-right:15px;} .gradeCont .re_num b {font-size:2.4rem;} .gradeCont .re_graph {width:calc(100% - 300px);} .gradeCont .re_graph .graph_in {margin-left:15px; width:calc(100% - 15px); padding:20px 15px;} .gradeCont .re_graph .graph_in li {margin:0 0 5px;} #review .all_review .re_info span.date {font-size:1rem; margin-left:20px;} #review .all_review .re_info span.date::after {left:-11px;} /*** A 타입 ***/ /*** B 타입 ***/ .fixed_cont .price_table.fixed {width:280px;} .view_B_type .apply_view {width:calc(100% - 300px);} .fixed_cont {width:280px;} .fixed_cont .price_table.abs {width:280px; bottom:100px;} .view_B_type .view_info {padding:20px 15px;} .view_B_type .view_info h4 {font-size:1.1rem; margin:0 0 15px;} .price_ver2 .price_table {padding:20px 15px;} .price_ver2 .price_table .price_in p {font-size:1rem; margin:7px 0;} .price_ver2 .total {padding:15px; border-radius:15px;} .view_B_type #information .information dl dd {padding-right:120px;} .view_B_type #information .information dl dd .more {width:100px; height:40px; line-height:38px; font-size:14px;} .view_B_type .gradeCont .re_num {display:block; width:100%; padding:30px 10px; margin:0 0 10px; box-sizing:border-box;} .view_B_type .gradeCont .re_graph {display:block; width:100%;} .view_B_type .gradeCont .re_graph .graph_in {margin-left:0; width:100%;} /*** B 타입 ***/ .view_C_type .view_cont .cont_sel {margin:0 0 20px; font-size:0;} .view_C_type .view_cont .cont_sel .selectBox {width:calc(100% - 100px) !important;} } /******************************************************************************* @media 681 ~ 768px *******************************************************************************/ @media all and (max-width:768px) { /*** B 타입 ***/ .price_scroll {height:auto !important;} .price_ver2 .price_scroll #mCSB_1 {padding-right:0; box-sizing:border-box;} .view_B_type .apply_view {width:100% !important;} .view_B_type .apply_view .txtCont .hash {margin:0 0 10px;} .price_ver2 .price_table {border-radius:15px;} .price_ver2 .price_table .price_in h4 .sale{margin:0;} .price_ver2 .price_table .price_in .price {margin:0 0 10px;} /*.view_B_type .applyBtn a + a{margin:0 0 0 10px}*/ .view_B_type .view_info {border-radius:15px; margin:20px 0 10px;} .price_ver2 .total {border-radius:10px;} .price_ver2 .total i b {font-size:13px !important;} .fixed_cont {position:relative !important; width:100%; top:0 !important; left:0 !important; bottom:0 !important; right:0 !important; margin-right:0 !important;} .fixed_cont .price_table {position:relative !important; !important; width:100% !important; top:0 !important; left:0 !important; bottom:0 !important; right:0 !important; margin-right:0 !important;} /*** B 타입 ***/ /*** C 타입 ***/ .view_C_type .apply_view .txtCont .v_util {position:relative; bottom:0; text-align:right; margin:10px 0 0;} .view_C_type .apply_table {display:block;} .view_C_type .apply_table .leftCont {width:100%; margin-right:0;} .view_C_type .apply_table .rightCont {width:100%; border-radius:15px; padding:15px; margin:30px 0 0; height:365px !important;} .view_C_type .total {margin:15px 0 0;} .view_C_type .price_table .price_in > div .price {position:relative; width:100%; text-align:right;} .view_C_type .view_info {padding:25px 0 10px;} .view_C_type #table .cont_tit {padding-bottom:15px;} .view_C_type .table {height:245px !important;} .view_C_type #table dl dd p {padding:10px 0;} /*** C 타입 ***/ } /******************************************************************************* @media 481~680px *******************************************************************************/ @media all and (max-width:680px) { /*** 공통 CSS ***/ input[type="checkbox"] {width:15px; height:15px;} a.more {width:75px; height:28px; line-height:26px; font-size:12px;} .mart100 {margin:50px 0 0;} /* Arrows */ .slick-prev, .slick-next {width:35px; height:35px; background-size:8px !important;} .none_cont {padding:30px 15px;} .view_cont .cont_sel {position:relative; right:0; top:0; text-align:right; margin:0 0 10px;} .view_cont .cont_sel .selectBox {width:auto !important; margin-right:10px;} .view_cont .cont_sel .selectBox .label {position:relative; padding:0 25px 0 10px;} .view_cont .cont_sel label {position:relative; top:2px; font-size:13px;} .view_cont .cont_sel input[type="checkbox"] {margin-right:5px;} .sample_lesson {min-width:100px;height: 35px;line-height: 35px; /* padding-left: 47px; */} .sample_lesson::before{/* top: 20%; left: 21px; */ width: 22px; height: 22px;background-size: 22px 22px;} .sample_book {min-width:115px;height: 35px;line-height: 35px; /* padding-left: 47px; */} .sample_book::before{/* top: 20%; left: 21px; */ width: 22px; height: 22px;background-size: 22px 22px;} /*** 공통 CSS ***/ .subPay_info {} .subPay_info dl {margin:15px 0 5px;} .subPay_info dl dt {width:60px; font-size:13px;} .subPay_info dl dd {width:calc(100% - 60px); font-size:13px;} .subPay_info p {font-size:13px; margin:0 0 20px;} /*** A 타입 ***/ .apply_table {display:block;} .apply_view .imgCont {display:block; width:100%;} .apply_view .txtCont {display:block; width:100%; padding-left:0; padding-top:30px;} .v_util {bottom:0px;} .v_util > span {margin-left:5px;} .v_util .svg {width:15px;} .price_table ul li {padding:10px 15px 10px 35px;} .price_table ul li .cate {width:50px; height:26px; line-height:24px; font-size:12px;} .price_table .sale {padding:3px 5px; font-size:12px;} .price_table ul li .price {text-align:right; position:relative; right:0; top:0; transform:translateY(0); margin:10px 0 0;} .price_table ul li input[type="checkbox"] {left:10px; top:13px; transform:translateY(0);} .total p {padding:15px; text-align:center;} .total p span.price_item {width:20px; height:20px; margin-righT:10px;} .total p b {margin:0 10px;} .total h4 {margin:15px 0; padding:0 15px; text-align:center;} .total h4 .price {margin-left:10px;} .applyBtn {margin:20px 0 0;} .applyBtn.fixed {padding:10px 0;} .applyBtn a {min-width:120px; height:44px; line-height:42px;} .applyBtn a .svg {margin-right:5px;} .apply_table .view_cont .cont_sel {margin:5px 0 10px;} /*** Lnb_tab ***/ .lnb_tab {border-radius:15px; margin:35px 0 0;} .lnb_tab li {margin:0 10px;} .lnb_tab li a {line-height:40px;} .lnb_tab li a::after {height:2px;} /*** 과정소개 ***/ #process {padding-top:30px;} #process .cont_tit {margin:30px 0 10px;} #process .slick-prev, #process .slick-next {top:-10px} #process .slick-prev {right:45px;} #process .photo_list {margin-left:-10px;} #process .photo_list dl {margin-left:10px;} #process .bbs_list dl {width:calc((100% - 20px) / 2); margin-right:10px !important; margin-bottom:15px;} #process .bbs_list dl:nth-child(4n) {margin-right:10px !important;} #process .bbs_list dl:nth-child(3n) {margin-right:10px !important;} #process .bbs_list dl:nth-child(2n) {margin-right:0 !important;} /*** 강의목차 ***/ #table {} #table dl {border-radius:10px; margin:0 0 5px;} #table dl dt .svg {height:10px; margin-top:-5px;} #table dl dt {padding:10px 15px;} #table dl dt .svg {right:18px;} #table dl dd {padding:0 10px;} /*** 교재정보 ***/ #information .information dl {width:100%; margin-right:0; margin-bottom:0; padding:15px 0; border-bottom:1px solid #ddd;} #information .information dl:last-child {padding:15px 0 0; border-bottom:0;} #information .information dl dt {width:140px;} #information .information dl dd {width:calc(100% - 140px); padding-lefT:20px; } #information .information dl dd h4 {font-size:1.14rem;} #information .information dl dd p {font-size:1rem; margin:5px 0 12px;} #information .information dl dd ul {margin:0 0 20px;} #information .information dl dd li {font-size:1rem; font-weight:400;} /*** 수강후기 ***/ .gradeCont .re_num {display:block; width:100%; margin-right:0; margin-bottom:10px; padding:30px 10px; box-sizing:border-box;} .gradeCont .re_num b {font-size:2.4rem;} .gradeCont .re_num p {margin:10px 0 7px;} .gradeCont .re_graph {display:block; width:100%;} .gradeCont .re_graph .graph_in {margin-left:0; width:100%; padding:20px 15px;} .gradeCont .re_graph .graph_in li {margin:0 0 5px;} .gradeCont .re_graph .graph_in span {font-size:12px;} .gradeCont .re_graph .graph_in div {height:15px;} #review .all_review li {padding:15px 5px;} #review .all_review .re_info span {top:0; margin-left:10px;} #review .all_review .re_info span.date {font-size:1rem; margin-left:30px;} #review .all_review .re_info span.date::after {left:-10px; height:10px; top:2px;} /*** A 타입 ***/ /*** B 타입 ***/ .view_B_type #process .slick-prev, .view_B_type #process .slick-next {top:-10px; background-size:8px;} .view_B_type #process .slick-prev {left:auto; right:45px;} .view_B_type #process .slick-next {right:0;} a.close {width:20px; height:20px; background-size:6px;} .view_B_type #information .information dl {padding:0 0 15px; margin-bottom:0;} .view_B_type #information .information dl:last-child {padding:15px 0 0;} .view_B_type #information .information dl dd {padding-right:100px;} .view_B_type #information .information dl dd .more {width:80px; height:36px; line-height:34px; font-size:13px;} .view_B_type .gradeCont .re_num {padding:20px 10px;} .view_C_type .price_table {margin:25px 0 0;} .view_C_type .view_cont .cont_sel .selectBox {width:calc(100% - 85px) !important;} /*** B 타입 ***/ } /******************************************************************************* @media 361~480px *******************************************************************************/ @media all and (max-width:480px) { .view_B_type #information .information dl dd {padding-right:0;} .view_B_type #information .information dl dd .more {position:relative; top:0; transform:translateY(0); width:80px; height:36px; line-height:34px; font-size:13px; margin-left:0; margin-top:10px;} .view_B_type #information .information dl dd ul {margin:0 0 10px;} } /******************************************************************************* @media ~360px *******************************************************************************/ @media all and (max-width:360px) { }