@charset "utf-8"; /* ====================================================== .pc =========================================================*/ .pc {display:block;} .mobile {display:none;} @media only screen and (max-width:680px) { .mobile {display:block;} .pc {display:none;} } /* ====================================================== .map-wrap =========================================================*/ .map-wrap .ic { display: inline-block; vertical-align: middle; top: -1px; position: relative; } .map-wrap { position: relative; background: #f7f7f7; margin-top: 0px; /*box-shadow: 1px 0px 18px rgba(0,0,0,0.14);*/ padding: 50px 50px 80px; } .map-wrap h4 { font-size: 24px; color: #000; padding-bottom: 11px; border-bottom: 1px solid #e1e1e1 } .map-wrap ul { margin-top: 20px; margin-left: -10px; margin-right: -10px } .map-wrap ul > li { float: left; display: table; width: 23%; padding: 5px 10px } .map-wrap ul > li.li01 { width: 48% } .map-wrap ul > li .list { display: table-cell; width: 86px; vertical-align: middle } .map-wrap ul > li .txt { display: table-cell; vertical-align: middle } .map-wrap .ic_pin { width: 13px; height: 17px; background: url('../img/content/ic_pin.png') no-repeat } .map-wrap .ic_tel { width: 16px; height: 16px; background: url('../img/content/ic_tel.png') no-repeat } .map-wrap .ic_fax { width: 19px; height: 15px; background: url('../img/content/ic_fax.png') no-repeat } .map-wrap .list { font-size: 17px; font-weight: 700; color: #222 } .map-wrap .list i { margin-right: 10px } .map-wrap .txt { font-size: 17px; color: #666 } @media (max-width:1280px) { .map-wrap { padding: 20px 20px } .map-wrap ul > li .list { width: 70px } } @media (max-width:970px) { .map-wrap { padding: 20px 40px; margin-top: 0px; height: 170px; } .map-wrap h4 { font-size: 20px } .map-wrap ul > li { width: 100%; padding: 0px 0px } .map-wrap ul > li.li01 { width: 100% } .map-wrap .list { font-size: 16px; } } @media (max-width:480px) { .map-wrap { padding: 20px 20px; margin-top: 0px; height: 170px; } .map-wrap h4 { font-size: 17px } .map-wrap .list { font-size: 15px; vertical-align: top; } .map-wrap ul > li .txt { font-size: 15px } } /* ====================================================== .map-wrap02 =========================================================*/ .map-wrap02 .ic { display: inline-block; vertical-align: middle; top: -1px; position: relative; } .map-wrap02 { position: relative; background: #f7f7f7; margin-top: 0px; /*box-shadow: 1px 0px 18px rgba(0,0,0,0.14);*/ padding: 50px 50px 80px; } .map-wrap02 h4 { font-size: 24px; color: #000; padding-bottom: 11px; border-bottom: 1px solid #e1e1e1 } .map-wrap02 ul { margin-top: 20px; margin-left: -10px; margin-right: -10px } .map-wrap02 ul > li { float: left; display: table; width: 22%; padding: 5px 0px } .map-wrap02 ul > li.li01 { width: 33% } .map-wrap02 ul > li .list { display: table-cell; width: 95px; vertical-align: middle } .map-wrap02 ul > li .txt { display: table-cell; vertical-align: middle } .map-wrap02 .ic_pin { width: 13px; height: 17px; background: url('../img/content/ic_pin.png') no-repeat } .map-wrap02 .ic_tel { width: 16px; height: 16px; background: url('../img/content/ic_tel.png') no-repeat } .map-wrap02 .ic_fax { width: 19px; height: 15px; background: url('../img/content/ic_fax.png') no-repeat } .map-wrap02 .ic_mail { width: 16px; height: 16px; background: url('../img/content/ic_email.png') no-repeat } .map-wrap02 .list { font-size: 17px; font-weight: 700; color: #222 } .map-wrap02 .list i { margin-right: 10px } .map-wrap02 .txt { font-size: 17px; color: #666 } @media (max-width:1280px) { .map-wrap02 { padding: 35px 30px } .map-wrap02 ul > li .list { width: 100px } } @media (max-width:970px) { .map-wrap02 { padding: 20px 40px; margin-top: 0px; height: 170px; } .map-wrap02 h4 { font-size: 20px } .map-wrap02 ul > li { width: 100%; padding: 0px 0px } .map-wrap02 ul > li.li01 { width: 100% } } @media (max-width:480px) { .map-wrap02 { padding: 20px 20px; margin-top: 0px; height: 170px; } .map-wrap02 h4 { font-size: 17px } .map-wrap02 ul > li .txt { font-size: 14px } .map-wrap02 .list { font-size: 14px; } .location-02 dl{padding-left:260px; position:relative;padding-bottom:40px; border-bottom:1px solid #dbdbe0; margin-top:50px;} .location-02 dl.last{border:none;} .location-02 dt{ position:absolute;left:0; top:0; width:80px; text-align:center; } .location-02 dt .img{width:100px; height:40px; /*background-color:#24459c; border-radius:84px 84px;*/ display:block; vertical-align:middle;text-align:center;} .location-02 dt .txt{display:block; line-height:20px; font-size:14px;} .location-02 dt .stxt{ display:block;} .location-02 dt .img img{display:inline-block;margin-top:0px;} .location-02 dd .btxt{ font-size:17px; margin-top:0px; font-weight:400; display:block;color:#171A19;letter-spacing: -0.25px} .location-02 dd .img{display:block; margin-top:25px;} } .location-02 dl{padding-left:260px; position:relative;padding-bottom:40px; border-bottom:1px solid #dbdbe0; margin-top:50px;} .location-02 dl.last{border:none;} .location-02 dt{ position:absolute;left:0; top:0; width:100px; text-align:center; } .location-02 dt .img{width:100px; height:40px; /*background-color:#24459c; border-radius:84px 84px;*/ display:block; vertical-align:middle;text-align:center;} .location-02 dt .txt{display:block; line-height:34px; font-size:14px;} .location-02 dt .stxt{ display:block;} .location-02 dt .img img{display:inline-block;margin-top:0px;} .location-02 dd .btxt{ font-size:17px; margin-top:5px; font-weight:400; display:block;color:#171A19;letter-spacing: -0.25px} .location-02 dd .img{display:block; margin-top:25px;} @media all and (max-width:840px){ .location-02 dl{padding-left:130px;} .location-02 dd .btxt{font-size:16px} } @media all and (max-width:800px){ .location-02 dl{padding-left:100px;} .location-02 dd .btxt{font-size:14px} } @media all and (max-width:400px){ .location-02 dl{padding-left:0; border-bottom:1px dotted #ddd} .location-02 dt{position:relative;left:auto;top:auto; width:auto;text-align:left;background:url(/hscmb/_Img/Layout/c-tit02.jpg) no-repeat 0 7px; font-weight:500; padding-bottom:0px;padding-left:20px;margin-bottom:0px; } .location-02 dt:before{background:#ccc; width:30px;height:1px; left:-50px; top:49%; position:absolute; display:block; content:"";} .location-02 dt:after{background:#ccc; width:30px;height:1px; right:-50px; top:49%; position:absolute; display:block; content:"";} .location-02 dt .img{ display:none;} .location-02 .last .img img{width:100%} .location-02 dd .btxt{margin-top:15px} .location-02 dt .txt{display:inline-block; line-height:150%; margin-left:0px;color:#24459c; font-size:18px;} .location-02 dd{text-align:left} } /*======================================================= .hist-wrap =========================================================*/ .hist-wrap { /*width:1200px; margin:0 auto; */} .hist-wrap .intro { overflow: hidden; position: relative; padding-left: 300px } .hist-wrap .intro:before { position: absolute; top: 14px; left: 370px; width: 1px; bottom: 16px; background-color: #ddd; content: ""; } .hist-wrap .intro h4 { position: absolute; left: 0; top: 0; color: #111; font-size: 36px; font-weight: 600; letter-spacing: -1.5px; line-height: 1.0; font-family:"Roboto" } .hist-wrap .intro h4:after { position: absolute; top: 15px; left: 140px; content: ""; width: 100px; height: 3px; background-color: #ed1c24; } .hist-wrap .intro .cont { overflow: hidden; position: relative; padding-bottom: 30px } .hist-wrap .intro .cont:last-child { padding-bottom: 0 } .hist-wrap .intro .cont .year { position: absolute; top: 5px; left: 0px; width: 120px; } .hist-wrap .intro .cont .year:after { position: absolute; display: block; content: ""; top: 50%; right: -4px; width: 7px; height: 7px; margin-top: -3px; background-color: #ed1c24; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .hist-wrap .intro .cont .year strong { color: #1e1e1e; font-weight: 600; font-size: 23px; font-family:"Roboto" } .hist-wrap .intro .cont .list { padding-left: 140px; } .hist-wrap .intro .cont:last-child .list { } .hist-wrap .intro .cont .list p { position: relative; margin-bottom: 10px; padding-left: 90px; color: #555; font-size: 18px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.4; word-break: keep-all } .hist-wrap .intro .cont .list p:first-child { margin-top: 7px } .hist-wrap .intro .cont .list p .month { position: absolute; top: 0px; left: 0px; color: #333; font-weight: 600; font-family:"Roboto"} .hist-wrap .intro .cont .list p span { color: #666;} @media all and ( max-width:1024px ) { .hist-wrap .intro { padding-left: 200px } .hist-wrap .intro:before { left: 320px; } } @media all and ( max-width:800px ) { .hist-wrap .intro { padding-left: 0 } .hist-wrap .intro:before { top: 65px; left: 120px; } .hist-wrap .intro h4 { position: relative; left: auto; top: auto; margin-bottom: 25px; font-size: 26px; } .hist-wrap .intro h4:after { top: 100%; left: 0; margin-top: 5px; } .hist-wrap .intro .cont:before { font-size: 80px } .hist-wrap .intro .cont .list p { font-size: 14px } } @media all and ( max-width:480px ) { .hist-wrap .intro { margin-bottom: 50px } .hist-wrap .intro:before { top: 55px; left: 60px; } .hist-wrap .intro h4 { font-size: 20px; } .hist-wrap .intro h4:after { width: 45px; height: 2px } .hist-wrap .intro .cont .year { width: 60px; } .hist-wrap .intro .cont .year strong { font-size: 17px } .hist-wrap .intro .cont:before { left: 60px } .hist-wrap .intro .cont .list { padding-left: 70px; } .hist-wrap .intro .cont:last-child .list { padding-bottom: 0 } .hist-wrap .intro .cont .list p { font-size: 13px; padding-left: 50px; } } /* ===================================== history-wrap ===================================== */ .history-wrap{position:relative;} .history-wrap dl{position:relative; padding-left:360px; min-height:75px;} .history-wrap dl:nth-child(n+2){margin-top:37px;} .history-wrap dl dt{font-family:"Roboto"; font-size:30px; font-weight:500;line-height:1.2em; padding-top:40px; width:280px; border-top:1px solid #222; color:#111; position:absolute; left:0; top:0; padding-left:10px;} .history-wrap dl dt:after { position: absolute; top: 55px; left: 200px; content: ""; width: 55px; height: 3px; background-color: #ed1c24; } .history-wrap dd{padding:50px 0;border-top:1px solid #aaa} .history-wrap dd p{position:relative; padding-left:150px; font-size:16px; line-height:1.4em; color:#777; font-weight:400; } .history-wrap dd p:nth-child(n+2){margin-top:12px;} .history-wrap dd p span{font-family:"Roboto"; font-size:16px; font-weight:500; color:#111; line-height:1.4em; position:absolute; left:0; top:0;} @media only screen and (max-width:1200px){ .history-wrap dl{padding-left:300px} .history-wrap dl:nth-child(n+2){margin-top:27px;} .history-wrap dl dt{font-size:25px; padding-top:25px; width:240px;} .history-wrap dd{padding:25px 0;} .history-wrap dd p{padding-left:82px;} } @media only screen and (max-width:999px){ .history-wrap dl{padding-left:230px} .history-wrap dl:nth-child(n+2){margin-top:20px;} .history-wrap dl dt{font-size:21px; padding-top:20px; width:190px;} .history-wrap dd{padding:20px 0;} .history-wrap dd p{padding-left:62px;font-size:14px;} .history-wrap dd p span{font-size:15px} } @media only screen and (max-width:680px){ .history-wrap dl{padding-left:0} .history-wrap dl:nth-child(n+2){margin-top:12px;} .history-wrap dl dt{font-size:21px; padding-top:0; width:auto; position:relative; left:0; top:0; padding:12px 5px} .history-wrap dl dd{padding:15px 5px;} .history-wrap dd p:nth-child(n+2){margin-top:7px;} .history-wrap dd p{padding-left:52px;} } @media only screen and (max-width:480px){ } .txt-box ul { font-size: 0; } .txt-box li { width: 44.8%; min-height: 100px; margin-right: 2%; font-size: 0; padding: 3% 2%; margin-bottom: 0px; /*border: 0px solid #ddd;*/ display: inline-block; vertical-align: top; border-radius: 10px; background: #f8f8f8; } .txt-box li.num-1 dl { background: url("../img/content/sponsor-ico01.png") no-repeat 30px 20px; } .txt-box li.num-2 dl { background: url("../img/content/sponsor-ico02.png") no-repeat 30px 20px; } .txt-box dl { width: 75%; padding-left: 25%; padding-top:30px; padding-bottom: 20px; vertical-align: top; } .txt-box dt { margin: 10px 0 10px; font-size: 24px; font-weight: 600; color: #333; letter-spacing: -0.04em } .txt-box dd { font-size: 18px; line-height: 160%; letter-spacing: -0.04em; } @media only screen and (max-width:1024px) { .txt-box li { width: 44%; } } @media only screen and (max-width:980px) { .txt-box li { width: 100%; min-height: auto; margin: 0 0 2% 0; box-sizing: border-box; } .txt-box li dl { background-size: 80px !important; } .txt-box dt { font-size: 17px; margin-bottom: 10px; } .txt-box dd { font-size: 14px; } } @media only screen and (max-width:480px) { .txt-box li dl { background-size: 60px !important; } .txt-box dl { padding-top:10px; padding-bottom: 20px; } .txt-box li.num-1 dl { background: url("../img/content/sponsor-ico01.png") no-repeat 15px 20px; } .txt-box li.num-2 dl { background: url("../img/content/sponsor-ico02.png") no-repeat 15px 20px; } } .txt-box02 .stxt { font-size: 15px; } .txt-box02 .cont01 { margin: 60px 0; overflow: hidden; } .txt-box02 .cont01 li { width: 180px; height: 180px; border-radius: 50%; margin-right: 20px; font-size: 15px; text-align: center; float: left; } .txt-box02 .cont01 li.item01 { border: 10px solid #2fa2c0 } .txt-box02 .cont01 li.item01 span { padding-top: 55px; } .txt-box02 .cont01 li.item02 { border: 10px solid #3d7dc4 } .txt-box02 .cont01 li.item03 { border: 10px solid #00ab81 } .txt-box02 .cont01 li.item04 { border: 10px solid #1685d7 } .txt-box02 .cont01 li.item05 { border: 10px solid #0930a1 } .txt-box02 .cont01 li span { padding: 70px 20px 0; display: block; } .txt-box02 .cont02 { } .txt-box02 .cont02 li { font-size: 0; padding: 50px; margin-top: 30px; margin-bottom: 0px; border: 1px solid #ddd; border-radius: 10px; } .txt-box02 .cont02 li p { width: 15%; margin-right: 0%; padding-top: 0px; font-size: 18px; font-weight: 600; color: #333; text-align: center; display: inline-block; } .txt-box02 .cont02 li p.ico-1 { background: url("../img/content/sponsor-ico03.png") no-repeat left top; width:100px; height:100px; } .txt-box02 .cont02 li p.ico-2 { background: url("../img/content/add01-icon-09.png") no-repeat center top; width:150px; height:150px; } .txt-box02 .cont02 li p.ico-3 { background: url("../img/content/add01-icon-10.png") no-repeat center top; width:150px; height:150px; } .txt-box02 .cont02 dl { width: 80%; display: inline-block; vertical-align: top; } .txt-box02 .cont02 dt { margin: 10px 0 10px; font-size: 20px; font-weight: 600; color: #000; margin-bottom:20px; } .txt-box02 .cont02 dd { font-size: 16px; line-height: 28px; padding-left:0px;} .txt-box02 .cont02 .dot { padding-left: 12px; margin-left: 0px; margin-bottom: 0px; color: #555; background: url(../img/sub/icon-dot1.gif) no-repeat 0 11px;} @media only screen and (max-width:640px) { .txt-box02 .cont02 li { padding: 20px; } .txt-box02 .cont02 li p { width: 100%; font-size: 17px; display: block; } .txt-box02 .cont02 dl { width: 100%; } .txt-box02 .cont02 dt { text-align: left; font-size: 16px; margin-bottom:5px; margin: 0px 0 10px } } @media only screen and (max-width:480px) { .txt-box02 .cont01 { margin: 30px 0; } .txt-box02 .cont01 li { width: 145px; height: 145px; padding: 10px 5px; margin: 0 5px 5px 0; font-size: 14px; box-sizing: border-box; } .txt-box02 .cont01 li.item01 { border: 6px solid #2fa2c0 } .txt-box02 .cont01 li.item01 span { padding-top: 10px; } .txt-box02 .cont01 li.item02 { border: 6px solid #3d7dc4 } .txt-box02 .cont01 li.item03 { border: 6px solid #00ab81 } .txt-box02 .cont01 li.item04 { border: 6px solid #1685d7 } .txt-box02 .cont01 li.item05 { border: 6px solid #0930a1 } .txt-box02 .cont01 li span { padding: 20px 10px 0; } .txt-box02 .cont02 dd { text-align: left; font-size: 14px; letter-spacing:-1px; line-height:24px;} .txt-box02 .cont02 li p { width: 100%; margin-right: 0%; padding-top: 0px; font-size: 18px; font-weight: 600; color: #333; text-align: center; display: inline-block; } .txt-box02 .cont02 li p.ico-1 { background: url("../img/content/sponsor-ico03.png") no-repeat center top; width:80px; height:80px; } .txt-box02 .cont02 li p.ico-2 { background: url("../img/content/add01-icon-09.png") no-repeat center top; width:90px; height:90px; } .txt-box02 .cont02 li p.ico-3 { background: url("../img/content/add01-icon-10.png") no-repeat center top; width:90px; height:90px; } } .txt-box03 ul { font-size: 0; } .txt-box03 li { width: 44.8%; min-height: 100px; margin-right: 2%; font-size: 0; padding: 1% 2%; margin-bottom: 0px; border: 1px solid #ddd; display: inline-block; vertical-align: top; border-radius: 10px; } .txt-box03 li.num-1 dl { background: url("../img/content/vms-ico01.png") no-repeat 20px 20px; } .txt-box03 li.num-2 dl { background: url("../img/content/vms-ico02.png") no-repeat 20px 20px; } .txt-box03 dl { width: 78%; padding-left: 22%; padding-top:10px; padding-bottom: 10px; vertical-align: top; } .txt-box03 dt { margin: 10px 0 10px; font-size: 18px; font-weight: 400; color: #333; letter-spacing: -0.04em; line-height: 120%; } .txt-box03 dd { font-size: 15px; line-height: 160%; letter-spacing: -0.04em; } @media only screen and (max-width:1024px) { .txt-box03 li { width: 44%; } } @media only screen and (max-width:980px) { .txt-box03 li { width: 100%; min-height: auto; margin: 0 0 2% 0; box-sizing: border-box; } .txt-box03 li dl { background-size: 60px !important; } .txt-box03 dt { font-size: 17px; margin-bottom: 10px; } .txt-box03 dd { font-size: 14px; } } @media only screen and (max-width:480px) { .txt-box li dl { background-size: 60px !important; } } .txt-box04 ul { font-size: 0; } .txt-box04 li { width: 44.8%; min-height: 100px; margin-right: 2%; font-size: 0; padding: 3% 2%; margin-bottom: 0px; /*border: 0px solid #ddd;*/ display: inline-block; vertical-align: top; border-radius: 10px; background: #f8f8f8; } .txt-box04 li.num-1 dl { background: url("../img/content/social-ico01.png") no-repeat 20px 5px; } .txt-box04 li.num-2 dl { background: url("../img/content/social-ico02.png") no-repeat 20px 5px; } .txt-box04 dl { width: 75%; padding-left: 20%; padding-top:10px; padding-bottom: 20px; vertical-align: top; } .txt-box04 dt { margin: 10px 0 10px; font-size: 24px; font-weight: 600; color: #333; letter-spacing: -0.04em } .txt-box04 dd { font-size: 18px; line-height: 160%; letter-spacing: -0.04em; } @media only screen and (max-width:1024px) { .txt-box04 li { width: 44%; } } @media only screen and (max-width:980px) { .txt-box04 li { width: 100%; min-height: auto; margin: 0 0 2% 0; box-sizing: border-box; } .txt-box04 li dl { background-size: 80px !important; } .txt-box04 dt { font-size: 17px; margin-bottom: 10px; } .txt-box04 dd { font-size: 14px; } } @media only screen and (max-width:480px) { .txt-box04 li dl { background-size: 50px !important; } .txt-box04 li.num-1 dl { background: url("../img/content/social-ico01.png") no-repeat 20px 10px; } .txt-box04 li.num-2 dl { background: url("../img/content/social-ico02.png") no-repeat 20px 10px; } } /*======================================================= #sponsor-wrap ======================================================*/ .sponsor-wrap{ overflow: hidden; /*min-height: 450px; padding-bottom: 50px;*/ word-break: keep-all; } .sponsor-wrap > h4 { position: relative; width: 100%; margin: 0 0 50px 0; display: block; text-align:center; font-size: 24px; font-weight: 600; color: #333;} .sponsor-top.bg01 { background: url(../img/content/sponsor-top01.jpg) no-repeat 0 0; } .sponsor-top.bg01 { margin: 0 auto 100px auto; height: 300px; } .sponsor-top.bg02 { background: url(../img/content/sponsor-top02.jpg) no-repeat 0 0; } .sponsor-top.bg02 { margin: 0 auto 50px auto; height: 300px; } .sponsor-icon { margin: 0px auto 40px auto; overflow: hidden; } .sponsor-icon:after { content: ''; display: block; clear: both; } .sponsor-icon > li { float: left; width: 33.333%; height: 290px; } .sponsor-icon > li > div { height: 100%; box-sizing: border-box; padding: 50px 20px; border: 1px solid #ededed; border-left-width: 0px; } .sponsor-icon > li > div h4 { font-size: 24px; color: #385e84; letter-spacing: -1px; text-align: center; font-weight: 700; } .sponsor-icon > li > div h4:after { content: ''; display: block; width: 80px; height: 80px; border-radius: 50%; margin: 20px auto 0; background: #f1f1f1 url(../img/Content/03-ico-1.png) no-repeat 50% 0; background-size: 100%; } .sponsor-icon > li:nth-of-type(1) > div { border-left-width: 1px; } .sponsor-icon > li:nth-of-type(2) > div h4:after { background-image: url(../img/content/03-ico-2.png); } .sponsor-icon > li:nth-of-type(3) > div h4:after { background-image: url(../img/content/03-ico-3.png); } .sponsor-icon > li:nth-of-type(4) > div h4:after { background-image: url(../img/content/03-ico-4.png); } .sponsor-icon > li > div ul li { letter-spacing: -0.5px; } .sponsor-icon > li > div > ul > li { margin-top: 20px; color: #000; font-weight: 300; font-size: 16px; text-align: center; line-height: 24px; } .sponsor-icon > li > div > ul > li > ul > li { position: relative; padding-left: 10px; font-weight: 300; font-size: 15px; color: #404143; text-align: left; } .sponsor-icon > li > div > ul > li > ul > li:before { content: ''; display: block; position: absolute; left: 0px; top: 50%; width: 4px; height: 1px; background: #666; } .sponsor-icon a { color: #54575a !important; } @media all and (max-width:1299px) { .sponsor-icon { margin: 40px auto; } } @media all and (max-width:950px) { .sponsor-icon > li > div { padding: 20px; } .sponsor-icon > li > div > ul > li > ul > li { font-size: 15px; } .sponsor-icon > li { width: 50%; } .sponsor-icon > li > div { border-top-width: 0px; } .sponsor-icon > li:nth-of-type(3) > div { border-left-width: 1px; } .sponsor-icon > li:nth-of-type(1) > div, .sponsor-icon > li:nth-of-type(2) > div { border-top-width: 1px; } } @media all and (max-width:480px) { .sponsor-icon > li { float: none; width: 100%; height: auto; } .sponsor-icon > li > div { border-left-width: 1px; } .sponsor-icon > li:nth-of-type(2) > div { border-top-width: 0px; } .sponsor-icon > li > div > ul:after { content: ''; display: block; clear: both; } .sponsor-icon > li > div > ul > li { float: none; width: auto; } .sponsor-top.bg01 { background: url(../img/Content/m-sponsor-top01.jpg) no-repeat 0 0; background-size: 100%; } .sponsor-top.bg01 { margin: 0 auto 0px auto; height:400px; } .sponsor-top.bg02 { background: url(../img/Content/m-sponsor-top02.jpg) no-repeat 0 0; background-size: 100%; } .sponsor-top.bg02 { margin: 0 auto 0px auto; height: 400px; } .sponsor-icon > li > div > ul > li { margin-top: 20px; color: #000; font-weight: 300; font-size: 14px; text-align: center; line-height: 24px; } } /*======================================================= #busi-wrap =========================================================*/ #busi-wrap { overflow: hidden; /*min-height: 450px; padding-bottom: 50px;*/ word-break: keep-all; } #busi-wrap > h4 { position: relative; width: 100%; margin: 10px 0 50px 0; display: block; text-align: center; font-size: 40px; font-weight:600; letter-spacing:-2px; color: #22ab4a;} .busi-top { position: relative; width: 100%; height: auto; margin: 0 auto 40px auto; overflow: hidden; text-align: left; padding: 85px 20px 85px 31%; content: ""; box-sizing: border-box; border: 2px solid #e2e7ed; } .busi-top.icon01 { background: url(../img/content/busi-top01.jpg) no-repeat 5% 50%; } .busi-top.icon02 { background: url(../img/content/busi-top02.jpg) no-repeat 5% 50%; } .busi-top.icon03 { background: url(../img/content/busi-top03.jpg) no-repeat 5% 50%; } .busi-top.icon04 { background: url(../img/content/busi-top04.jpg) no-repeat 5% 50%; } .busi-top.icon05 { background: url(../img/content/busi-top06.jpg) no-repeat 5% 50%; } .busi-top p { color: #000; font-size: 18px; line-height: 30px; } .busi-top .btit { position: relative; width: 100%; margin: 0 0 20px 0; display: block; text-align:left; font-size: 36px; font-weight:600; letter-spacing:-1px; color: #68b445;} .busi-list { position: relative; margin: 0 auto; width: 100%; text-align: center; height: auto; display: block; overflow: hidden; } .busi-list > li { position: relative; display: block; overflow: hidden; margin: 0px 0 50px 0; box-sizing: border-box; line-height: 2.2em; width: 100%; color: #555; font-weight:400; font-size: 16px; text-align: left; } .busi-list > li > span { display: inline-block; float: left; width: 20%; padding-top: 30px; box-sizing: border-box; border-top: 1px solid #aaa; color: #111; font-weight: 700; font-size: 24px; } .busi-list > li > .desc, .busi-list > li > em { display: inline-block; padding-top: 30px; float: right; color:#000; font-size: 18px; font-weight: 400; margin-right: 0%; width: 70%; box-sizing: border-box; } .busi-list > li > .desc, .busi-list > li > em .btxt{ font-size: 18px; font-weight: 700; color: #111;} .busi-list > li > em > u { text-decoration: none; background: #f0faff; color: #385e84; padding: 5px; margin: 0 5px; font-weight: 400; } .busi-list > li > .desc > *:first-child { margin-top: 0; } .busi-list > li > br { display: block; } .busi-list > li > span > ul { margin-top: 10px; } .busi-list > li > span > ul > li { display: block; font-weight: 400; font-size: 15px; margin-bottom: 5px; padding: 2px 5px !important; color: #385e84; text-align: center; border: 1px solid #b9beca; } .busi-list > li > span > ul > li:first-child { color: #fff; background: #9dc37d; border-color: #9dc37d; margin-bottom: 15px; width: 60px; height: 60px; line-height: 60px; padding: 0 !important; border-radius: 1px; font-size: 25px; } .busi-list > li > span > ul > li:nth-child(2) { background: #f9fbf2; } .busi-list > li > span > ul > li:nth-child(3) { background: #f8f9f8; } .busi-list > li > span > ul > li:nth-child(4) { background: #f4f9fb; } .busi-list > li > span > ul > li:nth-child(5) { background: #eef8f5; } .busi-list > li img { margin: 15px 0 80px 0; } .busi-list > li:nth-child(2) > span { color: #374254; } .busi-list > li:nth-child(3) > span { color: #374254; } .busi-list > li:nth-child(4) > span { color: #374254; } .busi-list > li:nth-child(5) > span { color: #374254; } .busi-list > li:nth-child(6) > span { color: #374254; } .busi-list > li:nth-child(7) > span { color: #374254; } .busi-list02 { position: relative; margin: 20px 0; } .busi-list02 li { position: relative; display: block; padding-left: 10px; font-weight: 400; font-size:18px; color: #000; text-align: left; word-break: keep-all; letter-spacing: -0.5px; line-height: 2em; } .busi-list02 li:before { position: absolute; top: 16px; left: 0px; content: ""; width: 3px; height: 3px; background: #2b405b; } .busi-list02 li b { font-weight: 600; } .busi-list.col01 > li > span { border-radius: 3px; padding: 20px; text-align: center; border: 0; color: #fff !important; } .busi-list.col01 > li:nth-child(1) > span { background: #6792bc; } .busi-list.col01 > li:nth-child(2) > span { background: #77a8ab; } .busi-list.col01 > li:nth-child(3) > span { background: #77ab95; } .busi-list.col01 > li:nth-child(4) > span { background: #77ab82; } .busi-list.col01 > li:nth-child(5) > span { background: #9eab77; } .busi-list.col01 > li:nth-child(6) > span { background: #ab9d77; } .busi-list.col01 > li:nth-child(7) > span { background: #ab8777; } .busi-step { position: relative; margin: 0 auto; width: 100%; overflow: hidden; box-sizing: border-box; } .busi-step li { position: relative; float: left; margin: 0 4% 0 0%; width: 190px; height: 180px; box-sizing: border-box; color: #555;font-weight:400; font-size: 16px; padding-top: 90px; text-align: center; line-height: 24px; } .busi-step li:after { content: ''; top: 55px; right: -53px; display: block; position: absolute; width: 70px; height: 36px; background: url(../img/Content/ico-arrow.png) no-repeat 50% 100%; background-size: 50px auto; } .busi-step li:nth-child(4n), .busi-step li:last-child { margin: 0 0 0 0%; } .busi-step li:nth-child(4n):after, .busi-step li:last-child:after { background: none; } .busi-step li:before { content: ''; position: absolute; top: 0px; left: 0px; width: 190px; height: 160px; z-index: 99; border: 1px solid #e2e7ed; box-sizing: border-box; } .busi-step li:nth-child(1):before { background: url(../img/content/ico-step01.png) no-repeat center 20%; } .busi-step li:nth-child(2):before { background: url(../img/content/ico-step02.png) no-repeat center 20%; } .busi-step li:nth-child(3):before { background: url(../img/content/ico-step03.png) no-repeat center 20%; } .busi-step li:nth-child(4):before { background: url(../img/content/ico-step04.png) no-repeat center 20%; } .busi-step i { display: block; overflow: hidden; position: relative; margin: 30px auto 60px auto; width: 100%; font-size: 15px; color: #798c9c; line-height: 1.4em; font-weight: 300; text-align: center; word-break: keep-all; transition: all 0.4s ease 0s; z-index: 88; } .busi-step.type2 { font-size: 0; } .busi-step.type2 li { float: none; display: inline-block; vertical-align: top; font-size: 1rem; } .busi-step.type2 li .sort { display: inline-block; line-height: 1.3; } .area_list { position: relative; margin: 20px 0; } .area_list li { position: relative; display: block; padding-left: 10px; font-weight: 400; font-size:17px; color: #000; text-align: left; word-break: keep-all; letter-spacing: -0.5px; line-height: 2em; } .area_list li:before { position: absolute; top: 16px; left: 0px; content: ""; width: 3px; height: 3px; background: #2b405b; } .area_list li b { font-weight: 500; } .busi-list05 { position: relative; margin: 25px 0; overflow: hidden; } .busi-list05 li { box-sizing: border-box; width: 100%; line-height: 2em; padding: 20px 55px; float: left; margin-bottom: 15px; background: #f5f5f0; color: #54575a; font-weight: 300; letter-spacing: -0.5px; } .busi-list05 li > span { box-sizing: border-box; position: absolute; left: 0px; display: block; margin: 0 0 0 15px; width: 30px; height: 30px; line-height: 26px; font-size: 16px; border-radius: 50%; text-align: center; background: #fff; color: #575755; } .busi-list05 li:last-child > span { background: #989551; color: #fff; } @media only screen and (max-width:1260px) { #busi-wrap { width: 100%; } #busi-wrap h2 { margin: 15px 0 25px 0; font-size: 35px; } #busi-wrap > h4 { margin: 35px 0 10px 0; font-size: 20px; } .busi-top { padding: 150px 5% 30px 5%; } .busi-top.icon01, .busi-top.icon02, .busi-top.icon03, .busi-top.icon04, .busi-top.icon05 { background-size: 150px auto; background-position: 50% 15px; } .busi-top p > br { display: none; } .busi-step li { width: 100%; margin: 0 0 20px 0; } .busi-step li:after { top: 80%; left: 50%; margin: 0 0 0 -30px; transform: rotate(90deg); } .busi-step li:nth-child(4n) { margin: 0 0 20px 0; } .busi-step li:last-child { margin: 0; } .busi-step li:nth-child(4n):after { background: url() no-repeat 50% 100%; background-size: 50px auto; } .busi-step li:before { width: 100%; } .busi-list > li { margin: 15px 0 50px 0; } .busi-list > li > span { width: 30%; font-size: 18px; } .busi-list > li > .desc, .busi-list > li > em { width: 64%; font-size: 15px; } .busi-list > li > br { display: none; } .busi-list > li img { width: 100%; max-width: 845px; margin: 5px 0 10px 0; } } @media only screen and (max-width:999px) { .busi-list > li > span > ul > li { font-size: 14px; } .busi-list.col01 > li > span { font-size: 16px; padding: 10px 5%; } } @media only screen and (max-width:680px) { #busi-wrap { /*min-height: 200px; padding-bottom: 40px;*/ } #busi-wrap > h4 { margin: 25px 0 10px 0; font-size: 16px; } .busi-step { margin: 15px auto 0 auto; } .busi-list > li { margin: 5px 0 35px 0; } .busi-list > li > span { float: inherit; width: 100%; padding-bottom: 0px; margin-bottom: 0px; font-size: 17px; } .busi-list > li > .desc, .busi-list > li > em { float: inherit; padding-top: 20px; margin: 0; width: 100%; padding-bottom: 0; font-size: 14px; overflow: hidden; overflow-x: auto; } .busi-list > li > em > u { padding: 2px 5px; } .busi-list > li > .desc, .busi-list > li > em .btxt{ font-size: 16px; font-weight: 600; color: #111; line-height:20px;} .busi-top .btit { position: relative; width: 100%; margin: 0 0 20px 0; display: block; text-align:left; font-size: 24px; font-weight:600; letter-spacing:-1px; color: #68b445; } .busi-top p { color: #000; font-size: 16px; line-height: 24px; } .busi-step li { font-size: 14px; padding-top:80px; line-height: 24px; } .busi-step li:before { content: ''; position: absolute; top: 0px; left: 0px; width:100%; height: 130px; z-index: 99; border: 1px solid #e2e7ed; box-sizing: border-box; } .area_list li { position: relative; display: block; padding-left: 10px; font-weight: 400; font-size:15px; color: #000; text-align: left; word-break: keep-all; letter-spacing: -0.5px; line-height: 1.8em; } .area_list li:before { position: absolute; top: 13px; left: 0px; content: ""; width: 3px; height: 3px; background: #2b405b; } .busi-list02 li { position: relative; display: block; padding-left: 10px; font-weight: 400; font-size:15px; color: #000; text-align: left; word-break: keep-all; letter-spacing: -0.5px; line-height: 1.8em; } .busi-list02 li:before { position: absolute; top: 13px; left: 0px; content: ""; width: 3px; height: 3px; background: #2b405b; } } @media only screen and (max-width:480px) { #busi-wrap h2 { font-size: 30px; } } /* ===================================== sub_wrap ===================================== */ .sub_wrap { height: 200px; padding: 60px 0 0 60px; color: #fff; } .sub_wrap dl { width: 700px; letter-spacing: -0.03em; word-break: keep-all; } .sub_wrap dt { font-size: 18px; line-height: 30px; font-weight: 400; letter-spacing: -0.03em;} .sub_wrap dt strong { display: block; font-size: 28px; font-weight: 700; line-height: 36px; } .sub_wrap dd { margin-top: 20px; font-size:18px; line-height: 26px; } .biz_01 .sub_wrap { background:url(../img/content/01_bg.jpg) no-repeat 0 0; color: #40487a; border-radius: 20px;} .biz_01 .sub_wrap dt strong { color: #40487a; } .biz_01 .sub_wrap dd { color: #555555; } .sub_wrap2 { height: 235px; padding: 45px 0 0 65px; color: #fff; } .sub_wrap2 dl { width: 395px; letter-spacing: -0.05em; word-break: keep-all; } .sub_wrap2 dt { font-size: 36px; } .sub_wrap2 dt strong { display: block; font-size: 36px; font-weight: 600; line-height: 36px; } .sub_wrap2 dd { margin-top: 25px; font-size: 15px; line-height: 25px; } .biz_02 .sub_wrap2 { background: url(../img/content/01_bg_2.jpg) no-repeat 0 0; color: #58989a;} .biz_02 .sub_wrap2 dt strong { color: #58989a; } .biz_02 .sub_wrap2 dd { color: #555555; } .sub_wrap3 { height: 235px; padding: 45px 0 0 65px; color: #fff; } .sub_wrap3 dl { width:700px; letter-spacing: -0.05em; word-break: keep-all; } .sub_wrap3 dt { font-size: 36px; } .sub_wrap3 dt strong { font-size: 36px; font-weight: 600; line-height: 36px; } .sub_wrap3 dd { margin-top: 25px; font-size: 15px; line-height: 25px; } .biz_03 .sub_wrap3 { background: url(../img/content/01_bg.jpg) no-repeat 0 0; color: #fe7e4b; } .biz_03 .sub_wrap3 dt strong { color: #fe7e4b; } .biz_03 .sub_wrap3 dd { color: #555555; } .sub_wrap4 { height: 235px; padding: 45px 0 0 65px; color: #fff; } .sub_wrap4 dl { width:700px; letter-spacing: -0.05em; word-break: keep-all; } .sub_wrap4 dt { font-size: 36px; } .sub_wrap4 dt strong { font-size: 36px; font-weight: 600; line-height: 36px; } .sub_wrap4 dd { margin-top: 25px; font-size: 15px; line-height: 25px; } .biz_04 .sub_wrap4 { background: url(../img/content/03_bg.jpg) no-repeat 0 0; color: #be5d30; } .biz_04 .sub_wrap4 dt strong { color: #be5d30; } .biz_04 .sub_wrap4 dd { color: #555555; } .biz_0202 .sub_wrap { background:url(../img/content/0202_bg.jpg) no-repeat 0 0; color: #fff; border-radius: 20px;} .biz_0202 .sub_wrap dt strong { color: #fff; } .biz_0202 .sub_wrap dd { color: #fff; } .biz_0203 .sub_wrap { background:url(../img/content/0203_bg.jpg) no-repeat 0 0; color: #fff; border-radius: 20px;} .biz_0203 .sub_wrap dt strong { color: #fff; } .biz_0203 .sub_wrap dd { color: #fff; } .biz_0204 .sub_wrap { background:url(../img/content/0204_bg.jpg) no-repeat 0 0; color: #fff; border-radius: 20px;} .biz_0204 .sub_wrap dt strong { color: #fff; } .biz_0204 .sub_wrap dd { color: #fff; } .biz_0205 .sub_wrap { background:url(../img/content/0205_bg.jpg) no-repeat 0 0; color: #fff; border-radius: 20px;} .biz_0205 .sub_wrap dt strong { color: #fff; } .biz_0205 .sub_wrap dd { color: #fff; } .biz_0402 .sub_wrap { background:url(../img/content/0402_bg.jpg) no-repeat 0 0; color: #fff; border-radius: 20px;} .biz_0402 .sub_wrap dt strong { color: #fff; } .biz_0402 .sub_wrap dd { color: #fff; } .biz_0403 .sub_wrap { background:url(../img/content/0403_bg.jpg) no-repeat 0 0; color: #fff; border-radius: 20px;} .biz_0403 .sub_wrap dt strong { color: #fff; } .biz_0403 .sub_wrap dd { color: #fff; } .biz_0404 .sub_wrap { background:url(../img/content/0404_bg.jpg) no-repeat 0 0; color: #fff; border-radius: 20px;} .biz_0404 .sub_wrap dt strong { color: #fff; } .biz_0404 .sub_wrap dd { color: #fff; } @media only screen and (max-width:680px) { .biz_0202 .sub_wrap { width: 100%; height: auto; padding: 30px 30px 80px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .biz_0202 .sub_wrap dl { width: 100%; } .biz_0202 .sub_wrap dl dt { font-size: 20px; } .biz_0202 .sub_wrap dt strong { font-size: 20px; line-height: 25px; } .biz_0202 .sub_wrap dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .biz_0202 .sub_wrap dd br { display: none; } .biz_0202 .sub_wrap { background-color: #48b9cb; } .biz_0203 .sub_wrap { width: 100%; height: auto; padding: 30px 30px 80px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .biz_0203 .sub_wrap dl { width: 100%; } .biz_0203 .sub_wrap dl dt { font-size: 20px; } .biz_0203 .sub_wrap dt strong { font-size: 20px; line-height: 25px; } .biz_0203 .sub_wrap dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .biz_0203 .sub_wrap dd br { display: none; } .biz_0203 .sub_wrap { background-color: #4f82c1; } .biz_0204 .sub_wrap { width: 100%; height: auto; padding: 30px 30px 80px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .biz_0204 .sub_wrap dl { width: 100%; } .biz_0204 .sub_wrap dl dt { font-size: 20px; } .biz_0204 .sub_wrap dt strong { font-size: 20px; line-height: 25px; } .biz_0204 .sub_wrap dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .biz_0204 .sub_wrap dd br { display: none; } .biz_0204 .sub_wrap { background-color: #73b970; } .biz_0205 .sub_wrap { width: 100%; height: auto; padding: 30px 30px 80px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .biz_0205 .sub_wrap dl { width: 100%; } .biz_0205 .sub_wrap dl dt { font-size: 20px; } .biz_0205 .sub_wrap dt strong { font-size: 20px; line-height: 25px; } .biz_0205 .sub_wrap dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .biz_0205 .sub_wrap dd br { display: none; } .biz_0205 .sub_wrap { background-color: #71c6b6; } .biz_0402 .sub_wrap { width: 100%; height: auto; padding: 30px 30px 80px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .biz_0402 .sub_wrap dl { width: 100%; } .biz_0402 .sub_wrap dl dt { font-size: 20px; } .biz_0402 .sub_wrap dt strong { font-size: 20px; line-height: 25px; } .biz_0402 .sub_wrap dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .biz_0402 .sub_wrap dd br { display: none; } .biz_0402 .sub_wrap { background:url(../img/content/m-0402_bg.jpg) no-repeat 0 0; } .biz_0403 .sub_wrap { width: 100%; height: auto; padding: 30px 30px 80px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .biz_0403 .sub_wrap dl { width: 100%; } .biz_0403 .sub_wrap dl dt { font-size: 20px; } .biz_0403 .sub_wrap dt strong { font-size: 20px; line-height: 25px; } .biz_0403 .sub_wrap dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .biz_0403 .sub_wrap dd br { display: none; } .biz_0403 .sub_wrap { background:url(../img/content/m-0403_bg.jpg) no-repeat 0 0; } .biz_0404 .sub_wrap { width: 100%; height: auto; padding: 30px 30px 80px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .biz_0404 .sub_wrap dl { width: 100%; } .biz_0404 .sub_wrap dl dt { font-size: 20px; } .biz_0404 .sub_wrap dt strong { font-size: 20px; line-height: 25px; } .biz_0404 .sub_wrap dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .biz_0404 .sub_wrap dd br { display: none; } .biz_0404 .sub_wrap { background:url(../img/content/m-0404_bg.jpg) no-repeat 0 0; } } .sponsor{margin-left:-20px;letter-spacing:-0.05em;word-break:keep-all; margin-bottom:70px;} .sponsor dl{display:table;margin-top:10px;} .sponsor dt{float:left;margin:0 10px 0 20px;width:158px;height:158px;line-height:158px;font-size:17px;color:#4f67a1;text-align:center;border:1px solid #e5e5e5;border-radius:10px;} .sponsor dd{display:table-cell;vertical-align:middle;margin-left:10px;padding:30px 35px;width:300px;height:70px;font-size:15px;color:#555;line-height:25px;background:#f3f3f3;border-radius:10px;} /* 후원안내 */ .sponsor2 .guide { display: inline-block; width: 100%; color: #000; border-bottom: 0px solid #e5e5e5; margin-top: 50px; } .sponsor2 .guide_tit { float: left; width: 170px; font-size: 25px; line-height: 25px; letter-spacing: -0.05em; } .sponsor2 .guide_tit strong { display: inline-block; font-weight: normal; } .sponsor2 .guide_txt { width: 930px; float: right; letter-spacing: -0.05em; margin-bottom: 0px; } .sponsor2 .guide_txt dl.txt dt { font-size: 20px; line-height: 30px; color: #4f67a1; border: 1px solid #e5e5e5; border-radius: 5px; padding: 20px; width: 890px;margin-top: 0px; } .sponsor2 .guide_txt dl.txt dd { margin-top: 0px; font-size: 25px; line-height: 25px; color: #4f67a1; font-family: 'Roboto' } .sponsor2 { overflow: none; margin: 0; margin-bottom: 30px; } .sponsor2 dl { display: block; width: 100%; margin-top: 0; text-align: center; } .sponsor2 dt { float: none; margin: 15px 0 0 0; width: 100%; height: 40px; line-height: 40px; font-size: 15px; border-radius: 5px; } .sponsor2 dd { display: block; width: auto; height: auto; padding: 10px; margin: 5px 0 0 0; font-size: 13px; line-height: 20px; border-radius: 5px; box-sizing: border-box; } .bank { display: inline-block; width: 100%; margin-left: 1px; } .bank li { position: relative; float: left; width: 423px; height: 190px; margin-left: -1px; padding: 0 20px; border: 1px solid #e5e5e5; text-align: center; word-break: keep-all; letter-spacing: -0.05em; } .bank li .tit { position: absolute; top:-50px; left: 0; padding:10px; margin-left: 20px; font-size: 17px; color: #fff; border-radius: 5px; background-color: #4f67a1; width: 88%;} .bank li .txt { margin-top: 100px; font-size: 15px; color: #555; line-height: 25px; } .txt2 { margin-top: 20px; padding-left:25px; margin-left: 20px; margin-bottom: 0px; font-size: 15px;line-height: 25px; color: #555; background: url(../img/content/icon_dot3.gif) no-repeat 0 8px; } .tit {clear: both; margin-bottom: 25px; margin-top: 70px; font-weight:700; font-size: 30px; line-height: 30px; color: #000; letter-spacing: -0.03em; } .tit02 {clear: both; margin-bottom: 25px; margin-top: 30px; font-weight:700; font-size: 24px; line-height: 30px; color: #000; letter-spacing: -0.03em; } .txt-small { margin-bottom: 15px; font-size: 18px; line-height: 23px; } /* 절차 */ .process { margin-top: 0px; } .process .listDiv { margin-top: 30px; } .process .listDiv:after { content: ''; display: block; clear: both } .process .listDiv .list { position: relative; top: 0px; display: table; float: left; margin-right: 30px; margin-bottom: 30px; width: 14.4%; height:180px; border: 1px solid #e5e5e5; background: #fff; text-align: center; border-radius: 20px;} .process .listDiv .list:last-child { margin-right: 0 } .process .listDiv .list:nth-child(1) { background: url('../img/content/process-bg1.png') no-repeat center; } .process .listDiv .list:nth-child(2) { background: url('../img/content/process-bg2.png') no-repeat center; } .process .listDiv .list:nth-child(3) { background: url('../img/content/process-bg3.png') no-repeat center; } .process .listDiv .list:nth-child(4) { background: url('../img/content/process-bg4.png') no-repeat center; } .process .listDiv .list:nth-child(5) { background: url('../img/content/process-bg5.png') no-repeat center; } .process .listDiv .list:nth-child(6) { background: url('../img/content/process-bg6.png') no-repeat center; } .process .listDiv .list:after { content: ''; display: block; position: absolute; top: 50%; left: 188px; margin-top: -12px; width: 14px; height: 24px; background: url('../img/content/process-arrow.png') no-repeat } .process .listDiv .list:last-child:after { display: none } .process .listDiv .list span { display: block; font-weight: 600; font-size: 18px; line-height: 24px; color: #333; padding-top: 120px; vertical-align: middle } .process .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 14px; letter-spacing: -0.5px; } /* 절차02 */ .process02 { margin-top: 0px; } .process02 .listDiv { margin-top: 30px; } .process02 .listDiv:after { content: ''; display: block; clear: both } .process02 .listDiv .list { position: relative; top: 0px; display: table; float: left; margin-right: 30px; margin-bottom: 30px; width: 23%; height:200px; border: 1px solid #e5e5e5; background: #fff; text-align: center; border-radius: 20px;} .process02 .listDiv .list:last-child { margin-right: 0 } .process02 .listDiv .list:nth-child(1) { background: url('../img/content/process-bg7.png') no-repeat center; } .process02 .listDiv .list:nth-child(2) { background: url('../img/content/process-bg8.png') no-repeat center; } .process02 .listDiv .list:nth-child(3) { background: url('../img/content/process-bg9.png') no-repeat center; } .process02 .listDiv .list:nth-child(4) { background: url('../img/content/process-bg10.png') no-repeat center; } .process02 .listDiv .list:after { content: ''; display: block; position: absolute; top: 50%; left: 296px; margin-top: -12px; width: 14px; height: 24px; background: url('../img/content/process-arrow.png') no-repeat } .process02 .listDiv .list:last-child:after { display: none } .process02 .listDiv .list span { display: block; font-weight: 600; font-size: 18px; line-height: 24px; color: #333; padding-top: 110px; vertical-align: middle } .process02 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 16px; letter-spacing: -0.5px; } /* 절차03 */ .process03 { margin-top: 0px; } .process03 .listDiv { margin-top: 30px; } .process03 .listDiv:after { content: ''; display: block; clear: both } .process03 .listDiv .list { position: relative; top: 0px; display: table; float: left; margin-right: 30px; margin-bottom: 30px; width: 17.8%; height:220px; border: 1px solid #e5e5e5; background: #fff; text-align: center; border-radius: 20px;} .process03 .listDiv .list:last-child { margin-right: 0 } .process03 .listDiv .list:nth-child(1) { background: url('../img/content/volunteer-ico1.png') no-repeat center; } .process03 .listDiv .list:nth-child(2) { background: url('../img/content/volunteer-ico2.png') no-repeat center; } .process03 .listDiv .list:nth-child(3) { background: url('../img/content/volunteer-ico3.png') no-repeat center; } .process03 .listDiv .list:nth-child(4) { background: url('../img/content/volunteer-ico4.png') no-repeat center; } .process03 .listDiv .list:nth-child(5) { background: url('../img/content/volunteer-ico5.png') no-repeat center; } .process03 .listDiv .list:after { content: ''; display: block; position: absolute; top: 50%; left: 233px; margin-top: -12px; width: 14px; height: 24px; background: url('../img/content/process-arrow.png') no-repeat } .process03 .listDiv .list:last-child:after { display: none } .process03 .listDiv .list span { display: block; font-weight: 600; font-size: 20px; line-height: 24px; color: #333; padding-top: 110px; vertical-align: middle; padding-bottom:10px; } .process03 .listDiv .list .txt { display: block; color: #666; line-height: 24px; margin-top: 10px; font-size: 16px; letter-spacing: -0.5px; } /* 절차04 */ .process04 { margin-top: 0px; } .process04 .listDiv { margin-top: 30px; } .process04 .listDiv:after { content: ''; display: block; clear: both } .process04 .listDiv .list { position: relative; top: 0px; display: table; float: left; margin-right: 30px; margin-bottom: 30px; width: 31%; height:180px; border: 1px solid #e5e5e5; background: #fff; text-align: center; border-radius: 20px;} .process04 .listDiv .list:last-child { margin-right: 0 } .process04 .listDiv .list:nth-child(1) { background: url('../img/content/social-ico03.png') no-repeat center; } .process04 .listDiv .list:nth-child(2) { background: url('../img/content/social-ico04.png') no-repeat center; } .process04 .listDiv .list:nth-child(3) { background: url('../img/content/social-ico05.png') no-repeat center; } .process04 .listDiv .list:after { content: ''; display: block; position: absolute; top: 50%; left: 395px; margin-top: -12px; width: 14px; height: 24px; background: url('../img/content/process-arrow.png') no-repeat } .process04 .listDiv .list:last-child:after { display: none } .process04 .listDiv .list span { display: block; font-weight: 600; font-size: 20px; line-height: 24px; color: #333; padding-top: 110px; vertical-align: middle; padding-bottom:10px; } .process04 .listDiv .list .txt { display: block; color: #666; line-height: 24px; margin-top: 10px; font-size: 16px; letter-spacing: -0.5px; } /* 절차아님05 */ .process05 { margin-top: 0px; } .process05 .listDiv { margin-top: 30px; } .process05 .listDiv:after { content: ''; display: block; clear: both } .process05 .listDiv .list { position: relative; top: 0px; display: table; float: left; margin-right: 30px; margin-bottom: 30px; width: 23%; height:180px; border: 1px solid #e5e5e5; background:#f9f9f9; text-align: center; border-radius: 20px;} .process05 .listDiv .list:last-child { margin-right: 0 } .process05 .listDiv .list:nth-child(1) { background:#f7f7f7 url('../img/content/sun-bg1.png') no-repeat center; } .process05 .listDiv .list:nth-child(2) { background:#f7f7f7 url('../img/content/sun-bg2.png') no-repeat center; } .process05 .listDiv .list:nth-child(3) { background:#f7f7f7 url('../img/content/sun-bg3.png') no-repeat center; } .process05 .listDiv .list:nth-child(4) { background:#f7f7f7 url('../img/content/sun-bg4.png') no-repeat center; } /*.process05 .listDiv .list:after { content: ''; display: block; position: absolute; top: 50%; left: 296px; margin-top: -12px; width: 14px; height: 24px; background: url('../img/content/process-arrow.png') no-repeat }*/ .process05 .listDiv .list:last-child:after { display: none } .process05 .listDiv .list span { display: block; font-weight: 600; font-size: 18px; line-height: 24px; color: #333; padding-top: 120px; vertical-align: middle } .process05 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 16px; letter-spacing: -0.5px; } .box { position: relative; border: 1px solid #d4d4d4; padding: 0 50px; margin-top: 20px; letter-spacing: -0.05em; border-radius: 20px; } .box:first-child { margin-top: 0; } .roundbox_wrap { display: inline-block; width: 100%; margin: 30px 0 20px 0; } .roundbox_wrap .roundbox { float: left; width: 1137px; } .roundbox_wrap p { display: inline-block; margin-bottom: 33px; color: #222; font-size: 19px; } .roundbox_wrap .roundbox .roundbox_list li { position: relative; padding-left: 40px; line-height: 1.7; margin-bottom: 15px; font-size: 16px; color: #555; font-weight: 400; border-bottom: 1px solid #eee; padding-bottom: 15px; } .roundbox_wrap .roundbox .roundbox_list .none { border-bottom: 0px solid #eee; padding-bottom: 0px; } .roundbox_wrap .roundbox .roundbox_list li .circle { content: ""; display: block; width: 27px; height: 27px; border-radius: 50%; background-color: #5766c1; position: absolute; left: 0; top: 2px; } .roundbox_wrap .roundbox .roundbox_list li .circle strong { display: block; color: #fff; font-size: 14px; text-align: center; padding-top: 3px; } .roundbox_wrap .roundbox .roundbox_list2 li { /*margin-bottom: 10px;*/ padding-left: 0px; background-size: 12px auto; font-size: 17px; line-height: 2.4; letter-spacing: -0.8px;} .roundbox_wrap .roundbox .roundbox_list2 li .dot { padding-left: 12px; margin-left:0px; margin-bottom: 0px; font-size: 13px; line-height: 20px; color: #555; background: url(../img/content/icon_dot1.gif) no-repeat 0 5px; } .roundbox_wrap .roundbox .roundbox_list2 li .dot strong { color: #000; font-size: 18px; text-align: left; padding-top: 2px; font-weight: 500; } /* 자원봉사 */ .biz_03 .volunteer { display: inline-block; width: 100%; color: #000; border-bottom: 0px solid #e5e5e5; margin-top: 50px; } .biz_03 .volunteer_tit { float: left; width: 300px; font-size: 25px; line-height: 25px; letter-spacing: -0.05em; } .biz_03 .volunteer_tit strong { display: inline-block; font-weight: normal; } .biz_03 .volunteer_txt { width:800px; float: right; letter-spacing: -0.05em; margin-bottom:0px; } .biz_03 .volunteer_txt dl.txt dt { font-size: 20px; line-height: 30px; color: #4f67a1; border: 1px solid #e5e5e5; border-radius: 5px; padding: 20px; } .biz_03 .volunteer_txt dl.txt dd { margin-top: 0px; font-size: 25px; line-height: 25px; color: #4f67a1; font-family:'Roboto'} /* 테이블 */ table.table1 { width: 100%; border-collapse: collapse; border-top: 1px solid #535353; word-break: keep-all; } table.table1 th, table.table1 td { font-size: 18px; border-left: 1px solid #d5d5d5; line-height: 22px; text-align: center; vertical-align: middle; } table.table1 th { padding: 20px 15px; } table.table1 th:first-child { border-left: 0; } table.table1 td { padding: 15px 20px; } table.table1 thead th { border-bottom: 1px solid #d5d5d5; color: #333; background: #f8f8f8; } table.table1 tbody th { font-weight:600; background: #f8f8f8; border-bottom: 1px solid #d5d5d5; color: #111; } table.table1 tbody td { border-bottom: 1px solid #d5d5d5; color: #555; padding:25px; } table.table1 .left { text-align: left; padding: 15px; } table.table1 .right { text-align: right; padding: 15px; } table.table1 input, table.table1 select, table.table1 span { vertical-align: middle; } table.table1 select { font-size: 14px; } /* 리스트 */ ul.list li { padding-left: 13px; margin-top: 10px; font-size: 17px; line-height: 22px; color: #333; background: url(../img/content/icon_dot1.gif) no-repeat 0 10px; word-break: keep-all; } ul.list li:first-child { margin-top: 0; } ul.list ul.list2 { margin: 10px 0 15px; } ul.list2 li { padding-left: 12px; margin-bottom: 5px; font-size: 13px; line-height: 20px; color: #555; background: url(../img/content/icon_dot2.gif) no-repeat 0 8px; } @media all and (max-width:1024px) { .process { margin-top: 20px } .process .listDiv { margin-top: 15px; width: 100%; } .process .listDiv .list { margin-right: 20px; width: 31%; height: 230px; margin-bottom: 20px; } .process .listDiv .list:after { left: 320px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process .listDiv .list span { font-size: 15px; line-height: 22px } .process .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 14px; letter-spacing: -0.5px; } .process02 { margin-top: 20px } .process02 .listDiv { margin-top: 15px; width: 100%; } .process02 .listDiv .list { margin-right: 20px; width: 31%; height: 230px; margin-bottom: 20px; } .process02 .listDiv .list:after { left: 320px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process02 .listDiv .list span { font-size: 15px; line-height: 22px } .process02 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 14px; letter-spacing: -0.5px; } .process03 { margin-top: 20px } .process03 .listDiv { margin-top: 15px; width: 100%; } .process03 .listDiv .list { margin-right: 20px; width: 31%; height: 230px; margin-bottom: 20px; } .process03 .listDiv .list:after { left: 320px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process03 .listDiv .list span { font-size: 15px; line-height: 22px } .process03 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 14px; letter-spacing: -0.5px; } .process04 { margin-top: 20px } .process04 .listDiv { margin-top: 15px; width: 100%; } .process04 .listDiv .list { margin-right: 20px; width: 31%; height: 230px; margin-bottom: 20px; } .process04 .listDiv .list:after { left: 320px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process04 .listDiv .list span { font-size: 15px; line-height: 22px } .process04 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 14px; letter-spacing: -0.5px; } .process05 { margin-top: 20px } .process05 .listDiv { margin-top: 15px; width: 100%; } .process05 .listDiv .list { margin-right: 20px; width: 31%; height: 230px; margin-bottom: 20px; } .process05 .listDiv .list:after { left: 320px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process05 .listDiv .list span { font-size: 15px; line-height: 22px } .process05 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 14px; letter-spacing: -0.5px; } } @media all and (max-width:981px) { .process { margin-top: 20px } .process .listDiv { margin-top: 15px; width: 100%; } .process .listDiv .list { margin-right: 20px; width: 30%; height: 230px; margin-bottom: 20px; } .process .listDiv .list:after { left: 230px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process .listDiv .list span { font-size: 15px; line-height: 22px } .process .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 13px; letter-spacing: -0.5px; } .process02 { margin-top: 20px } .process02 .listDiv { margin-top: 15px; width: 100%; } .process02 .listDiv .list { margin-right: 20px; width: 30%; height: 230px; margin-bottom: 20px; } .process02 .listDiv .list:after { left: 230px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process02 .listDiv .list span { font-size: 15px; line-height: 22px } .process02 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 13px; letter-spacing: -0.5px; } .process03 { margin-top: 20px } .process03 .listDiv { margin-top: 15px; width: 100%; } .process03 .listDiv .list { margin-right: 20px; width: 30%; height: 230px; margin-bottom: 20px; } .process03 .listDiv .list:after { left: 230px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process03 .listDiv .list span { font-size: 15px; line-height: 22px } .process03 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 13px; letter-spacing: -0.5px; } .process04 { margin-top: 20px } .process04 .listDiv { margin-top: 15px; width: 100%; } .process04 .listDiv .list { margin-right: 20px; width: 30%; height: 230px; margin-bottom: 20px; } .process04 .listDiv .list:after { left: 230px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process04 .listDiv .list span { font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: -0.5px;} .process04 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 13px; letter-spacing: -0.5px; } .process05 { margin-top: 20px } .process05 .listDiv { margin-top: 15px; width: 100%; } .process05 .listDiv .list { margin-right: 20px; width: 30%; height: 230px; margin-bottom: 20px; } .process05 .listDiv .list:after { left: 230px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process05 .listDiv .list span { font-size: 15px; line-height: 22px } .process05 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 13px; letter-spacing: -0.5px; } } @media all and (max-width:680px) { .process { margin-top: 20px } .process .listDiv { margin-top: 15px; width: 100%; } .process .listDiv .list { margin-right: 20px; width: 30%; height: 230px; margin-bottom: 20px; } .process .listDiv .list:after { left: 230px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process .listDiv .list span { font-size: 15px; line-height: 22px } .process .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 13px; letter-spacing: -0.5px; } .process02 { margin-top: 20px } .process02 .listDiv { margin-top: 15px; width: 100%; } .process02 .listDiv .list { margin-right: 20px; width: 44%; height: 180px; margin-bottom: 20px; } .process02 .listDiv .list:after { left: 175px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process02 .listDiv .list span { font-size: 15px; line-height: 22px } .process02 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 13px; letter-spacing: -0.5px; } .process03 { margin-top: 20px } .process03 .listDiv { margin-top: 15px; width: 100%; } .process03 .listDiv .list { margin-right: 20px; width: 44%; height: 200px; margin-bottom: 20px; } .process03 .listDiv .list:after { left: 177px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process03 .listDiv .list span { font-size: 15px; line-height: 22px } .process03 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 0px; font-size: 13px; letter-spacing: -0.5px; } .process04 { margin-top: 20px } .process04 .listDiv { margin-top: 15px; width: 100%; } .process04 .listDiv .list { margin-right: 20px; width: 44%; height: 180px; margin-bottom: 20px; } .process04 .listDiv .list:after { left: 178px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process02 .listDiv .list span { font-weight: 400; font-size: 16px; line-height: 20px; padding-top: 100px;letter-spacing: -0.5px;} .process04 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 5px; font-size: 13px; letter-spacing: -0.5px; } .process05 { margin-top: 20px } .process05 .listDiv { margin-top: 15px; width: 100%; } .process05 .listDiv .list { margin-right: 20px; width: 44%; height: 180px; margin-bottom: 20px; } .process05 .listDiv .list:after { left: 230px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process05 .listDiv .list span { font-size: 15px; line-height: 20px; font-weight: 400; } .process05 .listDiv .list .txt { display: block; color: #666; line-height: 22px; margin-top: 10px; font-size: 13px; letter-spacing: -0.5px; } } @media all and (max-width:800px) { .box { position: relative; border: 1px solid #d4d4d4; padding: 0 20px; margin-top: 20px; letter-spacing: -0.05em; border-radius: 10px; } .box:first-child { margin-top: 0; } .roundbox_wrap { display: inline-block; width: 100%; margin: 30px 0 20px 0; } .roundbox_wrap .roundbox { float: left; width: 98%; } .roundbox_wrap p { display: inline-block; margin-bottom: 33px; color: #222; font-size: 19px; } .roundbox_wrap .roundbox .roundbox_list li { position: relative; padding-left: 40px; line-height: 1.7; margin-bottom: 15px; font-size: 16px; color: #555; font-weight: 400; border-bottom: 1px solid #eee; padding-bottom: 15px; } .roundbox_wrap .roundbox .roundbox_list .none { border-bottom: 0px solid #eee; padding-bottom: 0px; } .roundbox_wrap .roundbox .roundbox_list li .circle { content: ""; display: block; width: 27px; height: 27px; border-radius: 50%; background-color: #5766c1; position: absolute; left: 0; top: 2px; } .roundbox_wrap .roundbox .roundbox_list li .circle strong { display: block; color: #fff; font-size: 14px; text-align: center; padding-top: 3px; font-family: 'Roboto' } .roundbox_wrap .roundbox .roundbox_list2 li { margin-bottom: 5px; padding-left: 40px; background-size: 12px auto; font-size: 14px; } .roundbox_wrap .roundbox .roundbox_list2 li .dot { padding-left: 12px; margin-left: -40px; margin-bottom: 0px; font-size: 13px; line-height: 20px; color: #555; background: url(../img/content/icon_dot1.gif) no-repeat 0 8px; } .roundbox_wrap .roundbox .roundbox_list2 li .dot strong { color: #000; font-size: 16px; text-align: left; padding-top: 2px; font-weight: 500; } } /* ===================================== about-wrap ===================================== */ .about-wrap.biz .goal{padding:90px 48% 90px 0; position:relative; min-height:428px; } .about-wrap.biz .goal .img{position:absolute;right:0; top:50%; width:480px; display:block; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%);transform: translateY(-50%);} .about-wrap.biz .goal .img img{width:100%;height:428px;object-fit:cover;} .about-wrap.biz .goal .btxt{padding-top:30px;font-weight:300; color:#666; font-size:30px;letter-spacing:-0.03em; line-height:1.3em; margin-bottom:25px;} .about-wrap.biz .goal .btxt span{font-weight:700; color:#111; display:block;} .about-wrap.biz .goal .stxt{font-weight:400; color:#555; font-size:18px;letter-spacing:-0.03em; line-height:1.9em; word-break: keep-all;} @media only screen and (max-width:1240px){ .about-wrap.biz .goal{padding:70px 50% 70px 0;min-height:400px; } .about-wrap.biz .goal .img{width:48%;} .about-wrap.biz .goal .img img{ height:400px; } .about-wrap.biz .goal .btxt{padding-top:20px;} } @media only screen and (max-width:999px){ .about-wrap.biz .goal{padding:50px 45% 50px 0;min-height:320px;} .about-wrap.biz .goal .img{ width:42%} .about-wrap.biz .goal .img img{ height:320px; } .about-wrap.biz .goal .btxt{padding-top:10px;font-size:26px; margin-bottom:20px} .about-wrap.biz .goal .stxt{font-size:15px;line-height:1.6em;} } @media only screen and (max-width:680px){ .about-wrap.biz .goal{padding:20px 0 0px 0;} .about-wrap.biz .goal .btxt{padding-top:0;font-size:22px;} .about-wrap.biz .goal .stxt{font-size:14px;} .about-wrap.biz .goal .img{ margin-top:50px; width:auto;position:relative;right:auto; top:auto;height:auto;-webkit-transform: translateY(0); -moz-transform: translateY(0);-ms-transform: translateY(0); -o-transform: translateY(0);transform: translateY(0);} .about-wrap.biz .goal .img img{height:auto;object-fit:fill;} } @media only screen and (max-width:480px){ .about-wrap.biz .goal .btxt{font-size:20px;} } /* ===================================== gobtnA ===================================== */ .gobtnA {position:relative; display:block; width:200px; height:50px; line-height:48px; margin:20px auto 0; padding:0 1rem; background:#f7941e; border:1px solid #f7941e; text-align:center; color:#fff; transition:all 0.3s ease-out; border-radius:50px; box-sizing:border-box; font-weight:500;} .gobtnA:hover {background:#fff; border:1px solid #111; color:#111;} .gobtnA.mini {position:relative; display:block; width:100px; height:30px; line-height:30px; margin:20px auto 0; padding:0 1rem; background:#fff; border:1px solid #ddd; text-align:center; color:#222; transition:all 0.3s ease-out; border-radius:50px; box-sizing:border-box; font-weight:500; font-size:12px;} .gobtnA.mini:hover {background:#f7941e; border:1px solid #f7941e; color:#fff;} .gobtnB {position:relative; display:block; width:200px; height:50px; line-height:48px; margin:20px auto 0; padding:0 1rem; background:#f7941e; border:1px solid #f7941e; text-align:center; color:#fff; transition:all 0.3s ease-out; border-radius:50px; box-sizing:border-box; font-weight:500;} .gobtnB:hover {background:#f7941e; border:1px solid #f7941e; color:#fff;} .sbtnA { position:relative; display:block; font-size:12px; border-radius:50px; background:#f7941e; color:#fff; margin:0 auto; box-sizing:border-box; width:90px; height:30px; line-height:30px; font-family:'NEXON Lv1'; font-weight:500; letter-spacing:0; } .sbtnA.s01 {background:#f7941e; color:#fff;} /* 신청 */ .sbtnA.s02 {background:#00b87f; color:#fff;} /* 보기 */ .sbtnA.s03 {background:#ffc000; color:#fff;} /* 대기 */ .sbtnA.s04 {background:#444; color:#fff;} /* 마감 */ .BTN_A, .BTN_B, .BTN_C, .BTN_D { height:40px; line-height:40px; color:#fff; padding:0 15px; cursor:pointer; background:transparent; transition:all .3s ease-out; text-align:center; box-sizing:border-box; outline:none; font-family:'NEXON Lv1'; font-weight:500; font-size:14px; } .BTN_A {border:1px solid #f7941e; background:#f7941e;} .BTN_B {border:1px solid #ffc000; background:#ffc000;} .BTN_C {border:1px solid #f44502; background:#fff; color:#f44502;} .BTN_D {border:1px solid #444; background:#444; color:#fff;} @media all and (min-width:767px) { .gobtnA {min-width:150px; width:300px; height:60px; margin:0 auto; padding:0 30px 0 0; line-height:58px; font-size:20px; cursor:pointer;} .gobtnA:before {position:absolute; top:15px; right:50px; content:''; width:20px; height:24px; background:url('../img/content/ico-pdf-ov.png') center no-repeat; transition:all 0.3s ease-out;} .gobtnA:hover:before {position:absolute; top:15px; right:55px; content:''; width:20px; height:24px; background:url('../img/content/ico-pdf.png') center no-repeat;} .gobtnB {min-width:150px; width:300px; height:60px; margin:0 auto; padding:0 30px 0 0; line-height:58px; font-size:20px;} .gobtnB:before {position:absolute; top:25px; right:50px; content:''; width:20px; height:9px; background:url('/images/cont/ico_go_ov.png') center no-repeat; transition:all 0.3s ease-out;} .gobtnB:hover:before {position:absolute; top:25px; right:55px; content:''; width:20px; height:9px; background:url('/images/cont/ico_go_b.png') center no-repeat;} .gobtnA.mini {min-width:0; width:160px; height:40px; line-height:38px; margin:20px auto 0; padding:0 30px 0 0; font-size:14px; font-weight:400;} .gobtnA.mini:before {position:absolute; top:15px; right:30px; content:''; width:20px; height:9px; background:url('/images/cont/ico_go.png') center no-repeat; transition:all 0.3s ease-out;} .gobtnA.mini:hover:before {position:absolute; top:15px; right:35px; content:''; width:20px; height:9px; background:url('/images/cont/ico_go_ov.png') center no-repeat;} .sbtnA {font-size:14px; border-radius:50px; width:70px; height:70px; line-height:70px;} .BTN_A, .BTN_B, .BTN_C, .BTN_D {min-width:150px; height:47px; line-height:47px; padding:0 60px; border-radius:50px; font-size:16px;} .BTN_A:hover, .BTN_A:focus { background-color:#f7941e; border:1px solid transparent; color:#fff; background-image:linear-gradient(45deg, #f7941e 0%, #f7ba2a 55%, #f7941e 90%); background-position:100% 0; background-size:200% 200%; } } /* ===================================== ceo-wrap ===================================== */ .ceo-wrap {padding:0 80px 50px;} .ceo-img { margin: 0 auto; padding: 0px 0px 100px; } .ceo-left { display: inline-block; width: 30%; margin-right: 5%; vertical-align: top; color: #19a252; font-size: 24px; font-weight: 600; line-height: 1.5; } .ceo-left:before { display: block; content: ''; width: 300px; height: 3px; background: #19a252; margin-top: 7px; margin-bottom: 30px; } .ceo-right { display: inline-block; width: 63%; } .ceo-txt { font-size: 18px; color: #555; margin-top: 0px; line-height: 1.6; word-break: keep-all; } .ceo-txt strong { font-size: 24px; color: #222; text-align:right;} .about-wrap { position: relative; max-width: 1300px; margin: auto; padding:0 20px; } .about-info { } .about-info dt { float: left; display: block; font-size: 17px; width: 150px; padding: 20px 15px; font-weight: 600; color: #176e88; border-top: 1px solid #176e88; } .about-info dd { display: block; margin-left: 220px; padding: 20px 15px; color: #000; font-size: 17px; border-top: 1px solid #e2e2e2; } .about-info:after { content: ''; clear: both; display: block; } @media only screen and (max-width:1260px) { } @media only screen and (max-width:1200px) { .ceo-wrap {padding:0px; } .about-wrap { position: relative; margin: auto; padding:0px; } .tit1 {font-size:18px; padding-bottom:20px; font-weight:500; color:#111; padding-left:0px;} } @media only screen and (max-width:999px) { .ceo-img { margin: 0 auto; padding-bottom: 50px; } .ceo-left { display: inline-block; width: 30%; margin-right: 2%; vertical-align: top; color: #68b445; font-size: 24px; font-weight: 500; line-height: 1.5; } .ceo-left:before { display: block; content: ''; width: 170px; height: 3px; background: #68b445; margin-top: 7px; margin-bottom: 20px; } .ceo-txt { font-size: 15px; margin-bottom: 20px; } } @media only screen and (max-width:680px) { .ceo-img {width: 100%; padding-bottom: 50px;} .ceo-left { display: block; width: 100%; margin-right: 0; margin-bottom: 22px; font-size: 20px; font-weight: 500; line-height: 1.5;} .ceo-left:before { display: block; content: ''; width: 50px; height: 3px; background: #68b445; margin-top: 7px; margin-bottom: 15px; } .ceo-left br { display: block;} .ceo-right { display: block; width: 100%; } .ceo-txt { font-size: 15px; margin-top: 10px; } .ceo-txt strong { font-size: 17px; text-align:left; line-height: 1.4;} .ceo-txt br { display:none;} .about-wrap { } .about-info { margin-bottom: 10px } .about-info dd { font-size: 13px; line-height: 1 } .about-info dt { float: none; width: 100%; font-size: 14px; padding: 15px 0px; border-top: 1px solid #333; border-bottom: 1px solid #aaa } .about-info dd { margin: 0px; border-top: none; border-bottom: none; line-height: 20px; padding: 15px 0px; } } @media only screen and (max-width:480px) { } /* 모바일 */ @media(max-width:736px) { pc { display: none; } mobile { display: block; } /* 테이블 */ table.table1 { width: 100%; border-collapse: collapse; border-top: 1px solid #535353; word-break: keep-all; } table.table1 th, table.table1 td { font-size: 14px; border-left: 1px solid #d5d5d5; line-height: 22px; text-align: center; vertical-align: middle; } table.table1 th { padding: 20px 15px; } table.table1 th:first-child { border-left: 0; } table.table1 td { padding: 10px 5px; } table.table1 thead th { border-bottom: 1px solid #d5d5d5; color: #333; background: #f8f8f8; } table.table1 tbody th { font-weight: normal; background: #f8f8f8; border-bottom: 1px solid #d5d5d5; color: #333; } table.table1 tbody td { border-bottom: 1px solid #d5d5d5; color: #555; padding:15px; } table.table1 .left { text-align: left; padding: 0px; } table.table1 .right { text-align: right; padding: 15px; } table.table1 input, table.table1 select, table.table1 span { vertical-align: middle; } table.table1 select { font-size: 14px; } /* 리스트 */ ul.list li { padding-left: 0px; margin-top: 5px; font-size: 15px; line-height: 20px; color: #333; background: url(../img/content/m_icon_dot1.gif) no-repeat 0 6px; word-break: keep-all; } ul.list li:first-child { margin-top: 0; } ul.list ul.list2 { margin: 10px 0 15px; } ul.list2 li { padding-left: 12px; margin-bottom: 5px; font-size: 13px; line-height: 20px; color: #555; background: url(../img/content/m_icon_dot2.gif) no-repeat 0 8px; } .sub_wrap { width: 100%; height: auto; padding: 30px 30px 100px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .sub_wrap dl { width: 100%; } .sub_wrap dl dt { font-size: 25px; } .sub_wrap dt strong { font-size: 25px; line-height: 30px; } .sub_wrap dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .sub_wrap dd br { display: none; } .biz_01 .sub_wrap { background-color: #dce5f2; } .sub_wrap2 { width: 100%; height: auto; padding: 30px 30px 100px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .sub_wrap2 dl { width: 100%; } .sub_wrap2 dl dt { font-size: 25px; } .sub_wrap2 dt strong { font-size: 25px; line-height: 30px; } .sub_wrap2 dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .sub_wrap2 dd br { display: none; } .biz_02 .sub_wrap2 { background-color: #daece9; } .sub_wrap3 { width: 100%; height: auto; padding: 30px 30px 100px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .sub_wrap3 dl { width: 100%; } .sub_wrap3 dl dt { font-size: 25px; } .sub_wrap3 dt strong { font-size: 25px; line-height: 25px; } .sub_wrap3 dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .sub_wrap3 dd br { display: none; } .biz_03 .sub_wrap3 { background-color: #f6efdf; } .sub_wrap4 { width: 100%; height: auto; padding: 30px 30px 100px 30px; margin-bottom: 20px; background-position: center bottom !important; background-size: 100% auto !important; box-sizing: border-box; } .sub_wrap4 dl { width: 100%; } .sub_wrap4 dl dt { font-size: 25px; } .sub_wrap4 dt strong { font-size: 25px; line-height: 25px; } .sub_wrap4 dd { margin-top: 15px; font-size: 13px; line-height: 20px; } .sub_wrap4 dd br { display: none; } .biz_04 .sub_wrap4 { background-color: #fbedca; } .sponsor{overflow:none;margin:0; margin-bottom:30px;} .sponsor dl{display:block;width:100%;margin-top:0;text-align:center;} .sponsor dt{float:none;margin:15px 0 0 0;width:100%;height:40px;line-height:40px;font-size:15px;border-radius:5px;} .sponsor dd{display:block;width:auto;height:auto;padding:10px;margin:5px 0 0 0;font-size:13px;line-height:20px;border-radius:5px;box-sizing:border-box;} /* 후원안내 */ .sponsor2 .guide { display: inline-block; width: 100%; color: #000; margin-top: 30px; } .sponsor2 .guide_tit { float: none; width: 100%; height: auto; margin-bottom: 15px; padding-top: 0px !important; background-position: top center !important; background-size: auto 100px !important; font-size: 20px; line-height: normal; text-align: left; } .sponsor2 .guide_tit strong { display: inline-block; } .sponsor2 .guide_txt { width: 100%; float: none; } .sponsor2 .guide_txt dl.txt { text-align: center; word-break: keep-all; } .sponsor2 .guide_txt dl.txt br { display: none; } .sponsor2 .guide_txt dl.txt dt { font-size: 15px; line-height: 24px; width: 88%; } .sponsor2 .guide_txt dl.txt dd { margin-top: 10px; font-size: 20px; line-height: 22px; color: #4f67a1; font-family: 'Roboto'; text-align: left; } .bank { overflow: hidden; margin-left: 0; width: 100%; } .bank li { width: 100%; height: auto; margin-left: 0; padding: 20px 0; box-sizing: border-box; } .bank li:first-child { margin-bottom: -1px; } .bank li .tit { top:-37px; left: 0; padding:10px; margin-left: 10px; font-size: 17px; color: #fff; border-radius: 5px; background-color: #4f67a1; width: 88%;} .bank li .txt { margin-top:45px; padding: 0 20px; font-size: 13px; line-height: 20px; text-align: left; } .txt2 { margin-top: 20px; padding-left:25px; margin-left: 5px; margin-bottom: 0px; font-size: 14px;line-height: 20px; color: #555; background: url(../img/content/icon_dot3.gif) no-repeat 0 8px; } /* 제목 */ .tit { margin-top: 50px; margin-bottom: 10px; font-size: 18px; line-height: 18px; display: block; } .txt-small { margin-bottom: 15px; font-size: 15px; line-height: 23px; } .process .listDiv { width: 100%; height: auto;} .process .listDiv .list { margin: 0 20px 10px 0px; width: 44%; height: 130px; background-size: 130px !important } .process .listDiv .list:last-child { margin-bottom: 0 } .process .listDiv .list:after { /*top: 150px; left: 50%; margin-top: 0; margin-left: -4px; transform: rotate(90deg); -webkit-transform: rotate(90deg)*/ } .process .listDiv .list:after { left: 175px; margin-top: -7px; width: 9px; height: 15px; background-size: 9px auto } .process .listDiv .list span { display: block; font-weight: 400; font-size: 16px; line-height: 24px; color: #333; padding-top:90px; vertical-align: middle } .process .listDiv .list .txt { display: block; color: #666; line-height: 16px; margin-top: 10px; font-size: 12px; letter-spacing: -0.5px; } /* 라운드박스 */ .box { padding: 0 20px; margin-top: 20px; } .box:first-child { margin-top: 50px; } .roundbox_wrap { margin: 20px 0; } .roundbox_wrap .roundbox { margin-bottom: 0px; } .roundbox_wrap .roundbox { float: none; width: 100%; } .roundbox_wrap p { margin-bottom: 20px; font-size: 17px; } .roundbox_wrap .roundbox .roundbox_list li { margin-bottom: 5px; padding-left: 30px; background-size: 12px auto; background-position: 0 4px; font-size: 14px; } .roundbox_wrap .roundbox .roundbox_list .none { border-bottom: 0px solid #eee; padding-bottom: 0px; } .roundbox_wrap .roundbox .roundbox_list li br { display: none; } .roundbox_wrap .roundbox .roundbox_list li .circle { content: ""; display: block; width: 23px; height: 23px; border-radius: 50%; background-color: #5766c1; position: absolute; left: 0; top: 2px; } .roundbox_wrap .roundbox .roundbox_list li .circle strong { display: block; color: #fff; font-size: 12px; text-align: center; padding-top: 2px; font-family: 'Roboto' } .roundbox_wrap .roundbox .roundbox_list li .dot { padding-left: 12px; margin-left: -30px; margin-bottom: 0px; font-size: 13px; line-height: 20px; color: #555; background: url(../img/content/icon_dot1.gif) no-repeat 0 8px; } .roundbox_wrap .roundbox .roundbox_list li .dot strong { color: #000; font-size: 16px; text-align: left; padding-top: 2px; font-weight: 500; } .roundbox_wrap .roundbox .roundbox_list2 li { margin-bottom: 0px; padding-left: 15px; /*background-size: 12px auto;*/ font-size: 16px; } .roundbox_wrap .roundbox .roundbox_list2 li .dot { padding-left: 12px; margin-left: -13px; margin-bottom: 0px; font-size: 13px; line-height: 13px; color: #555; background: url(../img/content/icon_dot1.gif) no-repeat 0 8px; } .roundbox_wrap .roundbox .roundbox_list2 li .dot strong { color: #000; font-size: 15px; text-align: left; padding-top: 0px; font-weight: 400;letter-spacing: -0.5px; } /* 자원봉사 */ .biz_03 .volunteer { display: inline-block; width: 100%; color: #000; margin-top: 30px; } .biz_03 .volunteer_tit { float: none; width: 100%; height: auto; margin-bottom: 15px; padding-top: 0px !important; background-position: top center !important; background-size: auto 100px !important; font-size: 20px; line-height: normal; text-align: left; } .biz_03 .volunteer_tit strong { display: inline-block; } .biz_03 .volunteer_txt { width: 100%; float: none; } .biz_03 .volunteer_txt dl.txt { text-align: center; word-break: keep-all; } .biz_03 .volunteer_txt dl.txt br { display: none; } .biz_03 .volunteer_txt dl.txt dt { font-size: 15px; line-height: 24px; } .biz_03 .volunteer_txt dl.txt dd { margin-top:10px; font-size:20px; line-height: 22px; color: #4f67a1; font-family:'Roboto'; text-align: left;} /* 테이블 */ table.table1 { table-layout: fixed; } table.table1 th, table.table1 td { padding: 10px 0px; font-size: 15px; line-height: 20px; box-sizing: border-box; word-wrap: break-word;/* white-space: nowrap; word-break: keep-all;*/ } .sub-table2 {width:100%; border-top: 1px solid #da2127; margin-bottom: 0px;} .sub-table2 th {/*width:300px;*/ white-space:nowrap; padding:3px 10px; height:48px; line-height: 20px; font-size:14px; letter-spacing: -1px; color:#222; background-color:#f0f0f0; border:1px solid #ddd; font-weight: 400; text-align:center; border-top: 0;} .sub-table2 td { white-space:nowrap; padding:3px 10px; font-size:15px; letter-spacing: -0.5px; color:#444; border:1px solid #ddd; border-top: 0; line-height: 25px; word-break:keep-all; font-weight: 300; text-align:center;} } .sub-table2 {width:100%; border-top: 1px solid #da2127; margin-bottom: 0px;} .sub-table2 th {/*width:300px;*/ padding-left: 0px; height:48px; line-height: 24px; font-size:15px; letter-spacing: -1px; color:#222; background-color:#f0f0f0; border:1px solid #ddd; font-weight: 400; text-align:center; border-top: 0;} .sub-table2 td {padding:10px 0px; font-size:14px; letter-spacing: -0.5px; color:#444; border:1px solid #ddd; border-top: 0; line-height: 25px; word-break:keep-all; font-weight: 300; text-align:center;} /* 반응형 테이블 */ .table-responsive { position: relative; min-height: .01%;overflow-x: auto;} @media screen and (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 0px solid #ddd; } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td { white-space: nowrap; } .table-responsive > .table-bordered { border: 0; } .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; } .table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; } .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > th, .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; } } /* ===================================== .vision-wrap ===================================== */ .vision-wrap {padding-top:20px; padding-bottom:30px} .vision-wrap .tit {font-size: 55px; letter-spacing: -0.04em; font-weight:600; color: #222; text-align:center; margin-bottom:30px;} .vision-wrap .btxt{text-align:center; color:#444; font-size:24px; letter-spacing: -0.04em; margin-bottom:90px} .vision-wrap .btxt strong{ margin-top:15px; font-size:24px; line-height: 42px; letter-spacing: -0.04em; font-weight:500;color:#e51b23;} .vision-wrap .btxt strong b{ font-size:28px; font-weight:700} .vision-wrap .btxt span {display:block; font-size:28px; line-height: 42px; letter-spacing: -0.04em; color: #222; } .vision-wrap .stit {text-align:center; font-size: 20px; letter-spacing: -0.04em; color: #222; margin-bottom:24px; } .vision-wrap .stit span {position:relative; padding-bottom: 8px;/* display:inline-block; */} .vision-wrap .stit span:before {content:""; width: 100%; height: 2px; background-color: #222; position:absolute; bottom:0; left:0; display:block;} @media only screen and (max-width:680px){ .vision-wrap .tit {font-size: 28px; margin-bottom:30px;} .vision-wrap .btxt{margin-bottom:50px;} .vision-wrap .btxt strong{ margin-top:10px; font-size:18px; line-height: 30px;} .vision-wrap .btxt strong b{ font-size:18px;} } @media only screen and (max-width:480px){ } /*======================================================= .manage-wrap .vis =========================================================*/ .manage-wrap{} .manage-wrap .vis{position:Relative; padding:0 50px;} .manage-wrap .vis .img{overflow:hidden;} .manage-wrap .vis .img img{width:100%;height:450px; object-fit:cover;bject-fit:cover;transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);-webkit-transition: transform 6s linear;-moz-transition: transform 6s linear;-o-transition: transform 6s linear;transition: transform 6s linear;} .manage-wrap .vis.ani .img img{transform:scale(1.1, 1.1); -webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1);} .manage-wrap .vis .txt{position:absolute; left:0; top:50%; width:100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%);transform: translateY(-50%);text-align:center;} .manage-wrap .vis .txt .btxt{ font-size:40px;font-weight:300; /*font-family: 'GongGothicMedium';*/ color:#fff; letter-spacing:-0.04em; line-height:1.3em;} .manage-wrap .vis .txt .stxt{font-size:18px ;font-weight:400; color:#fff; letter-spacing:-0.05em; line-height:1.5em; margin-top:20px;} @media only screen and (max-width:1480px){ .manage-wrap .vis .txt .btxt{font-size:36px;} .manage-wrap .vis .txt .stxt{font-size:17px; margin-top:15px;} .manage-wrap .vis .img img{height:450px;} } @media only screen and (max-width:1280px) { .manage-wrap .vis{position:Relative; padding:0px;} } @media only screen and (max-width:1185px) { } @media only screen and (max-width:999px){ .manage-wrap .vis .txt .btxt{font-size:32px;} .manage-wrap .vis .txt .stxt{font-size:16px; margin-top:10px;} .manage-wrap .vis .img img{height:400px;} } @media only screen and (max-width:680px){ .manage-wrap .vis .txt .btxt{font-size:28px;} .manage-wrap .vis .txt .stxt{font-size:15px;} .manage-wrap .vis .img img{height:350px;} } @media only screen and (max-width:480px){ .manage-wrap .vis .txt .btxt{font-size:24px;} .manage-wrap .vis .txt .stxt{font-size:13px; margin-top:10px;} .manage-wrap .vis .txt .stxt br{display:none;} .manage-wrap .vis .img img{height:300px;} } /*======================================================= .manage-wrap .esg =========================================================*/ .manage-wrap .esg { margin-top: 0px; border-top: 0px solid #333; /*border-bottom: 1px solid #333;*/ } .manage-wrap .esg dl { padding: 70px 0; padding-left: 650px; position: relative; } .manage-wrap .esg dl:nth-child(n+2) { border-top: 1px solid #ddd; } .manage-wrap .esg dt { position: absolute; left: 0; top: 80px; width: 650px; box-sizing: border-box; padding-left: 80px; font-size: 36px; font-weight: 700; color: #111; letter-spacing: -0.04em; line-height: 1.3em; } .manage-wrap .esg dt span { position: absolute; left: 0; top: 0px; color: #ea0a2a; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3em; font-size: 36px; letter-spacing: 0; /*font-family: 'CJ+ONLYONE';*/ } .manage-wrap .esg dd { } .manage-wrap .esg ul li { font-size: 17px; font-weight: 400; color: #333; letter-spacing: -0.03em; line-height: 1.5em; position: Relative; padding-left: 12px; } .manage-wrap .esg ul li:nth-child(n+2) { margin-top: 7px; } .manage-wrap .esg ul li:before { width: 5px; height: 0; position: Absolute; left: 0; top: 12px; border-bottom: 1px solid #555; display: block; content: "" } @media only screen and (max-width:1480px) { .manage-wrap .esg { margin-top: 80px; } .manage-wrap .esg dl { padding: 40px; padding-left: 570px; } .manage-wrap .esg dt { font-size: 22px; width: 570px; padding-left: 90px; top: 40px; } .manage-wrap .esg dt span { font-size: 32px; } .manage-wrap .esg ul li { font-size: 16px; } .manage-wrap .esg ul li:before { top: 11px; } } @media only screen and (max-width:1280px) { .manage-wrap .esg dl { padding: 40px; padding-left: 500px; } .manage-wrap .esg dt { width: 500px; padding-left: 75px; } } @media only screen and (max-width:1185px) { .manage-wrap .esg dl { padding: 30px; padding-left: 430px; } .manage-wrap .esg dt { width: 430px; padding-left: 60px; top: 30px; } } @media only screen and (max-width:999px) { .manage-wrap .esg { margin-top: 60px; } .manage-wrap .esg dl { padding: 25px; } .manage-wrap .esg dt { font-size: 20px; position: relative; left: auto; width: auto; top: auto; margin-bottom: 15px; padding-left: 0; } .manage-wrap .esg dt span { font-size: 28px; display: block; position: relative; left: auto; top: auto; margin-bottom: 3px; } .manage-wrap .esg dt br { display: none; } .manage-wrap .esg ul li { font-size: 15px; } .manage-wrap .esg ul li:nth-child(n+2) { margin-top: 5px; } .manage-wrap .esg ul li:before { top: 10px; } } @media only screen and (max-width:680px) { .manage-wrap .esg { margin-top: 0px; } .manage-wrap .esg dl { padding: 20px; } .manage-wrap .esg dt { font-size: 18px; } .manage-wrap .esg dt span { font-size: 24px; } .manage-wrap .esg ul li { font-size: 14px; } } @media only screen and (max-width:480px) { .manage-wrap .esg dl { padding: 20px 0px; } .manage-wrap .esg dt { font-size: 17px; } .manage-wrap .esg dt span { font-size: 20px; } .manage-wrap .esg ul li { font-size: 13px; } } /*======================================================= .manage-wrap .safe =========================================================*/ .manage-wrap .safe{margin-top:100px; border-top:0px solid #333; border-bottom:0px solid #333;} .manage-wrap .safe dl{padding:70px 0; padding-left:450px; position:relative;} .manage-wrap .safe dl:nth-child(n+2){border-top:1px solid #ddd;} .manage-wrap .safe dt{position:absolute; left:0; top:60px; width:450px; box-sizing:border-box; padding-left:0px; font-size:36px; font-weight:700; color:#111; letter-spacing:-0.04em; line-height:1.3em;} .manage-wrap .safe dt span{position:absolute; left:0; top:0px; color:#ea0a2a; font-weight:700; letter-spacing:-0.03em; line-height:1.3em; font-size:36px; letter-spacing:0; font-family: 'Roboto';} .manage-wrap .safe dd{} .manage-wrap .safe ul li{ font-size:20px; font-weight:400; color:#333; letter-spacing:-0.03em; line-height:1.5em; position:Relative; padding-left:50px;} .manage-wrap .safe ul li:nth-child(n+2){margin-top:20px;} .manage-wrap .safe ul li span{position:absolute; left:0; top:0px; color:#000; font-weight:700; letter-spacing:-0.03em; line-height:1.3em; font-size:24px; font-family: 'Roboto';} /*.manage-wrap .safe ul li:before{width:5px;height:0 ;position:Absolute ;left:0; top:12px;border-bottom:1px solid #555; display:block ;content:""}*/ @media only screen and (max-width:1480px){ .manage-wrap .safe{margin-top:80px;} .manage-wrap .safe dl{padding:40px;padding-left:570px;} .manage-wrap .safe dt{font-size:22px; width:570px; padding-left:90px; top:40px;} .manage-wrap .safe dt span{font-size:32px;} .manage-wrap .safe ul li{font-size:16px;} .manage-wrap .safe ul li:before{top:11px;} } @media only screen and (max-width:1280px) { .manage-wrap .safe dl{padding:40px;padding-left:500px;} .manage-wrap .safe dt{ width:500px; padding-left:75px;} } @media only screen and (max-width:1185px) { .manage-wrap .safe dl{padding:30px;padding-left:430px;} .manage-wrap .safe dt{ width:430px; padding-left:60px;top:30px;} } @media only screen and (max-width:999px){ .manage-wrap .safe{margin-top:60px;} .manage-wrap .safe dl{padding:25px ;} .manage-wrap .safe dt{font-size:20px; position:relative; left:auto; width:auto; top:auto; margin-bottom:15px; padding-left:0;} .manage-wrap .safe dt span{font-size:28px; display:block; position:relative; left:auto; top:auto; margin-bottom:3px;} .manage-wrap .safe dt br{display:none;} .manage-wrap .safe ul li{font-size:15px;} .manage-wrap .safe ul li:nth-child(n+2){margin-top:5px;} .manage-wrap .safe ul li:before{top:10px;} } @media only screen and (max-width:680px){ .manage-wrap .safe{margin-top:40px;} .manage-wrap .safe dl{padding:20px ;} .manage-wrap .safe dt{font-size:18px;} .manage-wrap .safe dt span{font-size:24px;} .manage-wrap .safe ul li{font-size:14px;} } @media only screen and (max-width:480px){ .manage-wrap .safe dl{padding:20px 0px;} .manage-wrap .safe dt{font-size:20px;} .manage-wrap .safe dt span{font-size:20px;} .manage-wrap .safe ul li{font-size:14px; padding-left:35px;} .manage-wrap .safe ul li span{ font-size:16px;}\ } /*======================================================= .manage-wrap .ethics =========================================================*/ .manage-wrap .ethics{margin-top:100px; border-top:0px solid #333; border-bottom:1px solid #333;} .manage-wrap .ethics dl{padding:70px 0; padding-left:650px; position:relative;} .manage-wrap .ethics dl:nth-child(n+2){border-top:1px solid #ddd;} .manage-wrap .ethics dt{position:absolute; left:0; top:60px; width:650px; box-sizing:border-box; padding-left:80px; font-size:30px; font-weight:700; color:#111; letter-spacing:-0.04em; line-height:1.3em;} .manage-wrap .ethics dt span{position:absolute; left:0; top:0px; color:#ea0a2a; font-weight:700; letter-spacing:-0.03em; line-height:1.3em; font-size:36px; letter-spacing:0; font-family: 'Roboto';} .manage-wrap .ethics dd{} .manage-wrap .ethics ul li{font-size:17px; font-weight:400; color:#333; letter-spacing:-0.03em; line-height:1.5em; position:Relative; padding-left:12px;} .manage-wrap .ethics ul li:nth-child(n+2){margin-top:7px;} /*.manage-wrap .ethics ul li:before{width:5px;height:0 ;position:Absolute ;left:0; top:12px;border-bottom:1px solid #555; display:block ;content:""}*/ @media only screen and (max-width:1480px){ .manage-wrap .ethics{margin-top:80px;} .manage-wrap .ethics dl{padding:40px;padding-left:570px;} .manage-wrap .ethics dt{font-size:22px; width:570px; padding-left:90px; top:40px;} .manage-wrap .ethics dt span{font-size:32px;} .manage-wrap .ethics ul li{font-size:16px;} .manage-wrap .ethics ul li:before{top:11px;} } @media only screen and (max-width:1280px) { .manage-wrap .ethics dl{padding:40px;padding-left:500px;} .manage-wrap .ethics dt{ width:500px; padding-left:75px;} } @media only screen and (max-width:1185px) { .manage-wrap .ethics dl{padding:30px;padding-left:430px;} .manage-wrap .ethics dt{ width:430px; padding-left:60px;top:30px;} } @media only screen and (max-width:999px){ .manage-wrap .ethics{margin-top:60px;} .manage-wrap .ethics dl{padding:25px ;} .manage-wrap .ethics dt{font-size:20px; position:relative; left:auto; width:auto; top:auto; margin-bottom:15px; padding-left:0;} .manage-wrap .ethics dt span{font-size:28px; display:block; position:relative; left:auto; top:auto; margin-bottom:3px;} .manage-wrap .ethics dt br{display:none;} .manage-wrap .ethics ul li{font-size:15px;} .manage-wrap .ethics ul li:nth-child(n+2){margin-top:5px;} .manage-wrap .ethics ul li:before{top:10px;} } @media only screen and (max-width:680px){ .manage-wrap .ethics{margin-top:40px;} .manage-wrap .ethics dl{padding:20px ;} .manage-wrap .ethics dt{font-size:18px;} .manage-wrap .ethics dt span{font-size:24px;} .manage-wrap .ethics ul li{font-size:14px;} } @media only screen and (max-width:480px){ .manage-wrap .ethics dl{padding:20px 0px;} .manage-wrap .ethics dt{font-size:17px;} .manage-wrap .ethics dt span{font-size:20px;} .manage-wrap .ethics ul li{font-size:14px; padding-left:0px;} } /*======================================================= .manage-wrap .human =========================================================*/ .manage-wrap .human{margin-top:100px; border-top:0px solid #333; border-bottom:0px solid #333;} .manage-wrap .human dl{padding:70px 0; padding-left:500px; position:relative;} .manage-wrap .human dl:nth-child(n+2){border-top:1px solid #ddd;} .manage-wrap .human dt{position:absolute; left:0; top:60px; width:500px; box-sizing:border-box; padding-left:0px; font-size:36px; font-weight:700; color:#111; letter-spacing:-0.04em; line-height:1.3em;} .manage-wrap .human dt span{position:absolute; left:0; top:0px; color:#ea0a2a; font-weight:700; letter-spacing:-0.03em; line-height:1.3em; font-size:36px; letter-spacing:0; font-family: 'Roboto';} .manage-wrap .human dd{} .manage-wrap .human ul li{ font-size:18px; font-weight:400; color:#555; letter-spacing:-0.03em; line-height:1.6em; position:Relative;} .manage-wrap .human .btxt{ font-size:22px; font-weight:500; color:#000; letter-spacing:-0.03em; line-height:1.6em; padding-top:30px;} .manage-wrap .human ul li:nth-child(n+2){margin-top:20px;} .manage-wrap .human ul li span{position:absolute; left:0; top:0px; color:#000; font-weight:700; letter-spacing:-0.03em; line-height:1.3em; font-size:24px; letter-spacing:0; font-family: 'Roboto';} /*.manage-wrap .human ul li:before{width:5px;height:0 ;position:Absolute ;left:0; top:12px;border-bottom:1px solid #555; display:block ;content:""}*/ @media only screen and (max-width:1480px){ .manage-wrap .human{margin-top:80px;} .manage-wrap .human dl{padding:40px;padding-left:570px;} .manage-wrap .human dt{font-size:22px; width:570px; padding-left:90px; top:40px;} .manage-wrap .human dt span{font-size:32px;} .manage-wrap .human ul li{font-size:16px;} .manage-wrap .human ul li:before{top:11px;} } @media only screen and (max-width:1280px) { .manage-wrap .human dl{padding:40px;padding-left:500px;} .manage-wrap .human dt{ width:500px; padding-left:75px;} } @media only screen and (max-width:1185px) { .manage-wrap .human dl{padding:30px;padding-left:430px;} .manage-wrap .human dt{ width:430px; padding-left:60px;top:30px;} } @media only screen and (max-width:999px){ .manage-wrap .human{margin-top:60px;} .manage-wrap .human dl{padding:25px ;} .manage-wrap .human dt{font-size:20px; position:relative; left:auto; width:auto; top:auto; margin-bottom:15px; padding-left:0;} .manage-wrap .human dt span{font-size:28px; display:block; position:relative; left:auto; top:auto; margin-bottom:3px;} .manage-wrap .human dt br{display:none;} .manage-wrap .human ul li{font-size:15px;} .manage-wrap .human ul li:nth-child(n+2){margin-top:5px;} .manage-wrap .human ul li:before{top:10px;} .manage-wrap .human .btxt{ font-size:18px; line-height:1.4em; padding-top:20px;} } @media only screen and (max-width:680px){ .manage-wrap .human{margin-top:40px;} .manage-wrap .human dl{padding:20px ;} .manage-wrap .human dt{font-size:18px;} .manage-wrap .human dt span{font-size:24px;} .manage-wrap .human ul li{font-size:14px;} .manage-wrap .human .btxt{ font-size:16px; } } @media only screen and (max-width:480px){ .manage-wrap .human dl{padding:20px 0px;} .manage-wrap .human dt{font-size:17px;} .manage-wrap .human dt span{font-size:20px;} .manage-wrap .human ul li{font-size:14px;} } /*======================================================= .manage-wrap .natural =========================================================*/ .manage-wrap .natural{margin-top:100px; border-top:0px solid #333; border-bottom:0px solid #333;} .manage-wrap .natural dl{padding:70px 0; padding-left:450px; position:relative;} .manage-wrap .natural dl:nth-child(n+2){border-top:1px solid #ddd;} .manage-wrap .natural dt{position:absolute; left:0; top:60px; width:450px; box-sizing:border-box; padding-left:0px; font-size:36px; font-weight:700; color:#111; letter-spacing:-0.04em; line-height:1.3em;} .manage-wrap .natural dt span{position:absolute; left:0; top:0px; color:#ea0a2a; font-weight:700; letter-spacing:-0.03em; line-height:1.3em; font-size:36px; letter-spacing:0; font-family: 'Roboto';} .manage-wrap .natural dd{} .manage-wrap .natural ul li{ font-size:20px; font-weight:400; color:#333; letter-spacing:-0.03em; line-height:1.5em; position:Relative; padding-left:50px;} .manage-wrap .natural ul li:nth-child(n+2){margin-top:20px;} .manage-wrap .natural ul li span{position:absolute; left:0; top:0px; color:#000; font-weight:700; letter-spacing:-0.03em; line-height:1.3em; font-size:24px; letter-spacing:0; font-family: 'Roboto';} /*.manage-wrap .natural ul li:before{width:5px;height:0 ;position:Absolute ;left:0; top:12px;border-bottom:1px solid #555; display:block ;content:""}*/ .manage-wrap .natural .btxt{ font-size:22px; font-weight:500; color:#000; letter-spacing:-0.03em; line-height:1.6em; padding-top:30px;} @media only screen and (max-width:1480px){ .manage-wrap .natural{margin-top:80px;} .manage-wrap .natural dl{padding:40px;padding-left:570px;} .manage-wrap .natural dt{font-size:22px; width:570px; padding-left:90px; top:40px;} .manage-wrap .natural dt span{font-size:32px;} .manage-wrap .natural ul li{font-size:16px;} .manage-wrap .natural ul li:before{top:11px;} } @media only screen and (max-width:1280px) { .manage-wrap .natural dl{padding:40px;padding-left:500px;} .manage-wrap .natural dt{ width:500px; padding-left:75px;} } @media only screen and (max-width:1185px) { .manage-wrap .natural dl{padding:30px;padding-left:430px;} .manage-wrap .natural dt{ width:430px; padding-left:60px;top:30px;} } @media only screen and (max-width:999px){ .manage-wrap .natural{margin-top:60px;} .manage-wrap .natural dl{padding:25px ;} .manage-wrap .natural dt{font-size:20px; position:relative; left:auto; width:auto; top:auto; margin-bottom:15px; padding-left:0;} .manage-wrap .natural dt span{font-size:28px; display:block; position:relative; left:auto; top:auto; margin-bottom:3px;} .manage-wrap .natural dt br{display:none;} .manage-wrap .natural ul li{font-size:15px;} .manage-wrap .natural ul li:nth-child(n+2){margin-top:5px;} .manage-wrap .natural ul li:before{top:10px;} } @media only screen and (max-width:680px){ .manage-wrap .natural{margin-top:40px;} .manage-wrap .natural dl{padding:20px ;} .manage-wrap .natural dt{font-size:18px;} .manage-wrap .natural dt span{font-size:24px;} .manage-wrap .natural ul li{font-size:14px;} .manage-wrap .natural .btxt{ font-size:16px; padding-top:30px;} } @media only screen and (max-width:480px){ .manage-wrap .natural dl{padding:20px 0px;} .manage-wrap .natural dt{font-size:20px;} .manage-wrap .natural dt span{font-size:20px;} .manage-wrap .natural ul li{font-size:14px; padding-left: 35px;} .manage-wrap .natural ul li span{font-size:16px;} } /*======================================================= .about-wrap.intro =========================================================*/ .about-wrap.intro { } .about-wrap.intro .mg100t { margin-top: 100px; } .about-wrap.intro .mg50t { margin-top: 50px; } .about-wrap.intro .mg35t { margin-top: 35px; } .about-wrap.intro .mg25t { margin-top: 25px; } .about-wrap.intro .vis { position: relative; height: 500px; text-align: center; } .about-wrap.intro .vis:before { position: absolute; width: 1920px; left: 50%; top: 0; height: 100%; display: block; content: ""; z-index: -1; background: url(../img/Content/about-bg-1.jpg) no-repeat center center; background-size: cover; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .about-wrap.intro .vis:after { position: absolute; width: 20000px; left: 50%; margin-left: -10000px; top: 0; height: 100%; display: block; content: ""; z-index: 1; background: rgba(0,0,0,0.35) } .about-wrap.intro .vis .ov { position: absolute; left: 0; top: 50%; text-align: center; width: 100%; z-index: 9; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .about-wrap.intro .vis .ov .btxt { font-size: 29px; color: #fff; font-weight: 400; letter-spacing: -0.03em; line-height: 1.2em; } .about-wrap.intro .vis .ov .stxt { position: relative; font-size: 22px; color: #fff; font-weight: 300; letter-spacing: -0.03em; line-height: 1.3em; /*text-decoration:underline;*/ margin-top: 60px; } .about-wrap.intro .vis .ov .stxt span { font-weight: 700; } .about-wrap.intro .vis .ov .stxt:before { width: 24px; height: 1px; position: absolute; left: 50%; margin-left: -12px; top: -30px; display: block; content: ""; background: #fff; } @media only screen and (max-width:1240px) { .about-wrap.intro .vis { height: 410px; } .about-wrap.intro .vis:before { width: 1600px } } @media only screen and (max-width:999px) { .about-wrap.intro .vis { height: 360px; } .about-wrap.intro .vis:before { width: 1400px } .about-wrap.intro .vis .ov .btxt { font-size: 26px } .about-wrap.intro .vis .ov .stxt { font-size: 20px; margin-top: 50px } .about-wrap.intro .vis .ov .stxt:before { top: -25px; } .about-wrap.intro .mg50t { margin-top: 30px; } .about-wrap.intro .mg35t { margin-top: 20px; } .about-wrap.intro .mg25t { margin-top: 15px; } } @media only screen and (max-width:680px) { .about-wrap.intro .vis { height: 300px; } .about-wrap.intro .vis:before { width: 1200px } .about-wrap.intro .vis .ov .btxt { font-size: 20px } .about-wrap.intro .vis .ov .stxt { font-size: 16px; margin-top: 40px; line-height: 1.3em; } .about-wrap.intro .vis .ov .stxt:before { top: -20px; width: 20px; margin-left: -10px; } } @media only screen and (max-width:480px) { .about-wrap.intro .vis { height: 260px; } .about-wrap.intro .vis .ov .btxt { font-size: 19px } .about-wrap.intro .vis .ov .stxt { font-size: 14px; } } .about-wrap.intro .cont { padding: 90px 50% 90px 0; position: relative; min-height: 400px; } .about-wrap.intro .cont .img { position: absolute; right: 0; top: 50%; width: 600px; display: block; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .about-wrap.intro .cont .img img { width: 100%; height: 400px; object-fit: cover; } .about-wrap.intro .cont .btxt { padding-top: 30px; font-weight: 300; color: #666; font-size: 29px; letter-spacing: -0.03em; line-height: 1.3em; margin-bottom: 25px; } .about-wrap.intro .cont .btxt span { font-weight: 600; color: #d3b184; display: block; } .about-wrap.intro .cont .stxt { font-weight: 400; color: #555; font-size: 16px; letter-spacing: -0.03em; line-height: 1.9em; word-break: keep-all; } .about-wrap.intro .cont .sign { font-weight: 400; color: #111; font-size: 19px; letter-spacing: -0.03em; line-height: 1.9em; word-break: keep-all; } @media only screen and (max-width:1240px) { .about-wrap.intro .cont { padding: 70px 50% 70px 0; min-height: 400px; } .about-wrap.intro .cont .img { width: 48%; } .about-wrap.intro .cont .img img { height: 400px; } .about-wrap.intro .cont .btxt { padding-top: 20px; } } @media only screen and (max-width:999px) { .about-wrap.intro .cont { padding: 50px 45% 50px 0; min-height: 320px; } .about-wrap.intro .cont .img { width: 42% } .about-wrap.intro .cont .img img { height: 320px; } .about-wrap.intro .cont .btxt { padding-top: 10px; font-size: 26px; margin-bottom: 20px } .about-wrap.intro .cont .stxt { font-size: 15px; line-height: 1.6em; } } @media only screen and (max-width:680px) { .about-wrap.intro .cont { padding: 50px 0 50px 0; } .about-wrap.intro .cont .btxt { padding-top: 0; font-size: 22px; } .about-wrap.intro .cont .stxt { font-size: 14px; } .about-wrap.intro .cont .img { margin-top: 25px; width: auto; position: relative; right: auto; top: auto; height: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .about-wrap.intro .cont .img img { height: auto; object-fit: fill; } } @media only screen and (max-width:480px) { .about-wrap.intro .cont .btxt { font-size: 20px; } } /*======================================================= .quality-wrap =========================================================*/ .quality-wrap { margin-bottom: 100px; margin: 0 auto; margin-top: 100px; text-align: center; } .quality-wrap .btxt { font-size: 40px; font-weight: 500; color: #2051ba; display: block; padding-bottom: 50px; letter-spacing: -0.04em; line-height: 1.4em;} .quality-wrap .stxt { font-size: 18px; font-weight: 400; color: #666; display: block; padding-bottom: 10px; letter-spacing: -0.04em; line-height: 1.6em; } .quality-wrap .btxt span { color: #ea0a2a } .quality-wrap .btxt.ctxt { font-size: 48px; font-weight: 700; color: #000 } @media only screen and (max-width:680px){ .quality-wrap { margin-bottom: 50px; margin-top: 50px; } .quality-wrap .btxt { font-size: 24px; padding-bottom: 30px; line-height: 1.2em;} .quality-wrap .stxt { font-size: 15px; padding-bottom: 10px; line-height: 1.4em; } .quality-wrap .btxt.ctxt { font-size: 24px; } } @media only screen and (max-width:480px){ } /*======================================================= .quality-02 =========================================================*/ .quality-02 { width:1440px;margin: 0 auto; } .quality-02 li { position: relative; border-bottom: 1px solid #ddd; padding-left: 45%; text-align: left; padding: 100px 0px 150px; } .quality-02 li.last { border: none; padding-bottom: 0; margin-bottom: 0 } .quality-02 li.c-02 { padding-right: 45%; padding-left: 0px; } .quality-02 li.c-02 .img { left: auto; right: 0 } .quality-02 li .img { position: absolute; left: 0; top: 0; height: 300px; padding: 50px 0px 0px; } .quality-02 li .btxt { display: block; color: #2051ba; font-size: 36px; font-weight: 700; line-height: 1.4em; letter-spacing: -0.04em;} .quality-02 li .btxt strong { font-weight: normal; color: #2051ba; font-size: 36px; font-weight: 700; display: inline-block; margin-right: 14px; letter-spacing: -0.03em; font-family:'Roboto'; letter-spacing: -0.04em;} .quality-02 li .stxt { display: block; padding-top: 50px; font-size: 18px; color: #555; line-height: 1.8em; letter-spacing: -0.04em;} @media only screen and (max-width:680px){ .quality-02 { width:100%; } .quality-02 li { padding: 0px 0px 50px;} .quality-02 li .img { position: relative; left: auto; top: auto; height: auto; text-align: center; } .quality-02 li .img img { width: 100% } .quality-02 li { padding-left: 0 } .quality-02 li.c-02 { padding-right: 0 } .quality-02 li .btxt { padding: 20px 0px 0 0px; font-size: 20px } .quality-02 li .btxt strong { font-size: 20px; } .quality-02 li .stxt { padding: 20px 0px 0 0px; font-size: 15px; line-height: 1.6em; } } /*======================================================= .quality-03 =========================================================*/ .quality-03.list { background-color:#fff;} .quality-03.list .order { max-width: 1440px; box-sizing: border-box; padding: 0 0px; margin: 0 auto; /*margin-top:200px;*/ padding-top: 150px; position: relative; padding-bottom: 150px; border-bottom: 1px solid #ddd;} .quality-03.list .order:before { width: 20000px; left: 50%; margin-left: -10000px; top: 0; display: block; content: ""; border-top: 1px solid #bcbcbc; position: Absolute; z-index: -1; } .quality-03.list .order h3 {font-weight: normal; color: #2051ba; font-size: 36px; font-weight: 700; display: inline-block; margin-right: 14px; letter-spacing: -0.03em; line-height: 1.4em; } .quality-03.list .order .stxt { display: block; padding-top: 50px; font-size: 18px; color: #555; line-height: 1.8em; letter-spacing: -0.04em; } .quality-03.list .order ul { font-size: 0; margin-top: 90px; position: Relative; } .quality-03.list .order ul:after { display: block; content: ""; clear: both; } .quality-03.list .order li { float: left; width: 33.3333%; position: relative; } .quality-03.list .order li:before { width: 100%; height: 0; border-bottom: 1px solid #ccc; left: 0; top: 35px; display: block; content: ""; position: Absolute; z-index: -1 } .quality-03.list .order li:last-child:before { width: 500px; } .quality-03.list .order li .step { display: inline-block; vertical-align: top; background: #c5161d; width: 70px; height: 70px; box-sizing: border-box; text-align: center; padding-top: 25px; border-radius: 100%; /*margin-left:170px;*/ } .quality-03.list .order li .step p { font-size: 14px; font-weight: 400; color: #fff; line-height: 1.4em; font-family:'Roboto';} .quality-03.list .order li .step p span { font-size: 16px; font-weight: 700; color: #fff; display: block; } .quality-03.list .order li .txt { margin-top: 40px; } .quality-03.list .order li .txt .btxt { font-size: 24px; font-weight: 700; color: #000; letter-spacing: -0.03em; line-height: 1.5em; } .quality-03.list .order li .txt .stxt { font-size: 18px; font-weight: 300; color: #555; letter-spacing: -0.03em; line-height: 1.5em; margin-top: 10px } .quality-03.list .order .ex { position: Absolute; left: -20px; bottom: 0px; font-family: "GothamPro"; font-weight: 800; font-size: 500px; height: 350px; line-height: 1em; color: #000; letter-spacing: -0.03em; line-height: 1.2em; white-space: pre; color: #f7f7f7; } @media only screen and (max-width:1440px) { .quality-03.list .order { margin-top: 70px; padding-top: 70px; padding-bottom: 300px; } .quality-03.list .order h3 { font-size: 43px } .quality-03.list .order ul { margin-top: 70px; } .quality-03.list .order li:before { top: 34px; } .quality-03.list .order li:last-child:before { width: 70px; } .quality-03.list .order li .step { width: 70px; height: 70px; padding-top: 16px } .quality-03.list .order li .step p { font-size: 13px; } .quality-03.list .order li .step p span { font-size: 15px; } .quality-03.list .order li .txt { margin-top: 30px; } .quality-03.list .order li .txt .btxt { font-size: 18px; } .quality-03.list .order li .txt .stxt { font-size: 16px; margin-top: 5px; } .quality-03.list .order .ex { font-size: 520px; bottom: 50px } } @media only screen and (max-width:1200px) { .quality-03.list .order li:before { top: 30px; } .quality-03.list .order li:last-child:before { width: 50px; } .quality-03.list .order li .step { width: 64px; height: 64px; padding-top: 14px } .quality-03.list .order li .step p { font-size: 12px; } .quality-03.list .order li .step p span { font-size: 14px; } .quality-03.list .order li .txt { margin-top: 30px; } .quality-03.list .order li .txt .btxt { font-size: 16px; } .quality-03.list .order li .txt .stxt { font-size: 14px; margin-top: 5px; } .quality-03.list .order .ex { font-size: 450px; bottom: 10px } } @media only screen and (max-width:999px) { .quality-03.list .order { margin-top: 50px; padding-top: 50px; padding-bottom: 250px; } .quality-03.list .order h3 { font-size: 38px } .quality-03.list .order ul { margin-top: 50px; } .quality-03.list .order li { float: none; display: inline-block; vertical-align: top; width: 25%; } .quality-03.list .order li:nth-child(n+5) { margin-top: 30px; } .quality-03.list .order li .step { width: 60px; height: 60px; padding-top: 14px } .quality-03.list .order li .step p { font-size: 11px; } .quality-03.list .order li .step p span { font-size: 13px; } .quality-03.list .order li .txt { margin-top: 20px; } .quality-03.list .order li .txt .btxt { font-size: 15px; } .quality-03.list .order li .txt .stxt { font-size: 13px; } .quality-03.list .order .ex { font-size: 440px; bottom: -10px } } @media only screen and (max-width:680px) { .quality-03.list .order { padding-bottom: 50px; margin-top: 0px; } .quality-03.list .order h3 { font-size: 20px } .quality-03.list .order .stxt {padding-top: 20px; font-size: 15px; line-height: 1.6em; } .quality-03.list .order .stxt br { display:none;} .quality-03.list .order ul { margin-top: 30px; } .quality-03.list .order li:before { top: 25px; } .quality-03.list .order li:last-child:before { width:100%; } .quality-03.list .order li .step { width: 50px; height: 50px; padding-top: 18px } .quality-03.list .order li { width: 100%; text-align: center; } .quality-03.list .order li:nth-child(n+2) { margin-top: 30px; } .quality-03.list .order li .txt .btxt { font-size: 16px; } .quality-03.list .order li .txt .stxt { font-size: 14px; } .quality-03.list .order .ex { left: 33.33333%; font-size: 320px; bottom: -100px } } @media only screen and (max-width:480px) { .quality-03.list .order { padding-bottom: 20px; } .quality-03.list .order h3 { font-size: 20px } .quality-03.list .order .ex {; font-size: 220px; bottom: -190px } } /*======================================================= .quality-04 =========================================================*/ .quality-04.home03 .last{max-width:1440px;box-sizing:border-box; margin:0 auto; margin-top:100px; margin-bottom:100px;} .quality-04.home03 .last .txt{/*position:relative ;padding-left:50%;*/} .quality-04.home03 .last .txt h4{font-weight: normal; color: #2051ba; font-size: 36px; font-weight: 700; display: inline-block; margin-right: 14px; letter-spacing: -0.03em; line-height: 1.4em; /*position:Absolute ; left:0; top:0;*/} .quality-04.home03 .last .txt .btxt{display: block; font-size:24px; color:#000; letter-spacing:-0.03em; line-height:1.4em;} .quality-04.home03 .last .txt .stxt{display: block; font-size:18px; color:#555; letter-spacing:-0.03em; line-height:1.6em; margin-top:50px;} .quality-04.home03 .last ul{margin-top:0px} .quality-04.home03 .last ul:after{display:block; content:"";clear:both} .quality-04.home03 .last li{float:left; width:33.3333%; position:Relative; padding-top:100px;} .quality-04.home03 .last li:before{width:120px;height:120px; position:absolute ;left:0; top:0; display:block; content:""} .quality-04.home03 .last li .img{ position:relative;overflow:hidden} .quality-04.home03 .last li .img img{height:505px; width:367px;} .quality-04.home03 .last li .btxt{font-size:22px; color:#000; font-weight:700; letter-spacing:-0.03em; line-height:1.4em; padding-top:30px;} .quality-04.home03 .last li .stxt{font-size:16px; color:#555; font-weight:300; letter-spacing:-0.03em; line-height:1.6em; margin-top:15px} @media only screen and (max-width:1440px) { .quality-04.home03 .last{margin-top:80px;} .quality-04.home03 .last .txt h4{font-size:42px; width:48%; } .quality-04.home03 .last .txt .btxt{font-size:22px; } .quality-04.home03 .last .txt .btxt br{display:none;} .quality-04.home03 .last .txt .stxt{font-size:17px;} .quality-04.home03 .last .txt .stxt br{display:none;} .quality-04.home03 .last ul{margin-top:60px} .quality-04.home03 .last li{box-sizing:border-box; padding-top:120px;} .quality-04.home03 .last li:before{width:100px;height:100px; background-size:100% auto !important;} .quality-04.home03 .last li .btxt{font-size:26px;} .quality-04.home03 .last li .stxt{font-size:17px;} } @media only screen and (max-width:1200px) { .quality-04.home03 .last .txt h4{font-size:36px; } .quality-04.home03 .last li{padding-top:100px; padding-right:20px;} .quality-04.home03 .last li:before{width:90px;height:90px;} .quality-04.home03 .last li .stxt br{display:none;} } @media only screen and (max-width:999px) { .quality-04.home03 .last{margin-top:60px; margin-bottom:60px;} .quality-04.home03 .last .txt h4{font-size:32px; } .quality-04.home03 .last .txt .btxt{font-size:20px; } .quality-04.home03 .last .txt .stxt{font-size:16px;} .quality-04.home03 .last ul{margin-top:40px; padding-top:40px; border-top:1px solid #dedede;} .quality-04.home03 .last li .btxt{font-size:24px;} .quality-04.home03 .last li .stxt{font-size:16px;} } @media only screen and (max-width:680px) { .quality-04.home03 .last{margin-top:40px;} .quality-04.home03 .last .txt{padding-left:0} .quality-04.home03 .last .txt h4{font-size:30px; position:relative; left:auto; top:auto; margin-bottom:10px; width:auto;} .quality-04.home03 .last .txt .btxt{font-size:18px;} .quality-04.home03 .last .txt .stxt{font-size:15px;} .quality-04.home03 .last .txt .stxt br{display:none;} /*.quality-04.home03 .last li{float:none; width:auto;padding-top:0;}*/ .quality-04.home03 .last li{float:left; width:50%; position:Relative; padding-top:20px; padding-right:3px;} .quality-04.home03 .last li:before{width:70px;height:70px; background-size:100% auto !important; top:-15px;} .quality-04.home03 .last li:nth-child(n+3){margin-top:20px} .quality-04.home03 .last li .btxt{font-size:22px;} .quality-04.home03 .last li .stxt{font-size:15px; margin-top:10px;} .quality-04.home03 .last li .stxt br{display:none;} } @media only screen and (max-width:480px) { .quality-04.home03 .last .txt h4{font-size:24px; } .quality-04.home03 .last .txt .btxt{font-size:16px; } .quality-04.home03 .last .txt .stxt{font-size:14px;} .quality-04.home03 .last li{/*padding-left:60px*/} .quality-04.home03 .last li:before{width:50px;height:50px; top:-5px;} .quality-04.home03 .last li .img img{width:100%; height:100%} .quality-04.home03 .last li .btxt{font-size:20px;} .quality-04.home03 .last li .stxt{font-size:14px;} } /* ===================================== online-wrap common ===================================== */ .online-wrap .lower{font-size:0; margin-top:40px;text-align:center;} .online-wrap .lower.r{text-align:right;} /* ===================================== online-wrap.list ===================================== */ .online-wrap.list{} .online-wrap.list .total{font-size:18px; font-weight:400; color:#000; letter-spacing:-0.03em; line-height:1.2em; margin-bottom:15px;font-family: 'NanumSquareRound'; transform: skew(-0.001deg);} .online-wrap.list .list{border-top:1px solid #111} .online-wrap.list .list li{border-bottom:1px solid #e1e1e1;} .online-wrap.list .list li a{display:block; position:relative; padding:40px 50px 40px 190px;} .online-wrap.list .list li a:before{width:46px;height:46px; position:absolute;right:20px; border-radius:100%; top:50%;margin-top:-23px; display:block;content:"";background:url(../img/Sub/rarrow-on.jpg) no-repeat center center ; background-size:100% auto;-webkit-transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;-moz-transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;-o-transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;} .online-wrap.list .list li a:after{width:46px;height:46px; position:absolute;right:20px; border-radius:100%; top:50%;margin-top:-23px; display:block;content:"";opacity:0; z-index:12;background:url(../img/Sub/rarrow-off.jpg) no-repeat center center ; background-size:100% auto;-webkit-transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;-moz-transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;-o-transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;} .online-wrap.list .list li a:hover:before{background-image:url(../img/Sub/rarrow-off.jpg); right:10px;opacity:0;} .online-wrap.list .list li a:hover:after{background-image:url(../img/Sub/rarrow-off.jpg); right:10px;opacity:1} .online-wrap.list .list .state{position:Absolute ;left:40px; top:40px; font-size:16px; background:#aaa; color:#fff; width:60px; text-align:center; line-height:30px; border-radius:5px;} .online-wrap.list .list .state.ing{background:#2675e0} .online-wrap.list .list .txt{} .online-wrap.list .list .txt .tit{font-size:22px ;color:#111; letter-spacing:-0.03em; font-weight:400;line-height:1.4em; } .online-wrap.list .list .txt ul{margin-top:20px;} .online-wrap.list .list .txt ul:after{display:block; content:"";clear:both} .online-wrap.list .list .txt li{font-weight:300; color:#555; line-height:1.3em; float:left; font-size:16px; border:none;} .online-wrap.list .list .txt li span{font-weight:600;} .online-wrap.list .list .txt li:nth-child(1){float:left; width:340px; font-weight:600;} .online-wrap.list .list .txt li.time:nth-child(1){color:#2675e0;width:380px;} .online-wrap.list .list .txt li:nth-child(2){float:left; width:calc(100% - 380px)} .online-wrap.list .list .txt li:nth-child(n+3){margin-top:10px;} .online-wrap.list .list .txt li:nth-child(n+4){margin-left:14px;} @media only screen and (max-width:1400px){ .online-wrap.list .total{font-size:17px;} .online-wrap.list .list li a{padding:30px 50px 30px 170px;} .online-wrap.list .list .state{left:30px; top:30px;} .online-wrap.list .list .txt{} .online-wrap.list .list .txt .tit{font-size:20px ;} .online-wrap.list .list .txt li{font-size:15px;} .online-wrap.list .list .txt li:nth-child(n+3){margin-top:7px;} .online-wrap.list .list .txt li:nth-child(1){width:320px;} .online-wrap.list .list .txt li.time:nth-child(1){width:360px;} .online-wrap.list .list .txt li:nth-child(2){width:calc(100% - 360px)} .online-wrap.list .list li a:after{width:40px;height:40px; margin-top:-20px;} } @media only screen and (max-width:1200px){ .online-wrap.list .list .state{font-size:14px;} .online-wrap.list .list .txt .tit{font-size:18px ;} .online-wrap.list .list .txt li{font-size:14px;} .online-wrap.list .list li a{padding:30px 50px 30px 150px;} .online-wrap.list .list .txt li:nth-child(1){width:300px;} .online-wrap.list .list .txt li.time:nth-child(1){width:340px;} .online-wrap.list .list .txt li:nth-child(2){width:calc(100% - 340px)} } @media only screen and (max-width:999px){ .online-wrap.list .total{font-size:15px;} .online-wrap.list .list li{border:1px solid #e1e1e1} .online-wrap.list .list li:nth-child(n+2){margin-top:20px;} .online-wrap.list .list li a{padding:30px} .online-wrap.list .list .state{font-size:13px; position:relative ;display:inline-block;vertical-align:top;left:auto; top:auto; margin-bottom:5px; text-align:center;width:50px; line-height:24px;} .online-wrap.list .list .txt{} .online-wrap.list .list .txt .tit{font-size:18px ;} .online-wrap.list .list .txt ul{margin-top:20px;box-sizing:border-box;background:#f8f8f8; padding:15px;} .online-wrap.list .list .txt li{float:none; width:auto !important;position:relative; padding-left:66px; font-size:14px; border:none;} .online-wrap.list .list .txt li:nth-child(1){float:none;width:auto;} .online-wrap.list .list .txt li:nth-child(2){float:none;width:auto;} .online-wrap.list .list .txt li:nth-child(n+2){margin-top:5px;} .online-wrap.list .list .txt li:nth-child(n+4){margin-left:0;} .online-wrap.list .list .txt li span{position:absolute; left:0; top:0;} .online-wrap.list .list li a:after{width:30px;height:30px; margin-top:0; top:30px; right:30px;} .online-wrap.list .list li a:hover:after{right:20px;} } @media only screen and (max-width:680px){ .online-wrap.list .total{font-size:13px; margin-bottom:7px;} .online-wrap.list .list li a{padding:20px;} .online-wrap.list .list .state{font-size:12px;} .online-wrap.list .list .txt{} .online-wrap.list .list .txt .tit{font-size:16px ;} .online-wrap.list .list .txt ul{margin-top:15px;} .online-wrap.list .list li a:after{width:26px;height:26px; right:20px; top:20px;} .online-wrap.list .list li a:hover:after{right:10px;} } @media only screen and (max-width:480px){ .online-wrap.list .total{font-size:11px;} .online-wrap.list .list li a:after{width:22px;height:22px;} } /* ===================================== online-wrap.detail ===================================== */ .online-wrap.detail .detail{border-bottom:1px solid #ddd} .online-wrap.detail .periods{border-top:1px solid #000;padding:45px 30px;} .online-wrap.detail .periods h3{font-size:22px ;color:#111; letter-spacing:-0.03em; font-weight:400;line-height:1.3em; position:relative; padding-left:80px;} .online-wrap.detail .periods h3 .state{position:Absolute ;left:0; top:0; font-size:16px; background:#aaa; color:#fff; width:60px; text-align:center; line-height:30px; border-radius:5px;} .online-wrap.detail .periods h3 .state.ing{background:#2675e0} .online-wrap.detail .periods h3 br{display:none;} .online-wrap.detail .periods ul{margin-top:25px;} .online-wrap.detail .periods ul:after{display:block; content:"";clear:both} .online-wrap.detail .periods li{font-weight:300; color:#555; line-height:1.3em; float:left; font-size:16px;} .online-wrap.detail .periods li span{font-weight:600;} .online-wrap.detail .periods li:nth-child(1){float:left; width:360px;color:#2675e0; font-weight:600;} .online-wrap.detail .periods li:nth-child(2){float:left; width:calc(100% - 380px)} .online-wrap.detail .periods li:nth-child(n+3){margin-top:10px;} .online-wrap.detail .periods li:nth-child(n+4){margin-left:14px;} .online-wrap.detail .periods li.time:nth-child(1){width:380px;} .online-wrap.detail .cons{border-top:1px solid #ddd; min-height:200px; padding:45px 30px;font-size:16px; color:#555; line-height:1.7em;} @media only screen and (max-width:1400px){ .online-wrap.detail .periods{padding:30px 20px;} .online-wrap.detail .periods h3{font-size:20px ;} .online-wrap.detail .periods h3 .state{left:0; top:-3px;} .online-wrap.detail .periods li{font-size:15px;} .online-wrap.detail .periods li:nth-child(n+3){margin-top:7px;} .online-wrap.detail .periods li:nth-child(1){width:320px;} .online-wrap.detail .periods li:nth-child(2){ width:calc(100% - 360px)} .online-wrap.detail .periods li.time:nth-child(1){width:360px;} } @media only screen and (max-width:1200px){ .online-wrap.detail .periods h3{font-size:18px ;} .online-wrap.detail .periods h3 .state{font-size:14px;} .online-wrap.detail .cons{padding:40px 20px; font-size:15px;} } @media only screen and (max-width:999px){ .online-wrap.detail .periods h3{font-size:16px ; padding-left:0;} .online-wrap.detail .periods h3 .state{font-size:13px; position:relative ;display:inline-block;vertical-align:top;left:auto; top:auto; margin-bottom:5px; text-align:center;width:50px; line-height:24px;} .online-wrap.detail .periods h3 br{display:block;} .online-wrap.detail .periods ul{margin-top:20px;background:#f8f8f8; padding:15px;} .online-wrap.detail .periods li{float:none;position:relative; width:auto !important; padding-left:66px; font-size:14px;} .online-wrap.detail .periods li:nth-child(1){float:none;width:auto;} .online-wrap.detail .periods li:nth-child(2){float:none;width:auto;} .online-wrap.detail .periods li:nth-child(n+2){margin-top:5px;} .online-wrap.detail .periods li:nth-child(n+4){margin-left:0;} .online-wrap.detail .periods li span{position:absolute; left:0; top:0;} .online-wrap.detail .cons{padding:30px 20px; font-size:14px;} } @media only screen and (max-width:680px){ .online-wrap.detail .periods{padding:20px 15px;} .online-wrap.detail .periods h3{font-size:16px ; } .online-wrap.detail .periods h3 .state{font-size:12px;} .online-wrap.detail .periods ul{margin-top:15px;} .online-wrap.detail .cons{padding:20px 15px; font-size:13px; min-height:190px;} } @media only screen and (max-width:480px){ .online-wrap.detail .periods h3 span{font-size:14px;} } .online-wrap.detail .files{border-top:1px solid #ddd; padding:25px 35px; padding-left:130px; position:relative;} .online-wrap.detail .files h3{position:Absolute ;left:35px ; top:25px; font-weight:400; font-size:18px ;letter-spacing:-0.03em; color:#111;} .online-wrap.detail .files li {} .online-wrap.detail .files li:nth-child(n+2){margin-top:7px;} .online-wrap.detail .files li a{background:url(../img/Sub/ico-file.jpg) no-repeat left 3px;background-size:17px auto;padding-left:35px;font-size:15px; color:#666; line-height:25px;display:block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: background 0s ease-in-out;-moz-transition: background 0s ease-in-out;-o-transition:background 0s ease-in-out;transition:background 0s ease-in-out;} .online-wrap.detail .files li a:hover{color:#111; text-decoration:underline} .online-wrap.detail .others{ border-top:1px solid #ddd} .online-wrap.detail .others li{ position:relative; padding:20px 20px 20px 145px} .online-wrap.detail .others li:nth-child(n+2){border-top:1px solid #ddd;} .online-wrap.detail .others li .btxt{padding-left:45px;font-size:16px; color:#666; line-height:25px; position:absolute; left:0; top:20px;} .online-wrap.detail .others li a{font-size:16px; color:#666; line-height:25px;display:block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .online-wrap.detail .others li a:hover{color:#111; text-decoration:underline} @media only screen and (max-width:1200px){ .online-wrap.detail .files{padding:20px 30px; padding-left:120px;} .online-wrap.detail .files h3{font-size:16px; left:30px; top:20px;} .online-wrap.detail .files li a{font-size:15px; padding-left:30px;} .online-wrap.detail .others li{padding:20px 20px 20px 135px} .online-wrap.detail .others li .btxt{padding-left:40px; font-size:15px; top:20px;} .online-wrap.detail .others li a{font-size:15px;} } @media only screen and (max-width:999px){ .online-wrap.detail .files{padding:25px 20px;} .online-wrap.detail .files h3{font-size:16px; left:auto; top:auto; position:relative; margin-bottom:10px;} .online-wrap.detail .files li a{font-size:14px; padding-left:25px;background-size:12px auto;background-position:left 3px; line-height:20px;} .online-wrap.detail .others li{padding:12px 15px 12px 115px} .online-wrap.detail .others li .btxt{padding-left:35px;left:10px; font-size:14px;top:12px; background:url(../img/Sub/mpage-prev.jpg) no-repeat 15px center;} .online-wrap.detail .others li:nth-child(2) .btxt{background:url(../img/Sub/mpage-next.jpg) no-repeat 15px center;} .online-wrap.detail .others li a{font-size:14px;} } @media only screen and (max-width:680px){ .online-wrap.detail .files{padding:25px 20px;} .online-wrap.detail .files h3{font-size:15px;} .online-wrap.detail .files li:nth-child(n+2){margin-top:2px;} .online-wrap.detail .files li a{font-size:13px; padding-left:22px;} .online-wrap.detail .others li{padding:12px 15px 12px 95px} .online-wrap.detail .others li .btxt{padding-left:35px; font-size:13px; left:5px;} .online-wrap.detail .others li a{font-size:13px;} } @media only screen and (max-width:480px){ .online-wrap.detail .files{padding:15px 13px;} .online-wrap.detail .others li{} .online-wrap.detail .others li .btxt{ left:0} } /* ====================================================== .member-wrap =========================================================*/ .member-wrap{max-width:500px; margin:0 auto} .member-wrap .logo{background:url(../img/content/login-logo.jpg) no-repeat center top; height:66px; margin-bottom:60px;} @media only screen and (max-width:999px){ .member-wrap .logo{margin-bottom:40px; background-size:auto 55px ; height:55px;} } @media only screen and (max-width:680px){ .member-wrap .logo{ background-size:auto 40px ; height:40px;} } @media only screen and (max-width:480px){ } /* ====================================================== .member-wrap.login =========================================================*/ .member-wrap.login{} .member-wrap.login h3{font-size:28px ;font-weight:300; color:#1f1f1f; line-height:1.2em; letter-spacing:-0.03em; margin-bottom:15px;} .member-wrap.login .stit{font-size:16px; font-weight:400; color:#1f1f1f; letter-spacing:-0.03em; line-height:1.2em;} .member-wrap.login .sns{margin-top:25px;} .member-wrap.login .sns ul:after{display:block;content:"";clear:both} .member-wrap.login .sns li{float:left; width:46%;} .member-wrap.login .sns li:nth-child(n+2){width:25%; margin-left:2%; } .member-wrap.login .sns li a{display:block; height:55px; line-height:53px; text-align:center; border-radius:5px; border:1px solid #d2d2d2; background:#fff;} .member-wrap.login .sns li:nth-child(1) a{background:#fee500; border-color:#fee500; font-size:16px; font-weight:400; letter-spacing:-0.03em; color:#1f1f1f;} .member-wrap.login .sns li:nth-child(1) a span{display:inline-block;vertical-align:top; padding-left:34px;background:url(../img/content/login-kakao.jpg) no-repeat left center;} .member-wrap.login .sns li:nth-child(2) a{background:url(../img/content/login-naver.jpg) no-repeat center center;} .member-wrap.login .sns li:nth-child(3) a{background:url(../img/content/login-facebook.jpg) no-repeat center center;} .member-wrap.login .entry{margin-top:40px;} .member-wrap.login .entry ul{} .member-wrap.login .entry ul li{position:relative;} .member-wrap.login .entry ul li:nth-child(n+2){margin-top:20px;} .member-wrap.login .other{margin-top:20px; position:relative} .member-wrap.login .other ul{position:absolute; right:0; top:0;} .member-wrap.login .other ul:after{display:block; content:"";clear:both;} .member-wrap.login .other li{position:relative; float:left;} .member-wrap.login .other li:nth-child(n+2){margin-left:35px;} .member-wrap.login .other li:nth-child(n+2):before{width:1px;height:12px; position:absolute; left:-18px; top:50%;margin-top:-6px; background:#d1d1d1; display:block; content:""} .member-wrap.login .other li a{display:block; line-height:25px; color:#555;} .member-wrap.login .other .chk-check label{font-weight:300;} .member-wrap.login .login-btn{margin-top:30px;display:block; line-height:55px; border:1px solid #1f1f1f; text-align:center; font-size:18px; font-weight:300; letter-spacing:-0.03em; color:#1f1f1f; border-radius:5px;} .member-wrap.login .login-btn:hover{background:#1f1f1f; color:#fff; border-color:#1f1f1f} .member-wrap.login .join-btn{margin-top:10px;display:block; line-height:60px; border:1px solid #b49566; background:#b49566; text-align:center; font-size:18px; font-weight:300; letter-spacing:-0.03em; color:#fff; border-radius:5px;} .member-wrap.login .join-btn:hover{margin-top:10px;display:block; line-height:60px; border:1px solid #b49566; background:#fff; text-align:center; font-size:18px; font-weight:300; letter-spacing:-0.03em; color:#b49566; border-radius:5px;} .member-wrap.login .bemember-btn{margin-top:30px;display:block; line-height:1.3em; text-align:center; font-size:15px; font-weight:500; letter-spacing:-0.03em; color:#1f1f1f; text-decoration:underline; } .member-wrap.login .copy{margin-top:50px; text-align:center; font-size:12px; color:#888; text-transform:uppercase; line-height:1.3em; letter-spacing:0.01em;} @media only screen and (max-width:1240px){ } @media only screen and (max-width:999px){ .member-wrap.login h3{font-size:25px ; margin-bottom:40px;} .member-wrap.login .stit{font-size:15px;} .member-wrap.login .sns li a{height:45px;line-height:43px; } .member-wrap.login .sns li:nth-child(1) a{font-size:15px;} .member-wrap.login .sns li:nth-child(1) a span{background-size:20px auto; padding-left:30px;} .member-wrap.login .sns li:nth-child(2) a {background-size:20px auto;} .member-wrap.login .sns li:nth-child(3) a {background-size:20px auto;} .member-wrap.login .entry{margin-top:20px;} .member-wrap.login .entry ul li:nth-child(n+2){margin-top:15px;} .member-wrap.login .entry ul li .chk-input input{height:45px;} .member-wrap.login .other li a{font-size:13px;} .member-wrap.login .other li:nth-child(n+2){margin-left:25px;} .member-wrap.login .other li:nth-child(n+2):before{left:-13px;} .member-wrap.login .login-btn{line-height:55px; font-size:17px;} .member-wrap.login .join-btn{line-height:55px; font-size:17px;} .member-wrap.login .bemember-btn{font-size:14px;} .member-wrap.login .copy{font-size:11px; margin-top:30px;} } @media only screen and (max-width:680px){ .member-wrap.login h3{font-size:23px ; margin-bottom:20px;} .member-wrap.login .stit{font-size:14px;} .member-wrap.login .sns li:nth-child(1) a{font-size:14px;} .member-wrap.login .bemember-btn{font-size:13px;} .member-wrap.login .login-btn{line-height:50px; font-size:16px;} .member-wrap.login .join-btn{line-height:50px; font-size:16px;} } @media only screen and (max-width:480px){ .member-wrap.login h3{font-size:21px ; margin-bottom:10px;} .member-wrap.login .sns li:nth-child(1) a{font-size:13px;} } /* ====================================================== .member-wrap.join =========================================================*/ .member-wrap.join{} .member-wrap.join h3{font-size:28px ;font-weight:300; color:#1f1f1f; line-height:1.2em; letter-spacing:-0.03em; margin-bottom:30px;} .member-wrap.join .sns{} .member-wrap.join .sns ul:after{display:block;content:"";clear:both} .member-wrap.join .sns li{float:left; width:46%;} .member-wrap.join .sns li:nth-child(n+2){width:25%; margin-left:2%; } .member-wrap.join .sns li a{display:block; height:55px; line-height:53px; text-align:center; border-radius:5px; border:1px solid #d2d2d2; background:#fff;} .member-wrap.join .sns li:nth-child(1) a{background:#fee500; border-color:#fee500; font-size:16px; font-weight:400; letter-spacing:-0.03em; color:#1f1f1f;} .member-wrap.join .sns li:nth-child(1) a span{display:inline-block;vertical-align:top; padding-left:34px;background:url(../img/content/login-kakao.jpg) no-repeat left center;} .member-wrap.join .sns li:nth-child(2) a{background:url(../img/content/login-naver.jpg) no-repeat center center;} .member-wrap.join .sns li:nth-child(3) a{background:url(../img/content/login-facebook.jpg) no-repeat center center;} .member-wrap.join .entry{margin-top:40px;} .member-wrap.join .entry ul{} .member-wrap.join .entry ul li{position:relative; padding-left:135px;} .member-wrap.join .entry ul li:nth-child(n+2){margin-top:20px;} .member-wrap.join .entry ul li .btxt{position:absolute; left:0; top:0; line-height:48px; font-size:17px; color:#1f1f1f; letter-spacing:-0.03em;} .member-wrap.join .entry ul li .field.cmmt{} .member-wrap.join .entry ul li .field.cmmt .chk-input{ width:49%} .member-wrap.join .entry ul li .field.cmmt .chk-input:nth-child(2){float:right; width:49%} .member-wrap.join .entry ul li .field.cmmt{} .member-wrap.join .entry ul li .field.cmmt .chk-select{ width:48%} .member-wrap.join .entry ul li .field.cmmt .chk-select:nth-child(2){ width:25%} .member-wrap.join .entry ul li .field.cmmt .chk-select:nth-child(3){float:right; width:25%} .member-wrap.join .entry ul li .field.zip{padding:5px 0;display:block;} .member-wrap.join .entry ul li .field.zip .stxt{line-height:46px;} .member-wrap.join .entry ul li .zip-btn{border:1px solid #d2d2d2; border-radius:5px;display:inline-block;vertical-align:top; font-size:13px; color:#888; width:100px;text-align:center; line-height:46px; margin-left:5px;} .member-wrap.join .entry ul li .zip-btn:hover{background:#1f1f1f; color:#fff; border-color:#1f1f1f} .member-wrap.join .agrees{} .member-wrap.join .agrees h5{ font-size:16px;} .member-wrap.join .agrees .scroll{border:1px solid #d9d9d9; padding:20px; max-height:150px; margin-top:10px; box-sizing:border-box; overflow-y:auto;} .member-wrap.join .agrees ul{padding:15px 0;} .member-wrap.join .agrees li{position:relative;} .member-wrap.join .agrees li:nth-child(n+2){margin-top:7px;} .member-wrap.join .agrees li .chk-check{display:block;} .member-wrap.join .agrees li .view-btn{position:Absolute; right:0; top:0; line-height:25px; color:#5c3fbf; border-bottom:1px solid #5c3fbf; font-size:14px;} .member-wrap.join .agrees li .view-btn:hover{color:#1f1f1f; border-color:#1f1f1f;} .member-wrap.join .join-btn{margin-top:40px;display:block; line-height:60px; border:1px solid #1f1f1f; background:#1f1f1f; text-align:center; font-size:18px; font-weight:300; letter-spacing:-0.03em; color:#fff; border-radius:5px;} .member-wrap.join .join-btn:hover{margin-top:40px;display:block; line-height:60px; border:1px solid #1f1f1f; background:#fff; text-align:center; font-size:18px; font-weight:300; letter-spacing:-0.03em; color:#1f1f1f; border-radius:5px;} @media only screen and (max-width:1240px){ } @media only screen and (max-width:999px){ .member-wrap.join h3{font-size:25px ; margin-bottom:40px;} .member-wrap.join .sns li a{height:45px;line-height:43px; } .member-wrap.join .sns li:nth-child(1) a{font-size:15px;} .member-wrap.join .sns li:nth-child(1) a span{background-size:20px auto; padding-left:30px;} .member-wrap.join .sns li:nth-child(2) a {background-size:20px auto;} .member-wrap.join .sns li:nth-child(3) a {background-size:20px auto;} .member-wrap.join .entry{margin-top:20px;} .member-wrap.join .entry ul {padding:0 5px;} .member-wrap.join .entry ul li{padding-left:0;} .member-wrap.join .entry ul li .btxt{padding-left:10px;line-height:1.3em; margin-bottom:10px; font-size:16px;position:relative; left:auto; top:auto;} .member-wrap.join .entry ul li .btxt:before{width:3px;height:3px; position:Absolute; left:0; top:8px; background:#333; display:block; content:""} .member-wrap.join .join-btn{line-height:55px; font-size:17px;} } @media only screen and (max-width:680px){ .member-wrap.join h3{font-size:23px ; margin-bottom:20px;} .member-wrap.join .sns li:nth-child(1) a{font-size:14px;} .member-wrap.join .entry ul li .btxt{font-size:15px;} .member-wrap.join .join-btn{margin-top:30px;line-height:50px; font-size:16px;} } @media only screen and (max-width:480px){ .member-wrap.join h3{font-size:21px ;} .member-wrap.join .sns li:nth-child(1) a{font-size:13px;} } /* ====================================================== .layer-wrap.joinEnd =========================================================*/ .layer-wrap.joinEnd {padding:25px;width:96%; max-width:500px; box-sizing:border-box; border-radius:15px;background:#fff; position:fixed; display:none;left:50%; top:50%;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2) ; -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2) ; -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2) ; } .layer-wrap.joinEnd .is-con{text-align:center;} .layer-wrap.joinEnd .is-con .btxt{font-size:18px; color:#1f1f1f; font-weight:500; line-height:1.2em; padding-top:40px; background:url(../img/content/welcome-chk.jpg) no-repeat center 10px} .layer-wrap.joinEnd .is-con .stxt{font-size:14px; color:#888; font-weight:400; line-height:1.2em; margin-top:7px;} .layer-wrap.joinEnd .is-btm{margin-top:20px;} .layer-wrap.joinEnd .is-btm:after{display:block; content:"";clear:both;} .layer-wrap.joinEnd .is-btm a{display:inline-block;vertical-align:top;width:48.5%;text-align:center; border-radius:5px;} .layer-wrap.joinEnd .is-btm .end-btn{float:left;border:1px solid #d1d1d1; line-height:45px; font-size:14px; color:#1f1f1f; font-weight:400; letter-spacing:-0.03em;} .layer-wrap.joinEnd .is-btm .enter-btn{float:right;border:1px solid #5c3fbf; background:#5c3fbf;line-height:45px; font-size:14px; color:#fff; font-weight:400; letter-spacing:-0.03em;} /* ====================================================== .member-wrap.modify =========================================================*/ .member-wrap.modify{} .member-wrap.modify h3{font-size:28px ;font-weight:300; color:#1f1f1f; line-height:1.2em; letter-spacing:-0.03em; margin-bottom:60px;} .member-wrap.modify h4{font-size:16px ;font-weight:700; color:#1f1f1f; line-height:1.2em; letter-spacing:-0.03em; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #d2d2d2} .member-wrap.modify h5{font-size:14px ;color:#888; letter-spacing:-0.03em; font-weight:400; margin-bottom:20px;} .member-wrap.modify .stit{font-size:16px; font-weight:400; color:#1f1f1f; letter-spacing:-0.03em; line-height:1.2em;} .member-wrap.modify .entry{} .member-wrap.modify .entry ul{} .member-wrap.modify .entry ul li{position:relative; padding-left:135px;} .member-wrap.modify .entry ul li:nth-child(n+2){margin-top:20px;} .member-wrap.modify .entry ul li .btxt{position:absolute; left:0; top:0; line-height:48px; font-size:17px; color:#1f1f1f; letter-spacing:-0.03em;} .member-wrap.modify .entry ul li .stxt{display:inline-block;vertical-align:top; line-height:48px; font-size:16px; color:#1f1f1f; letter-spacing:-0.03em; min-width:100px;} .member-wrap.modify .entry ul li .stxt.f10{font-size:10px;} .member-wrap.modify .entry ul li .modify-btn{border:1px solid #d2d2d2; border-radius:5px;display:inline-block;vertical-align:top; font-size:13px; color:#888; width:62px;text-align:center; line-height:38px; margin-left:15px;} .member-wrap.modify .entry ul li .modify-btn:hover{background:#1f1f1f; color:#fff; border-color:#1f1f1f} .member-wrap.modify .entry ul li .field.modify{padding:5px 0;display:block;} .member-wrap.modify .entry ul li .field.modify .stxt{line-height:38px;} .member-wrap.modify .entry ul li .field.cmmt{} .member-wrap.modify .entry ul li .field.cmmt .chk-input{float:left; width:49%} .member-wrap.modify .entry ul li .field.cmmt .chk-input:nth-child(2){float:right; width:49%} .member-wrap.modify .letter{margin-top:27px;} .member-wrap.modify .letter ul{margin:-5px} .member-wrap.modify .letter ul:after{display:block; content:"";clear:both;} .member-wrap.modify .letter li{float:left;margin:5px} .member-wrap.modify .letter li:nth-child(n+2){} .member-wrap.modify .letter li a{ line-height:30px; border:1px solid #d2d2d2; border-radius:30px; padding:0 20px;display:block; font-size:14px; color:#777; letter-spacing:-0.03em;} .member-wrap.modify .letter li.active a{border-color:#718bdd; background:#718bdd; color:#fff;} .member-wrap.modify .field.agree{margin-top:50px; display:block;} .member-wrap.modify .field.agree .view-btn{font-size:15px; font-weight:500; display:inline-block;vertical-align:top;margin-left:10px; line-height:25px; color:#1f1f1f;text-decoration:underline } .member-wrap.modify .field.agree .view-btn:hover{text-decoration:underline} .member-wrap.modify .save-btn{margin-top:40px;display:block; line-height:60px; background:#1f1f1f; text-align:center; font-size:18px; font-weight:300; letter-spacing:-0.03em; color:#fff; border-radius:5px;} .member-wrap.modify .r{margin-top:15px;text-align:Right;} .member-wrap.modify .leave-btn{font-size:16px; font-weight:400; color:#1f1f1f; line-height:1.4em; border-bottom:1px solid #1f1f1f; display:inline-block;vertical-align:top;} @media only screen and (max-width:1240px){ } @media only screen and (max-width:999px){ .member-wrap.modify h3{font-size:25px ; margin-bottom:40px;} .member-wrap.modify h4{font-size:15px ;} .member-wrap.modify h5{font-size:13px ;} .member-wrap.modify .entry ul {padding:0 5px;} .member-wrap.modify .entry ul li .stxt{line-height:32px;} .member-wrap.modify .entry ul li .modify-btn{line-height:32px; position:absolute;right:0; top:5px;} .member-wrap.modify .entry ul li .field.modify{padding-right:75px;} .member-wrap.modify .entry ul li .field.modify .stxt{line-height:32px; display:block;border:1px solid #dedede; padding:0 10px; font-size:14px; border-radius:5px;background:#fafafa} .member-wrap.modify .entry ul li{padding-left:0;} .member-wrap.modify .entry ul li .btxt{padding-left:10px;line-height:1.3em; margin-bottom:10px; font-size:16px;position:relative; left:auto; top:auto;} .member-wrap.modify .entry ul li .btxt:before{width:3px;height:3px; position:Absolute; left:0; top:8px; background:#333; display:block; content:""} .member-wrap.modify .stit{font-size:15px; } .member-wrap.modify .save-btn{line-height:55px; font-size:17px;} .member-wrap.modify .leave-btn{font-size:15px;} .member-wrap.modify .letter{margin-top:20px;} .member-wrap.modify .letter li a{padding:0 15px; font-size:13px;} .member-wrap.modify .field.agree{margin-top:30px;} .member-wrap.modify .field.agree .view-btn{line-height:20px; font-size:14px;} } @media only screen and (max-width:680px){ .member-wrap.modify h3{font-size:23px ; margin-bottom:20px;} .member-wrap.modify .entry ul li .btxt{font-size:15px;} .member-wrap.modify .letter li a{ font-size:12px;} .member-wrap.modify .save-btn{margin-top:30px;line-height:50px; font-size:16px;} .member-wrap.modify .leave-btn{font-size:14px;} } @media only screen and (max-width:480px){ .member-wrap.modify h3{font-size:21px ;} .member-wrap.modify .stit{font-size:14px; } .member-wrap.modify .leave-btn{font-size:13px;} .member-wrap.modify .field.agree .view-btn{line-height:20px; font-size:13px;} } /* ====================================================== .member-wrap.leave =========================================================*/ .member-wrap.leave{} .member-wrap.leave h3{font-size:28px ;font-weight:300; color:#111; line-height:1.2em; letter-spacing:-0.03em; margin-bottom:60px;} .member-wrap.leave .stit{font-size:16px; font-weight:400; color:#1f1f1f; letter-spacing:-0.03em; line-height:1.4em;} .member-wrap.leave .ex{margin-top:25px; border-top:1px solid #d2d2d2; border-bottom:1px solid #d2d2d2; padding:30px 0;} .member-wrap.leave .ex ul{} .member-wrap.leave .ex li{position:relative; padding-left:12px; font-size:14px; font-weight:300; color:#111; line-height:1.2em;} .member-wrap.leave .ex li:nth-child(n+2){margin-top:5px;} .member-wrap.leave .ex li:before{background:#777; width:6px;height:1px; position:absolute; left:0; top:8px; display:block ;content:""} .member-wrap.leave .field{display:block; margin-top:25px;} .member-wrap.leave .chk-check{display:block; } .member-wrap.leave .chk-check label{} .member-wrap.leave .chk-input{display:block; margin-top:20px;} .member-wrap.leave .chk-input textarea{} .member-wrap.leave .chk-select{display:block; margin-top:30px;} .member-wrap.leave .chk-select select{} .member-wrap.leave .leave-btn{margin-top:20px;display:block; line-height:60px; background:#1f1f1f; text-align:center; font-size:18px; font-weight:300; letter-spacing:-0.03em; color:#fff; border-radius:5px;} .member-wrap.leave .leave-btn:hover{margin-top:20px;display:block; line-height:60px; border:1px solid #1f1f1f; background:#fff; text-align:center; font-size:18px; font-weight:300; letter-spacing:-0.03em; color:#1f1f1f; border-radius:5px;} @media only screen and (max-width:1240px){ } @media only screen and (max-width:999px){ .member-wrap.leave h3{font-size:25px; margin-bottom:40px;} .member-wrap.leave .stit{font-size:15px;} .member-wrap.leave .ex{padding:25px 0} .member-wrap.leave .ex ul{padding:0 5px;} .member-wrap.leave .ex li{padding-left:10px;} .member-wrap.leave .ex li:before{width:4px} .member-wrap.leave .field{margin-top:15px;} .member-wrap.leave .leave-btn{line-height:55px; font-size:17px;} } @media only screen and (max-width:680px){ .member-wrap.leave h3{font-size:23px; margin-bottom:20px;} .member-wrap.leave .stit{font-size:14px;} .member-wrap.leave .leave-btn{line-height:50px; font-size:16px;} } @media only screen and (max-width:480px){ .member-wrap.leave h3{font-size:21px} .member-wrap.leave .stit{font-size:13px;} } /* ===================================== brochure-wrap ===================================== */ .brochure-wrap { position: relative; min-height: 590px; padding-left: 550px; margin-top: 50px; margin-bottom: 20px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #f9f9f9;} .brochure-wrap .brochure-img { position: absolute; top: 0; left: 0; width: 426px; } .brochure-img .left { width: 100%; margin-bottom: 10px; } .brochure-img .left ul { position: relative; clear: both; list-style: none; padding: 0; margin: 0; } .brochure-img .left li { float: left; width: 100%; height: 590px; overflow: hidden; box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.30); } .brochure-txt { clear: both; padding: 100px 0px 30px; } .brochure-txt .tit { font-size: 20px; color: #e51937; line-height: 1.3; font-weight: 500; font-family: 'Roboto'; padding-left:40px;} .brochure-txt .txt { position: relative; font-size: 36px; color: #222; line-height:44px; margin-top: 10px; margin-bottom: 30px; font-weight: 500; letter-spacing: -0.25px;} .brochure-txt .txt:before { content: ""; display: block; width: 30px; height: 3px; background: #d51c29; position: absolute; left: 0; top: -25px;} .info { position: relative; display: block; font-size: 16px; color: #555; letter-spacing: -1px; line-height: 24px; } .icon-download { width: 30px; height: 17px; margin: 0px 0px 0 0px; background-image: url(../img/content/icon-down.png); } .icon-pdf { width: 30px; height: 17px; margin: -3px 10px 0 20px; background-image: url(../../img/content/icon-pdf.png); } [class^=icon-] { display: inline-block; overflow: hidden; margin: 0; padding: 0; border: 0; background-color: transparent; background-position: 50% 50%; background-repeat: no-repeat; font-size: 0; line-height: 0; text-decoration: none; vertical-align: middle; text-indent: -1000em;} /* brochure-btn */ .brochure-btn { text-align: left; margin-bottom: 7rem; } .brochure-btn button { min-width: 17rem; border: 1px solid #d51c29; background: #fff; color: #d51c29; line-height: 55px;} .brochure-btn button:hover { border-color: #d51c29; background: #d51c29; color: #fff; -webkit-transition: all .2s; transition: all .2s; } .brochure-btn .btn_list, .brochure-btn .btn_submit { background: #333; color: #fff; border-color: #333; } .brochure-btn .btn_list:hover, .brochure-btn .btn_submit:hover { background: #fff; color: #555; border: 1px solid #333; } @media only screen and (max-width:1260px) { } @media only screen and (max-width:1200px) { } @media only screen and (max-width:999px) { .brochure-wrap { position: relative; min-height: 400px; padding-left: 330px; margin-top: 50px; margin-bottom: 20px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .brochure-wrap .brochure-img { position: absolute; top: 0; left: 0; width: 290px; } .brochure-img .left { width: 100%; margin-bottom: 10px; } .brochure-img .left ul { position: relative; clear: both; list-style: none; padding: 0; margin: 0; } .brochure-img .left li { float: left; width: 100%; height: 400px; overflow: hidden; box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.30); } .brochure-txt { clear: both; padding: 20px 0px; } .brochure-txt .tit { font-size: 14px; color: #aaa; line-height: 1.3; margin-bottom: 30px; font-weight: 500; font-family: 'Roboto'; } .brochure-txt .txt { font-size: 30px; color: #000; line-height: 1.3; margin-bottom: 20px; font-weight: 200; } .info { position: relative; display: block; font-size: 16px; color: #555; letter-spacing: -1px; line-height: 24px; } br { display: none; } /* brochure-btn */ .brochure-btn { text-align: left; margin-bottom: 3rem; } .brochure-btn button { min-width: 10rem; border: 1px solid #ddd; background: #fff; color: #555; padding: .8rem 0;} .brochure-btn button:hover { border-color: #333; -webkit-transition: all .2s; transition: all .2s; } .brochure-btn .btn_list, .brochure-btn .btn_submit { background: #333; color: #fff; border-color: #333; } .brochure-btn .btn_list:hover, .brochure-btn .btn_submit:hover { background: #fff; color: #555; border: 1px solid #333; } } @media only screen and (max-width:680px) { .brochure-wrap { margin-bottom: 20px; background: #fff; } .brochure-wrap { padding-left: 0; margin-top: 0px; } .brochure-wrap .brochure-img { position: static; width: 100%; } .brochure-img .left { width: 100%; height: 100%; margin-bottom: 10px; } .brochure-img .left ul { position: relative; clear: both; list-style: none; padding: 0; margin: 0; } .brochure-img .left li { float: left; width: 100%; height: 100%; } .brochure-txt { clear: both; padding: 30px 0px 30px; border-top: 1px solid #000; border-bottom: 0px solid #ddd; text-align: left; } .brochure-txt .txt { font-size: 1.3rem; color: #000; line-height: 1.3; margin-bottom: 10px; text-align: left; font-weight: 400; } .info { position: relative; display: block; text-align: left; font-size: 14px; color: #555; padding: 10px 0 20px; letter-spacing: -1px; } .info br { display: none; } .brochure-btn button { min-width: 100%; border: 1px solid #ddd; background: #fff; color: #555; padding:0 10px;} br { display: block; } } @media only screen and (max-width:480px) { } /* ===================================== slide-wrap ===================================== */ .slide-wrap .slide-list { width: 130%; position: relative; } .slide-wrap .slide-list::before { content: ""; width: 100%; height: 2px; background-color: #e1e1e1; position: absolute; bottom: 1px; left: 0; z-index: 0; } .slide-wrap .slide-img { width: 100%; display: flex; flex-wrap: nowrap; overflow-x: scroll; padding-bottom: 75px; position: relative; z-index: 1; } .slide-wrap .slide-img::-webkit-scrollbar {height: 7px; background: none;} .slide-wrap .slide-img::-webkit-scrollbar-thumb {background: #111; border-radius: 3px;} .slide-wrap .slide-img::-webkit-scrollbar-track {background: none;} .slide-wrap .slide-img:last-child { border-bottom: none; } .slide-wrap .slide-img .list { margin-right: 50px; flex: 0 0 auto; } .slide-wrap .slide-img .list p { font-size: 16px; color: #666; margin-top: 12px; } .slide-wrap .slide-img .list .btxt { font-size: 20px; color: #111; margin-top: 20px; line-height: 130%; font-weight: 500; font-family: "Roboto" } .slide-wrap .slide-img .list .stxt { font-size: 16px; color: #666; margin-top: 12px; line-height: 130%; font-family: "Roboto" } .cont-tit .btit { font-size: 55px; color: #222; font-weight: 600; line-height: 1.4em; margin-top: 90px; } .cont-tit .btit span { color: #ea0a2a; } .cont-tit .btit b { font-weight: 400; color: #999; font-size: 30px; font-weight: 600; } .cont-tit .stit { margin-top: 50px; margin-bottom: 130px; } .cont-tit .stit>li { margin-bottom: 40px; font-size: 17px; font-weight: 300; line-height: 1.7em; color: #444; } .cont-tit .stit>li:last-child { margin-bottom: 0; } @media only screen and (max-width:480px) { .slide-wrap .slide-img { padding-bottom: 30px; } .slide-wrap .slide-img .list { margin-right: 20px;} .slide-wrap .slide-img .list img { height:255px; } .slide-wrap .slide-img .list .btxt { font-size: 16px; } .slide-wrap .slide-img .list .stxt { font-size: 14px; } } /* ===================================== history-wrap ===================================== * .history-wrap{position:relative; padding-bottom:100px;} .history-wrap .logo{} .history-wrap .logo ul{margin:0 -1%} .history-wrap .logo ul:after{display:block; content:"";clear:both} .history-wrap .logo li{float:left; width:23%; margin:0 1%} .history-wrap .logo li a{display:flex;align-items: center; justify-content: center; height:200px; border:1px solid #dedede} .history-wrap .logo li div{width:100%;text-align:center;} .history-wrap .logo li div img{width:100%; max-width:260px;} @media only screen and (max-width:1260px) { } @media only screen and (max-width:1200px) { .history-wrap{ padding-bottom:70px;} .history-wrap .logo li a{height:160px;} } @media only screen and (max-width:999px) { .history-wrap .logo li a{height:120px;} } @media only screen and (max-width:680px) { .history-wrap{ padding-bottom:30px;} .history-wrap .logo li{width:48%; margin:0 1%} .history-wrap .logo li:nth-child(n+3){margin-top:2%} .history-wrap .logo li a{height:90px;} .history-wrap .logo li div img{max-width:220px;} } @media only screen and (max-width:480px) { .history-wrap .logo li a{height:70px;} } .history-wrap .list{margin-top:50px; position:relative;overflow:hidden;} .history-wrap .list:before{width:1px;height: calc(100% - 20px); background:#d9d9d9; z-index:1;position:absolute; left:50%;top:20px; display:block; content:"";-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform: translateX(-50%);transform: translateX(-50%);} .history-wrap .list:after{width:9px;height:9px;border-radius:100%;background:#999; z-index:2; position:absolute; left:50%; bottom:0; display:block; content:""; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform: translateX(-50%);transform: translateX(-50%);} .history-wrap .list .vc{position:relative; z-index:55;opacity:1;-webkit-transform: translateY(0); -moz-transform: translateY(0);-ms-transform: translateY(0); -o-transform: translateY(0);transform: translateY(0);} .history-wrap .list .vc:before{width:1px;height:0;background:#3e7ddb; display:block;content:"";position:absolute; left:50%; top:20px;-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: height 4s ease-out;-moz-transition: height 4s ease-out;-o-transition: height 4s ease-out;transition: height 4s ease-out;} .history-wrap .list .vc:first-child:before{top:20px;} .history-wrap .list .vc:nth-child(n+2){padding-bottom:90px;} .history-wrap .list .vc:last-child:after{opacity:0;width:9px;height:9px;border-radius:100%;background:#3e7ddb; position:absolute; left:50%; bottom:0; display:block; content:""; z-index:999; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: opacity 0.3s ease-out;-moz-transition: opacity 0.3s ease-out;-o-transition: opacity 0.3s ease-out;transition: opacity 0.3s ease-out;} .history-wrap .list .vc.aos-animate:before{height:calc(100% + 80px);transition-delay: 0.5s;} .history-wrap .list .vc.aos-animate:first-child:before{} .history-wrap .list .vc.aos-animate:last-child:after{opacity:1;transition-delay: 0s;} .history-wrap .list .item{padding-left:54%; position:relative;} .history-wrap .list .item:nth-child(even){padding-right:54%; padding-left:0;text-align:right;} .history-wrap .list .item.c02{margin-top:70px;} .history-wrap .list .item.c03{margin-top:70px;} .history-wrap .list .item.c04{margin-top:70px;} .history-wrap .list .item.c05{margin-top:70px;} .history-wrap .list .item.c06{margin-top:70px;} .history-wrap .list .item.c07{margin-top:70px;} .history-wrap .list .item.c08{margin-top:70px;} .history-wrap .list .item.c09{margin-top:70px;} .history-wrap .list .item.c10{margin-top:70px;} .history-wrap .list .year{font-size:48px; font-weight:300; color:#000; letter-spacing:-0.03em;line-height:41px; font-family:"Roboto";} .history-wrap .list .year.active{font-weight:400} .history-wrap .list .year:before{width:30px; left:50%; top:20px;height:1px;background:#d9d9d9; display:block;content:""; position:absolute; z-index:-1;} .history-wrap .list .item:nth-child(even) .year:before{left:auto; right:50%} .history-wrap .list ul{margin-top:20px} .history-wrap .list ul:before{width:21px;height:21px; position:absolute; left:50%; box-sizing:border-box;top:10px;border:1px solid #aec9f2;background:#fff; z-index:1; border-radius:100%; display:block; content:""; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform: translateX(-50%);transform: translateX(-50%);} .history-wrap .list ul:after{width:9px;height:9px; position:absolute; left:50%; top:16px;background:#3e7ddb; border-radius:100%; z-index:2; display:block; content:""; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform: translateX(-50%);transform: translateX(-50%);} .history-wrap .list li{position:relative; padding-left:55px} .history-wrap .list li:nth-child(n+2){margin-top:10px;} .history-wrap .list li .btxt{font-size:16px; color:#000; line-height:1.4em; position:absolute; left:0; top:0;} .history-wrap .list li .stxt{font-size:16px; color:#777; line-height:1.6em; word-break: keep-all; font-weight:300} .history-wrap .list li .stxt strong{font-size:16px; color:#000; line-height:1.4em; word-break: keep-all; font-weigh:400} .history-wrap .list .item:nth-child(even) li{padding-right:55px; padding-left:0;} .history-wrap .list .item:nth-child(even) li .btxt{left:auto; right:0;} @media only screen and (max-width:1260px) { .history-wrap .list .year{font-size:41px;} } @media only screen and (max-width:1200px) { .history-wrap .list{margin-top:100px;} .history-wrap .list .year{font-size:34px;} .history-wrap .list ul{margin-top:15px} .history-wrap .list li{padding-left:45px;} .history-wrap .list li .btxt{font-size:15px;} .history-wrap .list li .stxt{font-size:15px;} .history-wrap .list .item{padding-left:56%} .history-wrap .list .item:nth-child(even){padding-right:56%;} .history-wrap .list .item:nth-child(even) li{padding-right:45px} } @media only screen and (max-width:999px) { .history-wrap .list .item.c02{margin-top:50px;} .history-wrap .list .item.c03{margin-top:50px;} .history-wrap .list .item.c04{margin-top:50px;} .history-wrap .list .item.c05{margin-top:50px;} .history-wrap .list .item.c06{margin-top:50px;} .history-wrap .list .item.c07{margin-top:50px;} .history-wrap .list .item.c08{margin-top:50px;} .history-wrap .list .item.c09{margin-top:50px;} .history-wrap .list .item.c10{margin-top:50px;} .history-wrap .list{margin-top:70px;} .history-wrap .list ul{margin-top:10px} .history-wrap .list li{} .history-wrap .list li .btxt{font-size:14px;} .history-wrap .list li .stxt{font-size:14px;} .history-wrap .list .year{font-size:29px} } @media only screen and (max-width:680px) { .history-wrap .list{margin-top:30px;} .history-wrap .list:before{left:12px;} .history-wrap .list:after{left:12px;} .history-wrap .list .item.c02{margin-top:30px;} .history-wrap .list .item.c03{margin-top:30px;} .history-wrap .list .item.c04{margin-top:30px;} .history-wrap .list .item.c05{margin-top:30px;} .history-wrap .list .item.c06{margin-top:30px;} .history-wrap .list .item.c07{margin-top:30px;} .history-wrap .list .item.c08{margin-top:30px;} .history-wrap .list .item.c09{margin-top:30px;} .history-wrap .list .item.c10{margin-top:30px;} .history-wrap .list .item{padding-left:50px; position:relative;} .history-wrap .list .item:nth-child(even){padding-right:0; padding-left:50px;text-align:left;} .history-wrap .list .item:nth-child(even) li{padding-right:0; padding-left:45px} .history-wrap .list .item:nth-child(even) li .btxt{left:0; right:auto;} .history-wrap .list .year{font-size:24px; line-height:30px;} .history-wrap .list .year:before{left:12px; top:15px;} .history-wrap .list .item:nth-child(even) .year:before{left:12px; right:auto} .history-wrap .list .vc:before{left:12px;-webkit-transform: translateX(0); -moz-transform: translateX(0);-ms-transform: translateX(0); -o-transform: translateX(0);transform: translateX(0);} .history-wrap .list .vc:last-child:after{left:12px;bottom:1px;} .history-wrap .list ul:before{left:2px; top:5px; -webkit-transform: translateX(0); -moz-transform: translateX(0);-ms-transform: translateX(0); -o-transform: translateX(0);transform: translateX(0);} .history-wrap .list ul:after{ left:8px; top:11px; -webkit-transform: translateX(0); -moz-transform: translateX(0);-ms-transform: translateX(0); -o-transform: translateX(0);transform: translateX(0);} } @media only screen and (max-width:480px) { .history-wrap .list .year{font-size:21px} .history-wrap .list li .btxt{font-size:13px;} .history-wrap .list li .stxt{font-size:13px;} } /* ====================================================== .greeting =========================================================*/ .greeting {position:relative;padding-right:50%; padding-top: 50px;} .greeting:after {content:"";width:180px;height:1px;background:#111;position:absolute;top:0;left:0;display:block;} .greeting .img {position:absolute;width:581px;right:0;top:70px;} .greeting .img img {width:100%;} .greeting .btit {font-weight:600;color:#222;font-size:28px;letter-spacing:-0.05em;line-height:40px;} .greeting .con {font-size:16px;color:#666;line-height:170%;letter-spacing:-0.05em;} .greeting .btxt {font-size:28px;font-weight:600;margin-top:30px;padding-bottom:10px;color:#111;line-height:40px;} .greeting .sign {display:inline-block;font-size:19px;color:#222;background:url(../img/Content/greeting-sign.jpg) no-repeat right center;line-height:63px;padding-right:180px;} .greeting .sign strong {font-weight:600;} .greeting .ceo {border:1px solid #fff;width:150px;height:150px;position:absolute;left:87px;bottom:23%;color:#fff;display:table} .greeting .ceo span {display:table-cell;vertical-align:middle;text-align:center;font-size:16px;line-height:170%} .greeting .ceo span strong {display:block;font-size:22px;font-weight:600;letter-spacing:-0.01em;} @media only screen and (max-width:1200px){ .greeting {padding-right:50%;} .greeting .img {width:45%;} } @media only screen and (max-width:980px){ .greeting .ceo {width:120px;height:120px;left:10%;bottom:10%;} } @media only screen and (max-width:800px){ .greeting {padding-right:0;} .greeting:after {display:none;} .greeting .img {float:right;position:relative;margin-left:30px;} .greeting .ceo {width:80px;height:80px;} } @media only screen and (max-width:480px){ .greeting {padding-top: 0px;} .greeting .thick {font-size:22px;line-height:1.4;} .greeting .con {font-size:14px;} .greeting .btxt {font-size:16px;} .greeting .img {float:none;width:100%;margin-left:0;margin-bottom:40px; top:0px;} .greeting .sign {padding-right:0;padding-bottom:50px;background-position:0 bottom} } @media only screen and (max-width:360px){ .greeting .ceo {width:100px;height:100px;} } /* ===================================== facility-top 설비현황 ===================================== */ .facility-top { position: relative; min-height: 590px; } .facility-top:after { content: ""; position: absolute; left: 50%; top: 0; background: #f5f5f5; width: 2000px; height: 100%; display: block; margin-left: -1000px; z-index: -1; } .facility-top .img-wrap { position: absolute; left: 50%; top: 0; height: 590px; } .facility-top .con .btxt { color: #222; font-size: 36px; letter-spacing: -0.01em; font-weight: 600; padding-top: 180px; margin-bottom: 30px; text-transform: uppercase; line-height: 140%; } .facility-top .con .stxt { color: #555; font-size: 17px; line-height: 180%; letter-spacing: -0.04em; font-weight: 400; margin-bottom: 50px; } .facility-top .con ul { overflow: hidden; } .facility-top .con li { padding-left: 104px; color: #333; font-size: 16px; position: relative; margin: 6px 0 } .facility-top .con li strong { position: absolute; left: 0; top: 0; display: block; width: 100px; font-weight: 600; line-height: 150%; padding-left: 0px; } .facility-top .con li strong.c02 { letter-spacing: 0.85em; } .facility-top .con li strong.c03 { letter-spacing: 0.07em; } .facility-top .con li strong.c04 { letter-spacing: 0.04em; } .facility-top .con li span { display: block; line-height: 150% } @media only screen and (max-width:1400px) { .facility-top .img-wrap { height: auto; bottom: 60px; top: auto } .facility-top .img-wrap img { max-width: 100%; } } @media only screen and (max-width:1200px) { .facility-top { min-height: initial; padding: 60px 0; } .facility-top .con { padding-right: 55%; } .facility-top .con .btxt { padding-top: 0; } } @media only screen and (max-width:800px) { .facility-top .con { padding-right: 0; } .facility-top .img-wrap { position: relative; bottom: auto; left: 0; top: auto; margin-top: 30px; } } @media only screen and (max-width:640px) { .facility-top .con li { float: none; width: 100%; padding: 0 15px 0 90px; } } @media only screen and (max-width:480px) { .facility-top { padding: 40px 0; } .facility-top .con .btxt { font-size: 20px; margin-bottom: 15px; } .facility-top .con .stxt { font-size: 15px; line-height: 26px; margin-bottom: 18px; } .facility-top .con .stxt br { display: none; } .facility-top .con li { font-size: 14px; } } /* ===================================== facility-list 설비현황 ===================================== */ .facility-list { overflow: hidden; padding: 0px 0 } .facility-list li { width: 47.8%; margin-left: 4%; float: left; margin-bottom: 4%; border: 1px solid #ddd; } .facility-list li.c-01 { margin-left: 0 } .facility-list li img { width: 100%; } .facility-list li span { border: 0px solid #ddd; display: block; } .facility-list li span.btxt { background: #1e2d5e; border-top: 1px solid #1e2d5e; text-align: center; font-size: 20px; line-height: 130%; padding: 30px 0 10px; letter-spacing: -0.03em; color: #fff; line-height: 130%; font-weight: 500; font-family: "Roboto"; } .facility-list li span.txt { background: #1e2d5e; border-top: none; text-align: center; font-size: 15px; color: #ddd; line-height: 130%; padding-bottom: 30px; font-family: "Roboto";} .facility-list li.c-02 { width: 49%; margin-left: 2% } .facility-list li.c-01.c-02 { margin-left: 0 } @media all and (max-width:740px) { .facility-list li { width: 49%; margin-left: 0%; float: left; margin-bottom: 4% } .facility-list li:nth-child(even) { float: right } .facility-list li span.btxt { background: #f9f9f9; border-top: 1px solid #ddd; text-align: center; font-size: 17px; line-height: 130%; padding: 30px 0 10px; letter-spacing: -0.03em; color: #111; line-height: 130%; font-weight: 500 } } @media all and (max-width:420px) { .facility-list li { width: 100%; margin-left: 0%; float: left; margin-bottom: 4% } .facility-list li:nth-child(even) { float: right } .facility-list li.c-02 { width: 100%; margin-left: 0% } .facility-list li span.btxt { background: #f9f9f9; border-top: 1px solid #ddd; text-align: center; font-size: 16px; line-height: 130%; padding: 20px 0 10px; letter-spacing: -0.03em; color: #111; line-height: 130%; font-weight: 500 } } /* ===================================== quality-list 품질경영 ===================================== */ .quality-list { position: relative; padding-left: 50%; overflow: hidden } .quality-list .img-wrap { position: absolute; left: 0; top: 0; width: 610px; height: 560px; } .quality-list .con .btxt { font-size: 30px; letter-spacing: -0.03em; color: #222; padding-bottom: 25px; line-height: 130%; font-weight: 600 } .quality-list .con .btxt span { display: inline-block; vertical-align: top; color: #008889; border: 1px solid #008889; border-radius: 20px 20px; padding: 0 15px; margin-right: 10px; line-height: 32px; font-size: 15px; } .quality-list .con .stxt { font-size: 17px; letter-spacing: -0.03em; color: #555; padding-bottom: 40px; line-height: 30px; font-weight: 400 } .quality-list .con ul { border-top: 1px solid #d7d7d7; min-height: 350px; border-bottom: 0px solid #d7d7d7; padding: 30px 0 } .quality-list .con li { padding-left: 124px; color: #333; font-size: 18px; position: relative; margin: 12px 0 } .quality-list .con li strong { font-weight: 600; line-height: 150%; display: inline-block; position: absolute; left: 0; top: 0; padding-left: 24px; } .quality-list .con li strong.c02 { letter-spacing: 0.85em; } .quality-list .con li strong.c03 { letter-spacing: 0.07em; } .quality-list .con li strong.c04 { letter-spacing: 0.01em; } .quality-list .con li strong:after { width: 3px; height: 3px; background: #5d5d5d; position: absolute; left: 10px; top: 50%; margin-top: -1px; display: block; content: ""; } .quality-list .con li span { display: block; line-height: 150% } @media only screen and (max-width:1200px) { .quality-list { padding-left: 0; } .quality-list .img-wrap { float: left; width: 45%; position: relative; left: auto; top: auto; height: auto; } .quality-list .img-wrap img { width: 100%; } .quality-list .con { float: left; width: 50%; margin-left: 5%; } .quality-list .con ul { min-height: auto; } } @media only screen and (max-width:640px) and (min-width:481px) { .quality-list .con ul { padding: 15px 0; } .quality-list .con li { padding-left: 0; } .quality-list .con li strong { position: relative; display: block; } .quality-list .con li span { padding-left: 24px; } } @media only screen and (max-width:480px) { .quality-list .img-wrap { float: none; width: 100%; margin-bottom: 30px; } .quality-list .con { float: none; width: 100%; margin-left: 0; } .quality-list .con ul { padding: 15px 0; } .quality-list .con li { font-size: 14px; padding-left: 100px; margin: 8px 0; } .quality-list .con .btxt { font-size: 20px; padding-bottom: 15px; } .quality-list .con .btxt span { display: block; width: 80px; text-align: center; margin-bottom: 10px; } .quality-list .con .stxt { font-size: 15px; padding-bottom: 20px; line-height: 24px; } } /* ===================================== quality-top 품질경영 ===================================== */ .quality-top li { position: relative; padding-bottom: 60px; margin-bottom: 60px; border-bottom: 1px solid #ddd; padding-left: 50%; text-align: left; height: 340px; } .quality-top li.last { border: none; padding-bottom: 0; margin-bottom: 0 } .quality-top li.c-02 { padding-right: 45%; padding-left: 0 } .quality-top li.c-02 .img { left: auto; right: 0 } .quality-top li .img { position: absolute; left: 0; top: 0; height: auto; } .quality-top li .btxt { display: block; color: #a5a5a5; font-size: 20px; } .quality-top li .btxt strong { font-weight: normal; color: #222; font-size: 30px; display: inline-block; margin-right: 14px; letter-spacing: -0.03em; font-weight: 600 } .quality-top li .stxt { display: block; padding-top: 40px; font-size: 17px; line-height: 30px; } @media all and (max-width:900px) { } @media all and (max-width:650px) { .quality-top li { padding-bottom: 40px; margin-bottom: 40px; height: 100%; } .quality-top li .img { position: relative; left: auto; top: auto; height: auto; text-align: center; } .quality-top li .img img { width: 100% } .quality-top li { padding-left: 0 } .quality-top li.c-02 { padding-right: 0 } .quality-top li .btxt { padding: 20px 10px 0 10px; font-size: 14px } .quality-top li .btxt strong { font-size: 18px; } .quality-top li .stxt { padding: 30px 10px 0 10px; padding-top: 20px; font-size: 14px; line-height: 20px; } .quality-top li .stxt br { display: none; } } /* ===================================== rnd-wrap02 연구실적 ===================================== */ .rnd-wrap02 { position: relative;} .rnd-wrap02 li.c-01 { padding-left: 55%; } .rnd-wrap02 li.c-02 { padding-right: 50%; } .rnd-wrap02 li.c-01.last { border-bottom: 0; padding-bottom: 0 } .rnd-wrap02 li:first-child.c-01 { padding-top: 1px; } .rnd-wrap02 li:first-child div.img { top: 0; } .rnd-wrap02 li.c-01, .rnd-wrap02 li.c-02 { position: relative; min-height: 500px; border-bottom: 1px solid #ccc; padding-top: 100px; padding-bottom: 50px; } .rnd-wrap02 li div.img { position: absolute; left: 0; top: 100px; width: 600px; height: auto; } .rnd-wrap02 li.c-02 div.img { left: auto; left: 57%; } .rnd-wrap02 li div.img img { width:100%: } .rnd-wrap02 li ul li { padding-left: 10px; } @media only screen and (max-width:1000px) { .rnd-wrap02 li div.img { width: 39% } .rnd-wrap02 li div.img img { width: 100%; } } @media only screen and (max-width:684px) { .rnd-wrap02 li.c-01 { padding-left: 0; } .rnd-wrap02 li.c-02 { padding-right: 0; } .rnd-wrap02 li div.img { position: relative; left: auto; top: auto; width: auto; margin-bottom: 15px; } .rnd-wrap02 li.c-01, .rnd-wrap02 li.c-02 { padding-top: 30px; padding-bottom: 30px; } .rnd-wrap02 li.c-02 div.img { left: auto; left: 0%; } } .rnd-txt { display: block; } .rnd-txt .btxt { color: #186bcc; font-size: 36px; display: inline-block; letter-spacing: -0.03em; font-weight: 600; padding-bottom: 20px; line-height: 46px; } .rnd-txt .stxt { display: inline-block; line-height: 30px; font-weight: 400; color: #555; font-size: 20px; letter-spacing: -0.02em; padding-bottom: 20px; } .rnd-txt .stxt02 { display: inline-block; line-height: 27px; font-weight: 600; color: #111; font-size: 22px; letter-spacing: -0.02em; padding-top: 20px; } .rnd-list { padding: 5px 0; text-align: left; } .rnd-list li, .rnd-list-li { background: url(../img/Content/blt01.png) no-repeat 1px 10px; padding-left: 15px; line-height: 150%; margin-top: 3px; margin-bottom: 3px; color: #444; letter-spacing: -0.03em; font-size: 18px; } .rnd-list-li.indent { margin-left: 13px; } @media only screen and (max-width:684px) { .rnd-txt { display: block; } .rnd-txt .btxt { font-size: 20px; letter-spacing: -0.03em; padding-bottom: 10px; padding-top: 15px; line-height: 30px;} .rnd-txt .stxt { line-height: 24px; font-size: 16px; letter-spacing: -0.02em; padding-bottom: 10px; } .rnd-txt .stxt br { display: none; } .rnd-txt .stxt02 { display: inline-block; line-height: 27px; color: #111; font-size: 15px; letter-spacing: -0.02em; padding-top: 0px; } .rnd-list { padding: 5px 0; text-align: left; } .rnd-list li, .rnd-list-li { background: url(../img/Content/blt01.png) no-repeat 1px 10px; padding-left: 15px; line-height: 150%; margin-top: 3px; margin-bottom: 3px; color: #444; letter-spacing: -0.03em; font-size: 15px; } .rnd-list-li.indent { margin-left: 13px; } } /* ===================================== rnd-wrap 연구소소개 ===================================== */ .rnd-wrap li { position: relative; padding-bottom: 60px; margin-bottom: 60px; border-bottom: 1px solid #ddd; padding-left: 0%; text-align: left; height: 600px; } .rnd-wrap li.last { border: none; padding-bottom: 0; margin-bottom: 0 } .rnd-wrap li.c-02 { padding-right: 45%; padding-left: 0 } .rnd-wrap li.c-02 .img { left: auto; right: 0 } .rnd-wrap li .img { position: absolute; right: 0; top: 0; height: auto; } .rnd-wrap li .btxt { display: block; color: #222; font-size: 30px; font-weight: 400; line-height: 40px; } .rnd-wrap li .btxt strong { color: #222; font-size: 30px; display: inline-block; letter-spacing: -0.03em; font-weight: 600; } .rnd-wrap li .stxt { display: block; padding-top: 50px; font-size: 17px; line-height: 30px; letter-spacing: -0.03em; } @media all and (max-width:900px) { } @media all and (max-width:650px) { .rnd-wrap li { padding-bottom: 40px; margin-bottom: 40px; height: 100%; } .rnd-wrap li .img { position: relative; left: auto; top: auto; height: auto; text-align: center; } .rnd-wrap li .img img { width: 100% } .rnd-wrap li { padding-left: 0 } .rnd-wrap li.c-02 { padding-right: 0 } .rnd-wrap li .btxt { padding: 20px 0px 0 0px; font-size: 18px; line-height: 28px; } .rnd-wrap li .btxt strong { font-size: 18px; } .rnd-wrap li .stxt { padding: 30px 0px 0 0px; padding-top: 20px; font-size: 14px; line-height: 24px; } .rnd-wrap li .stxt br { display: none; } /* ===================================== business 경영이념 ===================================== */ .business-bg { position: relative; min-height: 960px; text-align: center; } .business-bg:after { background: url(../img/Content/management-bg03.jpg) no-repeat center top; width: 2000px; height: 100%; display: block; content: ""; position: absolute; left: 50%; margin-left: -1000px; z-index: -1; top: 0 } .business-bg .ctit { font-size: 50px; color: #fff; padding: 140px 0 70px 0; line-height: 1; text-transform: uppercase } .business-list { overflow: hidden; width: 1400px; margin-left: 0px; } .business-list li { float: left; width: 32.2%; margin-left: 1.7%; background: #fff; padding: 70px 0 70px 0; } .business-list li:first-child { margin-left: 0; } .business-list li.bg01 { background: rgba(0,0,0,0.4); url() no-repeat 0 0; background-size: contain } .business-list li.bg02 { background: rgba(0,0,0,0.4); url() no-repeat 0 0; background-size: contain } .business-list li.bg03 { background: rgba(0,0,0,0.4); url() no-repeat 0 0; background-size: contain } .business-list li .btit { display: block; font-size: 20px; font-family: "Roboto"; color: #aaa; margin-bottom: 20px; line-height: 1.2; text-transform: uppercase } .business-list li .stxt { display: block; font-size: 30px; color: #fff; font-weight: 600 } .business-top { position: relative; min-height: 800px; text-align: center; } .business-top:after { background: url(../img/Content/management-bg02.jpg) no-repeat center top; width: 2000px; height: 100%; display: block; content: ""; position: absolute; left: 50%; margin-left: -1000px; z-index: -1; top: 0 } .business-top .ctit { font-size: 40px;/*font-family:"Robot";*/ color: #111; padding: 120px 0 70px 0; line-height: 1.4; text-transform: uppercase; letter-spacing: -1px; } .business-top .list:after { content: ''; clear: both; display: block; } .business-top .list li { float: left; width: 24%; height: 230px; margin: 0 0.5%; color: #fff; background: rgba(0,94,184,1); border-radius: 10px } .business-top .list li span { display: inline-block; font-size: 16px; padding-top: 130px; line-height: 1.4; font-family: "Roboto"; font-weight: 600; color: #aaa; } .business-top .list li span.ico01 { background: url(../img/Content/management-ico01.png) no-repeat center 53px; } .business-top .list li span.ico02 { background: url(../img/Content/management-ico02.png) no-repeat center 53px; } .business-top .list li span.ico03 { background: url(../img/Content/management-ico03.png) no-repeat center 53px; } .business-top .list li span.ico04 { background: url(../img/Content/management-ico04.png) no-repeat center 53px; } .business-top .list .divide { display: block; font-size: 24px; font-weight: 600; font-family: "Noto Sans KR"; color: #fff; } @media only screen and (min-width:1201px) { } @media only screen and (max-width:1760px) { .business-bg { min-height: auto; padding: 200px 0 300px 0; } .business-bg .ctit { padding-top: 0; } .business-list { width: 100%; margin-left: 0 } .business-list li { padding: 3.5% 0 3.5% 0; } } @media only screen and (max-width:1200px) { .business-bg:after { background-size: contain } } @media only screen and (max-width:1000px) { .business-top { min-height: auto; padding: 120px 0; } .business-top:after { background-size: contain } .business-top .ctit { padding-top: 0; } .business-top .list li { width: 22.7%; height: auto; margin: 0 0 0 3%; } .business-top .list li:first-child { margin-left: 0; } .business-top .list li span { padding: 60% 0 10% 0; background-position: center 5%; } .business-top .list li span.ico01 { background: url(../img/Content/management-ico01.png) no-repeat center 20%; } .business-top .list li span.ico02 { background: url(../img/Content/management-ico02.png) no-repeat center 20%; } .business-top .list li span.ico03 { background: url(../img/Content/management-ico03.png) no-repeat center 20%; } .business-top .list li span.ico04 { background: url(../img/Content/management-ico04.png) no-repeat center 20%; } } @media only screen and (max-width:800px) { .business-bg { padding: 80px 0 200px 0; } .business-list li .btit .divide { display: block; } .business-top { padding: 80px 0; } } @media only screen and (max-width:640px) { .business-bg { padding-bottom: 160px; } .business-bg .ctit { font-size: 40px; } .business-list li .btit { font-size: 20px; } .business-top .ctit { font-size: 40px; } .business-top .list li { width: 48.5%; margin-bottom: 3%; } .business-top .list li:nth-child(3) { margin-left: 0; } .business-top .list li span { padding-top: 35%; } } @media only screen and (max-width:480px) { .business-bg { padding: 60px 0 100px 0; } .business-bg:after { background-size: cover } .business-bg .ctit { font-size: 25px; padding-bottom: 30px; } .business-list li { float: none; width: 100%; padding: 5% 0 5% 0; margin: 20px 0 0 0; } .business-list li .btit .divide { display: inline; } .business-list li .btit { font-size: 17px; margin-bottom: 5px; } .business-list li .stxt { font-size: 16px; } .business-top { padding: 60px 0; } .business-top .ctit { font-size: 25px; } .business-top .list li span { font-size: 14px; line-height: 1.2; } .business-top .list li span.ico01, .business-top .list li span.ico02, .business-top .list li span.ico03, .business-top .list li span.ico04 { background-size: auto 30px; } } @media only screen and (max-width:360px) { .business-bg { padding: 60px 0 100px 0; } .business-bg:after { background-size: cover } .business-bg .ctit { font-size: 22px; padding-bottom: 30px; } .business-list li { float: none; width: 100%; padding: 91% 0 5% 0; margin: 20px 0 0 0; } .business-list li .btit .divide { display: inline; } .business-list li .btit { font-size: 16px; margin-bottom: 5px; } .business-list li .stxt { font-size: 15px; } .business-top .ctit { font-size: 22px; } .business-top .list li span { font-size: 13px; line-height: 1.2; } }