/* other_area */
#other_area { z-index: 5;}
#other_area .title_box { margin-bottom: 40px;padding-top: 0px;}
#other_area .title_box font:last-child { margin-left: 0;color: #959595;font-family: 'Lato', sans-serif;text-transform: uppercase;text-align: center;margin-bottom: 10px;letter-spacing: 3px;}
#other_area .title_box .page_title::before { display: none;}
#other_area .title_box p{ text-align: center;}
#other_area .title_box .page_title,.txtbox h2 { padding-left: 0;line-height: 140%;text-align: center;font-size: 28px;font-weight: 400;letter-spacing: 5px;}
#other_area .bg_fix { background: no-repeat 50% / cover;background-attachment: fixed;}
#other_area #youtube_box { padding: 5vw 0 0;width: calc(100% - 430px);}
#other_area #playYoutu { background: rgba(var(--primary-rgb), .6);display: block;text-align: center;line-height: 97px;}
#other_area #playYoutu i { font-size: 37px;color: var(--white);}
#other_area #custom_box { margin: 0px auto 30px;width: 100%;bottom: 0px;background: #ffffff00;position: relative;font-family: 'Cabin Sketch', cursive;}
#other_area #custom_box >ul { padding: 30px 0px 0;display: flex;justify-content: center;flex-direction: row;flex-wrap: wrap;}
#other_area #custom_box >ul li.ssbox { margin: 20px 20px;position: relative;border: 1px rgba(var(--info-rgb), .1) solid;padding: 10px 10px;width: calc((100% / 3 ) - 80px);}
#other_area #custom_box >ul li .sslishTxt::before { content: "";position: absolute;z-index: -1;left: 50%;margin-left: -0.5px;top: -15px;width: 1px;height: calc(100% + 70px);background-color: #e2e2e2;-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
#other_area #custom_box >ul li.ssbox a.moreTT { position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 10;background-color: #fff0;}
.noBox {display: inline-block;font-size: 24px;font-weight: 400;letter-spacing: .05em;color: #978670;background-color: rgb(246 246 246);padding: 4px 15px;font-family: 'Tenor Sans', sans-serif;position: absolute;top: -10px;right: -10px;z-index: 10;}
#other_area #custom_box >ul li.ssbox::before,#other_area #custom_box >ul li.ssbox::after { position: absolute;top: 4px;right: -4px;bottom: 4px;left: -4px;content: '';opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}
#other_area #custom_box >ul li.ssbox::before { border-top: 1px solid rgb(163 163 163 / 65%);border-bottom: 1px solid rgb(163 163 163 / 65%);-webkit-transform: scale(0,1);transform: scale(0,1);}
#other_area #custom_box >ul li.ssbox::after { border-right: 1px solid rgb(163 163 163 / 65%);border-left: 1px solid rgb(163 163 163 / 65%);-webkit-transform: scale(1,0);transform: scale(1,0);}
#other_area #custom_box >ul li .sslishTxt { display: flex;flex-direction: column;align-items: center;padding: 40px 10px;background-color: #fff;}
#other_area #custom_box >ul li.ssbox img { width: 70px;margin: auto;}
#other_area #custom_box >ul li.ssbox .sslishTxt a { position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 3;background-color: #fff0;}
#other_area #custom_box >ul h3 {margin: 0 0px 0px;padding: 20px 0px 0px 0px;letter-spacing: 0px;font-weight: 400;font-size: 13px;text-align: center;line-height: 140%;position: relative;color: #978670;font-family: 'Lato', sans-serif;}
#other_area #custom_box >ul h3::before { content: "";width: 0px;height: 1px;display: inline-block;background: #191919;position: absolute;left: 50%;top: 100%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#other_area #custom_box >ul article {letter-spacing: 1.5px;line-height: 190%;font-weight: 400;font-size: 20px;text-align: center;color: var(--info);padding: 0 10px;}
#other_area #picture_list { width: calc(100% - 430px);}
#other_area #picture_list img { margin: 15px;}
#other_area .bg_fix:before { display: none;}
.txtbox{ display: flex;align-items: center;}
.txtbox h2{width: 50%;}
.txtbox .text{ text-align: center;font-size: 30px;margin-top: 30px;padding: 0 70px 0 80px;border-left: 1px solid #cccccc;}
.txtbox .text .subtitle{ color: #978670;margin-bottom: 10px;font-size: 22px;margin-top: 20px;letter-spacing: 5px;}
.txtbox .text p{ letter-spacing: 2px;}


@media screen and (max-width: 1440px) { 
	#other_area .bg_fix:before { left: 42.8%;}
}

@media screen and (min-width: 1281px) { 
	#other_area #custom_box >ul li.ssbox:hover h3::before { width: 0;background: #ffffff;}
	#other_area #custom_box >ul li.ssbox:hover::before,#other_area #custom_box >ul li.ssbox:hover::after { opacity: 1;-webkit-transform: scale(1);transform: scale(1);z-index: 5;}
}

@media screen and (max-width: 1280px) { 
	#other_area #custom_box >ul { display: flex;justify-content: center;flex-wrap: wrap;}
	#other_area #custom_box >ul li .sslishTxt { padding: 20px 0px;}
	#other_area #custom_box >ul article { font-size: 16px;}
}

@media screen and (max-width: 1024px) { 
	#other_area #custom_box:before { display: none;}
	#other_area .bg_fix:before { display: none;}
	#other_area .title_box { margin-bottom: 10px;padding-top: 10px;}
	#other_area #custom_box >ul li.ssbox{ width: calc((100% / 2) - 80px);}
}

@media screen and (max-width: 768px) { 
	#other_area #custom_box { bottom: 0;margin: 10px auto 30px;}
	#other_area #picture_list { width: 100%;}
}

@media screen and (max-width: 640px) { 
	#other_area #custom_box { margin: 30px auto;width: 100%;}
	#other_area #custom_box >ul { padding: 0vw 0;}
	#other_area #custom_box >ul li.ssbox { margin: 10px 10px;position: relative;border: 1px rgba(var(--info-rgb), .1) solid;padding: 10px 10px;width: calc((100% / 1) - 80px);}
	.txtbox{ display: flex;flex-direction: column;align-items: center;margin-top: 90px;}
	.txtbox h2 { width: auto;}
	.txtbox .text{ border-left: 0px solid #cccccc;border-top: 1px solid #cccccc;padding: 40px 0  0 0;width: 100%;}
}