/* other_area */
#other_area { z-index: 5;}
#other_area .title_box {padding-top: 20px;}
#other_area .title_box h2 {padding: 0 0 10px 0;line-height: 170%;margin-bottom: 10px;color: var(--secondary);font-weight: 500;font-size: 26px;letter-spacing: 0.5px;position: relative;text-align: center;}

#other_area .title_box font:last-child {margin-left: 0;color: #959595;text-transform: uppercase;text-align: center;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: 60%;bottom: 0px;background: #ffffff00;position: relative;font-family: 'Cabin Sketch', cursive;}
#other_area #custom_box >ul {padding: 30px 0px 0;justify-content: center;display: grid;grid-template-columns: 1fr;gap: 0 20px;}
#other_area #custom_box >ul li.ssbox {margin: 30px 20px;position: relative;border: 1px rgba(var(--info-rgb), .1) solid;padding: 20px 10px;}
#other_area #custom_box >ul::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;z-index: -2;}
#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: 21px;font-weight: 200;letter-spacing: 0;color: #ffffff;background-color: #0d385d;padding: 4px 15px;position: absolute;top: -10px;right: -10px;z-index: 20;}
#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;z-index: -1;}
#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;z-index: 10;position: relative;}
#other_area #custom_box >ul li.ssbox img { width: 70px;margin: auto;}
#other_area #custom_box >ul h3 {font-weight: 400;font-size: 20px;text-align: center;line-height: 140%;position: relative;color: var(--secondary);font-family: 'Lato', sans-serif;letter-spacing: 1px;margin-bottom: 10px;padding-bottom: 5px;}
#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: 0.5px;line-height: 190%;font-weight: 400;font-size: 20px;text-align: center;color: var(--info);display: grid;grid-template-columns: 1fr;gap: 5px 20px;}
#other_area #custom_box >ul article a{
    display: flex;
    width: 180px;
    height: 50px;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: #3a3a3a;
    text-align: center;
    background-color: #eaeaea;
    justify-content: center;
    align-items: center;
}
#other_area #custom_box >ul article a:hover{ color:#fff;background-color:var(--primary)}

#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 .subnum {
    font-size: 22px;
}

.txtbox .text .subtitle {
    color: var(--secondary);
    margin-bottom: 10px;
    font-size: 20px;
    margin-top: 20px;
    letter-spacing: 1px;
}
.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 {
    width: 80%;
}
	#other_area #custom_box >ul li .sslishTxt {padding: 40px 20px 20px;}
	#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{margin: 20px 0px;}
}

@media screen and (max-width: 768px) { 
	#other_area #custom_box {bottom: 0;margin: 10px auto 30px;width: 100%;}
	#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 {position: relative;border: 1px rgba(var(--info-rgb), .1) solid;padding: 10px 10px;}
	.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%;}
}