/* 
-------------------------------------------------
color
------------------------------------------------- 
*/
:root {

    --background: #fbfbfb;
    --sd-background: #f7f7f7;

    --white: #fff;
    --white-gray: #fafafa;
    --light-gray: #D2D2D2;
    --light-gray02: #EAEAEA;
    --middle-gray: #5B5B5B;
    --dark-gray: #5B5B5B;
    --black: #060606;
    
	--foot-color: #1f5b9f;
	
    --red: #FF3B30;
    --orange: #FF9500;
    --yellow: #FFCC00;
    --green: #019c3f;
    --mint: #00C7BE;
    --teal: #30B0C7;
    --cyan: #32ADE6;
    --new-sky: #01A3EB;
    --blue: #007AFF;
    --indigo: #5856D6;
    --purple: #AF52DE;
    --deep-purple: #510299; 
    --pink: #e80382;
    --brown: #A2845E;

}



/* 
-------------------------------------------------
spacing
------------------------------------------------- 
*/
:root {
    
    --radius: 20px;
    --radius02: 12px;
    --circle-radius: 2000px;

    --gap-tiny01: 4px;
    --gap-tiny02: 8px;
    --gap-tiny03: 12px;
    --gap-tiny04: 16px;

    --gap-small01: 20px;
    --gap-small02: 24px;
    --gap-small03: 28px;
    --gap-small04: 32px; 
    
    --gap-middle01: 40px;
    --gap-middle02: 52px;
    --gap-middle03: 60px;
    --gap-middle04: 72px;

    --gap-large01: 80px;
    --gap-large02: 100px;
    --gap-large03: 140px;
    
    --header-height: 100px;

    --controll-btn-size: 48px;
    --familywrap-width: 200px;

    --mn-grid-box-height: 600px;

}
@media(max-width: 1600px){
    :root {

    --gap-small01: 18px;
    --gap-small02: 22px;
    --gap-small03: 24px;
    --gap-small04: 28px; 
    
    --gap-middle01: 36px;
    --gap-middle02: 48px;
    --gap-middle03: 54px;
    --gap-middle04: 68px;

    --gap-large01: 72px;
    --gap-large02: 84px;
    --gap-large03: 128px;
    
    /* --header-height: 100px; */

    --controll-btn-size: 46px;
    /* --familywrap-width: 200px; */
    --mn-grid-box-height: 580px;

    }
}
@media(max-width: 1400px){
    :root {

    --gap-tiny02: 6px;
    --gap-tiny03: 10px;
    --gap-tiny04: 15px;

    --gap-small01: 16px;
    --gap-small02: 20px;
    --gap-small03: 22px;
    --gap-small04: 26px; 
    
    --gap-middle01: 32px;
    --gap-middle02: 42px;
    --gap-middle03: 48px;
    --gap-middle04: 62px;

    --gap-large01: 68px;
    --gap-large02: 72px;
    --gap-large03: 116px;
    
    /* --header-height: 100px; */

    --controll-btn-size: 42px;
    /* --familywrap-width: 200px; */
    --mn-grid-box-height: 540px;

    }
}
@media(max-width: 1200px){
    :root {

    --radius: 16px;
    --radius02: 8px;

    --gap-small01: 14px;
    --gap-small02: 18px;
    --gap-small03: 20px;
    --gap-small04: 22px; 
    
    --gap-middle01: 28px;
    --gap-middle02: 36px;
    --gap-middle03: 40px;
    --gap-middle04: 52px;

    --gap-large01: 56px;
    --gap-large02: 64px;
    --gap-large03: 96px;
    
    /* --header-height: 100px; */

    --controll-btn-size: 40px;
    /* --familywrap-width: 200px; */
    --mn-grid-box-height: 480px;

    }
}
@media(max-width: 1024px){
    :root {

    --gap-small01: 12px;
    --gap-small02: 16px;
    --gap-small03: 18px;
    --gap-small04: 20px; 
    
    --gap-middle01: 24px;
    --gap-middle02: 32px;
    --gap-middle03: 36px;
    --gap-middle04: 48px;

    --gap-large01: 52px;
    --gap-large02: 60px;
    --gap-large03: 88px;

    --controll-btn-size: 36px;
    --mn-grid-box-height: 420px;

    }
}
@media(max-width: 780px){

}
@media(max-width: 640px){
    :root {

    --gap-small01: 16px;
    --gap-small02: 20px;
    --gap-small03: 22px;
    --gap-small04: 24px; 
    
    --gap-middle01: 28px;
    --gap-middle02: 36px;
    --gap-middle03: 40px;
    --gap-middle04: 52px;

    --gap-large01: 60px;
    --gap-large02: 72px;
    --gap-large03: 94px;

    --controll-btn-size: 40px;

    }
}
@media(max-width: 520px){

}



