@charset 'utf-8';
/* 메인공통 */
#main-section1 {}
#main-section1 .wrap {position: relative; }
#main-section1 .wrap .section-container {}
#main-section1 .wrap .section-hgroup {position: relative; height: 5rem;}
#main-section1 .wrap .section-hgroup:before {position: absolute; left: 0; top: 50%; content: ''; display: block; width: 100%; height: 1px; background-color: #000; z-index: -1;}
#main-section1 .wrap .section-hgroup h1 {float: left; padding: 0 3rem 0 0; background-color: #fff; font-size: 2.4rem; line-height: 5rem;}
#main-section1 .wrap:after {display: none; position: absolute; bottom: 2.5rem; content: ''; width: 100%; height: 1px; background-color: #000; z-index: -1;}
.title-box {height: 32rem; margin-bottom: 4rem;}
.title-box .arita {padding: 2rem 0; font-size: 4rem; font-weight: bold; line-height: 1.2; }
.edu_period {padding: 0 0 3rem; border-bottom: 6px solid #000; font-size: 3.6rem; font-weight: 500;}
.edu_org {width: 25rem; margin-top: 3.2rem;}
.edu_org img {width: 100%;}
.content-box {position: relative; height: calc(94vh - 50rem); padding: 10rem 0 0 6rem; background-color: #dcd5cb; text-transform: uppercase; overflow: hidden;}

.name-list {width: 30rem; padding-right: 7rem;}
.name-list-content dd:first-of-type {font-size: 2.4rem; font-weight: bold; padding-bottom: 2rem;}
.name-list-content dd:first-of-type:before {content: ''; display: block; width: 2.4rem; height: 0.2rem; margin-bottom: 1.2rem; background-color: #000;}
.pf-list {font-size: 1.8rem; line-height: 3rem; font-weight: 300; white-space: nowrap;}
.pf-list .pf:after {position: relative; top: -3px; content: 'Portfolio'; display: inline-block; padding: 0 1rem; margin-left:  0.4rem; background-color: #900; color: #fff; font-size: 1.2rem; line-height: 2rem; border-radius: 1rem;}
.counter-box {position: absolute; right: 5rem; bottom: 3rem; width: 3.6rem; font-size: 3rem; line-height: 6rem; font-weight: 500; text-align: center; z-index: 1;}
.counter-box:before {position: absolute; left: calc(50% - 1.8rem); top: 50%;  content: ''; display: block; width: 3.6rem; height: 1px; background: #000;}
/* .pf-list li:last-child:after {position: relative; top: -0.2rem; content: 'PORTFOLIO'; display: inline-block; padding: 0 1.2rem; margin-left: 0.5rem; line-height: 2.1rem; background-color: #000; border-radius: 1.1rem; color: #fff; font-size: 1.2rem;} */
.section-tab-menu li {cursor: pointer;}

/* 풀페이지 왼쪽 메뉴 스타일링 */
#menu-section {position: fixed; right: -90%; top: calc(-90% + 10rem); width: 100%; height: 90%; padding: 6rem; padding-left: 6rem; padding-right: 0;  z-index: 1; background-color: #dcd5cb; border-radius: 2rem; box-shadow: 0 0 6px rgba(0,0,0,0.2); transition: top 0.3s 0s, right 0.5s 0.3s; }
#menu-section.active {right: -4rem; top: 5%;}
#menu-section .menu-section-wrap {height: 100%;}
#menu-section .name-list {float: left; width: 50%; padding-right: 0; margin-bottom: 3rem;}
#menu-section .name-list:nth-of-type(odd) {clear: both;}
#menu-section .name-list-content dd:first-of-type {font-size: 1.6rem;  padding-bottom: 1rem;}
#menu-section .pf-list {font-size: 1.4rem; line-height: 2rem;}
#menu-section .pf-list .pf:after {position: relative; top: -1px; content: 'Portfolio'; display: inline-block; padding: 0 0.8rem; margin-left:  0.4rem; background-color: #900; color: #fff; font-size: 1.1rem; line-height: 1.6rem; border-radius: 0.8rem;}
.list-btn {position: absolute; left: 1.5rem; bottom: 2rem; width: 4rem; height: 5rem; background-color: transparent; border: 0;}
.list-btn .line {display: block; float: left; width: 0.6rem; height: 100%; margin-right: 0.5rem; border-radius: 0.3rem; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2); }
/* slick */
.slide-controls {/*이전다음버튼영역*/ margin-top: 3rem;}
.slick-dots {}
.slick-dots li {display: inline-block; margin-right: 0.9rem;}
.slick-dots button {width: 1rem; height: 1rem; border: 0; border-radius: 100%; text-indent: -9999em; font-size: 0; line-height: 0; background-color: #fff; opacity: 0.2; box-sizing: content-box;}
.slick-dots .slick-active button {border: 2px solid #fff; background-color: transparent; opacity: 1;}
.slick-arrow {width: 4.8rem; height: 4.8rem; border: 1px solid rgba(255,255,255,0.7); background: transparent no-repeat 50%; text-indent: -9999em; font-size: 0; line-height: 0;}
.slick-prev {background-image: url('../images/icon_slide_prev_01.png');}
.slick-next {border-left-width: 0; background-image: url('../images/icon_slide_next_01.png');}
.shadow .slick-arrow {border-color: #666;}
.shadow .slick-prev {background-image: url('../images/icon_slide_prev_02.png');}
.shadow .slick-next {background-image: url('../images/icon_slide_next_02.png');}



/* 학생별 섹션 */
.st-section {background-color: #222; background-size: cover; background-position: center center; text-transform: uppercase;}
.bg-box {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 34%; background-color: #000;}
.st-section .wrap { width: 100%; height: 80vh; padding: 0; padding-left: 6rem; overflow: hidden;}
.st-section .slick-slide {width: calc(100vw - 6rem); }
.pf-container {margin-top: 3rem;}
.pf-container img {width: 100%;}
.slide-controls {position: relative; height: 4rem;}
.st-section .name-list-content dd:first-of-type:before {background-color: #fff;}
.section-tab-menu .active {font-weight: 400;}


#main-section2 {background-image: url('../images/01_1_bg.jpg');}
#main-section3 {background-image: url('../images/02_1_bg.jpg');}
#main-section4 {background-image: url('../images/03_1_bg.jpg');}
#main-section5 {background-image: url('../images/04_1_bg.jpg');}
#main-section6 {background-image: url('../images/05_1_bg.jpg');}
#main-section7 {background-image: url('../images/06_1_bg.jpg');}
#main-section8 {background-image: url('../images/07_1_bg.jpg');}
#main-section9 {background-image: url('../images/08_1_bg.jpg');}
#main-section10 {background-image: url('../images/09_1_bg.jpg');}
#main-section11 {background-image: url('../images/10_1_bg.jpg');}

#main-section2 .bg-box {background-color: #070d1a;}
#main-section3 .bg-box {background-color: #a30001;}
#main-section4 .bg-box {background-color: #F0F39C;}
#main-section5 .bg-box {background-color: #71563B;}
#main-section6 .bg-box {background-color: #fff;}
#main-section7 .bg-box {background-color: #151d5b;}
#main-section8 .bg-box {background-color: #640005;}
#main-section9 .bg-box {background-color: #001f1d;}
#main-section10 .bg-box {background-color: #000000;}
#main-section11 .bg-box {background-color: #676058;}

/* 모바일까지 ~767px */
@media screen and (max-width: 767px) {
}

/* 태블릿부터 768px~ */
@media screen and (min-width: 768px) {
    #main-section1 .wrap:after {display: block;}
    .section-container {padding-top: 6rem; padding-left: 6rem;}
    .title-box {height: 44rem; }
    .title-box .arita {padding: 4rem 0; font-size: 5.2rem; }
    .content-box {height:50rem; padding: 10rem 0 0 6rem; background-color: #dcd5cb; text-transform: uppercase; overflow: hidden;}
    #menu-section {width: 60rem; right: -54rem; top: calc(-90% + 10rem);}
}  

/* 태블릿만 768px~1279px */
@media screen and (min-width: 768px) and (max-width: 1279px) {

}

/* PC부터 1280px~ */
@media screen and (min-width: 1280px) {
    #main-section1 .wrap {position: static; height: 92vh;}
    #main-section1 .wrap:after {bottom: calc(4vh + 2.5rem);}
    .title-box {float: left;}
    .title-box .arita {height: 23rem; font-size: 6rem;}
    .edu_period {height: 9rem;}
    .content-box {position: absolute; left: 50%; top: calc(4vh + 11rem); width: 50rem; height: calc(96vh - 11rem); padding-top: 32rem;}
    .st-section .wrap {padding: 0;}
    .pf-container {position: absolute; left: 50%; top: 10vh; width: 96rem; height: 90vh; margin-top: 0; transform: translateX(-50%); box-shadow: 0 0 10px rgba(0,0,0,0.3);}
    .st-section .slick-slide {width: 96rem; }
    #menu-section {width: 80rem; right: -74rem; padding: 6rem;}
    #menu-section .name-list {width: 33%; min-height: 12rem;}
    #menu-section .name-list:nth-of-type(3n+1) {clear: both;}
    #menu-section .name-list:nth-of-type(odd) {clear: none;}
}