@charset "utf-8";

#atc03{position:relative;padding:100px 0;width:100%; background-color: #edf7f9; margin: 0 auto;}

.inner{width: 80%; margin: 0 auto;}
#atc03 ul{display:flex;justify-content:space-between; margin-top: 50px;}
#atc03 ul li{width:9%;height:580px;background:url(/theme/enmijun/index/inc03/atc03_img01.png) center/cover no-repeat;cursor:pointer;transition:all .3s}
#atc03 ul li:nth-child(2){background-image:url(/theme/enmijun/index/inc03/atc03_img02.png)}
#atc03 ul li:nth-child(3){background-image:url(/theme/enmijun/index/inc03/atc03_img03.png)}
#atc03 ul li:nth-child(4){background-image:url(/theme/enmijun/index/inc03/atc03_img04.png)}
#atc03 ul li:nth-child(5){background-image:url(/theme/enmijun/index/inc03/atc03_img05.png)}
#atc03 ul li:nth-child(6){background-image:url(/theme/enmijun/index/inc03/atc03_img06.png)}
#atc03 ul li.on{width:48%;padding:50px 60px 0;color:#fff;transition:all .3s}
#atc03 ul li.on .s_tit{display:block;margin-top:0}
#atc03 ul li.on .s_tit span{display:block}
#atc03 ul li.on .s_tit p{width:100%;writing-mode:lr; font-size: 26px;}
#atc03 ul li.on .txt{opacity:1; font-size: 17px;}
#atc03 ul li.on a{opacity:1}
#atc03 ul li .s_tit{display:flex;justify-content:center;margin-top:40px;}
#atc03 ul li .s_tit span{display:none;font-size:15px;font-weight:700;transition:all .3s}
#atc03 ul li .s_tit p{font-weight: 500; writing-mode: vertical-lr;margin-bottom: 20px; font-size:21px;font-weight:500;line-height:1.1;color:#fff;transition:all .3s}
#atc03 ul li .txt{opacity:0;color:rgba(255,255,255,70%);transition:all .3s}
#atc03 ul li a{opacity: 0; margin-top: 25px;justify-content: space-evenly; position:relative;display:flex;align-items:center;width:140px;height:43px;border-radius:100px;color:#fff;background:var(--primary)}
#atc03 ul li a .left{left:-35px;opacity:0}

#atc03 ul li.on a{opacity: 1;}

@media (max-width:1580px){
#atc03{padding:0 40px}
}
@media (max-width:1024px){
#atc03{padding:50px 15px}
#atc03 ul li.on{padding:100px 60px 0}
}
@media (max-width:900px){
    .inner{width: 96%;}

#atc03 .tit_area{margin-bottom:80px}
#atc03 .tit_area p{font-size:40px}
#atc03 ul{flex-wrap:wrap;margin-top: 15px;}
#atc03 ul li{width:100%;height:auto;margin-bottom: 15px; height: 60px;}
#atc03 ul li:hover{margin-top: 0 !important;}

#atc03 ul li.on:first-child{margin-top:0}
#atc03 ul li.on{width:100%;padding:20px 60px;margin-top:15px; height: auto;}
#atc03 ul li .txt,#inc02 ul li a{display:none}
#atc03 ul li.on .txt br{display: none; word-break: break-all;}
#atc03 ul li.on .txt{display:block;opacity:1;font-size: 11px;}
#atc03 ul li.on a{display: no; width: 125px;
    height: 35px;
    font-size: 11px;
    margin-top: 15px;}
#atc03 ul li.on a svg{width:20px}
#atc03 ul li .s_tit{margin-top:10px}
#atc03 ul li .s_tit span{font-size:14px}
#atc03 ul li .s_tit p{width:100%;margin-bottom:20px;text-align:center;font-size:14px; writing-mode: unset; margin-top: 10px;}
#atc03 ul li.on .s_tit p{margin-bottom:40px;text-align:left; font-size: 15px; margin-bottom: 10px;}
}
@media (max-width:650px){
#atc03 .tit_area{margin-bottom:70px}
#atc03 .tit_area p{font-size:35px}
#atc03 ul li.on{padding:20px}
}
@media (max-width:500px){
#atc03 .tit_area{margin-bottom:60px}
#atc03 .tit_area p{font-size:25px}
#atc03 ul li .s_tit span{font-size:13px}
}