@charset "utf-8";
/* CSS Document */

.res{ display:none}

@media screen and (max-width:1400px){
.res.w1400{ display: block}
}
@media screen and (max-width:1280px){
.res.w1280{ display: block}
body{ font-size:15px}


}
@media screen and (max-width:1024px){
.res.w1024{ display: block}
.box2{ padding: 0 calc(var(--pgPD) * 1.75);} 
.boxSub{ max-width: 90%;}
body{ font-size:13px}

/*all*/
#contents .sub_top_wrap .subTab{ display: none;}
#contents .sub_tit_wrap{ padding: 5.5vmin 0;}
#contents .sub_tit_wrap .titW .t1{ font-size: 2.315em;}
.page_tit .t0.en{ font-size: 3em;}

/*header*/
#header .top_wrap .wrapF{ justify-content: space-between;}
html:not(.allOn) #header .top_wrap .gnb_wrap{ display: none;}

/*visual*/
.visualSlide_wrap{ height: calc((var(--vh, 1dvh) * 90) - var(--visualConPD));}
.visualSlide_wrap .visualCon .scrollW{ display: none;}
.visualSlide_wrap .visualCon .wIn{ width: 100%;}


/*sec2*/
.mainAbout .wrapImg{ display: none;}
.mainAbout.mainBox .wrapF.dRow{ flex-direction: column;}

/*journal*/
.journalWrapper .board_table2{ font-size: .815em;}
.journalWrapper .board_table2 .w_form_tit{ width: 6.5em;}
.journalWrapper .journalImg{ padding: 3.5em 4em;}
.journalWrapper .journalImg>.inner>.tit{ font-size: 2.15em;}
.journalWrapper .journalImg>.inner>.en{ font-size: 1.15em;}
.journalWrapper .descList > li{ font-size: 1.063em;}

/*location*/
.locationWrapper{ flex-direction: column-reverse;}
.locationWrapper .leftForm,
.locationWrapper .rightForm{ width: 100%;}
.locationWrapper .rightForm > .map > iframe{ height: 27.5em;}



}
@media screen and (max-width:768px){
body{ font-size:12px}

/*all*/
.mainTit .tit2.s2 { font-size: 3em;}
.mainBox.p1{ padding: 6vmin 0;}
#contents .sub_top_wrap .subTit .t1{ font-size: 3.25em;}

#quick{ right: 0; scale: -1 1; left: auto;}
#quick .link > li .st:hover .more,
#quick .link > li .st .t1{ transform: scaleX(-1);}

.flex_table .td{ font-size: .9em;}
.flex_table .td.wMail,
.flex_table .td.w3{ flex: 0 0 10em;}
.flex_table .td.wNpo{ flex: 0 0 14em;}

.page_tit .t4{ font-size: 1.615em;}
.page_tit .t5{ font-size: 1.315em;}

.w_btnFull2{ width: 10em;}

/*about*/
.mainAbout .list > li .wIn{ padding: 0 .5em;}

/*visual*/
.visualSlide_wrap .controlW{ bottom: calc(var(--visualConH) + 6.5em);}
.visualSlide_wrap .slogan{ padding-bottom: calc(var(--visualConH) + 6.5em);}

/*quuick*/
.mainLink{ flex-wrap: wrap; height: auto;}
.mainLink > li{ flex: unset;}
.mainLink > li{ width: calc((100% - 1em) / 2);}
.mainLink > li .in{ padding: .5em 0; box-sizing: border-box;}

/*schedule*/
.mainBasicSlideW .swiper-slide{ width: 50%;}
.mainGallery .list {grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; aspect-ratio: auto; gap: 1.2em;}
.mainGallery .list > li {grid-column: auto !important;grid-row: auto !important; min-height: 160px; height: auto;}
.academicSt{ padding: 1em;}

/*partner*/
.mainBasicSlideW.partner1 .swiper-slide{ width: 25%;}

/*footer*/
#footer .wrapF{ flex-direction: column;}

/*about*/
#contents .sub_top_wrap{ height:calc(var(--vh, 1dvh) * 35); }
.introWrapper{ flex-direction: column; gap: 2.5em;}
.introWrapper .infoCon,
.introWrapper .imgCon{ width: 100%;}
.introWrapper .imgCon{ height: 25em;}
.businessWrapper .businessList > li{ width: calc((100% - 2em) / 2);}
.introWrapper .infoCon .descList li{ font-size: 1.215em; margin-bottom: 1em;}
.introWrapper .infoCon .list{ flex-wrap: wrap;}
.introWrapper .infoCon .list li{ padding: 1em 1.5em; flex: 1 0 calc(50% - 1em);}

/*greeting*/
.greetingWrapper{ flex-direction: column; gap: 2.5em;}
.greetingWrapper .ceoImg{ position: relative; width: 50%; top: auto;}
.greetingWrapper .ceoCon{ width: 15em; height: 20em;}

/*history*/
.historyWrapper .top_img .bg_tit p{ font-size: 2em}
.historyWrapper .history > div .decade:before,
.historyWrapper .history > div .decade:after,
.historyWrapper .history:after,
.historyWrapper .history .linewrap{ left: 0;}
.historyWrapper .history > div ul{ padding-left: 0;}
.historyWrapper .history > div{ flex-direction: column;}
.historyWrapper .history > div .decade:after{ display: none;}
.historyWrapper .history > div .decade:before{ left: -7px; top: 16px;}
.historyWrapper .history > div ul:before{ left: -7px; top: -30px;}
.historyWrapper .history > div ul:after{ left: -22.5px; top: -44.5px;}
.historyWrapper .history > div .decade{ padding-left: 1em;}
.historyWrapper .history > div ul{ width: 100%;}
.historyWrapper .history > div ul li .in{ padding-left: 4em;}
.historyWrapper .history > div ul li::before{ top: 8px; left: 3em;}
.historyWrapper .history > div ul li .in{ gap: 0;}
.historyWrapper .history{ padding: 60px 0 100px;}
.historyWrapper .history > div ul li .year{ width: 2.5em;}

/*journal*/
.table_scroll{ overflow: auto;}
.table_scroll .flex_table{ width: 800px;}

/*caledar*/
#calendar .fc-toolbar .fc-right{ display: none;}
#calendar button.fc-month-button:before,
#calendar button.fc-listMonth-button:before{ font-size: 1.215rem;}
#calendar .fc-toolbar .fc-center{ display: flex; align-items: center; justify-content: center;}
#calendar .fc-toolbar.fc-header-toolbar{ display: flex; flex-direction: column; }
#calendar .fc-toolbar .fc-left{ margin-bottom: 1.25em;}

/*gallery*/
.board_gallery{ --boardGallL: 2;}



}

