@import url(fonts.css);
@import url(default.css);
@import url(common.css);
@import url(layout.css);


/*
    플러그인을 사용할 때 이미 적용되어 있는 css를 변경하려면
    1. 동일한 이름의 body태그 선택자를 추가하는 방법
        strong
        body strong - 이 경우 body strong이 우선순위가 높음
    2. 속성값에 뒤에 !important를 추가
        우선순위가 1순위가 됨
        (important는 해제가 어려움. 모바일에서도 적용됨)
*/

.visual h2 {
    display: none;
}
.visual .inner {
    width: auto;
    display: flex;
    justify-content: center;
    position: relative;
}
.visual .inner .tit_top {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    font-size: 3rem;
    font-weight: 600;
    color: var(--color-main1);
    display: flex;
    justify-content: center;
    gap: 491px;
    white-space: nowrap;
}
.visual .inner .tit_sub {
    position: absolute;
    top: calc(50% - 188px);
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    color: rgba(29,29,29,0.5);
    padding-top: 416px;
}
.visual .inner .tit_sub::before {
    position: absolute;
    background-color: #B3D8CD;
    border-radius: 50%;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    width: 377px;
    height: 377px;
    content: "";
}
.visual .inner::after {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #B3D8CD;
    content: "";
}
.visual .inner .cont_wrap {
    z-index: 10;
}
.visual .inner .cont_wrap .cont .item {
    height: 100vh;
    display: flex;
    text-align: center;
    align-items: center;
}

.visual .inner { display:flex; overflow:hidden; max-height:100vh; } /* 스크롤되면서 보여질 최대높이를 지정해야한다. height로도 가능 */

@media screen and (max-width:1550px){
    .visual .inner .tit_top {
        font-size: 2.50rem;
        gap: 450px;
    }
    .visual .inner .tit_sub {
        top: calc(50% - 188px);
        padding-top: 416px;
    }
    .visual .inner .tit_sub::before {
        width: 377px;
        height: 377px;
    }
    .visual .inner .cont_wrap .cont .item img {
        width: 400px;
    }
}

@media screen and (max-width:1300px){
    .visual .inner .tit_top {
        font-size: 2rem;
        gap: 400px;
    }
    .visual .inner .tit_sub {
        top: calc(50% - 160px);
        padding-top: 360px;
    }
    .visual .inner .tit_sub::before {
        width: 320px;
        height: 320px;
    }
    .visual .inner .cont_wrap .cont .item img {
        width: 350px;
    }
}
@media screen and (max-width:1100px){
    .visual .inner .tit_top {
        flex-direction: column;
        gap: 365px;
        text-align: center;
    }
    .visual .inner .tit_sub {
        top: calc(50% - 160px);
        padding-top: 407px;
    }
}
@media screen and (max-width:780px){
    .visual .inner .tit_top {
        font-size: 1.50rem;
        gap: 309px;
    }
    .visual .inner .tit_sub {
        top: calc(50% - 135px);
        padding-top: 349px;
        font-size: 0.65rem;
    }
    .visual .inner .tit_sub::before {
        width: 270px;
        height: 270px;
    }
}
@media screen and (max-width:360px){
    .visual .inner .tit_top {
        font-size: 1.25rem;
    }
}

