@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html { line-height: 1.15; /* 1 */
 -webkit-text-size-adjust: 100%; /* 2 */}

/* Sections
 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body { margin: 0; } 

/**
 * Render the `main` element consistently in IE.
 */

main { display: block; } 

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 { font-size: 2em; margin: 0.67em 0; } 

/* Grouping content
 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr { box-sizing: content-box; /* 1 */
 height: 0; /* 1 */
 overflow: visible; /* 2 */}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre { font-family: monospace, monospace; /* 1 */
 font-size: 1em; /* 2 */}

/* Text-level semantics
 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a { background-color: transparent; } 

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] { border-bottom: none; /* 1 */
 text-decoration: underline; /* 2 */
 text-decoration: underline dotted; /* 2 */}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong { font-weight: bolder; } 

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp { font-family: monospace, monospace; /* 1 */
 font-size: 1em; /* 2 */}

/**
 * Add the correct font size in all browsers.
 */

small { font-size: 80%; } 

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 

sub { bottom: -0.25em; } 

sup { top: -0.5em; } 

/* Embedded content
 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img { border-style: none; } 

/* Forms
 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea { font-family: inherit; /* 1 */
 font-size: 100%; /* 1 */
 line-height: 1.15; /* 1 */
 margin: 0; /* 2 */}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
 overflow: visible; } 

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
 text-transform: none; } 

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] { -webkit-appearance: button; } 

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } 

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } 

/**
 * Correct the padding in Firefox.
 */

fieldset { padding: 0.35em 0.75em 0.625em; } 

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */

legend { box-sizing: border-box; /* 1 */
 color: inherit; /* 2 */
 display: table; /* 1 */
 max-width: 100%; /* 1 */
 padding: 0; /* 3 */
 white-space: normal; /* 1 */}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress { vertical-align: baseline; } 

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea { overflow: auto; } 

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type='checkbox'],
[type='radio'] { box-sizing: border-box; /* 1 */
 padding: 0; /* 2 */}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button { height: auto; } 

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] { -webkit-appearance: textfield; /* 1 */
 outline-offset: -2px; /* 2 */}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration { -webkit-appearance: none; } 

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */
 font: inherit; /* 2 */}

/* Interactive
 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details { display: block; } 

/*
 * Add the correct display in all browsers.
 */

summary { display: list-item; } 

/* Misc
 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template { display: none; } 

/**
 * Add the correct display in IE 10.
 */

[hidden] { display: none; }


/*main css*/
* { box-sizing: border-box; font-family: Poppins, sans-serif; font-size: 15px; margin: 0; padding: 0; } 

a { font-size: 1.1rem; text-decoration: none; } 

ul { list-style: none; } 

.navbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; } 

.navbar__logo img { width: 27rem; } 

.menu { display: flex; } 

.menu li { padding: 8px 12px; } 

