/* Reset CSS */ * { margin:0; padding:0; box-sizing:border-box; } ol, ul { list-style:none; margin: 0; } h1, .h1 { font-size: 3rem; font-weight: 500; } h2, .h2 { font-size: 2.5rem; font-weight: 500; } h3, .h3 { font-size: 2.0rem; font-weight: 500; } h4, .h4 { font-size: 1.5rem; font-weight: 500; } h5, .h5 { font-size: 1.2rem; font-weight: 500; } h6, .h6 { font-size: 1rem ; font-weight: 500; } strong { font-weight:500; } a { text-decoration: none; } a:hover { text-decoration: none; } p { margin: 0; } label { font-weight: 600; } /* Basic Style */ html { font-size:16px; } body { font-size:1rem; font-family:'Inter', 'Noto Sans Korean Hestia', sans-serif; font-weight:300; color:#333; } /* Basic Layout */ #header { display:block; position:fixed; z-index:7000; top:0; left:0; width:100%; background:rgba(255,255,255,1); box-shadow:0px 6px 6px -3px rgba(100,100,100,0.3); } #header::before { content: ''; position: absolute; width: 100%; top:0px; height:0px; background: #fff; z-index:1; transition: height .2s ease-in-out; } #header .header-in { position: relative; display:flex; justify-content:space-between; padding: 0 50px 0 50px; max-width:1920px; height:auto; /* border-bottom:1px solid rgba(0,0,0,.1); */ transition:border .5s ease; } #header #logo { position: relative; z-index:2; width: 300px; height: 70px; display: flex; align-items: center; padding: 5px 0; } #header #logo .inner { width: 100%; height: 100%; display: flex; align-items: center; } #header #logo .inner span { font-size: 2rem; font-weight: 600; color: #000; } #header #logo .inner span.small { font-size: 1.5rem; } #header #logo.ratio--1 { width: 90px; } #header #logo.ratio--2 { width: 140px; } #header #logo.ratio--3 { width: 200px; } #header #logo.ratio--4 { width: 250px; } #header #member-mobile { display: none; } #header #gnb .menu { position: relative; z-index:2; padding-top:.5rem; font-family: NanumSquare; } #header #gnb .menu > ul { display:flex; } #header #gnb .menu > ul > li { margin:0 0.25rem; position: relative; } #header #gnb .menu > ul .link1 { position: relative; display: block; font-size: 1.3rem; font-weight: bold; line-height:3.5rem; letter-spacing: -0.02em; color: #000; padding:0 1.75rem; transition:color .4s ease; } #header #gnb .menu > ul .link1:hover { color:rgb(243,115,33); } /* #header #gnb .menu > ul .link1::after { position: absolute; content: ''; bottom: -5px; left: 50%; width: 0px; height: 3px; background: rgb(243,115,33); transition: all .5s ease; } */ #header #gnb .menu > ul > li .link1::after { position: absolute; content: ''; bottom: -5px; left: 50%; width: 0px; height: 3px; background: rgb(243,115,33); transition: all .3s ease; } #header #gnb .menu > ul > li:hover .link1::after { left: 0; width: 100%; } #header #gnb .menu2 { display:none; position: absolute; left:0; top:70px; width: 100%; border:0px solid #f00; padding-top: 1rem; visibility: hidden; opacity: 0; transition:all .5s ease; } #header #gnb .menu2 ul { } #header #gnb .menu2 ul li { text-align: center; margin-bottom: 0.6rem; } #header #gnb .menu2 ul li a { display: block; font-weight: 400; line-height: 22px; font-size: 1.0rem; letter-spacing: -0.06em; color:#444; } #header #gnb .menu2 ul li.small-1 a { font-size: .9rem; letter-spacing: -0.1em; } #header #gnb .menu2 ul li.small-2 a { font-size: .8rem; letter-spacing: -0.15em; } #header #gnb .menu2 ul li.small-3 a { font-size: .725rem; letter-spacing: -0.2em; } #header #gnb .menu2 ul li a:hover { color:rgb(243,115,33); } #header.mobile #gnb .menu > ul .link1 { line-height:2.5rem; background: #eee; padding: 0 0 0 1rem; margin-bottom: .5rem; } #header.mobile #gnb .menu2 { padding-left: 1rem; } #header.mobile #gnb .menu2 ul li a { font-size: 1.1rem; color: #000; padding-left: .5rem; padding-right: 0; } #header.mobile #gnb .menu2 ul li.small-1 a { font-size: 1.1rem; letter-spacing: -0.06em; } #header.mobile #gnb .menu2 ul li.small-2 a { font-size: 1.1rem; letter-spacing: -0.06em; } #header.mobile #gnb .menu2 ul li.small-3 a { font-size: 1.1rem; letter-spacing: -0.06em; } #header #member { display: flex; align-items: center; } #header #member .inner { display: flex; } #header #member .inner .more { display: flex; } #header #member .inner .more a { display: flex; justify-content: center; align-items: center; font-size: 1.75rem; color: #333; margin-right: .125rem; width: 50px; height: 50px; background: #fafafa; border-radius: 100%; } #header #member .inner .more a:hover { background: #e9630f; background: #444; color: #fff; } #header #member .inner .more a:last-child { margin-right: 0; } #header #btn-mobile { position: relative; display:none; overflow:hidden; z-index:4; } #header #btn-mobile-open { position: relative; display: block; border:0; background:#706f50; background:none; width:34px; height:34px; } #header #btn-mobile-open span { display:block; position: absolute; left:0; width:100%; height:4px; background:rgb(243,115,33); border-radius:5px; opacity:1; transition:.25s ease-in-out; } #header #btn-mobile-open span:nth-child(1) { top:3px; transform:rotate(0deg); } #header #btn-mobile-open span:nth-child(2) { top:15px; } #header #btn-mobile-open span:nth-child(3) { top:27px; transform:rotate(0deg); } #header.active { /* background:none; */ } #header.active::before { top:0; height:300px; box-shadow:0px 6px 4px -6px rgba(0,0,0,0.3); } #header.active.d2-max-6::before { height:300px; } #header.active.d2-max-5::before { height:280px; } #header.active.d2-max-4::before { height:260px; } #header.active .header-in { /* border-bottom:1px solid #ddd; */ z-index:3; } #header.active #gnb .menu2.open { display: block; visibility: visible; opacity: 1; } #header.active #global .more { border:1px solid #666; } #header.active #global .more a { color: #666; } #header.active #global .more a.default::after { border-left:1px solid #666; border-bottom:1px solid #666; } #header.mobile { overflow: hidden; } #header.mobile #logo { } /* 본문 영역 */ /* 고정형 #header와 겹치지 않기 위해 #wrapper에 상단 padding을 준다. */ #wrapper { padding-top:71px; padding-top: 0; padding-bottom:60px; margin:0 auto; } body.index #wrapper { padding-top:0; } #wrapper::after { display:block; clear:both; content:''; } #content { padding-top: 100px; } #visual { position: relative; width: 100%; height: 0; } #visual.has-1 { padding-bottom:31.97916%; } #visual.has-2 { padding-bottom:56.25%; } #visual.has-3 { padding-bottom:43.33333%; } #visual .in { position: absolute; width: 100%; height: 100%; z-index:1; overflow:hidden; } #visual .visuals { width: 100%; height: 100%; } #visual .visuals .visual-slide-item { position: relative; height: 100%; } #visual .slick-list { height: inherit !important; } #visual .slick-track { height: inherit !important; } #visual .screen { position: absolute; width:100%; height:100%; top:0; left:0; z-index:2; background:rgba(134, 192, 251, .2); } #visual .text { position: absolute; width:100%; height:100%; left: 0; top: 0; z-index:2; color: #fff; display:flex; justify-content: center; align-items:center; padding-top: 5%; } #visual .text .t1 { font-size: 4.0rem; font-weight: 500; letter-spacing: -0.075em; text-shadow: 1px 1px 4px rgba(50, 50, 50, 1); text-align: center; } #visual .visuals .visual-dots { position: absolute; height:30px; bottom:2.5%; left: 50%; display:flex; justify-content:center; z-index: 10; transform: translateX(-50%); } #visual .visuals .visual-dots li { margin-right: 4px; } #visual .visuals .visual-dots li button { text-indent:-9999rem; background: #eee; border:none; width: 16px; height: 16px; border-radius:16px; transition:width .3s ease; border: 1px solid #999; } #visual .visuals .visual-dots li.slick-active button { width:64px; background:#f0b666; border: 1px solid #c67a13; } /* Main : BBS */ .index-news {} .index-news .in { padding: 4rem 0; } .index-news .sc-title { text-align: center; margin-bottom: 2rem; } .index-news .sc-title .title { font-size: 3rem; font-weight: 600; } .index-news .sc-title .sub { font-size: 1.2rem; font-weight: 400; } .index-news .part-wrap { width: 1200px; margin: 0 auto; display:flex; justify-content:space-between; } .index-news .part { width: 100%; } .index-news .part h3 { margin-bottom: 0.5rem; padding-left: 1rem; } .index-news .part .more { margin-bottom: 0.5rem; text-align: right; } .index-news .part .more a { color:#555; } .index-news .part .more a:hover { text-decoration: underline; } .index-news .news { border-top:2px solid rgb(243,115,33); } .index-news .news li { font-size: 1.0rem; font-weight: 400; border-bottom:1px solid #ccc; display:flex; } .index-news .news li:last-child { border-bottom:1px solid #888; } .index-news .news .part { display:none; width:100px; line-height: 3rem; padding: 0 0 0 50px; } .index-news .news .subject { width:calc(100% - 150px); line-height: 3rem; padding: 0 20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .index-news .news .date { width: 150px; line-height: 3rem; padding: 0 20px 0 0; text-align: center; } .index-news .news a { color:#444; } .index-news .news a:hover { text-decoration:underline; } .index-news .gallery { border-top:2px solid rgb(243,115,33); padding-top: 2rem; } .index-news .gallery li { float: left; width: calc((100% - 6rem) / 4); margin-right: 2rem; margin-bottom: 2rem; font-size: 1.0rem; font-weight: 400; } .index-news .gallery li:nth-child(4n) { margin-right: 0; } .index-news .gallery .img { position: relative; display:block; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; } .index-news .gallery .img-in { position: absolute; display:block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: transform 0.3s ease; } .index-news .gallery li:hover .img-in { transform: scale(1.1); } .index-news .gallery .img img { width: 100%; height: 100%; } .index-news .gallery .subject { width:calc(100% - 1px); padding: 1rem .5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .index-news .gallery a { color:#444; } .index-news .gallery a:hover { text-decoration:underline; } .index-bbs { padding-top: 4rem; padding-bottom: 4rem; } .index-bbs .sc-title { text-align: center; margin-bottom: 4rem; } .index-bbs .sc-title .title { position: relative; font-size: 3rem; font-weight: 600; } .index-bbs .sc-title .title::after { position: absolute; display: block; left: 50%; bottom: -1rem; content: ''; width: 100px; height: 3px; background: rgb(243,115,33); transform: translateX(-50%); } .index-bbs .in { display: block; width: 1200px; margin-left: auto; margin-right: auto; } .index-bbs .in-box { border: 1px solid #aaa; padding: 1.5rem 2rem; background: #fff; } .index-bbs.count--2 .in { display: flex; width: 1200px; margin-left: auto; margin-right: auto; } .index-bbs.count--2 .in-box { width: calc((100% - 2rem) / 2); margin-right: 2rem; } .index-bbs.count--2 .in-box:last-child { margin-right: 0; } .index-bbs .part-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid #ccc; } .index-bbs .part-title .title { font-size: 1.8rem; font-weight: 400; } .index-bbs .part-title .more { font-size: 1.375rem; color: #333; transition: all .5s; } .index-bbs .part-title .more:hover { color: orange; transform: rotate(180deg); } .index-bbs .news-list {} .index-bbs .news-list li { display: flex; align-items: center; margin-bottom: .25rem; } .index-bbs .news-list li .icon { width: 1rem; } .index-bbs .news-list li .subject { width: calc(100% - 1rem - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index-bbs .news-list li .date { width: 120px; text-align: right; } .index-bbs .news-list li .icon span { display: block; width: .375rem; height: .375rem; background: #666; } .index-bbs .news-list li a { color: #444; } .index-bbs .news-list a:hover { text-decoration:underline; } #news--1 { background: #fafafa; } #news--2 { background: #f9f5ea; } #news--3 { background: #fafafa; } /* Main : Business */ #business {} #business .in { padding: 4rem 0 8rem; } #business .sc-title { display: flex; justify-content: center; margin-bottom: 6rem; } #business .sc-title .title { position: relative; font-size: 3rem; font-weight: 600; } #business .sc-title .title::after { position: absolute; display: block; content: ''; width: 100px; height: 3px; background: #e9630f; left: 50%; bottom: -1rem; transform: translateX(-50%); } #business .bizz { position: relative; width: 100%; } #business .bizz .text-box { display:flex; align-items:center; } #business .bizz .list { position: relative; display:flex; justify-content: center; width: 1400px; margin:0 auto 0; } #business .bizz .list.list--2, #business .bizz .list.list--3, #business .bizz .list.list--4 { flex-wrap : nowrap; } #business .bizz .list.list--5, #business .bizz .list.list--6 { flex-wrap : wrap; } #business .bizz .list li { width:33%; padding:0; transition:transform .4s ease-in-out; margin-right:2.66666%; background:#fafafa; border: 0px solid #f00; } #business .bizz .list.list--1 li { margin-right: 0; } #business .bizz .list.list--2 li { width: calc((100% - 4rem) / 3); margin-right: 2rem; } #business .bizz .list.list--2 li:nth-child(2n) { margin-right: 0; } #business .bizz .list.list--3 li { width: calc((100% - 4rem) / 3); margin-right: 2rem; } #business .bizz .list.list--3 li:nth-child(3n) { margin-right: 0; } #business .bizz .list.list--4 li { width: calc((100% - 3rem) / 4); margin-right: 1rem; } #business .bizz .list.list--4 li:nth-child(4n) { margin-right: 0; } #business .bizz .list.list--5 li { width: calc((100% - 4rem) / 3); margin-right: 2rem; margin-bottom: 2rem; } #business .bizz .list.list--5 li:nth-child(3n) { margin-right: 0; } #business .bizz .list.list--5 li:nth-child(5) { margin-right: 0; } #business .bizz .list.list--5 li:nth-child(n + 4) { margin-bottom: 0; } #business .bizz .list.list--6 li { width: calc((100% - 4rem) / 3); margin-right: 2rem; margin-bottom: 2rem; } #business .bizz .list.list--6 li:nth-child(3n) { margin-right: 0; } #business .bizz .list.list--6 li:nth-child(n + 4) { margin-bottom: 0; } #business .bizz .list li .icon { position: relative; width: 100%; height: 0; padding-bottom: 100.0%; margin-bottom: 1rem; background: #ddd; } #business .bizz .list li .icon .icon-in { position: absolute; width: 100%; height: 100%; } #business .bizz .list li .icon img { position: absolute; width: 100%; height: 100%; object-fit:fill; } #business .bizz .list li .subject { color:#222; font-size: 1.4rem; font-weight:400; line-height: 2; text-align: center; white-space: nowrap; overflow: hidden; } #business .bizz .list li .subject::after { display:none; content: ''; width: 100%; height: 1px; background: #fff; } /* Main : Relation */ #relation {} #relation .in { padding: 4rem 0; } #relation .sc-title { display: flex; justify-content: center; margin-bottom: 6rem; } #relation .sc-title .title { position: relative; font-size: 3rem; font-weight: 600; } #relation .sc-title .title::after { position: absolute; display: block; content: ''; width: 100px; height: 3px; background: #e9630f; left: 50%; bottom: -1rem; transform: translateX(-50%); } #relation .relation { width: 100%; max-width: 1200px; margin:0 auto 0; overflow: hidden; } #relation .relation .slide-item { margin-right: 1rem; } #relation .relation .img-wrap { position: relative; width: 100%; height: 0; padding-bottom: 40%; border: 1px solid #ccc; } #relation .relation .img-wrap-in { position: absolute; width: 100%; height: 100%; } #relation .relation .img-wrap a { width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; } #relation .relation .img-wrap img { width: 100%; object-fit: fill; object-fit: contain; } #relation #ul_relation.static { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } #relation #ul_relation.static .slide-item { position: relative; width: 250px; margin-right: 1rem; } #relation #ul_relation.static .slide-item:last-child { margin-right: 0; } #relation #ul_relation.static.static--5 .slide-item { width: calc((100% - 4rem) / 5); } #cs-wrap {} #cs-wrap .in { padding: 4rem 0; } #cs-wrap .sc-title { text-align: center; margin-bottom: 4rem; } #cs-wrap .sc-title .title { position: relative; font-size: 3rem; font-weight: 600; } #cs-wrap .sc-title .title::after { position: absolute; display: block; content: ''; width: 100px; height: 3px; background: #e9630f; left: 50%; bottom: -1rem; transform: translateX(-50%); } #cs-wrap .list { display:flex; width: 1200px; margin: 0 auto; justify-content:space-between; } #cs-wrap .list li { width: 47%; } #cs-wrap .list li .box { } #cs-wrap .list li .box.box-address { } #cs-wrap .list li .box.box-address dl { font-size: 1.3rem; } #cs-wrap .list li .box.box-address dt { font-weight: 400; margin-bottom: .25rem; } #cs-wrap .list li .box.box-address dd { padding-left: 1rem; } #cs-wrap .list li .box.box-address dt span { display: inline-block; background: #000; color: #fff; padding: 0 2rem; line-height: 1.6; border-radius: 1rem; } #footer { background:#222; color:#999; padding: 2rem 0; } #footer .inner { width: 1200px; margin: 0 auto; } #footer .ft-menu { display: flex; justify-content: flex-end; } #footer .ft-menu li { margin-right: 1rem; } #footer .ft-menu li:last-child { margin-right: 0; } #footer .ft-menu a { color: #fff; } #footer .ft-info { } #footer .ft-info li.company { font-size: 1.3em; } #footer .footer-logo { width: 240px; height: 50px; margin-right: 2rem; margin-bottom: 2rem; } #footer .footer-logo .fl-inner { width: 100%; height: 100%; } /*************************** Popup Zone ***************************/ #popup { position: fixed; top:0px; left:0; width: 100%; bottom: 0; right: 0; background:rgba(10, 10, 10, .75); padding:80px 10px 0; z-index: 99999; } #popup .popup-inner { display: flex; flex-direction: column; width: 600px; margin-left: auto; margin-right: auto; } #popup .popup-title { font-size: 1.75rem; font-weight: bold; text-align: center; color: #fff; margin-bottom: 1rem; } #popup .popup-list { width: 100%; } #popup .popup-list li { margin-bottom: 1rem; } #popup .popup-list li:last-child { margin-right: 0; } #popup .popup-list .link { padding: 10px 10px; background: #a8a533; background: #b17e29; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } #popup .popup-list a { color: inherit; } #popup .popup-list a * { color: inherit; } #popup .popup-list a .fa { font-size: .75em; color: #fbfaec; } #popup .popup-list .popup-item { display: none; padding-top: .5rem; margin-bottom: 2rem; } #popup .popup-list .popup-item.on { display: block; } #popup .popup-list .popup-item .pi-body { text-align: center; } #popup .popup-list .popup-item .pi-body .out { position: relative; width: 100%; height: 0; padding-bottom: 75%; } #popup .popup-list .popup-item .pi-body .in { position: absolute; width: 100%; height: 100%; } #popup .popup-list .popup-item .pi-body img { max-width: 100%; width: 100%; height: 100%; } #popup .popup-list .popup-item .pi-button { display: flex; justify-content: center; font-size: .875rem; padding: .375rem 0; background: #949494; } #popup .popup-list .popup-item .pi-button a { color: #fff; margin-right: 2rem; } #popup .popup-list .popup-item .pi-button a:last-child { margin-right: 0; } #popup .popup-close { display: flex; justify-content: center; } #popup .popup-close a { display: block; text-align: center; padding: 5px 15px; background: #569dd1; color: #fff; margin-right: .25rem; } #popup .popup-close a:last-child { margin-right: 0; } /*************************** Sub Page ***************************/ #sub-visual { height: 310px; display:flex; align-items:center; background-color: #eee; background-position: center; background-size: cover; background-attachment: fixed; background-image: url(/dtype/resources/images/3841564_80353.jpg); } #sub-visual .inner { width: 1200px; margin:0 auto; text-align: center; padding-top: 50px; } #sub-visual .inner .t1 { font-size: 3rem; font-weight: 500; letter-spacing: -0.04em; color:#fff; text-shadow: 1px 1px 4px rgba(50, 50, 50, 1); } #sub-visual .inner .t2 { display:none; font-size: 1.3rem; font-weight: 400; letter-spacing: -0.04em; color:#fff; text-shadow: 1px 1px 4px rgba(50, 50, 50, 1); } #sub-visual.empty { background: #eee url(/dtype/resources/images/subtop-basic2.jpg) repeat center / cover fixed; } /* #sub-visual.group--1 { background-image: url(/dtype/kr/img/sub-top-01.jpg); } #sub-visual.group--2 { background-image: url(/dtype/kr/img/sub-top-02.jpg); } #sub-visual.group--3 { background-image: url(/dtype/kr/img/sub-top-03.jpg); } #sub-visual.group--4 { background-image: url(/dtype/kr/img/sub-top-04a.jpg); } #sub-visual.group--5 { background-image: url(/dtype/kr/img/sub-top-05.jpg); } #sub-visual.group--6 { background-image: url(/dtype/kr/img/sub-top-06.jpg); } */ #left { display:flex; justify-content:center; transform:translateY(-50%); } #left .left-list { } #left .left-list ul.d1 { display:flex; justify-content:center; } #left .left-list ul.d1 li { width:240px; margin:0 5px; border:1px solid #aaa; box-shadow:0px 6px 6px -3px rgba(100,100,100,0.3); } #left .left-list ul.d1 li a { display: block; text-align: center; font-size: 1.4rem; font-weight: 350; letter-spacing: -0.03em; line-height: 3rem; color:#000; background:#fff; } #left .left-list ul.d1 li.on { border:1px solid rgb(243,115,33); } #left .left-list ul.d1 li.on a { background:rgb(243,115,33); color:#fff; } #left .left-list ul.d1 li.small-1 a { font-size: 1.25rem; } #left .left-list ul.d1 li.small-2 a { font-size: 1.1rem; } #map-address {} #map-address div { display: flex; align-items: center; } #map-address span.key { background: #444; color: #fff; padding: 3px 20px; border-radius: 20px; margin-right: 20px; } #map-address span.val { font-size: 1.2rem; } .container img { max-width: 100% !important; height: auto !important; } .container #map img { max-width: inherit !important; } /*************************** Common Css ***************************/ .empty { font-size: 1.5rem; } /* decoration */ .underline { text-decoration:underline; } .under { text-decoration:underline; } /* alignment */ .center { text-align: center; } .right { text-align: right; } /* text */ .bold { font-weight:500; } /* hanwha color */ .han1 { color:rgb(243,115,33); } .han2 { color:rgb(248,155,108); } .han3 { color:rgb(251,181,132); } /* color */ .aliceblue { color:aliceblue; } .antiquewhite { color:antiquewhite; } .aqua { color:aqua; } .aquamarine { color:aquamarine; } .azure { color:azure; } .beige { color:beige; } .bisque { color:bisque; } .black { color:black; } .blanchedalmond { color:blanchedalmond; } .blue { color:blue; } .blueviolet { color:blueviolet; } .brown { color:brown; } .burlywood { color:burlywood; } .cadetblue { color:cadetblue; } .chartreuse { color:chartreuse; } .chocolate { color:chocolate; } .coral { color:coral; } .cornflowerblue { color:cornflowerblue; } .cornsilk { color:cornsilk; } .crimson { color:crimson; } .cyan { color:cyan; } .darkblue { color:darkblue; } .darkcyan { color:darkcyan; } .darkgoldenrod { color:darkgoldenrod; } .darkgray { color:darkgray; } .darkgreen { color:darkgreen; } .darkkhaki { color:darkkhaki; } .darkmagenta { color:darkmagenta; } .darkolivegreen { color:darkolivegreen; } .darkorange { color:darkorange; } .darkorchid { color:darkorchid; } .darkred { color:darkred; } .darksalmon { color:darksalmon; } .darkseagreen { color:darkseagreen; } .darkslateblue { color:darkslateblue; } .darkslategray { color:darkslategray; } .darkturquoise { color:darkturquoise; } .darkviolet { color:darkviolet; } .deeppink { color:deeppink; } .deepskyblue { color:deepskyblue; } .dimgray { color:dimgray; } .dodgerblue { color:dodgerblue; } .firebrick { color:firebrick; } .floralwhite { color:floralwhite; } .forestgreen { color:forestgreen; } .fuchsia { color:fuchsia; } .gainsboro { color:gainsboro; } .ghostwhite { color:ghostwhite; } .gold { color:gold; } .goldenrod { color:goldenrod; } .gray { color:gray; } .green { color:green; } .greenyellow { color:greenyellow; } .honeydew { color:honeydew; } .hotpink { color:hotpink; } .indianred { color:indianred; } .indigo { color:indigo; } .ivory { color:ivory; } .khaki { color:khaki; } .lavender { color:lavender; } .lavenderblush { color:lavenderblush; } .lawngreen { color:lawngreen; } .lemonchiffon { color:lemonchiffon; } .lightblue { color:lightblue; } .lightcoral { color:lightcoral; } .lightcyan { color:lightcyan; } .lightgoldenrodyellow { color:lightgoldenrodyellow; } .lightgray { color:lightgray; } .lightgreen { color:lightgreen; } .lightpink { color:lightpink; } .lightsalmon { color:lightsalmon; } .lightseagreen { color:lightseagreen; } .lightskyblue { color:lightskyblue; } .lightslategray { color:lightslategray; } .lightsteelblue { color:lightsteelblue; } .lightyellow { color:lightyellow; } .lime { color:lime; } .limegreen { color:limegreen; } .linen { color:linen; } .magenta { color:magenta; } .maroon { color:maroon; } .mediumaquamarine { color:mediumaquamarine; } .mediumblue { color:mediumblue; } .mediumorchid { color:mediumorchid; } .mediumpurple { color:mediumpurple; } .mediumseagreen { color:mediumseagreen; } .mediumslateblue { color:mediumslateblue; } .mediumspringgreen { color:mediumspringgreen; } .mediumturquoise { color:mediumturquoise; } .mediumvioletred { color:mediumvioletred; } .midnightblue { color:midnightblue; } .mintcream { color:mintcream; } .mistyrose { color:mistyrose; } .moccasin { color:moccasin; } .navajowhite { color:navajowhite; } .navy { color:navy; } .oldlace { color:oldlace; } .olive { color:olive; } .olivedrab { color:olivedrab; } .orange { color:orange; } .orangered { color:orangered; } .orchid { color:orchid; } .palegoldenrod { color:palegoldenrod; } .palegreen { color:palegreen; } .paleturquoise { color:paleturquoise; } .palevioletred { color:palevioletred; } .papayawhip { color:papayawhip; } .peachpuff { color:peachpuff; } .peru { color:peru; } .pink { color:pink; } .plum { color:plum; } .powderblue { color:powderblue; } .purple { color:purple; } .red { color:red; } .rosybrown { color:rosybrown; } .royalblue { color:royalblue; } .saddlebrown { color:saddlebrown; } .salmon { color:salmon; } .sandybrown { color:sandybrown; } .seagreen { color:seagreen; } .seashell { color:seashell; } .sienna { color:sienna; } .silver { color:silver; } .skyblue { color:skyblue; } .slateblue { color:slateblue; } .slategray { color:slategray; } .snow { color:snow; } .springgreen { color:springgreen; } .steelblue { color:steelblue; } .tan { color:tan; } .teal { color:teal; } .thistle { color:thistle; } .tomato { color:tomato; } .turquoise { color:turquoise; } .violet { color:violet; } .wheat { color:wheat; } .white { color:white; } .whitesmoke { color:whitesmoke; } .yellow { color:yellow; } .yellowgreen { color:yellowgreen; } /* Background Color */ .bg-green { background:#008b00; color:#ffffff; } .bg-red { background:#cd3333; color:#ffffff; } .bg-blue { background:#4156c5; color:#ffffff; } .bg-orange { background:#d2691e; color:#ffffff; } .bg-sky { background:deepskyblue; color:#ffffff; } .bg-gray { background:#cccccc; color:#000000; } /*************************** reset jQuery-ui ***************************/ .ui-widget { font-size: 1.0em !important; } .ui-datepicker table { font-size: 0.875em !important; } .ui-datepicker .ui-datepicker-title select { font-size: 0.875em !important; } #ui-datepicker-div { z-index: 90 !important; } /*************************** float ***************************/ .float-wrap { display:block; } .float-left { display:block; float:left; } .float-right { display:block; float:right; } .float-wrap::after { display:block; clear:both; content:''; } /********************** Padding **********************/ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-20 { padding-top: 20px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-20 { padding-bottom: 20px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-20 { padding-left: 20px; } .pl-30 { padding-left: 30px; } .pl-40 { padding-left: 40px; } .pl-50 { padding-left: 50px; } .pl-60 { padding-left: 60px; } .pl-70 { padding-left: 70px; } .pl-80 { padding-left: 80px; } .pl-90 { padding-left: 90px; } .pl-100 { padding-left: 100px; } .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-20 { padding-right: 20px; } .pr-30 { padding-right: 30px; } .pr-40 { padding-right: 40px; } .pr-50 { padding-right: 50px; } .pr-60 { padding-right: 60px; } .pr-70 { padding-right: 70px; } .pr-80 { padding-right: 80px; } .pr-90 { padding-right: 90px; } .pr-100 { padding-right: 100px; } /********************** Margin **********************/ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-20 { margin-left: 20px; } .ml-30 { margin-left: 30px; } .ml-40 { margin-left: 40px; } .ml-50 { margin-left: 50px; } .ml-60 { margin-left: 60px; } .ml-70 { margin-left: 70px; } .ml-80 { margin-left: 80px; } .ml-90 { margin-left: 90px; } .ml-100 { margin-left: 100px; } .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 30px; } .mr-40 { margin-right: 40px; } .mr-50 { margin-right: 50px; } .mr-60 { margin-right: 60px; } .mr-70 { margin-right: 70px; } .mr-80 { margin-right: 80px; } .mr-90 { margin-right: 90px; } .mr-100 { margin-right: 100px; } /********************** Message Box (alert window) **********************/ .mbox-wrap { display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center; background: #ddd; } .mbox { display: block; width: 500px; border: 1px solid #888; border-radius: 1rem; background: #fff; } .mbox .title { text-align: center; font-size: 1.5rem; padding: 1rem 0; border-bottom: 1px solid #bbb; } .mbox .body { text-align: left; font-size: 1.2rem; padding: 2rem 2rem; min-height: 10rem; border-bottom: 1px solid #bbb; } .mbox .footer { text-align: center; font-size: 1.2em; padding: 1rem 0; }