.search {
    margin-top: 130px;
    width: 100%;
    background-image: url(../images/search_bg00.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.search .wrapper {
    display: flex;
    justify-content: space-between;
}
.search .left {
    width: calc(50% - 12px);
}
.search .left .l_tit h2 {
    font-size: 2.50rem;
    font-weight: 600;
    color: var(--txt-color-tit);
}
.search .left .l_tit .search_box {
    display: flex;
    justify-content: center;
    width: 70%;
    height: 63px;
    align-items: center;
    margin: 72px 0 36px 0;
    border-bottom: 3px solid #1d1d1d;
}
.search .left .l_tit .search_box label {
    display: none; /* 숨김 */
}
.search .left .l_tit .search_box input[type="text"] {
    width: 85%;
    line-height: 63px;
    font-size: 1.063rem;
    border: 0;
    background-color: transparent;
    outline: 0; /* focus 되었을 때 테두리 */
}
.search .left .l_tit .search_box input[type="submit"] {
    width: 45px;
    height: 45px;
    font-size: 0;
    line-height: 0;
    background-color: transparent;
    border: 0;
    /*종료 태그가 없는 input은 before/after 안됨 */
    background-image: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_268' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='45' height='45'%3E%3Crect width='45' height='45' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_268)'%3E%3Cpath d='M36.642 38.5818L24.8656 26.805C23.9281 27.579 22.85 28.1848 21.6312 28.6223C20.4125 29.0598 19.1517 29.2786 17.8489 29.2786C14.6442 29.2786 11.932 28.169 9.71234 25.95C7.49266 23.7309 6.38281 21.0193 6.38281 17.8153C6.38281 14.6115 7.49234 11.899 9.71141 9.67778C11.9305 7.45684 14.642 6.34637 17.8461 6.34637C21.0498 6.34637 23.7623 7.45622 25.9836 9.6759C28.2045 11.8956 29.315 14.6078 29.315 17.8125C29.315 19.1515 29.0903 20.4304 28.6409 21.6492C28.1912 22.8679 27.5914 23.9279 26.8414 24.8292L38.6178 36.6056L36.642 38.5818ZM17.8489 26.4665C20.2648 26.4665 22.3111 25.6281 23.9877 23.9512C25.6645 22.2747 26.503 20.2284 26.503 17.8125C26.503 15.3965 25.6645 13.3503 23.9877 11.6737C22.3111 9.99684 20.2648 9.15841 17.8489 9.15841C15.433 9.15841 13.3867 9.99684 11.7102 11.6737C10.0333 13.3503 9.19484 15.3965 9.19484 17.8125C9.19484 20.2284 10.0333 22.2747 11.7102 23.9512C13.3867 25.6281 15.433 26.4665 17.8489 26.4665Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.search .left .list {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 35px;
}
.search .left .list a {
    display: block;
    text-align: center;
    background-color: #ededed;
    border-radius: 20px;
    margin: 7px 7px 7px 0;
    line-height: 37px;
    padding: 0 23px;
}
.search .left .list a:hover {
    background-color: var(--color-main1);
    color: #fff;
}
.search .left img {
    width: 100%;
}
.search .right {
    width: calc(50% - 12px);
}
.search .right .pic img {
    width: 404px;
}
.search .right .pic .img03 img {
    width: 297px;
}
.search .right .pic .img01 {
    text-align: center;
    padding-bottom: 56px;
}
.search .right .pic .img02 {
    text-align: right;
}
.search .right .pic .img03 {
    margin-top: -157px;
    text-align: center;
}
.search .right .pic .img04 {
    text-align: right;
    padding-top: 76px;
}

@media screen and (max-width:1550px){
    .search .left {
        width: calc(60% - 12px);
    }
    .search .left .l_tit h2 {
        font-size: 2rem;
    }
    .search .right {
        width: calc(40% - 12px);
    }
    .search .right .pic img {
        width: 354px;
    }
    .search .right .pic .img03 img {
        width: 247px;
    }
}
@media screen and (max-width:1100px){
    .search .left .l_tit h2 {
        font-size: 1.5rem;
    }
    .search .left .l_tit .search_box {
        width: 390px;
        height: 63px;
    }
    .search .left .list {
        font-size: 0.80rem;
    }
    .search .right .pic img {
        width: 304px;
    }
    .search .right .pic .img03 img {
        width: 197px;
    }
}
@media screen and (max-width:768px){
    .search {
        background-image: none;
    }
    .search .left {
        width: 100%;
    }
    .search .left .l_tit h2 {
        font-size: 1.25rem;
    }
    .search .left .l_tit .search_box {
        width: 320px;
        height: 50px;
    }
    .search .left .l_tit .search_box input[type="text"] {
        font-size: 0.80rem;
    }
    .search .right {
        display: none;
    }
    .search .left .list {
        font-size: 0.80rem;
    }
}
@media screen and (max-width:768px){
    .search .left .l_tit .search_box {
        width: 290px;
    }
}

.brand h2 {
    display: none;
}
.brand .loop {
    color: var(--color-main1);
    font-family: 'Paperlogy-6SemiBold';
    font-weight: 700;
    font-size: 6rem;
    position: relative;
}
.brand .loop strong {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-main1);
    color: transparent; /*글자 색상을 없앰*/
}
.brand .loop .l_txt {
    white-space: nowrap; /*줄바꿈금지*/
    position: absolute;
    left: 0;
    top: -187px;
    animation-name: brand_loop1;
    animation-duration: 15s;
    animation-iteration-count: infinite; /*무한반복*/
    animation-timing-function: linear; /*가속도 삭제*/
}
@keyframes brand_loop1 {
    0% {
        transform: translate(0, 0)
    }
    100% {
        transform: translate(-50.2%, 0);
    } /*첫글자가 다시 맨 앞으로 도달한 값*/
}

.brand .loop .r_txt {
    white-space: nowrap; /*줄바꿈금지*/
    position: absolute;
    left: 0;
    top: -307px;
    animation-name: brand_loop2;
    animation-duration: 15s;
    animation-iteration-count: infinite; /*무한반복*/
    animation-timing-function: linear; /*가속도 삭제*/
}
@keyframes brand_loop2 {
    0% {
        transform: translate(-50.2%, 0)
    }
    100% {
        transform: translate(0, 0);
    } /*첫글자가 다시 맨 앞으로 도달한 값*/
}

.brand .info {
    background-image: url(../images/brand_bg01.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 900px;
    align-items: center;
    text-align: center;
    color: #fff;
    padding-top: 268px;
}
.brand .info h3 {
    font-size: 2.50rem;
    font-weight: 600;
    padding-bottom: 29px;
}
.brand .info p {
    color: rgba(255,255,255,0.9);
}

@media screen and (max-width:1100px){
    .brand .loop {
        font-size: 3.5rem;
    }
    .brand .loop .l_txt {
        white-space: nowrap; /*줄바꿈금지*/
        position: absolute;
        left: 0;
        top: -140px;
    }
    .brand .loop .r_txt {
        white-space: nowrap; /*줄바꿈금지*/
        position: absolute;
        left: 0;
        top: -207px;
    }
    .brand .info h3 {
        font-size: 2rem;
    }
    .brand .info p {
        font-size: 0.80rem;
    }
}
@media screen and (max-width:768px){
    .brand {
        padding-top: 310px;
    }
    .brand .loop {
        font-size: 3rem;
    }
    .brand .loop strong {
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--color-main1);
        color: transparent; /*글자 색상을 없앰*/
    }
    .brand .loop .l_txt {
        top: -100px;
    }
    .brand .loop .r_txt {
        top: -167px;
    }
    .brand .info {
        height: 368px;
        padding-top: 88px;
    }
    .brand .info .logo img {
        width: 49px;
    }
    .brand .info h3 {
        font-size: 1rem;
        padding-bottom: 19px;
    }
    .brand .info p {
        font-size: 0.65rem;
    }
}

.mall {
    width: 100%;
    display: flex;
    height: 200px;
    color: #fff;
    align-items: center;
}
.mall h2 {
    display: none;
    font-size: 0;
    line-height: 0;
}
.mall h3 {
    font-size: 2rem;
    font-weight: 600;
}
.mall .l_mall a,
.mall .r_mall a {
    display: block;
    height: 200px; 
}
.mall .l_mall a .inner,
.mall .r_mall a .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.mall .l_mall a {
    padding: 101px 4% 2% 0;
}
.mall .l_mall a .inner span {
    position: relative;
}
.mall .l_mall a .more span::before {
    position: absolute;
    width: 38px;
    height: 38px;
    top: -7px;
    left: -38px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_265' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='38' height='38'%3E%3Crect x='38' width='38' height='38' transform='rotate(90 38 0)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_265)'%3E%3Cpath d='M8.49621 19.0001L17.448 10.0483L19.1164 11.7168L11.8576 19.0001L19.1164 26.2834L17.448 27.9519L8.49621 19.0001ZM17.9657 19.0001L26.9175 10.0483L28.5859 11.7168L21.3271 19.0001L28.5859 26.2834L26.9175 27.9519L17.9657 19.0001Z' fill='white' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.mall .r_mall a {
    padding: 101px 0 2% 4%;
}
.mall .r_mall a .inner {
    flex-direction: row-reverse;
}
.mall .r_mall a span {
    position: relative;
}
.mall .r_mall a .more span::after {
    position: absolute;
    width: 38px;
    height: 38px;
    top: -7px;
    right: -38px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_259' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='38' height='38'%3E%3Crect y='38' width='38' height='38' transform='rotate(-90 0 38)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_259)'%3E%3Cpath d='M29.5038 18.9999L20.552 27.9517L18.8836 26.2832L26.1424 18.9999L18.8836 11.7166L20.552 10.0481L29.5038 18.9999ZM20.0343 18.9999L11.0825 27.9517L9.41406 26.2832L16.6729 18.9999L9.41406 11.7166L11.0825 10.0481L20.0343 18.9999Z' fill='white' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.mall .l_mall {
    width: 50%;
    background-image: url(../images/mall01.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-left: 13%;
}
.mall .r_mall {
    width: 50%;
    text-align: right;
    background-image: url(../images/mall02.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-right: 13%;
}
@media screen and (max-width:1100px){
    .mall .l_mall {
        width: 50%;
        padding-left: 7%;
    }
    .mall .r_mall {
        width: 50%;
        padding-right: 7%;
    }
    .mall h3 {
        font-size: 1.50rem;
        font-weight: 600;
    }
    .mall p {
        padding-top: 12px;
        font-size: 0.80rem;
    }
    .mall .l_mall a .more span {
        font-size: 0.80rem;
        margin-left: 30px;
    }
    .mall .r_mall a .more span {
        font-size: 0.80rem;
        margin-right: 30px;
    }
    .mall .l_mall a .more span::before {

        width: 30px;
        height: 30px;
        top: -7px;
        left: -30px;
    }
    .mall .r_mall a .more span::after {
        width: 30px;
        height: 30px;
        top: -7px;
        right: -30px;
    }
}
@media screen and (max-width:768px){
    .mall {
        width: 100%;
        display: block;
        height: 122px;
        color: #fff;
        align-items: center;
    }
    .mall .l_mall {
        width: auto;
        background-image: url(../images/mall01.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-left: 0;
    }
    .mall .r_mall {
        width: auto;
        text-align: right;
        background-image: url(../images/mall02.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-right: 0;
    }
    .mall .l_mall a,
    .mall .r_mall a {
        display: block;
        height: 122px; 
    }
    .mall .l_mall a,
    .mall .r_mall a {
        padding: 54px 19px 19px 19px;
    }
    .mall h3 {
        font-size: 1rem;
        font-weight: 600;
    }
    .mall p {
        padding-top: 10px;
        font-size: 0.65rem;
    }
    .mall .l_mall a .more span,
    .mall .r_mall a .more span {
        font-size: 0.65rem;
        margin-right: 30px;
    }
    .mall .l_mall a .more span::before {
        display: none;
    }
    .mall .l_mall a .more span::after,
    .mall .r_mall a .more span::after {
        position: absolute;
        width: 28px;
        height: 28px;
        top: -7px;
        right: -30px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_259' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='38' height='38'%3E%3Crect y='38' width='38' height='38' transform='rotate(-90 0 38)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_259)'%3E%3Cpath d='M29.5038 18.9999L20.552 27.9517L18.8836 26.2832L26.1424 18.9999L18.8836 11.7166L20.552 10.0481L29.5038 18.9999ZM20.0343 18.9999L11.0825 27.9517L9.41406 26.2832L16.6729 18.9999L9.41406 11.7166L11.0825 10.0481L20.0343 18.9999Z' fill='white' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E%0A");
        content: "";
    }
    .mall .r_mall a .inner {
        flex-direction: row;
        text-align: left;
    }
}

.tech {
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
}
.tech .tech_head h2 {
    font-size: 2.50rem;
    font-weight: 600;
    padding: 118px 0 39px 0;
}
.tech .tech_head .tech_brand ul {
    display: flex;
    justify-content: flex-end;
    font-weight: 600;
    color: #666;
}
.tech .tech_head .tech_brand ul li {
    margin-left: 26px;
}
.tech .tech_head .tech_brand ul li.active span {
    position: relative;
    color: #1d1d1d;
}
.tech .tech_head .tech_brand ul li.active span::after {
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: rgba(29,29,29,0.5);
    content: "";
}

.tech .tech_sub {
    display: flex;
    justify-content: space-between;
}
.tech .tech_sub .tech_nav {
    width: 290px;
}
.tech .tech_prev,
.tech .tech_next {
    margin-left: 39px;
    width: 30px;
    height: 30px;
    font-size: 0;
    line-height: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.tech .tech_next {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_282' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect y='30' width='30' height='30' transform='rotate(-90 0 30)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_282)'%3E%3Cpath d='M27.068 17.5002L15.0008 29.5674L2.93359 17.5002L4.70766 15.7261L15.0008 26.0196L25.2939 15.7261L27.068 17.5002Z' fill='%23666666'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.tech .tech_prev {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_279' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect x='30' width='30' height='30' transform='rotate(90 30 0)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_279)'%3E%3Cpath d='M2.93203 12.4998L14.9992 0.432617L27.0664 12.4998L25.2923 14.2739L14.9992 3.98043L4.70609 14.2739L2.93203 12.4998Z' fill='%23666666'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.tech .tech_sub .list {
    width: calc(100% - 290px);
    margin: 40px 0 0 245px;
}
.tech .paging .swiper-pagination-bullet {
    display: block;
    padding-left: 39px;
    width: 290px;
    height: 69px;
    line-height: 69px;
    background-color: transparent;
    border-radius: 0;
    opacity: 1;
}
.tech .item1.swiper-pagination-bullet::before {
    content: "비타500";
}
.tech .item2.swiper-pagination-bullet::before {
    content: "광동 V라인 옥수수수염차";
}
.tech .item3.swiper-pagination-bullet::before {
    content: "광동 헛개차";
}
.tech .item4.swiper-pagination-bullet::before {
    content: "광동 경옥고";
}
.tech .item5.swiper-pagination-bullet::before {
    content: "레돌민®정";
}
.tech .item6.swiper-pagination-bullet::before {
    content: "아이톡";
}
.tech .item7.swiper-pagination-bullet::before {
    content: "광동 치올 페이스트";
}
.tech .item8.swiper-pagination-bullet::before {
    content: "CARMEX";
}
.tech .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(1);
    position: relative;
}
.tech .swiper-pagination-bullet-active-prev,
.tech .swiper-pagination-bullet-active-prev-prev,
.tech .swiper-pagination-bullet-active-next,
.tech .swiper-pagination-bullet-active-next-next {
    transform: scale(0.7)
}
.tech .paging .swiper-pagination-bullet-active {
    background-color: var(--color-main1);
    border-radius: 15px;
    color: #fff;
    position: relative;
}
.tech .swiper-pagination-bullet-active::after {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 28px;
    left: 15px;
    background-color: #fff;
    border-radius: 50%; 
    content: "";
}

.tech .swiper ul li {
    width: 297px;
    height: 469px;
    text-align: center;
    background-color: var(--color-sub1);
    border-radius: 15px;
    padding-top: 42px;
}
.tech .swiper ul li img {
    width: 253px;
    height: 253px;
    border-radius: 50%;
}
.tech .swiper ul li h3 {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 39px 0 16px 0;
}
.tech .swiper ul li p {
    font-size: 0.80rem;
}

@media screen and (max-width:1100px){
    .tech .tech_head h2 {
        font-size: 2rem;
    } 
    .tech .tech_head .tech_brand {
        font-size: 0.80rem;
        padding-top: 30px;
    }  
    .tech .paging .swiper-pagination-bullet {
        padding-left: 39px;
        width: 270px;
        height: 58px;
        line-height: 58px;
        font-size: 0.80rem;
    }
    .tech .paging .swiper-pagination-bullet-active::after {
        top: 22px;
    }
    
    .tech .tech_sub .list {
        margin: 40px 0 0 150px;
    }
}
@media screen and (max-width:768px){
    .tech .tech_head h2 {
        font-size: 1.25rem;
    }
    .tech .tech_head .tech_brand {
        padding-top: 40px;
    }  
    .tech .paging .swiper-pagination-bullet {
        padding-left: 39px;
        width: 250px;
        height: 58px;
        line-height: 58px;
        font-size: 0.80rem;
    }
    .tech .tech_sub .list {
        margin: 40px 0 0 130px;
    }
    .tech .swiper ul li h3 {
        font-size: 1rem;
    }
    .tech .swiper ul li p {
        font-size: 0.65rem;
    }
    .tech .tech_sub .tech_nav {
        display: none;
    }
    .tech .tech_sub .list {
        width: calc(100% + 20px);
        margin: 20px 0 0 0;
    }
}
@media screen and (max-width:360px){
    .tech .tech_head .tech_brand {
        font-size: 0.65rem;
    }  
}

.news {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/news_bg01.png);
    height: 795px;
    margin-bottom: 240px;
}
.news .wrapper {
    display: flex;
    justify-content: space-between;
}
.news .wrapper .inner {
    position: relative;
}
.news .wrapper .media,
.news .wrapper .post {
    width: calc(50% - 12px);
    height: 590px;
    border-radius: 20px;
    background-color: #fff;
    margin-top: 105px;
    padding: 43px 53px 73px 53px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
.news .wrapper h2 {
    padding: 0 0 52px 0;
}
.news .wrapper h2 span {
    font-size: 1.50rem;
    font-weight: 600;
    color: var(--txt-color-tit);
    position: relative;
}
.news .wrapper h2 span::before {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 50%;
    background-color: #666;
    content: "";
}
.news .wrapper h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--txt-color-tit);
    padding: 10px 0 16px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news .wrapper .list ul li a {
    display: block;
    height: 126px;
    margin-top: 16px;
    border-bottom: 1px solid rgba(61, 61, 61, 0.5);
    position: relative;
}
.news .wrapper .list ul li a strong {
    font-size: 0.80rem;
    font-weight: 600;
}
.news .wrapper .media .list ul li a strong {
    color: var(--color-main2);
}
.news .wrapper .post .list ul li a strong {
    color: var(--color-main1);
}
.news .wrapper .media .list ul li a:hover h4 {
    color: var(--color-main2);
}
.news .wrapper .post .list ul li a:hover h4 {
    color: var(--color-main1);
}
.news .wrapper .list ul li a .date {
    position: absolute;
    bottom: 17px;
    right: 0;
    font-size: 0.80rem;
}
.news .wrapper .inner .more {
    position: absolute;
    top: 0;
    right: 0;
    width: 133px;
    font-size: 0.80rem;
    align-items: center;
}
.news .wrapper .inner .more a {
    display: block;
    line-height: 38px;
}
.news .wrapper .inner .more a::after {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 0;
    right: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_312' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-1' y='0' width='39' height='38'%3E%3Crect x='-0.00195312' y='38' width='38' height='38' transform='rotate(-90 -0.00195312 38)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_312)'%3E%3Cpath d='M29.5018 18.9999L20.5501 27.9517L18.8816 26.2832L26.1404 18.9999L18.8816 11.7166L20.5501 10.0481L29.5018 18.9999ZM20.0323 18.9999L11.0805 27.9517L9.41211 26.2832L16.6709 18.9999L9.41211 11.7166L11.0805 10.0481L20.0323 18.9999Z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.news .wrapper .media .inner .more a:hover {
    color: var(--color-main2);
}
.news .wrapper .post .inner .more a:hover {
    color: var(--color-main1);
}
.news .wrapper .media .inner .more a:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_312' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-1' y='0' width='39' height='38'%3E%3Crect x='-0.00195312' y='38' width='38' height='38' transform='rotate(-90 -0.00195312 38)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_312)'%3E%3Cpath d='M29.5018 18.9999L20.5501 27.9517L18.8816 26.2832L26.1404 18.9999L18.8816 11.7166L20.5501 10.0481L29.5018 18.9999ZM20.0323 18.9999L11.0805 27.9517L9.41211 26.2832L16.6709 18.9999L9.41211 11.7166L11.0805 10.0481L20.0323 18.9999Z' fill='%23E8380D'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.news .wrapper .post .inner .more a:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_315' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-1' y='0' width='39' height='38'%3E%3Crect x='-0.00195312' y='38' width='38' height='38' transform='rotate(-90 -0.00195312 38)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_315)'%3E%3Cpath d='M29.5018 18.9999L20.5501 27.9517L18.8816 26.2832L26.1404 18.9999L18.8816 11.7166L20.5501 10.0481L29.5018 18.9999ZM20.0323 18.9999L11.0805 27.9517L9.41211 26.2832L16.6709 18.9999L9.41211 11.7166L11.0805 10.0481L20.0323 18.9999Z' fill='%23007D57'/%3E%3C/g%3E%3C/svg%3E%0A");
}