.menu li a { position: relative; font-size: 1.4rem; font-weight: 550; color: #eee; transition: all ease 0.3s; padding: 1.875rem; } 

.menu li a::after { content: ''; position: absolute; left: 50%; bottom: 0.94rem; transform: translateX(-50%); border-bottom: 3px solid #fff; width: 0; transition: all ease 0.3s; } 

.menu li a:hover { color: #fff; } 

.menu li a:hover::after { width: 70%; } 

#main-visual { position: relative; } 

#main-visual .bg { height: 66.667rem; display: flex; justify-content: center; align-items: center; } 

#main-visual .img { position: absolute; width: 100%; height: 100%; background-image: url(/_res/majorinfo/img/visual.jpg); background-repeat: no-repeat; background-size: cover; filter: brightness(50%); z-index: -1; } 

#main-visual .text-wrap { position: absolute; display: flex; flex-direction: column; color: #eee; font-weight: 500; text-align: center; } 

#main-visual .text-wrap .text-item h1 { font-size: 3.8rem; letter-spacing: 0.05em; margin-bottom: 1.563rem; } 

#main-visual .text-wrap .text-item h5 { line-height: 2; letter-spacing: 0.063em; margin-bottom: 6.25rem; } 

#main-visual .text-wrap .text-item__btn p { font-size: 1.1rem; width: 10.9rem; border: 1px solid #979797; margin: 0 auto; padding: 0.75rem 0; } 

#main-visual .text-wrap .text-item__btn p:hover { outline: none; cursor: pointer; background: #eee; color: #000; } 

#main-visual .text-wrap__bottom { position: absolute; bottom: 6.25rem; right: 12%; color: #eee; text-align: right; } 

#main-visual .text-wrap__bottom .text-item h3 { font-size: 1.3rem; } 

#main-visual .text-wrap__bottom .text-item h5 { font-size: 0.9rem; } 

#content { display: flex; height: 66.667rem; } 

#content .box__left { display: flex; flex-direction: column; width: 50%; background: #26539c; } 

#content .box__left .boxs__top { display: flex; justify-content: center; align-items: center; height: 80%; } 

#content .box__left .boxs__top .text-item { display: flex; flex-direction: column; justify-content: center; color: #fff; } 

#content .box__left .boxs__top .text-item h2 { font-size: 3.1rem; font-weight: 500; margin-bottom: 50px; } 

#content .box__left .boxs__top .text-item h4 { font-size: 1.3rem; margin-bottom: 25px; letter-spacing: 0; } 

#content .box__left .boxs__top .text-item h1 { font-size: 2.2rem; font-weight: 600; line-height: 1.5; } 

#content .box__left .boxs__bottom { display: flex; justify-content: right; height: 20%; } 

#content .box__left .boxs__bottom .line-wrap { width: 90%; } 

#content .box__left .boxs__bottom .line-wrap .line { border-top: 1px solid #aaa; } 

#content .box__left .boxs__bottom .text-item { display: flex; align-items: flex-end; } 

#content .box__left .boxs__bottom .text-item h5 { margin-top: 12px; letter-spacing: 10px; font-weight: 300; text-transform: uppercase; color: #ccc; } 

#content .box__left .boxs__bottom .rect__01 { width: 0.5rem; height: 0.5rem; background: #ccc; margin-right: 5px; } 

#content .box__left .boxs__bottom .rect__02 { width: 0.313rem; height: 0.313rem; background: #ccc; } 

#content .box__right { display: flex; flex-direction: column; width: 50%; background: #fff; } 

#content .box__right .boxs__top .boxs__wrap,
#content .box__right .boxs__bottom .boxs__wrap { width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5rem 3.125rem 3.125rem; } 

#content .box__right .boxs__top .boxs__wrap i,
#content .box__right .boxs__bottom .boxs__wrap i { font-size: 1.9rem; color: #222; margin-bottom: 2.5rem; } 

#content .box__right .boxs__top .boxs__wrap .text-item,
#content .box__right .boxs__bottom .boxs__wrap .text-item { text-align: center; } 

#content .box__right .boxs__top .boxs__wrap .text-item h6,
#content .box__right .boxs__bottom .boxs__wrap .text-item h6 { font-weight: 300; font-size: 1.1rem; margin-bottom: 0.313rem; } 

#content .box__right .boxs__top .boxs__wrap .text-item h2,
#content .box__right .boxs__bottom .boxs__wrap .text-item h2 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1.875rem; } 

#content .box__right .boxs__top .boxs__wrap .text-item h5,
#content .box__right .boxs__bottom .boxs__wrap .text-item h5 { font-size: 1.1rem; color: #555; } 

#destination { display: flex; height: 50rem; } 

#destination .box__left { width: 10%; background: #26539c; } 

#destination .bg { position: relative; width: 90%; overflow: hidden; } 

#destination .bg img { width: 100%; min-height: 1250px; transform: translate(0%, -40%); filter: brightness(90%); } 

#destination .bg .text-item { position: absolute; top: 20px; left: 30px; color: #fff; } 

#location { position: relative; height: 66.667rem; width: 100%; display: flex; } 

#location .box__left { display: flex; justify-content: center; width: 50%; background: #fff; } 

#location .box__left .text-item { margin-top: 6.667rem; display: flex; flex-direction: column; } 

#location .box__left .text-item h5 { font-size: 1.3rem; font-weight: 400; color: #ccc; letter-spacing: 2px; margin-bottom: -2.5rem; } 

#location .box__left .text-item h1 { font-size: 5rem; font-weight: 500; letter-spacing: -3px; margin-bottom: -0.63rem; } 

#location .box__left .text-item h4 { margin-top: 10px; color: #555; } 

#location .box__left .text-box { display: flex; flex-direction: row; align-items: baseline; } 

#location .box__left .text-box .rect { margin-left: 10px; transform: translate(0, -20%); } 

#location .box__left .text-box .rect__01 { width: 5px; height: 5px; background: #aaa; margin-bottom: 0.8rem; } 

#location .box__left .text-box .rect__02 { width: 5px; height: 5px; background: #26539c; } 

#location .box__right { width: 50%; height: 100%; background: #26539c; } 

#location .box__right h2 { position: absolute; right: 180px; top: 70px; color: #ccc; font-weight: 300; font-size: 1.1rem; letter-spacing: 5px; } 

#location .box__right .line { position: absolute; right: 189px; top: 100px; width: 1px; height: 8.667rem; background: #aaa; } 

#location .box__center { position: absolute; overflow: hidden; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 75%; height: 55%; background: #fff; border-radius: 30px; } 

#location .box__center img { position: absolute; width: 100%; min-height: 1200px; top: -70px; } 

footer .footer__bg { position: relative; height: 20rem; overflow: hidden; display: flex; justify-content: center; align-items: center; } 

footer .footer__bg .footer__img { position: absolute; max-width: 100%; height: auto; filter: brightness(50%); bottom: 0; } 

footer .footer-wrap { position: absolute; display: flex; flex-direction: column; text-align: center; } 

footer .footer-wrap .footer__logo img { width: 31.25rem; } 

footer .footer-wrap .text-item h3 { line-height: 2.6rem; color: #fff; font-size: 1rem; } 
footer .footer-wrap .text__num {display: flex; justify-content: space-evenly;}
footer .footer-wrap .text__num p { line-height: 2.6rem; color: #fff; font-size: 1.4rem; } 

.menu-btn,
.menu-icon { display: none; } 

#content .box__right .boxs__top,
#content .box__right .boxs__bottom { height: 50%; display: flex; justify-content: center; } 

@media screen and (min-width: 1025px) and (max-width: 1399px) { * { font-size: 12px; } 

 #content .box__right .boxs__top .boxs__wrap,
 #content .box__right .boxs__bottom .boxs__wrap { width: 60%; } 

 #destination .bg img { min-height: 1000px; } 

 #location .box__right h2 { right: 120px; top: 70px; } 

 #location .box__right .line { right: 130px; top: 100px; } 

 #location .box__center { height: 40%; } 

 #location .box__center img { min-height: 750px; } 
 }

@media screen and (min-width: 768px) and (max-width: 1024px) { * { font-size: 9px; } 

 #destination .bg img { min-height: 750px; } 

 #location .box__right h2 { right: 80px; top: 70px; } 

 #location .box__right .line { right: 88px; top: 100px; } 

 #location .box__center { height: 35%; } 

 #location .box__center img { min-height: 550px; } 
 }

@media screen and (max-width: 767px) { * { font-size: 5px; } 

 #main-visual .text-wrap .text-item h5 { margin-bottom: 2.25rem; } 

 #content { flex-direction: column; height: 110rem; } 

 #content .box__left { width: 100%; height: 50%; text-align: center; } 

 #content .box__left .boxs__top { height: 100%; } 

 #content .box__right { width: 100%; height: 50%; } 

 #content .box__left .boxs__bottom .rect__01 { width: 5px; height: 5px; } 

 #content .box__left .boxs__bottom .rect__02 { width: 3px; height: 3px; } 

 #content .box__left .boxs__top .text-item h2 { font-size: 30px; } 

 #content .box__left .boxs__bottom .line-wrap { width: 80%; } 

 #content .box__left .boxs__bottom .text-item h5 { letter-spacing: 9px; } 
 
 #content .box__right .boxs__top .boxs__wrap i,
 #content .box__right .boxs__bottom .boxs__wrap i { font-size: 3rem; } 

 #content .box__right .boxs__top .boxs__wrap .text-item h6,
 #content .box__right .boxs__bottom .boxs__wrap .text-item h6 { font-size: 2rem; } 

 #content .box__right .boxs__top .boxs__wrap .text-item h2,
 #content .box__right .boxs__bottom .boxs__wrap .text-item h2 { font-size: 3rem; } 

 #content .box__right .boxs__top .boxs__wrap .text-item h5,
 #content .box__right .boxs__bottom .boxs__wrap .text-item h5 { font-size: 2.3rem; } 

 #destination .bg { width: 100%; } 

 #destination .bg img { min-height: 430px; } 

 #destination .box__left { width: 0; } 

 #location .box__right h2 { right: 30px; top: 38px; } 

 #location .box__right .line { right: 35px; top: 63px; height: 12.667rem; } 

 #location .box__left .text-box .rect { transform: translate(0, -10%); } 

 #location .box__center { height: 35%; } 

 #location .box__center img { min-height: 400px; } 

  .navbar { flex-direction: column; align-items: flex-start; } 

 .navbar .menu { display: none; flex-direction: column; align-items: center; width: 100%; padding: 8px 24px; } 

 .menu.active { display: flex; } 

 .navbar .menu li { width: 100%; text-align: center; } 

 .navbar__logo img { width: 40rem; } 

 .navbar .menu-icon { display: block; cursor: pointer; position: absolute; right: 18px; user-select: none; padding: 15px 0; } 

 .navbar .menu-icon .nav-icon { background-color: #fff; display: block; position: relative; height: 2px; width: 25px; transition: all ease-out 0.2s; } 

 .navbar .menu-icon .nav-icon::after,
 .navbar .menu-icon .nav-icon::before { background-color: #fff; content: ''; position: absolute; height: 100%; width: 100%; transition: all ease-out 0.2s; } 

 .navbar .menu-icon .nav-icon::after { top: 9px; } 

 .navbar .menu-icon .nav-icon::before { top: -9px; } 

 .navbar .menu-btn:checked ~ .menu-icon .nav-icon::after { top: 0; transform: rotate(45deg); } 

 .navbar .menu-btn:checked ~ .menu-icon .nav-icon::before { top: 0; transform: rotate(-45deg); } 

 .navbar .menu-btn:checked ~ .menu-icon .nav-icon { background-color: transparent; } 

 .navbar .menu-btn:checked ~ .menu { display: block; } 

 #content .box__left .boxs__top .text-item h4,
 #content .box__left .boxs__top .text-item h1 { font-size: 15px; } 

 #location .box__left .text-box .rect__01,
 #location .box__left .text-box .rect__02 { width: 4px; height: 4px; } 
 }