@charset "utf-8";

/* 게시판 뷰페이지 공통 수정 */
.view-con img {height: auto !important;}
@media all and (max-width: 1300px) {
  .view-con table {width: 100% !important;}
}

/* UI */
.ui-intro-inner{width: 100%; height: 300px; display: table; background: url(../../images/sub/ui_background.png) no-repeat top center;}
.ui-intro-box{display: table-cell; vertical-align: middle; padding-left: 50%;}
.ui-intro-box::after{content:""; display: table; clear: both;}
.ui-intro-box h1{float: left; font-size: 30px; color: white; font-family: 'Noto Bold'; position: relative; padding: 5px 0; top: 19px;}
.ui-intro-box h1::before{content:""; display: block; position: absolute; width: 100%; height: 4px; top: 0; left: 0; background-color: white;}
.ui-intro-box h1::after{content:""; display: block; position: absolute; width: 100%; height: 4px; bottom: 0; left: 0; background-color: white;}
.ui-intro-box .ui-intro-text{float: left; margin-left: 40px; font-size: 19px; line-height: 31px; color: white;}
.ui-intro-box .ui-intro-text span{font-family: 'Noto Regular';}
.text-bold{font-family: 'Noto Medium';}
.ui-color-1{color: #faa635; font-family: 'Noto Medium';}
.ui-color-2{color: #00b622; font-family: 'Noto Medium';}
.ui-color-3{color: #00c6ff; font-family: 'Noto Medium';}

.logo-inner{background: url(../../images/sub/grid_background.png); padding: 50px 0;}
.logo-inner > div::after{content:""; display: table; clear: both;}
.logo-inner > div{margin-bottom: 60px;}
.logo-inner > div:last-child{margin-bottom: 0;}
.logo-box{text-align: center;}
.logo-box p{font-family: 'Noto Medium'; color: #111111; margin-bottom: 15px;}
.logo-line-2 .logo-box{width: 50%; float: left;}
.logo-line-3 .logo-box{width: calc(100%/3); float: left;}


@media all and (max-width: 1200px) {
  .ui-intro-box{padding-left: 40%;}
}

@media all and (max-width: 1023px) {
  .ui-intro-box{padding-left: 50%;}
  .ui-intro-box h1{float: none; top: 0; display: inline-block;}
  .ui-intro-box .ui-intro-text{float: none; margin-left: 0; margin-top: 10px;}
}

@media all and (max-width: 768px) {
  .ui-intro-box{padding-left: 0; text-align: center;}

  .logo-inner{padding: 30px;}
  .logo-inner > div{margin-bottom: 0px;}
  .logo-line-2 .logo-box{width: 100%; float: none; margin-bottom: 30px;}
  .logo-line-3 .logo-box{width: 100%; float: none; margin-bottom: 30px;}
}


/* 홍보대사소개 */
.idea-inner{position: relative;}
.idea-inner::after{content:""; display: table; clear: both;}
.idea-image{float: left; width: 55%;}
.idea-textbox{float: right; background-color: #074da3; overflow: hidden; width: 45%; margin-top: 6.5%;}
.idea-textbox::after{content:""; display: block; position: absolute; width: 100%; height: 100%; background: url(../../images/sub/idea_pattern.png); opacity: .1; top: 0; left: 0;}
.idea-text-area{position: relative; z-index: 2; color: white; padding: 33px 70px 33px 45px;}
.idea-text-area h1{font-family:"Noto Medium"; font-size: 26px; margin-bottom: 20px; padding-bottom: 20px; position: relative;}
.idea-text-area h1::after{content:""; display: block; position: absolute; width: 25px; height: 1px; bottom: 0; left: 0; background-color: white;}
.idea-text-area p{font-family: 'Noto Thin'; font-size: 18px; line-height: 30px;}

.idea-list{margin-top: 20px;}
.idea-list ul::after{content:""; display: table; clear: both;}
.idea-list ul{background-color: #f5f5f5; padding: 35px 70px 40px 70px;}
.idea-list li{float: left; width: calc(100%/3);}
.idea-list .idea-logo{width: 200px; margin: 0 auto;}
.idea-list .idea-text{text-align: center;}
.idea-list h1{font-family: 'Noto Medium'; font-size: 20px; color: #333333; margin: 25px 0 15px 0;}
.idea-list p{font-size: 16px; line-height: 26px; color: #666666;}



@media all and (max-width: 1250px) {
  .idea-image{max-width: 650px;}
  .idea-text-area{padding: 20px 35px 20px 20px;}
  .idea-text-area p{font-size: 16px; line-height: 25px;}
}

@media all and (max-width: 1023px) {
  .idea-list ul{padding: 35px 35px 40px 35px;}
  .idea-list .idea-logo{width: 150px;}
  .idea-image{width: 100%; max-width: none;}
  .idea-textbox{position: relative; max-width: none; width: 100%; margin-top: 10px;}
}

@media all and (max-width: 768px) {
  .idea-list li{width: 100%; float: none; margin-bottom: 20px;}
  .idea-list li:last-child{margin-bottom: 0;}
  .idea-list h1{margin: 15px 0 5px 0;}
}

@media all and (max-width: 500px) {
  .ebook-title{display: block}
  .ebook-btn{display: block; margin-top: 20px;}
}