@media screen and (max-width:1100px){
    .news .wrapper h3 {
        font-size: 1rem;
        padding: 9px 0 19px 0;
    }
}
@media screen and (max-width:768px){
    .news {
        height: auto;
        background-image: none;
        margin-bottom: 120px;
    }
    .news .wrapper {
        display: block;
    }
    .news .wrapper .media,
    .news .wrapper .post {
        width: 100%;
        height: 508px;
        margin-top: 42px;
        background-color: #fefefe;
        padding: 42px 27px 54px 27px;
        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    }
    .news .wrapper h2 {
        padding: 0 0 50px 0;
    }
    .news .wrapper h2 span {
        font-size: 1.25rem;
    }
    .news .wrapper h3 {
        font-size: 0.80rem;
        padding: 7px 0 15px 0;
    }
    .news .wrapper .list ul li a {
        height: 95px;
        border-bottom: 1px solid rgba(61, 61, 61, 0.5);
    }
    .news .wrapper .list ul li a strong,
    .news .wrapper .list ul li a .date {
        font-size: 0.65rem;
    }
    .news .wrapper .list ul li a .date {
        bottom: 20px;
    }
    .news .wrapper .inner .more {
        width: 110px;
        font-size: 0.65rem;
    }
    .news .wrapper .inner .more a {
        line-height: 30px;
    }
    .news .wrapper .inner .more a::after {
        width: 30px;
        height: 30px;
    }
}

