@charset "UTF-8";

/* sub.css
========================================================================== */
/* all css basic */
* { font-size: 10px;} 
a { text-decoration: none; } 
ul { list-style: none; } 
.nav__menu-btn,
.nav__menu-icon { display: none; } 
/* +++++++++++++++++++++++++++++++++++++ */
/* subpage */
img { max-width: 100%; height: auto; } 
.nav { display: flex; justify-content: space-between; max-width: 1400px; z-index: 999; padding: 35px 0; margin: 0 auto; } 
.nav .nav__logo { width: 32%; padding: 0 1%; background-color: #181717; text-align: center; } 

.nav__menu { display: flex; justify-content: center; align-items: center; } 
.nav__menu li { position: relative; padding: 2rem 4rem; font-weight: 600; transition: all ease 0.3s; } 
.nav__menu li a { color: #555; font-size: 2rem; } 
.nav__menu li a::after { position: absolute; bottom: -5px; left: 50%; width: 0; height: 3px; border-radius: 2px; background-color: #222; content: ''; transform: translateX(-50%); transition: all ease 0.3s; } 
.nav__menu li a:hover::after,
.nav__menu li a.active::after { width: 60%; } 
.nav__menu li a:hover,
.nav__menu li a.active { color: #222; } 
.nav .nav__num h4 { color: #26539c; font-weight: 500; font-size: 2rem; } 
.nav .nav__num span { font-size: 3rem; } 

/* mobile checkbox */
input[id='menu-btn__sub'] { display: none; } 

#trending { width: 100%; } 
#trending .text-wrap { display: flex; flex-direction: column; align-items: center; padding: 50px 0 0 0; text-align: center; } 

#trending .text-wrap h6 { color: #888; font-weight: 400; font-size: 2rem; } 
#trending .text-wrap h1 { margin-bottom: 30px; color: #555; font-weight: 400; font-size: 4rem; } 
#trending .text-wrap .lines { width: 100px; height: 0; border: 1px solid #26539c; } 
#trending .text-wrap p { padding-bottom: 40px; color: white; font-weight: 500; font-size: 500px; -webkit-text-stroke: #ccc 1px; } 
/* +++++++++++++++++++++++++++++++++++++ */
/* guide1 */
#guide__01 { display: flex; max-width: 1400px; min-height: 750px; margin: 0 auto; } 
.guide__text-wrap { display: flex; justify-content: center; align-items: center; width: 50%; } 
.guide__text-wrap .guide__text { display: flex; flex-direction: column; } 
.guide__text-wrap .guide__text .guide__line-wrap { position: relative; } 
.guide__text-wrap .guide__text .guide__line { position: absolute; top: 10px; left: 130px; width: 350px; height: 2px; border: 1px solid #eee; } 

.guide__text-wrap .guide__text .guide__line-wrap h5 { margin-bottom: 50px; font-weight: 400; font-size: 2rem; } 
.guide__text-wrap .guide__text .guide__line-wrap h5 span { color: #26539c; font-size: 2rem; } 
.guide__text-wrap .guide__text h1 { color: #333; font-size: 3.5rem; } 
.guide__text-wrap .guide__text h1 span { color: #26539c; font-size: 3.5rem; } 
.guide__text-wrap .guide__text h3 { margin-bottom: 10%; font-weight: 300; font-size: 2rem; } 
.guide__text-wrap .guide__text h4 { position: relative; left: 400px; color: #26539c; font-size: 10rem; font-family: 'Noto Sans Nag Mundari', sans-serif; opacity: 80%; } 

.guide__box { position: relative; width: 50%; } 
.guide__box .box__01 { position: absolute; left: 12%; width: 60rem; height: 50rem; transform: scaleX(-1); } 
.guide__box .box__02 { position: absolute; bottom: 20%; width: 45rem; height: 50rem; background: #000; filter: opacity(85%); } 
.guide__box .box__02 .box__text-wrap { position: absolute; top: 50%; left: 50%; width: 39rem; color: #ccc; transform: translate(-50%, -50%); } 

.guide__box .btn { display: inline-block; width: 11rem; padding: 0.5rem; margin: 1.5rem 1.5rem 1.5rem 0; border: 2px solid lightgray; border-radius: 3px; color: #fff; font-size: 2rem; text-align: center; opacity: 0.8; } 
.guide__box .btn:hover { opacity: 1; } 

.guide__box .box__text-wrap h5 { font-size: 2rem; } 
.guide__box .box__text-wrap h3 { margin-bottom: 25px; color: #ddd; font-size: 2rem; } 
/* img에 직접 속성 추가 대신 박스 하나를 만들면 자동으로 relative안에서 너비가 조정됨 */
.box__img { position: absolute; bottom: 180px; left: 434px; width: 15rem; } 
/* +++++++++++++++++++++++++++++++++++++ */
/* guide2 */
#guide__02 { display: flex; flex-direction: row-reverse; max-width: 1400px; min-height: 750px; margin: 0 auto; } 
#guide__02 .guide__text-wrap .guide__text { align-items: flex-end; } 
#guide__02 .guide__line { top: 10px; left: -380px; } 

#guide__02 .guide__text h4 { left: -390px; } 
#guide__02 .guide__box { display: flex; flex-direction: row-reverse; } 

#guide__02 .box__text-wrap { padding-left: 2rem; } 
#guide__02 .guide__box .box__01 { left: 2%; } 
#guide__02 .box__img { bottom: 200px; left: 113px; } 
/* +++++++++++++++++++++++++++++++++++++ */
/* guide3 */
#guide__03 { display: flex; max-width: 1400px; min-height: 750px; margin: 0 auto; } 
#guide__03 .guide__text h4 { left: 390px; } 

.footer__bg { display: flex; justify-content: center; padding: 40px 0; background: #343539; text-align: center; } 

.footer__wrap { display: flex; flex-direction: column; text-align: center; } 
.footer__wrap img { width: 45rem; } 
.footer__wrap a { color: #fff; font-weight: 700; font-size: 2rem; line-height: 2.6rem; } 
.footer__wrap h3 { color: #fff; font-size: 1.5rem; line-height: 2.6rem; } 

.footer__wrap .footer__text-num { display: flex; justify-content: space-evenly; } 
.footer__wrap .footer__text-num p { padding-top: 10px; color: #fff; font-size: 2rem; line-height: 2.6rem; } 
/* +++++++++++++++++++++++++++++++++++++ */
@media (min-width: 768px) and (max-width: 1399px) {

 .nav .nav__logo { width: 95%; text-align: left; } 

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

 .nav__menu.active { display: flex; flex-direction: column; position: absolute; background-color: #fff; transform: translate(0%, 32%); } 

 .nav__menu li { text-align: center; } 
 .nav__menu li a::after { position: absolute; bottom: 12px; left: 50%; height: 3px; border-radius: 2px; background-color: #222; content: ''; transform: translateX(-50%); transition: all ease 0.3s; } 
 .nav .nav__menu-mobile {position:relative; width: 100px; background-color: #26539c; } 
 
 label[for='menu-btn__sub'] { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30px; height: 20px; } 
 label[for='menu-btn__sub'] span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #eee; cursor: pointer; transition: 0.3s; } 
 label[for='menu-btn__sub'] span:nth-child(1) { top: 0; } 
 label[for='menu-btn__sub'] span:nth-child(2) { top: 50%; } 
 label[for='menu-btn__sub'] span:nth-child(3) { top: 100%; } 
 input[id='menu-btn__sub']:checked + label[for='menu-btn__sub'] span:nth-child(1) { top: 50%; transform: rotate(45deg); } 
 input[id='menu-btn__sub']:checked + label[for='menu-btn__sub'] span:nth-child(2) { opacity: 0; } 
 input[id='menu-btn__sub']:checked + label[for='menu-btn__sub'] span:nth-child(3) { top: 50%; transform: rotate(-45deg); } 

 #trending .text-wrap p { font-size: 243px; } 
 #guide__01,
 #guide__02,
 #guide__03 { flex-direction: column; max-width: 768px; min-height: 1000px; } 
 .guide__text-wrap { display: flex; justify-content: center; align-items: center; width: 100%; } 
 .guide__text-wrap .guide__text { align-items: center; width: 100%; text-align: center; } 
 .guide__text-wrap .guide__text .guide__line-wrap,
 .guide__text-wrap .guide__text h4 { position: inherit; } 
 .guide__text-wrap .guide__text .guide__line-wrap h5,
 .guide__text-wrap .guide__text .guide__line-wrap h5 span { margin-bottom: 0; font-size: 5rem; } 

 .guide__text-wrap .guide__text h1,
 .guide__text-wrap .guide__text h1 span { font-size: 3rem; } 
 .guide__text-wrap .guide__text .guide__line { position: inherit; width: 100%; } 

 .guide__text-wrap .guide__text h3 { margin-bottom: 0; font-size: 3rem; } 

 .guide__box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center; } 
 .guide__box .box__01 { position: inherit; left: 0; } 
 .guide__box .box__02 { bottom: 0; transform: translate(-37%, 20%); } 
 .box__img { position: inherit; bottom: 0; left: 105px; } 
 #guide__02 .guide__box { flex-direction: column; } 
 #guide__02 .guide__text-wrap .guide__text { align-items: center; } 
 #guide__02 .box__text-wrap { padding-left: 0; } 
 #guide__02 .box__img { bottom: 0; left: 105px; } 
 }
@media (max-width: 767px) {
 #trending .text-wrap p { font-size: 100px; } 

 #guide__01,
 #guide__02,
 #guide__03 { flex-direction: column; min-height: 600px; } 
 .guide__text-wrap { display: flex; justify-content: center; align-items: center; width: 100%; } 
 .guide__text-wrap .guide__text { align-items: center; width: 100%; text-align: center; } 
 .guide__text-wrap .guide__text .guide__line-wrap,
 .guide__text-wrap .guide__text h4 { position: inherit; } 
 .guide__text-wrap .guide__text .guide__line-wrap h5,
 .guide__text-wrap .guide__text .guide__line-wrap h5 span { margin-bottom: 0; font-size: 5rem; } 

 .guide__text-wrap .guide__text h1,
 .guide__text-wrap .guide__text h1 span { font-size: 3rem; } 
 .guide__text-wrap .guide__text .guide__line { position: inherit; width: 100%; } 

 .guide__text-wrap .guide__text h3 { margin-bottom: 0; font-size: 3rem; } 

 .guide__box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center; } 
 .guide__box .box__01 { position: inherit; left: 0; } 
 .guide__box .box__02 { bottom: 0; transform: translate(-37%, 20%); } 
 .box__img { position: inherit; bottom: 0; left: 64px; } 
 
 #guide__02 .guide__box { flex-direction: column; } 
 #guide__02 .guide__text-wrap .guide__text { align-items: center; } 
 #guide__02 .box__text-wrap { padding-left: 0; } 
 #guide__02 .box__img { position: inherit; bottom: 0; left: 64px; } 

 .nav .nav__logo { width: 90%; text-align: left; } 

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

 .nav__menu.active { display: flex; flex-direction: column; position: absolute; background-color: #fff; transform: translate(0%, 48%); } 

 .nav__menu li { text-align: center; } 
 .nav__menu li a::after { position: absolute; bottom: 5px; left: 50%; width: 0; height: 2px; border-radius: 2px; background-color: #222; content: ''; transform: translateX(-50%); transition: all ease 0.3s; } 

 .nav .nav__menu-mobile { position:relative; width: 80px; background-color: #26539c; } 
 
 label[for='menu-btn__sub'] { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30px; height: 20px; }  label[for='menu-btn__sub'] span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #eee; cursor: pointer; transition: 0.3s; } 
 label[for='menu-btn__sub'] span:nth-child(1) { top: 0; } 
 label[for='menu-btn__sub'] span:nth-child(2) { top: 50%; } 
 label[for='menu-btn__sub'] span:nth-child(3) { top: 100%; } 
 input[id='menu-btn__sub']:checked + label[for='menu-btn__sub'] span:nth-child(1) { top: 50%; transform: rotate(45deg); } 
 input[id='menu-btn__sub']:checked + label[for='menu-btn__sub'] span:nth-child(2) { opacity: 0; } 
 input[id='menu-btn__sub']:checked + label[for='menu-btn__sub'] span:nth-child(3) { top: 50%; transform: rotate(-45deg); } 
 }