.section {width:100%; height:auto;} .section:after {content: ''; display: block; clear: both; } /* com */ .layout {width:100%; max-width:1400px; margin:0 auto;padding:0 2%;box-sizing: border-box; } .h2 {width:100%; text-align:center; font-size:32px;} @media all and (min-width:1401px) { #ptomote{background: linear-gradient_(90deg, #c52522 50%, #9a8988 50%); height: auto;} #ptomote .ptomote_w{width:1400px; height: 346px; margin:-200px auto 0;} #ptomote .ptomote_w .photo{width:610px; padding:25px; height: 396px; background:#555; float:left; position:relative;} #ptomote .ptomote_w .photo .plus, #ptomote .ptomote_w .qna .plus, #ptomote .ptomote_w .video .plus, #ptomote .ptomote_w .cf .plus {position:absolute; right:0; top:0;} #ptomote .ptomote_w .qna{width:395px; padding:25px; height: 396px; background:#707bd4; float:left; position:relative;} #ptomote .ptomote_w .video{width:395px; padding:25px; height: 198px; background:#6e57b9; float:left; position:relative;} #ptomote .ptomote_w .cf{width:395px; padding:25px; height: 198px; background:#4d3b89; float:left; position:relative;} #ptomote .ptomote_w .photo .tit, #ptomote .ptomote_w .qna .tit, #ptomote .ptomote_w .video .tit, #ptomote .ptomote_w .cf .tit{padding:5px 15px 30px; color:#fff; font-size:28px; font-weight:500;} #ptomote .ptomote_w .qna .con, #ptomote .ptomote_w .video .con, #ptomote .ptomote_w .cf .con{padding:0px 15px 30px; color:#fff; } #ptomote .ptomote_w .qna .qna_img{position:absolute; bottom:30px; right:30px;} #ptomote .ptomote_w .video .promotion_img, #ptomote .ptomote_w .cf .cf_img{position:absolute; bottom:20px; right:30px;} #ptomote .ptomote_w .photo li{float:left; margin:0 25px; width:230px; height:auto;} #ptomote .ptomote_w .photo li p.photo_t{font-size:17px; color:#fff; letter-spacing:-1px; padding-top:10px;} #ptomote .ptomote_w .photo li p.photo_d {font-size:15px; color:#fff; letter-spacing:-1px; } #ptomote .ptomote_w a {color:#fff;}/* 20210216 추가 */ #ptomote .ptomote_w a:hover{ text-decoration:none;}/* 20210216 추가 */ #board{background:url(""); height:396px;} #board .board_w{width:1400px; height: 628px; margin:0 auto;} #board .board_w .news{width:610px; padding:25px; height: 396px; background:#958b80; float:left; position:relative;} #board .board_w .news .plus, #board .board_w .notice .plus {position:absolute; right:0; top:0;} #board .board_w .news li{float:left; margin:0 25px; width:230px; height:auto;} #board .board_w .news li p.news_t{font-size:17px; color:#fff; letter-spacing:-1px; padding-top:10px;} #board .board_w .news li p.news_d {font-size:15px; color:#fff; letter-spacing:-1px; } #board .board_w .news .tit{padding:5px 15px 30px; color:#fff; font-size:28px; font-weight:500;} #board .board_w .notice{float:left; width:790px;height:396px; padding:25px; background:#f2f2f2; position:relative;} #board .board_w .notice li{float:left; font-size:24px; color:#888; margin:0 15px; line-height:60px; height:60px; margin-bottom:30px;}/* 20210201 수정 */ #board .board_w .notice li.on{color:#000; font-size:26px;font-weight:600;border-bottom:2px solid #222;} #board .board_w .notice p{clear:both; padding:0 20px; line-height:60px; height:60px;border-bottom:1px solid #ddd; margin:0 15px;}/* 20210201 수정 */ #board .board_w .notice p .notice_c{background:url("../../../../../homepage/images/common/dot.gif") left 30px no-repeat; color:#000; font-size:16px; padding-left:20px;float:left; width:85%; line-height:60px; }/* 20210201 수정 */ #board .board_w .notice p .notice_d{float:right; display:block;font-size:13px; color:#888; line-height:60px; }/* 20210201 수정 */ } @media all and (max-width:1400px) { .mv_bwrap {height:auto !important; width:100%; min-width:1400px !important; } #ptomote{background: linear-gradient_(90deg, #c52522 50%, #9a8988 50%); height: auto;} #ptomote .ptomote_w{width:1400px; min-width:1400px; height: 346px; margin:-200px auto 0;} #ptomote .ptomote_w .photo{width:610px; padding:25px; height: 396px; background:#555; float:left; position:relative;} #ptomote .ptomote_w .photo .plus, #ptomote .ptomote_w .qna .plus, #ptomote .ptomote_w .video .plus, #ptomote .ptomote_w .cf .plus {position:absolute; right:0; top:0;} #ptomote .ptomote_w .qna{width:395px; padding:25px; height: 396px; background:#707bd4; float:left; position:relative;} #ptomote .ptomote_w .video{width:395px; padding:25px; height: 198px; background:#6e57b9; float:left; position:relative;} #ptomote .ptomote_w .cf{width:395px; padding:25px; height: 198px; background:#4d3b89; float:left; position:relative;} #ptomote .ptomote_w .photo .tit, #ptomote .ptomote_w .qna .tit, #ptomote .ptomote_w .video .tit, #ptomote .ptomote_w .cf .tit{padding:5px 15px 30px; color:#fff; font-size:28px; font-weight:500;} #ptomote .ptomote_w .qna .con, #ptomote .ptomote_w .video .con, #ptomote .ptomote_w .cf .con{padding:0px 15px 30px; color:#fff; } #ptomote .ptomote_w .qna .qna_img{position:absolute; bottom:30px; right:30px;} #ptomote .ptomote_w .video .promotion_img, #ptomote .ptomote_w .cf .cf_img{position:absolute; bottom:20px; right:30px;} #ptomote .ptomote_w .photo li{float:left; margin:0 25px; width:230px; height:auto;} #ptomote .ptomote_w .photo li p.photo_t{font-size:17px; color:#fff; letter-spacing:-1px; padding-top:10px;} #ptomote .ptomote_w .photo li p.photo_d {font-size:15px; color:#fff; letter-spacing:-1px; } #ptomote .ptomote_w a {color:#fff;}/* 20210216 추가 */ #ptomote .ptomote_w a:hover{ text-decoration:none;}/* 20210216 추가 */ #board{background:url(""); height:396px;} #board .board_w{width:1400px; height: 628px; margin:0 auto;} #board .board_w .news{width:610px; padding:25px; height: 396px; background:#958b80; float:left; position:relative;} #board .board_w .news .plus, #board .board_w .notice .plus {position:absolute; right:0; top:0;} #board .board_w .news li{float:left; margin:0 25px; width:230px; height:auto;} #board .board_w .news li p.news_t{font-size:17px; color:#fff; letter-spacing:-1px; padding-top:10px;} #board .board_w .news li p.news_d {font-size:15px; color:#fff; letter-spacing:-1px; } #board .board_w .news .tit{padding:5px 15px 30px; color:#fff; font-size:28px; font-weight:500;} #board .board_w .notice{float:left; width:790px;height:396px; padding:25px; background:#f2f2f2; position:relative;} #board .board_w .notice li{float:left; font-size:24px; color:#888; margin:0 15px; line-height:60px; height:60px; margin-bottom:30px;}/* 20210201 수정 */ #board .board_w .notice li.on{color:#000; font-size:26px;font-weight:600;border-bottom:2px solid #222;} #board .board_w .notice p{clear:both; padding:0 20px; line-height:60px; height:60px; border-bottom:1px solid #ddd; margin:0 15px;}/* 20210201 수정 */ #board .board_w .notice p .notice_c{background:url("../../../../../homepage/images/common/dot.gif") left 30px no-repeat; color:#000; font-size:16px; padding-left:20px;float:left; width:85%; line-height:60px; }/* 20210201 수정 */ #board .board_w .notice p .notice_d{float:right; display:block;font-size:13px; color:#888; line-height:60px; }/* 20210201 수정 */ } @media all and (max-width:1024px) { .mv_bwrap {height:auto !important; width:100%; min-width:100% !important; } .mv {width:100%; min-width:100% !important; } .mv img{width:100%; min-width:100%; } #ptomote{background: linear-gradient_(90deg, #c52522 50%, #9a8988 50%); height: auto;} #ptomote .ptomote_w{width:100%; min-width:100%; height: 346px; margin:0px auto 0;} #ptomote .ptomote_w .photo{width:50%; padding:15px; height: 396px; background:#555; float:left; position:relative;} #ptomote .ptomote_w .photo .plus, #ptomote .ptomote_w .qna .plus, #ptomote .ptomote_w .video .plus, #ptomote .ptomote_w .cf .plus {position:absolute; right:0; top:0; width:40px;} #ptomote .ptomote_w .qna{width:25%; padding:15px; height: 396px; background:#707bd4; float:left; position:relative;} #ptomote .ptomote_w .video{width:25%; padding:15px; height: 198px; background:#6e57b9; float:left; position:relative;} #ptomote .ptomote_w .cf{width:25%; padding:15px; height: 198px; background:#4d3b89; float:left; position:relative;} #ptomote .ptomote_w .photo .tit, #ptomote .ptomote_w .qna .tit{padding:5px 15px 30px; color:#fff; font-size:22px; font-weight:500;} #ptomote .ptomote_w .video .tit, #ptomote .ptomote_w .cf .tit{padding:5px 15px 10px; color:#fff; font-size:22px; font-weight:500;} #ptomote .ptomote_w .qna .con, #ptomote .ptomote_w .video .con, #ptomote .ptomote_w .cf .con{padding:0px 15px 10px; color:#fff; line-height:130%;} #ptomote .ptomote_w .qna .qna_img{width:80px;} #ptomote .ptomote_w .video .promotion_img, #ptomote .ptomote_w .cf .cf_img{width:45px; right:10px;} #ptomote .ptomote_w .photo li{float:left; margin:0 5%; width:40%; height:auto;} #ptomote .ptomote_w .photo li img{width:100%;} #ptomote .ptomote_w .photo li p.photo_t{font-size:17px; color:#fff; letter-spacing:-1px; padding-top:10px;} #ptomote .ptomote_w .photo li p.photo_d {font-size:15px; color:#fff; letter-spacing:-1px; } #board{background:url(""); height:396px;} #board .board_w{width:100%; min-width:100%; height: 628px; margin:0 auto;} #board .board_w .news{width:50%; padding:15px; height: 396px; background:#958b80; float:left; position:relative;} #board .board_w .news .plus, #board .board_w .notice .plus {position:absolute; right:0; top:0; width:40px;} #board .board_w .news li{float:left; margin:0 5%; width:40%; height:auto;} #board .board_w .news li img{width:100%;} #board .board_w .news li p.news_t{font-size:17px; color:#fff; letter-spacing:-1px; padding-top:10px;} #board .board_w .news li p.news_d {font-size:15px; color:#fff; letter-spacing:-1px; } #board .board_w .news .tit{padding:5px 15px 30px; color:#fff; font-size:22px; font-weight:500;} #board .board_w .notice{float:left; width:50%;height:396px; padding:15px; background:#f2f2f2; position:relative;} #board .board_w .notice li{float:left; font-size:20px; color:#888; margin:0 15px; line-height:60px; height:60px; margin-bottom:35px;}/* 20210201 수정 */ #board .board_w .notice li.on{color:#000; font-size:22px;font-weight:600;border-bottom:2px solid #222;} #board .board_w .notice p{clear:both; padding:0 0px; line-height:60px; height:60px; border-bottom:1px solid #ddd; margin:0 15px;}/* 20210201 수정 */ #board .board_w .notice p .notice_c{background:url("../../../../../homepage/images/common/dot.gif") left 30px no-repeat; color:#000; font-size:16px; padding-left:20px;float:left; width:100%; line-height:60px; }/* 20210201 수정 */ #board .board_w .notice p .notice_d{float:right; display:none;font-size:13px; color:#888; line-height:60px; }/* 20210201 수정 */ } /* 모바일 사이즈 수정 */ @media all and (max-width:768px) { #ptomote{ height: auto;} #ptomote .ptomote_w .photo{width:100%; padding:15px; height: auto; background:#555; float:left; position:relative;} #ptomote .ptomote_w .photo .plus, #ptomote .ptomote_w .qna .plus, #ptomote .ptomote_w .video .plus, #ptomote .ptomote_w .cf .plus {position:absolute; right:0; top:0; width:40px;} #ptomote .ptomote_w .qna{width:100%; padding:15px; height: auto; min-height:120px;background:#707bd4; float:left; position:relative;} #ptomote .ptomote_w .video{width:100%; padding:15px; height: auto; min-height:120px;background:#6e57b9; float:left; position:relative;} #ptomote .ptomote_w .cf{width:100%; padding:15px; height: auto; min-height:120px;background:#4d3b89; float:left; position:relative;} #ptomote .ptomote_w .photo .tit {padding:5px 15px 20px; color:#fff; font-size:22px; font-weight:500;} #ptomote .ptomote_w .qna .tit, #ptomote .ptomote_w .video .tit, #ptomote .ptomote_w .cf .tit{padding:5px 15px 10px; color:#fff; font-size:22px; font-weight:500;} #ptomote .ptomote_w .qna .con, #ptomote .ptomote_w .video .con, #ptomote .ptomote_w .cf .con{padding:0px 15px 10px; color:#fff; line-height:130%;} #ptomote .ptomote_w .qna .qna_img, #ptomote .ptomote_w .video .promotion_img, #ptomote .ptomote_w .cf .cf_img{width:45px; right:30px;} #ptomote .ptomote_w .photo li{float:left; margin:0 7%; width:36%; height:auto;} /* 2021 02 02 개발자 수정 메인 이미지 사이즈 조절용 */ #ptomote .ptomote_w .photo li div a{width:100%;} /* 2021 02 02 개발자 수정 메인 이미지 사이즈 조절용 */ #ptomote .ptomote_w .photo li p.photo_t{font-size:17px; color:#fff; letter-spacing:-1px; padding-top:10px;} #ptomote .ptomote_w .photo li p.photo_d {font-size:15px; color:#fff; letter-spacing:-1px; } #board{background:url(""); height:auto;} #board .board_w{width:100%; min-width:100%; height: 628px; margin:0 auto;} #board .board_w .news{width:100%; padding:15px; height: auto; background:#958b80; float:left; position:relative;} #board .board_w .news .plus, #board .board_w .notice .plus {position:absolute; right:0; top:0; width:40px;} #board .board_w .news li{float:left; margin:0 5%; width:40%; height:auto;} #board .board_w .news li img{width:100%;} #board .board_w .news li p.news_t{font-size:17px; color:#fff; letter-spacing:-1px; padding-top:10px;} #board .board_w .news li p.news_d {font-size:15px; color:#fff; letter-spacing:-1px; } #board .board_w .news .tit{padding:5px 15px 20px; color:#fff; font-size:22px; font-weight:500;} #board .board_w .notice{float:left; width:100%;height:auto; padding:15px; background:#f2f2f2; position:relative;} #board .board_w .notice li{float:left; font-size:16px; color:#888; margin:0 15px; line-height:60px; height:60px; margin-bottom:20px;} #board .board_w .notice li.on{color:#000; font-size:20px;font-weight:600;border-bottom:2px solid #222;} #board .board_w .notice p{clear:both; background:url("../../../../../homepage/images/common/dot.gif") left -230px no-repeat; padding:0 0px; height:50px; line-height:50px; border-bottom:1px solid #ddd; margin:0 15px;} #board .board_w .notice p .notice_c{background:url("../../../../../homepage/images/common/dot.gif") left 23px no-repeat; color:#000; font-size:15px; padding-left:20px;float:left; width:100%; line-height:50px; } #board .board_w .notice p .notice_d{float:right; display:none;font-size:13px; color:#888; line-height:50px; } } @media all and (max-width:640px) { } @media all and (max-width:400px) { #board .board_w .notice p .notice_c{ font-size:14px; }/* 20210201 수정 */ } /* mv : main visual */ /* board */ /* ban */ .qnawrap {width:100%; max-width:100%; margin:0 auto; padding:150px 0; height:auto; overflow:hidden; background:#ededed;} .qnawrap .h2{font-size:45px;font-weight:600; color:#000;} .qnawrap .h2 span {width:100%; font-size:22px; font-weight:300 !important; padding:30px 0 50px 0; display:block; position: relative;} .item{ position:relative; height:auto; width:100%; max-width:1900px; } .content-slider ul{ width:100%; max-width:1400px; } .content-slider li{ text-align: left; padding-left:10px; color: #000; height:auto; padding-bottom:50px; } .content-slider h3 { margin: 0; padding: 70px 0; } .qnawrap_t{font-size:22px; font-weight:600;margin-top:20px;letter-spacing:-1px; height:auto; position:relative;} .qnawrap_c{font-size:14px; font-weight:400;margin-top:20px;letter-spacing:-1px;height:auto; position:relative;} .qnawrap_btn{font-size:14px; font-weight:400; border:2px solid #000; color:#555; width:100px; text-align:center;margin:20px 0;height:auto; position:relative;} .qnawrap_btn:hover { background:#000; color:#fff; width:100px; text-align:center;margin:20px 0;height:auto; position:relative;} @media all and (max-width:1024px) { } @media all and (max-width:768px) { } /* partner */ .partner_pad { clear: both;width:100%; max-width:100%; margin:0 auto; height:150px; background:#fff;} .partner{width:100%; max-width:100%; margin:0 auto; height:auto; overflow:hidden; background:#fff;} .partner .h2{font-size:45px;font-weight:600; color:#000;} .partner .h2 span {width:100%; font-size:22px; font-weight:300 !important; padding:30px 0 50px 0; display:block; position: relative;} .partner .partner_b {text-align:center; width:100%; /*max-width:1400px;*/margin:0 auto;} .partner .partner_b li {float:left; height:50px;line-height:50px; padding:0px; } /* footer */ @media all and (max-width:500px) { } @media all and (max-width:400px) { } * {box-sizing: border-box} .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1900px; position: relative; margin: auto;} .slideshow-container img{width:100%;} /* Next & previous buttons */ .prev{ cursor: pointer; position: absolute; top: 48%; left: 10px; width: auto; padding: 8px 16px; margin-top: -22px; color: white; font-weight: 300; font-size: 18px; transition: 0.6s ease; border:1px solid #5a6167; height:50px; background-color: #4f545a; z-index:2000; user-select: none;} .prenex_bg{background-color: #4f545a; border:1px solid #5a6167;} /* Position the "next button" to the right */ .next { cursor: pointer; position: absolute; top: 48%; right: 10px; width: auto; padding: 8px 16px; margin-top: -22px; color: white; font-weight: 300; font-size: 18px; transition: 0.6s ease; border:1px solid #5a6167; height:50px; background-color: #4f545a; z-index:2000; user-select: none;} /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); list-style:none; text-decoration:none !important;} /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;} /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;} /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;} .active, .dot:hover { background-color: #;} /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;} @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} }