.inTitle1{position:relative; width:100%; padding:110px 0 85px 0; font-size:60px; font-weight:400; color:#db0b37; text-align:center; } .inTitle1:before{content:""; display:block; position:absolute; top:0; left:50%; width:1px; height:82px; margin-left:-0.5px; background:#ccc;} .inTitle2{width:100%; padding-bottom:20px; font-size:65px; font-weight:400; text-align:center; } .inTitle3{position:relative; width:100%; padding:110px 0 10px 0; font-size:50px; font-weight:400; color:#db0b37; text-align:center; } .inTitle3:before{content:""; display:block; position:absolute; top:0; left:50%; width:1px; height:82px; margin-left:-0.5px; background:#ccc;} .inTitle3 span{font-size:35px; color:#555;} .inTitle4{margin-bottom:10px; font-size:24px; font-weight:500;} .titleCap{width:100%; padding-bottom:40px; font-size:18px; font-weight:100; line-height:24px; text-align:center; } .titleCap2{width:100%; padding-bottom:40px; font-size:22px; font-weight:500; line-height:30px; text-align:center; } .basicCap{width:100%; margin-bottom:20px; font-size:18px; } .basicCap.center{text-align:center;} .basicCap span{font-size:16px; color:#666;} .basicCap span.title { font-size:30px; color:#333;} .basicCap2{width:100%; font-size:18px; font-weight:300; text-align:center; } .inTitleCap1{width:100%; padding-bottom:70px; font-size:26px; font-weight:100; color:#666; text-align:center; } .payCap{margin-top:8px; font-size:14px; font-weight:300; color:#ff7200;} .del{margin-right:5px; text-decoration:line-through;} .bold{font-weight:600 !important; } .nobb{border-bottom:none !important; } .lineClamp1{width:98%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lineClamp2{width:98%; height:40px; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; } .lineClamp2.h48{height:48px;} .lineClamp3{width:98%; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; } .lineClamp4{width:98%; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical; } @media(max-width:1080px){ .inTitle1{padding:80px 0 65px 0; font-size:50px;} .inTitle1:before{height:62px;} .inTitle2{padding-bottom:15px; font-size:45px;} .inTitle3{padding:70px 0 10px 0; font-size:38px; } .inTitle3:before{height:52px; } .inTitle3 span{font-size:28px;} .inTitle4{font-size:20px;} .titleCap{padding-bottom:30px; font-size:16px; } .titleCap2{padding-bottom:30px; font-size:18px; } .inTitleCap1{padding-bottom:50px; font-size:20px;} .basicCap{margin-bottom:18px; font-size:16px; } .basicCap span{font-size:14px;} .basicCap span.title { font-size:24px;} .basicCap2{font-size:16px;} } @media(max-width:640px){ .inTitle1{padding:60px 0 45px 0; font-size:30px;} .inTitle1:before{height:42px;} .inTitle2{padding-bottom:8px; font-size:30px;} .inTitle3{padding:40px 0 10px 0; font-size:28px; } .inTitle3:before{height:32px; } .inTitle3 span{font-size:22px;} .inTitle4{font-size:18px;} .titleCap{padding-bottom:20px; font-size:14px; } .titleCap2{padding-bottom:15px; font-size:16px; } .inTitleCap1{padding-bottom:40px; font-size:18px;} .m_block{display:block; } .payCap{font-size:13px;} .basicCap{margin-bottom:15px; font-size:14px; } .basicCap span{font-size:13px;} .basicCap span.title { font-size:20px;} .basicCap2{font-size:14px;} } /* 대표컬러 */ .repColor1{color:#db0b37 !important;} /*빨강색*/ .repColor2{color:#00abe8 !important;} /*보라색*/ .repColor3{color:#0071d0 !important;} /*파란색*/ .repColor4{color:#ff7200 !important;} /*주황색*/ .repBg1{background-color:#db0b37 !important;} .repBg2{background-color:#00abe8 !important;} .repBg3{background-color:#0071d0 !important;} .repBg4{background-color:#ff7200 !important;} /* 검색바 */ .noticeSearch{width:100%; margin-bottom:28px; padding:25px 0; font-size:0; text-align:center; background:#f5f5f5;} .noticeSearch .inputA{display:inline-block; position:relative; width:64%; margin-left:-1px;} .noticeSearch.no_select .inputA{width:74%; } .noticeSearch .inputA input[type="text"]{padding-right:80px;} .noticeSearch .inputA input[type="image"]{position:absolute; top:14px; right:16px;} .searchInput{position:absolute; top:0; right:0; width:80px; height:50px; font-size:0; text-indent:-9999px; background:url("/template/1/type1/images/searchIco.png") center center no-repeat;} .searchInput.focus{background:url("/template/1/type1/images/searchIco_on.png") center center no-repeat;} .lookUpArea{position:relative; width:100%; min-height:75px; margin-bottom:28px; padding:15px 172px 15px 20px; font-size:0; text-align:center; background:#f5f5f5; } .lookUpArea.titleIn{padding:15px 155px 15px 175px;} .lookUpArea.titleIn .tit{position:absolute; top:50%; left:40px; width:120px; font-size:22px; font-weight:500; text-align:left; -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); } .lookUpArea.point{padding:15px; font-size:18px; text-align:center;} .lookUpArea.point a.lookUpBtn{display:inline-block; position:relative; top:0; right:0; margin-left:15px; } .lookUpArea .division{width:100%; text-align:left;} .lookUpArea .division.first{margin-bottom:5px; } .lookUpArea .division.first select{width:160px; margin-right:5px; } .lookUpArea select{height:45px; padding-left:15px; font-size:18px; color:#333; vertical-align:top; background:#fff url("/template/1/type1/images/sArrow1.png") 95% center no-repeat !important; border:1px solid #ccc; } .lookUpArea span.center{padding:0 15px; font-size:16px; } .lookUpArea .boxLabel{display:inline-block; width:calc(100% / 6 - 36px); height:45px; margin:0 5px 0 0;} .lookUpArea .boxLabel:last-child{margin:0; } .lookUpArea .boxLabel .lookUpA{display:inline-block; width:100%; height:100%; padding:8px 0; font-size:16px; text-align:center; vertical-align:top; background:#fff; border:1px solid #0071d0; cursor:pointer; } .lookUpArea .boxLabel .lookUpA.active{color:#fff; background:#0071d0; border:1px solid #0071d0;} .lookUpArea .block_ele{display:inline-block; width:calc(100% / 2 - 20.01px);} .lookUpArea .block_ele .inTselect{display:inline-block; width:calc(100% / 3 - 0.01px); font-size:16px; line-height:45px; } .lookUpArea .block_ele .inTselect select{width:calc(100% - 28px)} .lookUpBtn{display:block; position:absolute; top:15px; right:20px; width:11%; height:100px; font-size:18px; font-weight:500; color:#fff; text-align:center; line-height:100px; cursor:pointer;background:#0071d0;} .lookUpBtn.short{height:50px; line-height:50px; } @media(max-width:1080px){ .noticeSearch{margin-bottom:18px; padding:15px 0;} .noticeSearch .inputA{width:76%; } .noticeSearch.no_select .inputA{width:85%; } .noticeSearch .inputA input[type="text"]{padding-right:44px;} .searchInput{width:45px; height:40px; -webkit-background-size:22px; background-size:22px;} .searchInput.focus{-webkit-background-size:22px; background-size:22px;} .lookUpArea{padding:15px;} .lookUpArea .block_ele{margin-bottom:5px; } .lookUpBtn{position:relative; top:0; right:0; width:100%; height:45px; font-size:16px; line-height:45px;} .lookUpArea.titleIn{padding:15px 15px 15px 120px;} .lookUpArea.titleIn .tit{left:20px; width:95px; font-size:18px;} } @media(max-width:800px){ .lookUpArea .block_ele{display:block; width:100%;} .lookUpArea span.center{display:none; } .lookUpArea .boxLabel{width:calc(100% / 5 - 37.01px);} } @media(max-width:640px){ /* 검색바 */ .noticeSearch{position:relative; padding:15px 15px 15px 134px} .noticeSearch.no_select{padding:15px;} .noticeSearch .inputA{width:100%; } .noticeSearch.no_select .inputA{width:100%; } .noticeSearch .basicS{position:absolute; top:15px; left:15px; width:120px;} .lookUpBtn{height:40px; font-size:14px; line-height:40px;} .lookUpArea{padding:10px; } .lookUpArea select{height:40px; padding-left:10px; font-size:14px;} .lookUpArea .division.first select{width:100%; margin:0 0 5px 0; } .lookUpArea .boxLabel{width:calc(100% / 5 - 4.01px); height:40px; } .lookUpArea .boxLabel .lookUpA{font-size:14px;} .inTselect{font-size:0 !important; line-height:inherit !important; } .lookUpArea .block_ele .inTselect select{width:100%;} .lookUpArea.titleIn{padding:15px;} .lookUpArea.titleIn .tit{position:relative; top:0; left:0; width:100%; margin-bottom:10px; font-size:18px; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); transform: translate3d(0,0,0); } } /* 폼 스타일 */ .popBox{width:838px; height:768px; max-width:100%; padding:100px 0; background:#fff; /* border:1px solid #999; */} .popBox2{padding:100px 0; height:auto; border:1px solid #ccc; } .popBox.nopop{height:auto; margin:0 auto; background:none; border:none; } .popBox.autoH{height:auto; padding:25px; } .popBox.center{margin:0 auto;} .inBox{width:465px; max-width:100%; margin:0 auto;} .inBox.full{width:100%;} .inBox.end{width:560px; max-width:100%; } .pwIn{position:relative; width:45%; margin:0 auto; padding-left:90px; margin-top:45px; margin-bottom:45px; background:#f8f8f8; } .pwIn .tit{position:absolute; top:12px; left:17px; } .pwIn input{width:100%;} ul.inputList li{position:relative; margin:0 0 10px 0; font-size:0; } .placeT{display:inline-block; position:relative; width:100%; vertical-align:top;} .placeH{display:none; position:absolute; top:0; left:24px; font-size:20px; font-weight:100; line-height:70px; color:#6b6b6b;} .placeH .cap{font-size:16px; font-weight:100; color:#c7c7c7;} .chkIco{position:absolute; top:50%; right:14px; width:28px; height:20px; margin-top:-10px; font-size:0; text-indent:-9999px; background-image: url("/template/1/type1/images/chk_off.png"); background-position: 0 0; background-repeat: no-repeat; -webkit-background-size: 100%; background-size:100%;} .chkIco.chkOk{background-image:url("/template/1/type1/images/chk_on.png");} .inTselect{display:inline-block; font-size:20px; font-weight:100; background:#fff; border:1px solid #ccc; border-right:none; } .inTselect:last-child, .inTselect.last{border-right:1px solid #ccc;} .inTselect.choLong{width:42%;} .inTselect.choShort{width:29%; } @media(max-width:1080px){ .popBox{width:100%; } .inTselect{font-size:16px;} .chkIco{right:14px; width:22px; height:18px; margin-top:-9px; } } @media(max-width:640px){ .popBox.autoH{padding:15px; margin:auto;} } /* 팝업 */ .popCont{display:none; position:fixed; top:50%; left:50%; z-index:500; width:500px; height:500px; margin:-250px 0 0 -250px; padding:50px 38px 0 38px; background:#fff; border:2px solid #000; } .popCont .popTitle{padding-bottom:25px; font-size:26px; font-weight:400; } .popCont .close{position:absolute; top:20px; right:20px; width:20px; height:20px; font-size:0; text-indent:-9999px; background:url("/template/1/type1/images/close.png") 0 0 no-repeat; -webkit-background-size: 100%; background-size: 100%;} .textAreaBox{position:relative; z-index:10; width:100%; height:350px; padding:10px; font-size:14px; font-weight:300; line-height:24px; border:1px solid #ccc; overflow-y:auto; } /* 쿠폰등록 팝업 */ .couponPop{width:100%; padding:60px 45px; background:#fff; border:1px solid #333; }/* position:absolute; top:-5px; left:-415px; */ .couponPop .popT{margin-bottom:10px; font-size:22px; font-weight:500; text-align:left; } .whiteCoupon{position:relative; padding-right:95px;} .whiteCoupon a.sBtn{position:absolute; top:0; right:0; width:95px;} .couponPop .closeB{position:absolute; top:14px; right:14px; width:22px; cursor:pointer;} .couponPop .closeB img{display:block; width:100%; } /* 서브배너 */ .sBanLink{width:100%; margin-top:70px; } .sBanLink a, .sBanLink img{display:block; width:100%; height:auto;} /* 셀렉트 스타일 */ select.period_select{display:block; width:80%; height:40px; margin:0 auto; padding-left:5px; font-size:18px; vertical-align:top; background:#fff url("/template/1/type1/images/sArrow1.png") 95% center no-repeat !important; border:1px solid #ccc; } select.basicS{width:20%; height:50px; font-size:18px; vertical-align:top; background:#fff url("/template/1/type1/images/sArrow1.png") 95% center no-repeat !important; border:1px solid #ccc; } select.basicS.numselect{height:30px; } select.basicS.shot{width:120px;} select.basicS.shot2{width:78px; padding-left:10px;} select.basicAuto{height:50px; font-size:18px; vertical-align:top; background:#fff url("/template/1/type1/images/sArrow1.png") 95% center no-repeat; border:1px solid #ccc; } select.joinBig{height:70px; font-size:20px; font-weight:100; } select.w{width:42%;} select.write_select{width:300px;} select.choLong{width:42%;} select.choShort{width:29%;} select.shortSerch{width:180px; height:45px;} select.tableInS{width:80%; height:35px; min-width:auto; margin:0 auto 5px; padding-left:15px; font-size:16px; } select.small{width:78px; min-width:auto; height:25px; padding-left:5px; font-size:16px; font-weight:300; background:#fff url("/template/1/type1/images/sArrow1.png") 95% center no-repeat; border:1px solid #ccc; } select.nob{height:70px;} ul.inputList select{background-color: #fff; background-image: url("/template/1/type1/images/sArrow2.png"); background-position: 95% center; background-repeat: no-repeat;} ul.joinList .lengInput1 select{width:33%; border:none;} .inTselect select{margin-right:5px; border:none;} .inTselect select.choLong{width:85%;} .inTselect select.choShort{width:78%;} .couponChoice select.basicS{width:100%; height:55px; padding-left:10px; font-size:16px; vertical-align:top; background:#fff url("/template/1/type1/images/sArrow1.png") 95% center no-repeat; border:1px solid #ccc; border-right:none; } /* 인풋 스타일 */ /* input:focus + span.placeH{display:none;} */ /*input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]){width:250px; height:50px; padding-left:20px; font-size:18px; font-weight:100; vertical-align:top; background:#fff; border:1px solid #ccc; } .inputList input:not([type="radio"]):not([type="checkbox"]):not([type="image"]){height:70px; padding-left:24px; font-size:20px; }*/ input{} /* input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]):not([type="button"]):not([type="submit"]){width:250px; height:50px; padding-left:20px; font-size:18px; font-weight:100; vertical-align:top; background:#fff; border:1px solid #ccc; } */ input[type="text"], input[type="password"]{height:50px; padding-left:20px; font-size:18px; font-weight:100; background:#fff; border:1px solid #ccc; } input.w150{width:150px;} input[type="submit"]{cursor:pointer;} .inputList input[type="text"], .inputList input[type="password"]{height:70px; padding-left:24px; font-size:20px; } ul.joinList input{padding-right:55px} ul.joinList .lengInput1 input{padding-right:10px; border:none !important;} input.fixW1{width:100% !important;} input.fixW2{width:300px !important;} input.quantity{width:40px; height:23px !important; padding:0 5px 0 0 !important;} @media(max-width:1080px){ /* 셀렉트 스타일 */ select.basicS{height:40px; font-size:16px; } select.joinBig{height:55px; font-size:16px;} input[type="text"], input[type="password"]{height:40px; padding-left:15px; font-size:16px;} .inputList input[type="text"], .inputList input[type="password"]{height:55px; padding-left:15px; font-size:16px; } } @media(max-width:640px){ input.fixW2{width:100% !important;} select.basicS{font-size:14px; } select.joinBig{width:100% !important; height:40px; margin:0; font-size:14px;} select.basicS.numselect{width:100%;} select.write_select{width:100%;} input[type="text"], input[type="password"]{padding-left:10px; font-size:14px;} .inputList input[type="text"], .inputList input[type="password"]{height:40px; padding-left:10px; font-size:14px; } ul.inputList select{-webkit-background-size:12px; background-size:12px;} } /* textarea */ textarea.writText{width:100%; height:350px; vertical-align:top; resize:none; border:1px solid #ccc; } /* 파일커스텀 */ .input-file{position:relative; width:100%; margin:5px 0; padding-right:110px; font-size:0; } .input-file [type="file"] {position: absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); border:none;} .input-file .file-label {position:absolute; top:0; right:0; width:110px; height:50px; line-height: 50px; font-size: 18px; color:#fff; text-align:center; background-color:#00abe8;} .input-file .file-name { width:100% !important; background: #f5f5f5; height:50px; line-height:48px; text-indent: 5px; border: 1px solid #bbb; } .file-focus {outline: 1px dotted #d2310e;} @media(max-width:1080px){ .input-file .file-label {height:40px; line-height:40px; font-size: 16px;} .input-file .file-name {height:40px; line-height:38px; } } /* 버튼 스타일 */ .buyBtnArea{width:100%; font-size:0; } .buyBtnArea a.sBtn:first-child{margin-left:0;} .buyBtnArea a.sBtn{width:calc(100% / 3 - 5.01px); height:55px; margin-left:5px; font-size:18px; line-height:55px; } .buyBtnArea a.sBtn.white{line-height:53px; } .buyBtnArea a.sBtn.gray{line-height:53px; } .centerBtnA{width:100%; font-size:0; text-align:center; } .centerBtnA.mtA{margin-top:35px; } .centerBtnA a{margin:0 5px; } .centerBtnA a.full{margin:0;} .sBtn{display:inline-block; width:120px; height:45px; font-size:16px; color:#fff; line-height:45px; text-align:center; vertical-align:top; background:#00abe8; } .sBtn.m_show{display:none; } .H50{height:50px; line-height:50px;} .atte{position:relative; padding-left:57px; } .atte:before{content:""; display:block; position:absolute; top:0; left:0; width:57px; height:53px; font-size:70px; color:#ccc; background-image: url("/template/1/type1/images/heart_off.png"); background-position: center center; background-repeat: no-repeat;border-right:1px solid #c1c1c1; } .atte.active:before{background:url("/template/1/type1/images/heart_on.png") center center no-repeat; } .blue{background:#0071d0;} .red{background:#db0b37;} .gray{color:#000 !important; background:#f4f4f4; line-height:43px; border:1px solid #ccc;} .gray2{color:#000 !important; background: #ccc; line-height:43px; border:1px solid #ccc; } .white{color:#000 !important; background: #fff; line-height:43px; border:1px solid #333; } .black{color:#fff !important; background: #000; line-height:43px; border:1px solid #000; } .big{height:70px; font-size:20px; line-height:70px;} .full{width:100% !important; } .half{width:calc(100% / 2 - 2.51px); margin:5px 5px 0 0 !important;} .half:last-child{margin-right:0 !important;} .viewBtn{display:inline-block; height:32px; padding:0 10px; font-size:16px; line-height:30px; text-align:center; background:#fff; border:1px solid #ccc; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .viewBtn_gnu{display:inline-block; padding:0 10px; height:32px; font-size:16px; line-height:30px; text-align:center; background:#fff; border:1px solid #ccc; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .notB{display:inline-block; position:relative; padding:0 18px; font-size:16px; font-weight:100; } .notB:before{content:""; display:block; position:absolute; top:50%; left:0; width:1px; height:14px; margin-top:-7px; background:#d3d3d3;} .notB:after{content:""; display:block; position:absolute; bottom:-8px; left:50%; width:0; height:2px; margin-left:0; background:#00abe8; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .notB:hover:after{width:60px; margin-left:-30px;} .noticeBtnArea .notB:first-child:before{display:none;} .sampleB{display:block; width:80%; margin:2px auto; padding:5px; font-size:16px; font-weight:400; color:#fff !important; background:#0071d0;} .sampleB.none{position:relative; cursor:default; background:#ccc;} .sampleB.red{background:#db0b37;} .sampleB.bas{background: #00abe8; } .sampleB.dele{color:#000 !important; background:#fff; border:1px solid #333;} .sampleB.white{color:#000 !important; line-height:32px; background:#fff; border:1px solid #333;} .sampleB.black{color:#fff !important; line-height:inherit; background: #000; } .sampleB.end{color:#fff !important; line-height:inherit; background: #595959; } .payBtn{display:block; width:100%; height:55px; margin:5px auto; font-size:18px; color:#fff; text-align:center; line-height:53px; } .payCouoBtn{display:inline-block; position:absolute; top:0; right:0; width:54px; height:55px; padding:6px 0; font-size:18px; color:#fff; line-height:20px; text-align:center; background:#00abe8; } @media(max-width:1080px){ .buyBtnArea a.sBtn{height:45px; font-size:16px; line-height:45px; } .buyBtnArea a.sBtn.white{line-height:43px; } .buyBtnArea a.sBtn.gray{line-height:43px; } .sBtn.m_show{display:block; margin:15px 0 0 0; } .atte{padding-left:45px; } .atte:before{width:45px; height:43px; -webkit-background-size:22px; background-size:22px;} .sampleB{width:95%; font-size:14px; } .big{height:55px; font-size:18px; line-height:55px;} .viewBtn{height:28px; font-size:14px; line-height:26px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; } .viewBtn_gnu{height:28px; font-size:14px; line-height:26px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; } } @media(max-width:640px){ .sBtn{width:100%; min-width:120px; height:40px; font-size:14px; line-height:40px; } .buyBtnArea a.sBtn{width:calc(100% / 2 - 27.01px); margin-left:2px; } .centerBtnA.mtA{margin-top:15px;} .centerBtnA a{width:calc(100% / 2 - 2.51px); margin:0 5px 0 0;} .centerBtnA a:last-child{margin-right:0; } .atte{width:45px !important; min-width:inherit; padding-left:0; font-size:0 !important; } .atte:before{border-right:none; } .sampleB{min-width:85px; width:auto;} .notice_list01 .sampleB{display:inline-block; margin:0 2px;} } /* 커스텀 체크 */ .chkCus{position:relative; } .chkCus input[type="checkbox"]{display:none; } .chkCus span.text{margin-right:10px; } .chkCus span.btn{display:inline-block; position:relative; width:34px; height:10px; vertical-align:2px; background:#d8d8d8; border:1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .chkCus span.btn:before{content:""; display:block; position:absolute; top:-4px; left:-5px; width:16px; height:16px; background:#fff; border:1px solid #bababa; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-transition: left .5s; -moz-transition: left .5s; -ms-transition: left .5s; -o-transition: left .5s; transition: left .5s; } .chkCus input[type="checkbox"]:checked + span.text + span.btn:before{left:20px; border:none; background-color: #00abe8; } .chkCus2{width:100%; } .chkCus2 .in{position:relative; background:#fff;} .chkCus2 input[type="checkbox"], .chkCus2 input[type="radio"]{visibility:hidden; position:absolute; top:0; left:0; } .chkCus2 label{display:block; width:100%; height:70px; border:1px solid #ccc; } .chkCus2 span.txt{display:block; padding:18px 54px 18px 24px; height:100%; font-size:20px; font-weight:100; } .chkCus2 span.btn{display:block; position:absolute; top:50%; right:14px; width:28px; height:20px; margin-top:-10px; background-image: url("/template/1/type1/images/chk_off.png"); background-position: 0 0; background-repeat: no-repeat; -webkit-background-size: 100%; background-size:100%;} .chkCus2 input[type="checkbox"]:checked + span.txt + span.btn, .chkCus2 input[type="radio"]:checked + span.txt + span.btn{background-image:url("/template/1/type1/images/chk_on.png");} @media(max-width:1080px){ .chkCus2 label{height:55px;} .chkCus2 span.txt{padding:14px 54px 14px 15px; font-size:16px;} .chkCus2 span.btn{width:22px; height:18px; margin-top:-9px;} } @media(max-width:640px){ .chkCus2 label{height:40px;} .chkCus2 span.txt{padding:8px 30px 8px 15px; font-size:14px;} .chkCus2 span.btn{right:10px; width:20px; height:14px; margin-top:-7px;} } /* 커스텀 라디오 */ .radioCus label{display:inline-block; position:relative; width:calc(100% / 2 - 5.01px); height:70px; margin-right:10px; } .radioCus label:last-child{margin-right:0; } .radioCus input[type="radio"]{visibility:hidden; } .radioCus span.txt{display:block; position:absolute; top:0; left:0; z-index:10; width:100%; font-size:20px; font-weight:400; line-height:70px; text-align:center; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .radioCus span.btn{display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; border:1px solid #ccc; } .radioCus span.btn:after{content:""; display:block; position:absolute; top:0; left:0; width:0; height:100%; background:#ff4a03; -webkit-transition: width .3s; -moz-transition: width .3s; -ms-transition: width .3s; -o-transition: width .3s; transition: width .3s; } .radioCus input[type="radio"]:checked + span.txt{color:#fff; } .radioCus input[type="radio"]:checked + span.txt + span.btn{border:1px solid #ff4a03} .radioCus input[type="radio"]:checked + span.txt + span.btn:after{width:100%;} /*.payRadio label{display:inline-block; position:relative; margin-right:30px; padding-left:40px;}*/ .payRadio label{display:inline-block; position:relative; margin-right:28px; padding:2px 0 2px 32px; line-height: 26px;} .payRadio label:last-child{margin-right:0; } .payRadio label.nomargin{margin:0px;} .payRadio label.nopadding{padding:0px;} .payRadio input[type="radio"], .payRadio input[type="checkbox"]{visibility:hidden; display:none; } .payRadio span.btn{display:block; position:absolute; top:0; left:0; width:26px; height:26px; background-image: url("/template/1/type1/images/chk_off2.png"); background-position: 0 0; background-repeat: no-repeat; -webkit-background-size: 100%; background-size:100%;} .payRadio input[type="radio"]:checked + span.btn, .payRadio input[type="checkbox"]:checked + span.btn{background-image:url("/template/1/type1/images/chk_on2.png");} .boxLabel input[type="radio"]{visibility:hidden; display:none; } .boxLabel input[type="radio"]:checked + .lookUpA{color:#fff; background:#0071d0; border:1px solid #0071d0;} @media(max-width:1080px){ .radioCus label{height:55px;} .radioCus span.txt{font-size:18px; line-height:55px;} } @media(max-width:640px){ .payRadio span.btn{top:3px; width:22px; height:22px;} .radioCus label{height:45px;} .radioCus span.txt{font-size:16px; line-height:45px;} } /* 테이블 */ .viewIn table.basicTb1{margin-bottom:100px;} table, table th, table td{} table.basicTb1{margin-bottom:35px;} table.basicTb1.noMargin{margin:0;} table.basicTb1 th{font-weight:400; } table.basicTb1 thead th{border-top:1px solid #c4c4c4; border-bottom:2px solid #000;} table.basicTb1 thead th:after{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:18px; margin-top:-9px; background:#dbdbcb;} table.basicTb1 thead th:last-child:after{display:none;} table.basicTb1 thead th input[type="checkbox"]{margin-right:8px;} table.basicTb1 th, table.basicTb1 td{position:relative; padding:20px 0; font-size:18px; text-align:center; border-bottom:1px solid #c4c4c4;} table.basicTb1 td{font-weight:300; } table.basicTb1 td input[type="checkbox"]:not(".noA"){position:absolute; top:28px; left:5px; } table.basicTb1 .left{padding-left:35px; text-align:left; } .paymentArea table.basicTb1 .left{padding-left:5px;} table .top{vertical-align:top;} table.basicTb1 .left.chk{padding-left:50px;} table.basicTb1 .left.chk input[type="checkbox"]{left:25px;} table.basicTb1 .left a{display:inline-block; width:auto; max-width:90%; margin-left:8px; vertical-align:middle; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} table.basicTb1 .packageP{width:100%; position:relative; } table.basicTb1 .packageP a{max-width:80%;} table.basicTb1 span.progressN{display:block; position:absolute; top:0; right:0; width:14%; text-align:center; } table.basicTb1 .left a.noH{text-overflow:inherit; white-space:inherit; overflow:inherit;} table.basicTb1 .left a:hover{text-decoration:underline;} table.basicTb1 .imgT{width:145px; max-width:100%; height:110px; margin:0 auto; } table.basicTb1 .imgT img{display:block; width:auto; max-width:100%; height:100%; margin:0 auto; } table.basicTb2{border:1px solid #ccc; border-top:2px solid #000; } table.basicTb2 th, table.basicTb2 td{height:70px; padding:7px 20px; color:#333; text-align:left; border-bottom:1px solid #ccc; } table.basicTb2 th{position:relative; font-size:16px; font-weight:500; } table.basicTb2 th:after{content:""; display:block; position:absolute; top:26px; right:0; width:1px; height:18px; background:#ccc; } table.basicTb2 td{position:relative; padding-left:210px; font-size:18px; font-weight:300; } table.basicTb2 .top{padding-top:22px;} table.basicTb2 .settle_bank select.long{width:calc(100% - 150px);} table.basicTb2 span.tit{position:absolute; top:0; left:0; width:200px; height:100%; display:table; font-size:16px; font-weight:500; color:#333; } table.basicTb2.tit_30 span.tit{width:220px;} table.basicTb2.tit_30 td{padding-left:230px; } table.basicTb2 span.tit > span{display:table-cell; padding-left:24px; vertical-align:middle; } table.basicTb2 span.tit:after{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:18px; margin-top:-9px; background:#ccc; } table.basicTb2 .placeT{width:140px; } table.basicTb2 .placeT2{width:240px; } table.basicTb2 .placeH{font-size:16px; line-height:50px; } table.basicTb2.pay_basicTb2 td{padding-left:140px;} table.basicTb2.pay_basicTb2 span.tit{width:135px;} table.popBasicTb{border:1px solid #ccc; border-top:2px solid #000; } table.popBasicTb th, table.popBasicTb td{height:40px; padding:5px 10px; color:#333; border-bottom:1px solid #ccc; } table.popBasicTb th{position:relative; font-size:14px; font-weight:500; } table.popBasicTb td{font-size:14px; font-weight:300; } table.popBasicTb .left{padding:8px; text-align:left; } ul.packageProg{width:100%; margin:15px 0 0 0; padding-left:15px; } ul.packageProg li{position:relative; width:100%; } ul.packageProg li a{max-width:75% !important;} .addDel{margin:5px 0 0 0; font-size:0;} .addDel span{display:inline-block; width:30px; height:30px; text-align:center; line-height:28px; cursor:pointer; background:#fff; border:1px solid #ccc; } .addDel span img{vertical-align:middle} @media(max-width:1080px){ table.basicTb2 td{padding-left:130px; font-size:16px;} table.basicTb2 span.tit{width:120px; font-size:14px;} table.basicTb2.tit_30 td{padding-left:170px; } table.basicTb2.tit_30 span.tit{width:160px;} } @media(max-width:640px){ table.basicTb2 td{padding:10px; font-size:14px;} table.basicTb2 span.tit{position:relative; width:100%; height:auto; margin-bottom:10px; } table.basicTb2 span.tit:after{display:none; } table.basicTb2 span.tit > span{padding:0; } table.basicTb2.tit_30 td{padding-left:10px; } table.basicTb2.tit_30 span.tit{width:100%;} table.basicTb2 .addDel{display:inline-block; *display:inline; *zoom:1; margin:0 0 0 10px; vertical-align:middle; } table.basicTb2.pay_basicTb2 td{padding-left:10px;} table.basicTb2.pay_basicTb2 span.tit{width:100%;} table.basicTb2 .settle_bank select.long{width:100%;} table.basicTb2 .placeT{width:100%; margin-top:5px;} } /* 로그인/아이디찾기/비밀번호찾기 */ ul.loginNav{width:100%; padding:40px 0 0 0; } ul.loginNav:after{content:""; display:block; clear:both;} ul.loginNav li{position:relative; float:left; padding:0 18px; } ul.loginNav li:first-child{padding-left:0;} ul.loginNav li:last-child{padding-right:0;} ul.loginNav li:after{content:""; display:block; position:absolute; top:7px; right:0; width:1px; height:17px; background:#e5e5e5;} ul.loginNav li:last-child:after{display:none; } ul.loginNav li a, ul.loginNav li span.text{position:relative; font-size:20px; font-weight:100; } ul.loginNav li a:after, ul.loginNav li label:after{content:""; display:block; position:absolute; bottom:-4px; left:-10%; width:0; height:2px; background:#00abe8; -webkit-transition: width .3s; -moz-transition: width .3s; -ms-transition: width .3s; -o-transition: width .3s; transition: width .3s; } ul.loginNav li label:after{bottom:0; left:-4%;} ul.loginNav li a:hover:after{width:120%;} ul.loginNav li:hover label:after{width:80%;} dl.simpleLogin{width:100%; margin-top:60px;} dl.simpleLogin:after{content:""; display:block; clear:both;} dl.simpleLogin dt{float:left; width:106px; font-size:20px; font-weight:100; } dl.simpleLogin dd{float:left; width:80px; margin-left:6px; } dl.simpleLogin dd a, dl.simpleLogin dd img{display:block; width:100%; } dl.simpleLogin .kko_login{background: none !important;} ul.findEnd{width:100%; border:1px solid #dbdbdb; border-right:none;} ul.findEnd:after{content:""; display:block; clear:both;} ul.findEnd li:first-child{width:24%; font-weight:100; color:#3e3e3e; text-align:center; } ul.findEnd li{float:left; width:38%; font-size:18px; font-weight:500; color:#000; padding:12px; background:#fff; border-right:1px solid #dbdbdb; } ul.pwEnd{width:100%;} ul.pwEnd li{position:relative; margin:4px 0; padding:10px 0 10px 170px; background:#fff; border:1px solid #dbdbdb; } ul.pwEnd li > a{display:block; position:absolute; top:0; left:-1px; width:160px; height:100%; text-align:center; line-height:44px; background:url("/template/1/type1/images/next.png") 90% center no-repeat; border:1px solid #000; } @media(max-width:1080px){ ul.loginNav{padding:30px 0 0 0; } ul.loginNav li{padding:0 14px; } ul.loginNav li:after{top:8px; height:14px;} ul.loginNav li a, ul.loginNav li span.text{font-size:16px; } dl.simpleLogin{margin-top:60px;} dl.simpleLogin dt{float:none; width:100%; margin-bottom:5px; font-size:18px; } dl.simpleLogin dd{margin-left:0; margin-right:6px; } ul.findEnd li{font-size:16px; padding:8px; } ul.pwEnd li{padding:8px 0 8px 140px; font-size:16px; } ul.pwEnd li > a{width:130px; padding:0 8px; text-align:left; line-height:40px;} } @media(max-width:640px){ ul.loginNav{padding:10px 0 0 0; } ul.loginNav li{padding:0 8px; } ul.loginNav li a, ul.loginNav li span.text{font-size:14px; } dl.simpleLogin{margin-top:30px;} dl.simpleLogin dt{ font-size:16px; } dl.simpleLogin dd{width:60px; } ul.findEnd li{width:76%;} ul.findEnd li.last_li{width:100%; border-top:1px solid #dbdbdb;} ul.pwEnd li{padding:8px 0 8px 130px; font-size:14px; } ul.pwEnd li > a{width:120px; line-height:34px;} } /* 회원가입 */ ul.joinList{margin-bottom:30px; } ul.joinList li{min-height:70px; margin-bottom:35px; } ul.joinList.joinEnd li{margin-bottom:25px;} ul.joinList li.chkCus2{margin-bottom:5px;} ul.joinList li .in{position:relative; width:100%; background:#fff;} ul.joinList li p.tit{margin-bottom:5px; font-size:18px;} ul.joinList li p.value{width:100%; min-height:70px; padding:20px 24px; font-size:20px; font-weight:100; border:1px solid #ccc; } ul.joinList li.noW{background:none;} span.error{position:absolute; bottom:-24px; left:0; padding-left:25px; font-size:14px; color:#ee0000;} span.error:before{content:""; display:block; position:absolute; top:1px; left:0; width:20px; height:20px; background:url("/template/1/type1/images/icon_warning.png") 0 0 no-repeat; -webkit-background-size: 100%; background-size:100%; } ul.joinList .nec{font-size:14px; color:#ee0000;} ul.joinList .necPass{color:#0d88f1;} ul.joinList .lengInput1 .in{border:1px solid #ccc;} /* ul.joinList .lengInput1 label{width:31.5%;} */ ul.joinList .lengInput1 .btnIn{position:relative; margin-bottom:5px; padding-right:150px; } ul.joinList .lengInput1 .btnIn label{width:100%;} ul.joinList .lengInput1 .btnIn a.sBtn{position:absolute; top:0; right:0; width:150px; border:none; border-left:1px solid #ccc; } ul.joinList.joinEnd .lengInput1 .btnIn a.sBtn{top:1px; right:1px; } ul.joinList .lengInput1 .bul{font-size:20px; font-weight:100; vertical-align:-7px; } .joinchoBox ul.capList li{float:none !important; width:100% !important; padding:10px 20px 10px 42px !important; font-size:18px; font-weight:100; background:url("/template/1/image/capChkIco.png") 20px 20px no-repeat; } .joinchoBox{position:relative; width:100%; margin-bottom:50px; padding-bottom:10px; } .joinchoBox.nobm{margin-bottom:0;} .joinchoBox span.error{bottom:-10px;} .joinchoBox > p{font-size:20px; font-weight:100; } .joinchoBox ul.choList{width:100%; margin-top:14px; padding:10px 0; background:#fff; border:1px solid #ccc; border-top:3px solid #000; } .joinchoBox ul.choList:after{content:""; display:block; clear:both;} .joinchoBox ul.choList li{float:left; width:50%; padding:10px 0 10px 20px; } .joinchoBox ul.choList li label{font-size:20px; font-weight:100; } .joinchoBox ul.choList li input{margin-right:10px; } .joinchoBox ul.choList.full li{float:none; width:100%; }/* 추가 */ ul.joinAgree{position:relative; width:100%; padding:15px 0 30px 0;} ul.joinAgree:after{content:""; display:block; clear:both;} ul.joinAgree li{margin-bottom:5px; font-size:0; } ul.joinAgree li label{margin-right:10px; font-size:18px; font-weight:100; } ul.joinAgree li input[type="checkbox"]{margin-right:10px; } ul.joinAgree span.error{bottom:15px;} @media(max-width:1080px){ ul.joinList li{min-height:45px; } ul.joinList li p.tit{font-size:16px;} ul.joinList li p.value{min-height:55px; padding:14px 15px; font-size:16px;} .joinchoBox{margin-bottom:30px; padding-bottom:8px; } .joinchoBox > p{font-size:16px;} .joinchoBox ul.choList{margin-top:10px; padding:8px 0; } .joinchoBox ul.choList li{padding:8px 0 8px 15px; } .joinchoBox ul.choList li label{font-size:16px; } .joinchoBox ul.choList li input{margin-right:8px; } .joinchoBox span.error{bottom:-20px;} ul.joinAgree{padding-top:12px;} ul.joinAgree li label{margin-right:8px; font-size:16px; } ul.joinAgree li input[type="checkbox"]{margin-right:8px; } } @media(max-width:640px){ ul.joinList{margin-bottom:20px; } ul.joinList li p.tit{font-size:14px;} ul.joinList li p.value{min-height:40px; padding:9px 10px; font-size:14px;} ul.joinList .lengInput1 .btnIn{padding-right:100px; } ul.joinList .lengInput1 .btnIn a.sBtn{width:100px; min-width:100px; } .joinchoBox > p{font-size:14px;} .joinchoBox ul.choList{margin-top:8px; padding:6px 0; } .joinchoBox ul.choList li{padding:6px 0 6px 10px; } .joinchoBox ul.choList li label{font-size:14px; } .joinchoBox ul.choList li input{margin-right:6px; } ul.joinAgree{padding-top:10px;} ul.joinAgree li label{margin-right:6px; font-size:14px; } ul.joinAgree li input[type="checkbox"]{margin-right:6px; } } #contents ul.inTabs{width:100%; margin-bottom:30px; border-bottom:1px solid #ccc;} #contents ul.inTabs:after{content:""; display:block; clear:both;} #contents ul.inTabs li{position:relative; float:left; width:25%; padding:0 2px; } #contents ul.inTabs li:after{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:18px; margin-top:-9px; background:#ccc;} #contents ul.inTabs li:last-child:after{display:none; } #contents ul.inTabs li a{display:block; position:relative; width:100%; padding:20px 0; font-size:18px; font-weight:300; text-align:center;} #contents ul.inTabs li a:after{content:""; display:block; position:absolute; bottom:-1px; left:50%; width:0; height:5px; background:#0071d0; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition:all .5s; -o-transition: all .5s; transition: all .5s; } #contents ul.inTabs li a:hover:after, #contents ul.inTabs li.active a:after{width:100%; margin-left:-50%;} #contents ul.inTabs2{width:100%; margin-bottom:30px; border-bottom:1px solid #000;} #contents ul.inTabs2:after{content:""; display:block; clear:both;} #contents ul.inTabs2 li{position:relative; display:table; float:left; width:calc(100% / 8 + 0.99px) !important; height:64px; margin-right:-1px; border:1px solid #ccc; border-bottom:none; } #contents ul.inTabs2 li.active{z-index:1; border:1px solid #000; border-bottom:none;} #contents ul.inTabs2 li.active:after{content:""; display:block; position:absolute; bottom:-1px; left:0; z-index:100; width:100%; height:1px; background:#fff;} #contents ul.inTabs2 li a{display:table-cell; position:relative; width:100%; font-size:18px; font-weight:300; color:#666; text-align:center; vertical-align:middle; } #contents ul.inTabs2 li.active a{color:#000; } @media(max-width:1080px){ #contents ul.inTabs2{border-bottom:none} #contents ul.inTabs2 li{width:calc(100% / 4 - 0.01px) !important; height:55px; margin-bottom:-1px; border:1px solid #ccc;} #contents ul.inTabs2 li.active{border:1px solid #000;} #contents ul.inTabs2 li.active:after{display:none; } #contents ul.inTabs2 li a{font-size:16px;} } @media(max-width:640px){ #contents ul.inTabs2 li{width:calc(100% / 3 - 0.01px) !important; height:45px;} #contents ul.inTabs2 li a{font-size:14px;} } /* 마이페이지 상단 */ /* 상단 픽스 */ .myGuideFixed{display:none; width:100%; margin-bottom:15px; } .myGuideFixed .fixedIn{position:relative; width:100%;} .myGuideFixed .fixedIn.fixed{position:fixed; top:0; left:0; z-index:200; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(0.7, #ffffff), color-stop(1, rgba(255,255,255,0))); background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%); background: linear-gradient(top, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='rgba(255,255,255,0)', gradientType=0); } .topFixTitle{position:relative; width:100%; padding:10px 15px 10px 35px; font-size:18px; color:#fff; font-weight:500; text-align:center; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e3052a), color-stop(0.9500000000000001, #774eef)); background: -moz-linear-gradient(145deg, #e3052a 0%, #774eef 95%); background: -webkit-linear-gradient(145deg, #e3052a 0%, #774eef 95%); background: -o-linear-gradient(145deg, #e3052a 0%, #774eef 95%); background: -ms-linear-gradient(145deg, #e3052a 0%, #774eef 95%); background: linear-gradient(145deg, #e3052a 0%, #774eef 95%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3052a', endColorstr='#774eef', gradientType=1); } .topFixTitle a.back{display:block; position:absolute; top:50%; left:15px; width:10px; margin-top:-8.5px; font-size:18px; color:#fff; font-weight:600; } .topFixTitle a.back img{display:block; width:100%; } @media(max-width:1080px){ .myGuideFixed{display:block; } } #contents .mypageGuide{position:relative; width:100%; height:150px; margin:60px 0; padding-right:175px; } #contents .myStatus{display:table; width:100%; height:100%; margin-bottom:60px; padding:0 15px; border-bottom:1px solid #ddd; border-top:2px solid #000; border-collapse:collapse; border-spacing:0;}/*background:#f8f8f8; */ #contents .myStatus:after{content:""; display:block; clear:both;} #contents .myStatus .myinfo{display:table-cell; width:250px; padding-left:10px; vertical-align:middle;} #contents .myStatus .myinfo .top{padding-bottom:14px; font-size:14px; font-weight:300; color:#333; } #contents .myStatus .myinfo .top b{font-size:20px; font-weight:500; color:#333; } #contents .myStatus .myinfo .top a{display:inline-block; padding:0 15px; font-size:12px; color:#fff; line-height:22px; background:#4c4a48; } #contents .myStatus .myinfo p{padding:2px 0; font-size:14px; font-weight:300; color:#333; } #contents .myStatus .myinfo p.big{padding-top:8px; font-size:20px; font-weight:300; line-height:36px;} #contents .myStatus .myinfo p.big b{font-weight:500; color:#333;} #contents .myStatus ul.lookUp{display:table-cell; width:calc(100% - 250px); vertical-align:middle;} #contents .myStatus ul.lookUp:after{content:""; display:block; clear:both;} #contents .myStatus ul.lookUp li{float:left; width:calc(100% / 6 - 0.01px); border-left:1px solid #e6e6e6; } #contents .myStatus ul.lookUp li a{display:block; width:100%; text-align:center;} #contents .myStatus ul.lookUp li p{padding-bottom:15px; font-size:16px; font-weight:300; color:#333; } #contents .myStatus ul.lookUp li p.value{padding-bottom:0; font-size:16px; } #contents .myStatus ul.lookUp li p.value b{font-size:34px; font-weight:500; color:#0071d0;} #contents .myRoomMove{position:absolute; top:0; right:0; width:165px; height:100%;} #contents .myRoomMove a{display:block; width:100%; height:100%; padding:30px 0; text-align:center; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8fc31f), color-stop(0.9500000000000001, #3665a7)); background: -moz-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -webkit-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -o-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -ms-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fc31f', endColorstr='#3665a7', gradientType=1); } #contents .myRoomMove a:before{content:""; display:block; position:absolute; top:68px; left:50%; width:42px; height:5px; margin-left:-21px; background:url("/template/1/type1/images/moreA2.png") 0 0 no-repeat;} #contents .myRoomMove p.title{padding-bottom:38px; font-size:14px; color:#fff; font-weight:500; } #contents .myRoomMove p.title img{display:inline-block; margin-right:5px;} #contents .myRoomMove p.cap{font-size:14px; font-weight:300; color:#fff; } #contents .myRoomMove p.cap b{font-weight:500; } @media(max-width:1080px){ .t_hide{display:none !important; } #contents .mypageGuide{height:auto; margin:-25px 0 40px 0; padding:0; /* top:-25px; */} #contents .myStatus{display:block; width:calc(100% + 30px); height:auto; margin-left:-15px; margin-bottom:0; padding:0; border-bottom:none; border-top:none; } #contents .myStatus .myinfo{display:block; width:100%; height:auto; padding:15px 0; text-align:center; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8fc31f), color-stop(0.9500000000000001, #3665a7)); background: -moz-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -webkit-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -o-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -ms-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fc31f', endColorstr='#3665a7', gradientType=1); } #contents .myStatus .myinfo p{display:inline-block; padding:0 4px; color:#fff !important; } #contents .myStatus .myinfo .top{display:block; padding:0; } #contents .myStatus .myinfo .top b{color:#fff; } #contents .myStatus .myinfo .top a{display:block; width:100px; height:30px; margin:10px auto; font-size:12px; color:#fff; line-height:30px; background:none; border:1px solid #fff; -webkit-border-radius: 15px; -moz-border-radius:15px; border-radius:15px;} #contents .myStatus ul.lookUp{display:block; width:100%; height:auto; margin:15px 0; } #contents .myStatus ul.lookUp li p.value{font-size:14px; } #contents .myStatus ul.lookUp li p.value b{font-size:25px;} #contents .myRoomMove{position:relative; width:100%; height:auto;} #contents .myRoomMove a{display:block; width:100%; height:auto; padding:15px 0; text-align:center; background:#00abe8; } #contents .myRoomMove a:before{top:22px; left:calc(50% + 54px); } #contents .myRoomMove p.title{padding:0; text-indent:-47px;} #contents .myRoomMove p.cap{display:none; } } @media(max-width:640px){ #contents .mypageGuide{margin-bottom:20px; } #contents .myStatus ul.lookUp li{width:calc(100% / 4 - 0.01px);} #contents .myStatus ul.lookUp li p{padding-bottom:0; font-size:14px;} #contents .myStatus .myinfo p{display:block; font-size:13px; } #contents .myRoomMove a{padding:10px 0;} #contents .myRoomMove a:before{top:18px;} } /* 나의 강의실 상단 */ #contents .myRoom{padding-left:175px; padding-right:0;} #contents .myRoom .myRoomMove{left:0; right:auto;} #contents .myRoom .myRoomMove a:before{top:110px; -ms-transform:rotateY(-180deg) ; -webkit-transform:rotateY(-180deg) ; transform:rotateY(-180deg) ; } #contents .myRoom .myRoomMove p.title{ } #contents .myRoom .myRoomMove p.title img{display:block; margin:0 auto 15px;} #contents .myRoom .myStatus .myinfo{width:18%;} #contents .myRoom .myStatus ul.lookUp{display:table-cell; vertical-align:middle; } #contents .myRoom .myStatus ul.lookUp li{width:calc(100% / 4 - 0.01px); } #contents .myRoom .totalProgress{position:relative; display:table-cell; width:45%; padding:0 20px; font-size:0; text-align:center; vertical-align:middle; } #contents .myRoom .totalProgress:after{content:""; display:block; clear:both;} #contents .myRoom .totalProgress .txtBar{display:inline-block; *display:inline; *zoom:1; margin-right:25px;} #contents .myRoom .totalProgress .title{margin-bottom:15px; font-size:20px; color:#000; font-weight:300;} #contents .myRoom .totalProgress .progressBar{position:relative; width:215px; height:13px; background:#e7e7e7;} #contents .myRoom .totalProgress .progressBar:before{content:""; display:block; position:absolute; top:0; left:0; z-index:20; width:100%; height:100%; background:url("/template/1/type1/images/progressBar.png") 0 0 repeat-x;} #contents .myRoom .totalProgress .progressBar span.bar{display:block; position:absolute; top:0; left:0; z-index:10; height:100%; } #contents .myRoom .totalProgress .progressBar span.bar:after{content:""; display:block; position:absolute; top:0; left:0; width:0; height:100%; -webkit-transition: all 2.5s; -moz-transition: all 2.5s; -ms-transition:all 2.5s; -o-transition: all 2.5s; transition: all 2.5s; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #00abe8), color-stop(0.9500000000000001, #3665a7)); background: -moz-linear-gradient(145deg, #00abe8 0%, #3665a7 95%); background: -webkit-linear-gradient(145deg, #00abe8 0%, #3665a7 95%); background: -o-linear-gradient(145deg, #00abe8 0%, #3665a7 95%); background: -ms-linear-gradient(145deg, #00abe8 0%, #3665a7 95%); background: linear-gradient(145deg, #00abe8 0%, #3665a7 95%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00abe8', endColorstr='#3665a7', gradientType=1); } #contents .myRoom .totalProgress .progressBar.action span.bar:after{width:100%;} #contents .myRoom .totalProgress .numberA{display:inline-block; *display:inline; *zoom:1; font-size:24px; color:#333; vertical-align:top; } #contents .myRoom .totalProgress .numberA span.counter{font-size:52px; font-weight:600; color:#db0b37;} @media(max-width:1080px){ #contents .myRoom{padding:0;} #contents .myRoom .myStatus ul.lookUp{display:block; width:100%; } #contents .myRoom .totalProgress{display:block; width:100%; padding:25px 0; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8fc31f), color-stop(0.9500000000000001, #3665a7)); background: -moz-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -webkit-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -o-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: -ms-linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); background: linear-gradient(145deg, #8fc31f 0%, #3665a7 95%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fc31f', endColorstr='#3665a7', gradientType=1); } #contents .myRoom .totalProgress .title{color:#fff; } #contents .myRoom .myRoomMove p.title img{display:inline-block; margin:0 5px 0 0;} #contents .myRoom .myRoomMove a:before{top:22px; -ms-transform:rotateY(0) ; -webkit-transform:rotateY(0) ; transform:rotateY(0) ; } #contents .myRoom .totalProgress .progressBar{width:220px; height:26px; background:none; border:1px solid #fff; -webkit-border-radius: 13px; -moz-border-radius:13px; border-radius:13px; overflow:hidden; } #contents .myRoom .totalProgress .progressBar:before{display:none; } #contents .myRoom .totalProgress .progressBar span.bar:after{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dadada), color-stop(0.37, #ffffff), color-stop(1, #dadada)); background: -moz-linear-gradient(top, #dadada 0%, #ffffff 37%, #dadada 100%); background: -webkit-linear-gradient(top, #dadada 0%, #ffffff 37%, #dadada 100%); background: -o-linear-gradient(top, #dadada 0%, #ffffff 37%, #dadada 100%); background: -ms-linear-gradient(top, #dadada 0%, #ffffff 37%, #dadada 100%); background: linear-gradient(top, #dadada 0%, #ffffff 37%, #dadada 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dadada', endColorstr='#dadada', gradientType=0); } #contents .myRoom .totalProgress .numberA{font-size:20px; color:#fff;} #contents .myRoom .totalProgress .numberA span.counter{font-size:48px; color:#fff;} } @media(max-width:640px){ #contents .myStatus ul.lookUp{border-top:1px solid #ccc; } #contents .myStatus ul.lookUp li{width:calc(100% / 2 - 0.01px); padding:10px 0; border-bottom:1px solid #ccc; } #contents .myRoom .totalProgress{padding:15px 0; } #contents .myRoom .totalProgress .title{margin-bottom:10px; font-size:16px;} #contents .myRoom .totalProgress .txtBar{margin-right:10px; } #contents .myRoom .totalProgress .numberA{font-size:14px; vertical-align:bottom;} #contents .myRoom .totalProgress .numberA span.counter{font-size:30px; } #contents .myRoom .myRoomMove a{padding:10px 0;} #contents .myRoom .myRoomMove a:before{top:18px;} } /* 나의 수강 현황 */ #contents .captionBox{width:100%; margin-bottom:20px; padding:34px 40px; background:#f8f8f8; border-top:1px solid #ccc; } #contents .captionBox.pointCaptionBox{background:#edf5fb; border-top:none;} #contents .captionBox.pointCaptionBox ul li{color:#000;} #contents .captionBox.borTNo{border-top:none;} #contents .captionBox ul li{position:relative; display:inline-block; width:100%; margin:7px 0; padding-left:20px; font-size:14px; font-weight:300; color:#0071d0; } #contents .captionBox ul li:before{content:""; display:block; position:absolute; top:6px; left:0; width:12px; height:9px; background:url("/template/1/type1/images/check.png") 0 0 no-repeat;} #contents .captionBox dl{width:100%; margin-bottom:35px;} #contents .captionBox dl:last-child{margin-bottom:0;} #contents .captionBox dl dt{padding-bottom:10px; font-size:18px; font-weight:500; } #contents .captionBox dl dd{font-size:16px; } #contents .captionBox p{margin-bottom:15px; font-size:16px; font-weight:300; } #contents .captionBox p:last-child{margin-bottom:0;} @media(max-width:1080px){ #contents .captionBox{padding:15px;} #contents .captionBox ul li{margin:4px 0; padding-left:14px; } #contents .captionBox dl{margin-bottom:25px;} #contents .captionBox dl dt{font-size:16px; } #contents .captionBox dl dd{font-size:14px; } #contents .captionBox p{margin-bottom:10px; font-size:14px;} } @media(max-width:640px){ #contents .captionBox dl dt{font-size:15px; } #contents .captionBox dl dd{font-size:13px; } #contents .captionBox p{font-size:13px;} } #contents .lectureViewProgress{position:relative; display:table; width:100%; margin:0 0 35px 0; padding:26px 60px; background:#f8f8f8; } #contents .lectureViewProgress > div{display:table-cell; vertical-align:middle; } #contents .lectureViewProgress .totalProgress{position:relative; width:130px; min-height:100px; } #contents .lectureViewProgress .totalProgress .zero:after{content:"0%"; position:absolute; top:50%; left:50%; font-size:20px; color:#000; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #contents .lectureViewProgress .inT{padding:0 15px 0 30px;} #contents .lectureViewProgress .inT .cap{padding:2px 0; font-size:16px; color:#666; } #contents .lectureViewProgress .btn_link{width:220px; height:50px; } #contents .lectureViewProgress a.link{display:block; width:100%; font-size:16px; font-weight:500; color:#fff; line-height:50px; text-align:center; background:#db0b37;} @media(max-width:1080px){ #contents .lectureViewProgress{margin:0 0 25px 0; padding:15px 30px;} #contents .lectureViewProgress .totalProgress{width:100px;} #contents .lectureViewProgress .totalProgress .progressbar-text, #contents .lectureViewProgress .totalProgress .zero:after{font-size:18px !important; } #contents .lectureViewProgress .inT{padding:0 10px 0 30px;} #contents .lectureViewProgress .inT .cap{font-size:14px; } #contents .lectureViewProgress .btn_link{width:180px; height:40px; } #contents .lectureViewProgress a.link{font-size:14px; line-height:40px;} } @media(max-width:800px){ #contents .lectureViewProgress > div{display:inline-block; } #contents .lectureViewProgress .totalProgress{width:80px; min-height:80px;} #contents .lectureViewProgress .totalProgress .progressbar-text, #contents .lectureViewProgress .totalProgress .zero:after{font-size:16px !important; } #contents .lectureViewProgress .inT{width:calc(100% - 84px);} #contents .lectureViewProgress .btn_link{display:block; margin-top:15px; margin-left:114px; } } @media(max-width:640px){ #contents .lectureViewProgress{padding:15px;} #contents .lectureViewProgress .totalProgress{float:right; } #contents .lectureViewProgress .inT{width:calc(100% - 85px); padding:0; } #contents .lectureViewProgress .btn_link{width:150px; margin-left:0; } } /*200122 나의강의실 상세 수료증버튼추가 By kang*/ #contents .lectureViewProgress a.cert_link{display:inline-block; width:100px; height:24px; font-size:16px; font-weight:500; color:#fff; line-height:24px; text-align:center; background:#0071d0;} .captionBox2{width:100%; margin-bottom:20px; padding:34px 40px; background:#edf5fb; } .captionBox2:after{content:""; display:block; clear:both;} .captionBox2 > ul{float:left; width:45%;} .captionBox2 > ul li{position:relative; display:inline-block; width:100%; margin:2px 0; padding-left:20px; font-size:14px; font-weight:300; color:#000; } .captionBox2 > ul li:before{content:""; display:block; position:absolute; top:6px; left:0; width:12px; height:9px; background:url("/template/1/type1/images/check.png") 0 0 no-repeat;} .captionBox2 .couponBox{position:relative; float:right; width:50%; padding-right:145px; } .captionBox2 .couponBox input[type="text"]{height:65px !important; border:none !important;} .captionBox2 .couponBox .lookUpBtn{width:145px;} @media(max-width:1080px){ .captionBox2{margin-bottom:20px; padding:15px 20px;} .captionBox2 > ul{float:none; width:100%;} .captionBox2 > ul li{padding-left:14px; } .captionBox2 .couponBox{float:none; width:100%; margin:15px 0 0 0; padding-right:110px; } .captionBox2 .couponBox input[type="text"]{height:50px !important; } .captionBox2 .couponBox .lookUpBtn{position:absolute; width:110px; height:50px; font-size:18px; line-height:50px;} } @media(max-width:640px){ .captionBox2{padding:15px;} .captionBox2 .couponBox{padding-right:90px; } .captionBox2 .couponBox input[type="text"]{height:40px !important; } .captionBox2 .couponBox .lookUpBtn{width:90px; height:40px; font-size:16px; line-height:40px;} } /* 월별학습현황 */ #contents .shortSearch{width:100%; margin:40px 0 20px; font-size:0; text-align:right; } #contents .shortSearch > span{display:inline-block; font-size:16px; padding:0 15px 0 8px; line-height:45px; } /* 결제내역 */ #contents .amountPay{position:relative; width:100%; padding:20px; font-size:18px; background:#f5f5f5; } #contents .amountPay:after{content:""; display:block; clear:both;} #contents .amountPay span{font-size:18px;} #contents .amountPay span.txt{float:left; } #contents .amountPay span.pay{float:right; } @media(max-width:1080px){ /* 결제내역 */ #contents .amountPay{padding:15px; font-size:16px; } #contents .amountPay span{font-size:16px;} } @media(max-width:640px){ /* 결제내역 */ #contents .amountPay{padding:10px; font-size:14px; } #contents .amountPay span{font-size:14px;} } /* 전환가능 포인트 */ #contents .totalPoint{width:100%; margin-bottom:35px; padding:20px 0; font-size:18px; text-align:center; background:#f5f5f5;} .captionBox2 .left{float:left; } .captionBox2 .left .tit{font-size:24px; font-weight:600; } .captionBox2 .left p{font-size:16px; font-weight:300; } .captionBox2 .right{float:right;} .captionBox2 .right span{display:inline-block; vertical-align:middle; } .captionBox2 .mileageBox{position:relative; padding-right:380px;} .captionBox2 .mileageBox .availableP{width:auto; padding:0; font-size:45px; background:none;} .captionBox2 .mileageBox .lookUpBtn{width:340px;} .captionBox2 .availableP{padding-right:45px; font-size:35px; font-weight:300; background:url("/template/1/type1/images/arrowBig1.png") 98% center no-repeat;} .captionBox2 .availableP span{font-weight:600; vertical-align:top;} .captionBox2 .pointInputBox{position:relative; padding-right:220px; font-size:0; width:490px; background:#fff; } .captionBox2 .pointInputBox .t{font-size:35px; font-weight:300; } .captionBox2 .pointInputBox #cyber{width:calc(100% - 24px); height:65px; font-size:35px; color:#0071d0; text-align:right; border:none;} .captionBox2 .lookUpBtn{top:0; right:0; width:220px; height:65px; font-size:24px; line-height:65px; background:#00abe8;} @media(max-width:1080px){ #contents .totalPoint{padding:15px 0; font-size:16px;} .captionBox2 .left{float:none; width:100%; margin-bottom:15px; } .captionBox2 .left .tit{font-size:20px;} .captionBox2 .left p{font-size:14px;} .captionBox2 .right{float:none; width:100%; } .captionBox2 .availableP{width:150px; padding-right:25px; font-size:25px; -webkit-background-size:28px; background-size:28px;} .captionBox2 .pointInputBox{width:calc(100% - 155px); padding-right:180px;} .captionBox2 .pointInputBox .t{font-size:25px;} .captionBox2 .pointInputBox #cyber{height:50px; font-size:25px;} .captionBox2 .lookUpBtn{position:absolute; width:180px; height:50px; font-size:18px; line-height:50px; } .captionBox2 .mileageBox{padding:0; height:auto;} .captionBox2 .mileageBox .availableP{float:left; font-size:35px;} .captionBox2 .mileageBox .lookUpBtn{position:relative; float:right; margin:5px 0 0 0; width:190px;} } @media(max-width:640px){ #contents .totalPoint{padding:10px 0; font-size:14px;} .captionBox2 .left .tit{font-size:18px;} .captionBox2 .availableP{float:none; width:100%; padding-right:0; padding-bottom:10px; font-size:20px; background: none;} .captionBox2 .pointInputBox{width:100%; padding-right:130px; } .captionBox2 .pointInputBox .t{font-size:0;} .captionBox2 .pointInputBox #cyber{width:100%; height:40px; padding:0 10px; font-size:20px;} .captionBox2 .lookUpBtn{width:130px; height:40px; font-size:14px; line-height:40px; } .captionBox2 .mileageBox .availableP{font-size:25px;} .captionBox2 .mileageBox .lookUpBtn{margin:0; width:140px;} } /* 게시판 */ #contents ul.noticeList{width:100%; margin-bottom:45px; } #contents ul.noticeList:after{content:""; display:block; clear:both;} #contents ul.noticeList > li{position:relative; float:left; width:32%; margin-left:1%; margin-bottom:12px; padding:25px; border:1px solid #ccc; } #contents ul.noticeList > li > input[type="checkbox"]{position:absolute; top:30px; right:25px; } #contents ul.noticeList > li:before{content:""; display:block; position:absolute; top:-1px; left:0; width:100%; height:2px; background:#363636;} #contents ul.noticeList > li .topCap{position:relative; width:100%; padding-bottom:10px; } #contents ul.noticeList > li .topCap span{display:inline-block; position:relative; padding:0 14px 0 12px; font-size:16px; color:#666; } #contents ul.noticeList > li .topCap span:first-child{padding-left:0; } #contents ul.noticeList > li .topCap span:after{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:15px; margin-top:-7.5px; background:#ccc;} #contents ul.noticeList > li .topCap span:last-child:after{display:none; } #contents ul.noticeList > li .title{height:55px; font-size:18px; font-weight:500; } #contents ul.noticeList > li .botCap{position:relative; width:100%; padding-bottom:10px; } #contents ul.noticeList > li .botCap span{display:inline-block; position:relative; padding:0 14px 0 12px; font-size:16px; color:#666; } #contents ul.noticeList > li .botCap span:first-child{padding-left:0; } #contents ul.noticeList > li .botCap span:after{content:""; display:block; position:absolute; top:50%; right:0; width:2px; height:2px; margin-top:-1px; background:#ccc;} #contents ul.noticeList > li .botCap span:last-child:after{display:none; } /* 반응게시판 */ .notice_list01{display:table; width:100%; table-layout:fixed; margin-bottom:35px; border-collapse:collapse; border-spacing:0;} .notice_list01.noMargin{margin:0;} .notice_list01 > ul{display:table-row; } .notice_list01 > ul > li{display:table-cell; position:relative; text-align:center; padding:20px 0; font-size:18px; text-align:center; vertical-align:middle; word-wrap: break-word; border-bottom:1px solid #c4c4c4;} .notice_list01 ul.thead > li{display:table-cell; font-weight:400; border-top:1px solid #c4c4c4; border-bottom:2px solid #000;} .notice_list01 ul.thead > li:after{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:18px; margin-top:-9px; background:#dbdbcb;} .notice_list01 ul.thead > li:last-child:after{display:none;} .notice_list01 ul.thead > li input[type="checkbox"]{margin-right:8px;} .notice_list01 ul.tbody > li{font-weight:300; } .notice_list01 ul.tbody > li input[type="checkbox"]:not(".noA"){position:absolute; top:28px; left:5px; } .notice_list01 li.left{padding-left:35px; text-align:left; } .notice_list01 li.left.left_center{text-align:center; padding-left:0; } .notice_list01 ul.tbody li.m_block{display:none !important;} .notice_list01 ul.tbody li.m_block:after{display:none; } /* 20200703 mr 추가 */ .notice_list01 ul.mov_category{} .notice_list01 ul.mov_category li{position:relative; padding-bottom:40px; font-size:20px; font-weight:500; font-style:italic; color:#006290 !important; } .notice_list01 ul.mov_category li:last-child{background-image: url("/template/resp/image/board_icon_arr.png"); background-position:center 24px; background-repeat: no-repeat;} .notice_list01 ul.mov_category li.left{padding-left:10px; } .notice_list01 ul.mov_category li:before{content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:20px; background-color: #f6f6f6;} @media(max-width:1080px){ .notice_list01 ul.mov_category{background-position:calc(100% - 55px) 20px;} .notice_list01 ul.mov_category li{padding-bottom:30px; font-size:18px; } } @media(max-width:640px){ .notice_list01 ul.mov_category{position:relative; background-image: url("/template/resp/image/board_icon_arr.png"); background-position:calc(100% - 20px) 12px; background-repeat: no-repeat; } .notice_list01 ul.mov_category li:last-child{background: none;} .notice_list01 ul.mov_category:after{content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:12px; background-color: #f6f6f6;} .notice_list01 ul.mov_category li{display:inline-block !important; } .notice_list01 ul.mov_category li:before, .notice_list01 ul.mov_category li:after{display:none !important; } } .notice_list01.freepass_target{display:block; } .notice_list01.freepass_target .packageProg{margin:0; padding:0; background-color: #f8f8f8;} .notice_list01.freepass_target .packageProg li{padding:15px; } .notice_list01.freepass_target .packageProg li a{color:#666; } .notice_list01.freepass_target > ul.thead, .notice_list01.freepass_target > ul.tbody{display:table; width:100%; table-layout:fixed; border-collapse:collapse; border-spacing:0;} .notice_list01.freepass_target > ul.thead li, .notice_list01.freepass_target > ul.tbody li{display:table-cell; } .notice_list01.freepass_target .col_01{} .notice_list01.freepass_target .col_02{width:230px;} .notice_list01.freepass_target .col_03{width:60px;} .notice_list01.freepass_target span.progressN{top:50%; width:8%; -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); transform: translate(0,-50%); } .notice_list01.freepass_target ul.tbody.active img.arrow_active{-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .paymentArea .notice_list01 ul.tbody > li.left{padding-left:5px;} table .top{vertical-align:top;} .notice_list01 .left.chk{padding-left:50px;} .notice_list01 .left a{display:inline-block; width:auto; max-width:90%; margin-left:8px; vertical-align:middle; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .notice_list01 .packageP{width:100%; position:relative; } .notice_list01 .packageP a{max-width:80%;} .notice_list01 span.progressN{display:block; position:absolute; top:0; right:0; width:14%; text-align:center; } .notice_list01 .left a.noH{text-overflow:inherit; white-space:inherit; overflow:inherit;} .notice_list01 .left a:hover{text-decoration:underline;} .notice_list01 .imgT{display:inline-block; width:145px; max-width:100%; /* height:110px; */ vertical-align:middle; } .notice_list01 .imgT img{display:block; width:auto; max-width:100%; /* height:100%; */ margin:0 auto; } .notice_list01 .tit{display:inline-block; width:calc(100% - 168px);} .notice_list01 .pay_way{display:block; } .no_list{width:100%; margin-top:-35px; margin-bottom:35px; padding:20px 0; font-size:18px; text-align:center; border-bottom:1px solid #c4c4c4; } @media(max-width:1080px){ .notice_list01{margin-bottom:25px;} .notice_list01 ul > li{padding:15px 5px; font-size:16px;} .notice_list01 ul.packageProg > li{padding:0 5px; } .notice_list01 ul.thead > li:after{height:16px; margin-top:-8px;} .notice_list01 ul.thead > li input[type="checkbox"]{margin-right:6px;} /* .notice_list01 ul.tbody > li input[type="checkbox"]:not(".noA"){top:28px; left:5px; } 위치파악후 수정 */ .notice_list01 ul.tbody > li.left{padding-left:15px;} .paymentArea .notice_list01 ul.tbody > li.left{padding-left:5px;} .notice_list01 .left.chk{padding-left:35px;} .no_list{margin-top:-25px; margin-bottom:25px; padding:15px 0; font-size:16px;} .notice_list01 .imgT{width:125px; } .notice_list01 .tit{width:calc(100% - 146px);} } @media(max-width:640px){ .m_hide{display:none !important; } .notice_list01{border-top: 2px solid #000;} .notice_list01 ul.thead{display:none; } .notice_list01 ul.tbody{display:block; padding:12px 0; border-bottom:1px solid #c4c4c4; } .notice_list01 ul.tbody > li{display:inline-block; *display:inline; *zoom:1; padding:0 12px 2px 0; font-size:14px; color:#666; border-bottom:none; } .notice_list01 ul.tbody > li:after{content:""; display:block; position:absolute; top:50%; right:3px; width:1px; height:12px; margin-top:-6px; background-color: #b9b9b9; } .notice_list01 ul.tbody > li:last-child:after{display:none; } .notice_list01 ul.tbody li.m_no_bullet:after{display:none;} .notice_list01 ul.tbody li.left{display:block; padding:0 0 8px 0; font-size:16px; font-weight:500; color:#000;} .notice_list01 li.left.left_center{text-align:left; } .notice_list01 ul.tbody li.left:after{display:none; } .notice_list01 ul.tbody li.left a{margin-left:0; font-size:16px; font-weight:500; color:#000; } .notice_list01 ul.tbody li.bold_tit{font-weight:600; } .notice_list01 ul.tbody li.bold_tit:after{display:none; } .notice_list01 ul.tbody li.m_block{display:block !important;} .notice_list01 ul.tbody li.progress{display:none; } .notice_list01 ul.tbody li.txt_btn{display:block !important; padding:0; text-align:left; } .notice_list01 ul.tbody li.txt_btn a{width:auto; min-width:inherit} .notice_list01 .left.chk input[type="checkbox"]{position:absolute; top:-5px; left:-5px;} .notice_list01.wish_notice_list{border-top:none; font-size:0; } .notice_list01.wish_notice_list ul.tbody{display:inline-block; *display:inline; *zoom:1; width:calc(100% / 2 - 10.01px); margin:0 5px 15px; padding:10px; vertical-align:top; border:1px solid #c4c4c4; } .notice_list01.wish_notice_list ul.tbody li{display:block; padding:0; } .notice_list01.wish_notice_list ul.tbody li.price{padding:20px 0 5px; font-size:18px; color:#d70000; font-weight:500; text-align:right; } .notice_list01.wish_notice_list ul.tbody li:after{display:none; } .notice_list01.wish_notice_list .quantity_change{width:100%; margin-top:5px;} .notice_list01.order_notice_list ul.tbody li.price{padding-top:4px; } .notice_list01.order_notice_list ul.tbody li.num{position:relative; margin:10px 0 0 0; padding:0 0 0 30px; font-size:14px; color:#333; text-align:left; } .notice_list01.order_notice_list ul.tbody li.num:before{content:"수량"; display:block; position:absolute; top:0; left:0; font-size:14px; font-weight:500; color:#333; } .notice_list01 .imgT{width:100%; margin-bottom:10px; } .notice_list01 .tit{width:100%;} .notice_list01 .pay_way{display:inline-block; margin-left:8px; } .no_list{/* border-top: 2px solid #000; */padding:15px 0; font-size:14px;} .m_inline{display:inline-block; *display:inline; *zoom:1; margin-left:5px; } .block_ele{display:block !important; } .block_ele.btn_box{display:block !important; padding:5px 0 0 0 !important; font-size:0 !important; } .block_ele.btn_box a{display:inline-block; *display:inline; *zoom:1; width:calc(100% / 2 - 5.01px); margin:0 2.5px; } .division_type{width:76px; padding:2px 10px; font-size:14px;} .notice_list01.notice_list02 ul.tbody li:after{display:none;} .notice_list01.notice_list02 ul.tbody li.left{font-weight:400; color:#444;} .notice_list01.notice_list02 ul.tbody li.m_right{float:right;} .notice_list01.freepass_target ul.thead{display:none; } .notice_list01.freepass_target ul.tbody{display:block; padding:12px 0; border-bottom:1px solid #c4c4c4; } .notice_list01.freepass_target ul.tbody li{display:inline-block; *display:inline; *zoom:1; padding:0 12px 2px 0; font-size:14px; color:#666; border-bottom:none; } .notice_list01.freepass_target ul.tbody li.left{display:block; padding:0 0 8px 0; font-size:16px; font-weight:500; color:#000;} .notice_list01.freepass_target .col_01{} .notice_list01.freepass_target .col_02{width:auto;} .notice_list01.freepass_target .col_03{width:auto;} } @media(max-width:375px){ .notice_list01.wish_notice_list ul.tbody{width:100%; margin:0 0 15px;} } /* 게시판 리스트 댓글 표시 */ .comment_cntA{color:rgb(231, 76, 60); margin-left:2px;} /* 게시판 상세 */ #contents .starScore{padding:3px 0 0 0; font-size:11px; color:#d70b0b; } #contents .starScore .scoreBg{display:inline-block; position:relative; top:2px; width:84px; height:15px; margin-right:5px; background:url("/template/1/type1/images/starScore_off.gif") 0 0 no-repeat; } #contents .starScore .scoreOn{display:block; position:absolute; top:0; left:0; width:84px; height:15px; background:url("/template/1/type1/images/starScore_on.gif") 0 0 no-repeat;} #contents .tableview{width:100%;} #contents .tableview .top{position:relative; padding:20px 0; font-size:18px; border-top:1px solid #c4c4c4; border-bottom:2px solid #000; } #contents .tableview .top .title{width:100%; padding-left:30px; } #contents .tableview .top .info{width:100%; text-align:right; } #contents .tableview .top .info:after{content:""; display:block; clear:both;} #contents .tableview .top .info > span{display:inline-block; }/*float:left; */ #contents .tableview .top .info > div{position:relative; display:inline-block; *display:inline; *zoom:1; padding:0 15px; font-size:16px; font-weight:300; }/*float:left; */ #contents .tableview .top .info > div:after{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:14px; margin-top:-7px; background:#ccc;;} #contents .tableview .top .info > div:last-child{padding-right:0;} #contents .tableview .top .info > div:last-child:after{display:none; } #contents .tableview .top .info > div span.tit{margin-right:8px; } #contents .tableview .viewArea{padding:30px; font-size:16px; font-weight:300; line-height:24px; background:#fafafa; border-bottom:1px solid #c4c4c4; } #contents .tableview .viewArea img{display:inline-block; width:auto !important; max-width:100%; height:auto !important; } #contents .tableview .viewArea .cont{/* min-height:500px; */} #contents .tableview .viewArea .files_div .files{margin-top:0px;} #contents .noticeBtnArea{width:100%; margin-top:25px; margin-bottom:100px; } #contents .noticeBtnArea:after{content:""; display:block; clear:both;} #contents .noticeBtnArea > span{display:block; font-size:0; } #contents .noticeBtnArea .left{float:left; } #contents .noticeBtnArea .right{float:right; } #contents .posList{width:100%; margin-bottom:20px; border-top:1px solid #000; } #contents .posList > div{width:100%; padding:20px 0; border-bottom:1px solid #c4c4c4; } #contents .posList > div:after{content:""; display:block; clear:both;} #contents .posList p{float:left; font-size:18px; } #contents .posList p.tit{position:relative; width:118px; padding:0 40px 0 24px; font-weight:400; } #contents .posList p.tit:after{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:22px; margin-top:-11px; background:#ccc;} #contents .posList p.txt{width:calc( 100% - 118px ); padding:0 12px; font-weight:300; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } @media(max-width:1080px){ /* 게시판 상세 */ /* #contents .starScore .scoreBg{display:inline-block; position:relative; top:2px; width:84px; height:15px; margin-right:5px; background:url("/template/1/type1/images/starScore_off.gif") 0 0 no-repeat; } #contents .starScore .scoreOn{display:block; position:absolute; top:0; left:0; width:84px; height:15px; background:url("/template/1/type1/images/starScore_on.gif") 0 0 no-repeat;} 위치 확인후 작업 */ #contents .tableview .top{min-height:inherit; padding:15px; font-size:16px; font-weight:500; color:#000;} #contents .tableview .top .title{padding-left:0; } #contents .tableview .top .info{position:relative; top:0; right:0; max-width:inherit; text-align:left; } #contents .tableview .top .info > div{padding:0 15px 0 0; font-size:14px; } #contents .tableview .top .info > div:after{right:8px;} #contents .tableview .viewArea{padding:15px; font-size:14px;} #contents .tableview .viewArea .iframe_view{position:relative; width:70%; padding-top:38%; } #contents .tableview .viewArea .iframe_view iframe{position:absolute; top:0; left:0; width:100%; height:100%; object-fir:cover;} #contents .noticeBtnArea{margin-top:15px; margin-bottom:50px; } #contents .noticeBtnArea:after{content:""; display:block; clear:both;} #contents .noticeBtnArea > span{display:block; font-size:0; } #contents .posList > div{padding:15px 0;} #contents .posList p{font-size:16px; } #contents .posList p.tit{width:80px; padding:0 20px 0 14px;} #contents .posList p.tit:after{height:14px; margin-top:-7px;} #contents .posList p.txt{width:calc( 100% - 80px ); } } @media(max-width:640px){ #contents .tableview .viewArea .iframe_view{width:100%; padding-top:56%; } #contents .noticeBtnArea .left{display:none;} #contents .noticeBtnArea .right{ width:100%; } #contents .noticeBtnArea .right .sBtn{width:100%} #contents .posList > div{padding:10px 0;} #contents .posList p{font-size:14px; } } /* 댓글달기 */ #contents .commentBox{width:100%; margin-bottom:54px; padding:45px 0; background:#fafafa; } #contents .commentBox#comment_write{border-top:1px solid #000; } /*#contents span.reply .commentBox,#contents span.edit .commentBox{border-top:0px;margin-bottom:0px;}*/ #contents .commentIn{position:relative; width:95%; height:52px; margin:0 auto; padding:0 126px 0 0; } #contents .commentList .commentIn{width:100%; } #contents .commentIn textarea{width:100%; height:100%; padding:13px 12px; resize:none; font-family:"NotoSansKR", sans-serif; vertical-align:top; background:#fff; border:1px solid #ccc; border-right:none; } #contents .commentIn .commentB{position:absolute; top:0; right:0; width:126px; height:100%; font-weight:300; border:1px solid #ccc; border-left:none; line-height:50px;} #contents .commentIn .commentB span{position:relative; z-index:10; font-size:100%; color:#666; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } #contents .commentIn .commentB:after{content:""; display:block; position:absolute; top:0; left:0; width:0; height:100%; background:#00abe8; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } #contents .commentIn .commentB.focus:after{width:100%;} #contents .commentIn .commentB.focus span{color:#fff;} #contents .comment_info{width:95%; margin:0 auto 15px; font-size:0; } #contents .comment_info label{margin-right:10px; font-size:18px; vertical-align:middle; } #contents .comment_info img{vertical-align:middle; height:50px;} @media(max-width:1080px){ #contents .commentBox{margin-bottom:30px; padding:15px 0;} #contents .commentIn{padding:0 100px 0 0; height:42px;} #contents .commentIn textarea{padding:10px 12px; } #contents .commentIn .commentB{min-width:100px; width:100px; line-height:40px;} } @media(max-width:640px){ #contents .comment_info span.box{display:block; margin:5px 0; } } /* 댓글리스트 */ #contents .commentListBox{width:100%; background:#fafafa; } #contents .commentList{width:100%; } #contents .commentList.depth_0{border-top:1px solid #000; } #contents .commentList.depth_0 .commentIn{width:95%; height:77px; padding-bottom:25px; } #contents .commentList.depth_0 .commentIn .commentB{height:calc(100% - 25px); } #contents .commentList.depth_0 > dd{padding-top:25px;} #contents .commentList.depth_0 > dd:after, #contents .commentList.depth_0 > dd:before{display:none; } #contents .commentList.depth_1 > dd{padding-left:30px;} #contents .commentList.depth_2 > dd{padding-left:60px;} #contents .commentList.depth_3 > dd{padding-left:90px;} #contents .commentList.depth_4 > dd{padding-left:120px;} #contents .commentList.depth_5 > dd{padding-left:150px;} #contents .commentList > dd{position:relative; } #contents .commentList > dd:after{content:""; display:block; position:absolute; top:0; left:25px; width:calc(100% - 50px); height:1px; background-color: #ccc;} #contents .commentList > dd:before{content:""; display:block; position:absolute; top:50px; left:25px; width:calc(100% - 50px); height:1px; border-bottom:1px dotted #cecece;} #contents .commentList > dt{width:100%; background:#fff; border-bottom:1px solid #c4c4c4; } #contents .commentList dt{position:relative; padding:14px 220px 14px 30px; } #contents .commentList dt > span{display:block; } #contents .commentList dt span.writer{width:100%; font-size:16px; } #contents .commentList dt span.writerBtn{position:absolute; top:14px; right:0; font-size:0; } #contents .commentList > dt span.writerBtn{right:30px;} #contents .commentList dt span.writerBtn a{display:inline-block; position:relative; padding:0 18px; font-size:14px; font-weight:100; } #contents .commentList dt span.writerBtn a:after{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:12px; margin-top:-6px; background:#d3d3d3;} #contents .commentList dt span.writerBtn a:last-child{padding-right:0;} #contents .commentList dt span.writerBtn a:last-child:after{display:none; } #contents .commentList dd{padding:0 25px 20px; font-size:16px; font-weight:300; line-height:20px; } #contents .commentList dd p.incomm{font-size:16px; font-weight:300; line-height:20px;} #contents .commentList dd dl{padding-top:25px;} #contents .commentList dd dl dt{background-image:url("/template/1/type1/images/answer.png"); background-position: left 18px; background-repeat: no-repeat; } #contents .commentList dd dl dd{padding:20px 15px;} @media(max-width:1080px){ /* 댓글리스트 */ #contents .commentList.depth_0 .commentIn{height:66px; } #contents .commentList.depth_0 > dd{padding-top:15px;} #contents .commentList.depth_1 > dd{padding-left:20px;} #contents .commentList.depth_2 > dd{padding-left:24px;} #contents .commentList.depth_3 > dd{padding-left:28px;} #contents .commentList.depth_4 > dd{padding-left:32px;} #contents .commentList.depth_5 > dd{padding-left:34px;} #contents .commentList > dd:after{left:15px; width:calc(100% - 30px);} #contents .commentList > dd:before{top:56px; left:15px; width:calc(100% - 30px);} #contents .commentList dt{padding:8px 13px;} #contents .commentList dt span.writer{font-size:14px; } #contents .commentList dt span.writerBtn{position:relative; top:0; text-align:right; } #contents .commentList > dt span.writerBtn{right:0;} #contents .commentList dt span.writerBtn a{padding:0 12px; font-size:13px;} #contents .commentList dt span.writerBtn a:after{height:12px; margin-top:-6px;} #contents .commentList dd{padding:0 15px 10px; font-size:14px;} #contents .commentList dd p.incomm{font-size:14px;} #contents .commentList dd dl{padding-top:0;} #contents .commentList dd dl dt{background-position: left 12px; -webkit-background-size:10px; background-size:10px; } #contents .commentList dd dl dd{padding:10px;} } /* FAQ */ #contents dl.questionsList{width:100%; border-top:1px solid #ccc; } #contents dl.questionsList dt{position:relative; width:100%; padding:18px 70px; font-size:18px; color:#000; cursor: pointer ;border-bottom:1px solid #ccc; font-weight:300; } #contents dl.questionsList dt:before{content:"Q"; display:block; position:absolute; top:18px; left:40px; font-size:18px; font-weight:600; color:#db0b37} #contents dl.questionsList dt:after{content:""; display:block; position:absolute; top:50%; right:40px; width:12px; height:12px; margin-top:-6px; background-image: url("/template/1/type1/images/on01.png"); background-position: center center; background-repeat: no-repeat; -webkit-background-size: 100%; background-size:100%;} #contents dl.questionsList dt.active:after{background-image:url("/template/1/type1/images/off01.png");} #contents dl.questionsList dt span.num{display:inline-block; width:36px; margin-right:5px; text-align:right; } #contents dl.questionsList dd{display:none; padding:20px 70px; font-size:16px; font-weight:300; line-height:24px; color:#555; background:#f8f8f8; border-bottom:1px solid #ccc; } #contents dl.questionsList .noticeBtnArea{margin-bottom:15px;} #contents dl.questionsList div.item{position:relative;} #contents dl.questionsList .payRadio{position:absolute;top:20px;left:0px;z-index:100; } @media(max-width:1080px){ /* FAQ */ #contents dl.questionsList dt{padding:18px 40px; font-size:16px; } #contents dl.questionsList dt:before{left:20px; font-size:16px; } #contents dl.questionsList dt:after{right:15px;} #contents dl.questionsList dt span.num{ width:20px;} #contents dl.questionsList dd{padding:15px 30px; font-size:14px;} #contents dl.questionsList .noticeBtnArea{margin-bottom:0;} /* #contents dl.questionsList .payRadio{top:20px;} 확인후 작업 */ } @media(max-width:640px){ /* FAQ */ #contents dl.questionsList dt{padding:14px 30px; font-size:15px; } #contents dl.questionsList dt:before{top:14px; left:10px; font-size:15px; } #contents dl.questionsList dt:after{right:10px;} } /* 강의상세 */ #contents .lectureViewTop{width:100%; margin-bottom:50px; padding-top:20px; border-top:2px solid #000; } #contents .lectureViewTop:after{content:""; display:block; clear:both;} #contents .lectureViewTop .sampleVideo{position:relative; float:left; width:50%; padding-top:28%;} #contents .lectureViewTop .sampleVideo > img, #contents .lectureViewTop .sampleVideo > iframe{display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; } #contents .lectureViewTop .viewBuyInfo{float:right; width:48%; } #contents .viewBuyInfo .viewInfo{width:100%;} #contents .viewBuyInfo .viewInfo dt{width:100%; padding:18px; font-size:24px; background:#f3f3f3; } #contents .viewBuyInfo .viewInfo dd{width:100%; padding:15px 0; } #contents .viewBuyInfo .viewInfo dd ul{position:relative; z-index:10; width:100%; height:auto; max-height:120px; overflow-y:auto; } #contents .viewBuyInfo .viewInfo dd ul > li{position:relative; font-size:16px; font-weight:300; } #contents .viewBuyInfo .viewInfo dd ul > li:last-child{margin-bottom:0 !important; } #contents .viewBuyInfo .viewInfo dd.texB{border-bottom:2px solid #ccc;} #contents .viewBuyInfo .viewInfo dd.texB ul > li{margin-bottom:10px; padding-left:72px; } #contents .viewBuyInfo .viewInfo dd.texB ul > li span.tit{display:block; position:absolute; top:0; left:0; width:72px; font-size:100%; } #contents .viewBuyInfo .viewInfo dd.priceB{border-bottom:1px solid #333;} #contents .viewBuyInfo .viewInfo dd.priceB ul{min-height:114px;} #contents .viewBuyInfo .viewInfo dd.priceB ul > li{margin-bottom:18px; } #contents .viewBuyInfo .viewInfo dd.priceB ul > li:after{content:""; display:block; clear:both; } #contents .viewBuyInfo .viewInfo dd.priceB label{display:inline-block; float:left; position:relative; padding-left:35px; font-size:100%; } #contents .viewBuyInfo .viewInfo dd.priceB input[type="checkbox"]{position:absolute; top:6px; left:0; } #contents .viewBuyInfo .viewInfo dd.priceB span.price{display:inline-block; float:right; font-size:100%; color:#d50000; text-align:right;} #contents .viewBuyInfo .viewInfo dd.priceB span.price span.delspan{font-size:12px; color:#0071d0;} #contents .viewBuyInfo .viewInfo dd.priceB span.price span.bold{font-weight:600; } #contents .viewBuyInfo .allPrice{position:relative; width:100%; padding:16px 28px 35px; font-size:20px; font-weight:500; } #contents .viewBuyInfo .allPrice span.price{display:block; position:absolute; top:10px; right:0; width:100%; padding-right:25px; padding-left:140px; font-size:30px; font-weight:600; color:#d50000; text-align:right; line-height:40px; } @media(max-width:1080px){ /* 강의상세 */ #contents .lectureViewTop{margin-bottom:40px; padding-top:15px;} #contents .lectureViewTop .sampleVideo{float:none; width:800px; max-width:100%; margin:0 auto 35px; padding-top:43%; } #contents .lectureViewTop .viewBuyInfo{float:none; width:100%; } #contents .viewBuyInfo .viewInfo dt{padding:15px; font-size:20px; } #contents .viewBuyInfo .viewInfo dd ul{max-height:inherit; overflow-y:inherit; } #contents .viewBuyInfo .viewInfo dd.priceB ul{min-height:inherit;} #contents .viewBuyInfo .viewInfo dd.priceB ul > li{margin-bottom:15px; } #contents .viewBuyInfo .allPrice{padding:16px 20px 20px; font-size:18px; } #contents .viewBuyInfo .allPrice span.price{padding-right:15px; padding-left:120px; font-size:25px; line-height:38px; } } @media(max-width:640px){ #contents .lectureViewTop{margin-bottom:20px;} #contents .lectureViewTop .sampleVideo{width:100%; margin:0 auto 15px; padding-top:55%; } #contents .viewBuyInfo .viewInfo dt{padding:12px; font-size:18px; } #contents .viewBuyInfo .viewInfo dd ul > li{font-size:14px;} #contents .viewBuyInfo .viewInfo dd.texB ul > li{padding-left:68px;} #contents .viewBuyInfo .viewInfo dd.texB ul > li span.tit{width:65px;} #contents .viewBuyInfo .viewInfo dd.priceB label{padding-left:28px;} } /* 강의상세탭 */ #contents ul.viewTabs{width:100%; margin-left:1px; margin-bottom:15px; } #contents ul.viewTabs:after{content:""; display:block; clear:both;} #contents ul.viewTabs li{float:left; position:relative; z-index:100; display:table; width:calc(100% / 4 + 0.99px); margin-left:-1px; margin-bottom:-1px; border:1px solid #ccc; } #contents ul.viewTabs li a{display:table-cell; position:relative; width:100%; height:62px; font-size:18px; color:#777; text-align:center; vertical-align:middle; background:#fff;} #contents ul.viewTabs li.active{z-index:110; border:1px solid #000;} #contents ul.viewTabs li.active a{color:#000; } @media(max-width:1080px){ #contents ul.viewTabs li a{height:55px; font-size:16px;} } @media(max-width:640px){ #contents ul.viewTabs li a{height:45px; font-size:14px;} } /* 강의상세내용 */ #contents .viewIn{width:100%; } #contents .viewIn > img{display:inline-block; width:auto; max-width:100%; } #contents .Introduce{width:calc(100% + 10px); margin-left:-10px; font-size:0; } #contents .Introduce > li{display:inline-block; *display:inline; *zoom:1; width:calc(100% / 4 - 10.01px); margin:0 0 20px 10px; border:1px solid #ccc; vertical-align:top; } #contents .Introduce > li:after{content:""; display:block; clear:both;} #contents .Introduce > li .imgD{width:100%; padding:12px; } #contents .Introduce > li .imgD a, #contents .Introduce > li .imgD img{display:block; width:100%; height:auto; } #contents .Introduce > li .infoD{width:100%; padding:12px; } #contents .Introduce > li .infoD strong{display:block; padding-bottom:10px; font-size:22px; font-weight:500; color:#00abe8;} #contents .Introduce > li .infoD a{display:block; padding-bottom:10px; font-size:22px; font-weight:500; color:#00abe8;} #contents .Introduce > li .infoD p.titCap{font-size:16px; font-weight:300; color:#666;} #contents .Introduce > li .infoD ul.book{position:relative; z-index:10; height:170px; margin:15px 0 0 0; overflow-y:auto;} #contents .Introduce > li .infoD ul.book li{position:relative; width:100%; font-size:16px; min-height:24px; margin-bottom:5px; padding-left:82px; } #contents .Introduce > li .infoD ul.book li span{display:block; position:absolute; top:0; left:0; width:68px; font-size:16px; font-weight:500; color:#0071d0; } #contents .Introduce > li .infoD ul.book li span:after{content:":"; display:block; position:absolute; top:0; right:-5px; font-size:16px; font-weight:500; color:#666;} #contents .Introduce > li .infoD .career{width:100%; max-height:72px; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; } #contents .Introduce > li .infoD .career p{font-size:16px; color:#666; } @media(max-width:1080px){ #contents .Introduce > li{width:calc(100% / 3 - 10.01px); } #contents .Introduce > li .infoD{padding:0 15px 15px ;} #contents .Introduce > li .infoD strong{font-size:18px;} #contents .Introduce > li .infoD a{font-size:18px;} #contents .Introduce > li .infoD .career{max-height:62px;} #contents .Introduce > li .infoD .career p{font-size:14px; } } @media(max-width:640px){ #contents .Introduce > li{width:calc(100% / 2 - 10.01px); } #contents .Introduce > li .infoD strong{font-size:16px;} #contents .Introduce > li .infoD a{font-size:16px;} #contents .Introduce > li .infoD p.titCap{font-size:14px;} } @media(max-width:375px){ #contents .Introduce{width:100%; margin-left:0;} #contents .Introduce > li{width:100%; margin:0 0 10px 0; } } /* 교재상세 */ #contents .bookViewTop{width:100%; margin-bottom:120px; padding-top:20px; border-top:2px solid #000; } #contents .bookViewTop:after{content:""; display:block; clear:both;} #contents .bookViewTop .sampleBook{position:relative; float:left; width:34%; padding-top:38%; text-align:center; border:1px solid #ccc; } #contents .bookViewTop .sampleBook > img{display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:auto; max-width:80%; height:auto; max-height:80%; margin:auto; object-fit:cover;} #contents .bookViewTop .bookBuyInfo{float:right; width:62%; } #contents .bookBuyInfo .viewInfo{width:100%;} #contents .bookBuyInfo .viewInfo dt{width:100%; padding:18px; font-size:24px; background:#f3f3f3; } #contents .bookBuyInfo .viewInfo dd{width:100%; padding:15px 0 10px; border-bottom:1px solid #000; } /* 원본소스 by hhd */ /*#contents .bookBuyInfo .viewInfo dd ul{position:relative; z-index:10; width:100%; height:208px; overflow-y:auto;}*/ /* 교재 상세 입력정보쪽 간격 수정 by hhd */ #contents .bookBuyInfo .viewInfo dd ul{position:relative; z-index:10; width:100%; height:361px; overflow-y:auto;} #contents .bookBuyInfo .viewInfo dd ul li{position:relative; width:100%; margin-bottom:10px; padding-left:130px; font-size:16px; } #contents .bookBuyInfo .viewInfo dd ul li span.tit{position:absolute; top:0; left:20px; font-weight:500; } #contents .bookBuyInfo .viewInfo dd ul li del{font-weight:100; } #contents .bookBuyInfo .viewInfo dd ul li ins{padding:0 10px 0 5px; background:none; } #contents .bookBuyInfo .viewInfo dd ul li ins span.bold{font-size:30px; line-height:22px; vertical-align:-3px;} #contents .bookBuyInfo .allPrice{position:relative; width:100%; padding:16px 28px 35px; font-size:20px; font-weight:500; } #contents .bookBuyInfo .allPrice span.price{display:block; position:absolute; top:10px; right:0; width:100%; padding-right:25px; padding-left:140px; font-size:30px; font-weight:600; color:#d50000; text-align:right; line-height:40px; } #contents .viewIntro{width:100%; padding:30px; font-size:18px; line-height:40px; color:#333; background:#f8f8f8; border-top:1px solid #ccc; } @media(max-width:1080px){ #contents .bookViewTop .sampleBook{float:none; width:100%; height:330px; margin-bottom:10px; padding-top:0; border:none; } #contents .bookViewTop .sampleBook > img{max-width:100%; max-height:100%; } #contents .bookViewTop .bookBuyInfo{float:none; width:100%; } #contents .bookBuyInfo .viewInfo dt{padding:15px; font-size:20px; } #contents .bookBuyInfo .viewInfo dd ul{height:auto; overflow-y:inherit; } #contents .bookBuyInfo .viewInfo dd ul li{padding-left:100px;} #contents .bookBuyInfo .viewInfo dd ul li ins span.bold{font-size:25px; line-height:22px; vertical-align:-3px;} #contents .bookBuyInfo .allPrice{padding:16px 20px 20px; font-size:18px; } #contents .bookBuyInfo .allPrice span.price{padding-right:15px; padding-left:120px; font-size:25px; line-height:38px; } } @media(max-width:640px){ #contents .bookViewTop{margin-bottom:20px;} #contents .bookBuyInfo .viewInfo dt{padding:12px; font-size:18px; } #contents .bookBuyInfo .viewInfo dd ul > li{font-size:14px;} #contents .bookBuyInfo .viewInfo dd ul li ins span.bold{font-size:22px;} #contents .bookBuyInfo .viewInfo .m_block{margin-top:5px; } } /* 영상후기 / 무료강의 */ #contents .videoTop{width:100%; margin-bottom:52px; padding:52px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; } #contents .bigVideo{position:relative; width:90%; margin:0 auto; padding-top:55%; border:1px solid #ccc; } #contents .bigVideo iframe{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fir:cover;} #contents .bigVideo a{display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fir:cover;} #contents .bigVideo a > img{display:block; width:100%; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fir:cover;} #contents ul.videoThum{width:calc(100% + 16px); margin-left:-16px;} #contents ul.videoThum:after{content:""; display:block; clear:both;} #contents ul.videoThum li{float:left; width:calc(100% / 4 - 16.01px); margin:0 0 25px 16px;} #contents ul.videoThum li > div > a, #contents ul.videoThum li > div > a > img{/*display:block; width:100%;*/} /*#contents ul.videoThum li > div > a > img{display:block; width:100%;}*/ #contents ul.videoThum li .videoMove{width:100%; margin-bottom:10px; border:1px solid #ccc;} #contents ul.videoThum li .videoMove a{display:block; position:relative; padding-top:60%; } #contents ul.videoThum li .videoMove a img{display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover;} #contents ul.videoThum li .viewMove{position:relative;} #contents ul.videoThum li .viewMove span.payRadio{position:absolute;top:-40px;left:3px;} #contents ul.videoThum li .viewMove a{display:block; width:auto; max-width:95%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #contents ul.videoThum li .viewMove input[type="checkbox"]{margin-right:5px; } @media(max-width:1080px){ /* 영상후기 / 무료강의 */ #contents .videoTop{margin-bottom:30px; padding:25px 0;} #contents .bigVideo{width:60%; padding-top:40%} } @media(max-width:640px){ /* 영상후기 / 무료강의 */ #contents .videoTop{margin-bottom:20px; padding:15px 0;} #contents .bigVideo{width:68%; padding-top:40%} #contents ul.videoThum li{width:calc(100% / 2 - 16.01px);} #contents ul.videoThum li .viewMove a{font-size:14px;} } /* 교재리스트 */ #contents .bookList{width:calc(100% + 10px); margin-left:-10px; margin-bottom:30px; font-size:0; } #contents .bookList > li{display:inline-block; *display:inline; *zoom:1; width:calc(100% / 4 - 10.01px); margin:0 0 15px 10px; vertical-align:top; border:1px solid #ccc; } #contents .bookList > li .imgD{width:100%; padding:10px; text-align:center; border-bottom:1px solid #ccc; } #contents .bookList > li .imgD a{position:relative; display:block; width:95%; margin:0 auto; padding-top:80%; vertical-align:middle; } #contents .bookList > li .imgD img{display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:auto; max-width:100%; height:auto; max-height:100%; margin:auto; object-fit:cover;} #contents .bookList > li .infoD{width:100%; padding:15px; } #contents .bookList > li .infoD strong{display:block; width:98%; padding-bottom:10px; font-size:22px; font-weight:500; color:#00abe8; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } #contents .bookList > li .infoD p.titCap{width:98%; font-size:16px; font-weight:300; color:#666; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } #contents .bookList > li .infoD ul.book{position:relative; z-index:10; margin:15px 0 0 0; } #contents .bookList > li .infoD ul.book li{position:relative; width:100%; min-height:20px; margin-bottom:5px; padding-left:100px; font-size:14px; color:#666; } #contents .bookList > li .infoD ul.book li span{display:block; position:absolute; top:0; left:0; width:90px; font-size:14px; font-weight:500; } #contents .bookList > li .infoD ul.book li span:after{content:":"; display:block; position:absolute; top:0; right:-5px; font-size:14px; font-weight:500; color:#666;} #contents .bookList > li .priceD{width:100%; padding:0 15px 15px 15px; } #contents .bookList > li .priceD .price{width:100%; text-align:right; } #contents .bookList > li .priceD .price del{display:block; font-size:16px; font-weight:300; color:#666;} #contents .bookList > li .priceD .price ins{display:block; font-size:25px; font-weight:500; line-height:42px; background:none;} #contents .bookList > li .priceD .price ins > span{font-size:35px; } @media(max-width:1080px){ #contents .bookList > li{width:calc(100% / 3 - 10.01px);} #contents .bookList > li .infoD strong{font-size:18px;} #contents .bookList > li .infoD p.titCap{font-size:14px;} #contents .bookList > li .priceD .price del{font-size:14px;} #contents .bookList > li .priceD .price ins{font-size:20px; line-height:32px; } #contents .bookList > li .priceD .price ins > span{font-size:28px; } } @media(max-width:640px){ #contents .bookList > li{width:calc(100% / 2 - 10.01px);} #contents .bookList > li .infoD{padding:10px; } #contents .bookList > li .priceD{padding:0 10px 10px 10px; } #contents .bookList > li .priceD .price del{font-size:13px;} #contents .bookList > li .priceD .price ins{font-size:18px;} #contents .bookList > li .priceD .price ins > span{font-size:24px; } } @media(max-width:375px){ #contents .bookList{width:100%; margin-left:0; } #contents .bookList > li{width:100%; margin-left:0;} #contents .bookList > li .imgD a{padding-top:65%;} } /* 선생님소개 */ #contents .teacherinfoBox{position:relative; width:100%; padding:85px 0 0 0; } #contents .teacherinfoBox .infoBox{width:100%; padding:30px 250px 0 70px; background:url("/template/1/type1/images/teacdot.gif") 0 0 repeat; } #contents .teacherinfoBox .word{font-size:35px; } #contents .teacherinfoBox dl.teachCareer{padding:40px 0 0 0;} #contents .teacherinfoBox dl.teachCareer dt{padding-bottom:32px; font-size:26px; font-weight:600; } #contents .teacherinfoBox dl.teachCareer dd{padding-bottom:70px; font-size:18px; line-height:28px; color:#666; } #contents .teacherinfoBox .imgBox{position:absolute; top:0; right:-100px; } #contents .teacherinfoBox .imgBox img{display:block; width:100%; } #contents .teacherinfoBox .imgBox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); opacity:1; -webkit-transition: all .8s; -moz-transition: all .8s; -ms-transition: all .8s; -o-transition: all .8s; transition: all .8s; } #contents .teacherinfoBox:hover .imgBox:before{height:0; opacity:0;} #contents .teacherinfoBox.right{padding-left:275px;} #contents .teacherinfoBox.right .infoBox{padding:30px 0 0 250px; } #contents .teacherinfoBox.right .imgBox{right:auto; left:-100px;} @media(max-width:1080px){ #contents .teacherinfoBox{padding:85px 15px 0 0; } #contents .teacherinfoBox .infoBox{padding:35px 350px 35px 35px; } #contents .teacherinfoBox .word{font-size:20px; } #contents .teacherinfoBox dl.teachCareer{padding:20px 0 0 0;} #contents .teacherinfoBox dl.teachCareer dt{padding-bottom:15px; font-size:20px; } #contents .teacherinfoBox dl.teachCareer dd{padding-bottom:40px; font-size:16px; } #contents .teacherinfoBox .imgBox{right:0; width:350px;} #contents .teacherinfoBox.right{padding-left:0;} #contents .teacherinfoBox.right .infoBox{padding:35px 350px 35px 35px; } #contents .teacherinfoBox.right .imgBox{left:auto; right:0; } } @media(max-width:800px){ #contents .teacherinfoBox{padding:420px 0 0 0;} #contents .teacherinfoBox .infoBox{padding:25px 0; background: none;} #contents .teacherinfoBox.right .infoBox{padding:25px 0; } #contents .teacherinfoBox .word{font-size:18px; } #contents .teacherinfoBox dl.teachCareer{padding:15px 0 0 0;} #contents .teacherinfoBox dl.teachCareer dt{padding-bottom:10px; font-size:18px; } #contents .teacherinfoBox dl.teachCareer dd{padding-bottom:15px; font-size:14px; line-height:24px;} #contents .teacherinfoBox .imgBox{top:-10px; left:50%; right:auto; width:300px; max-width:100%; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } #contents .teacherinfoBox.right .imgBox{left:50%; } } @media(max-width:640px){ #contents .teacherinfoBox dl.teachCareer dt{font-size:16px; } } /* 강의 */ #contents .lectureList{width:100%; margin-bottom:35px; padding-top:20px; border-top:2px solid #000; } #contents .lectureList.view{border-top:1px solid #ccc; } #contents .lectureList > ul{width:calc(100% + 10px); margin-left:-10px; font-size:0;} #contents .lectureList > ul > li{position:relative; display:inline-block; *display:inline; *zoom:1; width:calc(100% / 3 - 10.01px); margin:15px 0 15px 10px; vertical-align:top; } #contents .lectureList > ul > li .topBan{position:relative; width:100%; } #contents .lectureList > ul > li .topBan > a {display:block; position:relative; width:100%; padding-top:62%;} #contents .lectureList > ul > li .topBan > a img{display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; } #contents .lectureList > ul > li .topBan .overBtn{position:absolute; bottom:19px; left:0; font-size:0; width:100%; text-align:center; opacity:0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } #contents .lectureList > ul > li:hover .overBtn{opacity:1; } #contents .lectureList > ul > li .topBan .overBtn a{display:inline-block; position:relative; top:0; width:170px; max-width:45%; height:50px; margin:0 2.5px; font-size:18px; font-weight:500; color:#fff; line-height:48px; text-align:center; vertical-align:top;} #contents .lectureList > ul > li .topBan .overBtn a:hover{top:-5px;} #contents .lectureList > ul > li .botInfo{width:100%; padding:20px 26px; border:1px solid #ccc; } #contents .lectureList > ul > li .botInfo strong.title{display:block; width:95%; margin-bottom:5px; font-size:20px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #contents .lectureList > ul > li .botInfo p.texS{width:95%; padding-bottom:8px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #contents .lectureList > ul > li .botInfo .box_condition{padding-bottom:10px;} #contents .lectureList > ul > li .botInfo .confiB{position:relative; z-index:10; width:100%; height:120px; margin-bottom:25px; font-size:16px; color:#666; overflow-y:auto; } #contents .lectureList > ul > li .botInfo .markA{margin-bottom:25px;} .markA{width:100%; font-size:0; } .markA span{display:inline-block; margin-right:5px; padding:0 8px; font-size:16px; color:#fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .markA span.col1{background-color:#0995dd;} .markA span.col2{background-color:#092795;} #contents .lectureList > ul > li .botInfo .priceB{width:100%; padding:15px 0 0 0; border-top:1px solid #e0e0e0; } #contents .lectureList > ul > li .botInfo .priceB:after{content:""; display:block; clear:both;} #contents .lectureList > ul > li .botInfo .priceB span.txt{float:left; font-size:16px; font-weight:500; } #contents .lectureList > ul > li .botInfo .priceB span.price{float:right;} #contents .lectureList > ul > li .botInfo .priceB span.price del{padding-right:5px; font-size:15px; font-weight:100; } #contents .lectureList > ul > li .botInfo .priceB span.price ins{font-size:20px; font-weight:500; color:#db0b37; background:none;} .texS{font-size:16px; font-weight:300;} @media(max-width:1080px){ #contents .lectureList > ul > li .botInfo{padding:15px;} #contents .lectureList > ul > li .botInfo strong.title{font-size:18px;} #contents .lectureList > ul > li .botInfo .priceB > span{display:block; } #contents .lectureList > ul > li .botInfo .priceB span.txt{float:none; width:100%; font-size:16px; font-weight:500; } #contents .lectureList > ul > li .botInfo .priceB span.price{float:none; width:100%; text-align:right; } #contents .lectureList > ul > li .botInfo .priceB span.price del{ font-size:14px;} #contents .lectureList > ul > li .botInfo .priceB span.price ins{font-size:18px;} .texS{font-size:14px;} } @media(max-width:800px){ #contents .lectureList > ul > li .botInfo .priceB span.price del{display:block; } } @media(max-width:640px){ #contents .lectureList > ul > li{width:calc(100% / 2 - 10.01px); } #contents .lectureList > ul > li .botInfo strong.title{font-size:16px;} #contents .lectureList > ul > li .botInfo .priceB span.txt{font-size:14px;} #contents .lectureList > ul > li .botInfo .priceB span.price del{ font-size:13px;} #contents .lectureList > ul > li .botInfo .priceB span.price ins{font-size:18px;} } @media(max-width:375px){ #contents .lectureList > ul{width:100%; margin-left:0; } #contents .lectureList > ul > li{width:100%; margin:0 0 10px 0; } } /* step */ #contents .stepArea{position:relative; width:100vw; margin-left:calc(-50vw + 50%); margin-bottom:110px; padding:64px 0 0 0; } #contents .stepArea:before{content:""; display:block; position:absolute; top:94px; left:0; width:100%; height:1px; background:#000;} #contents .stepArea:after{content:""; display:block; position:absolute; top:14px; left:0; width:100%; height:80px; background:#f8f8f8;} #contents .stepArea .stepIn{width:100%; max-width:1180px; margin:0 auto;} #contents .stepArea .stepIn:after{content:""; display:block; clear:both;} #contents .stepArea .stepIn li{position:relative; z-index:100; float:left; width:calc(100% / 3 - 0.1px); font-size:16px; text-align:center; } #contents .stepArea .stepIn.step5 li{width:20%;} #contents .stepArea .stepIn li span.num{display:block; width:60px; height:60px; margin:0 auto 8px; font-size:20px; font-weight:600; color:#fff; line-height:60px; background:#000; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; } #contents .stepArea li.active{color:#db0b37;} #contents .stepArea li.active span.num{background:#db0b37;} @media(max-width:1080px){ #contents .stepArea{margin-bottom:60px; padding:0; } #contents .stepArea:before{top:32px;} #contents .stepArea:after{display:none; } } @media(max-width:640px){ #contents .stepArea{margin-bottom:30px; } #contents .stepArea:before{top:24px;} #contents .stepArea .stepIn li{font-size:0;} #contents .stepArea .stepIn li span.num{width:46px; height:46px; font-size:15px; line-height:46px; -webkit-border-radius:23px; -moz-border-radius:23px; border-radius:23px; } } /* 장바구니/결제진행 */ #contents .paymentArea{position:relative; width:100%; min-height:850px; padding-right:420px; } #contents .choice{width:100%; margin:15px 0 0 0; font-size:16px; font-weight:500; } #contents .choice a{display:inline-block; width:60px; height:30px; margin-left:10px; font-size:12px; font-weight:500; line-height:28px; text-align:center; background:#fff; border:1px solid #000; } #contents .choice span{display:inline-block; padding-left:15px; font-size:14px; font-weight:300; color:#666;} #contents .paymentBox{position:absolute; top:0; right:0; z-index:100; width:380px; padding:20px 35px 35px 35px; background:#fff; border:5px solid #ccc; } #contents .paymentBox.move{position:fixed;} #contents .paymentBox > p.tit{padding-bottom:15px; font-size:24px; font-weight:500; border-bottom:1px solid #000; } #contents .paymentBox ul.payment{width:100%; min-height:90px;} #contents .paymentBox ul.payment li{width:100%; padding:14px 0; border-bottom:1px solid #ccc; } #contents .paymentBox ul.payment li:after{content:""; display:block; clear:both; } #contents .paymentBox ul.payment li > span{font-size:16px; font-weight:300; } #contents .paymentBox ul.payment li span.tit{float:left; margin-right:10px; padding-top:6px;} #contents .paymentBox ul.payment li span.val{float:right; text-align:right;} #contents .paymentBox ul.payment li span.val b{font-size:24px; } #contents .paymentBox .bottomA{width:100%; margin-top:60px; } #contents .paymentBox .bottomA .payPrice{width:100%;} #contents .paymentBox .bottomA .payPrice:after{content:""; display:block; clear:both;} #contents .paymentBox .bottomA .payPrice span{font-size:16px;} #contents .paymentBox .bottomA .payPrice span.tit{float:left; padding-top:12px; font-weight:600; } #contents .paymentBox .bottomA .payPrice span.val{float:right; color:#db0b37;} #contents .paymentBox .bottomA .payPrice span.val b{font-size:30px;} #contents .paymentBox .bottomA .payPrice span.val b span{font-size:100%;} #contents .paymentBox .bottomA .payB{width:100%; margin-top:30px;} #contents .paymentBox .bottomA .payB a{margin-bottom:10px;} #contents .paymentBox .bottomA .payB a:last-child{margin-bottom:0;} #contents .couponChoice{position:relative; width:220px;} #contents .couponChoice.inB{padding-right:54px;} #contents .mileage{position:relative; width:220px; padding-right:15px; background:#fff; border:1px solid #ccc; }/* padding-right:115px; 추후수정 */ #contents .mileage #od_temp_point{position:absolute; bottom:0; left:-80px; } #contents .mileage .placeH{position:absolute; top:0; right:50px; left:auto; font-size:16px; color:#666; line-height:50px;} #contents .mileage input[type="text"]{padding-left:5px; font-size:20px; font-weight:600; text-align:right; border:none;} @media(max-width:1080px){ #contents .choice span{display:block; padding-left:0; font-size:13px;} #contents .paymentArea{padding-right:0; min-height:auto;} #contents .paymentBox{position:relative; width:100%; margin:45px 0 0 0; padding:20px; } #contents .paymentBox > p.tit{padding-bottom:10px; font-size:20px; } #contents .paymentBox ul.payment li{padding:10px 0;} #contents .paymentBox ul.payment li.m_val_in span.val{width:450px;} #contents .couponChoice{width:100%;} #contents .couponChoice.inB{padding-right:54px;} #contents .paymentBox .bottomA{margin-top:30px; } #contents .paymentBox .bottomA .payB{width:calc(100% + 50px); margin:10px 0 -25px -25px;} #contents .paymentBox .bottomA .payB:after{content:""; display:block; clear:both; } #contents .paymentBox .bottomA .payB a{float:left; width:calc(100% / 2 - 0.1px); margin-bottom:0;} #contents .paymentBox .bottomA .payB a.full{float:none; width:100%;} #contents .mileage{width:100%; } #contents .mileage #od_temp_point{bottom:-18px; left:0; } } @media(max-width:640px){ #contents .paymentBox{margin:25px 0 0 0; padding:15px; } #contents .paymentBox ul.payment li > span{font-size:14px;} #contents .paymentBox ul.payment li.m_val_in span.tit{float:none; } #contents .paymentBox ul.payment li.m_val_in span.val{display:block; float:none; width:100%; margin:5px 0 0 0; } #contents .paymentBox ul.payment li span.val b{font-size:20px;} #contents .paymentBox .bottomA .payPrice span.val b{font-size:24px;} #contents .couponChoice.inB{padding-right:85px;} #contents .paymentBox ul.payment li .couponChoice select.basicS{height:40px; font-size:14px; } #contents .paymentBox ul.payment li .couponChoice .payCouoBtn{width:85px; height:40px; padding:9px 0; font-size:14px;} #contents .paymentBox .bottomA .payB{width:calc(100% + 40px); margin:10px 0 -20px -20px;} #contents .mileage input[type="text"]{font-size:16px;} } /* 환불팝업 */ .refund_bank{font-size:0 !important; } .refund_bank select{width:calc(100% / 3 - 3.51px); margin-right:5px;} .refund_bank input[type="text"]{width:calc(100% / 3 - 3.51px); margin-right:5px;} .refund_bank input[type="text"]:last-child{margin-right:0; } @media(max-width:640px){ .refund_bank select{width:100%; margin-right:0; margin-bottom:5px; } .refund_bank input[type="text"]{width:calc(100% / 2 - 2.51px); } .refund_bank input[type="text"]:last-child{margin-right:0; } } /* 이벤트 */ #contents ul.evevtList{width:100%; margin-top:20px;} #contents ul.evevtList > li{position:relative; width:100%; margin-bottom:20px; padding:25px 40px; border:1px solid #ccc; } #contents ul.evevtList > li > input[type="checkbox"]{position:absolute; top:25px; left:20px;} #contents ul.evevtList > li > a{display:block; width:100%; } #contents ul.evevtList > li:after{content:""; display:block; clear:both;} #contents ul.evevtList > li .banIn{position:relative; float:left; width:53%; /* height:150px; */ padding-top:13%;} #contents ul.evevtList > li .banIn img{display:block; position: absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover;} #contents ul.evevtList > li .txtIn{float:right; width:45%;} #contents ul.evevtList > li p.day{padding-bottom:18px; font-size:16px; font-weight:100; color:#000; } #contents ul.evevtList > li p.day b{display:inline-block; padding-right:10px; font-weight:500; color:#333; } #contents ul.evevtList > li p.title{padding-bottom:10px; font-size:22px; color:#000; max-width:95%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #contents ul.evevtList > li p.cap{font-size:14px; font-weight:100; color:#666;} #contents ul.evevtList.end > li .banIn:after{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url("/template/1/type1/images/endEvent.png") center center no-repeat; -webkit-background-size: cover; background-size:cover;} #contents ul.evevtList.end > li p{opacity:0.6;} #ui-datepicker-div .ui-datepicker-month{position:absolute; top:8px; right:38px; } .calendB{position:relative; display:inline-block; margin-right:15px; } .calendB > .ui-datepicker-trigger{position:absolute; top:50%; right:8px; margin-top:-12px;} @media(max-width:1080px){ #contents ul.evevtList > li{padding:15px 25px;} #contents ul.evevtList > li > input[type="checkbox"]{top:15px; left:8px;} #contents ul.evevtList > li p.title{font-size:18px;} #ui-datepicker-div{width:310px;} #ui-datepicker-div .ui-datepicker-month{width:45.5%;} .calendB > .ui-datepicker-trigger{width:22px; margin-top:-10px; } .calend_box{display:block; width:100%; } } @media(max-width:800px){ #contents ul.evevtList > li .banIn{float:none; width:100%; margin-bottom:15px; padding-top:25%; } #contents ul.evevtList > li .txtIn{float:none; width:100%; } } @media(max-width:640px){ #contents ul.evevtList > li{padding:15px;} #contents ul.evevtList > li .banIn{float:none; width:100%; padding-top:0; } #contents ul.evevtList > li .banIn img{position: relative; width:100%; height:auto; object-fit:inherit;} #contents ul.evevtList.end > li .banIn:before{content:"종료"; position:absolute; top:50%; left:50%; z-index:10; font-size:32px; font-weight:500; color:#fff; -webkit-transform: rotate(-35deg) translate3d(-50%, -50%, 0); -moz-transform:rotate(-35deg) translate3d(-50%, -50%, 0); -ms-transform:rotate(-35deg) translate3d(-50%, -50%, 0); -o-transform: rotate(-35deg) translate3d(-50%, -50%, 0); transform: rotate(-35deg) translate3d(-50%, -50%, 0); transform-origin: 0 0; } #contents ul.evevtList.end > li .banIn:after{background:rgba(0,0,0,0.7);} #contents ul.evevtList > li p.day{font-size:14px; } #contents ul.evevtList > li p.title{font-size:16px; } #contents ul.evevtList > li p.cap{font-size:13px;} #ui-datepicker-div{width:290px;} #ui-datepicker-div .ui-datepicker-month{width:41.7%;} .calend_box .m_block{height:5px; } .calend_box input.w150{width:180px;} .calend_box select{vertical-align:middle; } .calend_box select.basicS{width:180px;} } /* 오시는길 */ #contents .mapInfo{width:100%; margin-top:45px; padding-top:30px; border-top:1px solid #ccc; } #contents .mapInfo:after{content:""; display:block; clear:both;} #contents .mapT{float:left; width:50%; } #contents .mapT li{position:relative; width:100%; margin-bottom:8px; padding-left:65px; font-size:18px; font-weight:300;} #contents .mapT li b{position:absolute; top:0; left:0; width:60px; } #contents .tel{float:right; width:40%; font-size:18px; } #contents .tel span{padding-left:10px; font-size:50px; font-weight:600; word-wrap: break-word;} @media(max-width:830px){ #contents .mapT{float:none; width:100%; padding-bottom:15px; } #contents .tel{float:none; width:100%;} } @media(max-width:640px){ .map_iframe{height:320px;} #contents .mapInfo{margin-top:25px; padding-top:15px; } #contents .mapT{float:none; width:100%; padding-bottom:15px; } #contents .mapT li{padding-left:50px; font-size:14px;} #contents .mapT li b{width:50px; } #contents .tel{float:none; width:100%; font-size:14px; } #contents .tel span{font-size:30px;} } /* 페이징 */ .pager{width:100%; margin-bottom:45px; font-size:0; text-align:center; } .pager span{display:inline-block; } .pager a{display:inline-block; padding:0 8px; font-size:16px; font-weight:300; } .pager strong{display:inline-block; position:relative; padding:0 8px; font-size:20px; font-weight:600; color:#f02424; } .pager strong:after{content:""; display:block; position:absolute; bottom:-5px; left:0; width:100%; height:1px; background:#f02424;} .pager2{width:100%; margin-bottom:45px; font-size:0; text-align:center; } /* .pager span{display:inline-block; } */ .pager2 a{display:inline-block; margin:0 8px; font-size:16px; font-weight:300; vertical-align:middle;} .pager2 #jsPagePrev{width:28px; height:28px; font-size:0; vertical-align:12px; background:url("/template/1/type1/images/pPrev.gif") 0 0 no-repeat;} .pager2 #jsPageNext{width:28px; height:28px; font-size:0; vertical-align:12px; background:url("/template/1/type1/images/pNext.gif") 0 0 no-repeat;} .pager2 .active{display:inline-block; position:relative; padding:0 8px; font-size:20px; font-weight:600; color:#f02424; } .pager2 .active:after{content:""; display:block; position:absolute; bottom:-5px; left:0; width:100%; height:1px; background:#f02424;} .popWrap{width:500px;} /* 상태아이콘 */ .condition{margin-left:5px; padding:0 4px; font-size:14px; font-weight:600; color:#fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .condition.conIco1{background:#db0b37;} .condition.conIco2{background:#00abe8;} .condition.conIco3{background:#0071d0;} ul.snsConnect{width:100%; margin-top:14px; background:#fff; border:1px solid #ccc; border-top:3px solid #000; } ul.snsConnect li{position:relative; width:100%; padding:15px 15px 15px 120px; border-bottom:1px solid #ccc; } ul.snsConnect li span.tit{position:absolute; top:15px; left:15px; width:80px;} ul.snsConnect li span.tit a, ul.snsConnect li span.tit img{display:block; width:100%; } ul.snsConnect li .caption{font-size:14px;} .fancybox-wrap{max-width:90%; } .fancybox-inner{max-width:100%; /* height:auto !important; */ } .agree_info{width:100%; max-width:557px; padding:50px 38px; } .agree_info > h1{padding-bottom:25px; font-size:26px; font-weight:400; } .agree_info .infoin{position:relative; z-index:10; width:100%; height:400px; padding:15px; border:1px solid #ccc; overflow-y:auto; } .agree_info .infoin img{display:inline-block; width:auto; max-width:100%;} @media(max-width:640px){ ul.snsConnect{margin-top:10px;} ul.snsConnect li{padding:10px 10px 10px 90px; font-size:14px;} ul.snsConnect li span.tit{top:12px; left:10px; width:65px; } ul.snsConnect li .caption{font-size:13px;} .agree_info{max-width:100%; padding:30px 15px; } .agree_info > h1{padding-bottom:18px; font-size:20px;} .agree_info .infoin{height:300px; padding:10px; } } /*Css pattern By Kang .191002*/ .mt20{margin-top:20px;} .mt30{margin-top:30px;} .mt40{margin-top:40px;} .mt50{margin-top:50px;} .mt60{margin-top:60px;} .mt70{margin-top:70px;} .mt80{margin-top:80px;} .mt90{margin-top:90px;} .mt100{margin-top:100px;} .borerColr1{border-color:#db0b37 !important;} .borerColr2{border-color:#00abe8 !important;} .borerColr3{border-color:#0071d0 !important;} .borerColr4{border-color:#ff7200 !important;} .boderw1{border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;} .boderw2{border-top-width:2px;border-bottom-width:2px;border-left-width:2px;border-right-width:2px;} .boderw3{border-top-width:3px;border-bottom-width:3px;border-left-width:3px;border-right-width:3px;} .boderw4{border-top-width:4px;border-bottom-width:4px;border-left-width:4px;border-right-width:4px;} .boderw5{border-top-width:5px;border-bottom-width:5px;border-left-width:5px;border-right-width:5px;} .boderwT{border-top-style:solid !important;border-bottom-style:none !important;border-left-style:none !important;border-right-style:none !important;} .boderwB{border-top-style:none !important;border-bottom-style:solid !important;border-left-style:none !important;border-right-style:none !important;} .boderwL{border-top-style:none !important;border-bottom-style:none !important;border-left-style:solid !important;border-right-style:none !important;} .boderwR{border-top-style:none !important;border-bottom-style:none !important;border-left-style:none !important;border-right-style:solid !important;} .boderwA{border-top-style:solid !important;border-bottom-style:solid !important;border-left-style:solid !important;border-right-style:solid !important;} .wp100{width:100%} .wp90{width:90%} .wp80{width:80%} .wp70{width:70%} .wp60{width:60%} .wp50{width:50%} .wp40{width:40%} .wp30{width:30%} .wp20{width:20%} .wp10{width:10%} /* 수료증 */ .certificateArea{width:800px; margin:0 auto; padding:49px; border:1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .certificateArea .logo_bg{position:absolute; top:52%; left:50%; -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .certificateArea .certi_line_bg{position:absolute; top:50%; left:50%; z-index:-1; margin:-450px 0 0 -350px} .certificateArea .certificateBox{position:relative; width:100%; padding:100px 0 45px; text-align:center;} /* v.certificateArea .certificateBox:before, .certificateArea .certificateBox:after{content:""; display:block; position:absolute; left:0; width:100%; height:20px; } .certificateArea .certificateBox:before{top:0; background:url("../images/certi_top.gif") 0 0 no-repeat;} .certificateArea .certificateBox:after{bottom:0; background:url("../images/certi_bottom.gif") 0 0 no-repeat;} */ .certificateArea .certificateBox h3.tit{padding-bottom:80px; font-size:50px; font-weight:600; color:#000;} .certificateArea .certificateBox ul.certificateList{width:400px; margin:0 auto 90px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; } .certificateArea .certificateBox ul.certificateList li{position:relative; width:100%; padding:10px; font-size:18px; color:#000; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .certificateArea .certificateBox ul.certificateList li.col_line img{display:block; position:absolute; top:0; left:0; z-index:-10; width:100%; height:100%; } .certificateArea .certificateBox .basicT1{font-size:20px; padding-bottom:12px;} .certificateArea .certificateBox .capT1{padding-bottom:85px; font-size:16px; font-weight:300; color:#000; } .certificateArea .certificateBox .capT2{font-size:14px; font-weight:300; line-height:20px; color:#000; } .certificateArea .certificateBox .bottomInfo{position:relative; width:520px; margin:0 auto; text-align:center; } .certificateArea .certificateBox .bottomInfo .stamp{position:absolute; top:0; right:0; } ul.lecture_tabs{width:100%; padding:20px 0 40px 0; } ul.lecture_tabs:after{content:""; display:block; clear:both; } ul.lecture_tabs li{display:table; float:left; width:calc(100% / 5 + 0.99px); height:65px; margin:0 -1px -1px 0; border:1px solid #e6e6e6; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box;} ul.lecture_tabs li a{display:table-cell; width:100%; font-size:13px; color:#333; text-align:center; vertical-align:middle; background-color: #f8f8f8;} ul.lecture_tabs li.active a{background-image: url("/template/1/image/ico_move.png"); background-position: right bottom; background-repeat: no-repeat; -webkit-background-size: 26px 25px; background-size: 26px 25px;} @media(max-width:1080px){ ul.lecture_tabs{padding:15px 0 25px 0; } ul.lecture_tabs li{width:calc(100% / 4 + 0.99px); height:55px; } } @media(max-width:640px){ ul.lecture_tabs{padding:10px 0; } ul.lecture_tabs li{width:calc(100% / 2 + 0.99px); height:45px; } } /*200629 연장상품 기능 추가 By Kang*/ a.extend_btn { display: inline-block; padding: 2px 6px; font-size: 16px; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; color: #fff; background-color: #ff3600; } div.popup h3{padding-bottom:12px;font-size:25px;font-weight:500;font-family:"Noto Sans KR";color:#000;text-align:center;} div.popup span.close{font-size:0;width:24px;height:23px;position:absolute;top:25px;right:25px;background:url('../images/icon_general.png') no-repeat left -216px;cursor:pointer;} div.payment table.table-list{width:100%;border-top:2px solid #000;} table.table-list th{padding:17px 0;font-size:17px;line-height:1.5;color:#000;font-weight:700;background:#f9f9fa;border-bottom:1px solid #ccc;} table.table-list td{padding:16px 0;text-align:center;line-height:1.5;color:#393d44;font-size:16px;background:#fff;border-bottom:1px solid #ccc;} table.table-list td.nolist{padding:50px;} table.table-list.bort{border-top:2px solid #000;} table.table-list.left td, table.table-list .left{text-align:left;padding-left:30px;padding-right:15px;} div.payment input, div.payment select{height:35px;padding:0 10px;margin-right:4px;font-size:14px;border:1px solid #ccc; -webkit-appearance:menulist ; -moz-appearance:menulist ; appearance:menulist ; } .color-red{color:#ec1a23 !important;} div.popup div.pay-btn{margin-top:30px; text-align:center; } div.popup div.pay-btn .btn{display:inline-block; min-width:150px; height:50px; margin:0 auto; padding:0 30px; line-height:50px; font-size:16px; color:#fff; font-weight:600; text-align:center; border:1px solid #ec1e79;background:#ec1e79;} div.popup.extend ul.left-list{position:relative; bottom:-32px; width:calc(100% + 64px); margin: 0 0 0 -32px; padding:25px; background-color:#f9f9fa;;} div.popup.extend ul.left-list li{position: relative;padding-left: 10px;margin-bottom: 6px;font-size: 14px;color:#666;} div.popup.extend ul.left-list li:before{content: "";width: 4px;height: 4px;position: absolute;left:0;top:6px;background: #000; border-radius: 2px;} #loadImg{position:fixed; top:0; left:0; z-index:100; width:100%; height:100%; text-align:center; background-color:rgba(0,0,0,0.8);} #loadImg img{position:absolute; top:50%; left:50%; z-index:200; -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform:translate3d(-50%,-50%,0); transform:translate3d(-50%,-50%,0); } .footer_label{display:inline-block;width:83px;text-align:justify; text-justify: inter-word;cursor:none;} .footer_label span.blank{ display:inline-block;width:44px; } @media(max-width:1080px) { .footer_label{width:69px;} .footer_label span.blank{ width:39px; } } @media(max-width:640px) { .footer_label{width:64px;} .footer_label span.blank{ width:36px; } } /*21-03-10 섹션 추가*/ .in_Layer.resources-con{ width:100%; padding:0; } .section-resources-wrap{ width:100%; padding-top: 20px; } .brand-section{ padding-top:50px; } .section-resources-wrap .section4-content{ position: relative; background-image: url(../../../image/bg_section4.jpg); background-size: cover; background-position: center; padding-top: 50px; padding-bottom: 50px; } .section-resources-wrap .title48{ font-size: 48px; line-height: 1.2; font-weight: normal; } .section-resources-wrap .font20{ font-size: 20px; line-height: 1.8; } .section-resources-wrap .default-wrap{ overflow: hidden; position: relative; width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0px 60px; } .section-resources-wrap .col-wrap{ position: relative; margin: 0 -20px; overflow: hidden; display: flex; } .section-resources-wrap .txt-wrap .w480{ padding-top: 70px; width: 100%; max-width: 480px; } .section-resources-wrap .txt-wrap hr{ width: 98px; height: 1px; border-bottom: 1px solid #fff; border: 0; background: #D5D5D5; margin: 0; margin-bottom: 20px; } .section-resources-wrap .color-ffffff{ color: #ffffff !important; } .section-resources-wrap .img-wrap{ position: relative; padding-top: 110px; } .section-resources-wrap .img-wrap .title18.desc{ position: absolute; padding-left: 13px; top: 0px; left: 20px; z-index: 2; line-height: 1.33; font-size: 18px; text-decoration: underline; } .section-resources-wrap .img-wrap .title18.desc::after{ position: absolute; content: ''; width: 3px; height: 100%; background-color: #fff; top: 50%; left: 0; transform: translateY(-50%); } .section-resources-wrap .img-wrap .pc_img{ display:block; width: 100%; } .section-resources-wrap .img-wrap .mob_img{ display:none; width: 100%; } @media (min-width: 1280px){ .section-resources-wrap .col-lg-6{ width: 50%; } /*.section-resources-wrap .col-lg-12 { width: 100%; }*/ } @media (max-width: 1280px){ .section-resources-wrap .default-wrap{ width: 100%; padding: 0px 7.77%; } .section-resources-wrap .title48{ font-size: 38px; } .section-resources-wrap .txt-wrap .w480{ padding-top: 30px; width: 80%; max-width: 480px; float: right; } .section-resources-wrap .font20{ font-size: 16px; } .section-resources-wrap .img-wrap { padding-top: 30px; } .section-resources-wrap .img-wrap .title18.desc{ position: relative; padding-left: 13px; top: 0px; left: 0px; font-size:14.4px; } } @media (max-width: 1279px){ .section-resources-wrap .col-wrap{ display:block; } .section-resources-wrap .col-md-12 { width: 100%; } } @media (max-width: 1200px){ /*.in_Layer{padding: 0 0;}*/ } @media (max-width: 768px){ .section-resources-wrap .img-wrap .pc_img{ display:none; } .section-resources-wrap .img-wrap .mob_img{ display:block; } #contents .subIn{ padding-bottom:25px; } .brand-section{ padding-top:40px; } .brand-section p img{ width:90%; overflow:hidden; } .section-resources-wrap .font20{ font-size: 14px; } }