/* 
-------------------------------------------------
font
------------------------------------------------- 
*/
:root {

    --font-type01: "Pretendard";
    --font-type02: "Paperlogy";
    
    --sub-font01:  0.82rem; /* 13 */
    --sub-font02:  0.8rem;  /* 14 */
    --sub-font03:  0.95rem; /* 15 */
    --sub-font04:  1rem;    /* 16 */

    --txt-font01:  1.13rem; /* 18 */
    --txt-font02:  1.26rem; /* 20 */
    --txt-font03:  1.38rem; /* 22 */
    --txt-font04:   1.5rem; /* 24 */

    --middle-font01:   1.8rem; /* 28 */
    --middle-font02:   2rem;   /* 32 */
    --middle-font03:   2.5rem; /* 40 */
    --middle-font04:   3rem;   /* 48 */

    --tit-font01:  4rem;    /* 64 */
    --tit-font02:  4.38rem; /* 70 */
    --tit-font03:  5.6rem;  /* 90 */
    --tit-font04:  6.3rem;  /* 100 */


}
@media(max-width: 1600px){
    
}
@media(max-width: 1400px){
    :root {
        font-size: 15px;
    }
}
@media(max-width: 1200px){
    :root {
        font-size: 14px;

        --sub-font01:  0.95rem; 
        --sub-font02:  1.05rem; 
        --sub-font03:  1.1rem; 
        --sub-font04:  1.3rem; 
    }
}
@media(max-width: 1024px){

}
@media(max-width: 780px){

}
@media(max-width: 640px){

}
@media(max-width: 520px){

}


/* 
-------------------------------------------------
all used
------------------------------------------------- 
*/

.new_sub{
    margin-top: -100px;
}

.new_sub .auto {
    width: 100%;
    max-width: 1400px;
}
.new_sub .swiper-wrapper {
    padding-bottom: 1px;
}

.new_sub{
    background-color: var(--white);
    line-height: 1.3;
    padding: 1px 0;
    font-family: var(--font-type01);
	overflow: hidden;
}

.testhead{
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: var(--header-height);
}
.testhead img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.new_sub .sd-tit{
    margin: 0 auto var(--gap-middle02);
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.new_sub .sd-tit.align-reverse {
    flex-direction: row-reverse;
}

.new_sub .sd-tit h3{
    font-family: var(--font-type02);
    width: fit-content;
    font-size: var(--middle-font04);
    font-weight: 600;
    color: var(--black);
    margin-bottom: var(--gap-tiny04);
    position: relative;
}
.new_sub .sd-tit.align-reverse h3{
    text-align: right;
}
.new_sub .sd-tit h3 span{
    display: block;
    color: var(--pink);
    margin-bottom: var(--gap-tiny04);
}

.new_sub .sd-tit p{
    font-size: var(--middle-font01);
    font-weight:700;
    color: var(--black);
    text-align: center;
}

.sd-txt{
    margin: calc(var(--gap-middle02) * -1) 0 var(--gap-middle02);
    font-size: var(--txt-font04);
    color: var(--black);
    text-align: right;
}


@media all and (max-width:1600px) {

}
@media (max-width: 1400px) {

}
@media all and (max-width:1200px) {

}
@media all and (max-width:1024px) {

}
@media all and (max-width:780px) {
    .new_sub .sd-tit h3 {
    font-size: var(--middle-font03);
    margin-bottom: var(--gap-tiny03);
    }
    .new_sub .sd-tit {
    margin: 0 auto var(--gap-middle03);
    }
}
@media (max-width: 640px) {

}
@media (max-width: 520px) {
    .new_sub .sd-tit h3 {
    padding-left: 0;
    margin-bottom: var(--gap-small01);
    }
    .new_sub .sd-tit {
        margin: 0 auto var(--gap-middle01);
    }
}







/* 
-------------------------------------------------
mainvisual
------------------------------------------------- 
*/
.subisual{
    margin: calc( var(--gap-small04) + var(--header-height) ) 0
     var(--gap-middle03);
     
}
.subisual .visual-area{
    width: 100%;
    height: calc(100vh - var(--gap-small03) - var(--header-height));
    overflow: hidden;
    background-color: #aaa;
    /* max-height: 620px; */
}


@media all and (max-width:1600px) {

}
@media (max-width: 1400px) {
    
}
@media all and (max-width:1200px) {

}
@media all and (max-width:1024px) {
    
}
@media all and (max-width:780px) {
   
}
@media (max-width: 640px) {
    
}
@media (max-width: 520px) {
    
}



/* 
-------------------------------------------------
sub-depart-subject
------------------------------------------------- 
*/

.new_sub .sub-depart-subject{
    margin: var(--gap-middle02) auto var(--gap-large01);
    padding: var(--gap-large02) 0;
    background-color: var(--sd-background);
}

.new_sub .sub-depart-subject .sd-subject-6box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-tiny04);

}

