@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------------------------------*/
/* LAYOUT */

@media screen and (max-width: 1229px){
#wrap .container { max-width:960px; }

#top .logo { -ms-flex: 0 0 445px; flex: 0 0 445px; max-width:445px; }
#top .verse { -ms-flex: 0 0 428px; flex: 0 0 428px; max-width: 428px; font-size: 22px; }

#menu .menu_area ul.menu_list > li > a.lv1 { padding: 10px 16px; font-size: 18px; }
#menu .menu_area ul.menu_list ul li a { padding: 4px 16px; font-size: 14px; }

#banner .inner_banner { height: 320px; }

#banner .banner_title .container:before { height: 60px; }
#banner .banner_title h2 { font-size: 38px; line-height: 60px; }

#main .location_path { font-size: 20px; }
#main .location_path i { font-size: 24px; }

#main .left_side { -ms-flex:0 0 180px; flex:0 0 180px; max-width: 180px; }
#main .left_side .left_menu > ul > li > a { padding:10px 16px; }

#main .right_side { -ms-flex:0 0 calc(100% - 180px); flex:0 0 calc(100% - 180px); max-width: calc(100% - 180px); }

#footer .school_photo { -ms-flex: 0 0 424px; flex: 0 0 424px; max-width: 424px; }
#footer .school_content { -ms-flex: 0 0 490px; flex: 0 0 490px; max-width: 490px; padding: 20px 0; }
#footer .school_logo { -ms-flex: 0 0 72px; flex: 0 0 72px; max-width: 72px; }
#footer .school_info h2 { font-size: 26px; }
#footer .school_info h3 { margin-bottom: 12px; font-size: 16px; }
#footer .school_info p { font-size: 18px; }
#footer .school_info a.map { font-size: 16px; }

#copyright p { font-size:12px; }
}

@media screen and (max-width: 980px){
/* desktop to ipad */
#wrap .container { max-width:768px; }

#top .logo { -ms-flex: 0 0 345px; flex: 0 0 345px; max-width:345px; padding: 12px 0; }
#top .verse { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-bottom: 12px; font-size: 18px; }
#top .verse p { padding: 0; }

#top .mobile_btn { display:block; }

#menu { position:fixed; left:-280px; top:0; z-index:5100; display:block; width:280px; height:100%; border: none; padding:0; box-sizing:border-box; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; }
#menu .container { height:100%; padding:0; }
#menu .menu_area { display:block; width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; }
#menu .menu_area ul.menu_list { display:block; width:100%; position:static; }
#menu .menu_area ul.menu_list > li { display:block; width: 100%; max-width: 100%; border-bottom:1px solid #cccccc; padding:0; box-sizing:border-box; }
#menu .menu_area ul.menu_list > li.mobile_only { display:block; }

#menu .menu_area ul.menu_list > li > a.lv1 { display:block; padding:15px 50px 15px 15px; background-color:#115fa9; box-sizing:border-box; text-align:left; font-size:18px; color:#ffffff; font-weight:600; line-height:normal; }
#menu .menu_area ul.menu_list > li > a.lv1 i { position:absolute; right:0; top:0; display:block; width:50px; height:50px; text-align:center; line-height:50px; font-size:20px; color:#ffffff; font-style:normal; transition:all 0.3s ease; }
#menu .menu_area ul.menu_list > li > a.lv1 i:before { position:absolute; left:50%; top:50%; content:""; width:0; height:0; margin-left:-4px; margin-top:-6px; border-style:solid; border-width:6px 0 6px 8px; border-color:transparent transparent transparent #ffffff; }
#menu .menu_area ul.menu_list > li.openDrop > a.lv1 i { transform:rotate(90deg); }

#menu .menu_area ul.menu_list ul { width:100%; position:static; background-color:#1f417e; padding:0; border-top:1px solid #ffffff; box-shadow:none; }
#menu .menu_area ul.menu_list ul li { display:block; position:relative; border-bottom:1px solid #cccccc; }
#menu .menu_area ul.menu_list ul li:last-child { border-bottom:none; }
#menu .menu_area ul.menu_list ul li a { display:block; padding:12px 15px; }
#menu .menu_area ul.menu_list ul li a:hover { background-color: #1f417e; }
#menu .menu_area ul.menu_list ul ul { padding-left: 15px; }
#menu .menu_area ul.menu_list ul ul li { border: none; }
#menu .menu_area ul.menu_list ul ul li a { padding: 6px 15px; }

#menu .menu_area ul.menu_list ul.dropdown_menu li.have_drop > a { padding-right: 50px; }
#menu .menu_area ul.menu_list ul.dropdown_menu li.have_drop > a > i { right: 0; top: 0; display:block; width:50px; height:100%; }
#menu .menu_area ul.menu_list ul.dropdown_menu li.have_drop > a > i:before { left:50%; right: auto; top:50%; transform:translateY(-50%) translateX(-50%) rotate(0); }
#menu .menu_area ul.menu_list ul.dropdown_menu li.have_drop > a:hover > i:before, 
#menu .menu_area ul.menu_list ul.dropdown_menu li.have_drop.openDrop > a > i:before { transform:translateY(-50%) translateX(-50%) rotate(90deg); }

#banner .owl-prev, 
#banner .owl-next { width: 30px; height: 31px; }

#banner .inner_banner { height: 250px; }

#banner .banner_title .container:before { height: 48px; }
#banner .banner_title h2 { font-size: 32px; line-height: 48px; }

#main .left_side { -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding:20px; padding-top: 0; }
#main .left_side .left_menu { display:none; }
#main .left_side .left_select { display:block; }

#main .right_side { -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; }

#main .year_filter { position: static; width: 100%; padding-bottom: 20px; }
#main .year_filter .select_area { max-width:143px; }

#main .content { padding: 0 20px; }

#footer .school_photo { -ms-flex-order: 2; order: 2; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-left: 0; }
#footer .school_content { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 20px 0; }

.openResponsive { height:100%; }
.openResponsive body { overflow:hidden; }
.openResponsive #wrap { left:280px; }
.openResponsive #wrap .overlay { width:100%; height:100%; opacity:1; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; transition-delay:0; }
.openResponsive #menu { left:0; }
}

