@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */


 .area_visual {padding:220rem 0 180rem; text-align: center; background: url(/images/main/main_visual.jpg) no-repeat center / cover;}
 .area_visual h2 {font-size: 65rem; font-weight: 700; line-height: 1.3; color: #111;}
 .area_visual h2 span {color:#193b86;}
 .area_visual form {position: relative; display:inline-block; margin-top: 50rem;}
 .area_visual input {width:720rem; max-width:100%; height: 85rem; padding:0 100rem 0 40rem; font-size: 20rem; border: 3rem solid #193b86; border-radius: 85rem;}
 .area_visual input::placeholder {color:#666;}
 .area_visual input:focus {outline:none; background-color: #fcfdff;}
 .area_visual form button {position:absolute; right:0; top:50%; width:84rem; height:84rem; border-radius: 100%; background:#193b86 url(/images/main/icon_search.svg) no-repeat center / 25rem; font-size:0; transform:translate(0, -50%) rotate(-45deg);}

/* common */
.area_title {position: relative;}
.area_title h3 {margin-bottom: 18rem; font-size: 30rem; font-weight:800;}
.area_title > p {color:#333;}
a.area_btn {display:inline-block; padding:20rem 40rem; font-size:15rem; font-weight:600; color:#fff; border-radius: 5rem; border:1px solid rgba(255, 255, 255, .2); transition: .3s;}
a.area_btn:hover {border-color: rgba(255, 255, 255, .7); background-color: rgba(255, 255, 255, .05);}

/* area_category */
.area_category {position:relative; background: url(/images/main/category_bg2.jpg);}
.area_category::before {position:absolute; left:0; top:0; content:''; width:20%; height:100%; background: url(/images/main/category_bg.jpg);}
.area_category .flex {display: flex; flex-wrap:wrap;}
.area_category .flex > div {padding:100rem 0;}
.area_category .area_title {flex-basis:40%; color:#fff; background: url(/images/main/category_bg.jpg);}
.area_category .area_title h3 {font-weight:700;}
.area_category .area_title > p {color:#fff; opacity:.6; font-weight:300;}
.area_category .area_title ul {margin-top:50rem;}
.area_category .area_title ul li {display:inline-block; margin-right:5rem;}
.area_category .area_title ul li a {display:flex; align-items:center;}
.area_category .area_title ul li a img {height:15rem; margin-right:12rem;}
.area_category .category_wrap {flex-basis: 60%; padding-left:50rem !important; box-sizing: border-box;}
.area_category .category_innr {max-height:185rem; overflow-y: auto;}
.area_category .category_innr::-webkit-scrollbar {width:3rem;}
.area_category .category_innr::-webkit-scrollbar-thumb {background-color: #fff; border-radius: 3rem;}
.area_category .category_innr::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, .1); border-radius: 3rem;}
.area_category .category_wrap ul {display:grid; grid-template-columns: repeat(4, 1fr); gap:10rem 0; width:100%; }
.area_category .category_wrap ul li a {position: relative; display:inline-block; padding:5rem 10rem 5rem 23rem; color:rgba(255, 255, 255,.5); transition: .3s;}
.area_category .category_wrap ul li a:hover {color:#fff;}
.area_category .category_wrap ul li a::before {position:absolute; left:0; top:8rem; content:''; width:13rem; height:13rem; background: url(/images/main/category_check.svg) no-repeat center / contain;}

/* area_company */
.area_company {gap:0 100rem; padding:115rem 0 130rem;}
.area_company > div {display:flex; flex-wrap: wrap; justify-content:space-between;}
.area_company .box {width: calc((100% - 100rem)/2);}
.area_company .box .area_title {margin-bottom:40rem; padding-right:30%;}
.area_company .btn_wrapper {position:absolute; right:0; bottom:0; display:flex; align-items: center;}
.area_company .btn_wrapper .swiper-button-prev,
.area_company .btn_wrapper .swiper-button-next {position:relative; top:auto; width:20rem; height:20rem; margin-top:0; background-size: contain; background-repeat: no-repeat; cursor:pointer;}
.area_company .btn_wrapper .swiper-button-prev {left:0; background-image: url(/images/main/slider_arrow.svg);}
.area_company .btn_wrapper .swiper-button-next {right:auto; background-image: url(/images/main/slider_arrow.svg); transform: scale(-1);}
.area_company .btn_wrapper .swiper-button-pause { width:20rem; height:20rem; margin:0 3rem; background: url(/images/main/slider_pause.svg) no-repeat center / 9rem;}
.area_company .btn_wrapper .swiper-button-pause.on {background: url(/images/main/slider_play.svg) no-repeat center / 9rem;}
.area_company .btn_wrapper .swiper-pagination-bullets {position:relative; margin-left:10rem;}
.area_company .btn_wrapper .swiper-pagination-bullet {display: inline-block; width:10rem; height:10rem; margin:0 5rem; border-radius: 100%;}
.area_company .swiper-slide {aspect-ratio: 16/9; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;}
.area_company .swiper-slide iframe {width:100%; height:auto; aspect-ratio: 16/9;}

/* area_partner */
/* .area_partner {padding:120rem 0 115rem; text-align:center; color:#fff; background:url(/images/main/company_bg.jpg) no-repeat center / cover;} */
.area_partner {padding:120rem 0 115rem; text-align:center; color:#fff; background:url(/images/main/company_bg.jpg) no-repeat center / cover;}
.area_partner .mobile {display: none;}
.area_partner .area_title h3 {font-size: 32rem; font-weight:700;}
.area_partner .area_title > p {color:#fff; opacity:.6; font-weight:300;}
.area_partner .partner_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 40rem; margin: 50rem 0;}
.area_partner .partner_list li a {position: relative; display: block; padding: 40rem 35rem; text-align: left; border-radius: 5rem; border: 1rem solid #e1e1e1; transition: .3s; background-color: #fff; box-shadow: 5rem 5rem 10rem rgba(0, 0, 0, .3);}
.area_partner .partner_list li em {display: inline-block; padding: 7rem 10rem; font-size: 14rem; font-weight: 600; color: #fff; background-color: #183a75;}
.area_partner .partner_list li i {position: absolute; right: 30rem; top: 40rem; width: 130rem; height: 30rem; background-position: right center; background-size: contain; background-repeat: no-repeat;}
.area_partner .partner_list li dl {margin-bottom: 30rem;}
.area_partner .partner_list li dl dt {margin-bottom: 12rem; font-size: 20rem; font-weight: 600;}
.area_partner .partner_list li dl dd {display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height: 48rem; overflow:hidden; text-overflow:ellipsis; line-height: 1.5; font-weight: 300; color: #333;}
.area_partner .partner_list li p {padding-top: 20rem; font-size: 15rem; font-weight: 500; color: #888; border-top: 1rem solid #e1e1e1; transition: .3s;}
.area_partner .partner_list li p span {position:relative; padding-right: 15rem; transition: .3s;}
.area_partner .partner_list li p span::after {position:absolute; right: 0; top: 50%; content: ''; width: 5rem; height: 5rem; border: 1rem solid #888; border-width: 1rem 1rem 0 0; transform: translate(0, -50%) rotate(45deg);}
.area_partner .partner_list li a:hover {border-color: #183a75;}
.area_partner .partner_list li a:hover p {color: #111; border-color: #183a75;}
.area_partner .partner_list li a:hover span {padding-right: 25rem;}


/* area_board */
.area_board {display:grid; grid-template-columns: repeat(2, 1fr); padding:120rem 0 0;} 
.area_board .news .area_title {display:flex; align-items: center; margin-bottom:20rem;}
.area_board .news .area_title h3 {margin-bottom: 0;}
.area_board .news .area_btn {margin-top: 7rem; margin-left:auto; padding:0; border:none; border-radius: 0; color:#888;}
.area_board .news .area_btn:hover {color:#193b86;}
.area_board .news ul {border-top:3rem solid #111;}
.area_board .news ul li {border-bottom: 1px solid #e1e1e1;}
.area_board .news ul li a {display:flex; align-items: flex-start; padding:50rem 20rem; gap:0 50rem; transition: .3s;} 
.area_board .news ul li a:hover {background-color: #fafafa;}
.area_board .news span {position:relative; min-width: 80rem; padding-right: 20rem; font-weight: 600; color:#193b86;}
.area_board .news span::after {position: absolute; right:0; top:50%; content: ''; width:3rem; height:3rem; background: #193b86; border-radius: 100%; transform: translateY(-50%);}
.area_board .news dt {margin-bottom: 12rem; font-size: 19rem; font-weight: 600;}
.area_board .news dd {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; color:#333; line-height: 1.6;}
.area_board .expo {padding-left: 100rem;}
.area_board .expo .area_title {display:flex; flex-wrap: wrap; align-content: center; height:100%; padding: 80rem 80rem 75rem; margin-bottom: 0; color:#fff; background:url(/images/main/expo_img.jpg) no-repeat center / cover; box-sizing: border-box;}
.area_board .expo .area_title h3 {font-size: 26rem; font-weight: 700; flex-basis: 100%;}
.area_board .expo .area_title > p {flex-basis: 100%; color:rgba(255, 255, 255, .75); line-height: 1.6;}
.area_board .expo .area_title .area_btn {margin-top: 50rem;}


 @media all and (max-width:1024px){

    .area_title h3 {margin-bottom: 15rem;}

    .area_visual {padding:180rem 0 150rem;}
    .area_visual h2 {font-size: 55rem;}
    .area_visual input {width:680rem; height:75rem;}
    .area_visual form {margin-top: 35rem;}
    .area_visual form button {width: 74rem; height: 74rem; background-size: 20rem;}

    .area_category .flex > div {padding:80rem 0;}
    .area_category .flex > .area_title {padding-right:50rem; box-sizing: border-box;}
    .area_category .category_innr {max-height:240rem;}
    .area_category .category_wrap ul {grid-template-columns:repeat(2, 1fr);}
    .area_category .area_title ul li {display:block; margin:0 0 5rem; text-align: center;}
    .area_category .area_title ul li a {display:block;}

    .area_company,
    .area_partner,
    .area_board {padding:85rem 0;}
    .area_board {padding-bottom: 0 !important;}
    .area_company .box {width:100%;}
    .area_company .box + .box {margin-top: 60rem;}
    .area_company .box .area_title {margin-bottom: 35rem;}

   .area_partner .partner_list {grid-template-columns: repeat(3, 1fr); gap: 20rem;}
   .area_partner .partner_list li a {padding: 30rem;}
   .area_partner .partner_list li i {position:relative; display: block; right: auto; top: auto; width: 100%; height: 60rem; margin-top: 20rem; border: 1rem solid #efefef; background-size: 120rem; background-position: center;}

    .area_board {grid-template-columns:1fr;}
    .area_board .expo {padding-left:0; margin-top: 30rem; text-align: center;}
    .area_board .expo .area_title > p br {display:none;}
    .area_board .expo .area_title .area_btn {margin:30rem auto 0; }
 }

 @media all and (max-width:860px){
    .area_title h3 {font-size: 24rem;}
    a.area_btn {padding:17rem 30rem; font-size:14rem;}

    .area_visual h2 {font-size: 45rem;}
    .area_visual form {display:block;}
    .area_visual input {width:100%; height:70rem; font-size: 16rem;}
    .area_visual form button {width:69rem; height:69rem;}
    .area_category .area_title ul li a {padding:20rem 30rem;}

    .area_category::before {display:none;}
    .area_category .flex {max-width:100%;}
    .area_category .flex > div {flex-basis: 100%; padding:55rem 0;}
    .area_category .flex > .area_title {padding-right:0;}
    .area_category .area_title > * {max-width:92%; margin:0 auto;}
    .area_category .area_title h3 {margin-bottom:15rem;}
    .area_category .area_title ul {display:grid; grid-template-columns: repeat(2, 1fr); gap:0 10rem; margin-top: 35rem;}
    .area_category .area_title ul li {margin:0;}
    .area_category .category_wrap {max-width:92%; margin:0 auto; padding-left:0 !important;}
    .area_category .category_innr {max-height:185rem;}
    .area_category .category_wrap ul {grid-template-columns:repeat(3, 1fr); }

    .area_company,
    .area_partner,
    .area_board {padding:65rem 0;}

    .area_partner .pc {display: none;}
    .area_partner .mobile {display: block;}
    .area_partner .area_title h3 {font-size:24rem;}
    .area_partner .partner_list_wrap {margin: 50rem 0;}
    .area_partner .swiper-slide a {position: relative; display: block; padding: 40rem 35rem; text-align: left; border-radius: 5rem; border: 1rem solid #e1e1e1; transition: .3s; background-color: #fff; box-shadow: 5rem 5rem 10rem rgba(0, 0, 0, .3);}
    .area_partner .swiper-slide em {display: inline-block; padding: 7rem 10rem; font-size: 14rem; font-weight: 600; color: #fff; background-color: #183a75;}
   .area_partner .swiper-slide i {position: absolute; right: 30rem; top: 40rem; width: 130rem; height: 30rem; background-position: right center; background-size: contain; background-repeat: no-repeat;}
   .area_partner .swiper-slide dl {margin-bottom: 30rem;}
   .area_partner .swiper-slide dl dt {margin-bottom: 12rem; font-size: 20rem; font-weight: 600;}
   .area_partner .swiper-slide dl dd {display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height: 1.5; font-weight: 300; color: #333;}
   .area_partner .swiper-slide p {padding-top: 20rem; font-size: 15rem; font-weight: 500; color: #888; border-top: 1rem solid #e1e1e1; transition: .3s;}
   .area_partner .swiper-slide p span {position:relative; padding-right: 15rem; transition: .3s;}
   .area_partner .swiper-slide p span::after {position:absolute; right: 0; top: 50%; content: ''; width: 5rem; height: 5rem; border: 1rem solid #888; border-width: 1rem 1rem 0 0; transform: translate(0, -50%) rotate(45deg);}
   .area_partner .swiper-slide a:hover {border-color: #183a75;}
   .area_partner .swiper-slide a:hover p {color: #111; border-color: #183a75;}
   .area_partner .swiper-slide a:hover span {padding-right: 25rem;}
   .area_partner .partner-pagination {margin-top: 25rem;}
   .area_partner .swiper-pagination-bullet {background:#fff;}

    .area_board .news ul li a {gap:0 30rem; padding:40rem 20rem;}
    .area_board .news dt {font-size:18rem;}
    .area_board .expo .area_title {padding:80rem 50rem;}
    .area_board .expo .area_title h3 {font-size:24rem;}
 }

 @media all and (max-width:540px){
    .area_title h3 {margin-bottom: 10rem; font-size: 20rem;}
    a.area_btn {padding:15rem 30rem; font-size: 12rem;}

    .area_visual {padding:120rem 0 85rem;}
    .area_visual h2 {font-size:32rem;}
    .area_visual h2 br {display:none;}
    .area_visual form {margin-top: 25rem;}
    .area_visual input {height:55rem; font-size:14rem; padding:0 80rem 0 20rem; border-width: 2.5rem;}
    .area_visual form button {width:54rem; height:54rem; background-size: 12rem;}

    .area_category .flex > div {padding:50rem 0;}
    .area_category .flex > .area_title {padding-bottom: 45rem;}
    .area_category .area_title ul {gap:0 5rem; margin-top: 30rem;}
    .area_category .area_title ul li a {padding:17rem 20rem;}
    .area_category .flex > .category_wrap {padding:35rem 0;}
    .area_category .category_wrap ul {grid-template-columns: repeat(2, 1fr); gap:5rem 0;}

    .area_company, .area_partner, .area_board {padding:55rem 0;}

    .area_company .box .area_title {padding-right:0; margin-bottom: 22rem;}
    .area_company .btn_wrapper {position: relative; right:auto; bottom:auto; margin-top: 20rem;}
    .area_company .btn_wrapper .swiper-button-prev,
    .area_company .btn_wrapper .swiper-button-next {background-size:7rem;}
    .area_company .btn_wrapper .swiper-pagination-bullets {margin-left: 8rem;}
    .area_company .btn_wrapper .swiper-pagination-bullet {width: 8rem; height: 8rem; margin:0 5rem;}
    .area_company .btn_wrapper .swiper-button-pause {background-size: 7rem;}
    .area_company .box + .box {margin-top: 45rem;}

   .area_partner .area_title h3 {font-size:20rem;}
   .area_partner .partner_list_wrap {margin: 30rem 0; overflow: hidden;}
   .area_partner .swiper-slide a {padding: 30rem 20rem;}
   .area_partner .swiper-slide em {padding: 6rem 8rem; font-size: 11rem;}
   .area_partner .swiper-slide i {position:relative; display: block; right: auto; top: auto; width: 100%; height: 60rem; margin-top: 20rem; border: 1rem solid #efefef; background-size: 90rem; background-position: center;}
   .area_partner .swiper-slide dl {margin-bottom: 20rem;}
   .area_partner .swiper-slide dl dt {margin-bottom: 10rem; font-size: 16rem;}
   .area_partner .swiper-slide dl dd {min-height: 40rem;}
   .area_partner .swiper-slide p {font-size: 12rem; padding-top: 15rem;}
   .area_partner .partner-pagination {margin-top: 15rem;}

    .area_board .news {overflow-x: hidden;}
    .area_board .news ul li a {display:block; padding:25rem 5rem; box-sizing: border-box;}
    .area_board .news span {display:block; min-width: auto; padding-right: 0; margin-bottom: 20rem; font-size: 12rem;}
    .area_board .news span::after {display: none;}
    .area_board .news dt {font-size: 15rem; margin-bottom: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .area_board .news dd {font-size: 13rem;}
    .area_board .expo .area_title {padding:55rem 20rem;}
    .area_board .expo .area_title h3 {font-size:18rem;}
    .area_board .expo .area_title .area_btn {margin-top: 25rem;}
 }
 
 @media all and (max-width:480px){}
 @media all and (max-width:360px){}