@media screen and (max-width:468px){
body{ font-size:11px}

/*all*/
.mainTit .tit2.s2{ font-size: 2.75em;}
.mainTit .tit2 { font-size: 2.315em;}

.page_tit .t1.en{ font-size: 2.315em;}

.descList > li.t1{ font-size: 1.415em;}
.descList > li{ font-size: 1.215em;}

.grayBox.ty1{ padding: 2em;}

.page_tit .t0.en{ font-size: 2.715em;}

/**/
.allOn #header .top_wrap .gnb_wrap .gnb > li{ flex-direction: column; gap: 1em;}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2{ flex-direction: unset;}


/*visual*/
.visualSlide_wrap .slogan .t1{ font-size: 2.315em;}
.visualSlide_wrap .slogan .t2{ font-size: 1.415em;}

/*partner*/
.mainBasicSlideW.partner1 .swiper-slide{ width: 33.33%;}

/*about*/
.introWrapper .imgCon{ height: 18em;}
.businessWrapper{ padding: 2.5em;}
.businessWrapper .businessList{ gap: 1.5em;}
.businessWrapper .businessList > li{ width: 100%;}

/*greeting*/
.greetingWrapper .ceoCon{ width: 10em; height: 15em;}
.greetingWrapper .greetingContent > .item .greImgList > li > .imgCon{ height: 15em;}
.greetingWrapper .greetingContent > .item > .titCon > .tt{ font-size: 2.15em;}

/*history*/
.historyWrapper .top_img{ height: 16em;}
.historyWrapper .history > div .decade:before{ display: none;}
.historyWrapper .top_img .bg_tit p{ font-size: 1.715em;}

/*journal*/
.journalWrapper .journalImg{ padding: 2.5em 3em;}
.journalWrapper .journalImg>.inner>.en{ font-size: 1.063em;}
.journalWrapper .journalImg>.inner>.desc{ font-size: 1em;}
.journalWrapper .board_table2 .w_form_tit{ width:5.5em;}

/*gallery*/
.board_gallery{ --boardGallL: 1;}
.board_gallery .wrap_in .con_wrap .tit1{ font-size: 1.215em;}
.board_gallery .wrap_in .con_wrap .date{ font-size: 1em;}

/*direction*/
.locationWrapper{ gap: 2.25em;}
.locationWrapper .leftForm > .locBox > li > .con{ padding: 20px;}


 }
@media all and (orientation:landscape){

}