@media screen and (max-width: 767px){
/* ipad to iphone 6 plus */
body { font-size:14px; }

#wrap .container { max-width:none; }
#wrap .back_to_top { right:15px; }

#top .logo { -ms-flex: 0 0 295px; flex: 0 0 295px; max-width:295px; }
#top .verse { font-size: 14px; }

#banner .inner_banner { height: 220px; }

#banner .banner_title { position: static; background-color: #1f417e; padding: 2px 0; }
#banner .banner_title .container:before { display: none; }
#banner .banner_title h2 { font-size: 26px; line-height: normal; }

#main .location_path { font-size: 18px; }
#main .location_path i { font-size: 22px; }
#main .content_area { padding: 15px 0; }

#main .left_side { padding:15px; padding-top: 0; }

#main .year_filter { padding-bottom: 15px; }

#main .content { padding: 0 15px; }
#main .title { font-size: 23px; }

#main .back_btn a { font-size:17px; }
#main .back_btn a i { font-size:21px; }

#footer .school_info h2 { font-size: 22px; }
#footer .school_info h3 { font-size: 14px; }
#footer .school_info p { font-size: 16px; }
#footer .school_info a.map { font-size: 14px; }

#copyright p { -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; text-align: center; font-size:10px; }
}

@media screen and (max-width: 620px){
#top .mobile_btn a { width:32px; height:32px; line-height:32px; }
#top .mobile_btn a span { font-size:24px; }

#menu { left:-250px; width:250px; }

.openResponsive #wrap { left:250px; }
}

@media screen and (max-width: 479px){
/* below iphone 6 plus */
#wrap .back_to_top { position:fixed !important; bottom:14px !important; }

#top .logo { -ms-flex: 0 0 245px; flex: 0 0 245px; max-width:245px; }
#top .verse { font-size: 12px; }

#banner .inner_banner { height: 180px; }

#main .multipage { margin:0; text-align: center; }
#main .multipage a { display:none; }
#main .multipage .select_area { display:inline-block; max-width:120px; }

#footer .school_logo { -ms-flex: 0 0 62px; flex: 0 0 62px; max-width: 62px; }
#footer .school_info { padding-left: 16px; }
}

