*{padding: 0; margin: 0 ;}
html{height:auto;}
html, body{
-webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */
-ms-text-size-adjust : none; /* IE */
-moz-text-size-adjust : none; /* 파이어폭스 */
-o-text-size-adjust : none; /* 오페라 구버전 */
}
/*
text-size-adjust : auto
화면의 크기에 따라 크기를 자동으로 조정할 수 있게 함
(디바이스마다 그 크기가 달라질 수 있음 -> 되도록 사용하지 않는다.)
text-size-adjust : % (퍼센트)
100%의 값을 줘서 모든 디바이스에서 동일한 텍스트 크기를 만들 수 있음
%값을 낮게해 디바이스별로 동일하게 작게 줄 수도 있음
(text-size-adjust : none 값을 선언하거나 100%로 설정한다)
*/
li, ol, ul{list-style: none; text-decoration: inherit;}
a{color: inherit; -webkit-text-fill-color: inherit;}
button{border: none; background-color:transparent; font-family: inherit;}
input, label, textarea, select, button{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
cursor: pointer;
}
input:focus,textarea:focus,select:focus{outline: none !important;}
table{border-collapse : collapse;}
section{
width: 100%; font-family: 'Pretendard Variable';
padding-top: 130px; padding-bottom: 130px;
}
.container{width: 95%; max-width: 1080px; margin: 0 auto;}
.container--flexCenter{display: flex; align-items: center; justify-content: center;}
::-webkit-scrollbar{width: 6px; cursor: pointer;}
::-webkit-scrollbar-thumb{height: 20% !important; background-color: #bababa; border-radius: 10px; cursor: pointer;}
::-webkit-scrollbar-track{background-color: #e8e8e8;}
/* .fastinfo{display: none;} */
/* 네비게이션css */
.renewCurriNavBar{
font-family: 'Pretendard Variable';
max-width: 1020px;
width: 98%;
max-height: 75px;
min-height: auto;
padding: 6px 9px 7px 9px;
box-sizing: border-box;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: 0px 3px 18px 2px rgb(0 0 0 / 16%);
position: fixed;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 2000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 3px;
}
.renewCurriNavBar_p{font-size: 12px; font-weight: 600; line-height: 19px; position: relative;}
.renewCurriNavBar_p:after{
content:'';
width:6px; height: 6px;
background-color: #FF4747;
border-radius: 50%;
position: absolute;
top: 0; right: -9px;
}
.renewCurriNavBar_btnBox{
width: 100%;
display: flex; align-items: center; justify-content: center;
gap: 5px;
}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn{
background-color: #F7F8FA;
border: 1px solid #D3D3D3;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #333333;
min-width: 18%;
max-height: 51px;
min-height: 28px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 7px;
}
.renewCurriNavBar_btnBox .tuitionFeeBtn{max-width: 112px;}
.renewCurriNavBar_btnBox .shareBtn{max-width: 118px;}
.renewCurriNavBar_btnBox .personalInquiryBtn{max-width: 151px;}
.renewCurriNavBar_btnBox .submitHrdBtn{
max-width: 218px;
min-width:22%;
max-height: 51px;
min-height: 28px;
background-color: #2D8CE6;
border-radius: 6px;
font-size:12px;
font-weight: 600;
color: white;
padding: 0 7px;
}
.naviImg{display: none;}
/* --- */
/* 공통타이틀 css */
.titleBox{word-break: keep-all; text-align: center; margin-bottom: 32px;}
.titleBox_p{
font-size: 16px;
font-weight: 500;
line-height: 20px;
margin-bottom: 5px;
}
.titleBox_h1{
font-size: 28px;
font-weight: 600;
line-height: 32px;
}
/* titleBox,titleBox_p titleBox_h1 모든섹션 공통영역이다*/
/* ---------------------------< 과정별 클래스 적용 >------------------------- */
/*
[ 과정 카테고리별 class ]
'SW 개발' = SW
'프론트앤드' = frontE
'백앤드' = backE
'빅데이터' = bigData
'ux/ul 웹디자인' = UIUX
'편집디자인' = PUB
'건축·산업디자인' = ARCH
'산업디자인·기계설계' = MECHA
'영상디자인' = VIDEO
'사무행정' = OFFICE
'세무회계' = ACCOUNT
*/
/* --SW 개발-- */
/* sec1_intro */
.SW .courThumBoxImgG_img{margin-left: 3.55%;}
.SW .courThumBoxBtnG_p,
.SW .courThumBoxBtnG_a{
-webkit-box-shadow: 0 0 0px 2px #455AFF;
-moz-box-shadow: 0 0 0px 2px #455AFF;
-o-box-shadow: 0 0 0px 2px #455AFF;
box-shadow: 0 0 0px 2px #455AFF;
}
.SW .courThumBoxBtnG_a:hover{
-webkit-background-color: #455AFF;
/* -moz-background-color: #455AFF;
-o-background-color: #455AFF; */
background-color: #455AFF;
}
/* sec3_curriculum */
.SW .sec3_curriculum{background-color: #EDEFFF;}
/* sec4_prospect */
.SW .prosBorder{border: 1.5px solid #CCD1FF;}
/* sec5_salary */
.SW .sec5_salary{background-color: #EDEFFF;}
.SW .salaryDetail_text h5{color:#455AFF;}
/* sec9_interview */
.SW .sec9_interview{background-color: #EDEFFF;}
/* -------------end------------- */
/* --Front End-- */
/* sec1_intro */
.frontE .courThumBoxImgG_img{margin-left: 3.55%;}
.frontE .courThumBoxBtnG_p,
.frontE .courThumBoxBtnG_a{
-webkit-box-shadow: 0 0 0px 2px #455AFF;
-moz-box-shadow: 0 0 0px 2px #455AFF;
-o-box-shadow: 0 0 0px 2px #455AFF;
box-shadow: 0 0 0px 2px #455AFF;
}
.frontE .courThumBoxBtnG_a:hover{
-webkit-background-color: #455AFF;
/* -moz-background-color: #455AFF;
-o-background-color: #455AFF; */
background-color: #455AFF;
}
/* sec3_curriculum */
.frontE .sec3_curriculum{background-color: #EDEFFF;}
/* sec4_prospect */
.frontE .prosBorder{border: 1.5px solid #CCD1FF;}
/* sec5_salary */
.frontE .sec5_salary{background-color: #EDEFFF;}
.frontE .salaryDetail_text h5{color:#455AFF;}
/* sec9_interview */
.frontE .sec9_interview{background-color: #EDEFFF;}
/* -------------end------------- */
/* --Back End-- */
/* sec1_intro */
.backE .courThumBoxImgG_img{margin-left: 3.55%;}
.backE .courThumBoxBtnG_p,
.backE .courThumBoxBtnG_a{
-webkit-box-shadow: 0 0 0px 2px #455AFF;
-moz-box-shadow: 0 0 0px 2px #455AFF;
-o-box-shadow: 0 0 0px 2px #455AFF;
box-shadow: 0 0 0px 2px #455AFF;
}
.backE .courThumBoxBtnG_a:hover{
-webkit-background-color: #455AFF;
/* -moz-background-color: #455AFF;
-o-background-color: #455AFF; */
background-color: #455AFF;
}
/* sec3_curriculum */
.backE .sec3_curriculum{background-color: #EDEFFF;}
/* sec4_prospect */
.backE .prosBorder{border: 1.5px solid #CCD1FF;}
/* sec5_salary */
.backE .sec5_salary{background-color: #EDEFFF;}
.backE .salaryDetail_text h5{color:#455AFF;}
/* sec9_interview */
.backE .sec9_interview{background-color: #EDEFFF;}
/* -------------end------------- */
/* --big data-- */
/* sec1_intro */
.bigData .courThumBoxImgG_img{margin-left: 3.55%;}
.bigData .courThumBoxBtnG_p,
.bigData .courThumBoxBtnG_a{
-webkit-box-shadow: 0 0 0px 2px #455AFF;
-moz-box-shadow: 0 0 0px 2px #455AFF;
-o-box-shadow: 0 0 0px 2px #455AFF;
box-shadow: 0 0 0px 2px #455AFF;
}
.bigData .courThumBoxBtnG_a:hover{
-webkit-background-color: #455AFF;
/* -moz-background-color: #455AFF;
-o-background-color: #455AFF; */
background-color: #455AFF;
}
/* sec3_curriculum */
.bigData .sec3_curriculum{background-color: #EDEFFF;}
/* sec4_prospect */
.bigData .prosBorder{border: 1.5px solid #CCD1FF;}
/* sec5_salary */
.bigData .sec5_salary{background-color: #EDEFFF;}
.bigData .salaryDetail_text h5{color:#455AFF;}
/* sec9_interview */
.bigData .sec9_interview{background-color: #EDEFFF;}
/* -------------end------------- */
/* --ux/ul 웹디자인-- */
/* sec1_intro */
.UIUX .courThumBoxBtnG_p,
.UIUX .courThumBoxBtnG_a{
box-shadow: 0 0 0px 2px #6F00E7; -webkit-box-shadow: 0 0 0px 2px #6F00E7;
}
.UIUX .courThumBoxBtnG_a:hover{background-color: #6F00E7;}
/* sec3_curriculum */
.UIUX .sec3_curriculum{background-color: #F6EEFF;}
.UIUX .curriImgBox--pc:after{
content: '';
background-image: url(/assets/_img/sub/curriculum/renewcour/uxui/curri_P_img2.webp);
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: curriMove 1s ease-in Infinite Alternate;
}
.UIUX .curriImgBox--mobile:after{
content: '';
background-image: url(/assets/_img/sub/curriculum/renewcour/uxui/curri_M_img2.webp);
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: curriMove 1s ease-in Infinite Alternate;
}
/* sec4_prospect */
.UIUX .prosBorder{border: 1.5px solid #E6CCFF;}
/* sec5_salary */
.UIUX .sec5_salary{background-color: #F6EEFF;}
.UIUX .salaryDetail_text h5{color:#6F00E7;}
/* sec9_interview */
.UIUX .sec9_interview{background-color: #F6EEFF;}
/* -------------end------------- */
/* --편집디자인-- */
/* sec1_intro */
.PUB .courThumBoxImgG_img{margin-left: 3.6%;}
.PUB .courThumBoxBtnG_p,
.PUB .courThumBoxBtnG_a{
box-shadow: 0 0 0px 2px #E7008F; -webkit-box-shadow: 0 0 0px 2px #E7008F;
}
.PUB .courThumBoxBtnG_a:hover{background-color: #E7008F;}
/* sec3_curriculum */
.PUB .sec3_curriculum{background-color: #FFEDFB;}
/* sec4_prospect */
.PUB .prosBorder{ border: 1.5px solid #FFCCE7;}
/* sec5_salary */
.PUB .sec5_salary{background-color: #FFEDFB;}
.PUB .salaryDetail_text h5{color:#E7008F;}
/* sec9_interview */
.PUB .sec9_interview{background-color: #FFEDFB;}
/* -------------end------------- */
/* --건축·산업디자인--*/
/* sec1_intro */
.ARCH .courThumBoxImgG_img{margin-left: 3.7%;}
.ARCH .courThumBoxBtnG_p,
.ARCH .courThumBoxBtnG_a{
box-shadow: 0 0 0px 2px #F1B40B; -webkit-box-shadow: 0 0 0px 2px #F1B40B;
}
.ARCH .courThumBoxBtnG_a:hover{background-color: #F1B40B;}
/* sec3_curriculum */
.ARCH .sec3_curriculum{background-color: #FFF5DB;}
/* sec4_prospect */
.ARCH .prosBorder{ border: 1.5px solid #FFEBCC;}
/* sec5_salary */
.ARCH .sec5_salary{background-color: #FFF5DB;}
.ARCH .salaryDetail_text h5{color:#E6AB0A;}
/* sec9_interview */
.ARCH .sec9_interview{background-color: #FFF5DB;}
/* -------------end------------- */
/* --산업디자인·기계 설계--*/
/* sec1_intro */
.MECHA .courThumBoxImgG_img{margin-left: 3.7%;}
.MECHA .courThumBoxBtnG_p,
.MECHA .courThumBoxBtnG_a{
box-shadow: 0 0 0px 2px #F1B40B; -webkit-box-shadow: 0 0 0px 2px #F1B40B;
}
.MECHA .courThumBoxBtnG_a:hover{background-color: #F1B40B;}
/* sec3_curriculum */
.MECHA .sec3_curriculum{background-color: #FFF5DB;}
/* sec4_prospect */
.MECHA .prosBorder{ border: 1.5px solid #FFEBCC;}
/* sec5_salary */
.MECHA .sec5_salary{background-color: #FFF5DB;}
.MECHA .salaryDetail_text h5{color:#E6AB0A;}
/* sec9_interview */
.MECHA .sec9_interview{background-color: #FFF5DB;}
/* -------------end------------- */
/* --영상디자인--*/
/* sec1_intro */
.VIDEO .courThumBoxImgG_img{margin-left: 4.99%;}
.VIDEO .courThumBoxBtnG_p,
.VIDEO .courThumBoxBtnG_a{
box-shadow: 0 0 0px 2px #FF4238; -webkit-box-shadow: 0 0 0px 2px #FF4238;
}
.VIDEO .courThumBoxBtnG_a:hover{background-color: #FF4238;}
/* sec3_curriculum */
.VIDEO .sec3_curriculum{background-color: #FFEEED;}
/* sec4_prospect */
.VIDEO .prosBorder{border: 1.5px solid #FFCCCC;}
/* sec5_salary */
.VIDEO .sec5_salary{background-color: #FFEEED;}
.VIDEO .salaryDetail_text h5{color:#FF4238;}
/* sec9_interview */
.VIDEO .sec9_interview{background-color: #FFEEED;}
/* -------------end------------- */
/* --사무행정-- */
/* sec1_intro */
.OFFICE .courThumBoxImgG_img{margin-left: 3.5%;}
.OFFICE .courThumBoxBtnG_p,
.OFFICE .courThumBoxBtnG_a{
box-shadow: 0 0 0px 1px #1398FF; -webkit-box-shadow: 0 0 0px 1px #1398FF;
}
.OFFICE .courThumBoxBtnG_a:hover{background-color: #1398ff;}
/* sec3_curriculum */
.OFFICE .sec3_curriculum{background-color: #EDFAFF;}
/* sec4_prospect */
.OFFICE .prosBorder{border: 1.5px solid #CCE7FF;}
/* sec5_salary */
.OFFICE .sec5_salary{background-color: #EDFAFF;}
.OFFICE .salaryDetail_text h5{color:#1189E6;}
/* sec9_interview */
.OFFICE .sec9_interview{background-color: #EDFAFF;}
/* -------------end------------- */
/* --세무회계-- */
/* sec1_intro */
.ACCOUNT .courThumBoxImgG_img{margin-left: 3.8%;}
.ACCOUNT .courThumBoxBtnG_p,
.ACCOUNT .courThumBoxBtnG_a{
box-shadow: 0 0 0px 2px #1398FF; -webkit-box-shadow: 0 0 0px 1px #1398FF;
}
.ACCOUNT .courThumBoxBtnG_a:hover{background-color: #1398ff;}
/* sec3_curriculum */
.ACCOUNT .sec3_curriculum{background-color: #EDFAFF;}
/* sec4_prospect */
.ACCOUNT .prosBorder{ border: 1.5px solid #CCE7FF; }
/* sec5_salary */
.ACCOUNT .sec5_salary{background-color: #EDFAFF;}
.ACCOUNT .salaryDetail_text h5{color:#1189E6;}
/* sec9_interview */
.ACCOUNT .sec9_interview{background-color: #EDFAFF;}
/* ----------------------------------------------------------------- */
/* 과정 카테고리별 미디어쿼리 */
@media all and (min-width:480px){
.SW .courThumBoxImgG_img,
.frontE .courThumBoxImgG_img,
.backE .courThumBoxImgG_img,
.bigData .courThumBoxImgG_img,
.PUB .courThumBoxImgG_img,
.OFFICE .courThumBoxImgG_img,
.ACCOUNT .courThumBoxImgG_img{
width: calc(100% + 4.1%); margin-left: 4.1%;
}
.ARCH .courThumBoxImgG_img{width: calc(100% + 4%); margin-left: 4.1%;}
.MECHA .courThumBoxImgG_img{width: calc(100% + 4%); margin-left: 4.1%;}
.VIDEO .courThumBoxImgG_img{width: calc(100% + 5.2%); margin-left: 5.2%;}
}
@media all and (min-width:1200px){
.SW .courThumBoxImgG_img,
.frontE .courThumBoxImgG_img,
.backE .courThumBoxImgG_img,
.bigData .courThumBoxImgG_img,
.PUB .courThumBoxImgG_img,
.ARCH .courThumBoxImgG_img,
.MECHA .courThumBoxImgG_img,
.OFFICE .courThumBoxImgG_img,
.ACCOUNT .courThumBoxImgG_img{
margin-left: 0;
width: calc(100% + 4.1%); height: 100%;
object-fit: cover;
}
.VIDEO .courThumBoxImgG_img{
margin-left: 0;
width: calc(100% + 5.1%); height: 100%;
object-fit: cover;
}
}
/* ----------------------------------------------------------------- */
/* ------------------------------< 공통 섹션 css >---------------------------- */
/* ------------sec1_intro------------ */
.sec1_intro{ padding-top: 40px; height: 100%; box-sizing: border-box; }
.sec1_intro .container{
display: flex; flex-direction: column;
align-items: center; justify-content: space-between;
}
.courThumBox{width: 100%; height: 100%; margin-right: 0px;}
.courThumBoxImgG{
width: 100%;
height: auto;
position: relative;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.courThumBoxImgG_img{width: 90%;}
.courThumBoxBtnG{
display: flex;
justify-content: end;
gap: 8px;
width: 95%;
margin: 0 auto;
margin-top: 15px;
padding-left: 1px;
padding-right: 2px;
padding-bottom: 2.8px;
box-sizing: border-box;
}
.courThumBoxBtnG_p,
.courThumBoxBtnG_a{
max-width: 170px;
min-width: 31.5%;
max-height: 62px;
min-height: 38px;
box-sizing: border-box;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: #000;
background-color: #FAFAFA;
display: flex;
align-items: center;
justify-content: center;
}
.courThumBoxBtnG_a{ position: relative; overflow: hidden;}
.courThumBoxBtnG_a:before{
content: '';
position: absolute;
left: 0px;
bottom: 0px;
z-index: 2;
width: 100%;
height: 100%;
box-shadow: inset -300px 0px 0px #FAFAFA;
display: block;
-webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
transition: all 0.5s cubic-bezier(.5, .24, 0, 1);
}
.courThumBoxBtnG_a:hover::before { box-shadow: inset 0px 0px 0px #FAFAFA;}
.courThumBoxBtnG_a:hover{color: white;}
.courThumBoxBtnG_a:hover img{filter: brightness(10);}
.courThumBoxBtnG_aInner{
/* position: absolute; */
margin: 0;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.courThumBoxBtnG_aInner img{width: 12px;}
.courTextBox{
width: 90%;
padding-top: 50px; box-sizing: border-box;
}
.courTextBoxTG_h4{
font-size: 18px; font-weight: 500;
margin-bottom: 8px;
}
.courTextBoxTG_h1{
font-size: 24px; font-weight: 600;
line-height: 28px; word-break:break-word;
/* white-space:normal !important; */
}
/* 아이폰에서 과정명 줄바꿈 안 되는 문제로 keep-all에서 break-all 로 수정했습니다. */
.courTextBoxKateG{ margin-top: 20px;}
.courTextBoxKateG_keyWord,
.courTextBoxKateG_program{ display: flex; flex-wrap: wrap; gap: 5px;}
.courTextBoxKateG_program{margin-top: 5px;}
.courTextBoxKateG_keyWord p,
.courTextBoxKateG_program p{
border: 1px solid #888888;
border-radius: 25px;
font-size: 12px;
font-weight: 600;
text-align: center;
box-sizing: border-box;
width: fit-content;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
.courTextBoxKateG_keyWord p{ padding: 4.5px 6px 3.6px 6px; }
.courTextBoxKateG_program p{ padding: 4px 6px; gap: 5px;}
/* --end--- */
/* ------------sec2_outline------------ */
.sec2_outline{padding-top: 0px;}
.detail--border{
background-color: #F7F8FA;
border: 1.5px solid #D3D3D3;
border-radius: 10px;
overflow: hidden;
}
.detailBox{word-break: keep-all;}
.detailExplain{
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 10px;
padding-top: 20px; padding-bottom: 25px;
margin-bottom: 20px;
text-align: center;
}
.detailExplain_h3{
font-size: 21px; font-weight: 600;
line-height: 24px; margin-bottom: 10px;
}
.detailExplain_p{
font-size: 15.5px; font-weight: 500;
line-height: 21px;
width: 97%; margin: 0 auto;
}
.detailExplain_p span{font-weight: 700;}
.detailStepBox{ display: flex; flex-wrap: wrap; gap: 20px; width: 100%;}
.detailStep{
width: 100%;
display: flex; flex-direction:column; justify-content: space-between;
}
.detailStepText{text-align: center; padding-top:35px; padding-bottom: 48px;}
.detailStepText_p1{font-size: 20px; font-weight: 500; margin-bottom: 11px;}
.detailStepText_h2{font-size: 28px; font-weight: 600; line-height: 34px; margin-bottom: 15px;}
.detailStepText_p2{font-size: 15px; font-weight: 400; line-height: 22px;}
.detailStepImg{width: 100%; height: 260px; background-color: #dadada;}
.detailStepImg img{width: 100%; height: 100%; object-fit: cover;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.sec3_curriculum{position: relative;}
.curriImgBox{
position:relative; width: 92%;
margin: 0 auto;
margin-top: 60px;
margin-bottom: 50px;
}
.curriImgBox--pc{display: none;}
.curriImgBox img{width: 100%; object-fit: cover;}
@keyframes curriMove{
0%{top: 0px;}
100%{top: -8px;}
}
.curriBtnBox{text-align: center;}
.notiP{font-size: 12px; font-weight: 400; line-height: 21px; color: rgb(0 0 0 / 35%);}
.curMoreBtn,.portMoreBtn{
min-width: 216px;
max-width: 257px;
min-height: 56px;
max-height: 62px;
font-size: 16px;
font-weight: 600;
margin-top: 50px;
border: 3px solid transparent;
border-left: 3.1px solid transparent;
background-image:
linear-gradient(to right, #6F00E7 0%, #FF4040 100%), linear-gradient(to right, #6F00E7 0%, #FF4040 100%);
background-origin: border-box;
background-clip: content-box, border-box;
border-radius: 31px;
display:inline-block;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.curMoreBtn{margin-top: 25px;}
.curMoreBtn::before{
content: '';
position: absolute;
left: 0px;
bottom:0px;
z-index:2;
width: 100%;
height:100%;
/* background-image:linear-gradient(to right, #6F00E7 0%, #FF4040 100%); */
box-shadow: inset -300px 0px 0px #FAFAFA;
display: block;
-webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
transition: all 0.5s cubic-bezier(.5, .24, 0, 1)
}
.portMoreBtn::before {
content: '';
position: absolute;
left: 0px;
bottom:0px;
z-index:2;
width: 100%;
height:100%;
/* background-image:linear-gradient(to right, #6F00E7 0%, #FF4040 100%); */
box-shadow: inset -300px 0px 0px #FAFAFA;
display: block;
-webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
transition: all 0.5s cubic-bezier(.5, .24, 0, 1)
}
.curMoreBtn_inner,
.portMoreBtn_inner{
position: absolute;
top: 0;
margin: 0;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.curMoreBtn_inner span,
.portMoreBtn_inner span{letter-spacing: 0.5px; color: #333; -webkit-text-fill-color: #333;}
.curMoreBtn:hover::before,
.portMoreBtn:hover::before {
box-shadow: inset 0px 0px 0px #FAFAFA;
background-image:
linear-gradient(to right, #6F00E7 0%, #FF4040 100%),
linear-gradient(to right, #6F00E7 0%, #FF4040 100%);
}
.curMoreBtn:hover span,
.portMoreBtn:hover span{color:#ffffff; -webkit-text-fill-color: #fff;}
.curMoreBtn:hover img,
.portMoreBtn:hover img{filter: brightness(10);}
/* .portMoreBtn <-sec9_interview 에 있는 동일 버튼*/
/* --end--- */
/* ------------curriList------------ */
.curriList{
width: 100%;
height: 100%;
display: flex;
justify-content: end;
background-color: rgb(0 0 0 / 50%);
backdrop-filter: blur(5px);
position: fixed;
top: 0;
left: 100%;
z-index: 20000;
}
.curriList.stepOn{left: 0%;}
.curriListContainer{
width:100%;
height: 100%;
background-color: #ffffff;
padding: 30px 10px 45px 20px;
box-sizing: border-box;
position: absolute;
left: calc(100% + 510px);
transition: 0.5s;
}
.curriList.stepOn .curriListContainer{ left: 0;}
.curriListTitle{ padding-bottom: 10px; margin-right: 10px; border-bottom: 1px solid #CCCCCC;}
.curriListTitle_p{ font-size: 16px; font-weight: 400; line-height: 21px; margin-bottom: 2px;}
.curriListTitle_h1{ font-size: 24px; font-weight: 600; line-height: 35px; word-break: break-all;}
.curriList_closeBtn{position: absolute; top:14px; right: 10px; width: 18px; height: 18px;}
.curriListTitle_img{ width: 100%; height: 100%; object-fit: cover;}
.curriListSteps{ height: calc(100% - 60px); padding-right: 10px; overflow-y: auto;}
.curriListSteps::-webkit-scrollbar{width: 2px; cursor: pointer;}
.curriListSteps::-webkit-scrollbar-thumb{height: 20% !important; background-color: #bababa; border-radius: 10px; cursor: pointer;}
.curriListSteps::-webkit-scrollbar-track{background-color: #e8e8e8;}
.stepsGroup{padding-bottom: 30px;}
.curriListSteps .steps{ padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #CCCCCC;}
.curriListSteps .steps_p{
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #A8A8A8;
margin-bottom: 8px;
}
.curriListSteps .steps_h1{
font-size: 22px;
font-weight: 600;
line-height: 26px;
margin-bottom: 14px;
word-break: keep-all;
/* overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; */
}
.curriListSteps .steps_ul li{
font-size: 14px;
font-weight: 500;
line-height: 17px;
color: #333333;
margin-bottom: 10px;
padding-left: 12px;
position: relative;
/* overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; */
}
.curriListSteps .steps_ul li:before{
content:'';
width:4px; height:4px;
background-color:#333;
border-radius: 50%;
position: absolute;
top: 8.5px;
left: 0px;
transform: translateY(-50%);
}
.curriListSteps .steps:last-child .steps_ul li:last-child {
padding-bottom: 20px;
}
/* --end--- */
/* ------------sec4_prospect------------ */
.sec4_prospect{}
.prosBorder{
border-radius: 10px;
margin-bottom: 12px; overflow: hidden; box-sizing: border-box;
}
.prosImgBox{ margin: 0 auto; box-sizing: border-box; }
.prosImgBox_img{width:100%; height: 100%; object-fit: cover;}
.prostextB{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 100%;
height: 62px;
margin-bottom: 0px;
margin-top: 5px;
padding: 0 10px;
}
.prostextB .checkBoxImg{height: 16px;}
.prostextB .checkBoxImg img{height: 100%; object-fit: cover;}
.prostextB_p{font-size: 14px; font-weight: 500; line-height: 20px; word-break: keep-all;}
.prostextB_p span{font-weight: 700;}
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetailBox{width: 95%; margin: 0 auto;}
.salaryDetail{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
max-width: 700px;
max-height: 120px;
box-sizing: border-box;
padding: 14px 8px 12px 12px ;
margin: 0 auto;
margin-bottom: 10px;
}
.salaryDetailBorder{ border: 1px solid #D3D3D3; border-radius: 10px; background-color: white;}
.salaryDetail_img{height: 45px;}
.salaryDetail_img img{height: 100%; object-fit: cover;}
.salaryDetail_text{word-break: keep-all;}
.salaryDetail_text h1{font-size: 17px; font-weight: 600; line-height: 21px; margin-bottom: 5px;}
.salaryDetail_text > h1 > span{font-size: 14px;}
.salaryDetail_text p,
.salaryDetail_text h5{font-size: 14px; font-weight: 500; line-height: 16px; letter-spacing: 0.1px;}
.salaryDetail_text h5{font-size: 13px; font-weight: 600; margin-top: 7px;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetailBox{display: grid; grid-template-columns: repeat(1 , 1fr); gap: 20px;}
.careDetailBorder{ border:1px solid #D3D3D3; border-radius: 10px; background-color: #F7F8FA;}
.careDetail{
min-width: 100%;
max-width: 340px;
max-height: 207px;
padding: 24px 22px 16px 22px;
box-sizing: border-box;
color: #333333;
}
.careDetail--center{width: 98%; margin: 0 auto;}
.careDetailTop{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 18px;
margin-bottom: 20px;
}
.careDetailTop_img{width: 57px; height: 52px;}
.careDetailTop_img img{width: 100%; height: 100%; object-fit: cover;}
.careDetailTop_text p{font-size: 16px; font-weight: 500; line-height: 18px; margin-bottom: 5px;}
.careDetailTop_text h5{font-size: 21px; font-weight:700; line-height: 26px;}
.careDetailBott{line-height: 19px; word-break: keep-all;}
.careDetailBott_p{
font-size: 15px;
font-weight: 500;
margin-bottom: 5px;
padding-left: 15px;
position: relative;
letter-spacing: normal;
}
.careDetailBott_p::before{
content: "•";
position: absolute;
left: 0;
top: 0;
}
/* --end--- */
/* --------------sec7_brands-------------- */
.sec7_brands{padding-top:70px; padding-bottom:80px; background-color: #F7F8FA;}
.sec7_brands .titleBox{margin-bottom: 80px;}
.logoPlayBox {
width: 100%; height:auto;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 45px;
}
.logoSliderBox1,.logoSliderBox2 {height: 48px;}
.swiper-logo .swiper-slide{width: fit-content; margin: 0 20px;}
.sec7_brands .swiper-wrapperLogo{transition-timing-function:linear; align-items: center;}
.logoPlayBox .slider-span {
display: inline-block;
height: max-content;
width: fit-content;
padding:0 40px 0 40px ;
}
.logoImg{width: fit-content;}
.logoImg img{width: 85%; object-fit: cover;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.sec8_whyG{}
.whygDetailGroupBox{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
margin: 0 auto;
margin-bottom: 22px;
}
.whygDetailGroup{width: 100%; display: flex; flex-direction: column; gap: 22px;}
.whygDetailGroup--reverse{flex-direction: column-reverse; }
.whygDetailBorder{
border-top: 3px solid ;
border-image: linear-gradient(to right, #03C658, #16B8FE);
border-image-slice: 1;
box-shadow: 0 2px 8px -3px hsl(0deg 0% 0% / 20%);
}
.whygDetail{
background-color: #F7F8FA;
padding: 24px 18px 20px 18px;
box-sizing: border-box;
overflow: hidden;
}
.whygDetail--num1,
.whygDetail--num2,
.whygDetail--num3,
.whygDetail--num4{width: 100%;}
.whygDetail--num1,
.whygDetail--num2,
.whygDetail--num3,
.whygDetail--num4{height: auto; }
.whygDetail--num5{
width: 100%; height: auto;
padding: 0;
display: flex;
flex-direction: column; gap: 25px;
margin: 0 auto;
}
.whygDetail--num4 .whygDetail_h3,
.whygDetail--num5 .whygDetail_h3{margin-bottom: 10px;}
.whygDetail--num5Text{padding: 24px 18px 0 18px;}
.whygDetail--num5Img{padding: 0 0 18px 0;}
.whygDetail_h3{font-size: 18px; font-weight: 600; line-height: 27px;}
.whygDetail_h2{
font-size: 26px;
font-weight: 600;
line-height: 32px;
background: linear-gradient(to bottom, #00BD90, #009EFF);
color: transparent;
-webkit-background-clip: text;
margin-bottom: 25px;
}
.whygDetail_h1-1{
font-size: 62px;
font-weight: 700;
line-height: 75px;
margin-bottom: 15px;
}
.whygDetail_h1-2{
font-size: 36px;
font-weight: 700;
height: 104px;
line-height: 42px;
margin-bottom: 10px;
}
.whygDetail_p{
font-size: 15px;
font-weight: 500;
line-height: 23px;
color: #A8A8A8;
word-break: keep-all;
}
.whygDetail_img{width: 100%;}
.whygDetail_img--PC{display: none;}
.whygDetail_img--MO{display: block;}
.whygDetail_img img{width: 100%; object-fit: cover;}
/* --end--- */
/* --------------sec9_interview-------------- */
.intervSlidebox {margin-top:35px;}
.swiper-interv .swiper-slide{
/* width: 94% !important;
max-width: 525px !important; */
max-height: 425px;
background-color: white;
border-radius: 15px;
overflow: hidden;
}
.interv_img{width: 100%; height: 160px; position: relative;}
.interv_img img{
width: 100%; height: inherit; object-fit: cover;
position: absolute; left: 50%; top: 0;
transform: translateX(-50%);
}
.interv_textBox{
height: 175px;
padding: 22px 16px 0px 16px;
box-sizing: border-box;
position: relative;
}
.interv_textBox_h1{
font-size:18px;
font-weight: 600;
line-height: 26px;
color: #000000;
margin-bottom:8px;
word-break: keep-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.interv_textBox_p{
font-size: 14px;
font-weight: 500;
line-height:20px;
color: #A8A8A8;
height: auto;
word-break: keep-all;
letter-spacing: 0.05px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.interv_aTag{
display: flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
background-color: #D9D9D9;
border-radius: 50%;
cursor: pointer;
position: absolute;
bottom: 6px;
right: 6px;
}
.interv_aTag:hover{background-color: #cfcfcf;}
.interv_aTag img{ filter: brightness(5); width: 14px;}
.sec9_interview .swiper-wrapperInterv{ transition-timing-function:linear;}
/* --end--- */
/* --------------sec10_teacher-------------- */
.sec10_teacher{}
/* 강사소개 */
.tutorSwiperCont{overflow: hidden;}
.tIntroBox{
width: 100%;
height: auto;
border-radius: 10px;
background-color: #212233;
color: white;
padding: 50px 20px 42px 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.tIntroBox_profileBox{
max-width: 150px;
width: fit-content;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.profileBox_imgB{ width: 115px; height: 115px;}
.profileBox_imgB img{width: 100%;}
.profileBox_buttonB{ width: 140px; height: 32px; margin-top: 20px;}
.profileBox_buttonB button{
width: 100%;
height: 100%;
border-radius: 50px;
background-image: linear-gradient(to right, #2D8CE6 0%, #01C45C 100%);
border: none;
color: white;
font-family: inherit;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
}
.tIntroBox_detailBox{ width: 100%;}
.detailBox_titleB{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
column-gap: 30px;
row-gap: 15px;
flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 1px solid #fff;
}
.detailBox_titleB h1{ font-size: 24px; font-weight: 500; white-space: nowrap;}
.detailBox_titleB p{
font-size: 15px; font-weight: 500; line-height: 20px;
display: flex; align-items: flex-start; gap: 4px;
}
.detailBox_titleB p > span{}
.detailBox_titleB p > span:last-child{margin-top: -1px;}
.detailBox_contentsB{ padding-top: 14.5px;}
.detailBox_contentsB p{
width:100%;
word-break: keep-all;
line-height: 22px;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.5px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
}
.tutorSwiper .swiper-button-next{right: 1px; top: 39.8%;}
.tutorSwiper .swiper-button-prev{left: 1px; top: 39.8%;}
.tutorSwiper .swiper-button-next:after,
.tutorSwiper .swiper-button-prev:after{font-size: 22px;}
/* 강의만족도&수강후기 */
.afterCourBox{}
/* 강의만족도 */
.courSatisBox{}
.courSatisStarGraph{
width: 100%;
height: auto;
border: 1px solid #D3D3D3;
border-radius: 10px;
padding: 20px 0 20px 0;
box-sizing: border-box;
border-right: 1px solid #CCCCCC;
display: flex;
flex-direction: column;
align-items: center;
}
.courSatisStar{
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 20px 60px 35px 70px;
display: flex;
flex-direction: column;
align-items: center;
}
.courSatisStar_p{
font-size: 15px; font-weight: 700;
line-height: 24px; margin-bottom: 2px;
}
.courSatisStar_h1{
font-size:43px; font-weight: 700;
line-height: 55px; margin-bottom: 7px;
}
.courSatisStar_star{width: 170px;}
.courSatisStar_star, .courSatisStar_Starfillcolor{
display: inline-block;
height: 30px;
background: url(/assets/_img/sub/curriculum/renewcour/Bstars.png) no-repeat;
overflow: hidden;
vertical-align: -1px;
text-align: left;
}
.courSatisStar_Starfillcolor{
line-height: 0;
vertical-align: top;
background-position: left bottom;
text-indent: -5000px;
}
.courSatisGraphGroup{
width: 100%; height: 100%;
padding: 12px 0px 45px 0px;
box-sizing: border-box;
display: flex;
justify-content: center;
gap: 12px;
}
.courSatisGraphBox{
min-width: 16%;
max-width: 80px;
min-height: 110px;
max-height: 152px;
display: flex; align-items: end;
}
.courSatisGraph_fillColor{
width: 100%;
background-color: #2D8CE6;
border-radius: 8px 8px 0 0;
position: relative;
}
.courSatisGraph_point{
font-size: 16px;
font-weight: 500;
line-height: 24px;
color:white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.courSatisGraph_name{
font-size: 9.5px;
font-weight: 600;
line-height: 12px;
color: #4d4d4d;
text-align: center;
width: max-content;
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
}
/* 수강후기 */
.courReviewBox{}
.courReDeBox{margin-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #E6E6E6;}
.reDe_thumb{display: flex; gap: 10px; margin-bottom: 10px;}
.thumb_img{width: 40px; height: 40px;}
.thumb_img img{width: 100%; object-fit: cover;}
.reDe_thumb_starName{}
.reDeStarPoint{display: flex; gap: 5px;}
.reDeStar{width: 87px;}
.reDeStar, .reDeStar_Starfillcolor{
display: inline-block;
height: 15.2px;
background: url(/assets/_img/sub/curriculum/renewcour/Sstars.png) no-repeat;
overflow: hidden;
vertical-align: -1px;
text-align: left;
}
.reDeStar_Starfillcolor{
line-height: 0;
vertical-align: top;
background-position: left bottom;
text-indent: -5000px;
}
.reDePoint{
font-size: 15px; font-weight: 500;
line-height: 18px; margin-left: 5px;
}
.stuName{
font-size: 15px; font-weight: 500;
line-height: 18px; margin-top: 5px;
letter-spacing: 0.2px;
}
.reDe_courName{
font-size: 13px; font-weight: 500;
line-height: 18px; margin-bottom: 12px;
color: #888888;
word-break: keep-all;
}
.reDe_text{
font-size: 14px; font-weight: 500;
line-height: 21.5px; margin-bottom: 35px;
word-break: keep-all;
}
.reDe_heart{display: flex; justify-content: end;}
.courReDeMoreBtn{
width: 100%; height: 53px;
line-height: 53px; margin-top: 40px;
background-color: #FCFCFC;
border: 1px solid #CCCCCC; border-radius: 10px;
font-size: 18px; font-weight: 600;
font-family: inherit;
-webkit-text-fill-color: #000;
color: #000;
}
.courReDeMoreBtn:hover{background-color: #f9f9f9;}
/* 강의만족도&수강후기 공통 */
.afterCourBoxtitle{
width: 100%;
border-bottom: 1px solid #D3D3D3;
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 22px;
margin-top: 51px;
}
.afterCourBoxtitle_h1{
font-size: 18px; font-weight: 500;
line-height: 20px; margin-bottom: 10px;
}
.afterCourBoxtitle_h1 span{
font-size: 14px; font-weight: 500;
line-height: 24px; margin-left: 10px;
color: #888888;
}
.afterCourBoxtitle .searchTab{ margin-bottom: 9px; display: flex; gap: 30px;}
.afterCourBoxtitle .searchTab_select{
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: rgb(3 3 3 / 38%);
position: relative;
}
.afterCourBoxtitle .searchTab_select::before{
content: '';
width: 6px; height: 6px;
border-radius: 25px;
background-color: rgb(3 3 3 / 30%);
position: absolute;
left: -13px;
top: 50%;
transform: translateY(-50%);
}
.searchTab--selectedColor{color: #333333 !important;}
.searchTab--selectedColor::before{ background-color:#333 !important;}
/* 탭 클릭됐을 때 class = searchTab--selectedColor */
/* -------------------------하트 버튼 -----------------------------*/
.likesBox{
display: flex;
justify-content: end;
align-items: center;
gap: 1px;
}
.love-icon {
--danger-color:#2D8CE6;
--heart-color: #E6E6E6;
--heart-active-color: var(--danger-color);
--bg-color: white;
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}
.loveInput {
position: absolute;
top: 0;
left:0 ;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.loveInput ~ .heart{background: var(--heart-color);}
.loveInput.animated ~ .heart {
animation: scale-out-elastic 1.2s ease-out reverse forwards;
background-color: var(--heart-active-color);
}
.loveInput.animated ~ .lines .line::before {
animation: slide-left-right 0.4s ease-in forwards;
background-color: var(--heart-active-color);
}
.loveInput.animated ~ .ring {
animation: scale-out-bigger 0.75s cubic-bezier(0, 1, 0.5, 1) forwards;
background-color: var(--heart-active-color);
}
.loveInput.animated ~ .ring::before {
animation: scale-out 0.75s cubic-bezier(0, 1, 0.5, 1) forwards;
}
.love-icon .heart {
position: absolute;
top: 8.0313px;
left: 7px;
transform:rotate(-45deg);
z-index: 1;
width: 10px;
height: 10px;
background: var(--heart-color);
cursor: pointer;
}
.love-icon .heart::before, .love-icon .heart::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
}
.love-icon .heart::before {top: -50%;}
.love-icon .heart::after {right: -50%;}
.love-icon .lines {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
}
.love-icon .lines .line {
position: absolute;
top: 44.1%;
left: 30.5%;
width: 10px;
height: 1px;
opacity: 0.6;
}
.love-icon .lines .line:nth-child(1) {transform: rotate(90deg) translate(26px);}
.love-icon .lines .line:nth-child(2) {transform: rotate(150deg) translate(26px);}
.love-icon .lines .line:nth-child(3) {transform: rotate(210deg) translate(26px);}
.love-icon .lines .line:nth-child(4) {transform: rotate(270deg) translate(26px);}
.love-icon .lines .line:nth-child(5) {transform: rotate(330deg) translate(26px);}
.love-icon .lines .line:nth-child(6) {transform: rotate(390deg) translate(26px);}
.love-icon .lines .line::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--heart-color);
transform: scaleX(0);
transform-origin: left;
}
.love-icon .ring {
position: relative;
z-index: 0;
top: -0.7px;
left: 0;
width: 100%;
height: 100%;
background: transparent;
border-radius: 50%;
opacity: 0.3;
pointer-events: none;
}
.love-icon .ring::before {
position: absolute;
content: "";
top: 0.3px;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-color);
border-radius: inherit;
transform: scale(0);
pointer-events: none;
}
@keyframes scale-out-elastic {
0% { transform: rotate(-45deg) scale(1); }
4% { transform: rotate(-45deg) scale(1); }
8% { transform: rotate(-45deg) scale(1); }
14% {transform: rotate(-45deg) scale(1); }
18% {transform: rotate(-45deg) scale(1); }
26% {transform: rotate(-45deg) scale(1.01);}
28% {transform: rotate(-45deg) scale(1.01);}
40% {transform: rotate(-45deg) scale(0.98);}
42% {transform: rotate(-45deg) scale(0.98);}
56% {transform: rotate(-45deg) scale(1.05);}
58% {transform: rotate(-45deg) scale(1.04);}
72% {transform: rotate(-45deg) scale(0.87);}
86% {transform: rotate(-45deg) scale(1.37);}
100% {transform: rotate(-45deg) scale(0); }
}
@keyframes slide-left-right {
50% { transform: scaleX(1); transform-origin: left; }
50.1% { transform-origin: right; }
100% { transform-origin: right; }
}
@keyframes scale-out { to { transform: scale(1.05); }}
@keyframes scale-out-bigger { to { transform: scale(1.2); }}
.recom{
color: #333;
font-size: 12px;
font-weight: 600;
padding-left: 3px;
cursor: pointer;
}
.countNum{
font-size: 12px;
color: #000;
font-weight: 400;
padding-left: 5px;
}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.sec11_inquiry{ background-color: #F7F8FA;}
.sec11_inquiry .container{position: relative;}
.sec11_inquiry .titleBox{margin-bottom: 50px;}
/*--수강희망지점--*/
.branchTabBox{margin-bottom:40px;}
.branchTabBox_h2{
font-size: 18px; font-weight: 600;
line-height: 22px; margin-bottom: 8px;
}
.brandchBtns{
max-width: 932px;
display: flex;
flex-flow:wrap ;
grid-row-gap: 6px;
grid-column-gap: 6px;
}
.brandchBtns_btn{
background-color: #ffffff;
border: 1px solid #D3D3D3;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
padding: 8px 14px;
box-sizing: border-box;
cursor: pointer;
color: #CCCCCC;
position: relative;
}
.brandchBtns_btn:hover{color: #333333;}
.brandchBtns_btn:hover:before{display: block;}
.brandchBtns_btn:before{
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
box-shadow: 1px 3px 5px 0px #00000030;
position: absolute;
top:0;
left: 0;
box-sizing: border-box;
border:2px solid #00A2FF;
color: #333333;
display: none;
}
.brandchBtns_btn.on{color: #333333; display:block;}
.brandchBtns_btn.on:before{
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
box-shadow: 1px 3px 5px 0px #00000030;
position: absolute;
top:0px;
left: 0px;
box-sizing: border-box;
border:2px solid #00A2FF;
color: #333333;
display: block;
}
/* -- */
/*--작성란(이름,전화번호,이메일,문의내용,동의)--*/
.detailInformBox{display: flex; flex-direction: column; gap: 40px;}
/* DITitle -> 공통 title */
.DITitle{
font-size: 18px; font-weight: 600;
line-height: 22px; margin-bottom: 8px;
}
/* DIinput -> 공통 input */
.DIinput{
font-size: 14px; font-weight:500;
padding-left: 16px; padding-right: 16px;
}
.DIinput::placeholder{font-size: 14px; color: #CCCCCC;}
/* 작성박스 공통 css (이름, 전화번호, 이메일, 동의) */
.DIinput,
.emailSelBox,
.DITextareaBox,
.agreeBox{
border: 1px solid #D3D3D3;
border-radius: 10px;
background-color: #FFFFFF;
box-sizing: border-box;
outline: none;
letter-spacing: 0.5px !important;
font-family: inherit;
}
/* 이름&전화박스 , 문의&동의박스 공통 css*/
.DI-namePhone,
.DI-inquiryAgree{
display: flex;
flex-direction: column;
align-items: center; justify-content: space-between;
gap: 40px;
}
/* 이름&전화 작성박스,이메일 작성박스 width 지정 */
.DI-namePhone .DIinput,
.DI-email .DIinput,
.DI-email .emailSelBox{width: 100%;}
/* 이름작성박스,전화작성박스,문의작성박스,동의체크박스 공통 width */
.DI-namePhone_N,
.DI-namePhone_P,
.DI-inquiryAgreeIN,
.DI-inquiryAgreeAg{width: 100%;}
/* 이름,전화,이메일 공통 height */
.DIinput,
.emailSelBox{ height: 45px; line-height: 45px;}
/*--이메일 박스--*/
.emailBox{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 5px;
}
.emailBox div:nth-child(1) {margin-right:42px; width: calc(100% - 42px); position: relative;}
.emailBox div:nth-child(1)::after{
content:'@';
font-size: 25px;
font-weight: 700;
position: absolute;
top: 50%;
right: -32px;
transform: translateY(-50%);
}
.emailBox div:nth-child(2) {margin-right:10px; width: 100%; position: relative;}
/* 이메일 셀렉트( Email select box custom ) */
.emailSelBox * { box-sizing: border-box; }
.emailSelBox{ position: absolute; top: 100px; left: 0; transition: .2s ease-in;}
.emailSelBox.active {
height: 304px;
transition: .1s ease-in;
box-shadow: 0px 2px 6px -2px #63636375;
z-index: 100;
}
span.sel_arrow {position: relative; width: 20px; height: 7px;}
.sel_arrow img{
position: absolute;
width: 100%;
top: 50%;
right: 0px;
transform: translateY(-50%);
}
.sel_arrow.on img{display: none;}
.sel_arrow.on::after{
content: '';
position: absolute;
top: 0;
right: 0px;
width: 20px;
height: 7px;
transform:rotate(180deg);
background-image: url(/assets/_img/sub/curriculum/renewcour/select2.svg);
background-repeat: no-repeat;
background-size: cover;
}
.emailSelBox .label {
font-size: 14px;
font-weight: 500;
font-family: inherit;
color: #CCCCCC;
padding-left: 16px;
padding-right: 16px;
display: flex;
align-items: center;
justify-content: space-between;
width: inherit;
height: 45px;
line-height: 45px;
border: 0 none;
outline: 0 none;
background: transparent;
cursor: pointer;
}
.emailSelBox .label.on{color:black; letter-spacing: 0.5px;}
.emailSelBox .optionList {
position: absolute;
top: 45px;
left: 0;
z-index:100;
width: 100%;
background: #fff;
color: #000;
list-style-type: none;
padding: 0;
border-radius:0 0 15px 15px;
overflow: hidden;
max-height: 0;
transition: .1s ease-in;
}
.emailSelBox .optionList::-webkit-scrollbar {width: 6px;}
.emailSelBox .optionList::-webkit-scrollbar-track {background: transparent; }
.emailSelBox .optionList::-webkit-scrollbar-thumb {background: #303030; border-radius: 45px;}
.emailSelBox .optionList::-webkit-scrollbar-thumb:hover {background: #303030;}
.emailSelBox.active .optionList {max-height: 500px;}
.emailSelBox .optionList_item {
font-size: 14px;
letter-spacing: 0.5px;
padding: 0px 16px;
transition: .1s;
height: 42px;
display: flex;
align-items: center;
cursor: pointer;
}
.emailSelBox .optionList_item:hover {background: #FAFAFA;}
/* -- */
/*--문의내용,약관동의--*/
.DI-inquiryAgree{margin-top: 47px;}
/* 문의작성박스 , 동의체크박스 공통 css*/
.DITextareaBox,
.agreeBox{width: 100%; height: auto; max-height: auto;}
/* 문의내용박스 */
.DITextareaBox{padding: 5px;}
.DITextarea{
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 21px;
word-break: keep-all;
width: 100%;
height: 100%;
padding: 5px 10px;
box-sizing: border-box;
border: none;
letter-spacing: 0.5px !important;
}
.DITextarea::placeholder{ font-size: 14px; color: #CCCCCC; font-family: 'Pretendard Variable';}
/* -- */
/* 약관동의 */
.agreeBoxCheck{
height: 45px;
line-height: 45px;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ddd;
padding: 0 16px 0 16px;
box-sizing: border-box;
position: relative;
}
.agreeBoxCheck_label{cursor: pointer; height: 100%;}
.agreeBoxCheck_label span{color: #2D8CE6;}
.agreeBoxCheck_cheinp{display: none;}
.agreeBoxCheck_cheinp + .agreeBoxCheck_label{
cursor: pointer;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
background-image: url(/assets/_img/sub/curriculum/renewcour/check.svg);
background-repeat: no-repeat;
background-position: center;
background-size:cover;
}
.agreeBoxCheck_cheinp:checked + .agreeBoxCheck_label::after{
content:'';
background-image: url(/assets/_img/sub/curriculum/renewcour/check2.svg);
position: absolute;
left: 0;
top:0;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.agreeBoxText{
padding: 12px 16px 14px 16px;
color: #A7A7A7 !important;
font-size: 14px;
line-height: 20px;
}
.agreeBoxText_contents{letter-spacing: -0.1px; word-break: keep-all;}
.agreeBoxText_detail{margin-top: 14px; word-break: keep-all;}
.agreeBoxText_detail p{letter-spacing: 0.1px;}
.agreeBoxText span{font-weight: 600;}
/* -- */
/* 문의 등록하기 버튼 */
.inquiryBtnBox{display: flex; justify-content: center;}
.inquiryBtn{
min-width: 212px;
max-width: 310px;
min-height: 56px;
max-height: 60px;
background-color:#2D8CE6;
color: white;
font-family: inherit;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.5px;
border-radius: 50px;
margin-top: 50px;
border: none;
cursor: pointer;
}
.inquiryBtn:hover{background-color: #2083e1;}
/* ///// 문의하기 부분 class 안내 ///// */
.directBlue{border-color: #00A2FF !important; box-shadow: 0 0 0px 0.57px #00A2FF;}
.directRed{
border-color: #FF4747 !important;
box-shadow: 0 0 0px 0.57px #FF4747;
}
.directRed::placeholder{color: #FF4747;}
.directTextRed::placeholder{color: #FF4747;}
/*
- 아래 class들은 .detailInformBox 박스 안 'input' 과 .DITextareaBox에 클래스 적용하시면 됩니다.
directBlue : 작성되고 있을 때 적용됨 (하늘색 테두리)
directRed : 작성되지 않은 항목을 표시하기 위해 적용됨 (빨간색 테두리)
directTextRed : 작성되지 않은 항목을 표시하기 위해 적용됨 (빨간색 테두리)
( 이 클래스 .DITextareaBox 안에 textarea 따로 적용해주셔야 합니다.)
*/
@media all and (min-width: 350px) {
/* 네비게이션css */
.renewCurriNavBar{padding: 7px 10px 8px 10px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn{min-width:22%;}
.renewCurriNavBar_btnBox .submitHrdBtn{min-width:26%;}
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain_p{width: 90%;}
/* --end--- */
/* ------------sec4_prospect------------ */
.prostextB { gap: 12px; padding: 0 10px 0 14px; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail--center{width: 95%;}
/* --end--- */
}
@media all and (min-width: 380px) {
/* --------------sec1_intro-------------- */
.courThumBoxBtnG {gap: 9px;}
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetail{padding:14px 8px 12px 14px;}
.salaryDetail_img {height: 48px;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail--center{width: 92%;}
/* --end--- */
}
@media all and (min-width: 400px) {
/* 네비게이션css */
.renewCurriNavBar{width: 96%;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn{min-width:23%; min-height: 30px;}
.renewCurriNavBar_btnBox .submitHrdBtn{min-width:26%; min-height: 30px;}
/* --end--- */
/* ------------sec1_intro------------ */
.courThumBoxBtnG {width: 97%; gap: 10px; padding-left: 2px;}
.courThumBoxBtnG_p, .courThumBoxBtnG_a{min-width: 31.5%; font-size: 14px;}
.courTextBoxTG_h1{font-size: 28px; line-height: 32px;}
.courTextBoxKateG_keyWord p{padding: 4px 7.5px 3.82px 7.5px}
.courTextBoxKateG_program p {padding: 4px 7.5px;}
/* --end--- */
/* ------------curriList------------ */
.curriListContainer{padding: 34px 14px 45px 28px;}
.curriListTitle{ margin-right: 14px;}
.curriList_closeBtn{top: 17px; right: 14px;}
.curriListSteps {padding-right: 14px;}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 98%; }
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetail{padding: 16px 10px 14px 13px ; gap: 15px; max-height: 110px;}
.salaryDetail_img {height: 55px;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail{min-width: 88%; margin: 0 auto; padding: 35px 22px 35px 22px;}
.careDetail--center{width: 100%;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{width: 88%;}
.whygDetail--num5{width: 88%;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사박스 */
.detailBox_titleB {flex-direction: row; align-items: flex-end; }
/* .detailBox_titleB p {line-height: 32px;} */
/* .detailBox_titleB p > span:last-child{line-height: 31px;} */
/* 만족도 & 수강후기 */
.courSatisGraphBox{min-height: 120px;}
.courSatisGraph_name{font-size: 11px;}
/* --end--- */
}
@media all and (min-width: 440px) {
/* ------------curriList------------ */
.curriListContainer{padding: 35px 15px 45px 30px;}
.curriListTitle{padding-bottom: 25px; margin-right: 15px;}
.curriListTitle_p {font-size: 17px; margin-bottom: 4px;}
.curriListTitle_h1 {font-size: 25px;}
.curriList_closeBtn{top: 25px; right: 15px; width: 20px; height: 20px;}
.curriListSteps .steps_h1{font-size: 23px; line-height: 28px;}
.curriListSteps .steps_ul li{font-size: 16px; line-height: 19px; margin-bottom: 12px;}
/* --end--- */
/* ------------sec1_intro------------ */
.courThumBoxBtnG { gap: 11px; padding-right: 3px;}
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain_p{width: 77%;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail--center{width: 90%;}
/* --end--- */
}
@media all and (min-width: 480px) {
/* 네비게이션css */
.renewCurriNavBar{width: 95%; gap: 6px;}
.renewCurriNavBar_p {font-size: 13px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn{min-height: 32px;}
.renewCurriNavBar_btnBox .submitHrdBtn{min-width:27%; min-height: 32px;}
.naviImg { display: block; height: 15px;}
/* --end--- */
/* ------------sec1_intro------------ */
.sec1_intro{padding-top: 50px;}
.courThumBox{width: 90%;}
.courThumBoxImgG_img{width: 100%;}
.courThumBoxBtnG {width: 100%; padding-right: 2px;}
.courThumBoxBtnG_p, .courThumBoxBtnG_a{
min-height: 42px; line-height: 42px;
font-size: 15px;
}
.courTextBoxKateG_keyWord, .courTextBoxKateG_program{gap: 7px;}
.courTextBoxKateG_program{ margin-top: 7px;}
.courTextBoxKateG_keyWord p, .courTextBoxKateG_program p {font-size: 13px;}
.courTextBoxKateG_keyWord p { padding: 5px 9.5px 3.8px 9.5px; }
.courTextBoxKateG_program p { padding: 4px 9.5px; }
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain {padding: 20px 14px 25px;}
.detailExplain_p{width: 95%;}
.detailStepText {padding-top: 30px; padding-bottom: 35px;}
/* --end--- */
/* ------------curriList------------ */
.curriListContainer{padding: 50px 20px 45px 40px;}
.curriListTitle{padding-bottom: 20px; margin-right: 20px;}
.curriListTitle_p {font-size: 18px; margin-bottom: 6px;}
.curriListTitle_h1 {font-size: 26px;}
.curriList_closeBtn{top: 50px; right: 20px; width: 20px; height: 20px;}
.curriListSteps{padding-right: 20px;}
.curriListSteps .steps{padding-bottom: 15px;}
.curriListSteps .steps_p{font-size: 15px;}
/* --end--- */
/* ------------sec4_prospect------------ */
.prostextB { padding: 0px 10px 0 18px; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail{padding: 30px 18px 24px 18px;}
.careDetail--center{width: 88%;}
.careDetailTop_img { width: 58px; height: 53px; }
.careDetailTop_text p { font-size: 17px; line-height: 18px;}
.careDetailTop_text h5 { font-size: 22px; line-height: 28px;}
.careDetailBott_p { font-size: 16px; }
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetail--num5{gap: 30px;}
.whygDetail--num5Img{padding: 0 0 20px 0;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 만족도 & 수강후기 */
.courSatisStar_p {font-size: 16px;}
.courSatisStar_h1{font-size: 45px; line-height: 60px;}
.courSatisGraphGroup{gap: 12px;}
.courSatisGraphBox{min-height: 145px;}
.courSatisGraph_point {font-size: 18px;}
.courSatisGraph_name{font-size: 12px; letter-spacing: 0.1px; color: #777;}
.afterCourBoxtitle .searchTab{gap:40px;}
.courReDeBox{padding-bottom: 22px;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.brandchBtns_btn { padding: 7px 12px; }
/* --end--- */
}
@media all and (min-width: 500px) {
/* ------------sec1_intro------------ */
.courThumBoxBtnG{gap:12px;}
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain {width: 85%; margin: 0 auto; margin-bottom: 20px;}
.detailExplain_p{width: 79%;}
.detailStep{width: 85%; margin: 0 auto;}
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetail_img { height: 60px; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail { min-width: 80%; }
.careDetail--center{width: 90%;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{width: 80%;}
.whygDetail--num5{width: 80%;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사소개 */
.tutorSwiper .swiper-button-next{right: 2px;}
.tutorSwiper .swiper-button-prev{left: 2px;}
.tutorSwiper .swiper-button-next:after,
.tutorSwiper .swiper-button-prev:after{font-size: 28px;}
/* 만족도 & 수강후기 */
.courSatisStar {padding: 25px 60px 34px 70px;}
.courSatisGraphGroup{gap: 17px;}
.courSatisGraphBox{min-height: 149px; min-width: 14.5%;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.brandchBtns {grid-row-gap: 8px; grid-column-gap: 8px;}
.brandchBtns_btn{padding: 7px 14px; font-size: 15px;}
/* --end--- */
}
@media all and (min-width: 520px) {
/* ------------curriList------------ */
.curriListContainer{max-width: 420px;}
.curriList.stepOn .curriListContainer{left:calc(100% - 420px);}
/* --end--- */
}
@media all and (min-width: 540px) {
/* 네비게이션css */
.renewCurriNavBar {padding: 8px 10px 9px 10px;}
.renewCurriNavBar_btnBox{gap: 8px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn,
.renewCurriNavBar_btnBox .submitHrdBtn{font-size: 13px;}
/* --end--- */
/* ------------sec1_intro------------ */
.sec1_intro{padding-top: 55px;}
.courThumBox{width: 85%;}
.courThumBoxBtnG_aInner{gap: 8px;}
.courTextBox{width: 85%; padding-top: 60px;}
.courTextBoxKateG_keyWord, .courTextBoxKateG_program{gap: 8px;}
.courTextBoxKateG_program{ margin-top: 8px;}
.courTextBoxKateG_keyWord p, .courTextBoxKateG_program p{font-size: 14px;}
.courTextBoxKateG_keyWord p { padding: 5px 12px 3.8px 12px; }
.courTextBoxKateG_program p { padding: 4px 12px; }
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain {width: 75%;}
.detailStep{width: 75%;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.curriImgBox{width: 88%; margin-top: 50px; margin-bottom: 40px;}
.notiP{color: rgb(0 0 0 / 45%);}
/* --end--- */
/* ------------sec4_prospect------------ */
.prostextB { padding: 0px 10px 0 20px; gap: 14px; }
.prostextB_p {font-size: 15px;}
.prostextB .checkBoxImg {width: 18px; height: 18px; }
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetail {max-height: 115px;}
.salaryDetail_text h1 { font-size: 18px; line-height: 23px; }
.salaryDetail_text p, .salaryDetail_text h5 { font-size: 15px; line-height: 18px; }
.salaryDetail_text h5 { font-size: 14px; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail--center{width: 88%;}
.careDetailTop_img { width: 60px; height: 55px; }
/* --end--- */
/* --------------sec9_interview-------------- */
.interv_textBox_h1{font-size: 19px;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사박스 */
.tIntroBox {padding: 54px 20px 42px 20px;}
.profileBox_imgB{width: 130px; height: 130px;}
.detailBox_titleB h1{font-size: 26px;}
.detailBox_titleB p{font-size: 16px; line-height: 21px;}
/* .detailBox_titleB p > span:last-child{line-height: 34px;} */
/* 만족도 & 수강후기 */
.courSatisStar_p {font-size: 18px;}
.courSatisStar_h1{font-size: 48px; margin-bottom: 5px;}
.courSatisGraphGroup{gap: 20px;}
.courSatisGraphBox{min-width: 13.8%;}
.courSatisGraph_name{letter-spacing: 0.2px; color: #919191;}
.afterCourBoxtitle .searchTab_select{font-size: 15px;}
.thumb_img{width: 45px; height: 45px;}
.reDe_thumb {margin-bottom: 13px;}
.reDe_courName {font-size: 14px;}
.reDe_text{font-size: 15px; line-height: 22.5px;}
/* --end--- */
}
@media all and (min-width: 600px) {
/* ------------sec1_intro------------ */
.courThumBoxBtnG{gap:13px;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.curriImgBox{width: 83%;}
.notiP{font-size: 13px;}
/* --end--- */
/* ------------curriList------------ */
.curriListContainer{max-width: 430px;}
.curriList.stepOn .curriListContainer{left:calc(100% - 430px);}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 92%; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail { min-width: 75%; }
.careDetail--center{width: 80%;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{width: 75%;}
.whygDetail--num5{width: 75%;}
/* --end--- */
/* --------------sec9_interview-------------- */
.interv_img{height: 170px;}
.interv_textBox_h1{font-size: 20px;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 만족도 & 수강후기 */
.afterCourBoxtitle {margin-top: 70px;}
.afterCourBoxtitle_h1 {font-size: 20px;}
.courSatisGraphGroup{gap: 26px;}
.courSatisGraphBox{min-width: 12.8%;}
.courSatisGraph_name{
font-size: 13px; line-height: 15px;
color: #9f9f9f;
bottom: -38px;
}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.DI-namePhone{ flex-direction: row; gap: 45px; }
.emailBox {
flex-direction: row;
gap: 0px;
--emailSelBoxW: calc(34.28% - 14.5px);
--emailBoxW: calc(100% - var(--emailSelBoxW));
width: var(--emailBoxW);
}
.emailBox div:nth-child(1) {
margin-right: 24px;
--Emailbox: calc(var(--emailBoxW) - 29px);
width: calc(var(--Emailbox) * 2);
}
.emailBox div:nth-child(1)::after {font-size: 18px; right: -19.5px;}
.emailBox div:nth-child(2) {
margin-right: 5px;
--Emailbox: calc(var(--emailBoxW) - 29px);
width: calc(var(--Emailbox) * 2);
}
.emailBox .DIinput{width: 100%;}
.DIinput{ padding-left: 12px; padding-right: 12px; }
.emailSelBox .label{width: 100%; padding-left: 9px; padding-right: 8px;}
.emailSelBox .optionList_item { padding: 0px 11px; }
.emailSelBox{
--EmailSelBox: calc(50% - 14.5px);
width: var(--EmailSelBox) !important;
top: 0px;
right: calc(var(--EmailSelBox) * -1);
left: unset;
}
span.sel_arrow { width: 16px; height: 6px; }
.sel_arrow.on::after { width: 16px; height: 6px; }
.DITextarea{ padding: 5px 7px;}
.DI-inquiryAgree { margin-top: 0px;}
.agreeBoxCheck{padding: 0 12px 0 12px;}
.agreeBoxText {padding: 12px 12px 14px 12px;}
/* --end--- */
}
@media all and (min-width: 640px) {
/* 네비게이션css */
.renewCurriNavBar{
width: 98%;
flex-direction: row; align-items: center;
padding: 8px 10px;
}
.renewCurriNavBar_p {font-size: 12px;}
.renewCurriNavBar_btnBox{width:fit-content; justify-content: end; gap: 6px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn{min-width: 23%; padding: 0 5px ;}
.renewCurriNavBar_btnBox .personalInquiryBtn{min-width: 29%; padding: 0 5px;}
.renewCurriNavBar_btnBox .submitHrdBtn{min-width:30%;}
.renewCurriNavBar_btnBox:has(.tuitionFeeBtn--nowon) .shareBtn{min-width: 25%;}
/* --end--- */
/* ------------sec1_intro------------ */
.courThumBox{width: 80%;}
.courThumBoxBtnG_p, .courThumBoxBtnG_a{
min-height: 45px; line-height: 45px; font-size: 16px;
}
.courThumBoxBtnG_aInner{gap: 10px;}
.courThumBoxBtnG_aInner img {width: 14px;}
.courTextBox{width: 80%; }
.courTextBoxKateG_keyWord, .courTextBoxKateG_program{gap: 9px;}
.courTextBoxKateG_program{ margin-top: 9px;}
.courTextBoxKateG_keyWord p, .courTextBoxKateG_program p{font-size: 15px;}
.courTextBoxKateG_keyWord p{padding: 6px 14px 3.6px 14px}
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain_p{width: 95%;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.curriImgBox{width: 80%;}
.notiP{font-size: 14px;}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 88%; }
.prostextB_p {font-size: 16px;}
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetail {max-height: 107px; padding: 16px 10px 12px 15px; gap: 17px;}
.salaryDetail_text h1 {font-size: 21px;}
.salaryDetail_text > h1 > span {font-size: inherit;}
.salaryDetail_text p, .salaryDetail_text h5 {font-size: 16px; line-height: 19px;}
.salaryDetail_text h5 {
font-size: 15px; font-weight: 500; margin-top: 6px;
}
.salaryDetail_img { height: 65px; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail{min-width: 70%;}
.careDetail--center{width: 83%;}
.careDetailTop_text p {font-size: 18px; line-height: 20px;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{width:68%;}
.whygDetail--num5{width: 68%;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 만족도 & 수강후기 */
.courSatisGraphBox{min-width: 11.8%;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.emailSelBox .label{padding-left: 12px; padding-right: 12px;}
.emailSelBox .optionList_item { padding: 0px 12px; }
/* --end--- */
}
@media all and (min-width: 680px) {
/* ------------sec1_intro------------ */
.courThumBoxBtnG{gap:14px;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.curriImgBox{width: 75%; margin-top: 60px; margin-bottom: 50px;}
.notiP { font-size: 15px; }
/* --end--- */
/* ------------curriList------------ */
.curriListContainer{max-width: 440px;}
.curriList.stepOn .curriListContainer{left:calc(100% - 440px);}
/* --end--- */
}
@media all and (min-width: 700px) {
/* 네비게이션css */
.renewCurriNavBar{ padding: 10px 12px;}
.renewCurriNavBar_p {font-size: 13px;}
.renewCurriNavBar_btnBox{gap: 8px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn{min-width: 25%; min-height: 34px;}
.renewCurriNavBar_btnBox .personalInquiryBtn{min-width: 29%; min-height: 34px;}
.renewCurriNavBar_btnBox .submitHrdBtn{min-width:32%; min-height: 34px;}
/* --end--- */
/* ------------sec1_intro------------ */
.sec1_intro{padding-top: 60px;}
.courThumBox{width: 75%;}
.courTextBox{width: 75%; }
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain{
width:100%;
margin-bottom: 8px;
padding-top: 28px; padding-bottom: 24px;
}
.detailExplain_p {font-size: 17px; line-height: 22px;}
.detailStepBox {flex-wrap: nowrap; gap: 8px;}
.detailStepText { padding: 22px 10px 20px;}
.detailStepText_h2 { font-size: 24px; line-height: 28px; margin-bottom: 15px; }
.detailStepImg {height:220px;}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 85%; }
.prostextB { padding: 0px 10px 0 22px; justify-content: center;}
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetail {padding: 13.5px 10px 12px 18px; gap: 18px;}
.salaryDetail_text h1 {font-size: 22px; line-height: 27px;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail{min-width: 100%;}
.careDetail--center{width: 100%;}
.careDetailBox {grid-template-columns: repeat(2 , 1fr); gap: 10px;}
.careDetailBott_p { font-size: 15px; }
/* --end--- */
/* --------------sec9_interview-------------- */
.interv_img{height: 185px;}
.interv_textBox {height: 180px; padding: 22px 18px 0px 18px; }
.interv_textBox_h1{margin-bottom: 10px;}
.interv_aTag{bottom: 10px; right: 10px;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사소개 */
.tutorSwiper .swiper-button-next{right: 4px;}
.tutorSwiper .swiper-button-prev{left: 4px;}
.tutorSwiper .swiper-button-next:after,
.tutorSwiper .swiper-button-prev:after{font-size: 30px;}
/* 만족도 & 수강후기 */
.courSatisGraphBox{min-width: 11%;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.branchTabBox_h2 {font-size: 20px; line-height: 24px;}
.brandchBtns_btn{font-size: 16px;}
.DITitle{font-size: 20px; line-height: 24px;}
.DI-namePhone {gap: 55px;}
.DIinput,
.DIinput::placeholder,
.emailSelBox .label ,
.emailSelBox .optionList_item ,
.DITextarea,
.DITextarea::placeholder,
.agreeBoxText {font-size: 15px;}
/* --end--- */
}
@media all and (min-width: 740px) {
/* ------------sec1_intro------------ */
.courThumBoxBtnG{gap:15px;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.curriImgBox { width: 100%; margin-top: 0px; margin-bottom: 0px;}
.curriImgBox--pc{display: block;}
.curriImgBox--mobile{display: none;}
.curMoreBtn{margin-top: 35px;}
.curMoreBtn, .portMoreBtn{min-width: 230px;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.inquiryBtn{min-width: 230px;}
/* --end--- */
}
@media all and (min-width: 768px) {
/* 네비게이션css */
.renewCurriNavBar{width: 95%;}
/* --end--- */
/* 공통타이틀 css */
.titleBox_h1 {line-height: 34px;}
/* --end--- */
/* ------------sec1_intro------------ */
.sec1_intro{padding-top: 70px;}
.sec1_intro .container{flex-direction: row; gap: 30px;}
.courThumBox{width: 100%;}
.courTextBox{width: 95%; padding-top: 0; padding-bottom: 0px;}
.courThumBoxBtnG {margin-top: 10px; gap: 8px; padding-left: 4px; padding-right: 1px; }
.courThumBoxBtnG_p, .courThumBoxBtnG_a{
font-size: 14px;
min-width: 32%;
min-height: 42px; line-height: 42px;
}
.courThumBoxBtnG_aInner {gap: 5px;}
.courThumBoxBtnG_aInner img {width: 12px;}
.courTextBoxKateG_keyWord p, .courTextBoxKateG_program p{ font-size: 13px; }
.courTextBoxKateG_keyWord, .courTextBoxKateG_program{gap: 7px;}
.courTextBoxKateG_program{ margin-top: 7px;}
.courTextBoxKateG_keyWord p{padding: 4.22px 9px 3.6px 9px;}
.courTextBoxKateG_program p {padding: 4px 9px;}
/* --end--- */
/* ------------sec2_outline------------ */
.detail--border{ border-radius: 15px; }
/* --end--- */
/* ------------curriList------------ */
.curriListContainer{max-width: 460px;}
.curriList.stepOn .curriListContainer{left:calc(100% - 460px);}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosBorder {border-radius: 15px;}
.prosImgBox { width: 82%; }
.prostextB_p {font-size: 17px;}
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetail {padding: 13.5px 10px 11px 18px;}
.salaryDetailBorder {border-radius: 15px;}
.salaryDetail_text h5 {font-size: 16px; margin-top: 5px;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetail{min-width: 100%;}
.careDetailBorder {border-radius: 15px;}
.careDetail--center{width: 95%;}
.careDetailBox {gap: 15px;}
.careDetailBott_p { font-size: 16px; }
/* --end--- */
/* --------------sec7_brands-------------- */
.swiper-logo .swiper-slide{margin: 0 32px;}
.logoImg img{width: 95%;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{width: 64%;}
.whygDetail--num5{width: 64%;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사박스 */
.tIntroBox {
flex-direction: row;
align-items: flex-start; gap: 35px;
padding: 35px 30px 40px 35px;
border-radius: 15px;
}
.profileBox_imgB { width: 125px; height: 125px; }
.profileBox_buttonB { width: 130px; }
.detailBox_titleB {padding-bottom: 5px;}
.detailBox_contentsB p{font-size: 15px; line-height: 23px;}
.tutorSwiper .swiper-button-next{right: 2px; top: 50%;}
.tutorSwiper .swiper-button-prev{left: 2px; top: 50%;}
/* 만족도 & 수강후기 */
.afterCourBoxtitle{margin-top: 51px;}
.courSatisStarGraph{
flex-direction: row; justify-content: space-between;
padding: 20px 10px 20px 0px;
}
.courSatisStar{width: 26.5%; padding: 41px 0px 40px 0px; border-right: 1px solid #CCCCCC;}
.courSatisStar_p { font-size: 16px; }
.courSatisStar_h1 {font-size: 45px; margin-bottom: 6px;}
/* .courSatisStar_star{ width: 140.9px; height: 24.89px; } */
.courSatisGraphGroup{ width: 72.2%; gap: 28px; padding: 8px 0px 36px 0px; border-radius: 15px; }
.courSatisGraphBox { min-width: 13.5%; }
.courReDeBox {padding-bottom: 24px;}
.thumb_img{width: 50px; height: 50px;}
.recom{font-size: 13px; }
.countNum{font-size: 13px; font-weight: 500; color: #333;}
.courReDeMoreBtn{border-radius: 15px;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.brandchBtns { grid-row-gap: 10px; grid-column-gap: 10px; }
.DIinput, .emailSelBox, .DITextareaBox, .agreeBox{border-radius: 15px;}
.DIinput{padding-left: 16px; padding-right: 16px;}
.emailBox { --emailSelBoxW: calc(34.2% - 16.5px);}
.emailBox div:nth-child(1) {margin-right: 28px;}
.emailBox div:nth-child(1)::after {font-size: 22px; right: -22.5px;}
.emailSelBox{--EmailSelBox: calc(50% - 16.5px);}
.emailSelBox .label {padding-left: 16px; padding-right: 16px;}
.emailSelBox .optionList_item {padding: 0px 16px;}
span.sel_arrow { width: 22px; height: 8px;}
.sel_arrow.on::after {width: 22px; height: 8px;}
.DITextarea { padding: 7px 9px;}
.agreeBoxCheck { padding: 0 16px 0 16px;}
.agreeBoxText { padding: 14px 16px 14px 16px;}
/* --end--- */
}
@media all and (min-width: 840px) {
/* 네비게이션css */
.renewCurriNavBar{width: 94%; padding: 12px 14px;}
.renewCurriNavBar_p {font-size: 14px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn{min-width:31%;}
.renewCurriNavBar_btnBox .submitHrdBtn{min-width: 36%;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn,
.renewCurriNavBar_btnBox .submitHrdBtn{font-size: 14px; min-height:36px;}
/* --end--- */
/* 공통 css */
.titleBox {margin-bottom: 34px;}
.titleBox_p {font-size: 18px; line-height: 22px;}
.titleBox_h1 {font-size: 30px; line-height: 36px;}
/* --end--- */
/* ------------sec1_intro------------ */
.sec1_intro{padding-top: 75px;}
.courTextBox{width: 100%;}
.courThumBoxBtnG{padding-left: 2px;}
.courThumBoxBtnG_aInner {gap: 8px;}
.courTextBoxKateG_keyWord p, .courTextBoxKateG_program p{font-size: 14px;}
.courTextBoxKateG_keyWord, .courTextBoxKateG_program{gap: 8px;}
.courTextBoxKateG_program{ margin-top: 8px;}
.courTextBoxKateG_keyWord p{padding: 4.22px 12px 3.6px 12px;}
.courTextBoxKateG_program p {padding: 4px 12px;}
.courTextBoxTG_h4 {font-size: 20px;}
.courTextBoxTG_h1 {font-size: 30px; line-height: 36px;}
.courTextBoxKateG{margin-top: 25px;}
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain{margin-bottom: 10px;}
.detailExplain_h3 { font-size: 22px; }
.detailExplain_p { font-size: 18px; }
.detailStepBox{gap: 10px;}
.detailStepText{padding: 26px 10px 24px;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.curMoreBtn{margin-top: 40px;}
/* --end--- */
/* ------------curriList------------ */
.curriListContainer{max-width: 470px;}
.curriList.stepOn .curriListContainer{left:calc(100% - 470px);}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 75%; }
.prostextB { padding: 0; gap: 15px;}
.prostextB_p {font-size: 18px;}
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetail {padding: 13.5px 10px 11px 20px; gap: 20px;}
.salaryDetail_img { height: 70px; }
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{
width: 100%;
margin-bottom: 10px;
flex-direction: row; gap: 12px;
}
.whygDetailGroup--reverse{flex-direction: column;}
.whygDetailGroup{gap: 10px;}
.whygDetail{padding: 20px 16px 20px 16px;}
.whygDetail--num1{min-height: 310px;}
.whygDetail--num2{min-height: 260px;}
.whygDetail--num3{min-height: 260px;}
.whygDetail--num4{min-height: 310px;}
.whygDetail--num5{
width: 100%;
flex-direction: row;
justify-content: space-between;
padding: 0 !important;
}
.whygDetail--num5Text{padding: 20px 0px 20px 16px; }
.whygDetail--num5Img{
padding: 0;
position: relative;
width: 266.5px;
box-sizing: border-box;
margin-right: 65px;
}
.whygDetail_img--PC{position: absolute;
/* top: -31px; */
right: 0; width: 100%;}
.whygDetail_img--PC {display: block;}
.whygDetail_img--MO {display: none;}
.whygDetail_h1-1{line-height: 70px;}
.whygDetail_h1-2 {height: 98px;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사박스 */
.tIntroBox { padding: 35px 38px 40px 38px; }
.profileBox_imgB { width: 130px; height: 130px; }
.profileBox_buttonB { width: 135px; }
/* 만족도 & 수강후기 */
.courSatisStar{width: 27.5%;}
.courSatisStar_p { font-size: 17px; }
.courSatisStar_h1 {font-size: 48px;}
.courSatisGraphGroup{ width: 71.2%; gap: 34px; padding: 8px 0px 38px 0px; }
.courSatisGraphBox { min-width: 12.8%; }
.courSatisGraph_name{
font-size: 14px;
font-weight: 500;
color: #a8a8a8;
line-height: 16px;
bottom: -40px;
}
.reDe_text{font-size: 16px; line-height: 23px;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetailBox{width: 90%; margin: 0 auto; gap: 20px;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.brandchBtns_btn {padding: 10px 18px;}
.emailBox {--emailSelBoxW: calc(34.3% - 18.5px);}
.emailBox div:nth-child(1) {margin-right: 32px;}
.emailBox div:nth-child(1)::after {font-size: 24px; right: -25px;}
.emailSelBox {--EmailSelBox: calc(50% - 18.5px);}
/* --end--- */
}
@media all and (min-width: 900px) {
/* ------------sec3_curriculum------------ */
.notiP{font-size: 16px;}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 74%; }
.prostextB_p {font-size: 19px;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{gap: 18px; margin-bottom: 18px;}
.whygDetailGroup { gap: 18px; }
.whygDetail {padding: 24px 16px 20px 16px;}
.whygDetail--num5Text { padding: 24px 0px 20px 16px; }
.whygDetail--num5Img{width: 269.5px; margin-right: 95px;}
/* --end--- */
}
@media all and (min-width: 940px) {
/* 네비게이션css */
.renewCurriNavBar{width: 92%; padding: 14px 16px; border-radius: 10px;}
.renewCurriNavBar_p {font-size: 14px;}
.renewCurriNavBar_btnBox{gap: 10px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn{min-width:30%;}
.renewCurriNavBar_btnBox .submitHrdBtn{min-width: 40%;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn,
.renewCurriNavBar_btnBox .submitHrdBtn{min-height:38px;}
/* --end--- */
/* 공통 css */
.titleBox {margin-bottom: 36px;}
.titleBox_p {font-size: 20px; line-height: 24px;}
.titleBox_h1 {font-size: 32px; line-height: 37px;}
/* --end--- */
/* ------------sec1_intro------------ */
.sec1_intro{padding-top: 85px;}
.sec1_intro .container{gap: 35px;}
.courThumBoxBtnG {margin-top: 14px; gap: 12px;}
.courThumBoxBtnG_p, .courThumBoxBtnG_a{
border-radius: 13px;
font-size: 15px;
min-width: 31.5%;
min-height: 48px;
line-height: 48px;
}
.courThumBoxBtnG_aInner img{width: 14px;}
.courTextBoxTG_h4 {font-size: 22px; margin-bottom: 10px;}
.courTextBoxTG_h1{font-size: 32px; line-height: 38px;}
.courTextBoxKateG {margin-top: 31px;}
.courTextBoxKateG_keyWord, .courTextBoxKateG_program{gap: 9px;}
.courTextBoxKateG_program{ margin-top: 9px;}
.courTextBoxKateG_keyWord p, .courTextBoxKateG_program p{font-size: 15px; line-height:18px;}
.courTextBoxKateG_keyWord p{padding: 4.5px 14px 3.8px 14px;}
.courTextBoxKateG_program p {padding: 5px 14px 3.8px 14px;}
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain {padding-top: 30px; padding-bottom: 24px;}
.detailExplain_h3 { font-size: 24px; line-height: 26px;}
.detailExplain_p { font-size: 18px; line-height: 25px;}
.detailStepText {padding: 38px 10px 34px;}
.detailStepText_p2 {font-size: 16px; line-height: 20px;}
.detailStepImg{height: 240px;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.notiP{color: rgb(0 0 0 / 35%);}
/* --end--- */
/* ------------curriList------------ */
.curriListContainer{max-width: 490px;}
.curriList.stepOn .curriListContainer{left:calc(100% - 490px);}
.curriListTitle_h1{font-size: 28px;}
.curriListSteps .steps_p{font-size: 16px; margin-bottom: 10px;}
.curriListSteps .steps_h1{font-size: 26px; line-height: 30px;}
.curriListSteps .steps_ul li{margin-bottom: 14px;}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 70%; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetailBox{width: 85%; gap: 25px;}
/* --end--- */
/* --------------sec7_brands-------------- */
.swiper-logo .swiper-slide{margin: 0 45px;}
.logoImg img{width: 100%;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{gap: 20px; margin-bottom: 20px;}
.whygDetailGroup { gap: 20px; }
.whygDetail {padding: 24px 18px 20px 18px;}
.whygDetail--num2{min-height: 270px;}
.whygDetail--num3{min-height: 270px;}
.whygDetail--num5Text{padding: 24px 0 20px 18px;}
.whygDetail--num5Img{width: 274.5px; margin-right: 96px;}
.whygDetail_p {font-size: 16px; line-height: 24px;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사박스 */
.tIntroBox { padding: 40px 40px 45px 40px; }
.profileBox_imgB { width: 135px; height: 135px; }
.profileBox_buttonB { width: 140px; }
.detailBox_contentsB p{font-size: 16px; line-height: 25px;}
/* 만족도 & 수강후기 */
.afterCourBoxtitle_h1{font-size: 24px;}
.afterCourBoxtitle_h1 span{font-size: 16px;}
.afterCourBoxtitle .searchTab_select{font-size: 17px;}
.afterCourBoxtitle .searchTab_select::before{width: 8px; height: 8px;}
.courSatisStar{width: 28.5%;}
.courSatisStar_p { font-size: 18px; margin-bottom: 0;}
.courSatisStar_h1 {font-size: 50px;}
.courSatisGraphGroup{ width: 70.2%; gap:41px; }
.courSatisGraphBox { min-width: 11.6%; }
.courSatisGraph_point{font-size: 19px;}
.courReDeMoreBtn{font-size: 20px; height: 60px; line-height: 60px;}
.recom{font-weight: 500; font-size: 14px;}
.countNum{font-size: 14px;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.emailBox {--emailSelBoxW: calc(34.01% - 18.5px);}
.emailBox div:nth-child(1) {margin-right: 32px;}
.emailBox div:nth-child(1)::after {font-size: 24px; right: -25px;}
.emailSelBox {--EmailSelBox: calc(50% - 18.5px);}
/* --end--- */
}
@media all and (min-width: 980px) {
/* --------------sec8_whyG-------------- */
.whygDetail{padding: 30px 24px 22px 24px;}
.whygDetail--num1{min-height: 320px;}
.whygDetail--num2{min-height: 270px;}
.whygDetail--num3{min-height: 270px;}
.whygDetail--num4{min-height: 320px;}
.whygDetail--num5{min-height: 310px;}
.whygDetail--num5Text{padding: 30px 0 22px 24px;}
.whygDetail--num5Img{width: 294.5px;}
/* --end--- */
}
@media all and (min-width: 1000px) {
/* ------------sec1_intro------------ */
.sec1_intro .container{gap: 40px;}
.courThumBoxBtnG{gap: 10px; padding-left: 1px;}
.courThumBoxBtnG_p, .courThumBoxBtnG_a{
border-radius: 15px;
font-size: 17px; font-weight: 500;
min-width: 31.8%;
min-height: 52px;
line-height: 52px;
}
.courTextBox{width: 97%;}
.courTextBoxKateG_keyWord, .courTextBoxKateG_program{gap: 10px;}
.courTextBoxKateG_program{ margin-top: 10px;}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 68%; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetailBox{width: 80%; gap: 25px;}
.careDetail--center{width: 92%;}
/* --end--- */
/* --------------sec10_teacher-------------- */
.courSatisGraph_name{font-weight: 400;}
/* --end-- */
/* --------------sec11_inquiry-------------- */
.sec11_inquiry .titleBox{margin-bottom: 52px;}
.branchTabBox{margin-bottom: 30px;}
.brandchBtns { grid-row-gap: 12px; grid-column-gap: 12px; }
.brandchBtns_btn {padding: 10px 20px; font-size: 18px;}
.detailInformBox{gap: 25px;}
.DIinput,
.DIinput::placeholder,
.emailSelBox .label ,
.emailSelBox .optionList_item ,
.DITextarea,
.DITextarea::placeholder,
.agreeBoxText { font-size: 16px;}
.DIinput{padding-left: 18px; padding-right: 18px;}
.DIinput, .emailSelBox{height: 48px; line-height: 48px;}
.DI-namePhone {gap: 20px;}
.emailBox div:nth-child(1) {margin-right: 38px;}
.emailBox div:nth-child(1)::after {font-size: 25px; right: -28.9px;}
.emailSelBox .label{
height: 48px; line-height: 48px;
padding-left: 18px; padding-right: 18px;
}
.emailSelBox .optionList{top: 50px;}
.emailSelBox .optionList_item{height: 44px; padding: 0px 18px;}
.emailSelBox.active{height: 320px;}
.DI-inquiryAgree {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.DITextareaBox, .agreeBox { height: 250px;}
.DITextarea {padding: 9px 13px;}
.agreeBoxCheck { padding: 0 18px 0 18px;}
.agreeBoxText { padding: 14px 18px 14px 18px;}
/* --end--- */
}
@media all and (min-width: 1040px) {
/* 네비게이션css */
.renewCurriNavBar{padding: 16px 18px; border-radius: 12px;}
.renewCurriNavBar_p {font-size: 16px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn,
.renewCurriNavBar_btnBox .submitHrdBtn{border-radius: 8px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn,
.renewCurriNavBar_btnBox .submitHrdBtn{min-height:42px; font-size: 16px;}
/* --end--- */
/* 공통 css */
.titleBox_h1 {font-size: 36px; line-height: 44px;}
/* --end--- */
/* ------------sec1_intro------------ */
.sec1_intro .container{gap: 48px;}
.courThumBoxBtnG{gap: 11px;}
.courThumBoxBtnG_p, .courThumBoxBtnG_a{ font-size: 18px; min-height: 55px; line-height: 55px; }
.courTextBoxTG_h4 {font-size: 24px;}
.courTextBoxTG_h1{font-size: 36px; line-height: 42px;}
.courTextBox{width: 95%;}
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain { margin-bottom: 20px; }
.detailExplain_h3 {font-size: 26px; line-height: 28px;}
.detailExplain_p {font-size: 20px;}
.detailStepBox { gap: 20px; }
.detailStepText {padding: 38px 10px 44px;}
.detailStepText_h2 {font-size: 28px; line-height: 36px;}
.detailStepImg {height: 260px;}
/* --end--- */
/* ------------curriList------------ */
.curriListContainer{max-width: 500px;}
.curriList.stepOn .curriListContainer{left:calc(100% - 500px);}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 65%; }
.prostextB_p {font-size: 20px;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetailBox{width: 100%; grid-template-columns: repeat(3 , 1fr); gap: 16px;}
.careDetail {padding: 28px 16px 24px 16px;}
.careDetail--center {width: 100%;}
.careDetailTop { gap: 15px;}
.careDetailBott_p { font-size: 15px;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사박스 */
.tIntroBox { padding: 40px 40px 44.5px 40px; }
.profileBox_imgB { width: 145px; height: 145px; }
.profileBox_buttonB { width: 145px; }
.detailBox_titleB h1 {font-size: 28px;}
.detailBox_titleB p{font-size: 18px;}
.detailBox_contentsB p{font-size: 16px; line-height: 25px;}
/* 만족도 & 수강후기 */
.courReDeBox {padding-bottom: 30px;}
.afterCourBoxtitle {margin-bottom: 28px;}
.afterCourBoxtitle_h1{font-size: 28px;}
.afterCourBoxtitle .searchTab_select{font-size: 18px;}
.courSatisStar_h1 {font-size: 52px;}
.courSatisGraphGroup{ gap:46px; padding: 8px 0px 41px 0px;}
.courSatisGraph_name{font-size: 15px; line-height: 17px; bottom: -44px;}
.recom{font-size: 15px;}
.countNum{font-size: 15px;}
.courReDeMoreBtn { font-size: 21px; height: 64px; line-height: 64px; }
/* --end--- */
}
@media all and (min-width:1080px){
/* --------------sec10_teacher-------------- */
/* 만족도 & 수강후기 */
.courSatisGraphBox{min-width: 80px;}
.courSatisGraphGroup {gap: 50px;}
}
@media all and (min-width:1100px){
/* 네비게이션css */
.renewCurriNavBar {padding: 18px 20px; border-radius: 14px;}
.renewCurriNavBar_p {font-size: 17px;}
.renewCurriNavBar_btnBox { gap: 10px;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn{min-width: 33%;}
.renewCurriNavBar_btnBox .personalInquiryBtn{min-width: 32%;}
.renewCurriNavBar_btnBox .submitHrdBtn{min-width: 42%;}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn,
.renewCurriNavBar_btnBox .submitHrdBtn{
border-radius: 10px; min-height: 48px; font-size: 17px;
}
.naviImg { height: 18px;}
/* --end--- */
/* 공통 css */
.titleBox { margin-bottom: 45px;}
.titleBox_h1 {font-size: 38px; line-height: 44px;}
/* --end--- */
/* ------------sec1_intro------------ */
.sec1_intro .container{gap: 50px;}
.courThumBoxBtnG{gap: 12px;}
.courThumBoxBtnG_p, .courThumBoxBtnG_a{font-size: 19px; min-height: 58px; line-height: 58px;}
.courThumBoxBtnG_aInner{gap: 10px;}
.courThumBoxBtnG_aInner img { width: 16px; }
.courTextBoxTG_h4 {font-size: 25px;}
.courTextBoxTG_h1{font-size: 38px; line-height: 44px;}
.courTextBox{width: 90%; }
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain { margin-bottom: 20px; }
.detailExplain_h3 {font-size: 30px; line-height: 33px;}
.detailStepBox { gap: 26px; }
.detailStepImg {height: 278px;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.notiP{font-size: 17px;}
.curMoreBtn {margin-top: 45px;}
.curMoreBtn, .portMoreBtn{
font-size: 18px;
min-width: 245px; min-height: 60px;
}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosImgBox { width: 60%; }
/* --end--- */
/* --------------sec6_care-------------- */
.careDetailBox{gap: 20px;}
.careDetail--center {width: 95%;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{gap: 24px; margin-bottom: 24px;}
.whygDetailGroup { gap: 24px; }
.whygDetail{padding: 45px 35px 30px 35px;}
.whygDetail--num1{min-height: 320px;}
.whygDetail--num2{min-height: 300px;}
.whygDetail--num3{min-height: 300px;}
.whygDetail--num4{min-height: 320px;}
.whygDetail--num5{min-height: 320px;}
.whygDetail--num5Text{padding: 45px 0 40px 35px;}
.whygDetail_h2{font-size:30px; line-height: 36px; margin-bottom: 20px;}
.whygDetail_h1-1 {font-size: 66px;}
.whygDetail_h1-2{font-size: 40px; line-height: 46px;}
.whygDetail_h3 {font-size: 20px;}
.whygDetail_h1{font-size: 40px; line-height: 46px;}
.whygDetail_p{line-height: 25px;}
.whygDetail--num5Img{width: 317.5px; margin-right: 136px;}
/* --end--- */
/* --------------sec9_interview-------------- */
.interv_img{height: 200px;}
.interv_textBox{height: 190px; padding: 20px 19px 0 19px;}
.interv_textBox_h1{font-size: 22px; margin-bottom: 14px;}
.interv_textBox_p{font-size: 15px; line-height: 23px;}
.interv_aTag {width: 29px; height: 29px; right:8px; bottom:8px;}
.interv_aTag img{width: 15px;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.inquiryBtn{
font-size: 18px;
min-width: 245px; min-height: 60px;
}
/* --end--- */
}
@media all and (min-width: 1200px) {
section{padding-top: 100px; padding-bottom: 100px;}
.container{width: 100%;}
/* 공통타이틀 css */
.titleBox{ text-align: center; margin-bottom: 50px;}
.titleBox_p{ font-size: 20px; font-weight: 500; line-height: 24px; margin-bottom: 5px;}
.titleBox_h1{font-size: 40px; font-weight: 600; line-height: 47px;}
/* -----------------------------ux/ul 디자인 과정--------------------------- */
/* ------------sec1_intro------------ */
.sec1_intro{ padding-top: 100px; max-height: 727px; }
.sec1_intro .container{ flex-direction: row; gap: unset; }
.courThumBox{ width: 540px; }
.courThumBoxImgG{ height: 450px; display: block; margin-bottom: 0px; }
.courThumBoxImgG_img{position: absolute; bottom: 0;left: 0; width: auto;}
.courThumBoxBtnG{ gap: 20px; margin-top: 15px; padding-left: 1.8px; padding-right: 1.8px;}
.courThumBoxBtnG_p,
.courThumBoxBtnG_a{
width: 166px;
min-width: auto;
height: 62px;
font-size: 20px;
}
.courThumBoxBtnG_aInner{ gap: 10px; }
.courThumBoxBtnG_aInner img{width: auto;}
.courTextBox{width: 490px;}
.courTextBoxTG_h4{line-height: 30px;}
.courTextBoxTG_h1{ font-size: 40px; line-height: 47px;}
.courTextBoxKateG_keyWord p{ padding: 4px 14px;}
.courTextBoxKateG_program p{ padding: 4px 12px;}
/* --end--- */
/* ------------sec2_outline------------ */
.detailExplain{
height: 148px;
padding: unset;
padding-top: 26px; padding-bottom: 36px;
margin-bottom: 30px;
}
.detailExplain_h3{ line-height: 35px; margin-bottom: 10px; }
.detailExplain_p{ font-size: 22px; line-height: 26px; }
.detailStepBox{gap: 30px;}
.detailStep{ width: 340px; height: 525px;}
.detailStepText{padding-top:35px; padding-bottom: 50px;}
.detailStepText_h2{font-size: 30px; line-height: 38px;}
/* --end--- */
/* ------------sec3_curriculum------------ */
.notiP{font-size: 18px; line-height: 21px;}
.curMoreBtn,.portMoreBtn{ font-size: 20px; font-weight: 500; }
.curMoreBtn{min-width: 258px; min-height: 62px; margin-top: 50px;}
.portMoreBtn{min-width: 277px; min-height: 62px;}
/* --end--- */
/* ------------curriList------------ */
.curriList{
width: 100%;
height: 100%;
display: flex;
justify-content: end;
background-color: rgb(0 0 0 / 50%);
backdrop-filter: blur(5px);
position: fixed;
top: 0;
left: 100%;
z-index: 20000;
}
.curriList.stepOn{left: 0%;}
.curriListContainer{
max-width: 510px;
height: 100%;
background-color: #ffffff;
padding: 45px 20px 45px 40px;
box-sizing: border-box;
position: absolute;
left: calc(100% + 510px);
transition: 0.5s;
}
.curriList.stepOn .curriListContainer{left: calc(100% - 510px);}
.curriListTitle{ padding-bottom: 19px; border-bottom: 1px solid #CCCCCC;}
.curriListTitle_p{ font-size: 18px; font-weight: 400; line-height: 21px; margin-bottom: 6px;}
.curriListTitle_h1{ font-size: 30px; font-weight: 600; line-height: 35px;}
.curriList_closeBtn{top:45px; right: 40px; width: 20px; height: 20px;}
.curriListSteps{ height: calc(100% - 82px); padding-right: 20px; overflow-y: scroll;}
.curriListSteps::-webkit-scrollbar{width: 2px; cursor: pointer;}
.curriListSteps::-webkit-scrollbar-thumb{height: 20% !important; background-color: #bababa; border-radius: 10px; cursor: pointer;}
.curriListSteps::-webkit-scrollbar-track{background-color: #e8e8e8;}
.curriListSteps .steps{ padding-top: 20px; padding-bottom: 15px; border-bottom: 1px solid #CCCCCC;}
.curriListSteps .steps_p{
font-size: 16px;
font-weight: 400;
line-height: 19px;
color: #A8A8A8;
margin-bottom: 11px;
}
.curriListSteps .steps_h1{
font-size: 28px;
font-weight: 600;
line-height: 33px;
margin-bottom: 15px;
}
.curriListSteps .steps_ul li{
font-size: 16px;
font-weight: 500;
line-height: 19px;
color: #333333;
margin-bottom: 15px;
}
/* --end--- */
/* ------------sec4_prospect------------ */
.prosBorder{ margin-bottom: 20px;}
.prosImgBox{ width: fit-content; height: 435px; }
.prostextB{ gap: 16px; }
.prostextB_p{font-size: 22px; line-height: 26px;}
/* --end--- */
/* --------------sec5_salary-------------- */
.salaryDetailBox{width: 100%;}
.salaryDetail{
gap: 25px;
padding: 15px 0 15px 27px ;
margin-bottom: 10px;
}
.salaryDetail_img{height: 77px;}
.salaryDetail_text h1{font-size: 24px; line-height: 29px;}
.salaryDetail_text p,
.salaryDetail_text h5{letter-spacing: 0.2px;}
/* --end--- */
/* --------------sec6_care-------------- */
.careDetailBox{gap: 30px;}
.careDetail{padding: 30px 24px 30px 20px;}
.careDetail--center{width: 100%;}
.careDetailTop{ margin-bottom: 25px;}
.careDetailTop_text p{font-size: 20px; line-height: 24px;}
.careDetailTop_text h5{line-height: 26px;}
.careDetailBott_p{ font-size: 16px; padding-left: 12px; letter-spacing: -0.2px;}
/* --end--- */
/* --------------sec7_brands-------------- */
.swiper-logo .swiper-slide{margin: 0;}
.logoImg{ margin-right:80px;}
/* --end--- */
/* --------------sec8_whyG-------------- */
.whygDetailGroupBox{ gap: 30px; margin-bottom: 22px; }
.whygDetailGroup{ gap: 22px;}
.whygDetail{ padding: 53px 40px 50px 40px; }
.whygDetail--num1,
.whygDetail--num2,
.whygDetail--num3,
.whygDetail--num4{ width: 525px;}
.whygDetail--num1{height: 358px;}
.whygDetail--num2{height: 336px; padding-top: 55.085px;}
.whygDetail--num3{height: 336px; padding-top: 55.085px;}
.whygDetail--num4{height: 359px; }
.whygDetail--num5{width: 100%; height: 359px; justify-content: space-between;}
.whygDetail--num4 .whygDetail_h3,
.whygDetail--num5 .whygDetail_h3{margin-bottom: 6px;}
.whygDetail--num5Text{padding: 53px 0px 50px 40px;}
.whygDetail--num5Img{width: auto; margin-right: 120px;}
.whygDetail--num5 .whygDetail_img{width: 345px; height: 359px; position: relative;}
.whygDetail_h3{font-size: 24px; line-height: 29px;}
.whygDetail_h2{ font-size: 31px; line-height: 38px; margin-bottom: 19.985px; }
.whygDetail_h1-1{ font-size: 72px; line-height: 85px; margin-bottom: 19px;}
.whygDetail_h1-2{ font-size: 44px; height: 104px; line-height: 53px; margin-bottom: 20px; }
/* --end--- */
/* --------------sec9_interview-------------- */
.intervSlidebox{margin-top: unset;}
.interv_img{height: 216px;}
.interv_textBox{ height: 209px; padding: 20px 52px 48px 24px; }
.interv_textBox_h1{
font-size:24px;
line-height: 29px;
margin-bottom:18px;
}
.interv_textBox_p{ font-size: 16px; line-height:25px;}
.interv_aTag{width: 34px; height: 34px; bottom: 15px; right: 15px; }
.interv_aTag img{width: 18px;}
/* --end--- */
/* --------------sec10_teacher-------------- */
/* 강사소개 */
.tIntroBox{ height: 329px; }
.tIntroBox_profileBox{width: 150px}
.profileBox_imgB{ width: 150px; height: 150px;}
.profileBox_buttonB{ width: 150px; }
.detailBox_titleB{ padding-bottom: 10px; }
.detailBox_titleB h1{ font-size: 34px; }
.detailBox_titleB p{ font-size: 20px; line-height: 25px;}
.detailBox_contentsB p{ line-height: 30px; }
.tutorSwiper .swiper-button-next{right: 4px;}
.tutorSwiper .swiper-button-prev{left: 4px; }
.tutorSwiper .swiper-button-next:after,
.tutorSwiper .swiper-button-prev:after{font-size: 32px;}
/* 강의만족도&수강후기 */
.courSatisStarGraph{ height: 250px; padding: 20px 0 20px 0; justify-content: unset; }
.courSatisStar{ width: 310px; padding: 35px 60px 44px 70px;}
.courSatisStar_p{ font-size: 20px; margin-bottom: 5px; }
.courSatisStar_h1{ font-size:55px; line-height: 65px; margin-bottom: 5px;}
.courSatisGraphGroup{ width: 100%; padding: 12px 70px 0 60px; gap: 60px; }
.courSatisGraphBox{ min-width: auto; width: 80px; height: 152px; }
.courSatisGraph_point{ font-size: 20px; }
.courSatisGraph_name{
line-height: 18px;
color: #A8A8A8;
width: max-content;
bottom: -46px;
}
/* 수강후기 */
.courReDeBox{padding-bottom: 25px;}
.reDe_thumb{margin-bottom: 15px;}
.reDe_courName{ font-size: 15px; margin-bottom: 15px; }
.reDe_text{line-height: 23.5px;}
.courReDeMoreBtn{
height: 70px;
line-height: 70px; margin-top: 50px;
font-size: 22px;
}
/* 강의만족도&수강후기 공통 */
.afterCourBoxtitle{ margin-bottom: 30px;}
.afterCourBoxtitle_h1{ font-size: 30px; line-height: 35px; margin-bottom: 20px;}
.afterCourBoxtitle_h1 span{font-size: 20px;}
.afterCourBoxtitle .searchTab{ margin-bottom: 20px; gap: 43px;}
.afterCourBoxtitle .searchTab_select{font-size: 20px;}
.afterCourBoxtitle .searchTab_select::before{ left: -18px; }
/* 탭 클릭됐을 때 class = searchTab--selectedColor */
/* -------------------------하트 버튼 -----------------------------*/
.likesBox{ gap: 5px; }
.countNum{padding-left: 0;}
/* --end--- */
/* --------------sec11_inquiry-------------- */
.brandchBtns_btn{font-size: 20px;}
.branchTabBox_h2{font-size: 24px; line-height: 29px; margin-bottom: 10px;}
.detailInformBox{gap: 30px;}
.DITitle{font-size: 24px; line-height: 29px; margin-bottom: 10px;}
.DIinput{font-size: 18px; padding-left: 20px; padding-right: 20px;}
.DIinput,
.emailSelBox{ height: 52px; line-height: 52px;}
.DI-namePhone .DIinput{width: 530px;}
.DI-namePhone,
.DI-inquiryAgree{ gap: 20px; margin-top: 0px;}
.DI-email .DIinput,
.DI-email .emailSelBox{width: 344px;}
/* 이메일 */
.emailBox{ --emailSelBoxW: calc(34.16% - 26px); }
.emailBox div:first-child .DIinput{width: 340px;}
.emailBox div:nth-child(1) {margin-right:42px; --Emailbox: calc(var(--emailBoxW) - 52px);}
.emailBox div:nth-child(1)::after{font-size: 25px; right: -32px;}
.emailBox div:nth-child(2) {margin-right:10px;}
/* select box custom */
.emailSelBox{--EmailSelBox: calc(50% - 26px);}
.emailSelBox.active {height: 286px;}
.sel_arrow.on::after{ width: 24px; height: 9px;}
.emailSelBox .label {
padding-left: 20px; padding-right: 20px;
width: 100%; height: 52px;
}
.emailSelBox .optionList {top: 51px;}
.emailSelBox .optionList_item {padding: 0px 20px; height: 39px;}
/* 문의내용,약관동의 */
.DI-inquiryAgree{margin-top: 0px;}
.DITextareaBox,
.agreeBox{width: 530px; height: 291px;}
.DITextarea{padding: 12px 15px;}
.agreeBoxCheck{
height: 52px; line-height: 52px;
font-size: 18px;
padding: 0 20px 0 20px;
}
.agreeBoxText{padding: 9px 20px 15px 20px; line-height: 25px;}
.agreeBoxText_contents{width: 422px;}
.agreeBoxText_detail{width: 480px;}
.inquiryBtn{ width:310px; height:60px; font-size: 22px; }
/* --end--- */
}
@media all and (min-width:1300px){
/* 네비게이션css pc */
.renewCurriNavBar{
width: 100%;
padding: 12px 25px;
border-radius: 15px;
left: calc(50% + 150px);
transform: translateX(calc(-50% - 75px));
}
.renewCurriNavBar_p {font-size: 16px;}
.renewCurriNavBar_btnBox{
width: auto; justify-content: normal; gap: 12px;
}
.renewCurriNavBar_btnBox .tuitionFeeBtn,
.renewCurriNavBar_btnBox .shareBtn,
.renewCurriNavBar_btnBox .personalInquiryBtn{
border-radius: 12px;
font-size: 18px;
height: 51px;
gap: 8px;
padding: unset;
}
.renewCurriNavBar_btnBox .tuitionFeeBtn{width: 112px; min-width: 112px;}
.renewCurriNavBar_btnBox .shareBtn{width: 118px; min-width: 118px;}
.renewCurriNavBar_btnBox .personalInquiryBtn{width: 151px; min-width: 151px;}
.renewCurriNavBar_btnBox .submitHrdBtn{
width: 218px;
min-width: 218px;
height: 51px;
border-radius: 12px;
font-size:18px;
padding: unset;
}
.naviImg{height: auto;}
.renewCurriNavBar_btnBox:has(.tuitionFeeBtn--nowon) .shareBtn{min-width: 20%;}
/* --end--- */
}