.insta {
    position: relative;
    padding-top: 20px;
}
.insta .wrapper .tit {
    margin-bottom: 32px;
}
.insta .wrapper .tit h2 span {
    font-size: 1.50rem;
    font-weight: 600;
    color: var(--txt-color-tit);
    position: relative;
    margin-bottom: 30px;
}
.insta .wrapper .tit h2 span::before {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 50%;
    background-color: #666;
    content: "";
}
.insta .loop .swiper .swiper-wrapper {
    transition-timing-function: linear;
}
.insta .loop .swiper ul li {
    width: 318px;
}
.insta .loop .swiper ul li a {
    display: block;
    height: 318px;
}
.insta .loop .swiper ul li a img {
    width: 100%;
}
.insta .more {
    position: absolute;
    top: 22px;
    right: 12%;
    width: 133px;
    height: 38px;
    font-size: 0.80rem;
}
.insta .more a {
    position: relative;
    display: block;
    width: 138px;
    line-height: 38px;
}
.insta .more a:hover {
    color: var(--color-main1);
}
.insta .more a::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_262' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='38' height='38'%3E%3Crect y='38' width='38' height='38' transform='rotate(-90 0 38)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_262)'%3E%3Cpath d='M29.5038 18.9999L20.552 27.9517L18.8836 26.2832L26.1424 18.9999L18.8836 11.7166L20.552 10.0481L29.5038 18.9999ZM20.0343 18.9999L11.0825 27.9517L9.41406 26.2832L16.6729 18.9999L9.41406 11.7166L11.0825 10.0481L20.0343 18.9999Z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.insta .more a:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_86_262' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='38' height='38'%3E%3Crect y='38' width='38' height='38' transform='rotate(-90 0 38)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_86_262)'%3E%3Cpath d='M29.5038 18.9999L20.552 27.9517L18.8836 26.2832L26.1424 18.9999L18.8836 11.7166L20.552 10.0481L29.5038 18.9999ZM20.0343 18.9999L11.0825 27.9517L9.41406 26.2832L16.6729 18.9999L9.41406 11.7166L11.0825 10.0481L20.0343 18.9999Z' fill='%23007D57'/%3E%3C/g%3E%3C/svg%3E%0A");
}
@media screen and (max-width:768px){
    .insta .wrapper .tit h3 span {
        font-size: 1.25rem;
    }
    .insta .loop .swiper ul li {
        width: 180px;
    }
    .insta .loop .swiper ul li a {
        height: 180px;
    }
    .insta .more {
        width: 110px;
        top: 30px;
        font-size: 0.65rem;
    }
    .insta .more a {
        line-height: 30px;
        width: 110px;
        line-height: 28px;
    }
    .insta .more a::after {
        width: 28px;
        height: 28px;
    }
}
@media screen and (max-width:360px){
    .insta .more {
        right: 6%;
    }
}