모바일 @midia 설정

<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

?>

 

<style>

.page-content { }

 

.sect-title { padding-bottom: 2.4rem; text-align: center; }

.tit2 {font-size: 2.8rem; font-weight: 600; }

.subtit { font-size: 1.4rem; font-weight: 400; }


 

.sec_wrap {}

.comment {font-size:24px; line-height:42px; color:#000; margin-bottom: 70px; }

.sec_wrap .conts_area1 {width: 100%; display:inline-block; vertical-align:top; padding-bottom: 160px; }

.sec_wrap .conts_area1 .img_box {width: 100%; height:650px; margin-bottom: 55px; background-image:url('<?=THEMA_URL?>/img/about_1.jpg');}

.sec_wrap .conts_area1 .img_box img {width: 100%; }

.sec_wrap .conts_area1 .tit {float: left; width: 710px; font-size:46px; line-height:50px; color:#000; font-weight:500; }

.sec_wrap .conts_area1 .txt {float: left; width: 530px; font-size:18px; line-height:34px; color:#333333;}

 

.sec_wrap .conts_area2 {position:relative; height: 640px; padding-top: 118px; padding-left: 820px; box-sizing: border-box; margin-bottom: 170px; }

.sec_wrap .conts_area2 .img_box {width: 1040px; height:640px; position:absolute; left:-330px; top:0px; background-image:url('<?=THEMA_URL?>/img/about_2.jpg');}

.sec_wrap .conts_area2 .img_box img {width: 100%; }

.sec_wrap .conts_area2 .tit {font-size:46px; line-height:64px; color:#000; font-weight:500; margin-bottom: 90px; }

.sec_wrap .conts_area2 .txt {font-size:18px; line-height:34px; color:#333333;}

 

.sec_wrap .conts_area3 {position:relative; height: 640px; padding-top: 118px; box-sizing: border-box; margin-bottom: 90px; }

.sec_wrap .conts_area3 .img_box {width: 940px; height:640px; position:absolute; right:-330px; top:0px; background-image:url('<?=THEMA_URL?>/img/about_3.jpg');}

.sec_wrap .conts_area3 .img_box img {width: 100%; }

.sec_wrap .conts_area3 .tit {font-size:46px; line-height:64px; color:#000; font-weight:500; margin-bottom: 90px; }

.sec_wrap .conts_area3 .txt {font-size:18px; line-height:34px; color:#333333;}

 

@media (max-width: 1023px) {

.sec_wrap .conts_area1 { width:calc(100% - 10px); padding:40px 30px; margin:0 20px 20px 0; }

.sec_wrap .conts_area1:nth-child(2n) {margin-right:0;}

.sec_wrap .conts_area1:nth-child(3n) {margin-right:0px;}

}

 

@media (max-width: 767px) {

.sec_wrap {padding:0 30px;}

.sec_wrap .conts_area1 { width:100%; text-align:center; margin:15px 0;}

.sec_wrap .conts_area1:nth-child(3n) {margin-right:0px;}

}

 

@media (max-width: 1023px) {

.sec_wrap .conts_area2 { width:calc(100% - 10px); padding:40px 30px; margin:0 20px 20px 0; }

.sec_wrap .conts_area2:nth-child(2n) {margin-right:0;}

.sec_wrap .conts_area2:nth-child(3n) {margin-right:0px;}

}

 

@media (max-width: 767px) {

.sec_wrap {padding:0 30px;}

.sec_wrap .conts_area2 { width:100%; text-align:center; margin:15px 0;}

.sec_wrap .conts_area2:nth-child(3n) {margin-right:0px;}

}

 

@media (max-width: 1023px) {

.sec_wrap .conts_area3 { width:calc(100% - 10px); padding:40px 30px; margin:0 20px 20px 0; }

.sec_wrap .conts_area3:nth-child(2n) {margin-right:0;}

.sec_wrap .conts_area3:nth-child(3n) {margin-right:0px;}

}

 

@media (max-width: 767px) {

.sec_wrap {padding:0 30px;}

.sec_wrap .conts_area3 { width:100%; text-align:center; margin:15px 0;}

.sec_wrap .conts_area3:nth-child(3n) {margin-right:0px;}

}


 

</style>



 

<div class="page-content">


 

<div class="sect-title">

<p class="tit2">Lorem ipsum dolor sit amet,</p>

<p class="subtit">Lorem ipsum dolor sit amet, ea ius prima melius temporibus,</p>

</div>

 

<div class="sec_wrap">

<div class="conts_area1">

<div class="img_box"></div>

<h3 class="tit">Lorem ipsum dolor</h3>

<div class="txt">

Lorem ipsum dolor sit amet, <br>

Lorem ipsum dolor sit amet, <br>

Lorem ipsum dolor sit amet,

</div>

</div>

 

<div class="conts_area2">

<div class="img_box"></div>

<h3 class="tit">Lorem ipsum dolor<br>Lorem ipsum dolor</h3>

<div class="txt">

Lorem ipsum dolor sit amet, <br>

Lorem ipsum dolor sit amet, <br>

Lorem ipsum dolor sit amet, <br><br>

 

Lorem ipsum dolor sit amet, ea ius prima melius temporibus, <br>

diam populo offendit te est.

 

</div>

</div>

<div class="conts_area3">

<div class="img_box"></div>

<h3 class="tit">Lorem ipsum dolor<br>Lorem ipsum dolor</h3>

<div class="txt">

Lorem ipsum dolor sit amet, <br>

Lorem ipsum dolor sit amet, <br>

Lorem ipsum dolor sit amet, <br><br>

 

Lorem ipsum dolor sit amet, ea ius prima melius temporibus, <br>

diam populo offendit te est.

</div>

</div>

</div>









 

</div>