@import "reset.css";
@import "/css/font.css";
@import "/css/common/header.css";
@import "/css/common/footer.css";

/* main.css */
#container {
    position: relative;
    width: 100%;
    min-width: 1024px;
}

.main_visual_wrap {
    width: 100%;
    height: 768px;
    background: url(/images/main/bg_main_visual.jpg) no-repeat center 0;
}

.main_visual {
    height: 768px;
    margin: 0 auto;
}

.main_visual>img {
    display: block;
    margin: 0 auto;
    padding-top: 324px;
}

.cont1_wrap {
    position: relative;
    top: -60px;
    padding-top: 60px;
    width: 100%;
    height: 670px;
    background: url(/images/main/bg_about_ube.jpg) no-repeat center bottom;
}

.cont1 {
    width: 1024px;
    margin: 0 auto;
}

.cont2 {
    width: 1024px;
    margin: 0 auto;
}

.cont2:after {
    content: "";
    display: block;
    clear: both;
}

.cont2>img {
    float: left;
}

.cont2>ul {
    float: right;
    width: 710px;
    margin-top: 50px;
}

.cont2>ul>li {
    position: relative;
    float: left;
    margin-left: 22px;
    margin-bottom: 20px;
}

.cont2>ul>li>a>span {
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    font-family: 'AppleSDGothicNeoR', 'Apple SD Gothic Neo','Nanum Gothic', sans-serif;;
}

.cont2>ul>li:first-child>a:hover {
    opacity: 0.7;
}

.cont2>ul>li:first-child>a:hover>span {
    top: 108px;
    left: 50%;
    margin-left: -70px;
    font-size: 20px;
}

.cont2>ul>li:nth-child(2)>a:hover {
    opacity: 0.7;
}

.cont2>ul>li:nth-child(2)>a:hover>span {
    top: 108px;
    left: 50%;
    margin-left: -70px;
    font-size: 20px;
}

.cont2>ul>li:nth-child(3)>a:hover {
    opacity: 0.7;
}

.cont2>ul>li:nth-child(3)>a:hover>span {
    top: 108px;
    left: 50%;
    margin-left: -50px;
    font-size: 20px;
}

.cont2>ul>li:last-child>a:hover {
    opacity: 0.7;
}

.cont2>ul>li:last-child>a:hover>span {
    top: 108px;
    left: 50%;
    margin-left: -50px;
    font-size: 20px;
}

.cont3_wrap {
    width: 100%;
    height: 268px;
    background: url(/images/main/bg_vid_banner.jpg) no-repeat center 0;
}

.cont3 {
    height: 268px;
    margin: 0 auto;
    line-height: 268px;
}

.cont3>div {
    display: block;
    margin: 0 auto;
    padding-top: 55px;
    text-align: center;
}

.cont3>div>img {
    margin-bottom: 25px;
}

.cont3>div>a>img {
    width: 44px;
    height: 44px;
}

.cont4_wrap {
    width: 100%;
    height: 313px;
}

.cont4 {
    padding-top: 55px;
}

.cont4>img {
    display: block;
    margin: 0 auto;
}

.cont5_wrap {
    width: 100%;
    height: 208px;
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
}

.cont5 {
    display: block;
    width: 1024px;
    height: 113px;
    /* padding-top: 38px; */
    margin: 0 auto;

    display: flex; 
    justify-content: space-between;
}

.cont5 a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    overflow: hidden;

}

.link_box {
    display: block;
    width: 488px;
    height: 113px;
    text-indent: -9999px;
    overflow: hidden; 
    cursor: pointer;
}
.cont5 .link_blog {
    background: url(/images/main/img_ube_blog.jpg) no-repeat 0 0;
}
.cont5 .link_cafe {
    background: url(/images/main/img_ube_cafe.jpg) no-repeat 0 0;
}

/* .cont5 a.link_anctour{
		float:right;
		background:url(../images/main/cont5_img2.jpg) no-repeat 0 0;
    } */
    


.popup {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    background: #00000088;
    display: none;
    justify-content: center;
    align-items: center;
}
.popup img {
    max-width: 900px;
    
}
.popup.on {
    display: flex !important;
}