@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');
/* 
font-family: 'Montserrat', sans-serif;
font-family: 'SCoreDream';
*/

/* ===============================================================
    * 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: 'SCoreDream'; font-size: 16px; line-height: 1; font-weight: normal; color: #000; overflow-x: hidden;}
:root {
    --color1: #447b90;
    --color2: #ba3470;
}
.font1 {font-family: 'SCoreDream'; }
.font2 {font-family: 'Montserrat', sans-serif; }
.color1{ color: var(--color1)!important;}
.color2{ color: var(--color2)!important;}
.bold{ font-weight: 700;}
.med{ font-weight: 500;}
.re{ font-weight: 400;}
.upp{ text-transform: uppercase;}
.none-pc {display: none;}
.none-mo {display: block;}
.fl{ float: left;}
.fr{ float: right;}
@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: 100%; position: relative;}
.intro-box > a {display: block; width: 100%; height: 100%; position: relative; transition: .3s;}
.intro-wrap {width: 100%; margin: 8% auto 0;  text-align: center; border-left: 1px solid rgba(34,34,34,.1);}
.intro-logo {width: 80%;  margin: 0 auto 2.6vw; text-align: right; overflow: hidden; display: flex; justify-content: space-between; align-items: center;}
.intro-logo span {position: relative; font-size: 1.46vw; color: #222; }
.intro-logo span .name{ font-size: 0.94vw;}
.intro-logo .tit{ position: relative; text-align: left;}
.intro-logo .tit h1{ font-size: 2.92vw; color: #262525; }
.intro-tit {text-align: center; width: 80%; margin: 0 auto;}
.intro-tit .img-wrap{width: 100%; height: 400px; position: relative; background-color: #000; margin-bottom: 2.60vw;}
.intro-tit .img-wrap:after{ content: ''; width: 19.79vw; height: 5px; position: absolute; display: block; right: 0; top: -5px;}
.intro-01 .intro-tit .img-wrap:after{ background-color: var(--color1);}
.intro-02 .intro-tit .img-wrap:after{ background-color: var(--color2);}
.intro-tit .img-wrap .img{ position: absolute; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 1; transition: .5s;}
.intro-tit .img-wrap .logo{ position: absolute; width: 112px; object-fit: cover; right: 25px; bottom: 50px;}
.intro-02 .intro-tit .img-wrap .logo{ width: 162px;}
.intro-info{ border-bottom: 1px solid rgba(34,34,34,.1);}
.intro-info ul {display: block; padding-bottom: 2.60vw;}
.intro-info ul li { display: inline-block; font-size: 14px; color: #777; padding-left: 5px; line-height: 28px;}
.intro-tit .enter{width: 100%; height: 50px; line-height: 50px; background-color: #393939; overflow: hidden; padding: 0 20px; margin-top: 2.60vw; transition: .5s; color: #dedede;}
.intro-tit .enter p{ transition: .5s; font-size: 20px;}
.intro-tit .enter i{ line-height: 50px; font-size: 24px;}

span.none-mo{ display: inline-block;}

.intro-box > a:hover .intro-tit .img-wrap .img{ opacity: .4;}
.intro-box.intro-01 > a:hover .intro-tit .enter{ background: var(--color1);}
.intro-box.intro-02 > a:hover .intro-tit .enter{ background: var(--color2);}
.intro-box > a:hover .intro-tit .enter p{letter-spacing: 0.3em;}

@media (max-width: 820px){
    .intro {height: 100vh; display: block; margin-top: 50%;}
    .intro-box {width: 100%;}
    .intro-box > a {position: relative; }
    
    .intro-wrap {width: 100%; margin: 0 auto; padding-top: 8.00vw; padding-bottom: 0; border-left: unset;}
    .intro-logo {width: calc(100% - 30px); margin: 0 auto 8.00vw;}
    .intro-logo span {font-size: 5.33vw; }
    .intro-logo span .name{ font-size: 3.73vw;}
    .intro-logo .tit{ position: relative; text-align: left; }
    .intro-logo .tit h1{ font-size: 9.33vw; }
    .intro-tit .img-wrap{ height: 45.07vw; margin-bottom: 6.67vw;}
    .intro-tit .img-wrap:after{ width: 46.00vw; height: 3px; top: -3px;}
    .intro-tit .img-wrap .logo{ width: 15.73vw; object-fit: cover; right: 4.00vw; bottom: 4.00vw;}
    .intro-02 .intro-tit .img-wrap .logo{ width: 28.93vw;}
    .intro-tit {width: calc(100% - 30px); padding-bottom: 8.00vw;}
    .intro-info { border-bottom: unset;}
    .intro-info ul {position: static; transform: none; margin-top: 0; width: 100%; padding-bottom: 7.33vw;}
    .intro-info ul li {font-size: 3.20vw; line-height: 6.40vw; padding-left: 0;}
    .intro-tit .enter{width: 100%; height: 8.00vw; line-height: 8.00vw; border: 1px solid #393939; background-color: #393939; overflow: hidden; padding: 0 15px; margin-top: 0; transition: .5s; color: #fff; }
    .intro-tit .enter p{ transition: .5s; font-size: 3.73vw; letter-spacing: 0;}
    .intro-tit .enter i{ line-height: 8.00vw; font-size: 4.00vw;}
    span.none-mo{ display: none;}
    span.none-pc{ display: inline-block;}

    .intro-box.intro-01 .intro-tit{ border-bottom: 1px solid rgba(34,34,34,.1);}
}