192 lines
11 KiB
CSS
192 lines
11 KiB
CSS
* {
|
|
box-sizing:border-box;
|
|
margin:0;
|
|
padding:0;
|
|
color:#1a1a1a;
|
|
}
|
|
|
|
body, h1, h2, h3, h4, h5 { font-family:"Pretendard", sans-serif; margin:0; }
|
|
a { cursor:pointer; color:#1a1a1a; text-decoration:none; }
|
|
a:hover, a:active, a:focus { text-decoration:none; }
|
|
|
|
p { margin:0; }
|
|
dl, dt, dd, ul, ol, li { list-style:none; margin:0; }
|
|
img { border:none; vertical-align:top; }
|
|
|
|
input[type="text"], input[type="password"], input[type="tel"] { padding: 0 5px; }
|
|
input[type="button"], input[type="submit"], button { cursor:pointer; -webkit-appearance:none; }
|
|
input:focus, button:focus, textarea { outline:none; }
|
|
|
|
em, address { font-style:normal; }
|
|
legend, caption { position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0; }
|
|
textarea { overflow:auto; resize:none; border:1px solid #dadbdc; border-radius:5px; }
|
|
table { width:100%; border-collapse:collapse; border-spacing:0; }
|
|
|
|
/* Placeholder styles */
|
|
::-webkit-input-placeholder { color:#999; }
|
|
::-moz-placeholder { color:#999; }
|
|
:-ms-input-placeholder { color:#999; }
|
|
input:-moz-placeholder { color:#999; }
|
|
|
|
/* Layout */
|
|
.elp { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.mlp { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
|
|
|
|
/* 서브페이지 */
|
|
/* ========================================
|
|
MAIN CONTENT CSS
|
|
======================================== */
|
|
.petit_center{width:100px;}
|
|
.petit_center img{width:100px;}
|
|
|
|
/****************************************
|
|
* 서브페이지 공통 css
|
|
*****************************************/
|
|
.project_wrap .same { display:flex; }
|
|
.project_wrap .same section:not(.main_img) { padding-bottom:150px; }
|
|
|
|
/********** aside **********/
|
|
.project_wrap .same aside { width:500px; background:url('/image/web/aside.jpg')repeat-y; }
|
|
.project_wrap .same aside ul { position:fixed; top:180px; left:310px; }
|
|
.project_wrap .same aside ul li { margin-top:20px; }
|
|
.project_wrap .same aside ul li.first { margin-top:0; }
|
|
.project_wrap .same aside ul li a { width:100%; height:50px; line-height:50px; font-size:18px; font-weight:300; color:#6D5E50; display:inline-block; }
|
|
.project_wrap .same aside ul li a.active { font-weight:700; }
|
|
|
|
/********** main **********/
|
|
.project_wrap .same main { width:calc(100% - 500px); }
|
|
.project_wrap .same main .inner_wrap { width:90%; }
|
|
.project_wrap .same main section h3 { font-size:34px; font-weight:300; text-align:center; }
|
|
.project_wrap .same main section h3 span { font-weight:700; }
|
|
|
|
/* main_img */
|
|
.project_wrap .same main .main_img { position:relative; }
|
|
.project_wrap .same main .main_img img { width:100%; }
|
|
.project_wrap .same main .main_img .text_box { width:100%; position:absolute; bottom:0; left:0; display:flex; }
|
|
.project_wrap .same main .main_img .text_box p { margin-top:10px; color:#fff; }
|
|
.project_wrap .same main .main_img .text_box p.sub_title { font-size:23px; }
|
|
.project_wrap .same main .main_img .text_box p.sub_title span { font-weight:600; }
|
|
.project_wrap .same main .main_img .text_box p.title { font-size:52px; font-weight:700; }
|
|
.project_wrap .same main .main_img .text_box p.sub_text { font-size:15px; }
|
|
.project_wrap .same main .main_img .text_box > div { padding:80px 50px; }
|
|
.project_wrap .same main .main_img .text_box p span.black { color:black; }
|
|
|
|
/* content1 */
|
|
.project_wrap .same main .content1 { background:#FAFAFA; }
|
|
.project_wrap .same main .content1 .title { font-size:34px; font-weight:700; }
|
|
.project_wrap .same main .content1 .sub_title { margin-top:50px; font-size:28px; font-weight:600; }
|
|
.project_wrap .same main .content1 .sub_text { margin-top:10px; font-size:20px; word-break:keep-all; }
|
|
|
|
/* content2 */
|
|
.project_wrap .same main .content2 ul { margin-top:80px; display:flex; justify-content:center; }
|
|
.project_wrap .same main .content2 ul li { width:240px; height:240px; border-radius:50%; border:1px solid #000; margin-left:30px; display:flex; align-items:center; justify-content:center; }
|
|
.project_wrap .same main .content2 ul li p { font-size:25px; text-align:center; }
|
|
.project_wrap .same main .content2 ul li:first-child { margin-left:0; }
|
|
.project_wrap .same main .content2 ul li:nth-child(odd) { background:#000; }
|
|
.project_wrap .same main .content2 ul li:nth-child(odd) p { color:#fff; }
|
|
|
|
/* content3 */
|
|
.project_wrap .same main .content3 { background:#F6F6F6; }
|
|
.project_wrap .same main ul.box_list { margin-top:80px; }
|
|
.project_wrap .same main ul.box_list li { padding:20px 0; margin-top:20px; border-radius:10px; border:2px solid #e6e6e6; display:flex; align-items:center; position:relative; background:#fff; }
|
|
.project_wrap .same main ul.box_list li::after { content:''; display:block; width:2px; height:100%; background:#e6e6e6; position:absolute; top:0; left:80px; }
|
|
.project_wrap .same main ul.box_list li div { width:80px; height:100%; position:relative; }
|
|
.project_wrap .same main ul.box_list li div img { width:30px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
|
|
.project_wrap .same main ul.box_list li p { padding-left:20px; font-size:24px; word-break:keep-all; }
|
|
.project_wrap .same main ul.box_list li p span { font-weight:700; }
|
|
|
|
/* content4 */
|
|
.project_wrap .same main .content4 { padding-bottom:0; }
|
|
.project_wrap .same main .content4 ul.box_list li div img { width:50px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
|
|
|
|
/* content4_1 */
|
|
.project_wrap .same main .content4_1 { padding-bottom:0; }
|
|
.project_wrap .same main .content4_1 ul.box_list li div img { width:50px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
|
|
|
|
/* content5 */
|
|
.project_wrap .same main .content5 ul.box_list li p { line-height:45px; }
|
|
.project_wrap .same main .content5 ul.box_list li div img { width:50px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
|
|
|
|
/* content6 */
|
|
.project_wrap .same main .content6 { padding-bottom:0; }
|
|
.project_wrap .same main .img_cont { padding-top:30px; margin-top:120px; }
|
|
.project_wrap .same main .img_cont .inner_wrap > p { font-size:34px; }
|
|
.project_wrap .same main .img_cont .inner_wrap > p span { font-weight:700; }
|
|
.project_wrap .same main .img_cont ul { margin-top:80px; display:flex; justify-content:center; flex-wrap:wrap; }
|
|
.project_wrap .same main .img_cont ul li { width:530px; margin-left:20px; padding:50px; border-radius:30px; box-shadow:0 1px 5px #ddd; text-align:center; }
|
|
.project_wrap .same main .img_cont ul li:nth-child(odd) { margin-left:0; }
|
|
.project_wrap .same main .img_cont ul li:nth-child(n+3) { margin-top:20px; }
|
|
.project_wrap .same main .img_cont ul li .text_box { margin-top:50px; }
|
|
.project_wrap .same main .img_cont ul li .text_box p { text-align:center; }
|
|
.project_wrap .same main .img_cont ul li .text_box p.sub_title { font-size:23px; color:#E74455; }
|
|
.project_wrap .same main .img_cont ul li .text_box p.title { margin-top:10px; font-size:42px; font-weight:700; }
|
|
.project_wrap .same main .img_cont ul li .text_box p.sub_text { margin-top:30px; font-size:29px; }
|
|
|
|
/* Main Content 반응형 - 모바일 */
|
|
@media only screen and (max-width:768px){
|
|
.petit_center{display:none;}
|
|
.project_wrap section:not(.main_img) { padding-top:50px; }
|
|
|
|
/****************************************
|
|
* 서브페이지 공통 css
|
|
*****************************************/
|
|
.project_wrap .same aside { display:none; }
|
|
.project_wrap .same main { width:100%; }
|
|
.project_wrap .same section:not(.main_img) { padding-top:50px; }
|
|
.project_wrap .same section:not(.main_img) { padding-bottom:50px; }
|
|
.project_wrap .same main section h3 { font-size:14px; }
|
|
|
|
/* main_img */
|
|
.project_wrap .same main .main_img .text_box { justify-content:center; text-align:center; bottom:40px; }
|
|
.project_wrap .same main .main_img .text_box p { margin-top:5px; }
|
|
.project_wrap .same main .main_img .text_box > div { padding:0; }
|
|
.project_wrap .same main .main_img .text_box p.sub_title { font-size:12px; }
|
|
.project_wrap .same main .main_img .text_box p.title { font-size:26px; }
|
|
.project_wrap .same main .main_img .text_box p.sub_text { font-size:12px; }
|
|
|
|
/* content1 */
|
|
.project_wrap .same main .content1 .title { font-size:22px; text-align:center; }
|
|
.project_wrap .same main .content1 .sub_title { margin-top:10px; font-size:16px; text-align:center; }
|
|
.project_wrap .same main .content1 .sub_text { margin-top:5px; font-size:14px; text-align:center; }
|
|
.project_wrap .same main .content1 .sub_text br { display:none; }
|
|
|
|
/* content2 */
|
|
.project_wrap .same main .content2 ul { margin-top:40px; flex-wrap:wrap; }
|
|
.project_wrap .same main .content2 ul li { width:150px; height:150px; margin-left:10px; }
|
|
.project_wrap .same main .content2 ul li:nth-child(odd) { margin-left:0; }
|
|
.project_wrap .same main .content2 ul li:nth-child(n+3) { margin-top:10px; }
|
|
.project_wrap .same main .content2 ul li:nth-child(3) { margin-left:10px; order:3; }
|
|
.project_wrap .same main .content2 ul li:nth-child(4) { margin-left:0; }
|
|
.project_wrap .same main .content2 ul li p { font-size:16px; }
|
|
.project_wrap .same main .content4 { padding-bottom:0; }
|
|
.project_wrap .same main .content4_1 { padding-bottom:0; }
|
|
.project_wrap .same main .content6 { padding-bottom:0; }
|
|
|
|
/* box_list */
|
|
.project_wrap .same main ul.box_list { margin-top:40px; }
|
|
.project_wrap .same main ul.box_list li { padding:10px 5px; margin-top:10px; border:1px solid #e6e6e6 }
|
|
.project_wrap .same main ul.box_list li::after { display:none; }
|
|
.project_wrap .same main ul.box_list li p { padding-left:10px; font-size:14px; }
|
|
.project_wrap .same main ul.box_list li div { width:auto; }
|
|
.project_wrap .same main ul.box_list li div img { width:20px; position:static; transform:none; }
|
|
.project_wrap .same main .content4 ul.box_list li div img { width:20px; position:static; transform:none; }
|
|
.project_wrap .same main .content4_1 ul.box_list li div img { width:20px; position:static; transform:none; }
|
|
.project_wrap .same main .content5 ul.box_list li div img { width:20px; position:static; transform:none; }
|
|
.project_wrap .same main .content5 ul.box_list li p { line-height:22px; word-break:keep-all; }
|
|
|
|
/* img_cont */
|
|
.project_wrap .same main .img_cont{ margin-top:0; padding-top:50px; }
|
|
.project_wrap .same main .img_cont .inner_wrap > p { font-size:14px; text-align:center; }
|
|
.project_wrap .same main .img_cont ul { margin-top:40px; }
|
|
.project_wrap .same main .img_cont ul li { width:calc((100% - 10px) / 2); padding:15px; margin-left:10px; border-radius:10px; }
|
|
.project_wrap .same main .img_cont ul li:nth-child(n+3) { margin-top:10px; }
|
|
.project_wrap .same main .img_cont ul li img { width:100%; }
|
|
.project_wrap .same main .img_cont ul li .text_box { margin-top:15px; }
|
|
.project_wrap .same main .img_cont ul li .text_box p.sub_title { font-size:12px; line-height:13px; }
|
|
.project_wrap .same main .img_cont ul li .text_box p.title { margin-top:5px; font-size:18px; }
|
|
.project_wrap .same main .img_cont ul li .text_box p.sub_text { margin-top:5px; font-size:12px; word-break:keep-all; }
|
|
.project_wrap .same main .img_cont ul li .text_box p.sub_text br { display:none; }
|
|
}
|
|
|
|
|