@charset "UTF-8"; .clearfix { *zoom: 1; } .clearfix:after { display: block; clear: both; content: ''; } .sr_only { position: absolute; left: -99999px; } .inner { width: 1200px; margin: 0 auto; } @media screen and (max-width: 768px) { .inner { width: 100%; } } #wrap { width: 100%; background-color: #f1f1f1; } .upArrow { display: none; position: fixed; bottom: 50px; right: 50px; width: 40px; height: 40px; background-color: #263d78; border-radius: 50px; cursor: pointer; z-index: 9000; } .upArrow:after { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; background-image: url(../images/up_arrow.png); background-position: 50% 50%; content: ''; } body { overflow-x: hidden; } h3 { font-size: 30px; } ::-webkit-scrollbar { width: 8px; height: 8px; border: 3px solid #fff; } ::-webkit-scrollbar-button:start:decrement, :-webkit-scrollbar-button:end:increment { display: block; height: 10px; background: url("./images/bg.png") #efefef; } ::-webkit-scrollbar-track { background: #efefef; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb { height: 50px; width: 50px; background: rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1); } /*------- standard set -----------*/ header { position: fixed; top: 0; width: 100%; height: 70px; background-color: rgba(0, 0, 0, 0.3); z-index: 99999; transition: .3s; } header > .inner { position: relative; } header > .inner > .toggle { display: none; position: absolute; top: 0; right: 0; width: 70px; height: 70px; cursor: pointer; text-indent: -99999px; background-image: url(../images/toggle.png); } header > .inner > h1 { position: absolute; width: 200px; height: 70px; text-indent: -99999px; background-image: url(../images/logo.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 50%; } header > .inner > h1 > a { display: block; width: 100%; height: 100%; } header > .inner > .gnb { position: absolute; right: 0; width: 500px; } header > .inner > .gnb > ul > li { float: left; width: 100px; } header > .inner > .gnb > ul > li > a { display: block; height: 70px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.6); line-height: 70px; text-align: center; } header > .inner > .gnb > ul > li > a.on { color: white; } header > .inner > .gnb > ul > li > a:hover { color: white; } header > .inner > .gnb > ul > li > .sub { position: absolute; bottom: -40px; width: 100%; z-index: 5000; display: none; } header > .inner > .gnb > ul > li > .sub.sub01 { position: absolute; left: 0; } header > .inner > .gnb > ul > li > .sub.sub01 > .subcontainer > ul { margin-left: 30px; } header > .inner > .gnb > ul > li > .sub.sub01 > .subcontainer > ul > li { margin-left: 20px; } header > .inner > .gnb > ul > li > .sub.sub02 { position: absolute; left: 0; } header > .inner > .gnb > ul > li > .sub.sub02 > .subcontainer > ul > li { margin-left: 20px; } header > .inner > .gnb > ul > li > .sub.sub03 { position: absolute; left: 0; } header > .inner > .gnb > ul > li > .sub.sub03 > .subcontainer > ul > li { margin-left: 70px; } header > .inner > .gnb > ul > li > .sub.sub04 { position: absolute; left: 0; } header > .inner > .gnb > ul > li > .sub.sub04 > .subcontainer > ul { margin-left: 300px; } header > .inner > .gnb > ul > li > .sub.sub04 > .subcontainer > ul > li { margin-left: 20px; } header > .inner > .gnb > ul > li > .sub > .subcontainer > ul > li { height: 40px; line-height: 40px; float: left; font-size: 16px; margin-left: 20px; } header > .inner > .gnb > ul > li > .sub > .subcontainer > ul > li > a { display: block; font-weight: 600; color: #333; } header > .inner > .gnb > ul > li > .sub > .subcontainer > ul > li > a:hover { color: #ffc700; } header > .inner > .gnb .lang { position: absolute; top: 0; right: 5px; width: 80px; height: 70px; text-align: center; line-height: 70px; color: rgba(255, 255, 255, 0.7); font-weight: 600; cursor: pointer; } header > .inner > .gnb .lang:hover { color: white; } header > .inner > .gnb .lang > ul { display: none; width: 100%; background-color: rgba(0, 0, 0, 0.5); } header > .inner > .gnb .lang > ul > li { line-height: 40px; } header > .inner > .gnb .lang > ul > li:hover a { color: #ffc700; } header > .inner > .gnb .lang > ul > li.on a { color: #ffc700; } header > .inner > .gnb .lang > ul > li > a { color: #fff; } header > .sub_bg { display: none; position: absolute; top: 70px; width: 100%; height: 40px; background-color: white; border-bottom: 1px solid #eee; } @media screen and (max-width: 768px) { /*header 반응형*/ body::-webkit-scrollbar { display: none; } header { position: fixed; top: 0; width: 100%; height: 70px; background-color: #444; z-index: 99999; } header > .inner { position: relative; } header > .inner > .toggle { display: block; position: absolute; top: 0; right: 0; width: 70px; height: 70px; cursor: pointer; text-indent: -99999px; background-image: url(../images/toggle.png); } header > .inner > .toggle.clse { background-image: url(../images/toggle_cls.png); } header > .inner > h1 { position: absolute; width: 200px; height: 70px; text-indent: -99999px; background-image: url(../images/logo.png); background-repeat: no-repeat; background-position: 20% 50%; background-size: 50%; } header > .inner > h1 > a { display: block; width: 100%; height: 100%; } header > .inner > .gnb { display: none; position: absolute; top: 69px; right: 0; width: 100%; background-color: #444; } header > .inner > .gnb > ul > li { float: inherit; width: 100%; } header > .inner > .gnb > ul > li > a { display: block; width: 100%; height: 70px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.6); line-height: 70px; padding-left: 30px; text-align: left; } header > .inner > .gnb > ul > li > a.on { color: white; } header > .inner > .gnb > ul > li > a:hover { color: white; } header > .inner > .gnb > ul > li > .sub { position: inherit; top: 0; width: 100%; background-color: #f1f1f1; z-index: 5000; display: none; } header > .inner > .gnb > ul > li > .sub.sub01 { position: inherit; left: 0; } header > .inner > .gnb > ul > li > .sub.sub01 > .subcontainer > ul { margin-left: 0px; } header > .inner > .gnb > ul > li > .sub.sub01 > .subcontainer > ul > li { margin-left: 0px; padding-left: 35px; } header > .inner > .gnb > ul > li > .sub.sub02 { position: inherit; left: 0; } header > .inner > .gnb > ul > li > .sub.sub02 > .subcontainer > ul > li { margin-left: 0px; padding-left: 35px; } header > .inner > .gnb > ul > li > .sub.sub03 { position: inherit; left: 0; } header > .inner > .gnb > ul > li > .sub.sub03 > .subcontainer > ul > li { margin-left: 0px; } header > .inner > .gnb > ul > li > .sub.sub04 { position: inherit; left: 0; } header > .inner > .gnb > ul > li > .sub.sub04 > .subcontainer > ul { margin-left: 0px; padding-left: 35px; } header > .inner > .gnb > ul > li > .sub.sub04 > .subcontainer > ul > li { margin-left: 0px; } header > .inner > .gnb > ul > li > .sub > .subcontainer > ul > li { height: 60px; line-height: 60px; float: inherit; font-size: 16px; margin-left: 0px; border-bottom: 1px solid #ccc; } header > .inner > .gnb > ul > li > .sub > .subcontainer > ul > li:last-child { border-bottom: none; } header > .inner > .gnb > ul > li > .sub > .subcontainer > ul > li > a { display: block; font-weight: 600; color: #333; } header > .inner > .gnb > ul > li > .sub > .subcontainer > ul > li > a:hover { color: #ffc700; } header > .inner > .gnb .lang { display: block; position: absolute; top: -60px; right: 80px; width: 60px; height: 50px; text-align: center; line-height: 50px; color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 14px; } header > .inner > .gnb .lang:hover { color: white; } header > .inner > .gnb .lang > ul { margin-top: 10px; display: none; width: 100%; background-color: rgba(0, 0, 0, 0.5); } header > .inner > .gnb .lang > ul > li { line-height: 50px; } header > .inner > .gnb .lang > ul > li:hover a { color: #ffc700; } header > .inner > .gnb .lang > ul > li.on a { color: #ffc700; } header > .inner > .gnb .lang > ul > li > a { color: #fff; } header > .sub_bg { display: none; position: absolute; top: 70px; width: 100%; height: 40px; background-color: white; border-bottom: 1px solid #eee; } } #mVisual { position: relative; overflow: hidden; width: 100%; height: 100vh; } #mVisual > .mVisual_img { width: 100%; height: 100%; z-index: -1; } #mVisual > .mVisual_img > ul > li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -99999px; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } #mVisual > .mVisual_img > ul > li:nth-child(1) { background-image: url(../images/img01.jpg); } #mVisual > .mVisual_img > ul > li:nth-child(2) { background-image: url(../images/mVisual02.jpg); background-position: 50% 80%; } #mVisual > .mVisual_img > ul > li:nth-child(3) { background-image: url(../images/mVisual08.jpg); } #mVisual > .mVisual_img > ul > li:nth-child(4) { background-image: url(../images/mVisual04.jpg); } #mVisual > .mVisual_txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 200px; background-color: rgba(0, 0, 0, 0.6); transition: .5s; z-index: 5000; } #mVisual > .mVisual_txt > ul > li { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -30%); height: 100%; text-align: center; } #mVisual > .mVisual_txt > ul > li > dl > dt { position: relative; margin-bottom: 25px; font-size: 35px; font-weight: 600; color: #fff; } #mVisual > .mVisual_txt > ul > li > dl > dt:after { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 120px; height: 3px; background-color: #ffc700; content: ''; } #mVisual > .mVisual_txt > ul > li > dl > dd { letter-spacing: 2px; line-height: 1.4em; font-size: 16px; color: #fff; } #mVisual > .mVisual_indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 200px; z-index: 6000; } #mVisual > .mVisual_indicator:after { position: absolute; bottom: 24px; right: 54px; width: 6px; height: 6px; background-color: #ffc700; border-radius: 5px; content: ''; } #mVisual > .mVisual_indicator > p { display: block; position: absolute; bottom: 20px; width: 17px; height: 15px; text-indent: -99999px; transition: .4s; cursor: pointer; background-repeat: no-repeat; background-size: cover; } #mVisual > .mVisual_indicator > p.mVisual_prev_btn { background-image: url(../images/prev_btn.png); right: 80px; } #mVisual > .mVisual_indicator > p.mVisual_prev_btn:hover { background-image: url(../images/prev_btn_hover.png); } #mVisual > .mVisual_indicator > p.mVisual_next_btn { background-image: url(../images/next_btn.png); right: 20px; } #mVisual > .mVisual_indicator > p.mVisual_next_btn:hover { background-image: url(../images/next_btn_hover.png); } #mVisual > .downArrow { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) rotate(90deg); width: 50px; height: 50px; cursor: pointer; background-image: url(../images/next_btn.png); background-repeat: no-repeat; background-position: 50% 50%; animation: downArrow 0.9s infinite; } @media screen and (max-width: 768px) { /*mVisual 반응형*/ #mVisual { position: relative; overflow: hidden; width: 100%; height: 100vh; } #mVisual > .mVisual_img { width: 100%; height: 100%; z-index: -1; } #mVisual > .mVisual_img > ul > li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -99999px; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } #mVisual > .mVisual_img > ul > li:nth-child(1) { background-image: url(../images/img01.jpg); } #mVisual > .mVisual_img > ul > li:nth-child(2) { background-image: url(../images/mVisual02.jpg); background-position: 50% 80%; } #mVisual > .mVisual_img > ul > li:nth-child(3) { background-image: url(../images/mVisual08.jpg); } #mVisual > .mVisual_img > ul > li:nth-child(4) { background-image: url(../images/mVisual04.jpg); } #mVisual > .mVisual_txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 200px; background-color: rgba(0, 0, 0, 0.6); transition: .5s; z-index: 5000; } #mVisual > .mVisual_txt > ul > li { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -30%); height: 100%; text-align: center; } #mVisual > .mVisual_txt > ul > li > dl > dt { position: relative; margin-bottom: 25px; font-size: 35px; font-weight: 600; color: #fff; } #mVisual > .mVisual_txt > ul > li > dl > dt:after { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 120px; height: 3px; background-color: #ffc700; content: ''; } #mVisual > .mVisual_txt > ul > li > dl > dd { letter-spacing: 2px; line-height: 1.4em; font-size: 16px; color: #fff; } #mVisual > .mVisual_indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 200px; z-index: 6000; } #mVisual > .mVisual_indicator:after { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background-color: #ffc700; border-radius: 5px; content: ''; } #mVisual > .mVisual_indicator > p { display: block; position: absolute; bottom: 20px; width: 100px; height: 23px; text-indent: -99999px; transition: .4s; cursor: pointer; background-repeat: no-repeat; background-size: contain; } #mVisual > .mVisual_indicator > p.mVisual_prev_btn { background-image: url(../images/prev_btn.png); background-position: 100% 50%; left: 30%; } #mVisual > .mVisual_indicator > p.mVisual_prev_btn:hover { background-image: url(../images/prev_btn_hover.png); } #mVisual > .mVisual_indicator > p.mVisual_next_btn { background-image: url(../images/next_btn.png); left: 53%; } #mVisual > .mVisual_indicator > p.mVisual_next_btn:hover { background-image: url(../images/next_btn_hover.png); } #mVisual > .downArrow { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) rotate(90deg); width: 50px; height: 50px; cursor: pointer; background-image: url(../images/next_btn.png); background-repeat: no-repeat; background-position: 50% 50%; animation: downArrow 0.9s infinite; } } #company { position: relative; width: 100%; } #company > .inner { /* >.company_info { //float: left; width: 600px; height: 500px; margin-top: 45px; //background-color: red; >ul { margin : 50px 0 0 10px; >li { margin-top : 20px; font-size: 20px; font-weight: 600; letter-spacing: 0px; color: #333; >em { color: #fc4040; }//end of em &:nth-child(5) { line-height: 1.5em; }//end of li:nth-child(5) >dl { >dt { margin-top: 40px; font-size: 25px; color: #aaa; }//end of dt >dd { margin-top: 10px; font-size: 14px; font-weight: 500; color: #bbb; letter-spacing: 0px; line-height: 1.7em; }//end of dd }//end of dl }//end of li }//end of ul }//end of company_info */ } #company > .inner > h3 { position: relative; padding: 50px 0 0; font-weight: 600; text-align: center; color: #222; text-transform: uppercase; } #company > .inner > h3:after { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 800; color: #263d78; letter-spacing: -0.5px; content: "company Status"; } #company > .inner > .company_img { width: 100%; height: 450px; margin: 45px 0 50px; background-image: url(../images/intro.png); background-position: 45% 50%; background-size: contain; background-repeat: no-repeat; } #company > .inner > .company_intro { margin: 50px 0 50px; text-align: left; font-size: 16px; font-weight: 500; line-height: 1.9em; } #company > .inner > .company_intro > .company_l { position: relative; float: left; width: 600px; margin-top: -10px; text-align: right; } #company > .inner > .company_intro > .company_l:after { position: absolute; top: 10px; right: 0; width: 2px; height: 222px; background-color: #e5e5e5; content: ''; } #company > .inner > .company_intro > .company_l > ul { padding-right: 30px; } #company > .inner > .company_intro > .company_l > ul > li > dl > dt { font-size: 20px; margin-bottom: 7px; color: #6c6c6c; } #company > .inner > .company_intro > .company_l > ul > li > dl > dd { font-size: 30px; font-weight: 900; color: #263d78; } #company > .inner > .company_intro > .company_l > ol { font-size: 22px; margin-top: 40px; padding-right: 30px; font-weight: 600; } #company > .inner > .company_intro > .company_l > ol > li { line-height: 2em; } #company > .inner > .company_intro > .company_l > ol > li > dl > dd > em { color: #eeba01; } #company > .inner > .company_intro > .company_r { float: left; width: 600px; text-align: left; } #company > .inner > .company_intro > .company_r > ul { padding-left: 30px; height: 260px; } #company > .inner > .company_intro > .company_r > ul > li { margin-bottom: 5px; width: 200px; background-color: #263d78; transition: .2s; height: 40px; } #company > .inner > .company_intro > .company_r > ul > li > a { display: block; padding-left: 15px; font-weight: 500; font-size: 15px; letter-spacing: px; line-height: 38px; height: 42px; color: #fff; transition: .2s; } #company > .inner > .company_intro > .company_r > ul > li:hover { background-color: #ffc700; } #company > .inner > .company_intro > .company_r > ul > li:hover a { color: #f1f1f1; } @media screen and (max-width: 768px) { /*company 반응형*/ #company { position: relative; width: 100%; } #company > .inner > h3 { position: relative; padding: 50px 0 0; font-weight: 600; text-align: center; color: #222; text-transform: uppercase; } #company > .inner > h3:after { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 800; color: #263d78; letter-spacing: -0.5px; content: "company Status"; } #company > .inner > .company_img { display: none; width: 100%; height: 450px; margin: 45px 0 50px; background-image: url(../images/intro.png); background-position: 45% 50%; background-size: contain; background-repeat: no-repeat; } #company > .inner > .company_intro { width: 100%; margin: 50px 0 50px; text-align: center; font-size: 16px; font-weight: 500; line-height: 1.9em; } #company > .inner > .company_intro > .company_l { position: relative; float: inherit; width: 100%; margin-top: 0px; padding-top: 30px; text-align: center; } #company > .inner > .company_intro > .company_l:after { display: none; position: absolute; top: 10px; right: 0; width: 2px; height: 222px; background-color: #e5e5e5; content: ''; } #company > .inner > .company_intro > .company_l > ul { padding-right: 0px; } #company > .inner > .company_intro > .company_l > ul > li > dl > dt { font-size: 20px; margin-bottom: 7px; color: #6c6c6c; } #company > .inner > .company_intro > .company_l > ul > li > dl > dd { font-size: 30px; font-weight: 900; color: #263d78; } #company > .inner > .company_intro > .company_l > ol { font-size: 16px; margin-top: 20px; padding: 0 5px; font-weight: 500; } #company > .inner > .company_intro > .company_l > ol > li { line-height: 1.45em; } #company > .inner > .company_intro > .company_l > ol > li > dl > dd > em { color: #eeba01; } #company > .inner > .company_intro > .company_r { float: inherit; width: 100%; padding-top: 40px; text-align: center; } #company > .inner > .company_intro > .company_r > ul { padding-left: 0px; height: auto; } #company > .inner > .company_intro > .company_r > ul > li { margin: 0 auto 5px; width: 90%; background-color: #263d78; transition: .2s; height: 50px; } #company > .inner > .company_intro > .company_r > ul > li > a { display: block; padding-left: 15px; font-weight: 500; font-size: 17px; letter-spacing: 1px; line-height: 50px; height: 50px; color: #fff; transition: .2s; } #company > .inner > .company_intro > .company_r > ul > li:hover { background-color: #ffc700; } #company > .inner > .company_intro > .company_r > ul > li:hover a { color: #f1f1f1; } } #service { margin-top: 20px; width: 100%; height: 600px; background-size: cover; background-repeat: no-repeat; background-position: 50% 70%; } #service > .inner { position: relative; /*indicator position*/ } #service > .inner > h3 { position: relative; padding: 50px 0 0; font-weight: 600; text-align: center; color: #333; text-transform: uppercase; } #service > .inner > h3:after { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 800; color: #263d78; letter-spacing: 0px; content: "BUSINESS AREA"; } #service > .inner > .service_box { position: relative; /*service_container position*/ overflow: hidden; width: 1200px; height: 402px; margin: 50px auto 0; } #service > .inner > .service_box > .service_container { position: absolute; top: 1px; left: 0; width: 5000px; } #service > .inner > .service_box > .service_container > div { float: left; width: 1200px; height: 100%; } #service > .inner > .service_box > .service_container > div > ul { width: 1200px; margin: 0 auto; } #service > .inner > .service_box > .service_container > div > ul > li { position: relative; float: left; margin-left: 20px; width: 275px; height: 370px; transition: .5s; background-color: #fff; border-radius: 5px; } #service > .inner > .service_box > .service_container > div > ul > li:after { opacity: 0; position: absolute; top: 2.5px; left: 5px; width: 260px; height: 360px; border: 2px solid #263d78; transition: .3s; content: ''; } #service > .inner > .service_box > .service_container > div > ul > li:hover:after { opacity: 1; } #service > .inner > .service_box > .service_container > div > ul > li > dl > dt { margin: 50px auto 0px; width: 120px; height: 120px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; transition: .4s; } #service > .inner > .service_box > .service_container > div > ul > li > dl > dt > p { display: block; text-indent: -99999px; margin: 0px auto; padding-top: 40px; width: 90px; height: 90px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; transition: .6s; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .topic { margin: 0px 0; width: 100%; height: 33px; font-size: 18px; font-weight: 700; text-align: center; line-height: 30px; transition: .6s; color: #222; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .info { width: 100%; min-height: 100px; line-height: 1.6em; letter-spacing: -1px; font-size: 13px; font-weight: 500; text-align: center; transition: .6s; color: #aaa; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .more { display: block; width: 150px; margin: 5px auto 0; text-align: center; font-weight: 600; color: #ffc700; z-index: 4000; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .more > em { color: #263d78; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .more > a { position: absolute; top: 0; left: 0; display: block; width: 275px; height: 370px; color: #fff; z-index: 7000; } #service > .inner > .service_box > .service_container > .service_1 > ul > li:nth-child(1) p { background-image: url(../images/icon_4.png); } #service > .inner > .service_box > .service_container > .service_1 > ul > li:nth-child(2) p { background-image: url(../images/icon_2.png); } #service > .inner > .service_box > .service_container > .service_1 > ul > li:nth-child(3) p { background-image: url(../images/icon_1.png); } #service > .inner > .service_box > .service_container > .service_1 > ul > li:nth-child(4) p { background-image: url(../images/icon_7.png); } #service > .inner > .service_box > .service_container > .service_2 { display: none; } #service > .inner > .service_box > .service_container > .service_2 > ul > li { background-size: 20%; } #service > .inner > .service_indicator { position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); width: 100px; height: 20px; } #service > .inner > .service_indicator > ul > li { float: left; margin-left: 20px; width: 20px; height: 20px; background-color: #333; border-radius: 20px; cursor: pointer; } #service > .inner > .service_indicator > ul > li.on { background-color: #fff; } #service > .inner > .service_RL_btn { display: none; position: absolute; top: 50%; width: 100%; } #service > .inner > .service_RL_btn > p { position: absolute; top: 0; width: 40px; height: 40px; text-indent: -99999px; cursor: pointer; } #service > .inner > .service_RL_btn > .prev { position: absolute; left: -20px; } #service > .inner > .service_RL_btn > .prev:after { position: absolute; top: 25%; left: -10px; transform: rotate(-45deg); width: 25px; height: 2px; background-color: #263d78; content: ''; } #service > .inner > .service_RL_btn > .prev:before { position: absolute; bottom: 25%; left: -10px; transform: rotate(45deg); width: 25px; height: 2px; background-color: #263d78; content: ''; } #service > .inner > .service_RL_btn > .next { position: absolute; right: -20px; } #service > .inner > .service_RL_btn > .next:after { position: absolute; top: 25%; left: 25px; transform: rotate(45deg); width: 25px; height: 2px; background-color: #263d78; content: ''; } #service > .inner > .service_RL_btn > .next:before { position: absolute; bottom: 25%; left: 25px; transform: rotate(-45deg); width: 25px; height: 2px; background-color: #263d78; content: ''; } @media screen and (max-width: 768px) { /*service 768px 반응형*/ #service { margin-top: 20px; width: 100%; height: auto; background-size: cover; background-repeat: no-repeat; background-position: 50% 70%; } #service > .inner { position: relative; /*indicator position*/ } #service > .inner > h3 { position: relative; padding: 50px 0 0; font-weight: 600; text-align: center; color: #333; text-transform: uppercase; } #service > .inner > h3:after { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 800; color: #263d78; letter-spacing: 0px; content: "BUSINESS AREA"; } #service > .inner > .service_box { position: relative; /*service_container position*/ overflow: hidden; width: 350px; height: 402px; margin: 50px auto; } #service > .inner > .service_box > .service_container { position: absolute; top: 1px; left: 0; width: 1400px; } #service > .inner > .service_box > .service_container > div { float: left; width: 1400px; height: 100%; } #service > .inner > .service_box > .service_container > div > ul { width: 1400px; margin: 0 auto; } #service > .inner > .service_box > .service_container > div > ul > li { position: relative; float: left; margin-left: 0px; width: 350px; height: 370px; transition: .5s; background-color: #fff; border-radius: 5px; } #service > .inner > .service_box > .service_container > div > ul > li:after { opacity: 0; position: absolute; top: 10px; left: 10px; width: 325px; height: 345px; border: 2px solid #263d78; transition: .3s; content: ''; } #service > .inner > .service_box > .service_container > div > ul > li:hover:after { opacity: 1; } #service > .inner > .service_box > .service_container > div > ul > li > dl > dt { margin: 50px auto 0px; width: 120px; height: 120px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; transition: .4s; } #service > .inner > .service_box > .service_container > div > ul > li > dl > dt > p { display: block; text-indent: -99999px; margin: 0px auto; padding-top: 40px; width: 90px; height: 90px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; transition: .6s; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .topic { margin: 0px 0; width: 100%; height: 33px; font-size: 23px; font-weight: 700; text-align: center; line-height: 30px; transition: .6s; color: #222; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .info { width: 100%; min-height: 100px; line-height: 1.6em; letter-spacing: -1px; font-size: 15px; font-weight: 500; text-align: center; transition: .6s; color: #aaa; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .more { display: block; width: 150px; margin: 5px auto 0; text-align: center; font-weight: 600; color: #ffc700; z-index: 4000; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .more > em { color: #263d78; } #service > .inner > .service_box > .service_container > div > ul > li > dl > .more > a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 370px; color: #fff; z-index: 7000; } #service > .inner > .service_box > .service_container > .service_1 > ul > li:nth-child(1) p { background-image: url(../images/icon_4.png); } #service > .inner > .service_box > .service_container > .service_1 > ul > li:nth-child(2) p { background-image: url(../images/icon_2.png); } #service > .inner > .service_box > .service_container > .service_1 > ul > li:nth-child(3) p { background-image: url(../images/icon_1.png); } #service > .inner > .service_box > .service_container > .service_1 > ul > li:nth-child(4) p { background-image: url(../images/icon_7.png); } #service > .inner > .service_box > .service_container > .service_2 { display: none; } #service > .inner > .service_box > .service_container > .service_2 > ul > li { background-size: 20%; } #service > .inner > .service_RL_btn { display: block; position: absolute; top: 50%; width: 100%; } #service > .inner > .service_RL_btn > p { position: absolute; top: -35px; width: 60px; height: 60px; text-indent: -99999px; z-index: 7000; cursor: pointer; } #service > .inner > .service_RL_btn > .prev { position: absolute; left: 60px; } #service > .inner > .service_RL_btn > .prev:after { position: absolute; top: 35%; left: 20px; transform: rotate(-45deg); width: 25px; height: 2px; background-color: #263d78; content: ''; } #service > .inner > .service_RL_btn > .prev:before { position: absolute; bottom: 35%; left: 20px; transform: rotate(45deg); width: 25px; height: 2px; background-color: #263d78; content: ''; } #service > .inner > .service_RL_btn > .next { position: absolute; right: 60px; } #service > .inner > .service_RL_btn > .next:after { position: absolute; top: 35%; left: 15px; transform: rotate(45deg); width: 25px; height: 2px; background-color: #263d78; content: ''; } #service > .inner > .service_RL_btn > .next:before { position: absolute; bottom: 35%; left: 15px; transform: rotate(-45deg); width: 25px; height: 2px; background-color: #263d78; content: ''; } } #company_m_info { width: 100%; height: 240px; background-image: url(../images/bg_1.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: 90% 50%; background-size: cover; } #company_m_info > .inner { padding-top: 90px; } #company_m_info > .inner > ul { width: 100%; height: 100px; } #company_m_info > .inner > ul > li { width: 300px; float: left; text-align: center; color: #fff; font-size: 20px; } #company_m_info > .inner > ul > li:nth-child(1) { margin-left: 150px; } #company_m_info > .inner > ul > li:nth-child(2) { position: relative; } #company_m_info > .inner > ul > li:nth-child(2):after { position: absolute; top: 50%; left: 0; width: 1px; height: 15px; background-color: #888; content: ''; } #company_m_info > .inner > ul > li:nth-child(2):before { position: absolute; top: 50%; right: 0; width: 1px; height: 15px; background-color: #888; content: ''; } #company_m_info > .inner > ul > li:nth-child(2) > dl > dt { letter-spacing: -3px; } #company_m_info > .inner > ul > li > dl > dt { font-size: 40px; font-weight: 500; color: #ffc700; margin-bottom: 10px; } #company_m_info > .inner > ul > li > dl > dt > span { font-size: 17px; } #company_m_info > .inner > ul > li > dl > dd { font-size: 17px; } @media screen and (max-width: 768px) { /*company m info 768px 반응형*/ #company_m_info { display: none; width: 100%; height: 240px; background-image: url(../images/bg_1.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: 90% 50%; background-size: cover; } #company_m_info > .inner { padding-top: 90px; } #company_m_info > .inner > ul { width: 100%; height: 100px; } #company_m_info > .inner > ul > li { width: 300px; float: left; text-align: center; color: #fff; font-size: 20px; } #company_m_info > .inner > ul > li:nth-child(1) { margin-left: 150px; } #company_m_info > .inner > ul > li:nth-child(2) { position: relative; } #company_m_info > .inner > ul > li:nth-child(2):after { position: absolute; top: 50%; left: 0; width: 1px; height: 15px; background-color: #888; content: ''; } #company_m_info > .inner > ul > li:nth-child(2):before { position: absolute; top: 50%; right: 0; width: 1px; height: 15px; background-color: #888; content: ''; } #company_m_info > .inner > ul > li:nth-child(2) > dl > dt { letter-spacing: -3px; } #company_m_info > .inner > ul > li > dl > dt { font-size: 40px; font-weight: 500; color: #ffc700; margin-bottom: 10px; } #company_m_info > .inner > ul > li > dl > dt > span { font-size: 17px; } #company_m_info > .inner > ul > li > dl > dd { font-size: 17px; } } #contact { width: 100%; height: 750px; background-color: #263d78; } #contact > h3 { position: relative; padding: 50px 0 0; font-weight: 600; text-align: center; color: #fff; text-transform: uppercase; } #contact > h3:after { position: absolute; bottom: -20px; left: 50.2%; transform: translateX(-50%); font-size: 15px; font-weight: 800; color: #111; letter-spacing: 4px; content: "How to come"; } #contact > .mapContainer { width: 600px; height: 300px; margin: 60px auto 200px; } #contact > .mapContainer > .map { width: 600px; height: 450px; background-image: url(../images/map_18.08.06.jpg); background-position: 50% 50%; background-size: cover; border: 0; } #contact > .mapContainer > .map > a { display: block; width: 100%; height: 100%; text-indent: -99999px; } #contact > .mapInfo { position: relative; width: 100%; text-align: center; } #contact > .mapInfo:after { position: absolute; top: 0; left: 20%; width: 35px; height: 30px; background-image: url(../images/bg_quote.png); background-position: 0 50%; content: ''; } #contact > .mapInfo:before { position: absolute; bottom: 0; right: 20%; width: 35px; height: 30px; background-image: url(../images/bg_quote.png); background-position: -35px 50%; content: ''; } #contact > .mapInfo > .inner > ul > li { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.8em; } #contact > .mapInfo > .inner > ul > li > span { color: #111; font-weight: 900; } @media screen and (max-width: 768px) { /*contact 768px 반응형*/ #contact { width: 100%; height: auto; background-color: #263d78; } #contact > h3 { position: relative; padding: 50px 0 0; font-weight: 600; text-align: center; color: #fff; text-transform: uppercase; } #contact > h3:after { position: absolute; bottom: -20px; left: 50.2%; transform: translateX(-50%); font-size: 15px; font-weight: 800; color: #111; letter-spacing: 4px; content: "How to come"; } #contact > .mapContainer { width: 90%; height: 480px; margin: 60px auto 40px; } #contact > .mapContainer > .map { width: 100%; height: 450px; background-image: url(../images/map_18.08.06.jpg); background-position: 10% 50%; background-size: cover; border: 0; } #contact > .mapContainer > .map > a { display: block; width: 100%; height: 100%; text-indent: -99999px; } #contact > .mapInfo { position: relative; width: 100%; text-align: center; padding-bottom: 50px; } #contact > .mapInfo:after { display: none; position: absolute; top: 0; left: 20%; width: 35px; height: 30px; background-image: url(../images/bg_quote.png); background-position: 0 50%; content: ''; } #contact > .mapInfo:before { display: none; position: absolute; bottom: 0; right: 20%; width: 35px; height: 30px; background-image: url(../images/bg_quote.png); background-position: -35px 50%; content: ''; } #contact > .mapInfo > .inner > ul > li { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.8em; } #contact > .mapInfo > .inner > ul > li > span { display: block; color: #111; font-weight: 900; } } footer { width: 100%; height: 170px; background-color: #333; } footer > .inner { position: relative; padding-top: 20px; } footer > .inner > h1 { float: left; margin-left: 40px; width: 120px; height: 40px; text-indent: -99999px; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; } footer > .inner > .f_left { float: left; margin-left: 50px; } footer > .inner > .f_left > ul { width: 280px; } footer > .inner > .f_left > ul > li { width: 320px; text-align: center; } footer > .inner > .f_left > ul > li:nth-child(1) dl dt { background-image: url(../images/f_icon_mail.png); } footer > .inner > .f_left > ul > li:nth-child(2) dl dt { background-image: url(../images/f_icon_tel.png); } footer > .inner > .f_left > ul > li:nth-child(3) dl dt { background-image: url(../images/f_icon_location.png); } footer > .inner > .f_left > ul > li > dl > dt { margin: 0 auto; width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } footer > .inner > .f_left > ul > li > dl > dd { text-align: left; margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.2em; color: #fff; } footer > .inner > .f_left > ul > li > dl > dd > em { color: #909090; } footer > .inner > .f_left > ul > li > dl > dd:nth-child(2) { font-weight: 700; } footer > .inner > .f_left > ul > li > dl > dd:nth-child(3) { color: #909090; } footer > .inner > .f_left > ul > li > dl > dd > a { font-size: 13px; color: #909090; } footer > .inner > .f_left > ul > li > dl > dd > a:hover { text-decoration: underline; } footer > .inner > address { float: left; margin-top: 0px; margin-left: 30px; width: 340px; } footer > .inner > address > ul { width: 350px; } footer > .inner > address > ul > li { width: 320px; text-align: center; } footer > .inner > address > ul > li:nth-child(1) dl dt { background-image: url(../images/f_icon_mail.png); } footer > .inner > address > ul > li:nth-child(2) dl dt { background-image: url(../images/f_icon_tel.png); } footer > .inner > address > ul > li:nth-child(3) dl dt { background-image: url(../images/f_icon_location.png); } footer > .inner > address > ul > li > dl > dt { margin: 0 auto; width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } footer > .inner > address > ul > li > dl > dd { text-align: left; margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.2em; color: #fff; } footer > .inner > address > ul > li > dl > dd:nth-child(2) { font-weight: 700; } footer > .inner > address > ul > li > dl > dd:nth-child(3) { color: #909090; } footer > .inner > address > ul > li > dl > dd > a { font-size: 13px; color: #909090; } footer > .inner > address > ul > li > dl > dd > a:hover { text-decoration: underline; } footer > .inner > .f_nav { float: right; margin-top: 0px; width: 180px; } footer > .inner > .f_nav > ul > li { float: left; margin-right: 9px; padding-right: 11px; background-image: url(../images/f_right.png); background-repeat: no-repeat; background-position: 100% 73%; } footer > .inner > .f_nav > ul > li:last-child { margin-right: none; background-image: none; } footer > .inner > .f_nav > ul > li > a { font-size: 13px; color: #fff; } footer > .inner > .copyright { position: absolute; top: 120px; right: -140px; transform: translateX(-50%); width: 315px; font-size: 13px; letter-spacing: 1px; color: #fff; } footer > .inner:after { position: absolute; top: 30px; left: 200px; transform: translateX(-50%); width: 1px; height: 120px; background-color: #808080; content: ''; } @media screen and (max-width: 768px) { /*footer 768px 반응형*/ footer { width: 100%; height: auto; background-color: #333; } footer > .inner { position: relative; padding-top: 20px; } footer > .inner > h1 { float: inherit; margin: 0 auto 180px; width: 120px; height: 40px; text-indent: -99999px; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; } footer > .inner > .f_left { float: inherit; margin: 0 auto; width: 100%; } footer > .inner > .f_left > ul { width: 100%; } footer > .inner > .f_left > ul > li { width: 100%; } footer > .inner > .f_left > ul > li > dl > dt { display: none; margin: 0 auto; width: 100%; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } footer > .inner > .f_left > ul > li > dl > dd { padding-left: 20px; text-align: left; margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 1.2em; color: #fff; } footer > .inner > .f_left > ul > li > dl > dd > em { color: #909090; } footer > .inner > .f_left > ul > li > dl > dd:nth-child(2) { font-weight: 700; } footer > .inner > .f_left > ul > li > dl > dd:nth-child(3) { color: #909090; } footer > .inner > .f_left > ul > li > dl > dd > a { font-size: 13px; color: #909090; } footer > .inner > .f_left > ul > li > dl > dd > a:hover { text-decoration: none; } footer > .inner > address { border-top: 1px solid #666; float: inherit; margin: 10px auto; width: 100%; } footer > .inner > address > ul { width: 100%; } footer > .inner > address > ul > li { width: 100%; text-align: center; } footer > .inner > address > ul > li:nth-child(1) dl dt { background-image: url(../images/f_icon_mail.png); } footer > .inner > address > ul > li:nth-child(2) dl dt { background-image: url(../images/f_icon_tel.png); } footer > .inner > address > ul > li:nth-child(3) dl dt { background-image: url(../images/f_icon_location.png); } footer > .inner > address > ul > li > dl > dt { display: none; } footer > .inner > address > ul > li > dl > dd { padding-left: 20px; text-align: left; margin-top: 6px; font-size: 15px; font-weight: 500; line-height: 1.2em; color: #fff; } footer > .inner > address > ul > li > dl > dd:nth-child(2) { font-weight: 700; } footer > .inner > address > ul > li > dl > dd:nth-child(3) { color: #909090; } footer > .inner > address > ul > li > dl > dd > a { font-size: 13px; color: #909090; } footer > .inner > address > ul > li > dl > dd > a:hover { text-decoration: underline; } footer > .inner > .f_nav { position: absolute; top: 75px; float: inherit; margin-top: 0px; width: 100%; } footer > .inner > .f_nav > ul > li { width: 100%; text-align: center; float: inherit; margin-right: 0px; padding-right: 0px; background-image: none; background-repeat: no-repeat; background-position: 100% 73%; border-top: 1px solid #666; } footer > .inner > .f_nav > ul > li:last-child { margin-right: none; background-image: none; border-bottom: 1px solid #666; } footer > .inner > .f_nav > ul > li > a { display: block; height: 50px; line-height: 50px; font-size: 16px; color: #fff; } footer > .inner > .copyright { border-top: 1px solid #666; position: static; padding: 20px 0; top: 10px; right: 50%; transform: translateX(0); width: 100%; font-size: 13px; letter-spacing: 1px; text-align: center; color: #fff; } footer > .inner:after { display: none; } } @keyframes downArrow { 0% { bottom: 40px; } 100% { bottom: 20px; } } /*# sourceMappingURL=common.css.map */