@charset "utf-8";
/* ===============================================================
    * Reset 
=============================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;overflow-x: hidden;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a {text-decoration: none; color: inherit;}
img {vertical-align: top;}
input[type="date"] {border: none;}
input[type="text"],input[type="tel"],input[type="email"],input[type="password"],input[type="search"],input[type="date"],
textarea,button {appearance: none;-webkit-appearance: none;outline:none;background: none; border: 1px solid #e0e0e0;}
button {cursor: pointer; border:none; border-radius: 0; padding: 0; margin: 0;}
select {appearance: none;-webkit-appearance: none;outline:none; border: 1px solid #e0e0e0;}
select::-ms-expand {display: none;}
* {box-sizing: border-box;}
a:link {background: none;}
a:visited {background: none;}
a:active {background: none;}

/* ===============================================================
    * Layout & Font & Width & Color
=============================================================== */
html {font-size: 62.5%;}
body {font-family: 'RixGoL', sans-serif; font-size: 16px; line-height: 1; font-weight: normal; color: #000; overflow-x: hidden;}


.font2 {font-family: 'RixGoB', sans-serif;}
.font3 {font-family: 'RixGoL', sans-serif;}
.none-pc {display: none;}
@media (max-width: 820px){
    .none-pc {display: block;}
    .none-mo {display: none;}
}

.intro {width: 100%; height: 100vh; display: flex; justify-content: space-between;}
.intro-box {width: 50%; position: relative;}
.intro-box > a {display: block; width: 100%; height: 100%; position: relative; border: 1vw solid transparent; transition: .3s;}
.intro-wrap {width: 100%; margin: 0 auto; padding-top: 12%; text-align: center;}
.intro-logo {width: 150px; display: flex; justify-content: space-between; align-items: flex-start; margin: 0 auto 3.6vw;}
.intro-logo img{ width: 100%;}
.intro-logo span {position: relative; font-size: 2.6vw; color: #707070;}
.intro-logo span:after {content: ''; position: absolute; width: 100%; height: 3px; background: #e67d30; left: 0; top: 90%;}
.intro-tit {text-align: center; width: 60%; margin: 0 auto;}
.intro-tit p.font2 {font-size: 1.3vw; color: #707070;}
.intro-tit h1 {font-size: 2.6vw; color: #707070; margin: 0.5vw 0 1vw;}
.intro-tit img {width: 100%; object-fit: cover;}
.intro-tit p.enter {width: 13vw; height: 3.1vw; line-height: 3vw; border: 1px solid #e67d30; text-align: center; font-size: 2.08vw; color: #e67d30; margin: 1.5vw auto 4.1vw; transition: .3s;}
.intro-info ul {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.intro-info ul li { font-family: 'RixGoL', sans-serif; font-size: 12px; color: #707070; padding-left: 5px;}
.intro-box > a:hover {border-color: #e67d30;}
.intro-box > a:hover .intro-tit p.enter {background: #e67d30; color: #fff!important;}
.intro-box > a:hover .intro-tit p.font2{color: #e67d30;}
@media (max-width: 820px){
    .intro {height: 100vh; display: block;}
    .intro-box {width: 100%;}
    .intro-box > a {position: relative;}
    .intro-wrap {width: 100%; margin: 0 auto; padding-top: 20px; padding-bottom: 20px;}
    .intro-tong {border-top: 1px solid #e67d30;}
    .intro-logo {width: 120px; height: 50px; margin: 10px auto 20px;}
    .intro-logo img { object-fit: cover;}
    .intro-logo span {font-size: 20px;}
    .intro-tit {width: calc(100% - 30px);}
    .intro-tit p.font2 {font-size: 12px; color: #e67d30;}
    .intro-tit h1 {font-size: 20px; margin: 5px 0 10px;}
    .intro-tit p.enter {width: 93px; height: 25px; line-height: 25px; font-size: 15px; margin: 10px auto 40px; background: #e67d30; color: #fff!important;}
    .intro-info ul {position: static; transform: none; margin-top: 0; width: 100%;}
    .intro-info ul li {font-size: 10px; line-height: 16px;}
}