:root { --site_width:1440px; 
  --color_primary: #060f20; 
  /* --color_second: #4A596C; */
  --color_second: #333;
 }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
a { color: inherit; text-decoration: inherit; }
a:hover, a:focus, a:active { text-decoration: none; }
ul li { list-style: none; }
img { vertical-align: middle; border: none; }
button { border: none; background: none; cursor: pointer; }
i { font-style: normal; }

body { overflow-x: hidden; overflow-y: auto; }

/* body {background: #4A596C;} */
.header {width: 100%;height: 100px;margin: auto;background-color: #fff;  }
.header {background-image: url('/images/visual_bg4.png');  height: calc(100vh - 10px); background-size: cover; background-position: center;  position: relative; }
.header_wrap {max-width: var(--site_width);height: 100%;margin: 0 auto; }
.header_wrap ul {display: flex; justify-content: space-between; align-items: center; height: 130px; gap: 140px; border-bottom: 1px solid #333;}
.header_wrap ul span {font-size: 18px; font-weight: 500; color: #FFF; }
.header_logo {float: left;line-height: 80px; z-index: 1;}
.header_logo img {width: 50px; }

.header2 {width: 100%;height: 100px;margin: auto;background-color:#fff;  position: relative;}
/* .header2 {background-image: url('/images/visual_bg4.png');  height: calc(100vh - 10px); background-size: cover; background-position: center;  position: relative; border-bottom-right-radius: 200px;} */
.header2_wrap {max-width: var(--site_width);height: 100%;margin: 0 auto; }
.header2_wrap ul {display: flex; justify-content: space-between; align-items: center; padding: 0px; gap: 40px; padding-top: 10px;  padding-right: 10px; padding-left: 10px;}
.header2_wrap ul span {font-size: 18px; font-weight: 600; color: #333; width: 100%; padding-bottom: 40px;}
.header2_logo {float: left;line-height: 80px; z-index: 1;}
.header2_logo img {width: 80px; }

.sub_visual {width: 100%; height: 300px; background-color:#f5f5f5;  position: relative; background-image: url("/images/company_bg.png"); width: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover; }
.sub_visual_wrap {max-width: var(--site_width); width: 100%; height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  }    
.sub_visual_wrap h3{font-size: 32px; font-weight: 700; color: #ffffff;  border-bottom: 1px solid #ffffff; padding-bottom: 4px; margin-bottom: 20px; display: inline-block;}
.sub_visual_wrap span{font-size: 18px; font-weight: 500; color: #ffffff; padding-left: 0px; padding-bottom: 10px; display: inline-block;}

.board_visual {width: 100%; height: 300px; background-color:#f5f5f5;  position: relative; background-image: url("/images/board_news.png"); width: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover; }
.board_visual_wrap {max-width: var(--site_width); width: 100%; height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  }    
.board_visual_wrap h3{font-size: 32px; font-weight: 700; color: #ffffff;  border-bottom: 1px solid #ffffff; padding-bottom: 4px; margin-bottom: 20px; display: inline-block;}
.board_visual_wrap span{font-size: 18px; font-weight: 500; color: #ffffff; padding-left: 0px; padding-bottom: 10px; display: inline-block;}

.sns_visual {width: 100%; height: 300px; background-color:#f5f5f5;  position: relative; background-image: url("/images/sns_bg2.png"); width: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover; }
.sns_visual_wrap {max-width: var(--site_width); width: 100%; height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  }    
.sns_visual_wrap h3{font-size: 32px; font-weight: 700; color: #ffffff;  border-bottom: 1px solid #ffffff; padding-bottom: 4px; margin-bottom: 20px; display: inline-block;}
.sns_visual_wrap span{font-size: 18px; font-weight: 500; color: #ffffff; padding-left: 0px; padding-bottom: 10px; display: inline-block;}

.teach_visual {width: 100%; height: 300px; background-color:#f5f5f5;  position: relative; background-image: url("/images/en_bg.png"); width: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover; }
.teach_visual_wrap {max-width: var(--site_width); width: 100%; height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  }    
.teach_visual_wrap h3{font-size: 32px; font-weight: 700; color: #ffffff;  border-bottom: 1px solid #ffffff; padding-bottom: 4px; margin-bottom: 20px; display: inline-block;}
.teach_visual_wrap span{font-size: 18px; font-weight: 500; color: #ffffff; padding-left: 0px; padding-bottom: 10px; display: inline-block;}

.en_visual {width: 100%; height: 300px; background-color:#f5f5f5;  position: relative; background-image: url("/images/teach_bg3.png"); width: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover; }
.en_visual_wrap {max-width: var(--site_width); width: 100%; height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  }    
.en_visual_wrap h3{font-size: 32px; font-weight: 700; color: #ffffff;  border-bottom: 1px solid #ffffff; padding-bottom: 4px; margin-bottom: 20px; display: inline-block;}
.en_visual_wrap span{font-size: 18px; font-weight: 500; color: #ffffff; padding-left: 0px; padding-bottom: 10px; display: inline-block;}


.en_visual_wrap ul {display: flex; justify-content: space-between; align-items: center; width: 100%;}    
.en_visual_wrap ul .txtbox {margin-right: 100px; text-align: center; border: 1px solid #ffffff; padding: 20px; background: rgba(4, 73, 62, 0.8);}
.en_visual_wrap ul .txtbox h3{font-size: 22px; font-weight: 900; border: 0; margin-bottom: 20px;}    
.en_visual_wrap ul .txtbox h4{font-size: 14px; font-weight: 800; border: 0; color: rgb(117, 117, 117); }    
.en_visual_wrap ul .txtbox span{font-size: 18px; font-weight: 500; border-radius: 10px; padding: 10px 20px; background: tomato;}    

.teach_visual_wrap ul {display: flex; justify-content: space-between; align-items: center; width: 100%;}    
.teach_visual_wrap ul .txtbox {margin-right: 100px; text-align: center; border: 1px solid #ffffff; padding: 20px; background: rgba(4, 73, 62, 0.8);}
.teach_visual_wrap ul .txtbox h3{font-size: 22px; font-weight: 900; border: 0; margin-bottom: 20px;}    
.teach_visual_wrap ul .txtbox h4{font-size: 14px; font-weight: 800; border: 0; color: rgb(117, 117, 117); }    
.teach_visual_wrap ul .txtbox span{font-size: 18px; font-weight: 500; border-radius: 10px; padding: 10px 20px; background: tomato;}    

.sns_visual_wrap ul {display: flex; justify-content: space-between; align-items: center; width: 100%;}    
.sns_visual_wrap ul .txtbox {margin-right: 100px; text-align: center; border: 1px solid #ffffff; padding: 20px; background: rgba(4, 73, 62, 0.8);}
.sns_visual_wrap ul .txtbox h3{font-size: 22px; font-weight: 900; border: 0; margin-bottom: 20px;}    
.sns_visual_wrap ul .txtbox h4{font-size: 14px; font-weight: 800; border: 0; color: rgb(117, 117, 117); }    
.sns_visual_wrap ul .txtbox span{font-size: 18px; font-weight: 500; border-radius: 10px; padding: 10px 20px; background: tomato;}    

.board_visual_wrap ul {display: flex; justify-content: space-between; align-items: center; width: 100%;}    
.board_visual_wrap ul .txtbox {margin-right: 100px; text-align: center; border: 1px solid #ffffff; padding: 20px; background: rgba(4, 73, 62, 0.8);}
.board_visual_wrap ul .txtbox h3{font-size: 22px; font-weight: 900; border: 0; margin-bottom: 20px;}    
.board_visual_wrap ul .txtbox h4{font-size: 14px; font-weight: 800; border: 0; color: rgb(117, 117, 117); }    
.board_visual_wrap ul .txtbox span{font-size: 18px; font-weight: 500; border-radius: 10px; padding: 10px 20px; background: tomato;}    


.sub_visual_wrap ul {display: flex; justify-content: space-between; align-items: center; width: 100%;}    
.sub_visual_wrap ul .txtbox {margin-right: 100px; text-align: center; border: 1px solid #ffffff; padding: 20px; background: rgba(4, 73, 62, 0.8);}
.sub_visual_wrap ul .txtbox h3{font-size: 22px; font-weight: 900; border: 0; margin-bottom: 20px;}    
.sub_visual_wrap ul .txtbox h4{font-size: 14px; font-weight: 800; border: 0; color: rgb(117, 117, 117); }    
.sub_visual_wrap ul .txtbox span{font-size: 18px; font-weight: 500; border-radius: 10px; padding: 10px 20px; background: tomato;}    



.visual_txt {position: absolute; top: 50%;left:50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 100%;}
.visual_txt h3 {font-size: 46px; font-weight: 700; text-align: center; line-height: 1.5;}
.visual_txt h3 i{font-size: 46px; font-weight: 900; color:#e0af45;}
.visual_txt h4{font-size: 16px; font-weight: 400; color: #e0af45; margin-bottom: 0px; display:block;}
.visual_txt span{font-size: 18px; font-weight: 500; border: 1px solid #ffffff; padding: 10px 20px; border-radius: 8px; margin-top: 60px; display: inline-block; }
.visual_txt > span:nth-of-type(1){margin-right: 20px;}
.visual_txt h4 > span {border: 0; display: inline; color: #fff; padding: 0;}

.family_txt img {border-radius: 10px;}

/* .visual {width: 100%; height: 100%; background-color:#20201f; display: flex; justify-content: center; align-items: center;} */
/* .visual {width: 100%; height: 100%; background-color:#1a1f3d; display: flex; justify-content: center; align-items: center;} */
.visual {width: 100%; height: 100%; background-color: #060f20; display: flex; justify-content: center; align-items: center;}
.visual::-webkit-scrollbar {display:none;}

.visual {background-image: url('/images/wave_bg6.png'); background-size: cover; background-position: center;  position: relative;}
.visual {position: relative; }
.visual_wrap {max-width: var(--site_width); width: 100%; height: 550px; margin: auto; display: flex; justify-content: center; align-items: center;  }
.visual_wrap ul {width: 100%;  height: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; padding-left: 20px;}
.visual_wrap ul li h4 {font-size: 20px; font-weight: 700; color: #8f8f8f; margin-bottom: 10px;}
.visual_wrap ul li h3 {font-size: 40px; font-weight: 700; color: #dbd8d8; margin-bottom: 50px;}
.visual_wrap ul li span {font-size: 16px; font-weight: 800; color: #d8c985; }
.visual_wrap img {margin-right: 100px;}



.about_visual {background-image: url('/images/main_bg2.png'); background-size: cover; background-position: center;  position: relative;}
.about_visual {position: relative;}
.about_visual_wrap {max-width: var(--site_width); width: 100%; height: 400px; margin: auto; display: flex; justify-content: center; align-items: center;  }
.about_visual_wrap ul {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; padding-left: 20px;}
.about_visual_wrap ul li h5 {font-size: 18px; font-weight: 900; color: #b9b8b8; margin-bottom: 0px;}
.about_visual_wrap ul li h4 {font-size: 40px; font-weight: 700; color: #ffffff; margin-bottom: 30px;}
.about_visual_wrap ul li h3 {font-size: 20px; font-weight: 700; color: #ffffff; margin-bottom: 0px;}
.about_visual_wrap ul li span {font-size: 16px;  font-weight: 800; color: #d8c985; }
.about_visual_wrap img {margin-right: 100px;}


.history_visual {background-image: url('/images/main_bg6.png'); background-size: cover; background-position: center;  position: relative;}
.history_visual {position: relative;}
.history_visual_wrap {max-width: var(--site_width); width: 100%; height: 400px; margin: auto; display: flex; justify-content: center; align-items: center;  }
.history_visual_wrap ul {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; padding-left: 20px;}
.history_visual_wrap ul li h5 {font-size: 18px; font-weight: 900; color: #b9b8b8; margin-bottom: 0px;}
.history_visual_wrap ul li h4 {font-size: 40px; font-weight: 700; color: #ffffff; margin-bottom: 30px;}
.history_visual_wrap ul li h3 {font-size: 20px; font-weight: 700; color: #ffffff; margin-bottom: 0px;}
.history_visual_wrap ul li span {font-size: 16px;  font-weight: 800; color: #d8c985; }
.history_visual_wrap img {margin-right: 100px;}


.event_visual {background-image: url('/images/main_bg2.png'); background-size: cover; background-position: center;  position: relative;}
.event_visual {position: relative;}
.event_visual_wrap {max-width: var(--site_width); width: 100%; height: 400px; margin: auto; display: flex; justify-content: center; align-items: center;  }
.event_visual_wrap ul {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; padding-left: 20px;}
.event_visual_wrap ul li h5 {font-size: 18px; font-weight: 900; color: #b9b8b8; margin-bottom: 0px;}
.event_visual_wrap ul li h4 {font-size: 40px; font-weight: 700; color: #ffffff; margin-bottom: 30px;}
.event_visual_wrap ul li h3 {font-size: 20px; font-weight: 700; color: #ffffff; margin-bottom: 0px;}
.event_visual_wrap ul li span {font-size: 16px;  font-weight: 800; color: #d8c985; }
.event_visual_wrap img {margin-right: 100px;}

.event {width: 100%; margin: auto; padding-top: 100px; padding-bottom: 100px;}


.event_wrap {max-width: var(--site_width); margin: auto;}
.event_wrap > h3{font-size: 36px; font-weight: 700; color: var(--color_primary); margin-bottom: 10px; text-align: center;}
.event_wrap .event_desc{font-size: 16px;  font-weight: 400; color: var(--color_primary); text-align: center; margin-bottom: 50px; display: block;} 
.event_wrap table {width: 80%; border-collapse: collapse; text-align: center; margin: auto;}
.event_wrap table th, .event_wrap table td {border: 0px solid #ddd; padding: 12px;}
.event_wrap table th {background-color: var(--color_primary); color: #fff; font-weight: 600;}
.event_wrap table td {font-size: 16px; color: var(--color_second);}
.event_wrap table tr:nth-child(even) {background-color: #f9f9f9;}
.event_wrap table tr:hover {background-color: #f1f1f1;}   
.event_wrap table tr { border-bottom: 1px solid #eeeeee; height: 70px;}

.curriculum {width: 100%; margin: auto;}
.curriculum_wrap {max-width: var(--site_width); margin: auto; padding-top: 50px; padding-bottom: 100px;  display: flex; gap: 50px; justify-content: center; align-items: center; }
.curriculum ul {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; padding-left: 20px; gap: 10px; flex: wrap;}
.curriculum ul li {border: 1px solid #ddd; padding: 30px; border-radius: 0px; text-align: center;}
.curriculum ul h3 {font-size: 20px; text-align: center; font-weight: 700; color: var(--color_primary); margin-bottom: 30px;}
.curriculum ul p {font-size: 16px; font-weight: 400; color: var(--color_primary); display: block; margin-bottom: 30px;} 
.curriculum ul span {font-size: 16px; border: 1px solid var(--color_primary); padding: 5px 10px; text-align: center; font-weight: 400; color: var(--color_primary); margin-bottom: 0px;} 



.greetings {width: 100%; margin: auto;}
.greetings_wrap {max-width: var(--site_width); margin: auto; padding: 100px 0; display: flex; gap: 50px; justify-content: center; align-items: center; }
.greetings ul {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; padding-left: 20px; gap:150px;}
.greetings ul li h5 {font-size: 15px; font-weight: 900; color: var(--color_primary); margin-bottom: 0px;}
.greetings ul li h4 {font-size: 40px; font-weight: 700; color: var(--color_primary); margin-bottom: 50px; border-bottom: 1px solid rgb(192, 190, 190);  padding-bottom: 10px; display: inline-block;}
.greetings ul li h3 {font-size: 20px; font-weight: 700; color: var(--color_primary); margin-bottom: 0px;}
.greetings ul li span {font-size: 18px;  font-weight: 500; color: var(--color_primary); line-height: 1.7; display: inline-block;}

.introduce {width: 100%; margin: auto; background: #ebebeb;}
.introduce_wrap {max-width: var(--site_width); margin: auto; padding: 100px 0; display: flex; gap: 50px; justify-content: center; align-items: center; }
.introduce ul {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; padding-left: 20px; gap:100px;}
.introduce ul li h5 {font-size: 15px; font-weight: 900; color: var(--color_primary); margin-bottom: 0px;}
.introduce ul li h4 {font-size: 40px; font-weight: 700; color: var(--color_primary); margin-bottom: 50px; border-bottom: 1px solid rgb(192, 190, 190);  padding-bottom: 10px; display: inline-block;}
.introduce ul li h3 {font-size: 20px; font-weight: 700; color: var(--color_primary); margin-bottom: 0px;}
.introduce ul li span {font-size: 18px;  font-weight: 500; color: var(--color_primary); line-height: 1.7; display: inline-block;}

.main-visual-zoom {animation: mainVisualZoom 30s infinite cubic-bezier(0.4,0,0.2,1);transform-origin: 50% 50%;overflow: hidden;}
.header::-webkit-scrollbar {display:none;}
.main-visual-zoom::-webkit-scrollbar {display:none;}
/* @keyframes mainVisualZoom {0% { transform: scale(1); }50% { transform: scale(1.48); }100% { transform: scale(1); }} */
/* .visual {background-image: url('/images/wave.png'); background-size: cover; background-position: center; } */
.wise_saying {width: 100%; margin: auto; height: 80px; background:var(--color_primary); position: absolute;}

.wise_saying_wrap {max-width: var(--site_width);margin: 0 auto;display: flex;justify-content: flex-start;align-items: center;height: 50px;  padding: 20px;border-radius: 8px;}

.wise_saying_wrap span {font-size: 14px; font-weight: 500; color: #fff; }
.say_text {position: absolute; margin: auto; bottom: 0%; left: 0px; color: #fff; width: 100%;}
.say_text ul {display: flex; flex-direction: column; gap: 10px;}
.wise-saying-swiper {max-width: var(--site_width); margin: auto;}
.say_text2 {position: absolute;  top: 10%; left: 100px; color: #fff; z-index: 10;}

.family {width: 100%; margin: auto; padding-top: 100px; padding-bottom: 100px; background: #fff;}
.family_wrap {max-width: var(--site_width); margin: auto;}
.family_wrap ul {display: flex; gap: 0px; justify-content: space-between; align-items: center;}
.family_wrap ul h4{font-size: 20px; font-weight: 700; color: #333; margin-bottom: 10px; margin-top: 30px;}
.family_wrap ul p{font-size: 16px; font-weight: 400; color: #4d4d4d; margin-bottom: 40px;}
.family_wrap ul span{font-size: 16px; font-weight: 400; color: #fff; background: #4A596C; padding: 15px 20px; border-radius: 10px; cursor: pointer;}
.family_wrap .notice_list {display: flex; flex-direction: column; gap: 10px; }
.family_wrap ul > li { flex: 1; min-width: 0; box-sizing: border-box; text-align: center; }
.family_wrap ul > li:nth-of-type(2){border-left: 1px solid #ccc; border-right: 1px solid #ccc;}

.family1 {width: 100%; margin: auto; padding-top: 100px; padding-bottom: 0px; background: #fff;}
.family_wrap1 {max-width: var(--site_width); margin: auto;}
.family_wrap1 ul {display: flex; gap: 0px; justify-content: space-between; align-items: center;}
.family_wrap1 ul h4{font-size: 20px; font-weight: 700; color: #333; margin-bottom: 10px; margin-top: 30px;}
.family_wrap1 ul p{font-size: 16px; font-weight: 400; color: #4d4d4d; margin-bottom: 40px;}
.family_wrap1 ul span{font-size: 16px; font-weight: 400; color: #fff; background: #4A596C; padding: 15px 20px; border-radius: 10px; cursor: pointer;}
.family_wrap1 .notice_list {display: flex; flex-direction: column; gap: 10px; }
.family_wrap1 ul > li { flex: 1; min-width: 0; box-sizing: border-box; text-align: center; }
.family_wrap1 ul > li:nth-of-type(2){border-left: 1px solid #ccc; border-right: 1px solid #ccc;}



.intro {width: 100%; margin: auto; padding: 100px 0;}
.intro {background-image: url("/images/intro_bg2.png"); width: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover; border-bottom-left-radius: 0px; }  
.intro_wrap {max-width: var(--site_width); margin: auto;}
.intro_wrap > ul {display: flex; gap: 30px; justify-content: space-around; align-items: center; gap:200px;}
.intro_wrap h3 {font-size: 24px; font-weight: 700; background: rgba(211, 211, 211, 0.8); color: #333; margin-bottom: 0px; text-align: center; border: 1px solid #333; padding: 20px; border-radius: 10px;}
.intro_wrap h4 {font-size: 28px; font-weight: 900;  color: #ffffff; margin-bottom: 30px; text-align: center;}

.ceo {width: 100%; margin: auto; padding-top: 100px; padding-bottom: 100px;}
.ceo_wrap {max-width: var(--site_width); margin: auto;}
.ceo_wrap > ul {display: flex; gap: 30px; justify-content: space-around; align-items: center; gap:200px;}
.ceo_wrap span {font-size: 16px; font-weight: 400; line-height: 2;}
.ceo_wrap h3 {font-size: 28px; font-weight: 900;  color: #000000; text-align: left; margin-bottom: 30px;}
.ceo_wrap img {width: 400px; border-radius: 10px;}
.ceo_wrap .ceo_item {display: flex; gap: 20px; margin-top: 40px; text-align: center;}
.ceo_wrap .ceo_item h3{font-size: 20px; margin-bottom: 10px; font-weight: 700; color: #333; text-align: center;}
.ceo_wrap .ceo_item span {line-height: 1.3;}
.ceo_wrap .ceo_item li {font-size: 16px;font-weight: 400;color: #4d4d4d;line-height: 1.8;border: 1px solid #ccc;text-align: center;width: 180px;height: 140px;border-radius: 10%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.ceo_wrap h4 {font-size: 18px;font-weight: 700;color: #000000;text-align: left;margin-bottom: 30px;border-left: none;position: relative;}

.profile {width: 100%; margin: auto; padding-top: 100px; padding-bottom: 100px; background: #eeecec;}
.profile_wrap {max-width: var(--site_width); margin: auto; }
.profile_wrap > ul {width: 100%; display: flex; gap: 30px; justify-content: flex-start; align-items: flex-start; gap:200px; text-align: left;}

.profile_wrap span {font-size: 16px; font-weight: 400; line-height: 2;}
.profile_wrap h3 {font-size: 24px;font-weight: 700;color: #000000;text-align: left;margin-bottom: 30px;border-left: none;padding-left: 40px;position: relative;}

.profile_wrap h3::before {content: "";position: absolute;left: 0px;top: 4px; width: 14px;height: 30px;background: tomato;border-radius: 5px;}
.profile_wrap ul {display: flex;}
.profile_wrap ul ll {flex: 1;}
.profile_wrap .education {display: flex; flex-direction: column; gap: 0px; }
.profile_wrap .education li{font-size: 16px; font-weight: 400; padding: 10px; line-height: 1.5;  border-bottom: 1px solid #ccc;}

.eton {width: 100%; margin: auto; padding-top: 100px; padding-bottom: 100px;}
.eton_wrap {max-width: var(--site_width); margin: auto; }
.eton_wrap > ul {width: 100%; display: flex; gap: 30px; justify-content: space-around; align-items: center; gap:200px; text-align: left;}

.eton_wrap h3 {font-size: 24px;font-weight: 700;color: #000000;text-align: left;margin-bottom: 30px;border-left: none;position: relative;}
.eton_wrap h4 {font-size: 18px;font-weight: 700;color: #000000;text-align: left;margin-bottom: 30px;border-left: none;position: relative;}
.eton_wrap ul {display: flex;}
.eton_wrap ul ll {flex: 1;}

.location {width: 100%; margin: auto; padding-top: 100px; padding-bottom: 100px; background: #eeecec;}
.location_wrap {max-width: var(--site_width); margin: auto; }
.location_wrap span {font-size: 16px; font-weight: 400; line-height: 2;}
.location_wrap h3 {font-size: 24px;font-weight: 700;color: #000000;text-align: center;margin-bottom: 30px;border-left: none;position: relative;}
#daumRoughmapContainer1763050044376 {width:100%;height:400px;}

.board {width: 100%; margin: auto; padding: 100px 0; background: #4A596C;}
.board_wrap {max-width: var(--site_width); margin: auto;}
.board_wrap > ul {display: flex; gap: 110px; justify-content: space-between; align-items: center;}

/* 공지사항 2개 동일 너비 */
.notice-section { display: flex; }
.board_wrap > ul > li { flex: 1; min-width: 0; box-sizing: border-box; border: 0px solid #dfdddd; padding: 20px;}
.board_wrap h4 {font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 40px; text-align: center;}
.board_wrap h5 {font-size: 18px; font-weight: 400; color: #fff; margin-bottom: 0px; text-align: center;}
.board_wrap .notice_list:nth-of-type(1) {display: flex; justify-content: space-between; padding: 20px; border-top: 1px solid #d4d1d1;  }
.board_wrap .notice_list:not(:nth-of-type(1)) {display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid #d4d1d1;  }

.gallery {width: 100%; margin: auto; padding: 100px 0; background: #f1f0f0;}
.gallery_wrap {max-width: var(--site_width); margin: auto;}
.gallery_wrap > ul {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

.banner {width: 100%; margin: auto; padding: 0px 0; background: var(--color_primary); border: 1px solid #2b2a2a;}
.banner {background-image: url("/images/b_bg1.png"); width: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover;}
.banner_wrap {max-width: var(--site_width); margin: auto; padding: 40px; text-align: center; }
.banner_wrap h3 {font-size: 28px; font-weight: 700; color: #ffffff; margin-bottom: 10px; padding-top: 0px; text-align: center;}
.banner_wrap h4 {font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 50px; padding-top: 0px; text-align: center;}
.banner_wrap span {font-size: 18px; font-weight: 400; color: #fff; background: #c24141; text-align: center; border: 1px solid #fff; border-radius: 10px; margin: auto; display: inline-block; padding: 10px 20px;}


.gallery_wrap h4 {font-size: 36px; font-weight: 700; color: #333; margin-bottom: 10px; text-align: center;}
.gallery_wrap span {font-size: 16px; font-weight: 400; color: #333; text-align: center; display: block; margin-bottom: 50px;}
.gallery_img {border: 1px solid #ddd; padding: 5px; border-radius: 4px;}
.gallery_title {font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px; text-align: center;}
.gallery_date {font-size: 15px; font-weight: 400; color: #999; margin-top: 10px; text-align: right; padding-right: 20px;}

.location {width: 100%; margin: auto; padding: 100px 0; background: #ffffff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd ;}
.location_wrap {max-width: var(--site_width); margin: auto;}
.location_wrap > ul {display: flex; gap: 30px; justify-content: space-between; align-items: center;}
.location_wrap h4 {font-size: 30px; font-weight: 700; color: #333; margin-bottom: 40px; text-align: center;}
#daumRoughmapContainer1762848725235 {width:100%;height:400px;}


.review {width: 100%; margin: auto; padding: 100px 0; background: #e9e9e9; border-top: 0px solid #ddd; border-bottom: 0px solid #ddd ; border-bottom-right-radius: 0px;}
.review_wrap {max-width: var(--site_width); margin: auto;}
.review_wrap > ul {display: flex; gap: 30px; justify-content: space-between; align-items: center;}
.review_wrap  > h4 {font-size: 30px; font-weight: 700; color: #333; margin-bottom: 20px; text-align: center;}
.review_wrap > span{font-size: 20px; font-weight: 500; color: #333; margin-bottom: 40px; text-align: center; display: block;}
.review_wrap ul {display: flex; gap: 30px; justify-content: space-between; align-items: center;}

.review_wrap ul li {width: 100%;  text-align: center; padding: 30px; background: rgba(74, 89, 108, 0.2); border: 1px solid #868585;}
.review_wrap .review_txt h5 {font-size: 18px; font-weight: 700; text-align: center; padding-bottom: 30px;}
.review_wrap .review_txt p {font-size: 17px; font-weight: 400; text-align: center; display: block; padding-bottom: 20px;}
.review_wrap .review_txt span {font-size: 15px; font-weight: 400; text-align: center; display: block;}
.review_wrap .review_list {display: flex; gap: 30px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.review_wrap .review_list li {width: 30%;  text-align: center; padding: 20px; border: 1px solid #ddd; border-radius: 10px;}


.rating {width: 100%; margin: auto; padding-top: 0px; padding-bottom: 50px; background: #e9e9e9; border-top: 0px solid #ddd; border-bottom: 0px solid #ddd ; border-bottom-right-radius: 0px;}
.rating_wrap {max-width: var(--site_width); margin: auto;}
.rating_wrap > ul {display: flex; gap: 30px; justify-content: space-around; align-items: center;}
.rating_wrap   h4 {font-size: 40px; font-weight: 800; color: #333; margin-bottom: 20px; text-align: center;}
.rating_wrap  span{font-size: 20px; font-weight: 500; color: #333; margin-bottom: 40px; text-align: center; display: block;}
.rating_wrap ul {display: flex; gap: 30px; justify-content: space-around; align-items: center;}


/* .footer {width: 100%; margin: auto; padding: 50px 0; background: #4A596C;}
.footer_wrap {max-width: var(--site_width); width: 100%;}
.footer_wrap ul {display: flex; background: #000; gap: 10px; flex-direction: column; align-items: center; }
.footer_wrap span {font-size: 16px; font-weight: 400; color: #9e9d9d; }
.footer_wrap h4 {font-size: 16px; font-weight: 400; color: #9e9d9d; } */

/* .footer {width: 100%; margin: auto; padding: 50px 0; background: #4A596C;  }
.footer_wrap {max-width: var(--site_width); width: 100%; margin: auto; }
.footer_wrap ul {display: flex; gap: 10px; justify-content: flex-start; flex-direction: column; align-items: flex-start;}
.footer_wrap ul li {text-align: left;}
.footer_wrap span {font-size: 16px; font-weight: 400; color: #ddd; }
.footer_wrap h4 {font-size: 16px; font-weight: 400; color: #9e9d9d; }
.footer_wrap {display: flex; gap: 50px; justify-content: space-between; align-items: center; flex-wrap: wrap;} */

.email-modal { display: none; background: #fff; color:#333; width: 380px; z-index: 1000; border-radius: 15px; overflow: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.email-top { display: flex; background: var(--color_primary); padding: 20px; justify-content: space-between; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.email-title { width: 100%; font-size: 18px; font-weight: 600; color: #fff; }
.email-content { padding: 20px 20px 50px 20px; font-size: 14px; line-height: 30px; height: 260px; overflow: auto; }
.email-close-btn { background-image: url("/images/close.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 30px; width: 30px; cursor: pointer; }
.email-modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 100; display: none; }

.privacy-modal { display: none; background: #fff; color:#333; width: 380px; z-index: 1000; border-radius: 15px; overflow: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.privacy-top { display: flex; background: var(--color_primary); padding: 20px; justify-content: space-between; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.privacy-title { width: 100%; font-size: 18px; font-weight: 600; color: #fff;}
.privacy-content { padding: 20px 20px 50px 20px; font-size: 14px; line-height: 30px; height: 260px; overflow: auto; }
.privacy-close-btn { background-image: url("/images/close.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 30px; width: 30px; cursor: pointer; }
.privacy-modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 100; display: none; }

.board_title {border-top: 2px solid #333; padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid #d4d3d3;}
.board_title h3{font-size: 24px; font-weight: 700; color: var(--color_primary); margin-left: 10px; margin-bottom: 10px; margin-top: 10px;}
.board_title span{font-size: 16px; font-weight: 400; color: var(--color_second); margin-left: 10px; }
.board_content {border-bottom: 1px solid #d4d3d3; padding-bottom: 50px; margin-bottom: 50px;}
.board_content span{line-height: 1.7; margin-left: 10px; margin-right: 10px;}

.list_view_box {width: 100%; border-collapse: collapse; text-align: right; margin-top: 20px;}
.list_view {background: var(--color_primary); color: #fff; padding: 10px 20px; border-radius: 5px; text-align: right; cursor: pointer; display: inline-block; margin-top: 20px;}
.view_edit {background: var(--color_primary); color: #fff; padding: 10px 20px; border-radius: 5px; text-align: right; cursor: pointer; display: inline-block; margin-top: 20px;}
.list_delete {background: tomato; color: #fff; padding: 10px 20px; border-radius: 5px; text-align: right; cursor: pointer; display: inline-block; margin-top: 20px;}


/* 메인메뉴 호버시 하단 볼더 효과 */
.main_menu {
    position: relative;
}

.main_menu span{padding-bottom: 40px;}

.main_menu .sub_menu {display: none;}

.main_menu > a span {
    position: relative;
    z-index: 1;
}
.main_menu > a span::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 0;
    height: 2px;
    /* background: #0a0f1b; */
    background: #4A596C;
    border-radius: 2px;
    transition: width 0.18s cubic-bezier(.4,0,.2,1), left 0.18s cubic-bezier(.4,0,.2,1);
    z-index: 0;
}

/* 아래 볼더 */
.main_menu:hover > a span::after,
.main_menu > a:hover span::after {
    width: 100%;
    left: 0;
}

/* 메인메뉴 호버시 서브메뉴 보이게 */
.main_menu:hover > .sub_menu {
    display: block;
}
.main_menu .sub_menu {
    position: absolute;
    left: 0;
    top: 64px;
    /* background: rgba(6, 15, 32, 0.8); */
    background: #fff;
    /* background:#4A596C; */
    border: 1px solid #eee;
    width: 200px;
    height: 100px;
    z-index: 100;
    padding-top: 10px;
    padding-bottom: 10px;
    /* border-bottom-right-radius: 50px; */
}
.main_menu2 .sub_menu {
    position: absolute;
    left: 0;
    top: 64px;
    background:#4A596C;
    border: 1px solid #eee;
    width: 200px;
    height: 136px;
    z-index: 100;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main_menu3 .sub_menu {
    position: absolute;
    left: 0;
    top: 64px;
    background:#4A596C;
    border: 1px solid #eee;
    width: 200px;
    height: 210px;
    z-index: 100;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main_menu4 .sub_menu {
    position: absolute;
    left: 0;
    top: 64px;
    background:#4A596C;
    border: 1px solid #eee;
    width: 200px;
    height: 180px;
    z-index: 100;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main_menu1 .sub_menu {
    position: absolute;
    left: 0;
    top: 64px;
    background:#4A596C;
    border: 1px solid #eee;
    width: 200px;
    height: 105px;
    z-index: 100;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main_menu .sub_menu > li > a > span {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 10px;
    font-size: 16px;
    margin-left: 10px;
    font-weight: 400;
    color: #ffffff;
  }

.main_menu .sub_menu > li:hover
{
  background: #fff;
   /* border-bottom-right-radius: 50px; */
   color: #060f20;
}

.main_menu .sub_menu > li:hover > a > span{
    color: #060f20;
}



.sub_menu li a:hover {
    /* background: #f0f4ff; */
    color: #2a5edb;
}


.gallery_wrap > ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.history {width: 100%; margin: auto; padding: 100px 0; background: #f1f0f0;}
.history_wrap {max-width: var(--site_width); margin: auto;}
.history_wrap > ul {display: flex; gap: 30px; justify-content: flex-start; align-items: flex-start;}
.history_wrap > ul > li > span {font-size: 18px; font-weight: 600; color: #333;}
.history_wrap .accordion-btn1 {width: 100%; padding: 20px; background: #ddd; border: none; text-align: left; font-size: 16px; font-weight: 600; color: #333; cursor: pointer; outline: none; margin-bottom: 0px; display: flex; justify-content: space-between; align-items: center;}
.history_wrap .accordion-btn2 {width: 100%; padding: 20px; background: #ddd; border: none; text-align: left; font-size: 16px; font-weight: 600; color: #333; cursor: pointer; outline: none; margin-bottom: 0px; display: flex; justify-content: space-between; align-items: center;}
.history_wrap .accordion-btn3 {width: 100%; padding: 20px; background: #ddd; border: none; text-align: left; font-size: 16px; font-weight: 600; color: #333; cursor: pointer; outline: none; margin-bottom: 0px; display: flex; justify-content: space-between; align-items: center;}
.history_wrap .accordion-btn.active {background: #bbb;}

.accordion-content1, .accordion-content2, .accordion-content3 {
 
 padding: 0;
 padding-top: 30px;
 padding-bottom: 30px;
}

.accordion-btn1.active,
.accordion-btn2.active,
.accordion-btn3.active {color: #fff;background: #222 !important;}

.accordion-content1 h3{font-size: 17px; font-weight: 400; color: var(--color_primary); line-height: 1.7;}
.accordion-content2 h3{font-size: 17px; font-weight: 400; color: var(--color_primary); line-height: 1.7;}
.accordion-content3 h3{font-size: 17px; font-weight: 400; color: var(--color_primary); line-height: 1.7;}
.accordion-content1 {width: 100%;}
.year-history-table {width: 100%; border-collapse: collapse; margin-top: 20px;}
.year-history-table th, .year-history-table td {border: 1px solid #ddd; padding: 12px; text-align: center;}
.year-history-table th {background-color: var(--color_primary); color: #fff; font-weight: 600;}
.year-history-table th:nth-child(1) {width: 10%;}
.year-history-table th:nth-child(2) {width: 30%;}
.year-history-table th:nth-child(3) {width: 60%;}
.year-history-table td {font-size: 16px; color: var(--color_second);}       

.accordion-content3 h4 {font-size: 20px; font-weight: 600; color: #0d172e; margin-top: 20px; margin-bottom: 30px; border: 1px solid #ddd;  display: inline-block; padding: 20px; border-bottom: 2px solid #111111; padding-left: 20px;}
.accordion-content3 h3 {font-size: 17px; border-bottom: 1px solid #ddd; padding-top: 20px; padding-bottom: 20px;}

.sayings {width: 100%; margin: auto; padding: 100px 0; background: #f1f0f0;}
.sayings_wrap {max-width: var(--site_width); margin: auto;}
.sayings_wrap h3{font-size: 36px; font-weight: 700; color: var(--color_primary); margin-bottom: 10px; text-align: center;}
.sayings_wrap h4{font-size: 18px; font-weight: 400; color: var(--color_primary); margin-bottom: 10px; text-align: center;}
.sayings_wrap h5{font-size: 24px; font-weight: 700; color: var(--color_primary); margin-bottom: 10px; text-align: center;}
.sayings_txt {border: 1px solid #ddd; padding: 20px;margin-bottom: 50px; }
.sayings_wrap span{font-size: 16px;  font-weight: 400; color: var(--color_primary); text-align: center; display: block; margin-bottom: 50px;}
.sayings_wrap .sayings_txt span{font-size: 16px;  font-weight: 400; color: #333; text-align: center; display: block; margin-bottom: 0px; padding: 20px; background: #dadada; line-height: 1.8;}
.sayings_wrap > ul {display: flex; gap: 30px; justify-content: space-between; align-items: center;}

.history_wrap > h3{font-size: 36px; font-weight: 700; color: var(--color_primary); margin-bottom: 10px; text-align: center;}
.history_wrap > span{font-size: 16px;  font-weight: 400; color: var(--color_primary); text-align: center; display: block; margin-bottom: 50px;}

.sayings {background-image: url('/images/s_bg.jpg'); width: 100%; height: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover;}

.banner-2026 {
  position: fixed;
  top: 120px;
  right: 32px;
  z-index: 9999;
  background: #dad9d9ff;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 10px;
  vertical-align:middle;
  /* box-shadow: 0 4px 16px rgba(0,0,0,0.10); */
  padding: 18px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: fadeInText 1.2s;
}
.banner-2026-title {
    display: inline-block;
    /* padding-top: 10px; */
    color: #2d2d2d;
    font-size: 26px;
    /* font-weight: bold; */
    /* letter-spacing: 2px; */
    font-family: 'Jeongmeokbawi', sans-serif;
}


.CALENDAR-2026 {
  position: fixed;
  top: 200px;
  right: 32px;
  z-index: 9999;
  background: #dad9d9ff;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 10px;
  vertical-align:middle;
  /* box-shadow: 0 4px 16px rgba(0,0,0,0.10); */
  padding: 18px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: fadeInText 1.2s;
}
.CALENDAR-2026-title {
    display: inline-block;
    /* padding-top: 10px; */
    color: #2d2d2d;
    font-size: 26px;
    /* font-weight: bold; */
    /* letter-spacing: 2px; */
    font-family: 'Jeongmeokbawi', sans-serif;
}

/* 햄버거 메뉴 */
.hambuger_wrap {position: absolute; max-width: var(--site_width); top:0px; width: 60%; background: #333; height: 100%; z-index: 999999991;}
.hambuger_wrap .inner {padding-left: 10px; padding-right: 10px;}
.hambuger_wrap .hambuger .top {margin-top: 30px; text-align: center;}
.hambuger_wrap .hambuger .top > ul {display: flex; justify-content: space-between; align-items: center;}
.hambuger_wrap .hambuger .top:after {content: ""; height: 1px; width: 100%; display: block; background: #e9dddd; margin-top: 10px;}
.hambuger_wrap .hambuger .top > ul  li:nth-of-type(1) {font-size: 20px; font-weight: 700; color:#fff;}
.hambuger_wrap .hambuger .top > ul  li:nth-of-type(2) {background-image: url("../images/hambuger_close.png"); width:40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.hambuger_wrap .hambuger .menu {margin-top: 30px;}
.hambuger_wrap .hambuger .menu > ul {display: flex; justify-content: start; align-items: left; gap: 0px; flex-direction: column; color:#fff; font-size: 18px; font-weight: 600;}
.hambuger_wrap .hambuger .menu > ul  li {height: 50px; align-items: center; padding-left: 6px;}
.hambuger_wrap .hambuger .menu > ul  li span {line-height: 50px; font-size:16px;}
.hambuger_wrap .hambuger .menu > ul  li:hover {background: #ffffff; color:#FCB908;}
#sham_ico img{cursor: pointer;}
.hambuger_wrap {display: none;}
#ham_close {background-image: url("/images/hambuger_close.png"); width:40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover;}


/* footer */
.footer { width: 100%; background: #4A596C; color: #fff; height:350px; padding-left: 10px; padding-right: 10px;}
.footer .footer_wrap { max-width: var(--site_width); margin: 0 auto;  }
.footer .footer_wrap > ul { display: flex; justify-content: flex-start; gap: 20px; align-items: center; padding-top: 40px; }
.footer .footer_wrap > ul > li h3 { font-size: 16px; margin-bottom: 10px; font-weight: 400; color:#9e9e9e; }
.footer .footer_wrap .footer_list {display: flex; justify-content: space-between;}
.footer .footer_wrap .footer_list ul { display: flex; flex-direction: column; gap: 8px; margin-top: 40px;}
.footer .footer_wrap .footer_list ul h4{ font-size: 16px; margin-bottom: 4px; font-weight: 400; color:#9e9e9e; }

/* .footer .footer_wrap h3 { font-size: 14px; margin-bottom: 10px; font-weight: 400; color:#9c9c9c; }
.footer .footer_wrap h4 { font-size: 14px; margin-top: 30px; font-weight: 400; color:#9c9c9c; }
.footer .footer_wrap ul { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.footer .footer_wrap ul .footer_logo { background-image: url('/images/logo_f.png'); width: 100px; height: 100px; background-size: contain; background-position: center; background-repeat: no-repeat; padding-right: 20px; }
.footer_top { margin-bottom: 40px; padding-top: 10px;}
.footer_top h3 { border-bottom: 1px solid #cccaca; color: #333; padding-bottom:4px; margin-bottom: 40px; width: 100%; } */

/* #footer_type { display: flex;  gap: 15px; }
#footer_type > ul > li { font-size: 14px; color:#9c9c9c; cursor: pointer; transition: color 0.3s ease; } */

/* 이메일 수집거부 */
.email-modal { display: none; background: #fff; width: 380px; z-index: 1000; border-radius: 15px; overflow: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.email-top { display: flex; background: #4A596C; padding: 20px; justify-content: space-between; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.email-title { width: 100%; font-size: 18px; font-weight: 600; }
.email-content { padding: 20px 20px 50px 20px; font-size: 14px; line-height: 30px; height: 260px; overflow: auto; }
.email-close-btn { background-image: url("https://boyhomeclean.mycafe24.com/images/modal-close.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 30px; width: 30px; cursor: pointer; }
.email-modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 100; display: none; }

/* 개인정보처리방침 */
.condition-modal { display: none; background: #fff; width: 800px; z-index: 1000; border-radius: 15px; overflow: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.condition-top { display: flex; background: #4A596C; padding: 20px; justify-content: space-between; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.condition-title { width: 100%; font-size: 18px; font-weight: 600; }
.condition-content { padding: 20px 20px 50px 20px; font-size: 14px; line-height: 30px; height: 260px; overflow: auto; }
.condition-close-btn { background-image: url("https://boyhomeclean.mycafe24.com/images/modal-close.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 30px; width: 30px; cursor: pointer; }
.condition-modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 100; display: none; }

/* 개인정보처리방침 */
.personal-modal { display: none; background: #fff; width: 800px; z-index: 1000; border-radius: 15px; overflow: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.personal-top { display: flex; background: #4A596C; padding: 20px; justify-content: space-between; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.personal-title { width: 100%; font-size: 18px; font-weight: 600; }
.personal-content { padding: 20px 20px 50px 20px; font-size: 14px; line-height: 30px; height: 260px; overflow: auto; }
.personal-content h3 { font-size:20px; }
.condition-content h3 { font-size:20px; }
.personal-close-btn { background-image: url("https://boyhomeclean.mycafe24.com/images/modal-close.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 30px; width: 30px; cursor: pointer; }
.personal-modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 100; display: none; }

.blog ul {display: flex; gap: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.blog ul li{width: 48%;  text-align: center; padding: 20px; border-top: 1px solid #ddd;}
.blog ul li .top{margin-top: 20px;}
.blog ul li .top span{font-size: 18px; font-weight: 800; color: #333; margin-bottom: 30px; display: block;}
.blog ul li .body span{font-size: 16px; font-weight: 400; color: #333; margin-bottom: 30px; display: block;}
.blog ul li .date span{font-size: 14px; text-align: right; font-weight: 400; color: #333; display: block;}

.learning {width: 100%; margin: auto; padding: 100px 0; padding-bottom: 50px; background: #f1f0f0;}
.learning_wrap {max-width: var(--site_width); margin: auto;}
.learning_wrap > h3{font-size: 36px; font-weight: 700; color: var(--color_primary); margin-bottom: 10px; text-align: center;}
.learning_wrap span {line-height: 2;}
.learning_wrap .learning_desc{font-size: 16px;  font-weight: 400; color: var(--color_primary); text-align: center; margin-bottom: 50px; display: block;} 
.learning_wrap table {width: 80%; border-collapse: collapse; text-align: center; margin: auto;}
.learning_wrap table th, .learning_wrap table td {border: 0px solid #ddd; padding: 12px;}
.learning_wrap table th {background-color: var(--color_primary); color: #fff; font-weight: 600;}
.learning_wrap table td {font-size: 16px; color: var(--color_second);}
.learning_wrap table tr:nth-child(even) {background-color: #f9f9f9;}
.learning_wrap table tr:hover {background-color: #f1f1f1;}   
.learning_wrap table tr { border-bottom: 1px solid #eeeeee; height: 70px;}
.learning_wrap ul h3 {font-size: 24px; font-weight: 800; color: var(--color_primary); margin-bottom: 30px;}
.learning_wrap .alevel {display: flex; margin-top: 50px; gap: 100px; justify-content: space-between; align-items: flex-start;}
.learning_wrap .alevel .alevel-b li {margin-bottom: 30px;}
.learning_wrap .alevel .alevel-b li i{margin-bottom: 0px; display: block; font-size: 17px; font-weight: 600; padding-bottom: 5px;} 
.learning_wrap .alevel .alevel-b li span{border: 1px solid #000000; padding: 10px; display: block; font-size: 16px; font-weight: 400; line-height: 1.7;} 
.learning_wrap .alevel h3 {font-size: 21px; font-weight: 900; background: #F72020; color:#fff; border-radius: 10px; padding: 10px; margin-bottom: 50px;}
.learning_wrap .alevel h4 {font-size: 18px; font-weight: 900; background: #333; color:#fff; border-radius: 10px; padding: 10px; margin-top: 50px; margin-bottom: 20px;}
.learning_wrap .alevel h5 {font-size: 16px; font-weight: 500; color:#333; border-radius: 10px; padding: 10px; margin-bottom: 20px;}
.learning_wrap .alevel h5 i {display: inline-flex;align-items: center;justify-content: center;height: 24px;width: 24px;background: #333;color: #fff;border-radius: 50%;padding: 0;margin-right: 10px;font-size: 16px;font-weight: 600;border: none;box-shadow: 0 2px 6px rgba(0,0,0,0.08);}
.learning_wrap .etoprep_alevel {display: flex; gap: 30px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 30px;}
.learning_wrap .etoprep_alevel li { border: 1px solid #ddd; padding: 20px; text-align: center;}
.alevel-benefit-list {display: flex;gap: 0;justify-content: space-between;margin: 30px 0;}
.alevel-benefit-list li {flex: 1 1 0;text-align: center;background: #f7f7fa;border-radius: 10px;margin: 0 4px;padding: 18px 0;font-size: 16px;font-weight: 600;color: #2d5be3;box-shadow: 0 2px 8px rgba(0,0,0,0.04);min-width: 0;word-break: keep-all;}


.learning3 {width: 100%; margin: auto; padding: 100px 0; padding-bottom: 50px; background: #f1f0f0;}
.learning_wrap3 {max-width: var(--site_width); margin: auto;}
.learning_wrap3 span {line-height: 2;}
.learning_wrap3 > h3{font-size: 36px; font-weight: 700; color: var(--color_primary); margin-bottom: 10px; text-align: center;}
.learning_wrap3 .learning_desc{font-size: 16px;  font-weight: 400; color: var(--color_primary); text-align: center; margin-bottom: 50px; display: block;} 
.learning_wrap3 table {width: 80%; border-collapse: collapse; text-align: center; margin: auto;}
.learning_wrap3 table th, .learning_wrap table td {border: 0px solid #ddd; padding: 12px;}
.learning_wrap3 table th {background-color: var(--color_primary); color: #fff; font-weight: 600;}
.learning_wrap3 table td {font-size: 16px; color: var(--color_second);}
.learning_wrap3 table tr:nth-child(even) {background-color: #f9f9f9;}
.learning_wrap3 table tr:hover {background-color: #f1f1f1;}   
.learning_wrap3 table tr { border-bottom: 1px solid #eeeeee; height: 70px;}
.learning_wrap3 ul h3 {font-size: 24px; font-weight: 800; color: var(--color_primary); margin-bottom: 30px;}
.learning_wrap3 .igcse {display: flex; margin-top: 50px; gap: 30px; justify-content: space-between; align-items: flex-start;}
.learning_wrap3 .igcse  > li {margin-bottom: 30px; width: 48%;}
.learning_wrap3 .igcse  .igcse-b {margin-bottom: 30px; width: 100%;}
.learning_wrap3 .igcse  .igcse-b li {margin-bottom: 30px; width: 100%;}

.learning_wrap3 .igcse  li i{margin-bottom: 0px; display: block; font-size: 17px; font-weight: 600; padding-bottom: 5px;} 
.learning_wrap3 .igcse  li span{border: 1px solid #000000; padding: 10px; display: block; font-size: 16px; font-weight: 400; line-height: 1.7;} 
.learning_wrap3 .igcse h3 {font-size: 21px; font-weight: 900; background: #F72020; color:#fff; border-radius: 10px; padding: 10px; margin-bottom: 50px;}
.learning_wrap3 .igcse h4 {font-size: 18px; font-weight: 900; background: #333; color:#fff; border-radius: 10px; padding: 10px; margin-top: 50px; margin-bottom: 20px;}
.learning_wrap3 .igcse h5 {font-size: 16px; font-weight: 500; color:#333; border-radius: 10px; padding: 10px; margin-bottom: 20px;}
.learning_wrap3 .igcse h5 i {display: inline-flex;align-items: center;justify-content: center;height: 24px;width: 24px;background: #333;color: #fff;border-radius: 50%;padding: 0;margin-right: 10px;font-size: 16px;font-weight: 600;border: none;box-shadow: 0 2px 6px rgba(0,0,0,0.08);}
.learning_wrap3 .etoprep_alevel {display: flex; gap: 30px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 30px;}
.learning_wrap3 .etoprep_alevel li { border: 1px solid #ddd; padding: 20px; text-align: center;}



.learning4 {width: 100%; margin: auto; padding: 100px 0; padding-bottom: 50px; background: #f1f0f0;}
.learning_wrap4 {max-width: var(--site_width); margin: auto;}
.learning_wrap4 h3 {font-size: 36px; font-weight: 700; color: var(--color_primary); margin-bottom: 10px; text-align: center;}

.learning_wrap4 .alevel {display: flex; margin-top: 50px; gap: 100px; justify-content: space-between; align-items: flex-start;}
.learning_wrap4 .alevel .alevel-b li {margin-bottom: 30px;}
.learning_wrap4 .alevel .alevel-b li i{margin-bottom: 0px; display: block; font-size: 17px; font-weight: 600; padding-bottom: 5px;} 
.learning_wrap4 .alevel .alevel-b li span{border: 1px solid #000000; padding: 10px; display: block; font-size: 16px; font-weight: 400; line-height: 1.7;} 
.learning_wrap4 .alevel h3 {font-size: 21px; font-weight: 900; background: #F72020; color:#fff; border-radius: 10px; padding: 10px; margin-bottom: 50px;}
.learning_wrap4 .alevel h4 {font-size: 18px; font-weight: 900; background: #333; color:#fff; border-radius: 10px; padding: 10px; margin-top: 50px; margin-bottom: 20px;}
.learning_wrap4 .alevel h5 {font-size: 16px; font-weight: 500; color:#333; border-radius: 10px; padding: 10px; padding-bottom: 30px;}
.learning_wrap4 .alevel h5 i {display: inline-flex;align-items: center;justify-content: center;height: 24px;width: 24px;background: #333;color: #fff;border-radius: 50%;padding: 0;margin-right: 10px;font-size: 16px;font-weight: 600;border: none;box-shadow: 0 2px 6px rgba(0,0,0,0.08);}
.learning_wrap4 .etoprep_alevel {display: flex; gap: 30px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 30px;}
.learning_wrap4 .etoprep_alevel li { border: 1px solid #ddd; padding: 20px; text-align: center;}
/* .alevel-benefit-list {display: flex;gap: 0;justify-content: space-between;margin: 30px 0;}
.alevel-benefit-list li {flex: 1 1 0;text-align: center;background: #f7f7fa;border-radius: 10px;margin: 0 4px;padding: 18px 0;font-size: 16px;font-weight: 600;color: #2d5be3;box-shadow: 0 2px 8px rgba(0,0,0,0.04);min-width: 0;word-break: keep-all;} */
.alevel_wrap .igcse li span {border: 1px solid #000000; padding: 10px; display: block; font-size: 16px; font-weight: 400; line-height: 1.7;} 
#igcse li i{margin-bottom: 0px; display: block; font-size: 24px; font-weight: 800; padding-bottom: 5px;} 
#igcse li {margin-bottom: 20px;}

.learning2 {width: 100%; margin: auto; padding: 100px 0; padding-bottom: 50px; background: #f1f0f0;}
.learning_wrap2 {max-width: var(--site_width); margin: auto;}
.learning_wrap2 h3 {font-size: 36px; font-weight: 700; color: var(--color_primary); margin-bottom: 10px; text-align: center;}

.learning_wrap2 .alevel {display: flex; margin-top: 50px; gap: 100px; justify-content: space-between; align-items: flex-start;}
.learning_wrap2 .alevel .alevel-b li {margin-bottom: 30px;}
.learning_wrap2 .alevel .alevel-b li i{margin-bottom: 0px; display: block; font-size: 17px; font-weight: 600; padding-bottom: 5px;} 
.learning_wrap2 .alevel .alevel-b li span{border: 1px solid #000000; padding: 10px; display: block; font-size: 16px; font-weight: 400; line-height: 1.7;} 
.learning_wrap2 .alevel h3 {font-size: 21px; font-weight: 900; background: #F72020; color:#fff; border-radius: 10px; padding: 10px; margin-bottom: 50px;}
.learning_wrap2 .alevel h4 {font-size: 18px; font-weight: 900; background: #333; color:#fff; border-radius: 10px; padding: 10px; margin-top: 50px; margin-bottom: 20px;}
.learning_wrap2 .alevel h5 {font-size: 16px; font-weight: 500; color:#333; border-radius: 10px; padding: 10px;}
.learning_wrap2 .alevel h5 i {display: inline-flex;align-items: center;justify-content: center;height: 24px;width: 24px;background: #333;color: #fff;border-radius: 50%;padding: 0;margin-right: 10px;font-size: 16px;font-weight: 600;border: none;box-shadow: 0 2px 6px rgba(0,0,0,0.08);}
.learning_wrap2 .etoprep_alevel {display: flex; gap: 30px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 30px;}
.learning_wrap2 .etoprep_alevel li { border: 1px solid #ddd; padding: 20px; text-align: center;}
/* .alevel-benefit-list {display: flex;gap: 0;justify-content: space-between;margin: 30px 0;}
.alevel-benefit-list li {flex: 1 1 0;text-align: center;background: #f7f7fa;border-radius: 10px;margin: 0 4px;padding: 18px 0;font-size: 16px;font-weight: 600;color: #2d5be3;box-shadow: 0 2px 8px rgba(0,0,0,0.04);min-width: 0;word-break: keep-all;} */

.igcse-feature-list {margin-top: 0px;}

.learning_wrap2 h5 {font-size: 20px; font-weight: 800; color: var(--color_primary); margin-bottom: 10px;}
.learning_wrap2 span {font-size: 16px; padding-left: 20px; font-weight: 400; color: var(--color_primary); display: block; margin-bottom: 50px;}

.etonprep {width: 100%; margin: auto; padding: 100px 0; background: #F72020;}
.etonprep_wrap {max-width: var(--site_width); margin: auto;}
.etonprep_wrap li { border: 1px solid #ddd; color:#333; font-size: 18px; font-weight: 800; padding: 20px; text-align: center; background: #fff;}
.etonprep_wrap h3 {font-size: 36px; font-weight: 900;  color:#fff; border-radius: 10px; padding: 10px; margin-bottom: 50px; text-align: center;}

.eton-alevel {width: 100%; margin: auto; padding: 50px 0; padding-bottom: 100px; background: #f1f0f0;}
.eton-alevel_wrap {max-width: var(--site_width); margin: auto;}
.eton-alevel_wrap h3 {font-size: 22px; font-weight: 900;  color:#333; border-radius: 10px; padding: 10px; margin-bottom: 30px; text-align: center;}
.eton-alevel_wrap h4 {font-size: 18px; font-weight: 900;  color:#F72020; border-radius: 10px; padding: 10px; margin-bottom: 20px; text-align: center;}
.eton-alevel_wrap {display: flex; gap: 30px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.eton-alevel_wrap ul {border: 1px solid #ddd; padding: 20px; text-align: center;}

.teacher {display: flex; gap: 80px; justify-content: space-around; margin-top: 50px;}
.teacher .teacher_line{border: 1px solid #ddd; padding: 20px; text-align: center; background: #fff  ;}

.teacher img{max-width: 350px; max-height: 500px; }

.hero_banner {
    /* background: linear-gradient(135deg, #0b1220 0%, #1e3a5f 100%); */
    background: url('/images/bg_global.png') no-repeat center center/cover;   
    padding: 60px 32px;
    margin-bottom: 0;
}

.hero_content {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.hero_left {
    color: #ffffff;
}

.hero_badge {
    display: inline-block;
    background: rgba(14, 165, 233, 0.15);
    color: #60d5f8;
    padding: 8px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.hero_title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 16px;
    color: #ffffff;
}

.hero_subtitle {
    font-size: 17px;
    color: #cbd5e1;
    line-height: 1.7;
    font-weight: 400;
}

.hero_right {
    text-align: right;
}

.hero_tagline {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 24px;
    line-height: 1.5;
}

.hero_buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.hero_buttons a {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn_kakao {
    background: #03C75A;
    color: #ffffff;
    border: 2px solid #03C75A;
}

.btn_kakao:hover {
    background: #02a847;
    border-color: #02a847;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(3, 199, 90, 0.3);
}

.btn_phone {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn_phone:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.gallery_container {display:flex; flex-wrap: wrap; gap: 40px; justify-content: space-around; margin: 80px 0;}
.gallery_item {border-radius: 10px; overflow: hidden; background: #fff; width: 380px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.3s;}
.gallery_item:hover {transform: translateY(-5px);}
.gallery_link {text-decoration: none; color: inherit; display: block;}
.gallery_image {width: 380px; height: 450px; overflow: hidden; background: #f0f0f0;}
.gallery_image img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;}
.gallery_item:hover .gallery_image img {transform: scale(1.05);}
.gallery_info {padding: 15px;}
.gallery_info h4 {font-size: 18px; font-weight: 600; color: var(--color_second); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.gallery_writer {font-size: 14px; color: #666; margin-bottom: 5px;}
.gallery_date {font-size: 12px; color: #999;}

@media (max-width: 768px) {
    .page_header h1 { font-size: 28px; }
    .page_header p { font-size: 15px; }
    .content_section { padding: 22px; }
    .content_section h2 { font-size: 22px; }
    .info_boxes, .comparison_grid { grid-template-columns: 1fr; }
    .alevel_container { padding: 28px 16px; }
    
    .hero_banner { padding: 40px 20px; }
    .hero_content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .hero_title { font-size: 28px; }
    .hero_tagline { font-size: 22px; }
    .hero_right { text-align: center; }
    .hero_buttons {
        justify-content: center;
        flex-direction: column;
    }
    .hero_buttons a { width: 100%; text-align: center; }
}