@charset "utf-8"; body{text-align: left;font-size:16px;color:#333;line-height:1.4;font-family:'Noto Sans KR',sans-serif;font-weight:400;letter-spacing:-0.05em;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,span,form,fieldset,p,button,address,table, tbody, tfoot, thead, th, tr, tdvideo, tt{margin:0;padding:0;box-sizing: border-box;} header,article,aside,canvas,details,figcaption,figure,footer,hgroup,menu,nav,section,summary,mark {display:block;margin: 0; padding: 0;box-sizing: border-box;} h1,h2,h3,h4,h5,h6{font-family:'Noto Sans KR',sans-serif;font-size:16px;font-weight:500;box-sizing: border-box;} input,button,textarea,select,table{font-family:'Noto Sans KR',sans-serif;font-size:16px;box-sizing: border-box;} input,button,textarea,select{background-color:#fff;border-radius:0;box-sizing: border-box;} /*-webkit-appearance: none*/ button,textarea{-webkit-appearance: none} img,fieldset,iframe{border:0 none} li{list-style:none} img,input,select,button,textarea{vertical-align:middle;box-sizing: border-box;} input[type=radio]{border-radius:0px 0px;-webkit-border-radius: 50%;} input[type=radio]:checked{background:#333;} img{max-width:100%} em,address,optgroup{font-style:normal} label,button{cursor:pointer} label{top:2px;position: relative;} button{margin:0;padding:0;border:0;background:none} a,::after,::before{box-sizing: border-box} a{text-decoration: none;color: #555;color: inherit;} hr{display:none} legend,caption{font-size:0; width:0; height:0; line-height:0;overflow:hidden;text-indent:-9999px} p{text-align:left;word-wrap: break-word;} dt,dd,li{word-wrap: break-word;} table {width:100%;font-weight:400;border-spacing:0;border-collapse: collapse} /* hidden contents */ .skip,.hidden{position:absolute; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden; z-index:-1} .skip:focus{top:0;left:0;display:inline-block;width:auto;height:auto;padding:0 30px;font-size:14px;line-height:40px;color:#fff;background:#007cc3;z-index:10} #skip_navi {position:absolute;top:0;height:0px;width:100%;z-index:150;} #skip_navi a {display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center;color:#fff;white-space:nowrap;} #skip_navi a:focus, #skip_navi a:active {display:block;top:0;width:100%;height:45px;padding:10px 0;background:#021b87;} #wrapper{position:relative;width:100%;height:100%} /* ---- 상단영역 ---- */ #header{position:fixed;width:100%;background:#f4f7fc;z-index:150;transition:.2s} #header .head_box{position:relative;margin:0 auto; /*max-width:1700px;*/ max-width:1420px; height:120px;padding:0 40px;} #header .head_box .logo{position:absolute;top:26px;left:0;z-index:20} #header .head_box .logo a{display:block} #header .head_box .logo a:hover{text-decoration:none} #header .head_box .logo span{display:inline-block;margin-left:10px;font-size:24px;vertical-align:middle;line-height:47px;} #header .head_box .topLink{position:absolute;top:13px;right:0} #header .head_box .topLink ul::after{display:block;clear:both;content:''} #header .head_box .topLink ul li{position:relative;display:inline-block;margin:0 10px;} #header .head_box .topLink ul li::after{position:absolute;top:50%;left:-10px;margin-top:-8px;width:0;height:17px;content:'';border-left:1px solid #bababa} #header .head_box .topLink ul li:first-child::after{display:none} #header .head_box .topLink ul li a{position:relative;display:block;padding-left:30px;font-size:15px;line-height:40px;} #header .head_box .topLink ul li a::before{position:absolute;top:50%;left:0;width:20px;height:20px;content:'';background-repeat:no-repeat;background-position:left top;transform:translateY(-50%);-webkit-transform:translateY(-50%)} #header .head_box .topLink .homeGo a{color:#025bac;font-weight:500} #header .head_box .topLink .homeGo a::before{background-image:url('/_res/deu/_share/img/ic_glob_top1.png')} #header .head_box .topLink .login a::before{background-image:url('/_res/deu/_share/img/ic_glob_top2.png')} #header .head_box .btnMenu{display:none} #header .ico-link{position:relative;top:-2px;margin-left:5px;flex-shrink:0} #gnb{padding-right:160px;} #gnb .gnb > li{width:130px;} #gnb .gnb > li > a{line-height:120px;} /* ---- 하단영역 ---- */ #footer {position:relative;width:100%;background:#052653} #footer .footTop{padding:0 40px;border-bottom:1px solid rgba(255,255,255,0.2)} #footer .footTop .footWrap{position:relative;margin:0 auto;max-width:1300px;} #footer .footTop .footWrap::after{display:block;clear:both;content:''} #footer .footTop .footWrap .footMenu{float:left;padding:20px 0;} #footer .footTop .footWrap .footMenu li{position:relative;display:inline-block;padding:0 15px} #footer .footTop .footWrap .footMenu li:first-child{padding-left:0} #footer .footTop .footWrap .footMenu li:last-child{padding-right:0} #footer .footTop .footWrap .footMenu li a{display:block;font-size:15px;color:#fff;line-height:30px} #footer .footTop .footWrap .fLinkCon{float:right;} #footer .footTop .footWrap .fFamily{float:left;margin-left:-1px} #footer .footTop .footWrap .fFamily > button{position:relative;width:180px;height:70px;font-size:15px;color:#fff;text-indent:25px;text-align:left;border-left:1px solid #375175;border-right:1px solid #375175;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;} #footer .footTop .footWrap .fFamily > button::after{position: absolute; top: 50%; right: 25px;content: "";width:12px;height:12px;margin-top: -3px;border:1px solid #fff;border-width:1px 1px 0 0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)} #footer .footTop .footWrap .fFamily > button.on::after{margin-top:-8px;transform:rotate(135deg);-webkit-transform:rotate(135deg)} #footer .footTop .footWrap .fFamily > button:hover, #footer .footTop .footWrap .fFamily > button.on{background:rgba(0,0,0,0.5)} #footer .footTop .footWrap .fFamily .fFamCon{display:none;position:fixed;left:0;top:0;right:0;bottom:0;overflow:auto;background:rgba(0,0,0,0.5);z-index:500} #footer .footTop .footWrap .fFamily .fFamCon .fFambox1{position:absolute;top:0;left:0;display:table;width:100%;height:100%} #footer .footTop .footWrap .fFamily .fFamCon .fFambox2{display:table-cell;padding:20px;width:100%;height:100%;text-align:center;vertical-align:middle} #footer .footTop .footWrap .fFamily .fFamCon .box{position:relative;display:inline-block;max-width:1076px;overflow:hidden;border-radius:20px;text-align:left;z-index:5;padding:0;border:none} #footer .footTop .footWrap .fFamily .fFamCon .box .btnFmClose{position:absolute;top:0;right:0;width:76px;height:76px;text-indent:-999px;overflow:hidden;background:url('/_res/deu/_share/img/ic_close.png') no-repeat center center;} #footer .footTop .footWrap .fFamily .fFamCon h2{padding:0 20px;font-size:21px;color:#fff;line-height:76px;background:#084bbb;border-radius:20px 20px 0 0} #footer .footTop .footWrap .fFamily .fFamCon .link_con{padding:40px;height:600px;overflow:auto;background:#fff} #footer .footTop .footWrap .fFamily .fFamCon .link_con h3{margin:30px 0 20px;font-size:20px;font-weight:700;line-height:1} #footer .footTop .footWrap .fFamily .fFamCon .link_con h3:first-child{margin-top:0} #footer .footTop .footWrap .fFamily .fFamCon .link_con h4{margin:30px 0 20px;font-size:18px;color:#084bbb;font-weight:500;line-height:1} #footer .footTop .footWrap .fFamily .fFamCon .link_con ul::after{display:block;clear:both;content:''} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul > li{position:relative;float:left;margin-bottom:10px;padding-left:10px;width:50%;font-weight:500} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul > li::before{position:absolute;top:12px;left:0;width:4px;height:4px;content:'';background:#084bbb} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul.li4 > li{width:25%} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul > li > a{display:block;} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul > li > ul > li{display:inline-block;margin-right:10px;color:#696c70;font-weight:400} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul > li > ul > li > a{display:block;color:#696c70} #footer .footTop .footWrap .fFamily .fFamCon .link_con .line{display:block;margin:30px 0;height:0;border:0;border-top:2px dotted #e4e4e4;} #footer .footTop .footWrap .fFamily .fFamCon .bg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2} #footer .footBottom{margin:0 auto;padding:40px 40px;max-width:1380px} #footer .footBottom address{clear:both;display:block;margin-bottom:3px;font-size:16px;color:#fff;font-weight:300} #footer .footBottom address span{display:inline-block;margin:0 10px} #footer .footBottom small{font-size:15px;color:rgba(255,255,255,0.1);font-weight:300} #footer .botBtTop{display:none;position:fixed;bottom:50px;right:20px;padding-top:3px;width:66px;height:66px;font-size:18px;color:#fff;background:#0381ed;border-radius:50%;z-index:2} #mGnb{display:none;} /* ========================================================================= 반응형 레이아웃 css ========================================================================= */ /* PC / TABLET Device */ @media all and (min-width:641px){ #lnbCon.fix #lnb{position:fixed;top:0;left:0;margin:0;width:100%;height:70px;max-width:100%;z-index:300} } /* PC Device */ @media all and (min-width:1201px){ #header:before{position:absolute;top:0;width:100%;left:0;background-color:#fff;content:"";height:120px;border-bottom:1px solid #ddd} #mGnb{display:none;} #lnb{position:relative;text-align:center;border-bottom:1px solid #ddd;z-index:90} #lnb ul li{position:relative;display:inline-block;height:56px} #lnb ul li::after{position:absolute;top:50%;left:0;width:0;height:16px;content:'';border-left:1px solid #e1e1e1;transform:translateY(-50%);-webkit-transform:translateY(-50%)} #lnb ul li:first-child::after{display:none} #lnb ul li a{position:relative;display:block;padding:0 30px;font-size:18px;text-decoration:none;} #lnb ul li a span{position:relative;display:block;line-height:59px;} #lnb ul li a span::after{position:absolute;left:50%;bottom:0;width:0;height:3px;content:'';background:#084bbb;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;} #lnb ul li a:hover, #lnb ul li.on a{color:#084bbb;} #lnb ul li a:hover span::after, #lnb ul li.on a span::after{left:0;width:100%} } /* PC Device */ @media all and (max-width:1400px){ #gnb{padding-right:120px} #gnb .gnb > li{width:100px} #gnb .gnb > li > a{font-size:17px} #gnb .gnb .gnb-2ul > li a{font-size:15px} } /* TABLET Device */ @media all and (max-width:1200px){ #header{background-color:#fff;padding:0} #header .head_box .logo{left:20px} #header .head_box .topLink{display:none} #header .head_box .btnMenu{display:block;position:absolute;right:0;top:0;width:100px;height:100px;text-indent:-999px;overflow:hidden;z-index:110} #header .head_box .btnMenu span{position:relative;display:block;margin:0 auto;width:30px;height:4px;background:#025bac;border-radius:2px} #header .head_box .btnMenu span::before{position:absolute;top:-12px;right:0;width:40px;height:4px;content:'';background:#025bac;border-radius:2px} #header .head_box .btnMenu span::after{position:absolute;top:12px;right:0;width:40px;height:4px;content:'';background:#025bac;border-radius:2px} #gnb{display:none} /* 모바일메뉴 */ #mGnb{display:block !important;position:fixed;top:0;right:-100%;padding-top:180px;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:500;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;} #mGnb .mGlobTop{position:absolute;top:0;left:0;width:100%;z-index:5} #mGnb .mGlobTop .mGlobLogo{padding:30px;height:100px;background:#084bbb;} #mGnb .mGlobTop .mGlobLogo a{display:inline-block} #mGnb .mGlobTop .mGlobLogo span{display:inline-block;margin-left:10px;font-size:20px;color:#fff;vertical-align:middle;line-height:47px;} #mGnb .mGlobTop .mTopLink{background:#0581e9;text-align:center;} #mGnb .mGlobTop .mTopLink ul::after{display:block;clear:both;content:''} #mGnb .mGlobTop .mTopLink ul li{float:left;width:50%;border-left:1px solid #084bbb} #mGnb .mGlobTop .mTopLink ul li:first-child{border-left:0} #mGnb .mGlobTop .mTopLink ul li a{display:block;font-size:18px;color:#fff;line-height:80px;} #mGnb .mGlobTop .mTopLink ul li a span{position:relative;display:inline-block;padding-left:30px;} #mGnb .mGlobTop .mTopLink ul li a span::before{position:absolute;top:50%;left:0;width:20px;height:20px;content:'';background-repeat:no-repeat;background-position:left bottom;transform:translateY(-50%);-webkit-transform:translateY(-50%)} #mGnb .mGlobTop .mTopLink ul li.homeGo a span::before{background-image:url('/_res/deu/_share/img/ic_glob_top1.png')} #mGnb .mGlobTop .mTopLink ul li.login a span::before{background-image:url('/_res/deu/_share/img/ic_glob_top2.png')} #mGnb > ul{width:100%;height:100%;overflow:auto;} #mGnb > ul > li{position:relative;font-size:21px;background:#084bbb;border-top:1px solid #5381d0} #mGnb > ul > li.has-sub::after{position:absolute;top:35px;right:20px;width:17px;height:11px;content:'';background:url('/_res/deu/_share/img/ic_mbgnb_dot.png') no-repeat;background-size:100%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;transform:rotate(-180deg);-webkit-transform:rotate(-180deg)} #mGnb > ul > li > button{position:absolute;top:0;left:0;width:100%;height:80px;text-indent:-999px;overflow:hidden;} #mGnb > ul > li.open::after{transform:rotate(0);-webkit-transform:rotate(0)} #mGnb > ul > li > a{display:block;padding:0 40px;font-size:18px;color:#fff;line-height:80px} #mGnb > ul > li.open > a{color:#fff;font-weight:500} #mGnb > ul > li > ul{display:none;padding:20px 60px;background:#023790;} #mGnb > ul > li > ul > li{position:relative;} #mGnb > ul > li > ul > li.has-sub::after{position:absolute;top:15px;right:20px;width:13px;height:13px;content:'';background:url('/_res/deu/_share/img/ic_mbgnb_s_off.png') no-repeat;background-size:100%;} #mGnb > ul > li > ul > li.open::after{background:url('/_res/deu/_share/img/ic_mbgnb_s_on.png') no-repeat;} #mGnb > ul > li > ul > li > a{display:block;padding:10px 0;font-size:18px;color:#fff;} #mGnb > ul > li > ul > li > a:hover, #mGnb > ul > li > ul > li.open > a{color:#019687} #mGnb > ul > li > ul > li ul{display:none;padding:8px 0;background:#fff;border-top:1px solid #5381d0} #mGnb > ul > li > ul > li ul li a{display:block;padding:3px 35px;font-size:14px;color:#363c3f} #mGnb .btnMenuClose{display:block;position:absolute;top:0;right:0;width:100px;height:100px;text-indent:-999px;overflow:hidden;z-index:100} #mGnb .btnMenuClose::before{position:absolute;top:50%;left:50%;margin-left:-20px;width:40px;height:3px;content:'';transform: rotate(-45deg);-webkit-transform: rotate(-45deg);background:#fff;} #mGnb .btnMenuClose::after{position:absolute;top:50%;left:50%;margin-left:-20px;width:40px;height:3px;content:'';transform: rotate(45deg);-webkit-transform: rotate(45deg);background:#fff;} #mGnb.on{right:0} .fix_bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:200} #wrapper.wra_box{position:fixed;top:0;width:100%;height:auto;z-index:200;} .subVisual{height: 185px;} #lnb{margin-bottom:40px} #lnb ul::after{display:block;clear:both;content:''} #lnb ul li{float:left;text-align:center;} #lnb ul li a{display:block;margin:-1px 0 0 -1px;font-size:18px;line-height:50px;background:#fff;border:1px solid #ddd} #lnb ul li.on a{color:#fff;background:#084bbb;border-color:#084bbb} #lnb ul li:first-child:nth-last-child(2), #lnb ul li:first-child:nth-last-child(2) ~ li{width:50%} #lnb ul li:first-child:nth-last-child(3), #lnb ul li:first-child:nth-last-child(3) ~ li{width:33.33%} #lnb ul li:first-child:nth-last-child(4), #lnb ul li:first-child:nth-last-child(4) ~ li{width:25%} #lnb ul li:first-child:nth-last-child(5), #lnb ul li:first-child:nth-last-child(5) ~ li{width:33.33%} #lnb ul li:first-child:nth-last-child(6), #lnb ul li:first-child:nth-last-child(6) ~ li{width:33.33%} #lnb ul li:first-child:nth-last-child(7), #lnb ul li:first-child:nth-last-child(7) ~ li{width:33.33%} #lnb ul li:first-child:nth-last-child(8), #lnb ul li:first-child:nth-last-child(8) ~ li{width:33.33%} .etcBtn > button{display:none} #footer .footTop{border-bottom:0} #footer .footTop .footWrap .footMenu{float:none} #footer .footTop .footWrap .fLinkCon{float:none} #footer .footTop .footWrap .fLinkCon::after{display:block;clear:both;content:''} #footer .footTop .footWrap .fFamily > button{border: 1px solid #375175;} #footer .botBtTop{position:fixed;top:auto;right:30px;bottom:30px;} } /* TABLET Device */ @media all and (max-width:800px){ } /* Mobile Device */ @media all and (max-width:640px){ body, table{font-size:14px;line-height:1.5} textarea, select, input, button{font-size:14px;line-height:1.4} #header .head_box{height:60px;padding:0;} #header .head_box .logo{top:6px;left:15px} #header .head_box .logo img{width:100px} #header .head_box .logo span{font-size:15px} #header .head_box .btnMenu{top:0;width:60px;height:60px} #header .head_box .btnMenu span{width:16px;height:2px} #header .head_box .btnMenu span::before{top: -8px;width:22px;height:2px} #header .head_box .btnMenu span::after{top: 8px;width:22px;height:2px} #mGnb{padding-top:108px} #mGnb .mGlobTop .mGlobLogo{padding:5px 15px;height:60px} #mGnb .mGlobTop .mGlobLogo img{width:100px} #mGnb .mGlobTop .mGlobLogo span{font-size:15px} #mGnb .mGlobTop .mTopLink ul li a{font-size: 15px;line-height: 50px;} #mGnb .btnMenuClose{width:60px;height:60px;} #mGnb .btnMenuClose::after{margin-left:-12px;width:24px;height:2px} #mGnb .btnMenuClose::before{margin-left:-12px;width:24px;height:2px} #mGnb > ul > li > a{padding:0 18px;font-size:16px;line-height:50px} #mGnb > ul > li > button{height:50px} #mGnb > ul > li.has-sub::after{top:20px} #mGnb > ul > li > ul{padding: 10px 30px;} #mGnb > ul > li > ul > li > a{padding:8px 0;font-size: 14px;} .pageGuid{top:40px;right:0;width:100%;text-align:center} .etcBtn button{width: 30px;height: 30px;background-size: 12px;background-position:6px center} .etcBtn .btnSns ul{top: 35px;right:0} .etcBtn .btnSns ul li a{width:30px;height:30px} .subVisual{padding-top:30px;height:100px;} .subVisual h1{font-size:25px} .subVisual h1 span{font-size:12px} #container{padding-top:60px} #container #content .subConBox{margin-top:30px;padding:0 15px 30px} #lnb{margin-bottom:30px} #lnb ul li a{font-size: 14px;line-height: 40px;} #footer{text-align:center} #footer .footTop{padding:0;border-bottom:0} #footer .footTop .footWrap{padding:20px 0 0} #footer .footTop .footWrap .footMenu{margin-bottom:15px;padding:0} #footer .footTop .footWrap .footMenu li{padding:0 5px} #footer .footTop .footWrap .footMenu li a{font-size: 12px;line-height: 25px;} #footer .footTop .footWrap .fLinkCon{margin:0 auto;width:250px} #footer .footTop .footWrap .fFamily{position:relative;width:50%} #footer .footTop .footWrap .fFamily > button{width:100%;height: 40px;font-size: 12px;text-indent: 15px;border:1px solid rgba(255,255,255,0.2)} #footer .footTop .footWrap .fFamily > button::after{right:15px;width:8px;height:8px} #footer .footTop .footWrap .fFamily .fFamCon .fFambox2{padding:10px} #footer .footTop .footWrap .fFamily .fFamCon h2{padding: 0 20px;font-size: 18px;line-height: 50px;} #footer .footTop .footWrap .fFamily .fFamCon .box .btnFmClose{width: 50px;height: 50px;background-size: 13px} #footer .footTop .footWrap .fFamily .fFamCon .link_con{padding:15px;height: calc(100vh - 70px);} #footer .footTop .footWrap .fFamily .fFamCon .link_con h3{margin: 20px 0 10px;font-size: 18px;} #footer .footTop .footWrap .fFamily .fFamCon .link_con h4{margin: 20px 0 10px;font-size: 16px;} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul > li{margin-bottom:5px;padding:0 10px;width:50%} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul > li > a{line-height:1.3} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul.li4 > li{width:50%} #footer .footTop .footWrap .fFamily .fFamCon .link_con > ul > li::before{top:6px} #footer .footTop .footWrap .fFamily .fFamCon .link_con .line{margin:20px 0} #footer .footBottom{padding:20px 10px} #footer .footBottom address{margin-bottom:20px;font-size: 12px;} #footer .footBottom address span{margin: 0 5px;} #footer .footBottom small{font-size:12px} #footer .botBtTop{right:10px;bottom:10px;width:40px;height:40px;font-size: 11px;z-index:50} #footer .botBtTop::before{top:10px;margin-left: -3px;width: 6px;height: 6px;} } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; width: 100%; height: 100%; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; } .mConBox5 .mCon4 .mConSlide3 .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width:calc(92% / 5); height: 100%; margin-right:2%; position: relative; } .mConBox5 .mCon4 .mConSlide3 .swiper-slide:last-child{margin-right:0;} /* Fade */ .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; opacity:1 !important } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: #1064c3; border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 0; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* ---- 중간영역 ---- */ #container{position:relative;padding-top:100px;height:100%;} #container #content{position:relative;min-height:600px;} #container #content::after{display:block;clear:both;content:''} #container #content .nsubConBox{position:relative;margin:50px auto 0;padding:0 30px 80px;max-width:1360px;} #container #content .nsubConBox{position:relative;margin:50px auto 0;padding:0;max-width:100%;} .ns1_1_con{position:relative;} .ns1_1_con_inner{font-size:0; text-align:center;} .ns1_left{width:calc(50% + 84px); display:inline-block; vertical-align:top; text-align:right; position:relative; z-index:10;} .ns1_left .ns1_blue_title{width:140px; height:140px; border-top-right-radius:43px; background:#006dcb; position:relative; text-align:right; display:inline-block; vertical-align:top;} .ns1_left .ns1_blue_title span{color:#fff; font-family:'Roboto-Black'; font-size:60px; letter-spacing:0; line-height:1; position:absolute; right:30.5%; bottom:11%;} .ns1_left .ns1_img{margin-top:-99px; padding-right:43px;} .ns1_left .ns1_img .ns1_img_pc{display:block; box-shadow:20px 0 20px rgba(15,29,64,0.13);} .ns1_left .ns1_img .ns1_img_mb{display:none; box-shadow:15px 0 20px rgba(15,29,64,0.13);} .ns1_right{width:calc(50% - 84px); display:inline-block; vertical-align:top; text-align:left;} .ns1_right:after{background:#eee; content:""; position:absolute; top:108px; right:0px; width:calc(50vw + 56px); height:calc(100% - 108px);} .ns1_right dl{padding-left:38px; padding-top:27px; padding-bottom:65px; padding-right:80px; z-index:5; position:relative;} .ns1_right dl dt{font-size:40px; letter-spacing:-0.025em; color:#444; font-weight:bold; line-height:1.5; padding-bottom:84px;} .ns1_right dl dd{font-size:18px; letter-spacing:-0.025em; color:#444; font-weight:400; line-height:1.56; padding-left:2px;} @media all and (max-width:1440px){ #gnb .gnb > li{margin:0 10px !important;} } @media all and (min-width:1361px){ .ns1_1_con_inner{max-width:1650px; margin:0 auto;} } @media all and (max-width:1360px){ .ns1_left{width:calc(30% + 84px);} .ns1_right{width:calc(70% - 84px);} .ns1_right:after{width:calc(70vw + 56px);} } @media all and (max-width:1200px){ .ns1_left{width:calc(35% + 84px);} .ns1_right{width:calc(65% - 84px);} .ns1_right:after{width:calc(65vw + 56px);} } @media all and (max-width:1024px){ .ns1_left .ns1_img{margin-top:-86px; padding-right:28px;} .ns1_left .ns1_blue_title{width:120px; height:120px; border-top-right-radius:36px;} .ns1_left .ns1_blue_title span{font-size:50px;} .ns1_left{width:92%; margin:0 auto;} .ns1_left .ns1_img .ns1_img_pc{width:100%;} .ns1_right{width:100%; margin-top:-10%; background:#eee; padding-top:10%;} .ns1_right:after{display:none;} .ns1_right dl{padding:6% 10% 6% 10%;} .ns1_right dl dt{padding-bottom:4%; font-size:34px;} .ns1_right dl dd{font-size:16px; line-height:1.72;} .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(1) {width: 100%;} /* two items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(2), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(2) ~ li{width:calc(98% / 2);} /* three items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(3), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(3) ~ li{width:calc(96% / 3);} /* four items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(4), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(4) ~ li{width:calc(94% / 4);} /* five items */ } @media all and (max-width:800px){ .mConBox5 .mCon4 .mConSlide3 .swiper-slide{width:calc(94% / 2);} .mConBox5 .mCon4 .mConSlide3 .swiper-slide:nth-child(2n){margin-right:0;} .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(1) {width: 100%;} /* two items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(2), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(2) ~ li {width:calc(98% / 2);} /* three items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(3), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(3) ~ li {width:calc(96% / 2);} /* four items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(4), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(4) ~ li {width:calc(94% / 2);} /* five items */ } @media all and (max-width:640px){ #container{padding-top:60px} #container #content .nsubConBox{margin-top:30px;padding:0 0 30px 0;} .ns1_left .ns1_img{margin-top:-80px; padding-right:30px;} .ns1_left .ns1_blue_title{width:110px; height:110px; border-top-right-radius:30px;} .ns1_left .ns1_blue_title span{font-size:40px; right:40.5%;} .ns1_left .ns1_img .ns1_img_pc{display:none;} .ns1_left .ns1_img .ns1_img_mb{display:block; width:100%;} .ns1_right{margin-top:-13%; padding-top:13%;} .ns1_right dl{padding:7% 10% 10% 10%;} .ns1_right dl dt{font-size:30px;} .ns1_right dl dd{font-size:14px;} .mConBox5 .mCon4 .mConSlide3 .swiper-slide{width:100%;} /* two items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(2), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(2) ~ li {width:100%;} /* three items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(3), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(3) ~ li {width:100%;} /* four items */ .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(4), .mConBox5 .mCon4 .mConSlide3 .swiper-slide:first-child:nth-last-child(4) ~ li {width:100%;} /* five items */ } @media all and (max-width:480px){ .ns1_left .ns1_img{margin-top:-58px; padding-right:24px;} .ns1_left .ns1_blue_title{width:86px; height:86px; border-top-right-radius:26px;} .ns1_left .ns1_blue_title span{font-size:32px; right:40.5%;} .ns1_right dl dt{font-size:22px;} .ns1_right dl dd{font-size:12px;} }