@charset "utf-8";





/************************************** header **************************************/

.header-container { position: relative; width: 100%; }
.header-container .header-wrap { width: 1200px; margin: 0 auto; position: relative; padding: 25px 0; }

/* LOGO */
.header-wrap .logo-area { cursor: pointer; float: left; position: relative; padding-top: 5px;}
.header-wrap .logo-area .logo-img { display: inline-block; width: 175px; height: 16px; }
.header-wrap .logo-area .logo-img img { width: 100%; }
.header-wrap .logo-area .logo-univ { position: relative; display: inline-block; width: 120px; padding-left:30px; position: relative; top: -4px;}
.header-wrap .logo-area .logo-univ img { width: 100%; }
.header-wrap .logo-area .logo-univ:after { content: ''; position:absolute; top:4px; left: 15px; width:1px; height: 13px; background:#bbb;}

/* GNB - PC */
.header-wrap .gnb-area .nav-pc {  float: right; }
.header-wrap .gnb-area .nav-pc > ul { text-align: center; }
.header-wrap .gnb-area .nav-pc > ul > li { display: inline-block; position: relative; }
.header-wrap .gnb-area .nav-pc > ul > li > a { font-size: 1.3rem; padding: 6px 13px; color: #6a6a6a; border-radius: 5px; display: block;}
.header-wrap .gnb-area .nav-pc > ul > li:hover a { background: #f4f4f4;}
.header-wrap .gnb-area .nav-pc > ul > li.login { position: relative; }
.header-wrap .gnb-area .nav-pc > ul > li.login a { margin-left: 30px; }
.header-wrap .gnb-area .nav-pc > ul > li.login:after { content: ''; position:absolute; top:8px; left: 12px; width:1px; height: 13px; background:#bbb;}


/* GNB - Mobile */
.header-wrap .gnb-area .nav-mo { display: none; position: fixed; top: 68px; left: 0; width: 100%; height: calc(100% - 68px); overflow-y: auto; text-align: center; z-index: 90; background-color: #1a254c; }
.header-wrap .gnb-area .nav-mo > ul { overflow-y: auto; padding: 30px; }
.header-wrap .gnb-area .nav-mo > ul > li { border: 1px solid rgba(255,255,255,0.5); float:left; width: 50%; }
.header-wrap .gnb-area .nav-mo > ul > li a { padding: 20px; color: #fff; display: block; }
.header-wrap .gnb-area .nav-mo > ul > li.login { width:100%; margin-top: 10px; border: 0;}
.header-wrap .gnb-area .nav-mo > ul > li.login a { background:#fff; color:#000; padding: 15px 0; font-weight: 600; font-size: 1.3rem; }
.hamburger { display: none; width:23px; height: 22px; cursor: pointer; position: absolute; top: 20px; right: 20px }
.hamburger .bar:nth-child(1).close-1 { transform: rotate(45deg); transform-origin: center; margin-top:15px; background: #0b163d}
.hamburger .bar:nth-child(2).close-2 { transform:scale(0); background: #0b163d}
.hamburger .bar:nth-child(3).close-3 { transform: rotate(-45deg); transform-origin: center; margin-top: -8px; background: #0b163d}
.hamburger .bar { transition-duration: 0.2s; width: 20px; height: 1px; background: #0b163d; margin-top: 6px; }


@media (max-width: 1200px) {
    .header-container .header-wrap { width: 100%; padding: 20px 30px; }
}
@media (max-width:768px) {
	.header-wrap .logo-area { padding-top: 7px; }
	.header-wrap .logo-area .logo-img { width: 135px; height: 19px;}
	.header-wrap .gnb-area .nav-pc > ul > li > a { font-size: 1.2rem; padding: 6px 10px; }
}
@media (max-width: 600px) {
    .header-wrap .gnb-area .nav-pc { display: none; }
    .header-wrap.m-on .gnb-area .nav-mo { display: block; }
    .hamburger { display: block; }
}
@media (max-width: 500px) {
	.header-wrap .logo-area .logo-img { width: 125px; height: 16px;}
    .header-wrap .logo-area .logo-univ { width: 110px; height:19px; }
}

/************************************** footer **************************************/
.footer-container .footer { text-align: center; padding: 50px 20px;}
.footer-container .footer .tomato-logo { width:190px; height: 27px; }
.footer-container .footer .copyright { font-weight: 300; color: #a6a6a6; font-size: 1.2rem; padding-top: 15px;}

@media(max-width: 560px) {
    .footer-container .footer .tomato-logo { width: 135px; height: 20px; }
}

/************************************** content-width **************************************/

/* 섹션 컨테이너 */
.sec-width {width:1200px; margin:0 auto; position: relative; padding: 50px 0;}

@media(max-width:1200px) {
    .sec-width {width:100%; padding: 30px;}
}
@media(max-width: 500px) {
	.sec-width { padding: 20px; }
}