
.sub_vi {width:100%; height:370px; display:flex; align-items:center; position:relative; top:0; overflow:hidden; word-break: keep-all; }
.sub_vi .img {width:100%; height:100%;  -webkit-animation: fadeOut 4s 1 linear;
  animation: fadeOut 4s 1 linear; position:absolute; left:0; top:0;}
.sub_vi div {position:Relative; z-index:99; width:100%; text-align:center; color:#fff}
.sub_vi  h2 {color:#fff; font-size:3rem; letter-spacing:0px; margin-bottom:5px; margin-top:20px }
.sub_vi  p {  font-size:1.1rem;  }

.rgba_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0,.3);
    display: inline-block;
    z-index: 9;
    content: '';
}


@keyframes fadeOut {
	   0% {transform: scale(1.15);}
  	   100% {transform: scale(1);}
	}




h2.guide {font-size:2.9rem; line-height:1.2; font-weight:700; color:#111; display:block; width:100%; text-align:center; padding:80px 0 65px 0;   letter-spacing:-1px }
h2.guide p {font-size:17.5px; color:#000; margin-bottom:6px; font-weight:400; display:flex; align-items:center;  justify-content:center; letter-spacing:-.5px}
h2.guide p i { font-size:13px;  }
h2.guide p i:nth-child(n+2) { font-size:10px; color:#777; margin:0 6px }
h2.guide p span {color:#e6008b; font-weight:500}


h3.sub_h3 {font-size:1.4em; font-weight:600; color:#111}


.sub_menu {width:100%; }
.sub_menu ul {display:flex; justify-content:center; width:100%;  max-width:1200px; margin:0 auto; box-sizing:border-box;  box-shadow: 0 6px 10px rgb(0 0 0 / 9%); margin-top:-15px;  position:Relative; z-index:99; background-color:#fff}

.sub_menu ul li { width:50%;  border-right:1px solid #ddd; text-align:center; font-size:1.3em; transition: all 0.3s ease-out; }
.sub_menu ul li a {display:inline-block;  width:100%; line-height:60px;  color:#000;  box-sizing:border-box}
.sub_menu ul li.ov  a {   font-weight:500; color:#fff; background:#e6008b;}
 


.sub_con {width:100%; padding:0 5% 100px 5%; box-sizing:border-box; max-width:1400px; margin:0 auto; word-break: keep-all; font-size:16.5px}

ul.gall_list {width:100%; justify-content:space-between;  display:flex; flex-wrap:wrap; margin-top:10px; margin-bottom:50px}
ul.gall_list li {width:100%; margin-bottom:50px; display:flex; align-items:center} 
ul.gall_list li:last-child {margin-bottom:0}
ul.gall_list li img.img {width:43%; border:1px solid #ddd; border-radius:20px}
ul.gall_list li div {width:53%; margin-left:auto}
ul.gall_list li h3 {font-size:1.5em; font-weight:600; line-height:1.3; display:block; margin:15px 0 15px 0}
 
ul.gall_list li p.t1 {font-size:1.05em; font-weight:400; line-height:1.43; color:#11;
    width: 100%; margin-top:15px; display:flex}


ul.gall_list li p.t2 {font-size:1em;  display:flex; flex-wrap:wrap; font-weight:400; background:#f9f9f9; color:#111; box-sizing:border-box; padding:20px; margin-top:20px; }
ul.gall_list li p.t2 b {width:100px; margin:2px 0}
ul.gall_list li p.t2 span {width:calc(100% - 100px); margin:3px 0}
ul.gall_list li a {background-color:#e6008b; color:#fff; padding:0 30px; line-height:45px; display:inline-block; margin-top:15px; border-radius:5px;}
ul.gall_list li a:after {content:'→'; margin-left:5px; font-size:1.2em;  transition: all 0.3s ease-out;}
ul.gall_list li a:hover:after {margin-left:20px}



 @media all and (min-width:900px) {
		ul.gall_list li:nth-child(2n) img {order:2; margin-left:auto}
		ul.gall_list li:nth-child(2n) div {order:1; margin-left:0}
  
}

 @media all and (max-width:1300px) {
		   
		.vi_text h2 {font-size:1.5rem;}
		.vi_text p { font-size:7.5vw }
		.slide_logo li:nth-child(n + 10) {display:none}


}

 @media all and (max-width:900px) {
  
			.sub_con { padding:0 5% 60px 5%; font-size:1rem}

			.sub_vi { height:200px; margin-top:62px }
 			.sub_vi  h2 {  font-size:2rem; letter-spacing:1px; margin-top:0  }
			.sub_vi  p {  font-size:.93rem; line-height:1.3; box-sizing:border-box; width:100%; padding:0 8% }

			h2.guide {font-size:2rem;  padding:50px 0 30px 0; }
			h2.guide p {font-size:15px; }
			h2.guide p i { font-size:12px;}

			h3.sub_h3 {font-size:1.2em; font-weight:600; color:#111}


			.sub_menu ul {margin-top:0; box-shadow:none; border-bottom:1px solid #ddd}
			.sub_menu ul li {   font-size:1.05em;  }
			.sub_menu ul li a { line-height:50px; }

 
			ul.gall_list {margin-bottom:30px;}
			ul.gall_list li {flex-wrap:wrap; border:1px solid #ddd; border-radius:15px; box-sizing:border-box; padding:20px; text-align:left; }
			ul.gall_list li div {width:100%; margin-top:15px; margin-left:auto; }
            ul.gall_list li img.img {border:none; width:70%;  margin:0 auto; }

  			ul.gall_list li h3 {font-size:1.25em; }

			ul.gall_list li p.t1 {font-size:1em; line-height:1.35}
			ul.gall_list li p.t2 {font-size:1em; padding:0; background:none;   border-top:1px solid #ddd; padding-top:15px }
			ul.gall_list li a {width:100%; border-radius:0; text-align:center; box-sizing:border-box }
 
            
}




.about_box {width:100%; box-sizing:border-box;  display:flex; align-items:flex-start}
.about_box .text {width:45%}
.about_box h2 {font-size:1.3em; line-height:1; font-weight:400; letter-spacing:1px; color:#111;}
.about_box h3 {font-size:2.7em; font-weight:500; margin-top:10px; letter-spacing:-2px }
.about_box h3 span {font-weight:800; color:#e6008b }
.about_box p {font-size:1.1em; margin-top:20px; color:#333; line-height:1.5; font-weight:400; }
 
 
.about_box .right_box {width:45%; padding-bottom:35%; margin-left:auto; position:relative;  transition: all 0.3s ease-out; box-sizing:border-box; background-color:#f1f1f1; border-radius:20px; margin-top:40px;  }

.about_box .right_box::after {content:''; width:100%; height:100%;  position:absolute;  bottom:0; background:url('../img/20756400.jpg') no-repeat center;   background-size:cover; transition: all 0.3s ease-out; border-radius:20px;  right:40px; bottom:40px;}
 


.history_img {width:300px; border-radius:10px;  background:url('/common/img/20552496.jpg') no-repeat center; background-size:cover}

.history {width:calc(100% - 350px); margin-left:auto; position:Relative; padding:40px 0 50px 0; display:flex; flex-wrap:wrap}
.history .line {height:100%; width:1px; background-color:#e6008b; display:inline-block; position:absolute; top:0; left:calc(33% + 6px);}
.history > div.h3_div {width:33%; }
.history  h3 {font-size:2.5em; font-weight:600; line-height:1; letter-spacing:0; flex-shrink:0; }
.history  div.h3_div p {font-size:1.1em; margin-top:15px; width:80%; color:#000}


.history > div.box_wrap { width:67%; margin-left:auto; padding-top:10px}
.history > div > div.box {width:100%; }
.history > div > div.box:nth-child(n + 2) {margin-top:40px}


.history > div > div.box p.year {width:100%; position:Relative; margin-bottom:20px; line-height:13px; font-weight:700; font-size:1.8em; flex-shrink:0; color:#e6008b; padding-left:50px; box-sizing:border-box;  letter-spacing:0;  letter-spacing:0; font-weight:600}
 .history > div > div.box p.year:before {width:13px; height:13px; background-color:#e6008b;  box-sizing:border-box;  border-radius:50%; display:inline-block; content:''; position:absolute; left:0; top:0; }  
.history > div > div.box p.year:after { width:13px; height:13px;  content: '';display: block; background-color:#e6008b; opacity:0.2; border-radius: 50%; position: absolute; left:0; top:0px; z-index: -1;  animation: dots 1.5s ease-in-out infinite;  }
 

.history > div > div.box ul {  margin-bottom:-7px; width:calc(100% - 50px); margin-left:50px; position:Relative; padding-bottoM:20px}
.history > div > div.box ul li {display:flex; align-items:center; width:100%;  box-sizing:border-box;   margin-bottom:6px; position:relative;  }
.history > div > div.box ul:after {content:''; width:100%; height:1px ;background-color:#ddd; display:inline-block; position:absolute; left:0; bottom:0}
.history > div > div.box:last-child ul:after {display:none}

li.point_li  {font-weight:600; font-size:1.1em; color:#222}


.organization {width:100%; position:relative; font-size:1em;  }
.organization p.box {width:220px; padding:18px 0;  background-color:#333; color:#fff; text-align:center; font-size:1.3em; font-weight:600; position:relative; margin:0 auto; z-index:99 }
.organization p.box:after {width:calc(100% - 10px); height:calc(100% - 10px); position:absolute; left:5px; top:5px; border:1px solid rgba(255,255,255,.8); content:''; box-sizing:border-box;  }


.organization .flex_box {width:100%; display:flex; margin-top:90px; justify-content:space-between; align-items:flex-start}



.organization dl {width:32%; border-radius:5px; border:2px solid #ddd; background-color:#fff;  padding:15px 0 10px 0; box-sizing:border-box; position:relative; z-index:99}
.organization dl  dt {font-weight:600; width:100%; text-align:center; border-bottom:1px solid #ddd;  font-size:1.2em; padding-bottom:13px; margin-bottom:12px; padding-left:0; padding-right:0 }
.organization dl  dd {width:100%; text-align:left; padding:5px 25px; font-size:1em;  box-sizing:border-box; color:#333;   }
.organization dl  dd ul {margin-left:20px; width:calc(100% - 20px)}
.organization dl  dd ul li {list-style:disc; margin:4px 0 }

 .line-x {width:100%; height:1px; position:absolute; background-color:#d3d3d3; display:inline-block}
.line-y {width:1px; height:100%; position:absolute; background-color:#d3d3d3; display:inline-block}


 

 
 
@keyframes dots {
    0%{
      opacity: 0.5;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(3.5);
    }
}


 

 @media all and (max-width:900px) {

  
			.about_box {flex-wrap:wrap}
			.about_box .text {width:100%; order:2; margin-top:30px; }
			.about_box h2 {font-size:1.1em;  }
			.about_box h3 {font-size:1.7em;  }
			.about_box p {font-size:1em;   }


			.about_box .right_box { width:100%; margin-top:0; order:1;  border-radius:5px;}

			.about_box .right_box::after { border-radius:5px; right:0; bottom:0;}

			.history_img {display:none}

			.history {width:100%; flex-wrap:wrap; padding-top:0 }

			.history .line {left:calc(0% + 6px);}
			.history > div.h3_div {width:100%; box-sizing:border-box; padding-left:50px }
			.history  h3 {font-size:1.8em;  }
 			.history  div.h3_div p {font-size:1em; width:100%; margin-top:10px}


			.history > div.box_wrap { width:100%; margin-top:20px;   padding-top:10px}
			.history > div > div.box:nth-child(n + 2) {margin-top:35px}
			.history > div > div.box p.year  {font-size:1.4em; margin-bottom:15px}
			.history > div > div.box ul  {padding-bottom:15px}



 			.organization p.box {width:200px; font-size:1.2em;   }
			.organization .flex_box {flex-wrap:wrap; margin-top:40px}
			.organization dl {width:100%; padding-top:10px }
			.organization dl:nth-child(n+2) {margin-top:15px}
			.organization dl  dt { font-size:1.2em; padding-bottom:10px; margin-bottom:5px}
			.organization dl  dd { padding:5px 20px; font-size:.97em; }

}




.privacy_check {width:100%;}
 
.privacy_check p.check {width:100%; display:inline-block; background-color:#f9f9f9; text-align:center; padding:10px 0; box-sizing:border-box; font-size:1em; color:#555 }
.privacy_check p.check input {vertical-align:middle;}


.privacy_check pre {font-size:0.95em; line-height:1.5; color:#555; background-color:#fff; border:1px solid #ddd; box-sizing:border-box; padding:10px; width:100%; height:200px; overflow-y:auto; margin-top:10px;  }
.privacy_check div p {width:50%; float:left; background-color:#fff; text-align:left;}


 @media screen and (max-width:900px) {
  .privacy_check pre { height:130px;  }
  .privacy_check p.check { font-size:.9em }

 
}


.business_contact .top_box {display:flex; background-color:#f9f9f9; justify-content:center; padding:15px; font-size:1.1em; /* box-shadow: 0 6px 10px rgb(0 0 0 / 9%); */}
.business_contact .top_box .in_p {display:flex; align-items:Center;   }
.business_contact .top_box .in_p:last-child {margin-left:20px}

 @media screen and (max-width:900px) {
		.business_contact .top_box {  flex-wrap:wrap; font-size:.97em }
		.business_contact .top_box .in_p {display:block;text-align:center; width:100%;   }
		.business_contact .top_box .in_p img {width:110px}
		.business_contact .top_box .in_p b {width:100%; font-size:1.1em; display:block; margin-top:7px}
		.business_contact .top_box .in_p:last-child {margin-left:0; margin-top:5px}

}


.map iframe {height:300px}
.map h3 {font-weight:600; font-size:1.4em; letter-spacing:0; margin-bottom:10px}
.map a {color:#111}
.map a:hover {text-decoration:underline;}
.map a.kakao_link {color:#000; font-weight:500; background-color:#f9e000; display:block; margin-top:10px; border-radius:5px; width:160px; text-align:center; padding:10px 0; font-size:1em}


@media screen and (max-width:900px) {

	.map h3 { font-size:1.2em; }
	.map iframe {height:200px}

}



.privacy{line-height:1.5; word-break:keep-all; font-size:1.05em;}
