.container { width: 100%; height: auto; }

.textStyle1{font-weight:bold;font-size:25px;color:#565656;}

.vacation_2022_banner_summer {margin:0 auto; width:100%; max-width:1080px; padding: 20px 0px;}

.clearfix:before, .clearfix:after {display: none;}

.container * {letter-spacing: -2%; background-repeat: no-repeat; background-position: center center; background-size: 100%; }
.container > .section > .curriculum_list > .curriculum > ul > li:hover > a {color:#ffff00;}
.container > .section > .curriculum_list > .curriculum:hover > h4{color:#006cba;font-weight:bold;}
.container > .section > .curriculum_list > .curriculum > h4{float:left;}
.container > .section > .curriculum_list > .curriculum .category{color:#ff2e00;font-weight:bold;}
.container > .section > .title_box {border-bottom: 2px solid #777;}
.container > .section > .curriculum_list {border-top: 2px solid #777; border-bottom: 2px solid #777; }
.container > .section > .curriculum_list > .curriculum {border-bottom: 1px solid #aaa; overflow: hidden; }
.container > .section > .curriculum_list > .curriculum > ul > .curriculum_plus { background-color: #00ADEF; }
.container > .section > .curriculum_list > .curriculum > ul > .online_booking { background-color: #00ADEF; }
.container > .section > .curriculum_list > .curriculum > .table_box > ul > .reservation > a {color: #fff; font-weight: bold; background-color: #e9487d; display: block; text-decoration: none; text-align: center; }
.studyBox{float: right; }
.studyBox > label{color: #18364f; font-weight: bold; }
.studyBox > select{border: 1px solid #cacaca; }
.studyBox > input{border: 0; background-color: #97509f; color: #fff; font-weight: bold; }
.section:after{content: ""; display: block; clear: both; }
.container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation > h5 {font-size: 14px;font-weight: bold; color: #333; }
.container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation > .hurry {background-color: #e9487d; color: #fff;}
.container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation > .end {color: #aaa; }

.summernotice22 {width: 100%;}
.summernotice22 > .wrap {width: 95%; margin: 0 auto; text-align: center;}
.summernotice22 > .wrap > div {width: 100%;}
.summernotice22 > .wrap > div > img {width: 100%;}

section {width: 100%;}
section ul {width: 100%; margin: 0 auto; padding: 10px 0; display: grid; grid-template-columns: 33% 33% 33%; grid-auto-rows: 160px 160px 160px; align-items: center;}
section ul > li {}
section img {padding: 20px 0;}

.comm_tab2 > .tab_menu {width: 95%; margin: 20px auto; display: grid; grid-template-columns: 33% 34% 33%; border-top: 1px solid #ccc; border-left: 1px solid #ccc;}
.comm_tab2 > .tab_menu > li {padding: 15px 0; text-align: center; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}
.comm_tab2 > .tab_menu > li > a {font-size: 16px; color: #565656;}





/* For larger displays */
@media all and (min-width: 1080px) {
	.vacationEllipsisStyle{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  .comm_tab2 > .tab_menu {width: 100%; grid-template-columns: 14% 14% 15% 15% 14% 14% 14%;}

  .container > .section { width: 1080px; height: auto; margin: 0 auto; margin-bottom: 90px; }
  .container > .section > .title_box { width: 100%; height: 156px; border-bottom: 2px solid #777; }
  .container > .section > .title_box > * { float: left; color: #777; }
  .container > .section > .title_box > h3 { font-size: 40px; width: auto; height: 44px; margin-top: 94px; line-height: 44px; }
  .container > .section > .title_box > p { font-size: 16px; margin-top: 120px; margin-left: 25px; }

	.container > .section > .title_box_vacation { width: 100%; /*border-bottom: 2px solid #777; padding: 20px 0;*/}
  .container > .section > .title_box_vacation > * { float: left; color: #777; }
  .container > .section > .title_box_vacation > h3 { font-size: 40px; width: auto; height: 44px; line-height: 44px; }
  .container > .section > .title_box_vacation > p { font-size: 16px; margin-top: 19px; margin-left: 25px; }


  .container > .section > .curriculum_list { width: 100%; height: auto; border-top: 2px solid #777; border-bottom: 2px solid #777; }
  .container > .section > .curriculum_list > .curriculum { width: 100%; height: 100%; border-bottom: 1px solid #aaa; overflow: hidden; }
  .container > .section > .curriculum_list > .curriculum > h4 > .category{width: 120px;float:left;text-indent:10px;font-size: 14px;line-height: 52px;text-align:center;}
  .container > .section > .curriculum_list > .curriculum > h4 { width: 70%; height: 100%; text-align: left; font-size: 16px; line-height: 52px; float: left;text-indent:10px;}
  .container > .section > .curriculum_list > .curriculum > ul { width: 30%; height: 100%; float: left; }
  .container > .section > .curriculum_list > .curriculum > ul > li { width: 72px; height: 28px; float: left; background-color: #18364f; margin-top: 12px; margin-right: 10px; }
  .container > .section > .curriculum_list > .curriculum > ul > li > a { width: 100%; height: 100%; display: block; color: #fff; font-size: 12px; text-align: center; line-height: 28px; text-decoration: none; font-weight: bold; }
  .container > .section > .curriculum_list > .curriculum > ul > .curriculum_show { margin-left: 45px; }
  .container > .section > .curriculum_list > .curriculum > .table_box { width: 100%; height: auto; float: left; display: none;}
  .container > .section > .curriculum_list > .curriculum > .table_box > ul { width: 100%; height: 50px; border-top: 1px solid #bcbcbc; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li { height: 42px; padding-top: 8px; float: left; text-align: center; line-height: 30px; color: #333; font-weight: bold; font-size: 14px; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li > a { width: 60%; height: 64%; display: block; text-align: center; font-size: 14px; line-height: 30px; text-decoration: none; color: #fff; margin: 0 auto; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li > span { width: 0; height: 0; display: block; overflow: hidden; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .receipt { width: 20%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .days { width: 20%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .week { width: 20%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .time { width: 20%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .count { width: 10%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation { width: 7%; padding-left: 3%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation > img { height: 70%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .reservation { width: 10%; padding-right: 7%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .reservation > a { height: 70%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table { width: 100%; height: 30px; padding: 0; }
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table > li { height: 100%; font-size: 14px; line-height: 26px; text-align: center; float: left; background-color: #ededed; font-weight: normal; color: #000; }
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table > .count { width: 10%; padding-right: 30%; }
  .container > .section > .curriculum_list > .curriculum > .table_box ul:after { content: ""; display: block; clear: both; }
  .container > .section > .curriculum_list .on { height: auto !important; }
  .container > .section > .curriculum_list *:after { content: ""; display: block; clear: both; }
  .campusIntroductionBG { margin: 0 auto; width: 1080px; }
  .comm_tab1 { margin-top: 94px; }
  .comm_tab1 > .tab_menu { margin: 0 auto; width: 720px; }
  .comm_tab1 > .tab_menu > li { position: relative; float: left; margin: 0 4px; width: 350px; height: 53px; border: 1px solid #CACACA; }
  .comm_tab1 > .tab_menu > li > a { display: block; width: 100%; height: 100%; text-decoration: none; text-align: center; line-height: 53px; font-size: 18px; font-weight: bold; color: #565656; }
  .triangle { border-color: #565656 transparent transparent transparent; border-width: 14px; border-style: solid; width: 0; height: 0; position: absolute; top: 53px; left: 168px; }
  .comm_tab1 > .tab_menu .on { background-color: #565656; }
  .comm_tab1 > .tab_menu .on > a { color: #fff; }
  .comm_tab2 > .tab_menu .on { background-color: #006CBA; }
  .comm_tab2 > .tab_menu .on > a { color: #fff; }
  .studyBox{margin-top: 20px; margin-bottom: 10px; height: 25px; }
  .studyBox > label{font-size: 12px; line-height: 25px; margin-right: 10px; }
  .studyBox > select{width: 180px; height: 25px; margin-right: 3px; }
  .studyBox > input{width: 50px; height: 25px; border: 0; margin-right: 42px; line-height: 25px; }

}




/* For smaller displays like laptops */
@media (min-width: 641px) and (max-width: 1079px) {



.textStyle1{margin:0 auto;width:90%;}
.container > .section { width: 96%; height: auto; margin: 0 auto; margin-bottom: 70px; }
  .container > .section > .title_box { width: 100%; height: 100px; }
  .container > .section > .title_box > * { float: left; color: #565656; }
  .container > .section > .title_box > h3 { font-size: 25px; width: auto; height: 26px; margin-top: 58px; }
  .container > .section > .title_box > p { font-size: 16px; margin-top: 64px; margin-left: 10px; }

	.container > .section > .title_box_vacation { width: 100%; }
  .container > .section > .title_box_vacation > * { float: left; color: #565656; }
  .container > .section > .title_box_vacation > h3 { font-size: 25px; width: auto; height: 26px; margin-top: 58px; }
  .container > .section > .title_box_vacation > p { font-size: 16px; margin-top: 64px; margin-left: 10px; }


  .container > .section > .curriculum_list { width: 100%; height: auto; }
  .container > .section > .curriculum_list > .curriculum { width: 100%; height: 100%;}
  .container > .section > .curriculum_list > .curriculum > h4 { width: 100%; height: 100%; text-align: left; font-size: 16px; line-height: 20px; margin: 0 auto;padding: 10px 0; }
  .container > .section > .curriculum_list > .curriculum > h4 > span {font-size: 14px;margin-right:5px;}
  .container > .section > .curriculum_list > .curriculum > ul { width: 70%; height: 100%; margin: 0 auto; }
  .container > .section > .curriculum_list > .curriculum > ul > li { width:30%; height: 35px; float: left; background-color: #18364f; margin-top: 10px; margin-left: 3%;margin-bottom: 20px; }
  .container > .section > .curriculum_list > .curriculum > ul > li > a { width: 100%; height: 100%; display: block; color: #fff; font-size: 12px; text-align: center; line-height: 35px; text-decoration: none; font-weight: bold; }
  .container > .section > .curriculum_list > .curriculum > ul > .curriculum_show { margin-left: 0; }
  .container > .section > .curriculum_list > .curriculum > .table_box { width: 100%; height: auto; display: none;}
  .container > .section > .curriculum_list > .curriculum > .table_box > ul { width: 100%; height: auto; border-top: 2px solid #bcbcbc; float: left; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li { height: 45px; padding-top: 5px; float: left; text-align: center; line-height: 30px; color: #000; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li > a { width: 80%; height: 64%; display: block; text-align: center; font-size: 14px; line-height: 30px; text-decoration: none; color: #fff; margin: 0 auto; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li > span { width: 0; height: 0; display: block; overflow: hidden; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .days { width: 30%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .week { width: 30%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .time { width: 25%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .count { width: 15%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation { width: 49.1%; margin-right: 2%; position: relative; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation > img { margin-left: 75%; height: 75%; right: 0; position: absolute; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .reservation { width: 40%; position: relative; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .reservation > a { height: 75%; width: 60%; right: 20%; position: absolute; line-height: 40px;}
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table { width: 100%; height: auto; padding: 0; }
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table > li { height: 100%; font-size: 14px; line-height: 30px; text-align: center; float: left; background-color: #ededed; }
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table > .receipt { width: 20%; }
  .container > .section > .curriculum_list > .curriculum > .table_box ul:after { content: ""; display: block; clear: both; }
  .container > .section > .curriculum_list .on { height: auto !important; }
  .comm_tab1 { margin-top: 58px; }
  .comm_tab1 > .tab_menu { margin: 0 auto; width: 70%; }
  .comm_tab1 > .tab_menu > li { position: relative; float: left; margin: 0 1%; width: 46%; height: 53px; border: 1px solid #CACACA; }
  .comm_tab1 > .tab_menu > li > a { display: block; width: 100%; height: 100%; text-decoration: none; text-align: center; line-height: 53px; font-size: 18px; font-weight: bold; color: #565656; }
  .triangle { border-color: #565656 transparent transparent transparent; border-width: 14px; border-style: solid; width: 0; height: 0; position: absolute; top: 53px; left: 45%; }
  .comm_tab1 > .tab_menu .on { background-color: #565656; }
  .comm_tab1 > .tab_menu .on > a { color: #fff; }
  .comm_tab2 > .tab_menu .on { background-color: #006CBA; }
  .comm_tab2 > .tab_menu .on > a { color: #fff; }
  .studyBox{margin-top: 30px; margin-bottom: 20px; height: 30px; }
  .studyBox > label{font-size: 12px; line-height: 30px; margin-right: 10px; }
  .studyBox > select{width: 180px; height: 30px; margin-right: 3px; }
  .studyBox > input{width: 50px; height: 30px; border: 0; margin-right: 42px; line-height: 30px; }
}
/* For smartphones */
@media (max-width: 640px) {
.textStyle1{margin:0 auto;width:90%;font-size:16px;}
.container > .section { width: 96%; height: auto; margin: 0 auto; margin-bottom: 50px; }
  .container > .section > .title_box { width: 100%; height: 60px; }
  .container > .section > .title_box > * { color: #565656; }
  .container > .section > .title_box > h3 { font-size: 22px; width: 100%; height: 26px; margin-top: 40px; font-weight: bold;}
  .container > .section > .title_box > p { height: 16px; line-height: 16px; font-size: 14px; }

	.container > .section > .title_box_vacation { width: 100%; }
  .container > .section > .title_box_vacation > * { color: #565656; }
  .container > .section > .title_box_vacation > h3 { font-size: 22px; width: 100%; height: 26px; margin-top: 40px; font-weight: bold;}
  .container > .section > .title_box_vacation > p { height: 16px; line-height: 16px; font-size: 14px; }


  .container > .section > .curriculum_list { width: 100%; height: auto; }
  .container > .section > .curriculum_list > .curriculum { width: 100%; }
  .container > .section > .curriculum_list > .curriculum > h4 { width: 100%; height: 100%; text-align: left; font-size: 16px; line-height: 35px; margin: 0 auto; }
  .container > .section > .curriculum_list > .curriculum > h4 > span { font-size: 14px; height: 100%; margin-right:5px; display: block; text-align: center;}
  .container > .section > .curriculum_list > .curriculum > ul { width: 80%; height: 100%; margin: 0 auto; }
	.container > .section > .curriculum_list > .curriculum > ul:after { content: ''; display: block; clear: both; }
  .container > .section > .curriculum_list > .curriculum > ul > li { width: 30%; height: 28px; float: left; background-color: #18364f; margin-top: 12px; margin-left: 3%;margin-bottom: 20px; }
  .container > .section > .curriculum_list > .curriculum > ul > li > a { width: 100%; height: 100%; display: block; color: #fff; font-size: 12px; text-align: center; line-height: 28px; text-decoration: none; font-weight: bold; }
	.container > .section > .curriculum_list > .curriculum > .table_box {display: none;}
  .container > .section > .curriculum_list > .curriculum > .table_box > ul { width: 100%; height: auto; border-top: 2px solid #bcbcbc; float: left; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li { height: 55px; float: left; text-align: center; line-height: 24px; color: #000; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li > a { width: 100%; height: 100%; display: block; margin: 0 auto; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li > a > span { width: 0; height: 0; display: block; overflow: hidden; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > li > span { width: 0; height: 0; display: block; overflow: hidden; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .days { width: 30%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .week { width: 30%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .time { width: 25%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .count { width: 15%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation { width: 50%; height: 30px; position: relative;padding: 0; margin-bottom: 2%; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .situation > img {height: 100%; position: absolute;right:1%;}
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .reservation { width: 50%; height: 30px; position: relative; padding: 0;}
  .container > .section > .curriculum_list > .curriculum > .table_box > ul > .reservation > a { width: auto; height: 100%; display: block; margin: 0 auto; position: absolute; left:1%; padding: 0 10px; line-height: 30px; }
  .container > .section > .curriculum_list > .curriculum > .table_box > ul li:after { content: ""; display: block; clear: both; }
  .container > .section > .curriculum_list > .curriculum > .table_box ul:after { content: ""; display: block; clear: both; }
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table { width: 100%; height: 34px; padding: 0; }
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table > li { height: 100%; font-size: 13px; line-height: 32px; text-align: center; float: left; background-color: #ededed; }
  .container > .section > .curriculum_list > .curriculum > .table_box > .title_table > .receipt { width: 20%; }
  .container > .section > .curriculum_list .on { height: auto !important; }
  .comm_tab1 { margin-top: 40px; }
  .comm_tab1 > .tab_menu { margin: 0 auto; width: 90%; }
  .comm_tab1 > .tab_menu > li { position: relative; float: left; margin: 0 1%; width: 46%; height: 30px; border: 1px solid #CACACA; }
  .comm_tab1 > .tab_menu > li > a { display: block; width: 100%; height: 100%; text-decoration: none; text-align: center; line-height: 30px; font-size: 12px; font-weight: bold; color: #565656; }
  .triangle { border-color: #565656 transparent transparent transparent; border-width: 14px; border-style: solid; width: 0; height: 0; position: absolute; top: 30px; left: 45%; }
  .comm_tab1 > .tab_menu .on { background-color: #565656; }
  .comm_tab1 > .tab_menu .on > a { color: #fff; }
  .comm_tab2 > .tab_menu .on { background-color: #006CBA; }
  .comm_tab2 > .tab_menu .on > a { color: #fff; }
  .studyBox{margin-top: 20px; margin-bottom: 10px; height: 25px; }
  .studyBox > label{font-size: 12px; line-height: 25px; margin-right: 5px; }
  .studyBox > select{width: 150px; height: 25px; }
  .studyBox > input{width: 50px; height: 25px; border: 0; line-height: 25px; }
}