@charset "utf-8";

/* HEADER */
 #header-include  {position: absolute; width: 100%; display: block; padding: 16px 0; background: rgba(0, 0, 0, 0.3); z-index: 100;}
 .header          {transition: all, 0.5s; display: block; width: 100%; margin: 0 auto; max-width: 1280px;}
 .header .head    {display: flex; margin: 0 auto; justify-content: space-between; align-items: center;}
 .header h1       {}
 .header h1 a		{display: block; font-size: 0; background: url(../_img/pc/mainLogo.png)no-repeat 50% 50% / 195px; height: 42px; width: 195px;}
 .header .menuLists  {display: flex;}
 .header .menuLists > li   {margin-right: 50px;}
 .header .menuLists > li a {color: #ffffff; position: relative; word-break: keep-all;}
 .header .menuLists > li:last-child  {margin-right: 0;}
 .header .menuLists > li a.active    {font-weight: 600; position: relative;}
 .header .menuLists > li a::after    {content: ""; position: absolute; bottom: -27px; left: 0; display: block; width: 0; height: 2px; opacity: 0; background: #ffffff; transition: width .3s ease-in-out, opacity .1s ease-in-out;}
 .header .menuLists > li a:hover::after {width: 100%; opacity: 1;}
 .header .menuLists > li a.active::after {width: 100%; opacity: 1;}
 .header .sub_gnb    {display: none;}
 .header .all_menu   {opacity: 0; position: fixed; top: 0; display: none;}


/* FOOTER */
 footer          {background: #333;}
 footer .footer  {max-width: 1280px; margin: 0 auto; padding: 50px 0 60px;} 
 footer h1        {font-size: 0; background: url(../_img/pc/mainLogo.png) no-repeat 50% 50% / 195px; width: 195px; display: block; height: 42px;}
 footer h1 + p       {margin-top: 25px;}
 footer .plaintext   {font-size: 15px; font-weight: 300; color: #ffffff; opacity: 0.4;}
 footer .plaintext b {font-weight: 600;}
 footer .copyright   {color: #ffffff; opacity: 0.6; font-weight: 600; margin-top: 17px;}

 .df_footer {margin-top: 150px;}

 
/* TOP */
 #topBtn          {font-family: "Pretendard"; opacity: 0; position: fixed; z-index: 10; right: 40px; bottom: 40px; width: 84px; height: 84px; border-radius: 84px; background: #0F6DCD; color: #ffffff; font-size: 18px; font-weight: 500; padding-top: 16px;}
 #topBtn::before  {content: ''; background: url(../_img/pc/top_arrow.png) no-repeat 50% 50%; width: 23px; height: 14px; top: 20px; right: 31px; position: absolute;}
 #topBtn.active   {opacity: 1; pointer-events: auto;}


@media only screen and (max-width: 1650px)	{

/* FOOTER */
 .df_footer {margin-top: 100px;}
 
}

@media only screen and (max-width: 1400px)	{

/* HEADER */
 #header-include {padding: 11px 0;}
 .header			{max-width: none; padding: 0 20px;}
 .header h1 a		{background: url(../_img/mo/mainLogo.png)no-repeat 50% 50% / 155px; width: 155px;}
 .header .menuLists > li a::after    {bottom: -22px;}    

/* FOOTER */
 footer .footer  {max-width: none; padding: 40px 20px 50px;}
 footer h1       {background: url(../_img/mo/mainLogo.png)no-repeat 50% 50% / 155px; width: 155px;}
 footer .plaintext   {font-size: 14px;}
 footer .copyright   {margin-top: 15px; font-size: 15px;}

/* TOP */
 #topBtn::before  {background: url(../_img/mo/top_arrow.png) no-repeat 50% 50% / 23px; width: 23px; height: 14px; top: 20px; right: 31px; position: absolute;}


}

@media only screen and (max-width: 1250px)	{
.header .menuLists > li		{margin-right: 30px;}
.header .menuLists > li a	{font-size: 16px;}

/* FOOTER */
 .df_footer {margin-top: 80px;}

}

@media only screen and (max-width: 1000px)	{

/* HEADER */
 .header ul.menuLists    {display: none;}
 .header .sub_gnb								{display: flex; align-items: center; justify-content: end;}
 .header .sub_gnb button							{position: relative; width: 24px; height: 20px; border: none; background: none; cursor: pointer; z-index: 10;}
 .header .sub_gnb button span					{position: absolute; width: 24px; height: 2px; background: #FFFFFF; display: block; right: 0; transition: all .2s;}
 .header .sub_gnb button span:nth-child(1)		{top: 0;}
 .header .sub_gnb button span:nth-child(2)		{width: 16px; background: #FFFFFF; top: 50%; transform: translateY(-50%);}
 .header .sub_gnb button:hover span:nth-child(2)	{width: 24px;}
 .header .sub_gnb button span:nth-child(3)		{bottom: 0;}

 .header .sub_gnb.active button span:nth-child(1)	{transform: rotate(45deg); top: 10px;}
 .header .sub_gnb.active button span:nth-child(2)	{opacity: 0;}
 .header .sub_gnb.active button span:nth-child(3)	{transform: rotate(-45deg); bottom: 8px;}

 .header .all_menu {display: block; position: fixed; right: -100%; opacity: 0; top: 64px; width: 100%; box-shadow: 0px 0px 30px rgb(0 0 0 / 40%); -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 30px rgba(0,0,0,0.1); -ms-box-shadow: 0 0 30px rgba(0,0,0,0.1); transition: all .3s;}
 .header .all_menu.active {right: 0; opacity: 1;}
 .header .all_menu.active .a_1dep li {background: #fff; border-bottom: 1px solid #ddd;}
 .header .all_menu.active .a_1dep li:last-child  {border-bottom: none;}
 .header .all_menu.active .a_1dep li a       {color: #000; padding: 18px 20px; display: block; width: 100%; font-size: 18px; font-weight: 600;}
 .header .all_menu.active .a_1dep li a:hover {color: #0F6DCD;}

 #header-include.active    {position: fixed; background: linear-gradient(90deg, #176CE3 0%, #9F4DFB 100%);}
}

@media only screen and (max-width: 730px) {

/* HEADER */
 .header h1 a  {background: url(../_img/mo/mainLogo.png)no-repeat 50% 50% / 135px; width: 135px;}

/* FOOTER */
 footer h1       {background: url(../_img/mo/mainLogo.png)no-repeat 50% 50% / 135px; width: 135px;}
 footer h1 + p   {margin-top: 15px;}

}


@media only screen and (max-width: 540px) {

/* HEADER */
 .header h1 a  {background: url(../_img/mo/mainLogo.png)no-repeat 50% 50% / 125px; width: 125px;}
 .header .all_menu.active .a_1dep li a   {font-size: 15px;}

/* TOP */
 #topBtn {width: 64px; height: 64px; font-size: 15px; right: 20px; bottom: 20px;}
 #topBtn::before   {background: url(../_img/mo/top_arrow.png) no-repeat 50% 50% / 19px; top: 15px; right: 21px;}

/* FOOTER */
 .df_footer {margin-top: 50px;}

}

@media only screen and (max-width: 400px) {

/*iPhone Size */

/* HEADER */

}