@media screen and (min-width: 1201px) {
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }
}

@media screen and (max-width: 1200px) {
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }
}
#header.color{ background:var(--CBlack); }
#header.on{ background:var(--CBlack); }
.fixHeader { background:var(--CBlack); }

@media screen and(max-width: 1200px){
	#header.on{ background: #F3F3F3; }
}

#sub {position: relative;}
/* Sub Visual */
#sub-visual .bg.bg1::before{ background: no-repeat center center / cover; }
#sub-visual .bg.bg2::before{ background: url("/assets/images/sub/subVisual_img01.png") no-repeat center center / cover; }
#sub-visual .bg.bg3::before{ background: url("/assets/images/sub/subVisual_img01.png") no-repeat center center / cover; }
#sub-visual .bg.bg4::before{ background: url("/assets/images/sub/subVisual_img01.png") no-repeat center center / cover; }
#sub-visual .bg.bg5::before{ background: url("/assets/images/sub/subVisual_img01.png") no-repeat center center / cover; }
#sub-visual .bg.bg6::before{ background: url("/assets/images/sub/subVisual_img01.png") no-repeat center center / cover; }
#sub-visual .bg.bg7::before{ background: url("/assets/images/sub/subVisual_img01.png") no-repeat center center / cover; }
#sub-visual{ position: relative; top:70px; height: 390px; color: #fff; padding: 7% 0 0; }
#sub-visual .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -10; overflow: hidden; } 
#sub-visual .bg::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.1); transform-origin: center center; animation: scale 1s 0.5s forwards; }
#sub-visual .text-box { text-align: center;}
#sub-visual .text-box h3{ font-size: 48px; font-weight: 700; letter-spacing: 0.01em;}
#sub-visual .text-box h2{ font-size: 4.0625rem; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; margin: 15px 0 70px; }
#sub-visual .text-box h2 span{ display: inline-block; transform: translateY(30px); opacity: 0; animation: text-up 1.3s 1s forwards; }
#sub-visual .left-textbox { position: absolute; left: 0%; top: 68%; width: 100%; text-align: left; z-index: 8;}
#sub-visual .left-textbox .linetext{ display: flex; align-items: center; justify-content: left; margin-bottom: -30%; overflow:hidden;}
#sub-visual .left-textbox .linetext p{ font-size: 160px; line-height: 100%; color: rgba(255, 255, 255, 0.2); font-weight: 900; margin: 0 20px; }
#sub-visual .left-textbox .linetext .pline{ width: 50%; height: 1px; background: #ffffff; }
#sub-visual .left-textbox .bigTxt{ font-size: 12.5rem; color: transparent; -webkit-text-stroke: 1px #ffffff; font-weight: 800; line-height: 9rem; }

@keyframes scale{ 
	0%{ transform: scale(1.2); }
	100%{ transform: scale(1); }
}

@keyframes text-up{
	0%{ transform: translateY(30px); opacity: 0; }
	100%{ transform: translateY(0); opacity: 1; }
}

/* sub breadCrumb */

.breadCrumb > ul{display:inline-flex; background:rgb(16 16 16 / 30%); backdrop-filter: blur(30px);  border-radius:8px;}
.breadCrumb_wrap div.home {width: 60px;margin-left: 10px; }
.breadCrumb_wrap div.home a { color: #ffffff;}
.breadCrumb_wrap div.home a:hover { color: var(--CBlue400);}
@media (hover: hover) and (pointer: fine) {
    .breadCrumb > ul > li > ul > li > a:hover {color: #097CD3;}
    /*.breadCrumb > ul > li > ul > li > a:hover .icon::before{  background-image: url('/assets/images/icon-external-link-on.svg');}*/
}
.breadCrumb.fix{position:fixed; bottom:30px; z-index:3; }
.breadCrumb.fix > ul{  animation: fadeUp .6s ease forwards; }
.breadCrumb.fix > ul > li > ul{top:auto; bottom:100%; border-radius: 4px 4px 0 0; }
.breadCrumb.fix > ul > li > a .icon{transform:rotate(180deg);}
.breadCrumb.fix > ul > li > a.open .icon{transform:rotate(0deg);}
.breadCrumb.hide > ul{animation: fadeDown .2s ease forwards;}
@keyframes fadeUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(40px);
        opacity: 0;
    }
}


#sub-visual .breadCrumb_wrap {display: flex; align-items: center; width: 25%; margin: 60px auto; justify-content: space-between; padding: 15px 10px; background:rgb(16 16 16 / 30%); backdrop-filter: blur(30px); border-radius:8px; position: relative; z-index: 99999;}
#sub-visual .breadCrumb {min-width: 100px; width: 100%;}
#sub-visual .breadCrumb_wrap .bar{content:''; width:1px; height:12px; background: rgba(255,255,255,0.2); }
#sub-visual .breadCrumb_wrap.w-35 {width: 35%;}

#sub-visual .breadCrumb p {
	color: #fff;
	padding: 10px 15px;
	border: 0;
	border-radius: 10px;
	position: relative;
	cursor: pointer;
	font-size: 16px;
}

#sub-visual .breadCrumb p::after {
	content: url("/assets/images/common/family_site_arrow.png");
	position: absolute;
	top: 46%;
	right: 10px;
	padding: 10px 15px;
	transform: translateY(-50%);
	transition: all 0.3s;
}

#sub-visual .breadCrumb ul {
	width: 75%;
	background:rgb(16 16 16 / 90%);
	border-radius: 0 0 10px 10px;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	display: none;
	z-index: 9999999;
}

#sub-visual .breadCrumb ul li a {
	width: 100%;
	display: inline-block;
	color: #fff;
	font-size: 15px;
	padding: 10px 15px;
}
#sub-visual .breadCrumb ul li a:hover { color: var(--CBlue300);}

#sub-visual .breadCrumb.on p::after {
	top: 55%;
	transform: translateY(-50%) rotate(-180deg);
}

@media screen and (max-width: 820px) {

	.breadCrumb > ul > li.home{width: 60px !important;}
	.breadCrumb{font-size: 14px; bottom:20px;}
	.breadCrumb > ul > li.home{width: 50px !important; }
	.breadCrumb > ul > li.home a{ }
	.breadCrumb > ul > li > ul{padding:10px 0;}
	.breadCrumb > ul > li > ul > li > a{font-size: 14px; padding:4px 5px;}
	.breadCrumb > ul > li > a{height:50px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; font-size: 14px;}
	/*.breadCrumb > ul > li:nth-child(2){display:none;}
	body:has(.detail-info) .breadCrumb > ul > li:nth-child(3){display:none;}*/
	.breadCrumb > ul > li:first-child:nth-last-child(3),
	.breadCrumb > ul > li:first-child:nth-last-child(3)~li { width:calc(100% - 50px); }
	.breadCrumb > ul > li:first-child:nth-last-child(4),
	.breadCrumb > ul > li:first-child:nth-last-child(4)~li {width:calc(50% - 25px);}
	.breadCrumb > ul > li:first-child:nth-last-child(5),
	.breadCrumb > ul > li:first-child:nth-last-child(5)~li {width:calc(50% - 25px);}

}

/* lnb */
#lnbWrap { position: relative; overflow: hidden; top:70px; width: 100%; border-bottom: 1px solid var(--CGrey200); z-index:9;}
.lnb{ width: 100%;  }
.lnb > ul{display:flex; justify-content: center; flex-wrap: wrap; padding: 0 25px; margin: 0 auto; list-style: none; }
.lnb > ul > li{ padding-right: 2.5rem;}
.lnb > ul > li > a{position:relative; display:inline-flex; align-items: center; vertical-align: top; margin: 0px 25px; font-weight:600;font-size:18px; color: var(--CGrey700); line-height: 70px;}
.lnb > ul > li > a::after{content:""; position:absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--CBlack);}

.lnb > ul > li.on > a{ font-weight: 700; color: var(--CBlack);}
.lnb > ul > li.on > a::after{width: 100%;}

@keyframes hidden{
	0%{ overflow: hidden; }
	100%{ overflow: visible; }
}

@keyframes up{ 
	0%{ transform: translateY(100%); }
	100%{ transform: translateY(0); }
}