.new_sub .sub-depart-subject .sd-subject-6box .box{
    width: 100%;
    height: auto;
    aspect-ratio: 460 / 245;
    border-radius: var(--radius);
    text-align: center;
    padding: var(--gap-small04);
    background-color: var(--white);
    transition: all 0.2s ease-in-out;
}
.new_sub .sub-depart-subject .sd-subject-6box .box:hover{
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

.new_sub .sub-depart-subject .sd-subject-6box .box .txt{
    text-align: center;
}
.new_sub .sub-depart-subject .sd-subject-6box .box .txt p{
    font-size: var(--sub-font04);
    color: var(--dark-gray);
    margin-bottom: var(--gap-tiny01);
}
.new_sub .sub-depart-subject .sd-subject-6box .box .txt h5{
    font-size: var(--txt-font04);
    font-weight: 600;
    color: var(--black);
}
.new_sub .sub-depart-subject .sd-subject-6box .box:hover .txt h5{
    color: var(--deep-purple);
}



/* 
-------------------------------------------------
sub-depart-curriculum
------------------------------------------------- 
*/

.new_sub .sub-depart-curriculum{
    margin: var(--gap-large02) auto var(--gap-large03);
}

.new_sub .sub-depart-curriculum .sd-curriculum-3box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-tiny04);
}

/* .new_sub .sub-depart-curriculum .sd-curriculum-3box .box{
} */

.new_sub .sub-depart-curriculum .sd-curriculum-3box .box .imgbox{
    width: 100%;
    height: auto;
    aspect-ratio: 460 / 540;
    border-radius: var(--radius);
    transition: all 0.2s ease-in-out;
}
.new_sub .sub-depart-curriculum .sd-curriculum-3box .box:hover .imgbox{
    transform: translateY( calc(var(--gap-small04) * -1) );
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

.new_sub .sub-depart-curriculum .sd-curriculum-3box .box .txt h5{
    font-size: var(--txt-font04);
    font-weight: 600;
    color: var(--black);
    margin: var(--gap-small04) 0 var(--gap-tiny03);
}
.new_sub .sub-depart-curriculum .sd-curriculum-3box .box:hover .txt h5{
    color: var(--pink);
}

.new_sub .sub-depart-curriculum .sd-curriculum-3box .box .txt p{
    font-size: var(--txt-font01);
    color: var(--dark-gray);
}



/* 
-------------------------------------------------
sub-depart-portfolio
------------------------------------------------- 
*/

.new_sub .sub-depart-portfolio{
    margin: var(--gap-large02) auto var(--gap-large03);
}

.new_sub .sub-depart-portfolio .sd-portfolio-btn{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-tiny04);
    margin: var(--gap-middle03) 0 var(--gap-small04)
}
.new_sub .sub-depart-portfolio .sd-portfolio-btn .btn{
    border: 1px solid var(--dark-gray);
    background-color: var(--white);
    font-size: var(--txt-font02);
    padding: var(--gap-tiny02) var(--gap-small02);
    border-radius: var(--circle-radius);
    cursor: pointer;
    font-weight: 500;
}
.new_sub .sub-depart-portfolio .sd-portfolio-btn .btn:hover{
    color: var(--pink);
}
.new_sub .sub-depart-portfolio .sd-portfolio-btn .btn.active{
    background-color: var(--black);
    color: var(--white);
}   

.new_sub .sub-depart-portfolio .sd-portfolio-wrap{
    position: relative;
}
.new_sub .sub-depart-portfolio .sd-portfolio-wrap .sdp-con{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: var(--gap-tiny02);
    transition: opacity 0.3s ease-in-out;
}
.new_sub .sub-depart-portfolio .sd-portfolio-wrap .sdp-con.active{
    position: relative;
    opacity: 1;
    visibility: visible;
    margin-top: var(--gap-small02);
}