/****************************** main.css ******************************/
@charset "UTF-8";



/* html { height: 100%; overflow: hidden; } */
body { height: 100%; overflow: hidden; } 



/*---------- common ----------*/
strong { font-weight: 600; } 
.grid:not(.pro) {display: grid;justify-content: space-between;} 

.more { width: auto; max-width: 280px; height: 70px; background: transparent; border: 1px solid #333; border-radius: 10px; transition: all .3s; } 
.more a { font-size: 18px; padding: 25px; font-weight: 600; background: transparent; } 
.more a img { width: 24px; height: 20px; font-weight: 600; margin-left: 12px; transition: all .3s; } 

.popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30vw;height: 15vw;background: var(--menu-color);padding: 3%;text-align: center;z-index: 99999999;}
.popup h3 {font-size: 26px;color: #fff;}
.popup ul {margin-top: 40px;color: #fff;}
.popup ul li {margin-top: 30px;}
.popup ul li a {color: #fff;}

/*---------- pro_main ----------*/
.pro_main {flex-wrap: wrap;}
.pro_main .section {position: relative;width: 50%;max-height: 420px;background-size: 960px 420px;overflow: hidden;transition: all .3s;}
.pro_main .section:after {content:"";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;transition: all .5s;}
.pro_main .section#section1:after {background: url(/img/section1.png) no-repeat center / cover;}
.pro_main .section#section2:after {background: url(/img/section2.png) no-repeat center / cover;}
.pro_main .section#section3:after {background: url(/img/section3.png) no-repeat center / cover;}
.pro_main .section#section4:after {background: url(/img/section4.png) no-repeat center / cover;}
.pro_main .section .content_area {position: relative;max-width: 620px;height: 100%;margin: 0 auto;padding: 80px 0;color: #fff;} 
.pro_main .section .content_area h2, .pro_main .section .content_area ul {padding-left: 40px;padding-right: 40px;} 
.pro_main .section .content_area h2 {font-size: 28px;font-weight: 600;padding-bottom: 20px;border-bottom: 1px solid #fff;} 
.pro_main .section .content_area h2 span {display: block;font-size: 20px;font-weight: 400;margin-top: 15px;} 
.pro_main .section .content_area ul {flex-wrap: wrap;margin: 45px -10px 0;}
.pro_main .section#section1 ul {flex-direction: column;}
.pro_main .section .content_area ul li {display: flex;width: calc(50% - 20px);max-width: 280px;padding: 0 10px 20px;align-items: center;box-sizing: content-box;}  
.pro_main .section#section1 ul li {width: 100%;} 
.pro_main .section .content_area ul li:after {content: "\e93f";display: inline-block;float: right;font-family: 'xeicon';font-size: 30px;clear: both;opacity: 0;transition: all .3s;} 
.pro_main .section .content_area ul li a {display: inline-block;width: calc(100% - 30px);font-size: 18px;color: rgb(255 255 255 / 60%);transition: all .3s;}
/* hover */
.pro_main .section:hover {filter: brightness(1.2); transition: all .3s;}
.pro_main .section:hover:after {transform: scale(1.1);transition: all .5s;}
.pro_main .section .content_area ul li:hover a {color: #fff; transition: all .3s;} 
.pro_main .section .content_area ul li:hover:after {opacity: 1; transition: all .3s;} 







/* -------------- respon -------------- */

@media (max-width: 1820px) {
.section .content_area {width: 96%;} 
}

@media (max-width: 1500px) {
.pro_main .section .content_area {width: 90%;} 
.pro_main .section .content_area h2, .pro_main .section .content_area ul {padding-left: 20px;padding-right: 20px;} 
}

@media (max-width: 1023px) {
.pro_main .section .content_area {padding: 60px 0;} 
.pro_main .section .content_area h2 {font-size: 24px;} 
.pro_main .section .content_area h2 span {font-size: 15px;} 
.pro_main .section .content_area ul {margin: 20px auto 0;}
.pro_main .section .content_area ul li {padding: 0 0 15px;} 
.pro_main .section .content_area ul li a {font-size: 16px;} 
}

@media (max-width: 479px), (min-width: 768px) and (max-width: 1023px) {
.pro_main .section {max-height: fit-content;}
.pro_main .section ul {flex-direction: column;}
.pro_main .section .content_area ul li {width: 100%;max-width: 100%;} 
.pro_main .section .content_area ul li:last-child {padding: 0;} 
}

@media (max-width: 767px) {
.pro_main .section {width: 100%;}
.pro_main .section .content_area {max-width: 100%;} 
.pro_main .section .content_area h2, .pro_main .section .content_area ul {padding-left: 0;padding-right: 0;} 
.pro_main .section .content_area h2 {font-size: 20px;} 
.pro_main .section .content_area h2 span {font-size: 13px;margin-top: 10px;} 
}

@media (max-width: 479px) {

}