@charset "UTF-8";


/* section1 */
.section1 {height:700px; background:url('../../images/main/sec01_bg.jpg') no-repeat center;}
.slogan {position: absolute; top: 35%;}
.slogan h1{font-size: 55px; font-family: 'Sebang Regular'; line-height: 80px; color:#fff; text-shadow:2px 2px 1px rgba(0,0,0,1);} 
 @media all and (max-width:1800px) {
    .section1 {padding:0 20px;}
 }
 @media all and (max-width:768px) {
    .section1 {height:620px;}
    .slogan {top:30%;}
    .slogan h1 {font-size: 45px; line-height: 60px;}
 }
/* section2 */
#menu50_obj38 {z-index: 1; margin-top:-360px;} 
.section2 > div {position: relative;} 
.section2 > div::after {content:''; display: block; clear:both;}
.section2 .left {float:left; transform: translateY(48%) translateX(10px);}
.section2 .left .box {width:150px; height:150px; font-size: 18px; font-family: 'Dream Regular'; line-height: 24px; letter-spacing: -.05em; position: relative;}
.section2 .left .box a {display: block; width:100%; height:100%; position: relative; z-index: 2; transition:all .3s;}
.section2 .left .box1 {border:1px solid rgba(255,255,255,0.4); position: relative; transition:all .3s;}
.section2 .left .box1 a {color:#fff; position: relative; padding:25px 30px 45px 30px;}
.section2 .left .box1:hover {border:1px solid #0A4A9B;}
.section2 .left .box1:hover a {background:#0A4A9B;}
.section2 .left .box1 a::after {content:''; position: absolute; right:30px; bottom:45px; width:29px; height:6px; background:url('../../images/main/arrow_1.png') no-repeat center;}
.section2 .left .box2 {background:#FCAF15; margin: -30px 0 0 120px; position: relative; z-index: 1; border:1px solid #FCAF15; transition: all .3s;}
.section2 .left .box2 a {position: relative; color:#000; padding: 45px 25px 25px 25px; transition:all .3s;}
.section2 .left .box2:hover {background:#fff; border:1px solid #FCAF15;}
.section2 .left .box2 a::after {content:''; position: absolute; right:25px; bottom:25px; width:29px; height:6px; background:url('../../images/main/arrow_2.png') no-repeat center;}

.section2 .right {float:right; width:60%}
.section2 .right > ul > li {float:left; height:470px; width:33.3333%; padding:50px 30px; position: relative;}
.section2 .right > ul > li::before {content:''; position: absolute; left:10px; top:10px; bottom:10px; right:10px; border:1px solid rgba(255,255,255,0.5);}
.section2 .right .item1 {background:url('../../images/main/sec0201_bg.jpg') no-repeat center / cover; margin-top:100px;}
.section2 .right .item2 {background:url('../../images/main/sec0202_bg.jpg') no-repeat center / cover;}
.section2 .right .item3 {background:url('../../images/main/sec0203_bg.jpg') no-repeat center / cover; margin-top:160px;}
.section2 .right .item a {display:block; width:100%; height:100%; padding:12px 15px;}
.section2 .right .item .item-inner {position: relative; height:100%;}
.section2 .right .box-inner {position: absolute; bottom:0; width:100%; z-index: 1;}
.section2 .right .txt-box {margin-bottom: 25px;}
.section2 .right .txt-box p {color:#fff; font-size: 24px; font-family: 'Sebang Regular'; line-height: 40px; letter-spacing: 0; text-shadow:2px 2px 1px #000;}
.section2 .right .txt-box span {display: inline-block; color:#fff; font-size: 18px; font-family: 'Sebang Regular'; line-height: 40px; letter-spacing: 0;}
.section2 .right .link-box li {width:100%; border:1px solid rgba(255,255,255,0.4); margin-bottom:15px; transition:all .3s;}
.section2 .right .link-box li:hover {background:#fff;}
.section2 .right .link-box li:hover p {display: block; color:#000; background:url('../../images/main/arrow_2.png') no-repeat right center;}
.section2 .right .link-box li:last-child {margin-bottom:0;}
.section2 .right .link-box p {color:#fff; font-family: 'Dream Regular'; font-size: 14px;  letter-spacing: -.05em; position: relative; background:url('../../images/main/arrow_1.png') no-repeat right center;}

 @media all and (max-width:1800px) {
    #menu50_obj38 {padding: 0 20px;}
 }
 @media all and (max-width:1260px) {
    .section2 .right {width:64%;}
    .section2 .right > ul > li {height:380px;}
    .section2 .right .txt-box p {font-size: 20px;}
 }
 @media all and (max-width:1023px) {
    #menu50_obj38 {margin-top: -250px; margin-bottom:50px;}
    .section2 .left {transform:none;}
    .section2 .left .box2 {margin:0;}
    .section2 .right {width:calc(100% - 170px);}
    .section2 .right .item1,
    .section2 .right .item3 {margin:0;}
 }
 @media all and (max-width:910px) {
    .section2 .right > ul > li {padding: 50px 20px;}
    .section2 .right .txt-box p {font-size: 15px;}
 }
 @media all and (max-width :768px) {
    .section2 .left {float:none; margin-bottom:20px;}
    .section2 .left::after {content:''; display:block; clear:both;}
    .section2 .left .box {float:left; width: 50%; height:auto; font-size: 20px; line-height: 28px;}
    .section2 .left .box a {padding: 20px;}
    .section2 .left .box1 a::after {right:25px; bottom:25px;}
    .section2 .right {width:100%; float:none;}
    
  
 }

 @media all and (max-width: 550px) {
    .slogan h1 {font-size: 30px; line-height: 40px;}
    .section2 .right .item1,
    .section2 .right .item3 {margin:auto;}
    .section2 .right .box-inner {position: static;}
    .section2 .right > ul > li {width:100%; height:auto; padding:25px 20px;}
    .section2 .right .item1,
    .section2 .right .item2,
    .section2 .right .item3 {margin-bottom:10px;}
    .section2 .right .txt-box {margin-bottom:10px;  }
    .section2 .right .txt-box p {font-size: 24px;}
    .section2 .right .txt-box span {font-size: 20px;}
    .section2 .right .link-box p {font-size: 20px;}
 }