@media screen and (max-width: 413px){
#footer .school_info h2 { font-size: 20px; }

#copyright p { font-size:9px; }
}

@media screen and (max-width: 374px){
#top .logo { -ms-flex: 0 0 205px; flex: 0 0 205px; max-width:205px; }

#main .left_side .left_select .select_area { max-width:100%; }
}

@media screen and (max-width: 319px){
#top .top_area { display:block; }

#top .mobile_btn { position:static; margin-top:0; padding-top:6px; text-align:center; }
#top .mobile_btn a { display:inline-block; vertical-align:top; width:auto; height:auto; padding:8px 15px; font-size:12px; line-height:normal; }
#top .mobile_btn a i { vertical-align:sub; padding-right:8px; font-size:20px; line-height:1; }

#menu { left:-100%; width:100%; }

.openResponsive #wrap { left:100%; }
}

/*-------------------------------------------------------------------------------------*/
/* INDEX */

@media screen and (max-width: 1229px){
.events_section,
.report_section { -ms-flex:0 0 50%; flex:0 0 50%; max-width: 50%; }
.news_section { -ms-flex-order: 4; order: 4; -ms-flex:0 0 25%; flex:0 0 25%; max-width: 25%; }
.achievement_section { -ms-flex:0 0 75%; flex:0 0 75%; max-width: 75%; }
.useful_section { -ms-flex-order: 5; order: 5; -ms-flex:0 0 100%; flex:0 0 100%; max-width: 100%; }
.useful_section .useful_img { -ms-flex: 0 0 33.3333334%; flex: 0 0 33.3333334%; max-width: 33.3333334%; }
}

@media screen and (max-width: 980px){
.events_section .events_photo { height: 215px; }
.report_section .report_video { height: 215px; }

.news_section { -ms-flex-order: 3; order: 3; -ms-flex:0 0 100%; flex:0 0 100%; max-width: 100%; }
.achievement_section { -ms-flex-order: 4; order: 4; -ms-flex:0 0 100%; flex:0 0 100%; max-width: 100%; }
}

@media screen and (max-width: 767px){
.section .section_title { font-size: 20px; }
.section .section_more a { padding: 3px 15px; font-size: 14px; }

.events_section,
.report_section { -ms-flex:0 0 100%; flex:0 0 100%; max-width: 100%; }
.events_section .events_photo { height: auto; }
.report_section .report_video { height: 30vh; }
.events_section .events_item, 
.report_section .report_item { font-size: 13px; }
.events_section .events_date,
.report_section .report_date { -ms-flex: 0 0 86px; flex: 0 0 86px; max-width: 86px; }

.news_section .news_item { font-size: 13px; }

.achievement_section .achievement_photo { -ms-flex: 0 0 127px; flex: 0 0 127px; max-width: 127px; }
.achievement_section .achievement_info { padding: 0; padding-left: 20px; }
.achievement_section .achievement_date { font-size: 13px; }
.achievement_section .achievement_title { font-size: 15px; }

.useful_section .useful_list { margin: -7px; }
.useful_section .useful_img { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 7px; }
.useful_section .useful_img p { font-size: 16px; }
}

@media screen and (max-width: 479px){
.achievement_section .achievement_photo { -ms-flex: 0 0 87px; flex: 0 0 87px; max-width: 87px; }
}