/* common */
.sub-content{ max-width: 1280px; margin: 0 auto 100px auto; padding: 80px 0 175px;}
.page-title{ font-size: 3.75rem; font-weight: 700; color: #111; text-align: center; margin-bottom: 90px; letter-spacing: 0.02em; }
.page-title span:not(.ch){ font-size: 2rem; }
.page-title .ch{ font-weight: 600; }
.sub-content h4.title{ margin-bottom: 52px; font-size: 36px; color: var(--CNavy500); font-weight: 700;}
.sub-content h4.title p{ font-size: 1.5rem; font-weight: 400; color: var(--CDarkGrey200); margin: 25px auto 6.25rem; line-height: 1.4; letter-spacing: -0.05em; }
.section-title{ font-size: 3.75rem; margin-bottom: 50px; font-weight: 700; color: #111; text-align: center; }
.sub-content h2.title_eng{ font-size: 1.75rem; margin-bottom: 68px; font-family: var(--Russo); font-weight: 400; font-style: normal; letter-spacing: 0em; color: var(--mainColor); text-align: center; }
.sub-content h4.title_sm{ font-size: 1.875rem; margin-bottom: 68px; font-weight: 700; font-style: normal; letter-spacing: 0em; color: var(--CDarkGrey300); text-align: center; }
.sub-title{ font-size: 3rem; font-weight: 700; color: #111; text-align: center; }
.gray-bg{ background: #F6F6F6; }
.sub-content .textBox {margin-bottom: 75px;}

/* paging */
.paging{ display: flex; justify-content: center; align-items: center; margin-top: 50px; }
.paging a{ display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; background: none; border: none; line-height: 1; }

.paging .arr{ display: flex; justify-content: center; align-items: center; }
.paging .arr a{ font-size: 1rem; color: #666; }
.paging .arr a.first i:first-of-type, .paging .arr a.last i:first-of-type{ margin-right: -12px; }

.paging ul{ display: flex; justify-content: center; align-items: center; margin: 0 15px; }
.paging ul li a{ border-radius: 4px; font-size: 1rem; font-weight: 400; color: #111; }
.paging ul li.on a{ background: var(--CGrey500); color: #fff; }
7
/* font */
.ch{ font-family: var(--Pretendard); font-weight: 300; }


/* button */
.button{ width: 190px; height: 45px; display: flex; justify-content: center; align-items: center; border: none; background: var(--mainColor); border-radius: 6px; font-family: var(--baseFont); font-size: 1rem; font-weight: 600; color: #fff; }
.button:link, .button:visited{ color: #fff; }

.button.btn-full{ width: 100%;}
.button.gray{ background: #F6F6F6; color: #222; }  
.button.gray:link, .button.gray:visited{ color: #222; }

.button.bluegray{ background: var(--CBlueGrey300); color: #222; }  
.button.bluegray:link, .button.bluegray:visited{ color: #222; }

.button.light{ background: #1E9F33; } 
.button.navy{ background: var(--CNavy400); } 

.button-list-block { display: block; margin-top: 50px;}
.button-list-block button {margin-bottom: 10px;}

.button-list-center { text-align: center;}

/* login */
#naverIdLogin a{ display: inline-block; }
#naverIdLogin img{ width: 220px; height: auto; }

/* scroll */
.scroll-y{ overflow-y: scroll; }
.scroll-y::-webkit-scrollbar{ width: 45px; }
.scroll-y::-webkit-scrollbar-thumb{ background: #555; background-clip: padding-box; border: 20px solid transparent; border-radius: 100px; }
.scroll-y::-webkit-scrollbar-track{ background: #EEE; background-clip: padding-box; border: 20px; border: 20px solid transparent; border-radius: 100px; }

@media screen and (max-width: 1600px){
	#sub-visual{ padding: 8% 0 0; }
	#sub-visual .left-textbox { right: 0%; }
	#sub-visual .left-textbox .bigTxt{ font-size: 11.25rem; line-height: 8rem; }
	/*#sub-visual .text-box { margin-left: 30px;}*/
	#sub-visual .text-box h2{ margin-bottom: 40px; }
	#sub-visual .breadCrumb_wrap {margin: 50px auto;}

}

@media screen and (max-width: 1500px){
	#sub-visual .text-box h2{ font-size: 4rem; }

	.sub-content{ padding: 100px 20px 130px; }
	.page-title{ font-size: 4.5rem; margin-bottom: 60px; }
	.section-title{ font-size: 3.5rem; }
	.sub-title{ font-size: 2.7rem; }

	.button{ width: 160px; height: 60px; }

}

@media screen and (max-width: 1400px){ 
	#sub-visual .breadCrumb_wrap { margin: 50px auto;}
	.lnb > ul > li { width: 50%; padding-right: 0;}
	.lnb > ul > li > a{ line-height: 1.2; margin: 20px 25px;}

}
@media screen and (max-width: 1200px){
	#sub {overflow: hidden;}
	#sub-visual{ padding: 100px 0 80px; }
	#sub-visual .text-box h2{ font-size: 3rem; margin-bottom: 20px; }
	#sub-visual .left-textbox {display: none;}
	.sub-content{ padding: 60px 25px 100px; }
	.page-title{ font-size: 4rem; margin-bottom: 30px; }
	.page-title span:not(.ch){ font-size: 1.7rem; }
	.section-title{ font-size: 3.2rem; }
	.sub-title{ font-size: 2.3rem; }
	.sub-content .title p br{ display: none; }
	.button{ width: 140px; height: 50px; }
	#sub-visual .breadCrumb_wrap {width: 60%;}
	#sub-visual .breadCrumb p {font-size: 14px;}
	#sub-visual .breadCrumb ul li a {font-size: 14px;padding: 10px 15px;}

}

@media screen and (max-width: 900px){
	
}

@media screen and (max-width: 850px){
	#sub-visual{ padding: 100px 0 50px; }
	#sub-visual .text-box h2{ font-size: 3rem; }
	.lnb > ul{max-width: 100%; justify-content: flex-start; padding: 0 0px;}
	.lnb li a{ font-size: 1.6rem; }
	.lnb > ul > li > a{ margin: 20px 25px; font-size:1rem;}


	.page-title{ font-size: 3.2rem; }
	.section-title{ font-size: 2.8rem; }
	.sub-title{ font-size: 2rem; }

	.paging{ margin-top: 30px; }
	.paging a{ width: 30px; height: 30px; }
	.paging .arr a{ width: 25px; height: 25px; }
}

@media screen and (max-width: 750px){
	.paging ul{ margin: 0; }
}

@media screen and (max-width: 500px){
	#sub-visual .breadCrumb_wrap {width: 100%;}
	.button{ width: calc((100% - 40px) / 3); }
}


/* search */
.search-box{ margin-bottom: 60px; background: var(--CGrey100); border: 1px solid var(--CGrey200); padding: 36px; border-radius: 10px;}
.search-box .flex-box{ height: 45px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.search-box .flex-box *{ height: 100%; font-family: var(--baseFont); font-size: 1rem; font-weight: 400; color: #111; }
.search-box .flex-box.w-75{ width: 75%; margin-bottom: 0;}
.search-box .flex-box select{ width: 24%; border: 1px solid var(--CGrey400); border-radius: 4px; appearance: none; -moz-appearance: none; -webkit-appearance: none; color: var(--CDarkGrey100); background: var(--CGrey100) url("/assets/images/common/select_arrow.png") no-repeat center right 30px / auto; padding: 0 50px 0 30px; }
.search-box .flex-box input{ width: 65.8%; background: #F6F6F6; border: 2px solid var(--CDarkGrey200); border-radius: 4px; padding: 0 30px; }
.search-box .flex-box input::placeholder{ color: var(--CGrey500); }
.search-box .flex-box button{ width: 32.3%; background: var(--CNavy400); border: none; color: #fff; border-radius: 4px; }

/* search - select */
.search-box.one .flex-box select{ width: 490px; }
.search-box.one .flex-box input{ width: calc(100% - 710px); }

/* tab-menu */
.tab-menu{ margin-bottom: 25px; } 
.tab-menu ul{ display: flex; }
.tab-menu ul li:not(:last-of-type){ margin-right: 10px; }
.tab-menu ul li a{ width: 170px; height: 65px; display: flex; justify-content: center; align-items: center; background: #F6F6F6; border-radius: 100px; font-size: 1.125rem; font-weight: 500; color: #222; line-height: 0; }

.tab-menu ul li.active a{ background: #1E1E1E; color: #fff; }

/* tabMenu */
.tabMenu{ margin-bottom: 90px; }
.tabMenu ul{ display: flex; }
.tabMenu ul li{ width: 50%; text-align: center; }
.tabMenu ul li a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 80px; font-size: 2rem; font-weight: 300; color: #666; border: 1px solid #D8D8D8; }
.tabMenu ul li.active a{ background: var(--mainColor); border: 1px solid var(--mainColor); color: #fff; }

/* table-list */
.table-list *{ text-align: center; font-size: 1.125rem; }
.table-list table th, .table-list table td{ position: relative; }
.table-list thead tr{ border-top: 1px solid #C1C1C1; border-bottom: 1px solid #C1C1C1; }
.table-list thead th{ font-weight: 600; color: #222; padding: 30px 10px; }
.table-list thead th::after{ content: ""; width: 1px; height: 20px; background: #ccc; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.table-list thead th:last-of-type::after{ display: none; }

.table-list tbody tr{ border-bottom: 1px solid #ddd; }
.table-list tbody td{ font-weight: 300; color: #333; padding: 20px 10px; }
.table-list tbody td p{ font-family: var(--Pretendard); font-size: 1.8rem; width: calc(100% - 100px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-list tbody td a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }


/* BoardView */
#BoardView .title-box{ text-align: center; padding-bottom: 30px; }
#BoardView .title-box h3{ font-family: var(--Pretendard); font-size: 1.7rem; font-weight: 700; color: #111; margin-bottom: 25px; }
#BoardView .title-box ul{ display: flex; justify-content: center; }
#BoardView .title-box ul li{ font-size: 1.125rem; font-weight: 400; color: #999; padding: 0 12px; position: relative; }
#BoardView .title-box ul li::after{ content: ""; width: 1px; height: 12px; background: #999; position: absolute; top: 43%; right: 0; transform: translateY(-50%); }
#BoardView .title-box ul li:last-of-type::after{ display: none; }

#BoardView .content-box{ border-top: 1px solid #C1C1C1; border-bottom: 1px solid #C1C1C1; padding: 60px; font-size: 1rem; }

#BoardView .link-box tr{ border-bottom: 1px solid #C1C1C1; }
#BoardView .link-box th{ width: 185px; background: #F6F6F6; font-size: 1.125rem; font-weight: 500; color: #111; padding: 0 30px; }
#BoardView .link-box td{ padding: 25px 35px; font-size: 1.125rem; font-weight: 300; color: #333; position: relative; }
#BoardView .link-box td p{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#BoardView .link-box td p + a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

.button-box{ display: flex; justify-content:flex-end; margin-top: 90px; }
.button-box *:not(:last-child){ margin-right: 20px; }


@media screen and (max-width: 1500px){
	.search-box{ margin-bottom: 40px; }

	.search-box.one .flex-box select{ width: 400px; }
	.search-box.one .flex-box input{ width: calc(100% - 600px); }

	#BoardView .title-box{ padding-bottom: 60px; }  
	#BoardView .title-box h3{ font-size: 2rem; }
	#BoardView .link-box th{ font-size: 1.125rem; } 
	#BoardView .link-box td{ font-size: 1.125rem; padding: 20px 30px; } 
	.button-box{ margin-top: 60px; }

	.tabMenu ul li a{ height: 70px; }
}

@media screen and (max-width: 1300px){
	.search-box .flex-box select{ width: calc((100% - 10px) / 4); }

	.search-box.one .flex-box select{ width: 250px; }
	.search-box.one .flex-box input{ width: calc(100% - 420px); }

	.tabMenu{ margin-bottom: 60px; }
	.tab-menu ul li a{ width: 150px; height: 60px; font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	.search-box .flex-box *{ font-size: 1.125rem; }
	.search-box .flex-box select{ padding: 0 40px 0 20px; background-position: center right 20px; }
	.search-box .flex-box input{ padding: 0 20px; }

	.table-list *{ font-size: 1.125rem; }
	.table-list table th{ padding: 20px 10px; }
	.table-list tbody td{ padding: 10px; }

	#BoardView .title-box{ padding-bottom: 40px; }
	#BoardView .title-box h3{ margin-bottom: 15px; }
	#BoardView .content-box{ padding: 40px; }
	#BoardView .link-box th{ width: 150px; font-size: 1rem; padding: 0 20px; }
	#BoardView .link-box td{ font-size: 1.6rem; padding: 17px 20px; }

	.tabMenu ul li a{ height: 65px; font-size: 1.8rem; }
}

@media screen and (max-width: 1000px){
	.search-box .flex-box{ flex-wrap: wrap; height: 120px; }
	.search-box .flex-box.w-75{ width: 100%; margin-bottom: 0;}
	.search-box .flex-box *{ height: 60px; }
	.search-box .flex-box select{ width: calc((100% - 10px) / 2); margin-bottom: 10px; margin-right: 0; }

	.search-box.one .flex-box select{ margin-bottom: 0; }

	.tab-menu ul li a{ width: 130px; height: 55px; }

	.tabMenu{ margin-bottom: 40px; }
	.tabMenu ul li a{ height: 55px; font-size: 1.125rem; }
}

@media screen and (max-width: 850px){
	.search-box.one .flex-box select{ width: 100%; margin-bottom: 10px; }
	.search-box.one .flex-box input{ width: calc(100% - 160px); }
}

@media screen and (max-width: 700px){
	#BoardView .title-box{ padding-bottom: 20px; }
	#BoardView .title-box h3{ font-size: 1.5rem; margin-bottom: 10px; }
	#BoardView .content-box{ padding: 30px 20px; }
	#BoardView .link-box th{ width: 100px; }
	.button-box{ margin-top: 40px; }

}

@media screen and (max-width: 640px){
	.search-box{ margin-bottom: 60px; background: var(--CGrey100); border: 1px solid var(--CGrey200); padding: 20px;}
	.search-box .flex-box { height: 100%;}
	.search-box .flex-box select{ width: 100%; margin-bottom: 10px; margin-right: 0; }
	.search-box .flex-box input{ width: calc(100% - 110px); }
	.search-box .flex-box button{ width: 100px; }
	.search-box.one .flex-box input{ width: calc(100% - 110px); }
	.search-box.one .flex-box button{ width: 100px; }
}

@media screen and (max-width: 500px){
	.tab-menu ul{ flex-wrap: wrap; }
	.tab-menu ul li{ width: calc((100% - 20px) / 3); }
	.tab-menu ul li:nth-of-type(3n){ margin-right: 0; }
	.tab-menu ul li a{ width: 100%; }
}


/* sub-content */
.sub-content .intro { margin-bottom: 80px;}
.sub-content .intro .flex-box{ display: flex; justify-content: space-between; align-items: center; }
.sub-content .intro .img-box{ width: 100%; margin-bottom: 30px; text-align: center; }
.sub-content .intro .img-box figure{ width: auto; border-radius: 30px; overflow: hidden; }
.sub-content .intro .text-box{ width: 100%; }
.sub-content .intro .text-box .section-title{ text-align: left; }
.sub-content .intro .text-box h4{ margin-bottom: 35px; }
.sub-content .intro .text-box h5{ font-size: 3rem; font-weight: 700; color: #111; margin-bottom: 40px; }
.sub-content .icon-tit{position:relative; font-weight:600; font-size: 28px; color: #111; padding-left: 30px; margin-bottom: 30px; letter-spacing: -0.05em;}
.sub-content .icon-tit::after{content:""; position:absolute; top: 8px; left: 0; width: 24px; height: 24px; border-radius:50%; border:6px solid var(--CMain); box-sizing:border-box;}
.sub-content .intro .text-box p{ font-size: 1.125rem; font-weight: 400; color: #333; line-height: 1.5; margin-bottom: 40px;}
.sub-content .intro .text-box p:not(:last-of-type){ margin-bottom: 15px; }
.sub-content p {font-size: 1.125rem; line-height: 1.6;}

.sub-content .alert { position: relative; padding: 1.875rem 1.25rem; margin-bottom: 1.875rem; border-radius: 6px; box-shadow: 0 4px 15px 0 rgba(31, 43, 58, .1); border: none; border-left: 10px solid var(--CMain); line-height: 1.5; background: #fff;}
.sub-content .alert .alert-text { display: flex; align-items: center;}
.sub-content .alert .alert-text h6 { font-size: 1.25rem; font-weight: 600; margin-right: 40px; color: var(--CDarkGrey300); letter-spacing: -0.03em;}
.sub-content .alert .alert-text p { font-size: 1rem;}
.sub-content .alert .alert-text ul {margin-left: 30px;}
.sub-content .alert .alert-text li { font-size: 1rem; list-style: disc; margin-bottom: 10px;}
.sub-content .alert .alert-text li:last-child {margin-bottom: 0;}

@media screen and (max-width: 1500px){
	.sub-content .intro .text-box h5{ font-size: 2.5rem; }
}

@media screen and (max-width: 1250px){
	.sub-content .intro .text-box h4{ margin-bottom: 15px; }
	.sub-content .intro .text-box h5{ font-size: 2.2rem; margin-bottom: 25px; }
	.sub-content .intro .text-box p:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 1000px){
	.sub-content .intro .flex-box{ flex-direction: column; }
	.sub-content .intro .img-box{ width: 100%; text-align: center; }
	.sub-content .intro .text-box{ width: 100%; margin-top: 30px; }
}

@media screen and (max-width: 850px){
	.sub-content .intro .text-box h5{ font-size: 2rem; }
	.sub-content .alert .alert-text { display: block; }
	.sub-content .alert .alert-text h6 { margin-bottom: 20px;}
	.sub-content .alert .alert-text h6 br{ display: none;}


}


/*Seminar*/
#Seminar { overflow: hidden;}
#Seminar .detailHeader {display: flex; align-items:normal; justify-content: space-between;}
#Seminar .detailHeader .img-box { width: 518px; height: 308px;}
#Seminar .detailHeader .img-box img { width: 518px; height: 308px; border-radius: 10px;}
#Seminar .detailHeader .text-box { width: calc(100% - 528px); padding: 10px 0 0 58px;}
#Seminar .detailHeader .text-box .titleArea h5 { font-size: 32px; color: var(--CBlack); font-weight: 700; margin: 8px 0;}
#Seminar .detailHeader .text-box .titleArea p { font-size: 18px; color: var(--CGrey700);}
#Seminar .detailHeader .text-box .infoArea { width: 100%; display: flex; flex-wrap: wrap; align-items: normal; justify-content: space-between; margin-top: 23px; font-size: 18px;}
#Seminar .detailHeader .text-box .infoArea dl { display: flex; padding-bottom: 15px; width: 50%;}
#Seminar .detailHeader .text-box .infoArea dl.w100 { width: 100%;}
#Seminar .detailHeader .text-box .infoArea dt { color: var(--CBlueGrey400); width: 80px; margin-right: 30px; }
#Seminar .detailHeader .text-box .infoArea dd { color: var(--CDarkGrey200); width:calc(100% - 110px); }
#Seminar .detailHeader .button-list {justify-content: flex-start; margin-top: 20px;}
#Seminar .detailHeader .button-list button.register { display: block; width: calc(100% - 200px); border: 0; background: var(--CNavy400); color: #fff; text-align: center;}

#Seminar .detailContent { margin: 100px 0; font-size: 18px; font-weight: 500; color: var(--CGrey700);}
#Seminar .detailSpeaker { margin-bottom: 60px;}
#Seminar .detailSpeaker .flex-box { display: flex; flex-wrap: wrap;}
#Seminar .detailSpeaker .flex-box .img-box { width: 242px; height: 320px; margin-right: 30px; border-radius: 20px; border: 2px solid var(--CGrey200);}
#Seminar .detailSpeaker .flex-box .img-box img { width: 242px; height: 320px;}
#Seminar .detailSpeaker .flex-box .text-box { width: calc(100% - 272px);}
#Seminar .detailSpeaker .flex-box .text-box .titbox { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--CGrey200);}
#Seminar .detailSpeaker .flex-box .text-box h5 { font-size: 30px; color: var(--CBlack); font-weight: 700; }
#Seminar .detailSpeaker .flex-box .text-box p { font-size: 16px; color: var(--CGrey500); font-weight: 400; padding-bottom: 10px; }
#Seminar .detailSpeaker .flex-box .text-box .snsLink ul{ display: flex; align-items: center;}
#Seminar .detailSpeaker .flex-box .text-box .snsLink li{ display: flex; align-items: center; justify-content: center; border-radius: 50px; width: 36px; height: 36px; margin-left: 10px; text-align: center; border: 1px solid var(--CGrey300); font-size: 16px; color: var(--CGrey500); font-weight: 400; }
#Seminar .detailSpeaker .flex-box .text-box .snsLink li a span{ font-size: 24px; color: var(--CGrey500); font-weight: 400; }
#Seminar .detailSpeaker .flex-box .text-box .snsLink li:hover {background: var(--CBlueGrey200);}
#Seminar .detailSpeaker .flex-box .text-box .profile ul { margin: 20px;}
#Seminar .detailSpeaker .flex-box .text-box .profile li { list-style-type:disc; margin-bottom: 10px;}

#Seminar .button-list {justify-content: space-between; margin-top: 50px;}
#Seminar .button-list.jc {justify-content:flex-end;}
#Seminar .button-list button.register { display: block; width: 250px; border: 0; background: var(--CNavy400); color: #fff; text-align: center;}

#ApplySeminar .infoArea { display: flex; flex-wrap: wrap; align-items: normal; justify-content: space-between; border: 1px solid var(--CBlueGrey200); background: var(--CGrey100); margin-top: 20px; padding: 18px 18px 8px 18px; font-size: 16px; border-radius: 10px;}
#ApplySeminar .infoArea dl { display: flex; padding-bottom: 15px; width: 50%;}
#ApplySeminar .infoArea dl.w100 { width: 100%;}
#ApplySeminar .infoArea dt { color: var(--CBlueGrey400); width: 80px; margin-right: 30px; }
#ApplySeminar .infoArea dd { color: var(--CDarkGrey200); width:calc(100% - 110px); }
#ApplySeminar .infoArea dd h4 { color: var(--CNavy500); font-size: 24px; margin: 0; }

#ApplySeminar .attendInfo { margin: 20px 0 0 0;}
#ApplySeminar .attendInfo .flex-box { display: flex; align-items: center; justify-content: space-between;}
#ApplySeminar h5 {font-size: 18px; color: var(--CBlack); font-weight: 800;}
#ApplySeminar h6 {font-size: 16px; color: var(--CBlack); font-weight: 400; margin: 10px 0;}
#ApplySeminar .attendInfo button { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #fff; font-weight: 400; background: var(--CBlue300); border: 0; border-radius: 4px; padding: 10px 16px;}
#ApplySeminar .attendInfo button span {font-size: 14px; padding-left: 6px;}

#ApplySeminar .attendInfo .inline_form li.formInput {width: 49%;}
#ApplySeminar .attendInfo .inline_form {margin: 10px auto 0px auto; }

#RegistSeminar .infoArea { display: flex; flex-wrap: wrap; align-items: normal; justify-content: space-between; border: 2px solid var(--CBlueGrey200); background: var(--CGrey100); margin-top: 20px; padding: 24px 24px 8px 30px; font-size: 16px; border-radius: 10px;}
#RegistSeminar .infoArea dl { display: flex; padding-bottom: 15px; width: 50%;}
#RegistSeminar .infoArea dl.w100 { width: 100%;}
#RegistSeminar .infoArea dt { color: var(--CBlueGrey400); width: 80px; margin-right: 30px; }
#RegistSeminar .infoArea dd { color: var(--CDarkGrey200); width:calc(100% - 110px); }
#RegistSeminar .infoArea dd h4 { color: var(--CNavy500); font-size: 26px; margin: 0; }

#RegistSeminar .attendInfo { margin: 40px 0;}
#RegistSeminar .attendInfo .flex-box { display: flex; align-items: center; justify-content: space-between;}
#RegistSeminar h5 {font-size: 18px; color: var(--CBlack); font-weight: 800; margin-bottom: 10px;}
#RegistSeminar .attendInfo_p h6{ width:fit-content; font-size: 16px; color: var(--CBlack); font-weight: 400; margin: 10px 0; padding: 4px 20px 2px 20px; border-radius: 50px; background: var(--CBlueGrey200);}
#RegistSeminar h6 {font-size: 16px; color: var(--CGrey600); font-weight: 400; margin: 10px 0;}
#RegistSeminar .attendInfo button { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #fff; font-weight: 400; background: var(--CBlue300); border: 0; border-radius: 4px; padding: 10px 16px;}
#RegistSeminar .attendInfo button span {font-size: 14px; padding-left: 6px;}
#RegistSeminar .agreeBox .textScroll { height: 200px;}
#RegistSeminar .agreeBox .textScroll p{ font-size: 16px; line-height: 1.2;}

#RegistSeminar .attendInfo .inline_form li.formInput {width: 49%;}
#RegistSeminar .attendInfo .inline_form {margin: 10px auto 0px auto; }

/*Map*/
#SeminarLocal h1 { margin-bottom: 10px; }
#SeminarLocal .map_wrp {width: 100%; height: 100%; padding:20px; border: 1px solid var(--CBlueGrey400); background: var(--CBlueGrey100); border-radius: 10px;}
#SeminarLocal .map_wrp .svg {width: 100%; height: 100%;}
#SeminarLocal .map_wrp path:hover {opacity: 1;}
#SeminarLocal .inline_form li.formInput {width: 200px;}
#SeminarLocal .inline_form {margin: 10px auto 0px auto; }


/*Calendar*/
.calendar_wrap h4.title {margin: 0px auto; font-size: 50px; font-weight: 600; text-align: center;}
.calendar_wrap table { width: 100%; box-sizing: border-box; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1); border-spacing: 0; background-color: var(--CBlueGrey100); }
.calendar_wrap td { border: 1px solid var(--CGrey500); box-sizing: border-box; }
.calendar_wrap th { text-transform: uppercase; font-size:16px; font-weight:400; padding: 18px 0; color: #fff; background-color: var(--CNavy500); letter-spacing: 1px; text-align: center; }
.calendar_wrap td { width: 14.285%; transition: all 0.3s; font-size: 14px; color: var(--CDarkGrey100); font-weight: 400; font-size: 14px; padding: 10px; vertical-align: bottom; height: 95px; }
.calendar_wrap .day:hover { background-color: rgba(0,0,0,0.1); cursor:pointer; }
.calendar_wrap .today { color: #FFF; background-color: rgba(0,0,0,0.8) !important; }
.calendar_wrap .lastmonth { color: rgba(255,255,255,0.2); }
.calendar_wrap .nextmonth { color: rgba(255,255,255,0.2); }
.calendar_wrap .seminarday .number{ color: var(--mainColor); margin-top:30px; }
.calendar_wrap .seminarday .number span{ display: block; background:var(--mainColor); width: 8px; height: 8px; border-radius: 50%; margin-bottom: 5px; margin-left: 10px; }
.calendar_wrap .number {float: left; font-size: 30px; }
.calendar_wrap i.seminar_ico {float: right; margin-top: 55px; padding: 5px 12px; font-size: 12px; border-radius: 50px; font-style: normal; background: var(--mainColor); color: #ffffff;}
.calendar_wrap span.event-multiday { margin: 5px -2px; border-radius: 0; }
.calendar_wrap span.event-multiday-start { margin-right: -4px;}
.calendar_wrap span.event-multiday-finish { margin-left: -4px;}
.calendar_wrap span.event-ghost { background-color:transparent;}
.calendar_wrap .calendar_month { padding: 30px 40px; width: 100%; height: 100px; margin-bottom: 50px; border-top: 2px solid #ffffff; border-bottom: 1px solid #707070; color: #ffffff;}
.calendar_wrap .calendar_month ul {display: flex; justify-content: flex-start;}
.calendar_wrap .calendar_month li { margin-right: 64px; text-align: center;}
.calendar_wrap .calendar_month li:last-child {margin-right: 0;}
.calendar_wrap .calendar_month li.month_on { margin-top: -10px; padding-top: 8px; width: 60px; height: 60px; border-radius:50%; background: var(--mainColor);}
.calendar_wrap .calendar_month li.month_on p{ color: #ffffff; }
.calendar_wrap .calendar_month h3{ font-size: 24px; margin: 0; padding-top: 0; font-weight: 700;}
.calendar_wrap .calendar_month p{ margin: 0; padding: 0; font-size: 12px; color: #C1C1C1; line-height: 20px; }
.calendar_wrap .calendar_month h3 + p {margin-top: 0px;}
.calendar_wrap .formInput select {width: 200px;}
.calendar_wrap .monthBox {width:40%; margin:20px auto; display:flex; justify-content:space-between; align-items: center;}
.calendar_wrap .monthBox .arrow {border: 1px solid var(--CGrey400); padding:4px 10px 0px 10px; border-radius:3px;}
.calendar_wrap .monthBox .arrow:hover {border: 1px solid var(--CGrey500); background:var(--CBlueGrey300); cursor:pointer;}

.table-box table{ width: 100%; border-top: 2px solid var(--mainColor); }
.table-box thead th, #board .table-box td{ padding: 15px; }
.table-box thead th{ font-size: 1.125rem; font-weight: 600; color: #111; background: #F6F6F6; }
.table-box th.small{ width: 100px; }
.table-box th.middle{ width: 150px; }
.table-box tr{ border-bottom: 1px solid #E8E8E8; }
.table-box td{ font-size: 1rem; font-weight: 400; color: #666; text-align: center; position: relative; }
.table-box td p{ max-width: 665px; width: 100%; font-size: 1.125rem; font-weight: 400; color: var(--CBlack); line-height: 1; text-align: left; text-overflow: ellipsis; overflow: hidden; padding: 25px 50px; margin-bottom: -5px; position: relative; top: -3px; }
.table-box button.btnsm { padding: 4px 10px; font-size: 12px; background: var(--CBlue400); border: 0; border-radius: 3px; color: #fff;}

@media screen and (max-width: 1500px){
	.table-box thead th, .table-box td{ padding: 23px 15px; }
}

@media screen and (max-width: 1250px){
	.table-box td p{ font-size: 1.125rem; } 
	#Seminar .detailHeader .img-box { width: 40%; height: 100%;}
	#Seminar .detailHeader .img-box img { width: 100%; height: 100%;}
	#Seminar .detailHeader .text-box { width: 60%; padding: 10px 0 0 42px;}
	#Seminar .detailHeader .button-list button.register { width: 78%; }
	#Seminar .detailHeader .button-list button { width: 20%;}
	#Seminar .detailHeader .text-box .titleArea h5 { font-size: 1.75rem; margin: 8px 0;}
	#Seminar .detailHeader .text-box .titleArea p { font-size: 1.25rem;}
	#Seminar .detailHeader .text-box .infoArea dl { font-size: 1rem;}

}

@media screen and (max-width: 1100px){ 
	#SeminarLocal .inline_form ul {display: flex;}
	#SeminarLocal .inline_form li.formInput { margin-right: 10px;}
	#ApplySeminar .attendInfo .inline_form li.formInput {width: 100%;}
	#RegistSeminar .attendInfo .inline_form li.formInput {width: 100%;}
}

@media screen and (max-width: 1000px){
	#Seminar .detailHeader {display: block;}
	#Seminar .detailHeader .img-box { width: 100%; }
	#Seminar .detailHeader .img-box img { width: 100%; height: 100%;}
	#Seminar .detailHeader .text-box { width: 100%; padding: 10px 0 0 0px; margin-top: 40px;}
	#Seminar .detailHeader .text-box .titleArea h5 { font-size: 2.5rem; margin: 8px 0;}
	#Seminar .detailHeader .text-box .titleArea p { font-size: 1.625rem;}
	#Seminar .detailHeader .text-box .infoArea dl { font-size: 1.25rem;}
	#Seminar .detailHeader .button-list { display: block;}
	#Seminar .detailHeader .button-list button { width: 100%; height: 60px; margin-bottom: 20px;}
	#Seminar .detailHeader .button-list button.register { width: 100%; height: 60px;}
	.table-box thead th{ font-size: 1.25rem;}
	#Seminar .detailSpeaker .flex-box .text-box .profile li { font-size: 1.125rem;}
	.table-box button.btnsm { padding: 4px 10px; font-size: 1rem; color: #fff;}
}
@media screen and (max-width: 925px) {
	.calendar_wrap h4.title {margin: 10px auto; font-size: 50px; }
	.calendar_wrap i.seminar_ico {float: right; margin: 0px 0 20px 0; padding: 4px 6px;font-size: 12px;}
	.calendar_wrap .number {float: left; font-size: 1.25rem; }
	
}

@media screen and (max-width: 900px) {
	#Seminar .detailSpeaker .flex-box {display: block;}
	#Seminar .detailSpeaker .flex-box .img-box { width: 242px; height: 320px; }
	#Seminar .detailSpeaker .flex-box .img-box img { width: 242px; height: 320px; }
	#Seminar .detailSpeaker .flex-box .text-box { width: 100%;}
	#Seminar .detailSpeaker .flex-box .text-box h5 { font-size: 1.75rem; margin-top: 20px;}
	#Seminar .detailSpeaker .flex-box .text-box p { font-size: 1.25rem;  }
	.table-box table tr{ display: flex; flex-direction: column; }
	.table-box thead{ display: none; }
	.table-box td{ font-size: 1.25rem; text-align: left; padding: 10px 15px; }
	.table-box td:nth-of-type(1) {display: none;}
	.table-box td:nth-of-type(2), .table-box td:nth-of-type(3){ width: 100%; }
	.detailCurriculum .table-box td:nth-of-type(1) {display: block; width: 100%; }
	.detailCurriculum .table-box td:nth-of-type(1) {background: var(--CBlueGrey100);}
	.table-box td:nth-of-type(3){ padding-top: 0; }
	.table-box td p{ top: 0; padding: 0 0 3px 0; font-size: 1.25rem; max-width: 100%;}
	#SeminarLocal .inline_form li.formInput {width: 100%;}
	

}
@media screen and (max-width: 869px) {
	.calendar_wrap td {padding: 5px;}
	.calendar_wrap i.seminar_ico {margin: 0px; font-size: 10px; text-overflow: ellipsis;}
	.calendar_wrap .number {font-size: 1.25rem; width: 40px; }
}

/*Education*/
#Education{ overflow: hidden;}
#Education .edu-service{ margin-bottom: 6.25rem; padding-top: 50px;}
#Education .edu-service .img-flexbox{ width: 100%; display: flex; align-items: center;}
#Education .edu-service .img-flexbox .text-box{ width: 50%; background: var(--mainColor); color: #fff; padding: 50px; border-radius: 30px;}
#Education .edu-service .img-flexbox .text-box h4{ font-size: 36px; margin-bottom: 30px; font-weight: 600; text-align: center; text-decoration: underline; }
#Education .edu-service .img-flexbox .text-box li{ font-size: 24px; margin-top: 15px; }
#Education .edu-service .img-flexbox .img-box{ width: 50%; }
#Education .edu-service .img-flexbox .img-box figure img{ width: 100%; border-radius: 30px; }

#Education .edu-service02 { margin-bottom: 6.25rem; }
#Education .edu-service02 .flex-box{ display: flex; justify-content: space-between; align-items: center; margin-top: 70px; position: relative;}
#Education .edu-service02 .img-box{ width: 40%; }
#Education .edu-service02 .img-box figure{ width: auto; border-radius: 30px; overflow: hidden; -webkit-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -moz-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25); 
    -ms-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -o-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25); }
#Education .edu-service02 .text-box{ width: 55%; }
#Education .edu-service02 .text-box.lb{ padding-left: 10%; }
#Education .edu-service02 .text-box .section-title{ text-align: left; font-size: 2.125rem; color: var(--CBlack); }
#Education .edu-service02 .text-box p { list-style: disc; font-size: 1.125rem; color: var(--CDarkGrey100); line-height: 1.8;}

@media screen and (max-width: 1490px){
	#Education .edu-service02 .flex-box br{ display: none; }
}

@media screen and (max-width: 1100px){
	#Education .edu-service .img-flexbox{  flex-direction: column;}
	#Education .edu-service .img-flexbox .text-box{ width: 100%; padding: 30px; border-radius: 30px;}
	#Education .edu-service .img-flexbox .text-box h4{ font-size: 36px; margin-bottom: 30px; }
	#Education .edu-service .img-flexbox .text-box li{ font-size: 24px; margin-top: 15px; }
	#Education .edu-service .img-flexbox .img-box{ width: 100%; margin-top: 20px;}
	#Education .edu-service .img-flexbox .img-box figure{ display: block; }
}

@media screen and (max-width: 1250px){
	#Education .edu-service02 .flex-box{ margin-top: 40px; } 
	
}


@media screen and (max-width: 1000px){
	#Education .edu-service02 .flex-box{ flex-direction: column; }
	#Education .edu-service02 .img-box{ width: 100%; text-align: center; }
	#Education .edu-service02 .text-box{ width: 100%; margin-top: 30px; }
	#Education .edu-service02 .text-box.lb{ padding-left: 0%; }
	#Education .edu-service02 .flex-box div{ width: 100%; }
	#Education .edu-service02 .flex-box div:last-of-type{ margin-top: 20px; }
}



/* Ethics */
#Ethics{ overflow: hidden; }
#Ethics .imgBox{ }
#Ethics .imgBox img { max-width: 565px;} 
#Ethics .textBox02{ width:60%; padding: 20px; margin-top: 40px;} 
#Ethics .textBox02 .sign{ float: right; margin-top: 50px; font-size: 1.125rem; color:#000000;} 
#Ethics .textBox02 .sign span { font-size: 30px; font-weight: 600; margin-left: 20px;}  
#Ethics .textBox02 h5{ font-size: 24px; color:#252525; margin-bottom:10px; font-weight: 700; line-height: 1.5; text-align: left; letter-spacing: -0.05em;}
#Ethics h5 br{ display:none;}
#Ethics .textBox02 p{ font-size: 18px; color:#252525; font-weight: 400; text-align: left; margin-top: 20px; letter-spacing: -0.05em; }

#Ethics .flex-box{ display: flex; justify-content: space-between; align-items: normal; }
#Ethics .diagram {display:block; max-width:1000px; margin: 50px auto; }
#Ethics .diagram img{ max-width:1000px; }

#Ethics .effect{ width: 100%; max-width: 1280px; margin: 0 auto; } 
#Ethics .effect ul{ width: 100%;}
#Ethics .effect li { font-size: 1.25rem; color: #fff; margin-bottom: 20px; list-style: disc;}
#Ethics .effect li:last-child {margin-bottom: 0;}

#Ethics .w1280 { width:96%; margin: 50px auto;}
#Ethics .flex-box .alert { width: calc((100% - 30px) / 2); } 
#Ethics .alert .alert-text h6 {
	width: 80px;
    font-size: 1.25rem;
    font-weight: 600;
    margin-right: 30px;
    color: var(--CDarkGrey300);
    letter-spacing: -0.03em;
    text-align: center;
}
#Ethics .textBox {padding-bottom:20px; margin-bottom: 40px; border-bottom:1px solid #e1e1e1;}
#Ethics .textBox:first-of-type {padding-top: 50px;}
#Ethics .textBox h3 { font-size: 24px; color:#252525; margin-bottom:20px; font-weight: 700;}
#Ethics ul.txt li { font-size: 1rem; margin-bottom: 10px; }

#Ethics .textWrap dl dt {
    font-size: 22px;
    color: #000;
    padding: 20px 0 15px;
  }
 #Ethics .textWrap dl dt.bb {
   font-size: 24px;
   font-weight: bold;
 }
 #Ethics .textWrap dl.txt2 {
   text-align: center;
   margin-right: 70px;
 }
 #Ethics .textWrap dl.rnd1 dt {
   color: #eb6896;
   font-size: 20px;
   padding: 20px 0 15px;
 }
 #Ethics .textWrap dl.rnd2 dt {
   color: #43b4c1;
   font-size: 20px;
   padding: 20px 0 15px;
 }
 #Ethics .textWrap dd {
   color: #4b4b4b;
   line-height: 22px;
   letter-spacing: -0.2px;
 }
#Ethics .textWrap .line_gr {
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 50px;
  padding-top: 50px;
}
  

@media screen and (max-width: 1500px){
	#Ethics{ padding: 10.8% 40px; }
	#Ethics .textBox02 p br{ display:none;}
	
}

@media screen and (max-width: 1400px){
	#Ethics .effect li { display: block; margin-bottom: 30px; padding-left: 0px; text-align: center; margin-top: 15px;}
}
@media screen and (max-width: 1250px){
	#Ethics .flex-box{ margin-top: 40px; } 
	#Ethics .imgBox img { max-width: 100%;} 
	#Ethics .diagram { max-width:100%; margin: 50px auto; }
	#Ethics .diagram img{ max-width:100%; }
	#Ethics .effect li { font-size: 1.5rem; }
	#Ethics .flex-box.mt0 { margin-top:0px; } 
	#Ethics .flex-box .alert { width: 100%; } 
}

@media screen and (max-width: 1000px){
	#Ethics .imgBox{ width: 90%; margin: 50px auto 30px auto; text-align:center; }
	#Ethics .textBox02{ width: 100%; margin-top:20px; padding: 20px 0;}
	#Ethics .textBox02 h5 br{ display:block;}
	#Ethics .textBox02 p{ margin-top: 10px; }
	#Ethics .textBox02 .sign{ text-align: right; } 
	#Ethics .flex-box{ flex-direction: column; }
	#Ethics .textBox02 p br{display:none;}
	
	#Ethics .effect li { font-size: 1.25rem; }
}

@media screen and (max-width: 850px){
	#Ethics{ padding: 10.8% 0px; }
	#Ethics .alert .alert-text h6 {width: 100%;font-size: 1.25rem;margin-right: 0px;text-align: left;}
}

@media screen and (max-width: 480px){
	#Ethics .textBox02 p{ font-size:1rem; }
	#Ethics .flex-box {
        margin-top: 80px;
    }
}

/*Sales*/
#Sales{ overflow: hidden; }
#Sales .flex-box{ display: flex; justify-content: space-between; align-items: normal; }
#Sales .textBox{ width: calc(( 100% - 20px) / 2); padding: 0 10px; margin-top: 40px; margin-bottom: 0px;} 
#Sales .textBox h5{ font-size: 24px; color:#252525; margin-bottom:10px; font-weight: 700; line-height: 1.5; text-align: left; letter-spacing: -0.05em;}
#Sales .textBox p{ font-size: 18px; color:#252525; font-weight: 400; text-align: left; margin-top: 20px; letter-spacing: -0.05em; }
#Sales .textBox li h5 { width:90px; font-size: 16px; font-weight:600; padding-right:16px; margin-bottom:0; color:var(--CBlack); line-height: 1;}
#Sales .textBox li { display: flex;}

@media screen and (max-width: 1000px){
	#Sales .flex-box{ flex-direction: column; }
	#Sales .textBox { width: 100%;}
	#Sales .textBox { padding: 0px; }
	#Sales .w1280 { padding: 0 0px;}
	#Sales .alert { padding: 1.875rem 16px;}
	#Sales .alert .alert-text ul {margin-left: 0px;}
	#Sales .textBox li h5 { width:80px;}
	
}


/* History */
#History .flex-box{ display: flex; justify-content: space-between; }
#History .flex-box > div.sticky-box{ padding-right: 50px; }
#History .flex-box > div.history-box{ padding-left: 95px; }
#History .sticky-box{ width: 37%; min-height: 100vh; position: relative; color: #fff; }
#History .sticky-box ul{ position: sticky; top: 200px; }
#History .sticky-box ul li:not(:last-of-type){ margin-bottom: 160px; }
#History .sticky-box ul li p{ font-size: 5.5rem; font-weight: 700; opacity: 0.2; transition: opacity 0.5s; cursor: pointer; }
#History .sticky-box ul li figure{ max-width: 683px; width: 100%; position: relative; overflow: hidden; margin-top: 25px; padding: 0; transition: padding 0.5s; }
#History .sticky-box ul li figure img{ width: 100%; height: 100%; }

#History .sticky-box ul li.on p{ opacity: 1; }
#History .sticky-box ul li.on figure{ padding-bottom: 54%; }

#History .history-box{ width: 63%; }
#History .history-box .offset:not(:last-of-type), #History .history-box dl:not(:last-of-type){ padding-bottom: 100px; }
#History .history-box .title-box{ max-width: 425px; margin-bottom: 30px; display: none; }
#History .history-box .title-box figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 68%; }
#History .history-box .title-box figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#History .history-box .title-box h4{ font-size: 3rem; font-weight: 700; color: #111; margin-bottom: 10px; }
#History .history-box dl dt{ font-size: 4.375rem; font-weight: 700; color: #111; margin-bottom: 25px; margin-top: 30px; font-family: var(--Russo); }
#History .history-box dl dt span{ font-family: var(--baseFont); }
#History .history-box dl dd{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.5; padding-left: 0px; position: relative; }
#History .history-box dl dd:not(:last-of-type){ margin-bottom: 20px; }
#History .history-box dl dd *{ line-height: 1.5; }
#History .history-box dl dd::before{ content: attr(data-month); font-weight: 700; position: absolute; top: 0; left: 0; }

#History .partners{ padding-top: 130px; }
#History .partners ul{ display: flex; flex-wrap: wrap; margin-top: 40px; margin-bottom: -20px; }
#History .partners ul li{ width: calc((100% - 60px) / 4); height: 100px; margin-right: 20px; margin-bottom: 20px; }
#History .partners ul li:nth-of-type(4n){ margin-right: 0; }
#History .partners ul li figure{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 1px solid #D8D8D8; padding: 20px; }

@media screen and (max-width: 1640px){
	#History .sticky-box::before{ width: 20px; }
	#History .flex-box > div.sticky-box{ padding-right: 20px; }
}

@media screen and (max-width: 1500px){
	#History .history-box .offset:not(:last-of-type), #History .history-box dl:not(:last-of-type){ padding-bottom: 60px; }
	#History .sticky-box ul li:not(:last-of-type){ margin-bottom: 100px; }
	#History .sticky-box ul li p{ font-size: 4.5rem; }

	#History .history-box dl dt{ font-size: 3rem; }
}

@media screen and (max-width: 1300px){
	#History .flex-box > div.history-box{ padding-left: 50px; }
}

@media screen and (max-width: 1250px){
	#History .sticky-box ul li p{ font-size: 3.8rem; }
	#History .history-box dl dt{ font-size: 2.5rem; margin-bottom: 10px; }
	#History .history-box dl dd:not(:last-of-type){ margin-bottom: 15px; }

	#History .partners ul li{ width: calc((100% - 40px) / 3); }
	#History .partners ul li:nth-of-type(4n){ margin-right: 20px; }
	#History .partners ul li:nth-of-type(3n){ margin-right: 0; }
}

@media screen and (max-width: 1200px){
	#History .sticky-box{ width: 40%; }
	#History .sticky-box ul{ top: 150px; }
	#History .sticky-box ul li:not(:last-of-type){ margin-bottom: 60px; }
	#History .history-box{ width: 60%; }
	#History .history-box .title-box{ display: none; }

	#History .partners{ padding-top: 80px; }
	#History .partners ul li{ height: 90px; }
}

@media screen and (max-width: 1000px){
	#History .flex-box{ flex-direction: column; }
	#History .flex-box > div{ padding: 10px 0; }
	#History .flex-box > div.sticky-box{ padding-right: 0; }
	#History .sticky-box{ width: 100%; min-height: auto; background: none; }
	#History .sticky-box::before{ display: none; }
	#History .sticky-box ul{ display: flex; flex-wrap: wrap; }
	#History .sticky-box ul li{ width: 50%; padding: 0; position: relative; text-align: center; margin-bottom: 0; border: 1px solid #D8D8D8; }
	#History .sticky-box ul li:not(:last-of-type){ margin-bottom: 0; border-right: none; }
	#History .sticky-box ul li p{ display: flex; justify-content: center; align-items: center; height: 55px; font-size: 1.7rem; font-weight: 400; color: #666; opacity: 1; }
	#History .sticky-box ul li.on{ background: var(--mainColor); border: 1px solid var(--mainColor); }
	#History .sticky-box ul li.on p{ color: #fff; }

	#History .sticky-box ul li figure{ display: none; }

	#History .flex-box > div.history-box{ padding: 0px 0 0; }
	#History .history-box{ width: 100%; }
}

@media screen and (max-width: 850px){
	
}

@media screen and (max-width: 800px){
	#History .partners ul li{ width: calc((100% - 20px) / 2); height: 85px; }
	#History .partners ul li:nth-of-type(3n){ margin-right: 20px; }
	#History .partners ul li:nth-of-type(2n){ margin-right: 0; }
}


/* Counsel */

#Counsel section:not(:last-of-type){ padding-bottom: 130px; }  
#Counsel p.small{ font-size: 1rem; font-weight: 400; color: #333; text-align: right; }
#Counsel p.small span{ font-weight: 700; color: #EF1313; }

#Counsel .agree .policy-box{ border: 1px solid #D8D8D8; padding: 40px; margin-top: 15px; max-height: 400px; overflow-y: scroll; }
#Counsel .agree .policy-box dt{ font-size: 1.125rem; font-weight: 700; color: #111; line-height: 2; padding-left: 10px; position: relative; }
#Counsel .agree .policy-box dt::before{ content: ""; width: 3px; height: 3px; background: #111; border-radius: 50%; position: absolute; top: 15px; left: 0; }
#Counsel .agree .policy-box dd{ margin-top: 45px; }
#Counsel .agree .policy-box dd *{ font-weight: 400; color: #333; }
#Counsel .agree .policy-box dd p{ font-size: 1.125rem; }
#Counsel .agree .policy-box dd ul{ margin: 25px 0; }
#Counsel .agree .policy-box dd ul li{ display: flex; align-items: baseline; font-size: 1rem; line-height: 1.9444; }
#Counsel .agree .policy-box dd ul li span{ display: inline-block; margin-right: 5px; }
#Counsel .agree .check{ text-align: center; margin-top: 35px; }
#Counsel .agree .check input{ display: none; }
#Counsel .agree .check label{ display: inline-block; font-size: 1.125rem; font-weight: 400; color: #333; padding: 10px 25px; position: relative; cursor: pointer; }
#Counsel .agree .check label::before{ content: ""; width: 15px; height: 15px; border: 1px solid #828282; border-radius: 50%; position: absolute; top: 12px; left: 0; }
#Counsel .agree .check input:checked + label::after{ content: ""; width: 7px; height: 7px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 17px; left: 5px; }
#Counsel .max320{ max-width: 320px; }
@media screen and (max-width: 1500px){
	#Counsel section:not(:last-of-type){ padding-bottom: 100px; }
}

@media screen and (max-width: 1250px){
	#Counsel .title p{ font-size: 1.125rem; margin-top: 10px; }
	#Counsel section:not(:last-of-type){ padding-bottom: 60px; }

	#Counsel .agree .policy-box{ padding: 25px; }
	#Counsel .agree .policy-box dd{ margin-top: 30px; }
	#Counsel .agree .policy-box dd ul{ margin: 15px 0; }
	#Counsel .agree .policy-box dd p{ font-size: 1.125rem; }
	#Counsel .agree .policy-box dd ul li{ font-size: 1.125rem; }
	#Counsel .agree .check{ margin-top: 15px; }
	
	#Counsel .agree .check label{ font-size: 1.125rem; }
}

@media screen and (max-width: 850px){
	#Counsel .title p{ font-size: 1.125rem; }
	#Counsel .agree .check{ margin-top: 5px; }
	#Counsel .form-table textarea{ height: 300px !important; }
}

/*  */
#value section{ overflow: hidden; }
#value section:not(:first-of-type){ padding-top: 130px; }
#value section:not(:last-of-type){ padding-bottom: 150px; }

#value .mission .section-title{ margin-bottom: 40px; }
#value .mission .flex-box{ display: flex; justify-content: center; align-items: center; }
#value .mission .box{ width: 52%; display: flex; align-items: center; }
#value .mission .box .icon{ width: 360px; height: 360px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0px 0px 30px 0px var(--shadow); position: relative; }
#value .mission .box .icon::before{ content: ""; width: 160px; height: 160px; background: var(--bg); border-radius: 50%; opacity: 0.2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#value .mission .box .text p:first-of-type{ font-size: 2rem; font-weight: 400; color: #111; line-height: 1.4; } 
#value .mission .box .text p:last-of-type{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.5; margin-top: 15px; }

#value .mission .box.green{ flex-direction: column-reverse; text-align: center; margin: 0 auto; --bg: #048674; --shadow: rgba(4, 134, 116, 0.14); margin-bottom: -100px; }
#value .mission .box.light{ flex-direction: row-reverse; --bg: #578E3B; --shadow: rgba(55, 39, 28, 0.09); margin-right: -70px; }
#value .mission .box.brown{ --bg: #37271C; --shadow: rgba(87, 142, 59, 0.20); }

#value .mission .box.green .text{ margin-bottom: 15px; }
#value .mission .box.light .text{ margin-right: 80px; }
#value .mission .box.brown .text{ margin-left: 80px; }

#value .core{ text-align: center; }
#value .core .section-title{ margin-bottom: 15px; }
#value .core .section-title + p{ font-size: 1.7rem; font-weight: 400; color: #333; }

#value .core ul{ display: flex; margin-top: 130px; }
#value .core ul li{ width: calc((100% - 70px) / 3); background: #F6F6F6; padding: 50px 40px; border-radius: 20px; }
#value .core ul li:not(:last-of-type){ margin-right: 35px; }
#value .core ul li h6{ font-size: 2.5rem; font-weight: 700; color: #111; margin: 45px 0 15px; }
#value .core ul li p{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.75; padding: 0 20px; }

@media screen and (max-width: 1600px){
	#value .mission .box.green{ margin-bottom: -90px; }
	#value .mission .box.light{ margin-right: -35px; }

	#value .mission .box .icon{ width: 330px; height: 330px; }
	#value .mission .box .icon img{ transform: scale(0.85); }
}


@media screen and (max-width: 1560px){
	#value .core ul li br{ display: none; }
}

@media screen and (max-width: 1500px){
	#value section:not(:first-of-type){ padding-top: 80px; }
	#value section:not(:last-of-type){ padding-bottom: 100px; }

	#value .intro .text-box p br{ display: none; }

	#value .mission .box br{ display: none; } 
	#value .mission .box .text{ width: calc(100% - 370px); }
	#value .mission .box.light .text{ margin-right: 40px; }
	#value .mission .box.brown .text{ margin-left: 40px; }

	#value .core ul{ margin-top: 80px; }
	#value .core ul li{ padding: 40px 30px; }
}

@media screen and (max-width: 1300px){
	#value .mission .box.green{ margin-bottom: -72px; }

	#value .mission .box .icon{ width: 280px; height: 280px; }
	#value .mission .box .icon::before{ width: 130px; height: 130px; }
	#value .mission .box .icon img{ transform: scale(0.75); }
	#value .mission .box .text{ width: calc(100% - 320px); }
}

@media screen and (max-width: 1250px){
	#value .mission .section-title{ margin-bottom: 20px; }
	#value .mission .box .text p:first-of-type{ font-size: 1.8rem; }

	#value .core ul{ margin-top: 50px; }
	#value .core ul li h6{ font-size: 2.2rem; margin: 30px 0 10px; }
	#value .core ul li p{ padding: 0; }
}

@media screen and (max-width: 1200px){
	#value section:not(:first-of-type){ padding-top: 50px; }
	#value section:not(:last-of-type){ padding-bottom: 80px; }
}

@media screen and (max-width: 1100px){
	#value .mission .flex-box{ flex-direction: column; }

	#value .mission .box{ width: 100%; }
	#value .mission .box.green{ flex-direction: row; margin-bottom: 60px; text-align: left; }
	#value .mission .box.light{ flex-direction: row; margin-bottom: 60px; margin-right: 0; }

	#value .mission .box.green .text{ margin-left: 40px; }
	#value .mission .box.light .text{ margin-right: 0; margin-left: 40px; }

	#value .core ul{ flex-direction: column; }
	#value .core ul li{ display: flex; justify-content: space-between; align-items: center; width: 100%; }
	#value .core ul li:not(:last-of-type){ margin-right: 0; margin-bottom: 35px; }
	#value .core ul li .text{ width: calc(100% - 300px); }
	#value .core ul li h6{ margin-top: 0; }
}

@media screen and (max-width: 1000px){
	#value .mission .box .icon{ width: 230px; height: 230px; }
	#value .mission .box .icon::before{ width: 110px; height: 110px; }
	#value .mission .box .icon img{ transform: scale(0.7); }
	#value .mission .box .text{ width: calc(100% - 270px); }
}

@media screen and (max-width: 850px){
	#value .core ul li h6{ font-size: 2rem; }
}

@media screen and (max-width: 750px){
	#value .core ul li{ flex-direction: column; }
	#value .core ul li .text{ width: 100%; }
	#value .core ul li h6{ margin-top: 30px; }  
}

@media screen and (max-width: 600px){
	#value .mission .box{ flex-direction: column; }
	#value .mission .box.green{ flex-direction: column; }
	#value .mission .box.light{ flex-direction: column; }

	#value .mission .box .text{ width: 70%; text-align: center; }
	#value .mission .box.green .text{ margin: 0; margin-top: 30px; }
	#value .mission .box.light .text{ margin: 0; margin-top: 30px; }
	#value .mission .box.brown .text{ margin: 0; margin-top: 30px; }
}

/* Location */
#Location{ overflow: hidden; }
#Location *{ letter-spacing: 0;	 }
#Location section:not(:last-of-type){ padding-bottom: 170px; }
#Location .section-title{ margin-bottom: 45px; }
#Location .flex-box{ display: flex; margin-top: 35px; }
#Location .flex-box h5{ font-size: 4.5rem; font-weight: 700; color: #111; padding-right: 240px; }
#Location .flex-box ul{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 80px; }
#Location .flex-box ul li{ display: flex; align-items: flex-start; font-size: 1.7rem; font-weight: 400; color: #333; }
#Location .flex-box ul li img{ margin-right: 10px; }
#Location .flex-box ul li span{ display: inline-block; font-weight: 700; margin-right: 15px; }
#Location figure {border: 1px solid var(--mainColor);}

#Location .button{ width: 200px; margin: 0 auto; margin-top: 45px; }
#Location .alert { margin-top: 20px;}
#Location .alert .alert-text li { font-size: 1rem; list-style: disc; margin-bottom: 10px; display: flex;}
#Location .alert .alert-text li h6 { width: 130px;}

@media screen and (max-width: 1500px){
	#Location section:not(:last-of-type){ padding-bottom: 100px; }
	#Location .flex-box h5{ font-size: 3.5rem; padding-right: 200px; }

	#Location .button{ width: 200px; height: 55px; letter-spacing: -0.04em;}
}

@media screen and (max-width: 1250px){
	#Location section:not(:last-of-type){ padding-bottom: 70px; }
	#Location .section-title{ margin-bottom: 30px; }
	#Location .flex-box{ margin-top: 15px; }
	#Location .flex-box h5{ font-size: 2.5rem; padding-right: 160px; }
}

@media screen and (max-width: 850px){
	#Location .section-title{ margin-bottom: 20px; }
	#Location .flex-box{ flex-direction: column; }
	#Location .flex-box h5{ font-size: 2rem; padding-right: 0; }
	#Location .flex-box ul{ margin-top: 15px; }
	#Location .alert .alert-text li { margin-bottom: 20px; display: block;}
	#Location .alert .alert-text li h6 {margin: 0;}

	#Location .button{ width: 180px; height: 50px; margin-top: 25px; }
}


/* Contact */

#Contact section:not(:last-of-type){ padding-bottom: 130px; }  
#Contact p.small{ font-size: 1rem; font-weight: 400; color: #333; text-align: right; }
#Contact p.small span{ font-weight: 700; color: #EF1313; }

#Contact .agree .policy-box{ border: 1px solid #D8D8D8; padding: 40px; margin-top: 15px; max-height: 400px; overflow-y: scroll; }
#Contact .agree .policy-box dt{ font-size: 1.125rem; font-weight: 700; color: #111; line-height: 2; padding-left: 10px; position: relative; }
#Contact .agree .policy-box dt::before{ content: ""; width: 3px; height: 3px; background: #111; border-radius: 50%; position: absolute; top: 15px; left: 0; }
#Contact .agree .policy-box dd{ margin-top: 45px; }
#Contact .agree .policy-box dd *{ font-weight: 400; color: #333; }
#Contact .agree .policy-box dd p{ font-size: 1.125rem; }
#Contact .agree .policy-box dd ul{ margin: 25px 0; }
#Contact .agree .policy-box dd ul li{ display: flex; align-items: baseline; font-size: 1rem; line-height: 1.9444; }
#Contact .agree .policy-box dd ul li span{ display: inline-block; margin-right: 5px; }
#Contact .agree .check{ text-align: center; margin-top: 35px; }
#Contact .agree .check input{ display: none; }
#Contact .agree .check label{ display: inline-block; font-size: 1.125rem; font-weight: 400; color: #333; padding: 10px 25px; position: relative; cursor: pointer; }
#Contact .agree .check label::before{ content: ""; width: 15px; height: 15px; border: 1px solid #828282; border-radius: 50%; position: absolute; top: 12px; left: 0; }
#Contact .agree .check input:checked + label::after{ content: ""; width: 7px; height: 7px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 17px; left: 5px; }

@media screen and (max-width: 1500px){
	#Contact section:not(:last-of-type){ padding-bottom: 100px; }
}

@media screen and (max-width: 1250px){
	#Contact .title p{ font-size: 1.125rem; margin-top: 10px; }
	#Contact section:not(:last-of-type){ padding-bottom: 60px; }

	#Contact .agree .policy-box{ padding: 25px; }
	#Contact .agree .policy-box dd{ margin-top: 30px; }
	#Contact .agree .policy-box dd ul{ margin: 15px 0; }
	#Contact .agree .policy-box dd p{ font-size: 1.125rem; }
	#Contact .agree .policy-box dd ul li{ font-size: 1.125rem; }
	#Contact .agree .check{ margin-top: 15px; }
	
	#Contact .agree .check label{ font-size: 1.125rem; }
}

@media screen and (max-width: 850px){
	#Contact .title p{ font-size: 1.125rem; }
	#Contact .agree .check{ margin-top: 5px; }
	#Contact .form-table textarea{ height: 300px !important; }
}


#content{ overflow: hidden; }
#content .flex-box{ display: flex; justify-content: space-between; }
#content .text-box{ width: calc(50% - 120px); }
#content .section-title{ text-align: left; margin-bottom: 40px; }
#content .text-box dl:first-of-type{ border-top: 1px solid #DFDFDF; }
#content .text-box dl{ border-bottom: 1px solid #DFDFDF; padding: 40px 20px; }
#content .text-box dl dt{ font-size: 2.2rem; font-weight: 700; color: #111; margin-bottom: 10px; }
#content .text-box dl dd{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.5; } 


#content .map-box{ width: 50%; border: 1px solid #DEDEDE; border-radius: 30px; padding: 25px 30px; }
#content .map-box ul{ display: flex; }
#content .map-box ul li{ display: flex; justify-content: center; align-items: center; width: 75px; height: 40px; border: 1px solid #C8C8C8; border-radius: 50px; font-size: 2rem; font-weight: 400; color: #333; line-height: 1; cursor: pointer; }
#content .map-box ul li:not(:last-of-type){ margin-right: 5px; }
#content .map-box ul li.active{ background: var(--mainColor); border: 1px solid var(--mainColor); font-weight: 700; color: #fff; }

#content .map-box .svg{ text-align: center; padding-top: 40px; }
#content .map-box .svg svg{ max-width: 100%; width: auto; height: auto; }
#content .map-box .svg text{ font-size: 1.8rem; font-weight: 700; fill: #111; }
#content .map-box .svg circle{ opacity: 0; }
#content .map-box .svg .area.active text{ fill: #fff; }

#content .map-box .svg .area.active circle:first-of-type{ animation: opacity1 1s forwards; }
#content .map-box .svg .area.active circle:not(:first-of-type){ animation: opacity2 2s infinite; }

@keyframes opacity1{ 
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}

@keyframes opacity2{
	0%{ opacity: 0; }
	50%{ opacity: 1; }
	100%{ opacity: 0; }
}

@media screen and (max-width: 1540px){
	#content .flex-box{ align-items: center; }
	#content dl br{ display: none; }
}

@media screen and (max-width: 1500px){
	#content .section-title{ margin-bottom: 25px; }

	#content .text-box{ width: calc(50% - 60px); }
	#content .text-box dl{ padding: 30px 20px; }
}

@media screen and (max-width: 1200px){
	#content .text-box dl{ padding: 20px; }
	#content .text-box dl dt{ font-size: 2rem; }

	#content .map-box ul li{ font-size: 1.8rem; }
}

@media screen and (max-width: 1000px){
	#content .flex-box{ flex-direction: column-reverse; }
	#content .text-box{ width: 100%; margin-top: 40px; }
	#content .map-box{ width: 100%; }
}

@media screen and (max-width: 850px){
	#content .section-title{ margin-bottom: 10px; }
	#content .text-box dl dt{ font-size: 1.9rem; }
	#content .map-box{ padding: 25px; }
	#content .map-box ul li{ width: 65px; height: 37px; }
}

#Board .table-box table{ border-top: 2px solid var(--mainColor); }
#Board .table-box thead th, #board .table-box td{ padding: 15px; }
#Board .table-box thead th{ font-size: 1.125rem; font-weight: 400; color: #111; background: #F6F6F6; }
#Board .table-box th.small{ width: 100px; }
#Board .table-box th.middle{ width: 150px; }
#Board .table-box tr{ border-bottom: 1px solid #E8E8E8; }
#Board .table-box td{ font-size: 1.125rem; font-weight: 400; color: #666; text-align: center; position: relative; }
#Board .table-box td p{ max-width: 665px; width: 100%; font-family: var(--Pretendard); font-size: 1.125rem; font-weight: 700; color: #111; line-height: 1; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 25px 50px; margin-bottom: -5px; position: relative; top: -3px; }
#Board .table-box td a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (max-width: 1500px){
	#Board .table-box thead th, #Board .table-box td{ padding: 23px 15px; }
}

@media screen and (max-width: 1250px){
	#Board .table-box thead th{ font-size: 1.7rem; }
	#Board .table-box td p{ font-size: 1.125rem; }  
}

@media screen and (max-width: 850px){
	#Board .table-box td p{ padding: 0; }
}

@media screen and (max-width: 700px){
	#Board .table-box table tr{ display: flex; flex-direction: column; }
	#Board .table-box thead{ display: none; }
	#Board .table-box td{ text-align: left; padding: 15px; }
	#Board .table-box td:nth-of-type(1){ display: none; }
	#Board .table-box td:nth-of-type(2), #Board .table-box td:nth-of-type(3){ width: 100%; }
	#Board .table-box td:nth-of-type(3){ padding-top: 0; }

	#Board .table-box td p{ top: 0; }
}




#guide .sub-title{ margin-bottom: 20px; }
#guide .sub-title + p{ font-size: 1.7rem; font-weight: 400; color: #333; text-align: center; }
#guide .guide-box{ margin: 75px 0 90px; }  
#guide .guide-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -40px; }
#guide .guide-box ul li{ width: calc((100% - 160px) / 6); margin-right: 32px; margin-bottom: 40px; text-align: center; }
#guide .guide-box ul li:last-of-type{ margin-right: 0; }
#guide .guide-box ul li .icon{ width: 100%; padding-bottom: 100%; border: 1px solid var(--mainColor); border-radius: 50%; position: relative; }
#guide .guide-box ul li:last-of-type .icon{ background: var(--mainColor); }
#guide .guide-box ul li .icon::after{ content: url("/img/sub/recruit/guide_arrow.png"); position: absolute; top: 50%; right: 0; transform: translate(100% , -50%); }
#guide .guide-box ul li:last-of-type .icon::after{ display: none; }  
#guide .guide-box ul li .text{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }  
#guide .guide-box ul li .text span{ display: inline-block; width: 100%; font-size: 1.6rem; font-weight: 900; color: var(--mainColor); margin-bottom: 35px; }
#guide .guide-box ul li:last-of-type .text span{ color: #fff; }
#guide .guide-box ul li p{ font-size: 2.2rem; font-weight: 700; color: #111; margin-top: 35px; }

#guide .gray-bg{ padding: 45px 50px; }
#guide .gray-bg p{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.75; padding-left: 15px; position: relative; }
#guide .gray-bg p::before{ content: ""; width: 2px; height: 2px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 12px; left: 0; }

@media screen and (max-width: 1500px){
	#guide .guide-box ul li p{ font-size: 2rem; }
}

@media screen and (max-width: 1300px){
	#guide .guide-box{ margin: 60px 0 75px; }
	#guide .guide-box ul{ width: 80%; margin: 0 auto -40px; }
	#guide .guide-box ul li{ width: calc((100% - 64px) / 3); }
	#guide .guide-box ul li:nth-of-type(3n){ margin-right: 0; }
	#guide .guide-box ul li:nth-of-type(3n) .icon::after{ display: none; }  
	#guide .guide-box ul li .text span{ margin-bottom: 20px; }
	#guide .guide-box ul li p{ margin-top: 20px; }
}

@media screen and (max-width: 1250px){
	#guide .gray-bg{ padding: 30px 35px; }
}

@media screen and (max-width: 1000px){
	#guide .guide-box ul{ width: 90%; }
}

@media screen and (max-width: 850px){
	#guide .guide-box{ margin: 40px 0 60px; }
	#guide .guide-box ul{ width: 100%; }
	#guide .guide-box ul li p{ font-size: 1.9rem; margin-top: 15px; }
}

@media screen and (max-width: 700px){
	#guide .guide-box ul li{ width: calc((100% - 32px) / 2); }
	#guide .guide-box ul li:nth-of-type(3n){ margin-right: 32px; }
	#guide .guide-box ul li:nth-of-type(2n){ margin-right: 0; }
	#guide .guide-box ul li:nth-of-type(3n) .icon::after{ display: block; }  
	#guide .guide-box ul li:nth-of-type(2n) .icon::after{ display: none; }  
}


#list.recruit .table-list thead th.small{ width: 110px; }
#list.recruit .table-list thead th.middle{ width: 200px; }
#list.recruit .table-list thead th.large{ width: 255px; }

#list.recruit .table-list tbody td > span{ max-width: 120px; width: 100%; height: 46px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border: 1px solid var(--mainColor); border-radius: 30px; font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 0; margin: 0 auto; }
#list.recruit .table-list tbody td > span.wait{ background: #F6F6F6; border: 1px solid #F6F6F6; color: #C6C6C6; }
#list.recruit .table-list tbody td > span.close{ background: transparent; border: 1px solid #C6C6C6; font-weight: 300; color: #777; }

#BoardView.recruit .title-box > span{ width: 120px; height: 46px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border: 1px solid var(--mainColor); border-radius: 30px; font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 0; margin: 0 auto; margin-bottom: 30px; }
#BoardView.recruit > span.wait{ background: #F6F6F6; border: 1px solid #F6F6F6; color: #C6C6C6; }
#BoardView.recruit > span.close{ background: transparent; border: 1px solid #C6C6C6; font-weight: 300; color: #777; }

@media screen and (max-width: 1500px){
	#list.recruit .table-list thead th.small{ width: 10%; }
	#list.recruit .table-list thead th.middle{ width: 15%; }
	#list.recruit .table-list thead th.large{ width: 20%; }
}

@media screen and (max-width: 1200px){
	#list.recruit .table-list *{ font-size: 1.7rem; }
	#list.recruit .table-list thead th.middle{ width: 12%; }
	#list.recruit .table-list thead th.large{ width: 17%; }
	#BoardView.recruit .title-box > span{ width: 100px; height: 40px; margin-bottom: 15px; }
}

@media screen and (max-width: 1000px){
	#list.recruit .table-list thead{ display: none; }
	#list.recruit .table-list tbody tr:first-of-type{ border-top: 1px solid #C1C1C1; } 
	#list.recruit .table-list tbody tr{ display: flex; flex-wrap: wrap; position: relative; }  
	#list.recruit .table-list tbody tr td{ display: inline-block; padding: 10px; }
	#list.recruit .table-list tbody tr td:nth-of-type(1){ display: none; }
	#list.recruit .table-list tbody tr td:nth-of-type(2){ width: auto; font-weight: 500; color: var(--mainColor); }
	#list.recruit .table-list tbody tr td:nth-of-type(3){ width: 100%; position: static; padding-top: 0; }
	#list.recruit .table-list tbody tr td:nth-of-type(4), #list.recruit .table-list tbody tr td:nth-of-type(5){ padding-top: 0; font-size: 1.5rem; }
	#list.recruit .table-list tbody tr td:last-of-type{ width: 100px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

	#list.recruit .table-list tbody td p{ text-align: left;}
	#list.recruit .table-list tbody td > span{ font-size: 1.5rem; }
}

@media screen and (max-width: 700px){
	#BoardView.recruit .title-box > span{ width: 85px; height: 35px; }
}

#agree h5{ font-size: 2rem; font-weight: 600; color: #222; margin-bottom: 25px; }
#agree .agree-box{ height: 700px; border: 1px solid #C1C1C1; padding: 30px; margin-bottom: 20px; }
#agree .agree-box *{ font-size: 1.7rem; font-weight: 300; color: #222; line-height: 2; }
#agree .agree-box h6{ font-weight: 600; line-height: 1.3; margin-bottom: 20px; } 
#agree .agree-box dl{ margin-top: 30px; }
#agree .agree-box dd{ padding-left: 1em; text-indent: -0.6em; }

#agree .check input{ display: none; }
#agree .check input + label{ display: inline-block; font-size: 1.8rem; font-weight: 300; color: #222; padding-left: 40px; position: relative; cursor: pointer; } 
#agree .check input + label::before, #agree .check input + label::after{ position: absolute; top: -1px; left: 0; }
#agree .check input + label::before{ content: url("/img/sub/recruit/agree_check_x.png"); }
#agree .check input + label::after{ content: url("/img/sub/recruit/agree_check_o.png"); opacity: 0; }

#agree .check input:checked + label{ color: var(--mainColor); }
#agree .check input:checked + label::before{ opacity: 0; }
#agree .check input:checked + label::after{ opacity: 1; }

#agree .center{ margin-top: 90px; }
#agree .center button{ border: none; background: none; padding: 0; margin-right: 20px; }

@media screen and (max-width: 1500px){
	#agree .center button img{ height: 58px; }
}

@media screen and (max-width: 1200px){
	#agree h5{ font-size: 1.9rem; margin-bottom: 10px; }
	#agree .agree-box{ height: 600px; }
	#agree .agree-box *{ font-size: 1.7rem; }
	#agree .agree-box h6{ margin-bottom: 10px; }
	#agree .agree-box dl{ margin-top: 20px; }

	#agree .center{ margin-top: 60px; }
}

@media screen and (max-width: 850px){
	#agree h5{ font-size: 1.7rem; }
	#agree .agree-box{ height: 500px; padding: 20px; margin-bottom: 10px; }
	#agree .agree-box *{ font-size: 1.6rem; }
	
	#agree .check input + label{ font-size: 1.7rem; padding-left: 30px; }
	#agree .check input + label::before, #agree .check input + label::after{ top: -1px; transform: scale(0.9); }

	#agree .center{ margin-top: 40px; }
}

.form-table{ border-top: 1px solid #222; }
.form-table tr{ border-bottom: 1px solid #E1E1E1; }
.form-table th{ background: #F6F6F6; font-size: 1.125rem; font-weight: 500; color: #222; padding: 20px; }
.form-table th span{ color: var(--CRed); }
.form-table td{ padding: 10px 20px; font-size: 1.125rem;}
.form-table td *{ font-family: var(--baseFont); font-size: 1.125rem; font-weight: 300; color: #222; }
.form-table td span.small-text{ display: inline-block; width: 100%; font-size: 1rem; font-weight: 300; color: #666; margin-top: 10px; }

.form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table td p, .form-table td .min-height{ width: 100%; min-height: 65px; }
.form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table textarea{ border: 1px solid #CCC; padding: 0 20px; appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; }  
.form-table select{ appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-right: 50px; background: #fff url("/assets/images/common/select_arrow.png") no-repeat center right 20px; }
.form-table input[type="text"]:not(.placeholder)::placeholder{ color: #222; }
.form-table textarea{ resize: none; width: 100%; height: 180px; padding: 20px; }
.form-table td p{ display: flex; align-items: center; }
.form-table td .min-height{ display: flex; align-items: center; }
.form-table td .black{ width: 210px; height: 60px; background: #333; border: none; font-weight: 300; color: #fff; }
.form-table .hyphen td span{ display: inline-block; width: 20px; height: 1px; background: #CCC; margin: 0 10px; }
#step .hyphen .flex input{ width: calc((100% - 44px) / 2); }

.vertical .form-table tr th, .vertical .form-table tr td{ border-right: 1px solid #CCC; }
.vertical .form-table tr th:last-of-type, .vertical .form-table tr td:last-of-type{ border-right: none; }
.vertical .form-table th{ height: 70px; }

.wide .form-table th{ width: 440px; padding: 20px 25px; text-align: left; vertical-align: top; position: relative; }
.wide .form-table th div{ display: flex; }
.wide .form-table th div span{ display: inline-block; color: #222; margin-right: 5px; } 
.wide .form-table td{ padding: 20px; }
.wide .form-table td .radio{ flex-direction: column; align-items: flex-start; gap: 23px; }

form .center{ display: flex; justify-content: center; align-items: center; margin-top: 90px; } 
form .center .button:not(:last-of-type){ margin-right: 20px; }

.form-table .flex{ display: flex; align-items: center; }
.form-table td.email span{ display: inline-block; padding: 0 20px; }

.max740{ max-width: 740px; }
.max416{ max-width: 416px; }
.max300{ max-width: 300px; }
.max250{ max-width: 250px; }
.max200{ max-width: 200px; }

/* input[type="radio"] */
ul.radio{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
ul.radio li input{ display: none; }
ul.radio li input + label{ display: inline-block; font-size: 1.125rem; font-weight: 300; color: #222; padding-left: 30px; position: relative; cursor: pointer; }
ul.radio li input + label::before{ content: ""; width: 15px; height: 15px; border: 2px solid #222; border-radius: 50%; position: absolute; top: 1px; left: 0; }
ul.radio li input:checked + label::after{ content: ""; width: 9px; height: 9px; background: #222; border-radius: 50%; position: absolute; top: 6px; left: 5px; }

/* input[type="checkbox"] */
ul.checkbox{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 50px; }
ul.checkbox li input{ display: none; }
ul.checkbox li input + label{ display: inline-block; padding-left: 30px; font-size: 1.125rem; font-weight: 500; color: #222; position: relative; cursor: pointer; }
ul.checkbox li input + label::before{ content: ""; width: 15px; height: 15px; border: 2px solid #222; border-radius: 5px; position: absolute; top: 2px; left: 0; }
ul.checkbox li input:checked + label::after{ content: url("/assets/images/common/checked.png"); position: absolute; top: 0px; left: 4px; }


@media screen and (max-width: 1200px){
	.form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table td p, .form-table td .min-height{ min-height: 60px; }
	#step .hyphen .flex input{ width: calc(100% / 2); }
	#step .hyphen td span{ width: 10px; margin: 0 5px; }

	form .center{ margin-top: 60px; }  
	.form-table td .black{ width: 160px; }

	/* input[type="radio"] */
	ul.radio li input + label{ font-size: 1.7rem; }  
	ul.radio li input + label::before{ top: 1px; }
	ul.radio li input:checked + label::after{ top: 6px; }

	/* input[type="checkbox"] */
	ul.checkbox li input + label{ font-size: 1.7rem; }
	ul.checkbox li input + label::before{ top: 0; }
	ul.checkbox li input:checked + label::after{ top: 0; }

	.button-list button{ width: 100px; height: 50px; padding: 0 20px 0 15px; font-size: 1rem; }
	.button-list button::before{ top: 1px; transform: scale(0.9); }
}

@media screen and (max-width: 1000px){
	.form-table colgroup col{ display: none; }
	.form-table table{ background: #F6F6F6; }
	.form-table tr{ display: flex; flex-wrap: wrap; align-items: center; border-bottom: none; }  
	.form-table th{ width: 150px; }
	.form-table td{ width: calc(100% - 150px); background: #fff; position: relative; }
	.form-table td::after{ content: ""; width: calc(100% + 150px); height: 1px; background: #E1E1E1; position: absolute; bottom: 0; right: 0; }

	.vertical .form-table th{ display: none; }
	.vertical .form-table tr th, .vertical .form-table tr td{ border-right: none; }
	.vertical .form-table tr td{ width: 100%; padding-left: 170px; position: relative; }
	.vertical .form-table tr td::before{ content: attr(data-th); width: 150px; height: 100%; background: #F6F6F6; font-size: 1.7rem; font-weight: 500; color: #222; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; }

	.wide .form-table th{ width: 100%; }
	.wide .form-table td{ width: 100%; }
	.button-list button{ width: 100px; height: 50px; padding: 0 20px 0 15px; font-size: 1.25rem; }
}

@media screen and (max-width: 850px){
	.form-table th{ font-size: 1.25rem; }
	.form-table td *{ font-size: 1rem;  }
	.form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table td p, .form-table td .min-height{ min-height: 50px; }

	form .center{ margin-top: 40px; }
	.form-table td .black{ width: 140px; height: 50px; }

	.vertical .form-table tr td::before{ font-size: 1.25rem; }

	/* input[type="radio"] */
	ul.radio li input + label{ font-size: 1rem; }  
	ul.radio li input + label::before{ top: 0px; }
	ul.radio li input:checked + label::after{ top: 5px; }

	/* input[type="checkbox"] */
	ul.checkbox li input + label{ font-size: 1.25rem; }

	.button-list button{ width: 90px; height: 45px; padding: 0 15px 0 10px; font-size: 1.25rem; }
	.button-list button::before{ top: 0px; transform: scale(0.8); }
}

@media screen and (max-width: 650px){
	.form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table td p, .form-table td .min-height{ min-height: 45px; }
	.form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table textarea{ padding: 0 10px; }
	.form-table select{ padding: 0 10px; padding-right: 40px; background-position: center right 5px; }
	.form-table td .black{ width: 130px; height: 45px; }

	.form-table tr{ display: flex; flex-direction: column; }
	.form-table th{ width: 100%; height: auto; padding: 10px 20px; text-align: left; border-bottom: 1px solid #E1E1E1; }
	.form-table td{ width: 100%; overflow: hidden; }

	.vertical .form-table tr td{ padding-left: 20px; padding-top: 0; }
	.vertical .form-table tr td.flex{ flex-wrap: wrap; justify-content: center; padding: 0; padding-bottom: 10px; }
	.vertical .form-table tr td::before{ position: relative; width: 100%; left: -20px; padding: 10px 20px; justify-content: flex-start; margin-bottom: 10px; border-bottom: 1px solid #E1E1E1; }
	.vertical .form-table tr td.flex::before{ left: 0; }

	.wide .form-table th{ padding: 10px 20px; }
	.wide .form-table td{ padding: 10px 20px; }
}

@media screen and (max-width: 500px){
	.max416{ max-width: 100%; }
	.max300{ max-width: 100%; }
}

.form-table.basic th{ width: 250px; }

@media screen and (max-width: 1200px){
	.form-table.basic th{ width: 180px; }
}

@media screen and (max-width: 850px){
	.form-table.basic th{ width: 150px; }
}

@media screen and (max-width: 650px){
	.form-table.basic th{ display: block; width: 100%; }
}

/* step */
#step .step-list{ margin-bottom: 60px; overflow: hidden; }
#step .step-list ul{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: -20px; }  
#step .step-list li{ width: calc((100% - 160px) / 5); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #fff; border: 1px solid #CCC; border-radius: 50px; padding: 20px; margin-right: 40px; margin-bottom: 20px; position: relative; }
#step .step-list li::after{ content: ""; width: 100%; height: 1px; background: #CCC; position: absolute; top: 50%; right: -100%; z-index: -1; transform: translateY(-50%); }
#step .step-list li:last-of-type::after{ display: none; }
#step .step-list li:nth-of-type(5){ margin-right: 0; }
#step .step-list li *{ color: #222; line-height: 1.7; }
#step .step-list li span{ font-size: 1.5rem; font-weight: 300; }
#step .step-list li p{ font-size: 1.7rem; font-weight: 500; }
#step .step-list li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }  

#step .step-list li.active{ background: var(--mainColor); border: 1px solid var(--mainColor); }
#step .step-list li.active *{ color: #fff; }

#step section{ overflow: hidden; }
#step section:not(:last-of-type){ margin-bottom: 60px; }
#step section > .flex-box{ display: flex; /* justify-content: space-between; */ align-items: flex-start; }
#step section > .flex-box ul.checkbox{ margin-left: 20px; }
#step section > .flex-box ul.checkbox li input + label{ font-size: 1.8rem; } 
#step section .form-table:not(:last-of-type){ margin-bottom: 40px; border-top: 1px solid #222; }

#step .section-title{ display: flex; align-items: center; margin-bottom: 25px; }
#step .section-title h5{ font-size: 2rem; font-weight: 700; color: #222; }
#step .section-title p{ font-size: 1.5rem; font-weight: 300; color: #333; margin-left: 20px; }
#step .section-title p span{ font-weight: 600; color: var(--red); }

#step .form-table colgroup col:nth-of-type(odd){ width: 250px; }
#step .three .form-table colgroup col:nth-of-type(odd){ width: 150px; }

#step form .gray-box{ margin-bottom: 20px; }
#step .gray-box{ background: #F6F6F6; padding: 20px; }
#step .gray-box *{ font-size: 1.7rem; font-weight: 300; color: #333; }
#step .gray-box .flex-box{ display: flex; justify-content: space-between; align-items: center; padding: 40px; }
#step .gray-box h4{ font-size: 3rem; font-weight: 700; color: #222; margin-bottom: 10px; }
#step .gray-box p.red{ color: var(--red); margin-top: 40px; }
#step .gray-box select{ max-width: 480px; width: 100%; height: 60px; border: 1px solid #E1E1E1; font-family: var(--baseFont); padding: 0 20px; padding-right: 50px; border-radius: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #F6F6F6 url("/img/sub/recruit/select_icon.png") no-repeat center right 20px / auto; }
#step .gray-box ul li{ line-height: 2; padding-left: 13px; position: relative; }
#step .gray-box ul li::before{ content: ""; width: 3px; height: 3px; border-radius: 50%; background: #333; position: absolute; top: 17px; left: 0; }

/* border-button */
.border-button{ width: 65px; height: 70px; background: #fff; border: 1px solid #CCC; margin-left: 10px; }

@media screen and (max-width: 1500px){
	#step .step-list li{ padding: 15px; }
	#step .gray-box h4{ font-size: 2.5rem; }
	#step .gray-box select{ max-width: 400px; }
	#step .form-table colgroup col:nth-of-type(odd){ width: 200px; }
	#step .three .form-table colgroup col:nth-of-type(odd){ width: 126px; }
}

@media screen and (max-width: 1200px){
	#step .step-list li p{ font-size: 1.7rem; }
	#step .section-title{ margin-bottom: 15px; }
	#step .section-title h5{ font-size: 1.8rem; }
	#step .gray-box .flex-box{ padding: 15px; }
	#step .gray-box *{ font-size: 1.7rem; }
	#step .gray-box select{ max-width: 350px; }
	/* border-button */
	.border-button{ width: 60px; height: 60px; }
}

@media screen and (max-width: 1000px){
	#step .step-list li{ width: calc((100% - 40px) / 3); margin-right: 20px; }
	#step .step-list li:nth-of-type(5n){ margin-right: 20px; }
	#step .step-list li:nth-of-type(3n){ margin-right: 0; }
	#step .gray-box .flex-box{ flex-direction: column; align-items: flex-start; }
	#step .gray-box p.red{ margin-top: 15px; margin-bottom: 25px; }
}

@media screen and (max-width: 850px){
	#step .gray-box *{ font-size: 1.6rem; }
	#step .gray-box h4{ font-size: 2.2rem; }
	#step .gray-box select{ height: 50px; }
	/* border-button */
	.border-button{ width: 50px; height: 50px; }
}

@media screen and (max-width: 650px){
	#step .step-list li{ width: calc((100% - 20px) / 2); padding: 10px; }
	#step .step-list li:nth-of-type(3n){ margin-right: 20px; }
	#step .step-list li:nth-of-type(2n){ margin-right: 0; }
	#step .step-list li p{ font-size: 1.6rem; }
	#step .step-list li span{ font-size: 1.4rem; }
	#step .gray-box select{ height: 45px; padding: 0 10px; padding-right: 40px;
    background-position: center right 5px; }
	#step .form-table th{ width: 100%; }
	#step .form-table td{ width: 100%; }
	.border-button{ height: 45px; }
}

/* step01 */
#step.step1 section{ overflow: hidden; }
#step.step1 section .form-table:not(:last-of-type){ margin-bottom: 20px; }
#step.step1 colgroup col:nth-of-type(odd){ width: 250px; }
#step.step1 .flex-box{ display: flex; flex-wrap: wrap; }
#step.step1 .flex-box .flex:not(:last-of-type){ margin-right: 50px; }
#step.step1 .flex-box .flex span{ display: inline-block; font-weight: 500; color: #222; margin-right: 10px; }

#step.step1 .birth select:not(:last-of-type){ margin-right: 20px; }

#step.step1 .max220{ max-width: 220px; }

#step.step1 .basic-info .form-table{ display: flex; justify-content: flex-end; }
#step.step1 .basic-info table{ width: calc(100% - 240px); }
#step.step1 .basic-info .profile{ display: flex; flex-direction: column; justify-content: center; width: 240px; border-bottom: 1px solid #E1E1E1; padding: 0 20px; }
#step.step1 .basic-info .profile > div{ width: 100%; }
#step.step1 .basic-info .profile .img{ position: relative; margin-bottom: 15px; }
#step.step1 .basic-info .profile .img > div{ display: flex; justify-content: center; align-items: center; height: 290px; background: #F6F6F6; font-size: 1.6rem; font-weight: 300; color: #555; line-height: 1.7; text-align: center; }
#step.step1 .basic-info .profile .img figure{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; }
#step.step1 .basic-info .profile .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#step.step1 .basic-info .profile.change .img > div{ opacity: 0; }

#step.step1 .basic-info .profile .file input{ display: none; }
#step.step1 .basic-info .profile .file label{ display: inline-block; width: 100%; font-size: 1.6rem; font-weight: 500; color: #222; text-align: center; padding: 10px; border: 1px solid #CCC; cursor: pointer; }

#step.step1 .basic-info .profile > p{ font-size: 1.5rem; font-weight: 300; color: #222; text-align: center; margin-top: 25px; }
#step.step1 .basic-info .profile > p .red{ color: var(--red); }

#step.step1 .form-table .address input[type="text"]{ min-height: 60px; }
#step.step1 .form-table .address td > input{ margin-top: 5px; }
#step.step1 .form-table .address button{ margin-left: 10px; }

#step.step1 .form-table .number input{ width: calc((100% - 78px) / 3); }

@media screen and (max-width: 1200px){
	#step.step1 colgroup col:nth-of-type(odd){ width: 200px; }
	#step.step1 .form-table .name .flex{ width: calc((100% - 50px) / 2); }
	#step.step1 .form-table .flex input{ width: calc(100% - 50px); }
}

@media screen and (max-width: 1100px){
	#step.step1 .form-table table{ background: #F6F6F6; }
	#step.step1 .form-table colgroup{ display: none; }
	#step.step1 .form-table tr{ display: flex; flex-wrap: wrap; align-items: center; }
	#step.step1 .form-table tr:not(:last-of-type){ border-bottom: 1px solid #E1E1E1; }
	#step.step1 .form-table th{ width: 200px; }
	#step.step1 .form-table td{ width: calc(100% - 200px); background: #fff; position: relative; }
	#step.step1 .form-table td::after{ content: ""; width: calc(100% + 200px); height: 1px; background: #E1E1E1; position: absolute; bottom: -1px; right: 0; z-index: 10; }
	#step.step1 .form-table tr td:last-of-type::after{ display: none; }
}

@media screen and (max-width: 1000px){
	#step.step1 .form-table table{ border-bottom: 1px solid #E1E1E1; }
	#step.step1 .basic-info .form-table{ flex-direction: column; align-items: center; }

	#step.step1 .basic-info .profile{ padding: 10px 20px; border-bottom: none; }
	#step.step1 .basic-info .profile > p{ margin-top: 10px; } 

	#step.step1 .basic-info table{ width: 100%; border-top: 1px solid #E1E1E1; }
}

@media screen and (max-width: 850px){
	#step.step1 .form-table th{ width: 160px; }
	#step.step1 .form-table td{ width: calc(100% - 160px); }

	#step.step1 .form-table .name .flex{ width: calc((100% - 30px) / 2); }
	#step.step1 .flex-box .flex:not(:last-of-type){ margin-right: 30px; }
	#step.step1 .form-table .address input[type="text"]{ min-height: 50px; }
}

@media screen and (max-width: 650px){
	#step.step1 .form-table tr.name th{ border-top: none; }

	#step.step1 .form-table tr{ border-bottom: none; }
	#step.step1 .form-table th{ width: 100%; }
	#step.step1 .form-table td{ width: 100%; }
	#step.step1 .form-table td::after{ display: none; }
	#step.step1 .form-table .address input[type="text"]{ min-height: 45px; }
}


/* step02 ­*/
#step.step2 form section:first-of-type{ margin-top: 60px; }

/* step03 ­*/
#step.step3 td.flex input{ width: calc(100% - 75px); }

#step.step3 .vertical col{ width: calc(100% / 4); }
#step.step3 .vertical col:nth-of-type(2){ width: 20%; }
#step.step3 .vertical col:nth-of-type(4){ width: 30%; }

#step.step3 .vertical2 col:nth-of-type(1){ width: 25%; }
#step.step3 .vertical2 col:nth-of-type(2){ width: 20%; }

@media screen and (max-width: 1200px){
	#step.step3 td.flex input{ width: calc(100% - 70px); }
}

@media screen and (max-width: 850px){
	#step.step3 td.flex input{ width: calc(100% - 60px); }
}

@media screen and (max-width: 650px){
	#step.step3 td.flex input{ width: calc(100% - 100px); }
}


/* step04 */
#step.step4 .section-title{ flex-direction: column; align-items: flex-start; }
#step.step4 .section-title h5{ margin-bottom: 20px; }
#step.step4 .section-title p{ font-size: 1.6rem; line-height: 1.875; letter-spacing: -0.01em; margin-left: 0; }
#step.step4 .section-title p.red{ color: var(--red); }

@media screen and (max-width: 850px){
	#step.step4 .section-title h5{ margin-bottom: 10px; }
	#step.step4 .section-title p{ font-size: 1.5rem; }
}

/* step05 */
#step.step5 .form-table textarea{ height: 280px; }

@media screen and (max-width: 1000px){
	#step.step5 br{ display: none; }
}

#submit{ padding-bottom: 0; }
#submit .text-box{ text-align: center; }
#submit .text-box h3.page-title{ margin-bottom: 30px; }
#submit .text-box p{ font-size: 2rem; font-weight: 400; color: #222; }
#submit figure{ width: 100%; text-align: center; margin-top: 150px; padding: 0 30px; overflow: hidden; margin-bottom: -5px; }

@media screen and (max-width: 1500px){
	#submit .text-box p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1200px){
	#submit .text-box h3.page-title{ margin-bottom: 15px; }
	#submit figure{ margin-top: 100px; }
}

@media screen and (max-width: 850px){
	#submit .text-box h3.page-title{ margin-bottom: 10px; }
	#submit .text-box p{ font-size: 1.7rem; }
	#submit figure{ margin-top: 70px; }
}

#inquire .border-box{ max-width: 990px; width: 100%; margin: 0 auto; border: 1px solid #CCC; text-align: center; padding: 60px; }
#inquire .border-box h3.page-title{ margin-bottom: 30px; }
#inquire .border-box p{ font-size: 1.8rem; font-weight: 500; color: #222; margin-bottom: 80px; }
#inquire .border-box .button{ margin: 0 auto; }

@media screen and (max-width: 1200px){
	#inquire .border-box h3.page-title{ margin-bottom: 15px; }
	#inquire .border-box p{ margin-bottom: 40px; }
}

@media screen and (max-width: 850px){
	#inquire .border-box{ padding: 40px 30px; }
	#inquire .border-box h3.page-title{ margin-bottom: 10px; }
	#inquire .border-box p{ font-size: 1.7rem; }
}

@media screen and (max-width: 500px){
	#inquire .border-box .button{ width: 140px; }
}

#check .table-list colgroup col:nth-of-type(1){ width: 23%; }
#check .table-list colgroup col:nth-of-type(2){ width: 24%; }
#check .table-list .mark{ display: inline-block; width: fit-content; position: static; background: var(--mainColor); border-radius: 6px; font-size: 1.5rem; font-weight: 500; color: #fff; padding: 15px 10px; margin-left: 20px; }

@media screen and (max-width: 1200px){
	#check .table-list .mark{ padding: 10px; }
}

@media screen and (max-width: 1000px){
	#check .table-list thead tr{ border: none; }
	#check .table-list th, #check .table-list colgroup{ display: none; }
	#check .table-list tr{ display: flex; flex-direction: column; border-top: 1px solid #ddd; border-bottom: none; }
	#check .table-list tr:not(:last-of-type){ margin-bottom: 20px; } 
	#check .table-list td{ width: 100%; display: flex; flex-direction: column; align-items: center; padding-left: 30%; border-bottom: 1px solid #ddd; }
	#check .table-list td::before{ width: 30%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
	#check .table-list td:nth-of-type(1)::before{ content: "---"; }
	#check .table-list td:nth-of-type(2)::before{ content: "ooooo"; }
	#check .table-list td:nth-of-type(3)::before{ content: "eeeee"; }

	#check .table-list .mark{ margin-left: 0; margin-top: 5px; }
}

#Contact .form-table th{ width: 250px; }
#Contact .form-table .hyphen input{ width: 140px; }
#Contact .form-table textarea{ height: 400px; }  
#Contact .max320{ max-width: 320px; }
#Counsel .max320{ max-width: 320px; }
#Contact .form-table button, #Contact .form-table .file label{ display: flex; justify-content: center; align-items: center; width: 200px; height: 65px; border: none; background: #333; font-size: 1.125rem; font-weight: 600; color: #fff; cursor: pointer; }
#Contact .form-table .file{ margin: 0 10px; } 
#Contact .form-table .file input{ display: none; }
#Contact .form-table .file label{ background: var(--mainColor); }
#Counsel .form-table .file label{ background: var(--mainColor); }

@media screen and (max-width: 1200px){
	#Contact .form-table button, #Contact .form-table .file label{ width: 150px; height: 60px; }	
}

@media screen and (max-width: 1000px){
	#Contact .form-table{ overflow: hidden; }
	#Contact .form-table th{ width: 100%; padding: 10px 20px; text-align: left; }
	#Contact .form-table td{ width: 100%; }
}

@media screen and (max-width: 850px){
	#Contact .form-table button, #Contact .form-table .file label{ width: 120px; height: 50px; font-size: 1.125rem; }
}

@media screen and (max-width: 650px){
	#Contact .form-table .hyphen input{ width: calc((100% - 40px) / 3); }

	#Contact .form-table .wrap{ flex-wrap: wrap; }
	#Contact .max320{ max-width: 100%; }
	#Contact .form-table button, #Contact .form-table .file label{ width: 100px; height: 45px; margin-top: 10px; }
	#Contact .form-table .file{ margin-left: 0; }
	.form-table textarea{ padding: 10px; }
}

#Counsel .form-table th{ width: 250px; }
#Counsel .form-table .hyphen input{ width: 140px; }
#Counsel .form-table textarea{ height: 400px; }  
#Counsel .max320{ max-width: 320px; }
#Counsel .form-table button, #Counsel .form-table .file label{ display: flex; justify-content: center; align-items: center; width: 200px; height: 65px; border: none; background: #333; font-size: 1.125rem; font-weight: 600; color: #fff; cursor: pointer; }
#Counsel .form-table .file{ margin: 0 10px; } 
#Counsel .form-table .file input{ display: none; }
#Counsel .form-table .file label{ background: var(--mainColor); }

@media screen and (max-width: 1200px){
	#Counsel .form-table button, #Counsel .form-table .file label{ width: 150px; height: 60px; }	
}

@media screen and (max-width: 1000px){
	#Counsel .form-table{ overflow: hidden; }
	#Counsel .form-table th{ width: 100%; padding: 10px 20px; text-align: left; }
	#Counsel .form-table td{ width: 100%; }
}

@media screen and (max-width: 850px){
	#Counsel .form-table button, #Counsel .form-table .file label{ width: 120px; height: 50px; font-size: 1.125rem; }
}

@media screen and (max-width: 650px){
	#Counsel .form-table .hyphen input{ width: calc((100% - 40px) / 3); }

	#Counsel .form-table .wrap{ flex-wrap: wrap; }
	#Counsel .max320{ max-width: 100%; }
	#Counsel .form-table button, #Counsel .form-table .file label{ width: 100px; height: 45px; margin-top: 10px; }
	#Counsel .form-table .file{ margin-left: 0; }
	.form-table textarea{ padding: 10px; }
}

#template{ max-width: 1300px; width: 100%; margin: 0 auto; font-family: var(--Pretendard); }
#template > div{ padding: 80px 70px; }
#template .flex-box{ display: flex; }

#template .template-tit{ font-size: 4.5rem; font-weight: 700; }  

#template .notice-list li{ font-size: 1.7rem; font-weight: 200; padding-left: 10px; position: relative; line-height: 1.7647; }
#template .notice-list li::before{ content: ""; width: 3px; height: 3px; background: #fff; border-radius: 50%; position: absolute; top: 13px; left: 0; }

#template .template-title{ padding-right: 55px; padding-bottom: 0; color: #111; overflow: hidden; }
#template .template-title .flex-box{ justify-content: space-between; }
#template .template-title .text-box{ width: calc(50% - 100px); }
#template .template-title p{ font-size: 2.8rem; font-weight: 500; margin: 40px 0 20px; }
#template .template-title h4{ font-size: 10rem; font-weight: 700; line-height: 1.2; }
#template .template-title h4 span{ color: var(--mainColor); }
#template .template-title .img-box{ width: 50%; margin-bottom: -4px; }

#template .template-info{ background: var(--mainColor); }
#template .template-info *{ color: #fff; }
#template .template-info table{ border-top: 2px solid #fff; margin-top: 30px; }
#template .template-info table tr{ border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#template .template-info table th, #template .template-info table td{ padding: 30px; }
#template .template-info table th{ width: 160px; font-size: 2.3rem; font-weight: 600; vertical-align: top; }
#template .template-info table td{ font-size: 2rem; font-weight: 500; padding: 30px; }
#template .template-info table td ul li{ position: relative; font-weight: 200; line-height: 2; padding-left: 15px; }
#template .template-info table td ul li::before{ content: ""; width: 3px; height: 3px; background: #fff; border-radius: 50%; position: absolute; top: 18px; left: 0; }
#template .template-info table td dl{ margin-bottom: 75px; }
#template .template-info table td dl dt span{ display: inline-block; font-weight: 600; color: var(--mainColor); padding: 10px 20px; background: #fff; border-radius: 30px; line-height: 1; }
#template .template-info table td dl dt{ margin-bottom: 25px; }
#template .template-info table td dl dd .bold{ display: block; font-weight: 500; }

#template .template-info .condition{ padding-top: 200px; } 
#template .template-info .condition-box{ background: #fff; border-radius: 30px; padding: 90px 40px; padding-bottom: 100px; }
#template .template-info .condition-box *{ color: #111; }
#template .template-info .condition-title{ display: flex; border-bottom: 1px solid #DBDBDB; padding: 0 30px; }
#template .template-info .condition-title h5{ width: 55%; padding-bottom: 90px;  }
#template .template-info .condition-title .img{ width: 45%; position: relative; }
#template .template-info .condition-title .img img{ position: absolute; bottom: 0; left: 0; }
#template .template-info .condition-content ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 85px; margin-bottom: -55px; padding: 0 30px; }
#template .template-info .condition-content ul li{ width: calc((100% - 20px) / 2); display: flex; justify-content: space-between; align-items: center; margin-bottom: 55px; }
#template .template-info .condition-content ul li .icon{ width: 110px; height: 110px; display: flex; justify-content: center; align-items: center; background: #f3f3f3; border-radius: 50%; }
#template .template-info .condition-content ul li dl{ width: calc(100% - 135px); }
#template .template-info .condition-content ul li dl dt{ font-size: 2.3rem; font-weight: 600; margin-bottom: 10px; }
#template .template-info .condition-content ul li dl dd{ font-size: 2rem; font-weight: 300; color: #333; }
#template .template-info .condition-content ul li dl dd *{ line-height: 1.5; }
#template .template-info .condition-content ul li dl dd strong{ display: inline-block; width: 100%; font-weight: 500; }
#template .template-info .condition-content ul li dl dd .red{ color: var(--red); }
#template .template-info .condition .notice-list{ margin-top: 30px; }

#template .template-schedule{ background: #202020; color: #fff; }
#template .template-schedule .schedule-list{ margin-top: 45px; }
#template .template-schedule .schedule-list ul{ display: flex; flex-wrap: wrap; margin-bottom: -38px; }
#template .template-schedule .schedule-list ul li{ width: calc((100% - 190px) / 6); margin-right: 38px; margin-bottom: 38px; background: #fff; border: 4px solid #fff; border-radius: 50%; padding-bottom: calc((100% - 238px) / 6); position: relative; }
#template .template-schedule .schedule-list ul li::before{ content: ""; width: 20px; height: 1px; background: #fff; position: absolute; top: 50%; right: -20px; transform: transalteY(-50%); }
#template .template-schedule .schedule-list ul li::after{ content: ""; width: 5px; height: 5px; background: #fff; border-radius: 50%; position: absolute; top: 50%; right: -25px; transform: translateY(-50%); }
#template .template-schedule .schedule-list ul li:last-of-type{ margin-right: 0; }
#template .template-schedule .schedule-list ul li:last-of-type::before, #template .template-schedule .schedule-list ul li:last-of-type::after{ display: none; }
#template .template-schedule .schedule-list ul li span{ width: 100%; font-size: 2.3rem; font-weight: 700; color: #111; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#template .template-schedule .schedule-list ul li.last{ background: var(--mainColor); border: 4px solid #0BAB95; }
#template .template-schedule .schedule-list ul li.last span{ color: #fff; }

#template .template-schedule .notice-list{ margin: 50px 0 60px; }
#template .template-schedule .notice-list li{ font-size: 2rem; line-height: 1.5; padding-left: 15px; }

#template .template-schedule .schedule-box{ background: #fff; border-radius: 30px; padding: 45px 40px; }
#template .template-schedule .schedule-box h6{ font-size: 3rem; font-weight: 700; color: #111; margin-bottom: 20px; }
#template .template-schedule .schedule-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -20px; }
#template .template-schedule .schedule-box ul li{ width: calc((100% - 40px) / 2); color: #333; padding-left: 45px; position: relative; font-size: 2rem; font-weight: 300; color: #333; margin-bottom: 20px; }
#template .template-schedule .schedule-box ul li:nth-of-type(odd){ margin-right: 40px; }
#template .template-schedule .schedule-box ul li::before{ content: attr(data-num); width: 35px; height: 35px; background: var(--mainColor); border-radius: 50%; position: absolute; top: -5px; left: 0; display: flex; justify-content: center; align-items: center; color: #fff; }
#template .template-schedule .schedule-box ul li a{ text-decoration: underline; text-decoration-thickness: from-font; }

#template .template-guide{ color: #111; }
#template .template-guide ul{ margin-top: 50px; }
#template .template-guide ul li{ display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 20px; padding: 40px 30px; }
#template .template-guide ul li:not(:last-of-type){ margin-bottom: 15px; }
#template .template-guide ul li .title{ width: 145px; display: flex; flex-direction: column; align-items: center; }
#template .template-guide ul li .title span{ display: inline-block; font-size: 2.3rem; font-weight: 600; text-align: center; margin-top: 20px; }
#template .template-guide ul li .content{ width: calc(100% - 220px); }
#template .template-guide ul li .content p{ font-size: 2rem; font-weight: 300; line-height: 1.5; }

@media screen and (max-width: 1500px){
	#template .template-tit{ font-size: 3.5rem; }

	#template .template-title h4{ font-size: 7.5rem; }
	#template .template-title p{ font-size: 2.3rem; }

	#template .template-info table th{ font-size: 2rem; }
	#template .template-info table td{ font-size: 1.8rem;}

	#template .template-info .condition-content ul{ margin-top: 60px; }
	#template .template-info .condition-content ul li .icon{ width: 90px; height: 90px; }
	#template .template-info .condition-content ul li dl{ width: calc(100% - 115px); }
	#template .template-info .condition-content ul li dl dt{ font-size: 2rem; }
	#template .template-info .condition-content ul li dl dd{ font-size: 1.8rem; }

	#template .template-schedule .schedule-list ul li span{ font-size: 1.8rem; }
	#template .template-schedule .notice-list li{ font-size: 1.8rem; }
	#template .template-schedule .schedule-box h6{ font-size: 2.5rem; }
	#template .template-schedule .schedule-box ul{ flex-direction: column; }  
	#template .template-schedule .schedule-box ul li{ width: 100%; font-size: 1.8rem; }

	#template .template-guide ul li .title span{ font-size: 2rem; }
	#template .template-guide ul li .content p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1360px){
	#template .template-guide ul li .content p br{ display: none; }
}

@media screen and (max-width: 1200px){
	#template > div{ padding: 40px 50px; }
	#template .template-tit{ font-size: 2.8rem; } 

	#template .template-title p{ font-size: 2rem; }

	#template .template-guide p{ font-size: 4rem;}

	#template .template-info .condition-box{ padding: 60px 25px; }
	#template .template-info table th{ font-size: 1.8rem; }
	#template .template-info table td{ font-size: 1.7rem; }
	#template .template-info table td dl{ margin-bottom: 40px; }
	#template .template-info table td dl dt{ margin-bottom: 15px; }
	#template .template-info table td dl dt span{ padding: 10px 12px; }
	
	#template .template-info .condition{ padding-top: 180px; }
	#template .template-info .condition-title{ padding: 0 15px; }
	#template .template-info .condition-title h5{ padding-bottom: 45px; }
	#template .template-info .condition-content ul{ padding: 0 15px; margin-top: 35px; }
	#template .template-info .condition-content ul li dl dt{ font-size: 1.8rem; }
	#template .template-info .condition-content ul li dl dd{ font-size: 1.7rem; }
	#template .template-info .condition .notice-list{ margin-top: 15px; }

	#template .template-schedule .schedule-box{ padding: 25px 30px 30px; }
	#template .template-schedule .schedule-box ul li{ font-size: 1.7rem; }
	#template .template-schedule .schedule-box ul li::before{ width: 30px; height: 30px; top: -3px; font-size: 1.5rem; }
	#template .template-schedule .schedule-list{ margin-top: 15px; }
	#template .template-schedule .notice-list{ margin: 20px 0 40px; }
	#template .template-schedule .notice-list li{ font-size: 1.7rem; } 

	#template .template-guide ul li{ padding: 30px 20px; }
	#template .template-guide ul li .title span{ font-size: 1.8rem; }
	#template .template-guide ul li .content p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1000px){
	#template .template-title h4{ font-size: 6rem; }

	#template .template-info table th{ width: 120px; }

	#template .template-info .condition{ padding-top: 140px; }
	#template .template-info .condition-content ul li{ flex-direction: column; justify-content: flex-start; }
	#template .template-info .condition-content ul li dl{ width: 100%; text-align: center; margin-top: 15px; } 

	#template .template-schedule .schedule-list ul{ justify-content: center; }
	#template .template-schedule .schedule-list ul li{ width: calc((100% - 76px) / 3); padding-bottom: calc((100% - 100px) / 3); }
	#template .template-schedule .schedule-list ul li:nth-of-type(3n){ margin-right: 0; }
	#template .template-schedule .schedule-list ul li:nth-of-type(3n)::before, #template .template-schedule .schedule-list ul li:nth-of-type(3n)::after{ display: none; }

	#template .template-guide ul{ margin-top: 25px; }
}

@media screen and (max-width: 920px){
	#template .template-title{ padding-right: 50px; }
	#template .template-title .flex-box{ flex-direction: column; align-items: flex-end; }
	#template .template-title .text-box{ width: 100%; }
	#template .template-title .img-box{ width: 60%; margin-top: -15%; }
}

@media screen and (max-width: 850px){
	#template > div{ padding: 30px 25px; }
	#template .template-tit{ font-size: 2.3rem; }

	#template .template-title{ padding-right: 25px; }
	#template .template-title h4{ font-size: 4.8rem; }
	#template .template-title p{ margin: 20px 0 5px; }

	#template .template-info table{ margin-top: 15px; }
	#template .template-info table th{ width: 100px; }
	#template .template-info table th, #template .template-info table td{ padding: 20px; }
	#template .template-info table td dl:last-of-type{ margin-bottom: 0; }
}

@media screen and (max-width: 755px){
	#template .template-info .condition-title{ flex-direction: column; }
	#template .template-info .condition-title h5{ width: 70%; }
	#template .template-info .condition-title .img{ left: 100%; transform: translateX(-100%); }
}

@media screen and (max-width: 700px){
	#template > div{ padding: 30px 20px; }
	#template .template-info table tr{ display: flex; flex-direction: column; }
	#template .template-info table th{ width: 100%; background: #fff; color: var(--mainColor); text-align: left; padding: 8px 15px; }

	#template .template-guide ul li{ flex-direction: column; padding: 25px 20px 20px; }
	#template .template-guide ul li .content{ width: 100%; margin-top: 15px; }
}

@media screen and (max-width: 650px){
	#template .template-title h4{ font-size: 4rem; }
	#template .template-info .condition{ padding-top: 30px; }
	#template .template-info .condition-box{ padding: 30px 20px; }
	#template .template-info .condition-title{ flex-direction: column; overflow: hidden; }
	#template .template-info .condition-title h5{ width: 100%; padding-bottom: 30px; text-align: center; }
	#template .template-info .condition-title .img{ display: none; }
}

@media screen and (max-width: 600px){
	#template .template-title .img-box{ margin-top: -10%; }
	#template .template-info .condition-content ul{ flex-direction: column; padding: 0; margin-bottom: -30px; }
	#template .template-info .condition-content ul li{ width: 100%; flex-direction: row; justify-content: space-between; margin-bottom: 30px; }
	#template .template-info .condition-content ul li .icon{ width: 80px; height: 80px; }
	#template .template-info .condition-content ul li .icon img{ transform: scale(0.9); }
	#template .template-info .condition-content ul li dl{ width: calc(100% - 100px); text-align: left; margin-top: 0; }
}

@media screen and (max-width: 550px){
	#template .template-schedule .schedule-list ul li{ width: calc((100% - 38px) / 2); padding-bottom: calc((100% - 54px) / 2); }
	#template .template-schedule .schedule-list ul li:nth-of-type(3n){ margin-right: 38px; }
	#template .template-schedule .schedule-list ul li:nth-of-type(3n)::before, #template .template-schedule .schedule-list ul li:nth-of-type(3n)::after{ display: block; }
	#template .template-schedule .schedule-list ul li:nth-of-type(2n){ margin-right: 0; }
	#template .template-schedule .schedule-list ul li:nth-of-type(2n)::before, #template .template-schedule .schedule-list ul li:nth-of-type(2n)::after{ display: none; }
}