@charset "UTF-8";

.bgBox {width: 100%; height:100%; position: fixed; top: 0; left: 0; background: url('../../../../images/upa/com/shipBg.jpg') no-repeat center / cover; background-color: rgba(0,0,0,0.1);}

.linkBoxWrap { /* max-width: 1685px; */ margin: 0 auto; display: flex;align-items: center; justify-content: center; margin: 0 auto; height: 100vh; gap: 20px; box-sizing: border-box;} 
.linkBoxWrap>button {position: absolute; left: 12px; bottom: 0; width: 1240px; z-index: 10; border: 1px solid #ddd; }

.linkBox {background-color: rgba(256,256,256,0.8); padding: 20px; text-align: center; width: 400px; min-width:320px; min-height:740px; justify-content: flex-start; transition: all .2s; cursor: pointer; box-sizing: border-box;}
.linkBox > p {font-size: 2rem}
.linkBox > img {height: 170px; margin: 30px 0px }
.linkBox:hover {transform: translateY(-20px); box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.40)}
.link {width: 100%; margin-top: 20px;}
.link > a {font-size: 1rem; width: 100%; height: 40px; line-height: 40px; padding: 0px 5px; text-align: left; border-bottom: 1px dashed #999; position: relative}
.link > a:after {content: ''; display: block; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #222; border-right: 2px solid #222; transform: translateY(-50%) rotate(45deg); transition: all .2s}
/* .link > a:last-child {border-bottom: none} */
.link > a:hover:after {right: 20px}

.numberVessels {display: flex; justify-content: center;}
.numberVessels > p {margin: 0px 15px}
.numberVessels > p > span:first-child {padding: 5px 10px; display: block; background-color: #FFF; border-radius: 50px; margin-bottom: 5px}

.txt_tlt:before { display: none }

.comingSoon { font-size: .725rem; padding: 5px 10px; margin-left: 5px; position: relative; top: -2px; border-radius: 20px; background-color: #006edb; color: #FFF }
@media all and (max-width:1280px) {
	.linkBoxWrap {
		height:100%;
		overflow-x:scroll;
		padding: 0 2rem;
        justify-content: flex-start;
	}
}
@media all and (max-width:787px) {
	.linkBoxWrap{
		overflow-x:scroll;
		overflow-y:hidden;
		justify-content: flex-start;
		padding:6rem 2rem 2rem;
	}
	.linkBox{
		height:96%;
		min-height: 630px;
	}
	.linkBox:hover {
		transform:initial; 
		box-shadow: initial;
	}
	.linkBox > img{
		height:100px;
		margin:10px 0 20px;
	}
}