@charset "utf-8";

/* ==========================================================================
  font-face
   ========================================================================== */
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
/* ==========================================================================
   Base styles & Helper
   ========================================================================== */

/* base */
h1, h2, h3, h4, h5, h6, fieldset,ul, ol, dl, dt, dd, p, button ,figure{margin:0;padding:0;}
body{font:normal 14px/1.5 'GmarketSans',sans-serif;color:#666;}
legend, caption{width:0;height:0;visibility:hidden;font-size:0;line-height:0;}
a{text-decoration:none;color:#666;}
img{vertical-align:middle;}
fieldset, button{background:none;border:0px;}
ul:after,ol:after{content:'';display:block;clear:both;}
li{list-style:none;}
table{width:100%;border-spacing:0px;border-collapse:collapse;}
iframe{width:100%;vertical-align:middle;border:0 none;}
hr{margin:20px 0;border:0 none;height:1px;background:#c9c9c9;}

em,i{font-style: normal;}
/*** mobile_base ***/
	/*iphone 글자크기 자동조정 방지*/
	/*body{-webkit-text-size-adjust:none;} */ 
	/*안드로이드 주황색 포커스 제거 */
	/*body{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);} */ 
	/*iphone 폼요소 리셋 */
	/*input, select{-webkit-appearance:none;-webkit-border-radius:0}*/


/* ==========================================================================
   common
   ========================================================================== */


/* btnTop */
#btnTop{position:fixed;right:10px;bottom:90px;width:40px;height:40px;font-size:0;text-indent:-1000px;text-align:center;color:#fff;background:url(../../resources/image/common/btnTop.png) center center no-repeat #2c51d2;opacity:0.7;border-radius:100%;overflow:hidden;transform:scale(0);transition:0.3s;z-index: 100;}
#btnTop.on{transform:scale(1);}
#btnTop:hover, #btnTop:focus, #btnTop.hover{opacity:1;}

/* ==========================================================================
   Layout
   ========================================================================== */
#pageTit{font-size:0;width:0;height:0;opacity: 0;}
#wrap{width:100%;margin:auto;}
.inner{width:100%;max-width:1070px;box-sizing: border-box;padding:0 40px;margin:auto;position: relative;}

.animated{opacity: 0}

/* section */
.section1{height:330px;background-image: url('../../resources/image/contents/bg_title.png');background-size:cover;font-size:0;position: relative}
.section1 h1{width:410px;height:27px;background-image: url('../../resources/image/contents/title.png');position: absolute;left:23px;top:20px;background-size:100%;background-repeat: no-repeat;}
.section1 h2{width:758px;height:266px;position:absolute;left:50%;bottom: 0;background-image: url('../../resources/image/contents/title_main.png');margin-left:-379px;background-size:100%;background-repeat: no-repeat;}
.section1:before,
.section1::after{content:'';display: block;position: absolute;background-size:100%;bottom: -2px;background-size: 100%;background-repeat: no-repeat;}
.section1:before{width:523px;height:245px;background-image: url('../../resources/image/contents/ico_title_right.png');right:67px}
.section1::after{width:527px;height:159px;background-image: url('../../resources/image/contents/ico_title_left.png');left:83px;}

.section2{position: relative;letter-spacing: -0.05em;background: rgb(0,202,254);background: linear-gradient(4deg, rgba(0,202,254,1) 68%, rgba(3,231,251,1) 100%);padding:40px 0;overflow: hidden;}
.section2 .event_prd{padding:0 50px; padding-bottom:35px;width:100%; max-width:1120px; box-sizing: border-box;border:1px #297b90 solid;}
.section2 h5{font-weight: bold;font-size:40px;color:#fff;position: relative;font-style: italic;padding-top:40px;text-shadow: 3px 1px 7px #037694;line-height: 1.3;}
.section2 h5 span{font-size:32px;position: relative;display: block;left:-30px;font-weight: normal;}
.section2 h5 span i{font-weight: bold;font-style: italic;}
.section2 p{font-size:25px;margin-top:40px;color:#08333b;font-weight: bold;line-height:1.5;font-style: italic;}
.section2 ol{position: relative;display: inline-block;box-sizing: border-box;}
.section2 ol .qr a{width:123px;position: absolute;right: -100px;top: -20px;display: block;}
.section2 ol .qr img{width:100%;}
.section2 ol .qr a i{display: block;width:100%;padding: 7px 0 3px;background: #000;color:#fff;font-size: 19px;text-align: center;line-height: 1;}
.section2 ol li{color:#08333b;font-size:24px;font-weight: 100;box-sizing: border-box;padding-right: 50px;}
.section2 ol li strong{font-weight: 400}
.section2 em{font-size:25px;color:#08333b;display: block;margin-top:20px;font-weight: 400}
.section2 em + em{margin-top:0;}
.section2 em strong{font-weight: bold;}
.section2 .product_list{position: absolute;right: 90px;top:20px;width: 300px;padding-left: 200px;box-sizing: border-box;}
.section2 .product_list span{display: block;width:150px;position: relative;margin-bottom:50px;}
.section2 .product_list span.prd_item2{position: absolute;left:0;top:80px}
.section2 .product_list span .img_wrap{position: relative;display: block;text-align: center}
.section2 .product_list span em{display: block;background:#00cafe;text-align: center;color:#2b2848;line-height: 1;position: absolute;bottom:-30px;padding:8px 0;margin:0;font-size:27px;letter-spacing: -0.05em;white-space: nowrap;left:50%;transform: translateX(-50%)}

.section3{}
.section3 ul{position: relative;margin-left:-45px;font-size:0;padding-top:160px;padding-bottom:140px;}
.section3 ul li{width:33.3333%;box-sizing: border-box;padding-left:45px;display: inline-block;text-align: center;margin:60px 0;}
.section3 ul li .img_wrap{display: block;position: relative;background: #4c4c4c;display:block;padding-bottom:100%;height: 0;}
.section3 ul li .img_wrap .ico_location{position: absolute;background:#2b2848;color:#fff;font-size:25px;line-height: 30px;padding:4px 20px 0;left:-22px;top:-14px;z-index: 2;}
.section3 ul li .img_wrap img{position:absolute;width:100%;height: 100%;object-fit: cover;left:0;top:0;}
.section3 ul li strong{display: block;font-size:20px;color:#253d84;padding:10px 0;letter-spacing: -0.05em;position: relative}
.section3 ul li span{display: block;font-size:15px;line-height: 24px; color:#292929;white-space: pre-line;height:90px;}
.section3 ul li a{display: inline-block;font-size:16px;color:#fff;background:#253d84;line-height: 25px;font-weight: normal;margin-top:15px;padding:2px 8px 0;}

.bottom_text{background: #121a28;color:#fff;font-size:25px;padding:50px 0;}
.bottom_text .inner{}
.bottom_text .inner p:first-child{margin-top:0;}
.bottom_text .inner p{text-align: center;margin-top:40px;}
.bottom_text .inner p span{display:block;font-weight: normal}
.bottom_text .inner p span strong{font-weight: bold;}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

@media only screen and (max-width:1440px){
  .inner{padding:0 20px;}
  .section1:before{width:353px;height: 165px;right:20px;}
  .section1:after{width:330px;height:100px;left:20px;}
  
  .section1 h1{width:300px;height:22px;}
  .section1 h2{width:650px;margin-left:-350px;height:226px;}
  
  .section2{box-sizing: border-box;padding-left:20px;padding-right:20px;}
  .section2 ol .qr a{width:100px;height:100px;right: -80px;top: 0px;}
  .section2 ol .qr a i{padding: 7px 0 3px;font-size: 16px;}
  .section2 .product_list{padding-left: 140px;right: 20px;width:260px;}
  .section2 .product_list span{width:110px;}
  .section2 .product_list span img{max-width: 110px;max-height: 100px;}
  .section2 .product_list span em{font-size:20px;}
  
  .section3 ul{padding-top:50px;padding-bottom: 50px;}
}

@media only screen and (max-width:1024px){
  
  .section1{}
  .section1 h2{width:550px;margin-left: -275px;height: 193px;bottom:40px;}
  .section1:before{width:300px;height: 142px;}
  .section1:after{width:300px;height:90px;left:20px;}
  
  .section2{box-sizing: border-box;padding:20px;}
  .section2 h5{font-size:30px;}
  .section2 p{margin-top:30px;}
  .section2 .event_prd{padding:0 20px 20px;padding-left: 40px;}
  
  .section2 ol .qr a{width:80px;right:-50px;}
  .section2 ol .qr a i{padding: 7px 0 3px;font-size: 16px;}
  
  .section2 ol li{font-size:18px;}
  .section2 em{font-size:20px;}
  .section2 .product_list{width:200px;padding-left: 110px;}
  .section2 .product_list span{width:80px;}
  .section2 .product_list span img{max-width: 80px;max-height: 80px;}
  .section2 .product_list span em{font-size:16px;}
  
	.section3{}
  .section3 .inner{padding:0 40px;}
  .section3 ul{margin-left:-20px;padding-top:100px;padding-bottom:100px;}
  .section3 ul li{width:50%;padding-left:20px;margin:30px 0;}
  .section3 ul li span{white-space: normal}
  .section3 ul li .img_wrap .ico_location{font-size:16px;padding: 4px 10px;line-height: 18px;left:-5px}
}

@media only screen and (max-width:780px){
  .section1{height:280px;}
  .section1 h2{width:460px;margin-left: -230px;height: 173px;bottom: auto;top:50%;margin-top: -56px;}
  .section1:before{width:200px;height: 90px;right:10px;}
  .section1:after{width:200px;height:62px;left:10px;}
  
  .section2 h5{font-size: 30px;}
  .section2 h5 span{left:0;}
  .section2 em{font-size: 22px;}
  .section2 ol{box-sizing: border-box;padding-right:74px;}
  .section2 ol .qr a{width:70px;right:-10px;}
  .section2 ol .qr a i{font-size: 14px;}
  .section2 ol li{font-size:20px;padding-right: 0}
  .section2 ol li br{display: none;}
  .section2 .event_prd{padding-left:20px;}

  .section2 .product_list{position: relative;right: auto;top:0;width:100%;padding-left: 0;font-size: 0;padding-bottom: 30px;margin-top: 20px;padding-bottom:0;}
  
  .section2 .product_list span.prd_item2{position: relative;top:0;}
  .section2 .product_list span{display: inline-block;margin: 0;width: 33.3333%;vertical-align: bottom;box-sizing: border-box;padding:0 10px;}
  .section2 .product_list span em{font-size:14px;position: relative;bottom: 0;left:0;transform: none;white-space: normal;}
  .section2 .product_list span em i{display:block;margin-top:5px;}
  
  .section3 ul{padding:50px 0;}
  .section3 ul li strong{height:70px;padding:0;}
  .section3 ul li strong i{position: absolute;top:50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);left:0;width:100%;}
  .section3 ul li strong em{display: block;}
  .section3 ul li span{font-size:13px;line-height: 20px;height:60px;}
  
  .bottom_text{font-size:18px;}
}

@media only screen and (max-width:480px){
  
  .section1{height:220px;}
  .section1 h1{width:200px;height:15px;}
  .section1:before{width:120px;right:5px;height:58px;}
  .section1:after{width:120px;left:5px;height:38px;}
  
  .section1 h2{width:300px;margin-left: -150px;height: 107px;margin-top:-32px;}
  
  .section2 h5{font-size:25px;padding-top:20px;}
  .section2 h5 span{font-size:25px;}
  .section2 p{margin-top:20px;font-size: 20px;}
  .section2 ol{padding-right: 55px;}
  .section2 ol .qr a{width:55px;}
  .section2 ol .qr a i{font-size: 12px;}
  .section2 ol li{font-size:14px;}
  .section2 .product_list span{padding:0;}
  .section2 em{font-size:15px;}
  .section2 .product_list{margin-top:20px;margin-bottom:0;}
  
  .section3 .inner{padding:0 20px;}
  .section3 ul{margin-left:0;}
	.section3 ul li{width:100%;padding-left:0px;margin:30px 0;}

  .bottom_text{font-size:16px;padding:25px 0;}
  .bottom_text span em{display: block;}
}