@charset "utf-8";
/*Header*/
.MobileMenuBtn{ display:none;}
.banner{ background-position-x:31%;}
@media screen and ( max-width: 1100px) and ( min-width: 768px) {
/*Header*/
.top_bg{ width: 100%; height: 80px; background: #fff ;}
.MobileMenuBtn{ display:flex; padding:25px; width:29px; height:29px; flex-direction: column; justify-content: center; gap:6px; cursor:pointer;}
.MobileMenuBtn span{ border-top:2px solid #776493;}
html body .top{ width:100%; padding:0px 0 0 20px; box-sizing:border-box; display:flex; justify-content: space-between; position:relative; z-index:10;}
html body .nav_1{ display:none; position:absolute; padding:40px 20px 20px 20px; background-color:#f5f5f5; z-index:2; top:80px; left:0; right:0;}
html body .nav_2{ display:none; flex-wrap: wrap; gap:2%; position:absolute; padding:130px 20px 20px 20px; background-color:#fff; z-index:1; top:80px; left:0; right:0; box-shadow:0 10px 10px 0 rgba(0,0,0,.1);}
.nav_2 li{ width:18%; height:auto; float:none; font-size:0; line-height:1.2;}
.nav_2 li a{ color:#333; padding:20px 10px 10px 10px; display:block; font-size:20px;}
.nav_2 > li > ul{ position:relative; width:auto; visibility: visible; top:auto; left:auto; right:auto;}
.nav_2 > li > ul > li{ width:100%; height:auto;}
.nav_2 > li > ul > li > a{ width:100%; display:block; line-height:normal; float:none; box-sizing:border-box; text-align:left; padding:10px 20px; font-size:15px;}
.nav_2 > li > ul > li > a:hover{ width:100%;}
.logo{ position:relative; top:0; padding:10px 0; width:auto; height:auto;}
.logo h1{ width:322px; height:59px; background-size:100%;}

html body .MenuOpen .nav_1{ display: block; }
html body .MenuOpen .nav_2{ display: flex; }

/*index*/
.index_banner{ min-width:auto; background: url(../image/banner_01.jpg) 44% center no-repeat;}
html body .wrapper{ width:100%; padding:20px; box-sizing: border-box;}
.box_300,.box_335,.box_670{ width:100%;}
html body .mart_10, html body .mart_20{margin-top:20px;}
html body .marl_19, html body .marl_20{margin-left:0;}
html body .marr_19, html body .marr_20{margin-right:0;}
html body .marb_10, html body .marb_30{margin-bottom:30px;}
.padr_25{ padding-right:0;}

html body .marr_10{margin-right:10px;}
html body .index_title_02{ width:auto; margin:0 20px; overflow:hidden;}
.index_title{ width:100%; background-size: 100% 4px; box-sizing:border-box; overflow:hidden;}
.index_content{ height:auto;}
.tab_area{ overflow:hidden;}
.tag_item{ width:25%; background-size: cover;}
.tag_now{ width:25%; background-size: cover;}
.tag_item:hover{ width:25%; background-size: cover;}
.tag{ width:100%; height:auto;}

.banner{ min-width:100%;}

/*Content*/
html body .guide_content{ padding:0 15px; box-sizing: border-box;}
html body .Parallel{ display:flex; gap:40px;}
html body .content_right{ float:none; width:100%; margin:30px 0 0 0;}
html body .content_right table{ width:100%;}
html body .link_list{ width:100%;}
html body .side_nav{}
.renew_download{ width:100%;}
.clearfix:after{ display:none;}
html body .about img{ max-width:100%; width:max-content;}
html body .name_list{ width:100%; padding:15px; box-sizing:border-box;}
.train_title{ width:100%; overflow:hidden;}

.qa_box{ width:100%;}
html body .sitemap_cont{ width:100%; display:grid; grid-gap: 20px; grid-template-columns: 1fr 1fr; padding:15px; box-sizing:border-box;}
html body .sitemap_box{ width:auto;}
html body .contact_form, html body .cont_text{ max-width:100%; width:100%; padding:15px; box-sizing:border-box;}
html body .cont_email,
html body .cont_message{ width:100%;}

html body .sitemap_cont{ width:100%; padding-top:15px;}
html body .sitemap_box{ width:100%; margin:0; padding:15px; box-sizing:border-box;}
html body .contact_form, html body .cont_text{ max-width:100%; padding:15px; box-sizing:border-box;}
html body .cont_input{ width:100%;}
html body .cont_email{ width:100%;}
.sign_in_area{ width:100%;}
input.sign_in_324{ width:100%;}
html body .btn_sign{ width:100%;}
input.sign_in{ width:100%; margin-bottom:5px;}
html body .member_message{ width:100%;}
.info_refresh{ float:none; position:static; display:inline-block;}
.info_number{ position:static; display:inline-block;}
html body .info_item{ width:auto; padding:5px 10px;}
.search_area_02{ width:100%;}
.search_area_02::after{ content:""; display:block; clear:both;}
select.add_city, select.add_area{ width:100%;}
html body .list_form{ width:100%;}
input.sign_in_190{ width:100%;}
input.sign_in_150{ width:100%;}
input.sign_in_50{ width:50%;}
search_area_02 { margin-bottom:10px;}
.agree_area{ width:100%;}
.search_area_02{ width:100%;}
html body .search_box_02{ float:none;}
html body .info_item{ padding:15px; box-sizing:border-box; height:auto;}
.agree_area{ margin:0; width:100%; background-color:#f5f5f5; padding:5px;}
html body .search_box.AlignLeft{ padding-left:152px; box-sizing:border-box;}
html body .search_box_02.AlignLeft{ padding-left:152px; box-sizing:border-box;}
html body .search_box.Flex{ display:flex; width:100%; margin-bottom:10px;}
html body .search_box.Flex .search_text{ width:140px; text-align:left; flex-shrink:0;}
html body .search_box.Flex .search_text br{ display:none;}
html body .search_box_02.Flex .search_text{ width:140px; text-align:left; flex-shrink:0;}
html body .search_box_02.Flex .search_text br{ display:none;}
html body .search_box_02.Flex .search_text_02{ white-space:nowrap;}
html body .search_box_02.Flex{ display:flex;}

.box_960{ width:100%;}
.StpeBox{ display:flex; width:100%; padding:0 15px; box-sizing:border-box;}
.step_1, .step_1_h, .step_2, .step_2_h, .step_2_login, .step_2_login_h, .step_3, .step_3_h, .step_3_login, .step_3_login_h, .step_4, .step_4_h{ flex:1; position:static; width:auto; background-size: 100% 100%; padding:0 10px; text-align:center;}
html body .course_area,
html body .course_area table{ width:100%; box-sizing:border-box;}
html body .step_area{ width:100%;}

/*Search*/
html body .search_area{ width:100%; margin:0; display:flex; height:auto; gap:15px;}
input.search_name,
input.search_email,
input.search_companyname{ width:100%; box-sizing:border-box; height:35px;}
.search_box{ overflow: inherit; padding:0;}
.AlignBottom{ align-items: flex-end;}

/*Footer*/
.footer{ padding:20px; box-sizing:border-box; height:auto;}

}

@media screen and ( max-width: 767px) {
/*Header*/
.top_bg{ width: 100%; height: 70px; background: #fff ; position:relative; z-index:10;}
.MobileMenuBtn{ display:flex; padding:15px; width:21px; height:21px; flex-direction: column; justify-content: center; gap:6px;}
.MobileMenuBtn span{ border-top:2px solid #776493;}
html body .top{ width:100%; padding:10px 0 10px 10px; box-sizing:border-box; display:flex; justify-content: space-between;}
html body .nav_1{ display:none; position:absolute; padding:20px; background-color:#f5f5f5; z-index:2; top:70px; left:0; right:0;}
html body .nav_2{ display:none; position:absolute; padding:140px 20px 20px 20px; background-color:#fff; z-index:1; top:70px; left:0; right:0;}
.nav_2 li{ width:100%; height:auto; float:none; font-size:0; line-height:1.2;}
.nav_2 li a{ color:#333; padding:20px 10px 10px 10px; display:block; font-size:20px;}
.nav_2 > li > ul{ position:relative; width:auto !important; visibility: visible; top:auto; left:auto; right:auto;}
.nav_2 > li > ul > li{ height:auto;}
.nav_2 > li > ul > li > a{ width:100%; display:block; line-height:normal; float:none; box-sizing:border-box; text-align:left; padding:10px 20px; font-size:15px;}
.logo{ position:relative; top:0; width:100%; height:51px; background-position: 95px 20px;}
.logo h1{ width:280px; height:51px; background-size: contain;}

html body .MenuOpen .nav_1{ display: block; padding-top:45px;}
html body .MenuOpen .nav_1.wht100{ z-index:3; padding-top:10px; text-align:center;}
html body .MenuOpen .nav_2{ display: block; }

/*index*/
.index_banner{ min-width:auto; background: url(../image/banner_01.jpg) 50% center no-repeat;}
html body .wrapper{ width:100%; padding:20px 15px; box-sizing: border-box;}
.box_300,.box_335,.box_670{ width:100%;}
html body .mart_10, html body .mart_20{margin-top:20px;}
html body .marl_19, html body .marl_20{margin-left:0;}
html body .marr_19, html body .marr_20{margin-right:0;}
html body .marb_10, html body .marb_30{margin-bottom:30px;}
.padr_25{ padding-right:0;}

html body .marr_10{margin-right:10px;}
html body .index_title_02{ width:auto; margin:0 20px;}
.index_title{ width:100%; background-size: 100% 4px; box-sizing:border-box;}
.index_content{ height:auto;}
.tag_item{ width:25%; background-size: cover; margin: 0; box-sizing: border-box;}
.tag_now{ width:25%; background-size: cover; margin:0;}
.tag_item:hover{ width:25%; background-size: cover;}
.tag{ width:100%; height:auto;}

.banner{ min-width:100%;}
.banner_about{ background-position-x: 50%;}
.banner_member_namelist{ background-position-x: 50%;}
.banner_supervisor_namelist{ background-position-x: 50.3%;}
.banner_train_list{ background-position-x: 50%;}
.banner_news_list{ background-position-x: 50%;}
.banner_member{ background-position-x: 50%;}
.banner_renew{ background-position-x: 50%;}
.banner_download{ background-position-x: 50%;}
.banner_sitemap{ background-position-x: 50%;}
.banner_contact{ background-position-x: 50%;}
.banner_link{ background-position-x: 50%;}

/*Content*/
.side_title{ width:100%;}
html body .guide{ min-height:42px;}
html body .guide_content{ padding:5px 15px; box-sizing: border-box;}
html body .content_right{ float:none; width:auto; margin:10px 0px;}
html body .content_right table{ width:100%;}
html body .link_list{ width:100%;}
html body .side_nav{ width:auto; box-sizing: border-box; margin:20px 15px; float:none; margin:0;}
.train_title{ width:100%;}
li.now_nav{ width:100%; height:auto;}
li.now_nav li{ background-color: #d3cee9;}
.side_nav_lv3{ width:100%; position:static; display:block; padding:0;}
.side_nav_lv3 li{ background-color:#d3cee9;}
.side_nav_lv3 li a{ line-height:36px; width:100%; text-align:left; padding:0 40px; box-sizing: border-box;}
.side_nav li{ height:auto;}
.side_nav li:hover{ width:100%;}
.time li{ display:block;}
.contact_form, .cont_text{ width:100%;}
.contact_item{}
.side_nav_2{ width:100%;}

.renew_download{ width:100%;}
html body .about img{ max-width:100%; width:max-content;}
html body .name_list{ width:100%; padding:15px; box-sizing: border-box;}
html body .list_form,
html body .list_form tbody,
html body .list_form tr,
html body .list_form td{ width:100%; display:block;}
html body .list_form tr{ display:flex; flex-wrap: wrap;}
html body .contact_form,
html body .contact_form tbody,
html body .contact_form tr,
html body .contact_form td{ width:100%; display:block;}
html body .contact_form tr{ display:flex; flex-wrap: wrap;}
html body .member_info,
html body .member_info tbody,
html body .member_info tr,
html body .member_info td{ width:100%; display:block;}
html body .member_info tr{ display:flex; flex-wrap: wrap;}
html body .member_info td.TableForm{ width:calc(100% - 80px);}
html body .member_info td.TableForm p{ float:none !important; word-wrap:break-word;}
html body .TableTitle{ width:80px; flex:0 0 80px; height:auto; min-height:39px; padding:5px; box-sizing: border-box;}
html body .TableForm{ flex:0 0 calc(100% - 80px); box-sizing: border-box; height:auto; min-height:39px; padding:5px 10px;}

html body .renew_item,
html body .renew_item tbody,
html body .renew_item tr,
html body .renew_item td{ display:block; width:100%;}
html body .renew_item td{ width:100%;}
html body .renew_item{ padding:10px}

.qa_box{ width:100%;}

html body .sitemap_cont{ width:100%; padding-top:15px;}
html body .sitemap_box{ width:100%; margin:0; padding:15px; box-sizing:border-box;}
html body .contact_form, html body .cont_text{ max-width:100%; padding:15px; box-sizing:border-box;}
html body .cont_input{ width:100%;}
html body .cont_email{ width:100%;}
.sign_in_area{ width:100%;}
input.sign_in_324{ width:100%;}
html body .btn_sign{ width:100%;}
input.sign_in{ width:100%; margin-bottom:5px;}
html body .member_message{ width:100%;}
.info_refresh{ float:none; position:static; display:inline-block;}
.info_number{ position:static; display:inline-block;}
.search_area_02{ width:100%;}
html body .search_text_02{ display:block; width:100%; margin:0 !important;}
select.add_city, select.add_area{ display:block; width:100%;}
input.sign_in_190{ width:100%;}
input.sign_in_150{ width:100%;}
input.sign_in_50{ width:100%}
html body .search_box_02{ width:100%; margin:10px 0;}
html body .btn_search_02{ width:100%; text-align:center;}
.TableSlide{ overflow-x:auto;}
.TableSlide table{ display:table !important;}
.TableSlide tbody,
.TableSlide thead,
.TableSlide tr{ display:table-row !important;}
.TableSlide td,
.TableSlide th{ display:table-cell !important; min-width:80px;}
html body .info_item{ padding:15px; box-sizing:border-box; height:auto;}
.agree_area{ margin:0; width:100%; background-color:#f5f5f5; padding:5px;}
html body .search_box_02.AlignLeft{ padding-left:92px; box-sizing:border-box;}
html body .search_box.Flex{ display:flex;}
html body .search_box_02.Flex{ display:flex;}

.box_960{ width:100%;}
.StpeBox{ display:flex; width:100%; padding:0 15px; box-sizing:border-box;}
.step_1, .step_1_h, .step_2, .step_2_h, .step_2_login, .step_2_login_h, .step_3, .step_3_h, .step_3_login, .step_3_login_h, .step_4, .step_4_h{ flex:1; position:static; width:auto; background-size: 100% 100%; padding:5px 10px; text-align:center; line-height:30px; height:auto;}
html body .forget_finish{ width:100%;}
html body .step_area{ width:100%;}
html body .course_area{ width:100%; box-sizing:border-box;}
.number_title{ position:static !important;}
.number_img{ position:static;}

/*Button*/
html body .btn_sign_in,
html body .btn_n_member,
html body .btn_step,
.btn_member{ width:100%; box-sizing:border-box; margin-bottom:10px;}

/*Search*/
html body .search_area{ width:100%; height:auto;}
html body .list_form{ margin-top:10px;}
.search_box{ float:none; padding:5px 0; display:flex; margin-bottom:10px;}
.search_text{ width:80px; flex:0 0 80px; text-align:left;}
.search_text_02{ width:80px; flex:0 0 80px; text-align:left;}
input.search_name,
input.search_email,
input.search_companyname{ width:100%;}
.btn_search{ width:100%; padding:0; text-align:center; margin-top:10px;}

/*Footer*/
.footer{ padding:20px; box-sizing:border-box; height:auto;}

}