@media screen and (max-width: 319px){
.useful_section .useful_img { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

/*-------------------------------------------------------------------------------------*/
/* GALLERY */

@media screen and (max-width: 1229px){
.gallery_list .gallery_photo { height: 131px; }

.gallery_detail .gallery_detail_photo .thumb { height: 68px; }
}

@media screen and (max-width: 980px){
.gallery_detail { padding: 0; }
}

@media screen and (max-width: 767px){
.gallery_content { padding: 0 15px; }

.gallery_cate_name { font-size: 24px; }

.gallery_list .gallery_item { -ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; }
.gallery_list .gallery_title { font-size: 15px; }
.gallery_list .gallery_date { font-size: 11px; }

.gallery_detail .gallery_detail_header { padding-top: 0; }
.gallery_detail .gallery_detail_date { font-size: 16px; }
.gallery_detail .gallery_detail_title { font-size: 24px; }
.gallery_detail .gallery_detail_info { font-size: 15px; }

.gallery_detail .gallery_detail_photo { padding-left: 0; padding-right: 0; }
.gallery_detail .gallery_detail_photo .large_photo .row_prev, 
.gallery_detail .gallery_detail_photo .large_photo .row_next { display: none; }

.gallery_detail .gallery_detail_photo .thumb_area { padding-left:32px; padding-right:32px; }
.gallery_detail .gallery_detail_photo .thumb { height:80px; }
    
.gallery_detail .gallery_detail_back a { padding:7px 28px 7px 20px; font-size:16px; }
.gallery_detail .gallery_detail_back a i { font-size:20px; }
}

@media screen and (max-width: 479px){
.gallery_list .gallery_photo { height:108px; }

.gallery_detail .gallery_detail_photo .thumb { height:60px; }
}

@media screen and (max-width: 374px){
.gallery_list .gallery_item { -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; }
.gallery_list .gallery_photo { height:auto; }
}

/*-------------------------------------------------------------------------------------*/
/* NEWS */

@media screen and (max-width: 980px){
.news_list .news { padding: 15px; }
.news_list .news_photo { -ms-flex: 0 0 127px; flex: 0 0 127px; max-width: 127px; }
.news_list .news_info { padding: 0 20px; }
}

@media screen and (max-width: 767px){
.news_content { padding: 0 15px; }

.news_list .news_photo { -ms-flex: 0 0 107px; flex: 0 0 107px; max-width: 107px; }
.news_list .news_info { font-size: 17px; }
.news_list .news_date { font-size: 13px; }
.news_list .news_btn { -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; max-width: 100%; padding-left: 127px; padding-top: 10px; }
.news_list .news_btn a { display: inline-block; padding: 3px 12px; font-size: 17px; }

.news_detail .news_detail_title { font-size: 24px; }
}

@media screen and (max-width: 479px){
.news_list .news_photo { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-bottom: 10px; }
.news_list .news_info { -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; max-width: 100%; padding: 0; }
.news_list .news_btn {  padding-left: 0; }
}

/*-------------------------------------------------------------------------------------*/
/* CALENDAR */

@media screen and (max-width: 1229px){
.calendar_area .calendar_topic { height:36px; line-height:36px; }

.calendar_pdf { padding-top: 16px; text-align: center; }
.calendar_pdf a { position: relative; }
}

@media screen and (max-width: 767px){
.calendar_area .calendar_topic { padding:0 15px; text-align:left; font-size: 18px; }

.calendar_area .calendar_row { right:20px; }

.calendar_remark { text-align:center; }
.calendar_remark .remark_item { padding:0 10px; }

.event_area .event_date { -ms-flex: 0 0 83px; flex: 0 0 83px; max-width: 83px; font-size: 15px; }
.event_area .event_date p:first-child { font-size: 19px; }
.event_area .event_info { padding: 0 20px; font-size:12px; }
.event_area .event_title { font-size:15px; }
}

@media screen and (max-width: 479px){
.calendar_area .calendar_topic { margin-left :0; margin-right: 0; }
.calendar_area .calendar_topic:before { transform: skew(0); }

.calendar_area .calendar_table { padding:0; }

.calendar_remark { padding-left: 0; padding-right: 0; text-align:left; }
.calendar_remark .remark_item { display:block; padding:0; padding-bottom:10px; }
.calendar_remark .remark { display:inline-block; vertical-align:top; }
}

@media screen and (max-width: 413px){
.calendar_area .calendar_topic { padding:0 10px; }

.calendar_area .calendar_row { right:10px; }
}

/*-------------------------------------------------------------------------------------*/
/* EDITOR CONTENT */

@media screen and (max-width: 980px){
.editor_content img { width:auto !important; height:auto !important; }
.editor_content table { max-width:100%; }
.editor_content iframe { max-height:calc(30vh) }
.editor_content a[href^="http:"],
.editor_content a[href^="https:"],
.editor_content a[href^="mailto:"] { word-break:break-all; }
}

@media screen and (max-width: 767px){
.editor_content { font-size:14px; }
}