body {background-color: #080A10;} .wrap .section {width:100%; position: relative; padding-left:1rem; padding-right: 1rem;} .wrap .section iframe {vertical-align: middle;} .animation-here {opacity: 0;} /* 섹션 1*/ .gallery-wrap {width:100%; height:96rem; position: relative;} #section_01 {width:100%; height:100vh; position: relative;} #section_01 .next-box {width:80px; height:80px; background-color:rgba(0,0,0,0.2); position: absolute; bottom:-10px; left:50%; transform: translate(-50%,-50%); z-index: 1; border:1px solid #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; color:#fff; font-family: "Play"; cursor: pointer; text-align: center;} #section_01 .next-box:hover {background-color:#006cd1;} #section_01 iframe {width:100%; height:100%;} /* #section_01 iframe #play-button {display: none !important;} */ /* 섹션2*/ #section_02 {position: relative; width:100%; height:auto; max-height:100%; max-width: 1800px; margin: 0 auto; padding-top:9.5rem; overflow: hidden;} #section_02 #main-slide {width:100%; height:100%; position: relative; overflow: hidden; border-radius: 1.5rem; aspect-ratio: 25 / 9;} #section_02 #main-slide::after {content:''; position: absolute; bottom:-1px; left:0; width:100%; height:83px; background-color:#080A10; z-index: 1; display: none;} #section_02 #main-slide .swiper-wrapper {width:100%; height:100%;} #section_02 #main-slide .swiper-wrapper .swiper-slide {background-color:#080A10; width:100%; height:100%; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; background-repeat: no-repeat; background-size:cover; background-position: top center; position: relative; overflow: hidden;} #section_02 #main-slide .swiper-wrapper .swiper-slide img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(1.2); width:100%; height:100%; transition: 6s ease-out; display: block;} #section_02 #main-slide .swiper-wrapper .swiper-slide img.mobile-image {display: none;} #section_02 #main-slide .swiper-wrapper .swiper-slide#slide-01 #main-ment .main-br {display: none;} /* #section_02 #main-slide .swiper-wrapper .swiper-slide#slide-02 {background-image: url(/ITDA25/image/main-slide-02.jpg);} #section_02 #main-slide .swiper-wrapper .swiper-slide#slide-03 {background-image: url(/ITDA25/image/main-slide-03.jpg);} #section_02 #main-slide .swiper-wrapper .swiper-slide#slide-04 {background-image: url(/ITDA25/image/main-slide-04.jpg);} #section_02 #main-slide .swiper-wrapper .swiper-slide#slide-05 {background-image: url(/ITDA25/image/main-slide-05.jpg);} */ #section_02 #main-slide .swiper-wrapper .swiper-slide.swiper-slide-active img {animation: banner-scale 5s both;} #section_02 .comment {width:100%; color:rgba(255,255,255,1); font-size:1.6rem; transition: all 0.4s; background-color:rgba(0,0,0,0.1); border-bottom:1px solid rgba(255,255,255,0.6);} #section_02 .comment.table-title {background-color:rgba(0,0,0,0.8);} #section_02 .comment.table-title>li>h3 {font-size:2rem;} #section_02 .comment:last-child {width:100%; color:rgba(255,255,255,1); font-size:1.6rem;} #section_02 .comment>li{width:100%;} #section_02 .comment>li>h2 {font-size:2.4rem; font-weight: bold;} #section_02 .comment>li>ul {width:100%; display:flex; justify-content: center; align-items: flex-start; align-items: stretch;} #section_02 .comment>li>ul>li {padding:10px;} #section_02 .comment>li>ul>li>h3 {font-size:2rem; font-weight: bold;} #section_02 .comment>li>ul>li:first-child {flex-basis: 20%; max-width: 20%;} #section_02 .comment>li>ul>li:first-child>h2 {font-size:2rem;} #section_02 .comment>li>ul>li>p {font-weight: 300;} #section_02 .comment>li>ul>li:nth-child(2) {flex-basis: 40%; max-width: 40%; border-right:1px solid rgba(255,255,255,0.6); border-left:1px solid rgba(255,255,255,0.6);} #section_02 .comment>li>ul>li:nth-child(3) {flex-basis: 40%; max-width: 40%;} #section_02 #slide-03 .comment.table-title {background-color:#febd1a;} #section_02 #slide-03 .comment>li>ul>li {border-right:0;} #section_02 #slide-03 .comment>li>ul>li:first-child {border-right:1px solid rgba(255,255,255,0.6); flex-basis: 50%; max-width: 50%;} #section_02 #slide-03 .comment>li>ul>li:last-child {border-right:none; border-left:none; flex-basis: 50%; max-width: 50%;} #section_02 #slide-04 .comment.table-title {background-color:#ff7e00;} #section_02 #slide-04 .comment>li>ul>li {border-right:0;} #section_02 #slide-04 .comment>li>ul>li:first-child {border-right:1px solid rgba(255,255,255,0.6); flex-basis: 50%; max-width: 50%;} #section_02 #slide-04 .comment>li>ul>li:last-child {border-right:none; border-left:none; flex-basis: 50%; max-width: 50%;} #section_02 #slide-05 .comment.table-title {background-color:#FB7397;} #section_02 #slide-05 .comment>li>ul>li {border-right:0;} #section_02 #slide-05 .comment>li>ul>li:first-child {border-right:1px solid rgba(255,255,255,0.6); flex-basis: 50%; max-width: 50%;} #section_02 #slide-05 .comment>li>ul>li:last-child {border-right:none; border-left:none; flex-basis: 50%; max-width: 50%;} /*섹션 2의 보조 슬라이드 */ #main-slide .swiper-wrapper .swiper-slide .main-ment {width:100%; height:100%; max-width: 1600px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding-left:1rem; padding-right: 1rem;} #main-slide .swiper-wrapper .swiper-slide .main-ment>div {width:100%; position: relative; } #main-slide .swiper-wrapper .swiper-slide .main-ment>div>h3 {font-size:6rem; color:rgba(255,255,255,0.8);; width:100%; } #main-slide .swiper-wrapper .swiper-slide .main-ment>div>.title {width:100%;} #main-slide .swiper-wrapper .swiper-slide .main-ment>div>.title>li:first-child{width:100%;} #main-slide .swiper-wrapper .swiper-slide .main-ment>div>.title>li:first-child>h2 {font-size:6rem; color:#fff; margin-bottom:10px; line-height: 1.2;} #main-slide .swiper-wrapper .swiper-slide .main-ment>div>p {font-size:2rem; color:rgba(255,255,255,0.8);; font-weight: 300; } #main-slide .swiper-wrapper .swiper-slide .main-ment>div>.award-p {font-size:1.6rem; overflow: hidden;} .line {width:85%; height:1px; background-color:#fff;} #sub-slide {width:100%; max-width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; margin-top:1.5rem;} #sub-slide .btn-wrapper {width:6rem; height:100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; gap:1.5rem;} #sub-slide .btn-wrapper>div {width:100%; height:6.45rem; background-color:rgba(255,255,255,0.05); cursor: pointer; border-radius: 1.5rem;} #sub-slide .btn-wrapper>div>img {max-width: 100%; height: auto !important;;} #sub-slide .btn-wrapper>div:last-child {width:100%; height:6.45rem;; } #sub-slide .btn-wrapper>div:hover {background-color: #febd1a;} #sub-slide .swiper-wrapper {width:calc(100% - 7.5rem); max-width: 100%; height:100%; justify-content: space-between; gap:1.5rem; margin-right: 1.5rem;} #sub-slide .swiper-wrapper .swiper-slide { padding:2rem; display: flex; justify-content: center; align-items: center; height:14.4rem; transition: all 0.4s; border-radius: 1.5rem; cursor: pointer; text-align: center; width: calc(20% - 1.5rem); transition: all 0.8s cubic-bezier(.23,1,.32,1); background-color: rgba(255,255,255,0.05); overflow: hidden;} #sub-slide .swiper-wrapper .swiper-slide:last-child ul {border:none;} #sub-slide .swiper-wrapper .swiper-slide ul {width:100%; } /* #sub-slide .swiper-wrapper .swiper-slide:first-child {border-radius: 1.5rem 0 0 0;} */ /* #sub-slide .swiper-wrapper .swiper-slide:first-child:hover {background-color:#FFC000;} */ /* #sub-slide .swiper-wrapper .swiper-slide:nth-child(2):hover {background-color:#6FBA2C;} #sub-slide .swiper-wrapper .swiper-slide:nth-child(3):hover {background-color:#febd1a;} #sub-slide .swiper-wrapper .swiper-slide:nth-child(4):hover {background-color:#ff7e00;} #sub-slide .swiper-wrapper .swiper-slide:nth-child(5):hover {background-color:#FB7397;} */ #sub-slide .swiper-wrapper .swiper-slide:hover h3 {color:rgba(255,255,255,0.3);} #sub-slide .swiper-wrapper .swiper-slide:hover p {color:#fff;} #sub-slide .swiper-wrapper .swiper-slide h3 {font-size:2.4rem; color:rgba(255,255,255,0.3); line-height: 1.1; font-family: "play"; position: relative; z-index: 1; text-align: left;} #sub-slide .swiper-wrapper .swiper-slide p {font-size:1.8rem; color:rgba(255,255,255,0.8);; font-weight: 500; position: relative; z-index: 1; text-align: left; line-height: 1.3; margin-top:0.5rem; display: -webkit-box;/} #sub-slide .swiper-wrapper .swiper-slide::after{ border: 0 solid #febd1a; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; display: block; border-radius: 1.5rem; opacity: 1; z-index: 11; -webkit-transition: opacity .3s, border .3s; transition: opacity .3s, border .3s; } #sub-slide .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {position: relative; background-color:rgba(254, 189, 26,0.4);} #sub-slide .swiper-wrapper .swiper-slide.swiper-slide-thumb-active::after {border: 0.75rem solid #febd1a;} #sub-slide .swiper-wrapper .swiper-slide:nth-child(1).swiper-slide-thumb-active { position: relative; z-index: 1;} #sub-slide .swiper-wrapper .swiper-slide.swiper-slide-thumb-active::before {content:''; position: absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(221, 166, 0,0.3); animation: line-animation 5s linear forwards;} #sub-slide .swiper-wrapper .swiper-slide.swiper-slide-thumb-active p {color:#fff; } #sub-slide .swiper-wrapper .swiper-slide:nth-child(1).swiper-slide-thumb-active {background-image:url(/ITDA2025/image/main-slide-01-thumb.webp); background-size: cover; } #sub-slide .swiper-wrapper .swiper-slide:nth-child(2).swiper-slide-thumb-active {background-image:url(/ITDA2025/image/main-slide-02-thumb.webp); background-size: cover; } #sub-slide .swiper-wrapper .swiper-slide:nth-child(3).swiper-slide-thumb-active {background-image:url(/ITDA2025/image/main-slide-03-thumb.webp); background-size: cover; } #sub-slide .swiper-wrapper .swiper-slide:nth-child(4).swiper-slide-thumb-active {background-image:url(/ITDA2025/image/main-slide-04-thumb.webp); background-size: cover; } #sub-slide .swiper-wrapper .swiper-slide:nth-child(5).swiper-slide-thumb-active {background-image:url(/ITDA2025/image/main-slide-05-thumb.webp); background-size: cover; } @-webkit-keyframes line-animation { from { width:0; } to { width:100%; } } .main-title { text-align: left; margin-bottom: 3rem; text-align: center; position: relative;} .main-title>h3 {font-size:20rem; color:rgba(2555,255,255,0.05); text-align: center; position: relative;} .main-title>p {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); font-size:6rem; z-index: 1; color:#fff; text-align: center; width: 100%;} /*섹션3*/ #section_03 {background-repeat: no-repeat; width:100%; background-position: left center; background-attachment: fixed; } /* #section_03 .service-wrap { gap:2rem; } */ #section_03 .service-wrap .content {border-radius: 1.5rem; overflow: hidden; } #section_03 .service-wrap .content:hover {background-color: #febd1a;} #section_03 .service-wrap .content:hover h4 {color:#fff;} #section_03 .service-wrap .content:hover p {color:#fff; background-color: rgba(0,0,0,0.05);} #section_03 .service-wrap>a>ul{width:100%; transition: all 0.4s cubic-bezier(.23,1,.32,1); cursor: pointer; height:100%; padding:0.5rem; background-color: rgba(255,255,255,0.05); display: flex; flex-direction: column; justify-content: space-between;} #section_03 .service-wrap>a>ul:hover .image-wrap img {transform: scale(1.05); } /* #section_03 .service-wrap>li>ul:hover .text-wrap {background-color:#febd1a; color: #fff;} */ /* #section_03 .service-wrap>.visual-design>ul:hover .text-wrap {background-color:#febd1a; color: #fff;} */ /* #section_03 .service-wrap>.marketing-design>ul:hover .text-wrap {background-color:#006cd1; color: #fff;} */ /* #section_03 .service-wrap>li>ul:hover .text-wrap p {color:rgba(255,255,255,0.8);;} */ /* #section_03 .service-wrap>li>ul:hover .text-wrap h4 {color:rgba(255,255,255,1); font-weight: 300;} */ /* #section_03 .service-wrap>li>ul:hover {box-shadow: 3px 5px 30px 2px rgba(31,75,143,0.1 5);} */ #section_03 .service-wrap>a>ul>.image-wrap {width:100%; overflow: hidden; order:1; border-radius: 1.5rem;} #section_03 .service-wrap>a>ul>.image-wrap img {width:100%; height: auto; vertical-align: middle; transition: all 0.4s cubic-bezier(.23,1,.32,1);} #section_03 .service-wrap>a>ul>.text-wrap {width:100%; padding:20px; text-align: left; order:0;} #section_03 .service-wrap>a>ul>.text-wrap>h3 {font-size:2.2rem; font-weight: 800; margin-bottom: 1rem; color:#fff;} #section_03 .service-wrap>a>ul>.text-wrap>h4 {font-size:1.6rem; font-weight: 300; color:rgba(255,255,255,0.8);;; line-height: 1.5;} #section_03 .service-wrap>a>ul>.text-wrap>p {font-size:1.3rem; color:rgba(255,255,255,0.8);; margin-top:1rem; text-align: right; display: inline-block; padding:0.5rem 1.2rem; background-color: rgba(255,255,255,0.1); border-radius: 2rem;} #mini-banner {width:100%; max-width: 1600px; border-radius: 1.5rem; margin:0 auto; background-image:url(/ITDA2025/image/mini-banner.webp); background-color: black; padding:15rem 0; padding-left:1rem; padding-right: 1rem; background-repeat: no-repeat; background-size: cover; background-position: center; } #mini-banner .item {text-align: center;} #mini-banner .item h3 {font-size:4rem;} #mini-banner .item p {font-size:1.8rem; font-weight: 300; margin-top: 1.6rem;} /*섹션4*/ #section_04_01>.cont-1366>.flex_2ea {align-items: stretch;} #section_04_01 .title-wraps>div {position: sticky; top:12rem; left:0;} #section_04_01 .title-wraps h3 {font-size:5rem; font-weight: 600;} #section_04_01 .title-wraps p {font-size:2.4rem; color:rgba(255,255,255,0.8);;} #section_04_01 .process-wraps {gap:2rem; align-items: flex-start; display: flex;} #section_04_01 .process-wraps .content {flex-direction: column; display: flex; gap:2rem; margin: 0;} #section_04_01 .process-wraps .content:nth-child(2){margin-top:5rem;} #section_04_01 .process-wraps .content>.item {padding:4rem; border-radius: 1.5rem; background-color: rgba(255,255,255,0.05); transition: all 0.4s cubic-bezier(.23,1,.32,1);} #section_04_01 .process-wraps .content>.item:hover {background-color: rgba(254, 189, 26,0.8); color:#fff;} #section_04_01 .process-wraps .content>div {width: 100%; display: flex; flex-direction: column; justify-content: space-between; height: 100%;} #section_04_01 .process-wraps .content>div .num {width:5rem; height: 5rem; margin-bottom: 2rem; background-color: rgba(255,255,255,0.1); color:#fff; text-align: center; border-radius: 50%; font-size:1.6rem; line-height: 1; font-weight: bold; } #section_04_01 .process-wraps .content>div h5 {font-size:2.4rem; margin-bottom: 1rem;} #section_04_01 .process-wraps .content>div p {font-size:1.8rem; color:#eee;; font-weight: 300;} /* #section_04_01 .process-wraps .content:nth-child(2n) {} */ #section_04 .process-wrap {position:relative;} #section_04 .process-wrap .process-line {position: absolute; top:50%; left:50%; width:70%; height:60%; transform:translate(-50%,-50%); z-index: 0; overflow: hidden;} #section_04 .process-wrap .process-line span:first-child {position:absolute; top:0; left:0; width:100%; height:20px; background:linear-gradient(to right, #FFC000, #fff); animation: animate1 2s linear infinite; animation-delay: 1s;} #section_04 .process-wrap .process-line span:nth-child(2) {position:absolute; top:0; right:0; width:20px; height:100%; background:linear-gradient(to bottom, #FFC000, #fff); animation: animate2 2s linear infinite;} #section_04 .process-wrap .process-line span:nth-child(3) {position:absolute; bottom:0; left:0; width:100%; height:20px; background:linear-gradient(to left, #FFC000, #fff); animation: animate3 2s linear infinite; animation-delay: 1s;} /* #section_04 .process-wrap .process-line span:nth-child(4) {position:absolute; top:0; left :0; width:2px; height:100%; background:linear-gradient(to top, #fff, #fff); animation: animate4 2s linear infinite;} */ @keyframes animate1 { 0%{ transform: translateX(-100%);} 100%{transform: translateX(100%);} } @keyframes animate2 { 0%{ transform: translateY(-100%);} 100%{transform: translateY(100%);} } @keyframes animate3 { 0%{ transform: translateX(100%);} 100%{transform: translateX(-100%);} } #section_04 {background-color:#080A10;} #section_04 .process-wrap .dongatg-title>li:last-child>p {color:rgba(255,255,255,0.8);} .process-sub {display:flex; justify-content: center; align-items: center; flex-wrap: wrap; padding-top:10px; padding-bottom:10px; border-top:1px solid rgba(255,255,255,0.3); border-bottom:1px solid rgba(255,255,255,0.3); width:100%; max-width: 854px; margin: auto; margin-bottom:80px; background-size:cover; background-position: center center;} .process-sub>ul {cursor: pointer;} .process-sub>ul:hover {opacity: 0.6; transition: all 0.4s;} .process-sub>ul>.box {width:28px; height:28px; border:1px solid #fff;} .process-sub>ul:last-child>.box{background-color:#33bbd5; border:1px solid transparent;} .process-sub>ul>li {color:#fff; font-size:2.4rem;} .process-sub>ul>li {color:#fff; margin-right:16px;} .process-wrap {width:100%; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;} .process-wrap .content {flex-basis: 31.333%; border-radius: 1.5rem; max-width: 31.333%; margin-bottom:60px; height:230px; background-color:#212328; color:#fff; padding:60px 20px 30px 20px; position: relative; display:flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; border:5px solid rgba(255,255,255,0.1); width:100%; transition: all 0.4s; z-index: 1;} .process-wrap .content:hover {transform: translateY(-20px) !important; box-shadow:0 5px 14px 0 rgba(0,82,96,0.25);} .process-wrap .content.non-border {background-color:#212328; border:0; margin-bottom:0;} .process-wrap .content.non-border:hover {transform: translateY(-20px) !important; box-shadow:0 5px 14px 0 rgba(0,82,96,0.25);} .process-wrap .content .item {width:100%;} .process-wrap .content .item>h3 {font-size:3rem; width:100%;} .process-wrap .content .item>h4 {font-size:1.6rem; width:100%; font-weight: 300;} .process-wrap .content .item>h3>.info {background-color:#fff; width:25px; height:25px; color:#212328; border-radius: 50%; font-size:1.6rem; margin-left:20px; box-shadow:0 5px 14px 0 rgba(61,82,96,0.15); display: none;} .process-wrap .content .item>h3>.info:hover {opacity: 0.7; transform: all 0.4s; cursor: pointer;} .process-wrap .content .item>p {font-size:1.3rem; text-align: right;} .process-wrap .content .num-wrap {width:85px; height:85px; border-radius: 1.5rem; background-color:#212328; position: absolute; color:#fff; top:-40px; left: 20px; font-size:6rem; font-weight: bold;} .process-wrap .content .num-wrap>h2 {font-size:5rem; color:rgba(255,255,255,0.3); line-height: 1;} /*섹션5 파트너*/ #section_05 {background-color:#080A10;} #section_05 .cont-1366 {padding-top:0; padding-bottom:100px; } #section_05 .partner-wrap {width:100%; display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; position: relative;} #section_05 .partner-wrap .map-wrap {width:50%; flex-basis: 50%; max-width: 50%; position: relative;} #section_05 .partner-wrap .map-wrap img {width:100%;} #section_05 .partner-wrap .map-wrap::before {content:''; position:absolute; top:0; left:0; width:100%; height:50%; background-image:url(/ITDA2025/image/map-gradient.png); background-repeat: no-repeat; background-size:cover; background-position: top center;} /* #section_05 .partner-wrap .map-wrap img {position:absolute; left:0; top:0; background-color: #00001A; z-index: 1;} */ #section_05 .partner-wrap .ment-wrap {width:50%; flex-basis: 50%; max-width: 50%;} #section_05 .partner-wrap .ment-wrap h2 {font-size:5.5rem; color:#fff; font-weight: 500; margin-bottom:40px;} #section_05 .partner-wrap .ment-wrap h2>.bold {position: relative;} #section_05 .partner-wrap .ment-wrap h2>.bold .circle-dot {position: relative;} #section_05 .partner-wrap .ment-wrap h2>.bold .circle-dot::after {content:''; position:absolute; top: -20px; left:50%; height: 20px; background-color:#FFC000; width:10px; height:10px; border-radius: 50%;} #section_05 .partner-wrap .ment-wrap .client-list {width:100%; display:flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;} #section_05 .partner-wrap .ment-wrap .client-list>li {flex-basis: 20%; max-width: 20%; margin-bottom:5px; } #section_05 .partner-wrap .ment-wrap .client-list>li img {max-width: 81%; height: auto!important; margin: auto;} .st0{opacity:5.000000e-002;} .st1{fill:#FFFFFF;} .st2{opacity:0.3;} #section_06 {padding-top:10rem; padding-bottom: 10rem; position: relative; z-index: 1; overflow: hidden;} #section_06::before, #section_06::after { content: ''; position: absolute; top: 0; width: 20rem; height: 100%; z-index: 2; } #section_06::before { left: 0; background: linear-gradient(to right, #080A10 0%, transparent 100%); } #section_06::after { /* */ right: 0; background: linear-gradient(to left, #080A10 0%, transparent 100%); } #section_06 .partners-wrap {margin-top:3rem; overflow: visible; } #section_06 .partners-wrap ul {display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; transition-timing-function: linear;} #section_06 .partners-wrap ul li {padding:2rem; background-color: rgba(255,255,255,0.05); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; border-radius: 1rem; width:18rem; height: 18rem; border-radius: 1.5rem; display: flex; justify-content: center;} #section_06 .partners-wrap ul li>img {filter: grayscale(100%); transition: all 0.4s cubic-bezier(.23,1,.32,1);} #section_06 .partners-wrap ul li:hover img {filter: grayscale(0);} /*팝업*/ .popup-wraps {width:100%; height:100%; position: fixed; top:0; left:0; max-width:100%; display: flex; justify-content: center; align-items:center; background-color:rgba(0,0,0,0.6); z-index: 999; flex-wrap: wrap;} .popup-wraps .content {width:100%; max-width:640px; margin:1%; transition: all 0.4s;} .popup-wraps .content .img-wraps img {width:100%;} .popup-wraps .content .text-wraps {display:flex; justify-content: flex-start; align-items: center; color:#333333; background-color:#fafafa;} .popup-wraps .content .text-wraps div {flex-basis: 50%; text-align: center; transition: all 0.4s; cursor: pointer; border:1px solid #ddd; padding:10px; background-color:#fafafa; font-size:1.4rem;} .popup-wraps .content .text-wraps div:hover {opacity: 0.7;} .pop_none {display:none;} @media screen and (max-width: 768px){ .popup-wraps .content {width:98%; max-width:98%; margin:1%; flex-basis: 98%;} } .pc-process {display: flex !important;} .mobile-process {display: none !important;}