/* font */ @font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: url('../fonts/Pretendard-Black.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: url('../fonts/Pretendard-ExtraBold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: url('../fonts/Pretendard-Bold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: url('../fonts/Pretendard-SemiBold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: url('../fonts/Pretendard-Medium.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: url('../fonts/Pretendard-Regular.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: url('../fonts/Pretendard-Light.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 200; font-display: swap; src: url('../fonts/Pretendard-ExtraLight.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap; src: url('../fonts/Pretendard-Thin.woff') format('woff'); } /*LINESeedKR*/ @font-face { font-family: "LINESeedKR"; font-weight: 300; src: url("../fonts/LINESeedKR-Th.woff") format("woff"); } @font-face { font-family: "LINESeedKR"; font-weight: 600; src: url("../fonts/LINESeedKR-Rg.woff") format("woff"); } @font-face { font-family: "LINESeedKR"; font-weight: 900; src: url("../fonts/LINESeedKR-Bd.woff") format("woff"); } /* size */ @media screen and (max-width: 1250px) { } /* tablet */ @media screen and (max-width: 650px) { } /* mobile */ /* default */ *{ font-size: inherit; font-weight: inherit; font-family: inherit; color : inherit; box-sizing: border-box; letter-spacing: inherit; line-height: inherit; } body{ font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; overflow: hidden; } section{ display:block; } a{ color:inherit; } .inner{ width:1200px; margin:0 auto; } .paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; } .paging_box .pg_current{ background-color: var(--dark-purple); border-color: var(--dark-purple); } .paging_box .pg_page{ background-color:#fff; } .sec_top{ padding-top:86.23px; } @media screen and (max-width: 1250px) { .inner{ width:100%; padding:0 10px; } } /* tablet */ @media screen and (max-width: 650px) { .paging_box{ font-size: 13px; } .sec_top{ padding-top: 60.02px; } } /* mobile */ :root { --main-bg-color: #897CA5; --dark-purple : #3C2752; } /*---------------- admin ---------------*/ .adminBox{display:flex; justify-content: flex-end; padding:20px 0;} .adminBox .admin_list{display:flex; } .adminBox .admin_list>.item{ font-size:14px; margin-right:5px; padding:5px 5px 5px 29px; display:flex; align-items: center; border-radius: 4px; font-size:14px; background-repeat: no-repeat; background-position: left 5px center; cursor: pointer; background-color:#fff; } .adminBox .admin_list>.item a{ font-size: inherit; } .adminBox .admin_list .item:nth-child(2n){ background-color:#f2f2f2; background-repeat: no-repeat; background-position: left 5px center; } .adminBox .admin_list a.admin_icon{background-image: url('../img/board_img/admin_icon.png');} .adminBox .admin_list .item.write_icon{background-image: url('../img/board_img/write_icon.png'); } .adminBox .admin_list .more_icon{background-image: url('../img/board_img/comment_menu.png'); position:relative;} .adminBox .admin_list .reple_icon{background-image: url('../img/board_img/view_reple_icon.png'); position:relative; background-color:#fff; } .adminBox .admin_list .list_icon{background-image: url('../img/board_img/list_icon.png'); position:relative;} .adminBox .admin_list li .more_box{ position:absolute; background:#fff; padding:10px; border: 1px solid #E6E6E6; box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.05); z-index: 5; top:40px; right:0; display:none; } .adminBox .admin_list li .more_box.on{display:block; } .adminBox .admin_list li .more_box:before{ content: ""; position: absolute; top: -8px; right: 13px; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #E6E6E6 transparent; } .adminBox .admin_list li .more_box:after{ content: ""; position: absolute; top: -6px; right: 13px; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #fff transparent; } .adminBox .admin_list li.more_icon .more_box{width:90px; font-size:14px; padding:0; } .adminBox .admin_list li.more_icon .more_box button{background:none; border:none; text-align: center; width:100%; padding:10px; border-bottom:1px solid #e6e6e6; font-size:12px; } .adminBox .admin_list li.more_icon .more_box .button{ display:block; background:none; border:none; text-align: center; width:100%; padding:10px; border-bottom:1px solid #e6e6e6; font-size:12px; } .adminBox .admin_list li.more_icon .more_box button:last-child{border-bottom:none; } .adminBox .admin_list li.more_icon .more_box button > a{ font-size: inherit; } /*---------------- admin end ---------------*/ /* header */ header{ position: fixed; width: 100%; left: 0; top: 0; background-color: #F7F7F7; overflow: hidden; z-index: 999; } header .inner{ display: flex; justify-content: space-between; align-items: center; } header .headerContainer{ background-color: #fff; padding: 20px 0; border-bottom: 1px solid #F7F7F7; } header .logoBox img{ width: 150px; } header .logoBox img.logo1{ display: none; } header .menuContainer .menu{ display: flex; align-items: center; } header .menuContainer .menu > li{ position: relative; padding: 0 25px; font-weight: 600; font-size: 20px; transition: color 0.5s; } header .menuContainer .menu > li.on > a{ color: var(--main-bg-color); } header .menuContainer .menu > li:last-child{ padding-right: 0; } header .menuContainer .menu > li:hover{ color: var(--main-bg-color); } header .menuContainer .menu > li a.appliBtn{ background-color: var(--dark-purple); color: #fff; font-size: 14px; padding: 10px 20px; border-radius: 4px; display: flex; align-items: center; border:2px solid var(--dark-purple); } header .menuContainer .menu > li a.appliBtn .icon{ margin-left: 5px; } header .menuContainer .menu > li .subMenu{ width: 100%; left: 0; top: calc(100% + 40px); padding: 10px 0; position: absolute; height: 0; transition: opacity 0.5s, visibility 0.5s; } header .menuContainer.on .menu > li .subMenu{ opacity: 1; visibility: visible; height: 200px; } header .menuContainer .menu > li .subMenu > li { padding: 15px 20px; font-size: 16px; font-weight: 500; width: 100%; color: #222; position: relative; } header .menuContainer .menu > li .subMenu > li:hover{ color: var(--main-bg-color); } header .menuContainer .menu > li .subMenu > li a{ white-space: nowrap; position: relative; } header .menuContainer .menu > li .subMenu > li a.front{ position: relative; z-index: 1; } header .menuContainer .menu > li .subMenu > li a::after{ content:''; width: 0; height: 2px; position: absolute; left: 0; bottom: -10px; background-color: var(--main-bg-color); transition: width 0.5s; } header .menuContainer .menu > li .subMenu > li a:hover::after{ width: 100%; } header .menuBg{ background-color: #F7F7F7; height: 0; transition: height 0.2s; } header .menuBg.active{ height: 230px; } header.on{ background-color: transparent; } header.on .headerContainer{ background-color: transparent; color: #fff; } header.on .logoBox img.logo1{ display: block; } header.on .logoBox img.logo2{ display: none; } header.on .menuBg{ background-color: rgba(0,0,0,0.5); } header.on .menuContainer .menu > li .subMenu > li a{ color: #fff; } header.on .menuContainer .menu > li a.appliBtn{ background-color: transparent; border: 2px solid #fff; } @media screen and (max-width: 950px) { header .menuContainer .menuBtn{ width: 35px; height: 35px; position: absolute; right: 10px; top: 30px; z-index: 9; cursor: pointer; } header .menuContainer .menuBtn span{ display: block; background-color: var(--dark-purple); height: 4px; width: 100%; transition: transform 0.5s, width 0.5s; } header .menuContainer .menuBtn span + span{ margin-top: 7.5px; } header .menuContainer.on .menuBtn span:nth-child(1){ transform: translateY(14px) rotate(45deg); } header .menuContainer.on .menuBtn span:nth-child(2){ opacity: 0; width: 0; } header .menuContainer.on .menuBtn span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); } header .menuBg.active{ display: none; } header .menuContainer .menu{ position: fixed; right: -300px; top: 0; background-color: #fff; flex-direction: column; height: 100%; width: 100%; max-width: 250px; padding: 100px 0; overflow-y: scroll; text-align: center; transition: right 0.8s; } header .menuContainer.on .menu{ right: 0; } header .menuContainer .menu::-webkit-scrollbar { display: none; } header .menuContainer .menu > li{ padding: 10px 10px; width: 100%; } header .menuContainer .menu > li:last-child{ padding-right: 10px; } header .menuContainer .menu > li > a{ display: block; width: 100%; } header .menuContainer .menu > li .subMenu{ position: relative; left: 0; top: 0; height: 0; width:100%; margin-top: 10px; background-color: #F7F7F7; opacity: 1; visibility: visible; overflow: hidden; padding: 0; border-radius: 5px; } header .menuContainer.on .menu > li .subMenu{ height: 0; overflow: hidden; transition: max-height 0.5s ease; } header .menuContainer.on .menu > li .subMenu.active { height: auto; } header .menuContainer .menu > li .subMenu.show { height: auto; max-height: calc(100% - 30px); } header .menuContainer .menu > li a.appliBtn{ justify-content: center; } header.on .menuContainer .menuBtn span{ background-color: #fff; transition: background-color 1s; } header.on .menuContainer.on .menuBtn span{ background-color: var(--main-bg-color); } header.on .menuContainer .menu{ color: #222; } header.on .menuContainer .menu > li .subMenu > li a{ color: #222; } header.on .menuContainer .menu > li a.appliBtn{ background-color:var(--dark-purple); } header.on .menuContainer.on .menu > li a.appliBtn{ border-color: var(--dark-purple); } } @media screen and (max-width: 650px) { header .headerContainer{ padding: 10px 0; } header .menuContainer .menuBtn{ top: 20px; } header .logoBox img{ width: 130px; } } /* .main .mainVisual */ .main .mainVisual{ overflow: hidden; position: relative; } .main .mainVisual .mainSlide{ position:relative; height: 100%; } .main .mainVisual .mainSlide .swiper-slide{ height: 500px; min-height: 100vh; position: relative; } .main .mainVisual .mainSlide .swiper-slide .imgBox{ height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; align-items: flex-end; padding-bottom: 200px; } .main .mainVisual .mainSlide .swiper-slide .imgBox.img01{ background-image: url('../img/main/main-slide01.png'); } .main .mainVisual .mainSlide .swiper-slide .imgBox.img02{ background-image: url('../img/main/main-slide02.png'); } .main .mainVisual .mainSlide .swiper-slide .imgBox.img03{ background-image: url('../img/main/main-sldie03.png'); } .main .mainVisual .mainSlide .swiper-slide .filter{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.40); } .main .mainVisual .mainSlide .swiper-slide .contentBox{ position: relative; z-index: 2; color: #fff; } .main .mainVisual .mainSlide .swiper-slide .contentBox h2{ font-weight: 500; font-size: 80px; color: transparent; -webkit-text-stroke: 1px #fff; /* 1px의 검은색 외곽선 효과 */ text-stroke: 1px #fff; } .main .mainVisual .mainSlide .swiper-slide .contentBox h2 span{ position: relative; } .main .mainVisual .mainSlide .swiper-slide .contentBox h2 span::after{ content:''; width: 100%; height: 70px; position: absolute; bottom: 100%; left: 0; background-image: url('../img/main/main_visual_crown.png'); background-repeat: no-repeat; background-position: center; background-size: contain; } .main .mainVisual .mainSlide .swiper-slide .contentBox .sub_title{ font-size: 34px; font-weight: 700; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content{ display: flex; margin-top: 16px; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content .navigation{ display: flex; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content .navigation > li + li{ margin-left: 5px; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content .navigation > li > span{ display: block; width: 10px; height: 10px; background-color: rgba(255,255,255,0.5); cursor: pointer; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content .navigation > li > span.active{ background-color: #fff; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content .txt{ padding-left: 28px; flex-grow: 1; } .main .mainVisual .mouseWheel{ position: absolute; bottom: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .main .mainVisual .mouseWheel img{ margin-bottom: 20px; position: relative; z-index: 5; } .main .mainVisual .mouseWheel .barBox{ width: 3px; height: 80px; background: rgba(255, 255, 255, 0.60); position: relative; z-index: 5; } .main .mainVisual .mouseWheel .barBox .bar{ display:block; background-color: #fff; height: 50%; animation: mouse ease-in 2s infinite; } @media screen and (max-width: 1250px) { .main .mainVisual .mainSlide .swiper-slide .contentBox h2{ font-size: 7vw; } .main .mainVisual .mainSlide .swiper-slide .contentBox h2 span::after{ height: 7vw; } .main .mainVisual .mainSlide .swiper-slide .contentBox .sub_title{ font-size: 25px; } } @media screen and (max-width: 950px) { .main .mainVisual .mainSlide .swiper-slide .contentBox h2{ font-size: 8.5vw; } } @media screen and (max-width: 650px) { .main .mainVisual .mainSlide .swiper-slide .contentBox h2{ font-size: 10vw; } .main .mainVisual .mainSlide .swiper-slide .contentBox .sub_title{ font-size: 20px; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content{ flex-wrap: wrap; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content .navigation{ width: 100%; } .main .mainVisual .mainSlide .swiper-slide .contentBox .content .txt{ padding-left: 0; margin-top: 20px; } .main .mainVisual .mouseWheel img{ width: 15px; margin-bottom: 10px; } .main .mainVisual .mouseWheel .barBox{ height: 40px; width: 2px; } } /* footer */ footer{ background-color: #222; color: #fff; padding: 64px 0 40px 0; } footer .logo{ width: 150px; } footer .f_btn{ margin-top: 50px; font-size: 24px; font-weight: 600; } footer .f_info{ margin-top: 26px; display: flex; flex-wrap: wrap; max-width: 550px; } footer .f_info > li{ margin-right: 14px; line-height: 1.5em; } footer .copy_right{ margin-top: 16px; padding-top: 36px; border-top: 1px solid #7F7F7F; } footer .copy_right .inner{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } footer .copy_right .privacyBtn{ cursor: pointer; } @media screen and (max-width: 650px) { footer{ padding: 40px 0 20px 0; } footer .logo{ width: 120px; } footer .f_btn{ font-size: 16px; } footer .f_info{ font-size: 14px; } footer .copy_right{ font-size: 14px; } footer .copy_right .txt{ width: 100%; margin-top:10px; order: 2; } } /* main common */ .main h3{ font-size: 32px; font-weight: 600; } .main h3 span{ position: relative; } .main h3 span::after{ content:''; display: block; position: absolute; width: 100%; height: 2px; left: 0; bottom: 0; background-color: #222; transition: width 1s; } @media screen and (max-width: 650px) { .main h3{ font-size: 25px; } } /* .main .productArti */ .main .productArti{ position: relative; padding: 80px 0; } .main .productArti .bgWrap{ display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .main .productArti .bgWrap > li{ flex-grow: 1; } .main .productArti .bgWrap > li.white{ background-color: #fff; } .main .productArti .bgWrap > li.purple{ background-color: var(--main-bg-color); } .main .productArti .contetnWrap{ position: relative; z-index: 2; overflow: hidden; margin-top: 30px; } .main .productArti .contetnWrap .slideBox .productSlide .swiper-slide{ height: auto; position: relative; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap{ display: flex; flex-wrap: wrap; height: 100%; position: relative; z-index: 2; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(1){ width: 200px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(2){ width: calc(100% - 200px - 270px); } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(3){ width: 270px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox{ display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 40px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h4{ font-size: 24px; font-weight: 700; white-space: nowrap; transform: translateY(20px); opacity: 0; transition: opacity 1s, transform 1s; } .main .productArti .contetnWrap .slideBox .productSlide .swiper-slide-active .itemWrap > li.titleBox h4{ opacity: 1; transform: translateY(0); } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h5{ font-size: 80px; font-weight: 700; white-space: nowrap; position: relative; z-index: 2; color: var(--dark-purple); transform: translateY(20px); opacity: 0; transition: opacity 1s, transform 1s; } .main .productArti .contetnWrap .slideBox .productSlide .swiper-slide-active .itemWrap > li.titleBox h5{ opacity: 1; transform: translateY(0); } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h5.small{ font-size: 74px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox{ padding: 0 50px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgWrap{ height: 100%; display: flex; flex-direction: column; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .title{ background-color: var(--dark-purple); color: #fff; padding: 20px 25px; display: flex; align-items: flex-end ; border-radius: 20px 20px 0 0 ; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .title::before{ content:''; display: block; flex-grow:1; height: 2px; background-color: #fff; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .title span{ padding-left: 20px; font-size: 24px; font-weight: 700; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox{ background-color: #fff; border-radius: 0 0 20px 20px ; flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 80px 0 ; box-shadow: 6px 9px 13px rgba(0, 0, 0, 0.15); background-image: url('../img/main/main_product_bg.png'); background-repeat: no-repeat; background-position: bottom right 20px; background-size: 50%; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox img{ width: 100%; max-width: 380px; animation : floatAnimation ease-in-out 5s infinite; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox.imgbox01 img{ animation : floatAnimation2 linear 10s infinite; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox.imgbox04 img{ margin-bottom: 80px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox{ display: flex; align-items: center; color: #fff; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox h6{ font-size: 24px; font-weight: 700; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox .list{ margin-top: 10px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox .list > li{ position: relative; line-height: 1.5em; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox .list > li::before{ content : '" '; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox .list > li::after{ content : ' "'; } /* .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox .list > li::before{ content:'"'; position: absolute; left: 0; top: 0; } */ .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox a.moreBtn{ background-color: var(--dark-purple); color: #fff; display: block; margin-top: 20px; padding: 20px 0; font-size: 16px; font-weight: 500; text-align: center; width: 200px; border: 2px solid var(--dark-purple); border-radius: 4px; } .main .productArti .contetnWrap .slideBtn{ position: absolute; left: 0; bottom: 0; z-index: 9; display: flex; gap: 10px; } .main .productArti .contetnWrap .slideBtn img{ cursor: pointer; width: 35px; } .main .productArti .contetnWrap .slideBtn .prevBtn{ transform: rotate(180deg); } @media screen and (max-width: 1250px) { .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(1){ width: 20%; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(2){ width: 55%; padding: 0 3%; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(3){ width: 25%; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h4{ font-size: 20px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h5{ font-size: 6vw; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h5.small{ font-size: 5vw; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox h6{ font-size: 2.5vw; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .title span{ font-size: 2vw; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox img{ max-width: 30vw; } } @media screen and (max-width: 900px) { .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(1){ width: 100%; order: 1; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(2){ width: 100%; padding: 0; height: 500px; order: 0; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li:nth-child(3){ width: 100%; order: 3; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox{ justify-content: flex-start; padding-bottom: 0; margin-top: 20px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h5{ font-size: 50px; white-space: normal; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h5.small{ font-size: 40px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .title span{ font-size: 20px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox{ color: #222; margin-top: 20px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox{ padding: 0; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox img{ max-width: 40vw; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox.imgbox04 img{ margin-bottom: 0; } .main .productArti .contetnWrap .slideBtn{ position: static; margin-top: 20px; } } @media screen and (max-width: 650px) { .main .productArti .bgWrap > li.purple{ background-color:#fff; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap{ align-items: flex-start; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .imgBox img{ width: 70%; max-width: unset; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h5{ font-size: 8vw; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.titleBox h5.small{ font-size: 7vw; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox h6{ font-size: 18px; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.imgBox .title span{ font-size: 4vw; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox .contentWrap{ width: 100%; background-color: #fff; } .main .productArti .contetnWrap .slideBox .productSlide .itemWrap > li.contentBox a.moreBtn{ width: 100%; max-width: 200px; padding: 15px 10px; } } /* .main .customArti */ .main .customArti{ padding: 120px 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .main .customArti .circle{ border: 1px solid var(--dark-purple); position: absolute; width: 80vw ; height: 80vw; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .main .customArti .circle::before{ content:''; width: 1px; height: 100%; background-color: #7F7F7F; } .main .customArti .inner{ position: relative; transform: translateY(20px); opacity: 0; transition: transform 1s, opacity 1s; } .main .customArti.active .inner{ transform: translateY(0px); opacity: 1; } .main .customArti .titleBox{ background-color: #fff; margin: 0 auto; max-width: 400px; text-align: center; padding: 20px 0; } .main .customArti .titleBox h2{ font-size: 53px; font-weight: 700; color: var(--dark-purple); } .main .customArti .titleBox .royalBtn{ margin: 20px auto 0 auto; display: block; border: 2px solid var(--dark-purple); border-radius: 4px; max-width: 185px; color: var(--dark-purple); padding: 10px; background-color: #fff; transition: background-color 0.5s, color 0.5s; } .main .customArti .titleBox .royalBtn:hover{ background-color: var(--dark-purple); color: #fff; } .main .customArti .slideBox{ margin-top: 70px; } .main .customArti .slideBox .customSlide .swiper-slide{ width: auto !important; height: auto; } .main .customArti .slideBox .customSlide .itemWrap{ display: flex; flex-wrap: wrap; height: 100%; width: 300px; height: 100%; } .main .customArti .slideBox .customSlide .itemWrap > li { padding: 5px; width: 100%; } .main .customArti .slideBox .customSlide .itemWrap > li.half{ width: calc(100% / 2); } .main .customArti .slideBox .customSlide .itemWrap > li.half-half{ width: calc(50% / 2); } .main .customArti .slideBox .customSlide .itemWrap > li .item{ border: 2px solid var(--dark-purple); background-color: #fff; padding: 20px; border-radius: 4px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.purple_bg{ color: #fff; background-color: var(--dark-purple); } .main .customArti .slideBox .customSlide .itemWrap > li .item.img{ display: flex; align-items: center; justify-content: center; } .main .customArti .slideBox .customSlide .itemWrap > li .item.img img{ max-width: 100%; } .main .customArti .slideBox .customSlide .itemWrap > li .item.text { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 60px; height: 465px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.text .logo{ width: 85px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.text .content{ margin-top: 10px; line-height: 1.5em; } .main .customArti .slideBox .customSlide .itemWrap > li .item.text .content::after{ content:''; display: block; width: 176px; height: 2px; background-color: #fff; margin-top: 32px; position:relative; left:-22px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.small-height{ height: 150px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.big-height{ height: 305px; } .main .customArti .slideBox .customSlide .itemWrap.itemBox04{ width: 425px; } .main .customArti .slideBox .customSlide .itemWrap.itemBox06{ width: 600px; } @media screen and (max-width: 1250px) { .main .customArti{ padding: 50px 0; } .main .customArti .titleBox h2{ font-size: 40px; } .main .customArti .circle{ width: 90vw; height: 90vw; } } @media screen and (max-width: 650px) { .main .customArti{ padding: 0 0 50px 0; } .main .customArti .circle{ width: 150vw; height: 150vw; } .main .customArti .slideBox .customSlide .itemWrap{ width: 250px; } .main .customArti .slideBox .customSlide .itemWrap.itemBox04{ width: 350px; } .main .customArti .slideBox .customSlide .itemWrap.itemBox06{ width: 400px; } .main .customArti .titleBox{ max-width: 200px; } .main .customArti .titleBox h2{ font-size: 40px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.small-height{ height: 120px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.big-height{ height: 250px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.text{ height: 380px; } .main .customArti .slideBox .customSlide .itemWrap > li .item.img img{ max-width: 80%; } } /* .main .portfolioArti */ .main .portfolioArti{ padding: 120px 0; overflow: hidden; } .main .portfolioArti .inner{ position: relative; transform: translateY(20px); opacity: 0; transition: transform 1s, opacity 1s; } .main .portfolioArti.active .inner{ transform: translateY(0px); opacity: 1; } .main .portfolioArti .productBox{ padding: 60px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .main .portfolioArti .productBox .txt{ font-size: 32px; font-weight: 700; } .main .portfolioArti .productBox .btnWrap{ color: var(--dark-purple); } .main .portfolioArti .productBox .btnWrap .arrow{ margin-left: 7px; } .main .portfolioArti .imgBox{ background-color: #D9D9D9; width: 540px; height: 540px; border-radius: 5px; background-size: cover; background-repeat: no-repeat; background-position: center; /* transition: background-image 0.5s; */ } .main .portfolioArti .slideBox{ width: 65%; position: relative; margin-left: 100px; } .main .portfolioArti .slideBox .portfolioSlide .swiper-slide{ padding: 10px; height: auto; } .main .portfolioArti .slideBox .portfolioSlide .item{ display: flex; justify-content: flex-end; position: relative; padding-bottom: 50px; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox{ position: absolute; left: 0; bottom: 0; background-color: var(--dark-purple); color: #fff; width: 300px; height: 300px; padding: 30px; border-radius: 5px; display: flex; flex-direction: column; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox .title{ font-weight: 700; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox .content{ margin-top: 16px; line-height: 1.5em; display: -webkit-box; -webkit-line-clamp: 5; /* 최대 줄 수 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox .btnWrap{ display: flex; justify-content: flex-end; align-items: flex-end; margin-top: 20px; flex-grow: 1; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox .btnWrap .plusBtn{ border: 2px solid rgba(255, 255, 255, 0.30); padding: 15px; border-radius: 4px; transition: background-color 0.5s; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox .btnWrap .plusBtn:hover{ background-color: rgba(255, 255, 255, 0.30); } .main .portfolioArti .rightBox{ position: absolute; top: 10px; right: -680px; display: flex; align-items:center; } .main .portfolioArti .rightBox .slideBtnWrap{ padding: 20px 60px; display: flex; justify-content: center; } .main .portfolioArti .rightBox .slideBtnWrap .nextBtn{ cursor: pointer; text-align: center; } .main .portfolioArti .rightBox .slideBtnWrap .nextBtn span{ display: block; color: var(--dark-purple); font-size: 20px; } .main .portfolioArti .rightBox .slideBtnWrap .nextBtn .btnImg{ margin-top: 10px; } @media screen and (max-width: 1250px) { .main .portfolioArti .productBox .txt{ font-size: 25px; } .main .portfolioArti .productBox .btnWrap{ width: 100%; display: flex; justify-content: flex-end; display: none; } .main .portfolioArti .rightBox .slideBtnWrap .nextBtn span{ font-size: 16px; } } @media screen and (max-width: 950px) { .main .portfolioArti .slideBox .portfolioSlide .item .contentBox{ margin-left: -100px; } .main .portfolioArti .imgBox{ width: 60vw; height: 60vw; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox{ width: 30vw; height: 30vw; padding: 15px; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox .title{ font-size: 20px; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox .btnWrap{ margin-top: 10px; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox{ height: auto !important; flex-grow: 1; } .main .portfolioArti .rightBox{ right: -75vw; } } @media screen and (max-width: 800px) { .main .portfolioArti .productBox .txt{ font-size:18px; } .main .portfolioArti .rightBox{ display: none; } .main .portfolioArti .slideBox{ width: 100%; margin-left: 0; } .main .portfolioArti .slideBox .portfolioSlide .item{ width: 100%; height: 100%; flex-direction: column; padding-bottom: 0; } .main .portfolioArti .imgBox{ width: 100%; height: 80vw; } .main .portfolioArti .slideBox .portfolioSlide .item .contentBox{ position: static; margin-top: 20px; margin-left: 0; width: 100%; } } @media screen and (max-width: 650px) { .main .portfolioArti{ padding: 100px 0 50px 0; } .main .portfolioArti .productBox{ padding: 30px 0; } } /* .main .applyArti */ .main .applyArti{ padding: 100px 0; } .main .applyArti .inner{ transform: translateY(20px); opacity: 0; transition: transform 1s, opacity 1s; } .main .applyArti.active .inner{ transform: translateY(0px); opacity: 1; } .main .applyArti h3{ text-align: center; } .main .applyArti .tableWrap{ margin-top: 70px; } .main .applyArti .tableWrap .list > li{ display: flex; border-bottom: 1px solid #dfdfdf; } .main .applyArti .tableWrap .list > li:hover{ color: var(--dark-purple); } .main .applyArti .tableWrap .list > li:last-child{ border-bottom: 1px solid #222; } .main .applyArti .tableWrap .list > li.title{ font-size: 18px; font-weight: 600; border-top: 1px solid #222; border-bottom: 1px solid #222; } .main .applyArti .tableWrap .list > li.title:hover{ color: #222; background-color: unset; } .main .applyArti .tableWrap .list > li div{ padding: 15px 10px; } .main .applyArti .tableWrap .list > li div.number{ width: 160px; flex-shrink: 0; } .main .applyArti .tableWrap .list > li div.title{ width: calc(100% - 160px - 160px - 100px - 100px) } .main .applyArti .tableWrap .list > li div.company{ width: 160px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main .applyArti .tableWrap .list > li div.name{ width: 100px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main .applyArti .tableWrap .list > li div.date{ width: 100px; flex-shrink: 0; } .main .applyArti .tableWrap .list > li div.title img{ margin-right: 10px; } .main .applyArti .tableWrap .list > li div.title a{display: flex; align-items: center;} .main .applyArti .tableWrap .list > li div.title span{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main .applyArti .btnWrap{ display: flex; justify-content: center; margin-top: 64px; } .main .applyArti .btnWrap a{ background-color: var(--dark-purple); color: #fff; padding: 20px 10px; width: 100%; max-width: 200px; text-align: center; border-radius: 4px; transition: background-color 0.5s; } .main .applyArti .btnWrap a:hover{ background-color: var(--main-bg-color); } @media screen and (max-width: 1250px) { .main .applyArti{ padding: 50px 0; } } @media screen and (max-width: 900px) { .main .applyArti .tableWrap .list > li div.number{ display: none; } .main .applyArti .tableWrap .list > li div.title{ width: calc(100% - 260px); } .main .applyArti .tableWrap .list > li div.company{ width: 100px; } .main .applyArti .tableWrap .list > li div.name{ width: 100px; } .main .applyArti .tableWrap .list > li div.date{ width: 60px; } /* .main .applyArti .tableWrap .list > li div.title{ } .main .applyArti .tableWrap .list > li div.company{ } .main .applyArti .tableWrap .list > li div.name{ } .main .applyArti .tableWrap .list > li div.date{ } */ } @media screen and (max-width: 650px) { .main .applyArti .tableWrap .list > li{ padding: 2.5px 2.5px; } .main .applyArti .tableWrap .list > li.title{ display: none; } .main .applyArti .tableWrap .list > li:nth-child(2){ border-top: 1px solid #222; } .main .applyArti .tableWrap .list > li div.name{ display: none; } .main .applyArti .tableWrap .list > li div.title{ width: calc(100% - 140px); } .main .applyArti .tableWrap .list > li div.company{ width: 80px; } .main .applyArti .btnWrap a{ padding: 15px 10px; } } /* .main .serviceArti */ .main .serviceArti{ background-image: url('../img/main/main_service_arti_bg.png'); background-size: cover; background-repeat: no-repeat; background-position: right center; padding: 150px 0; overflow: hidden; } .main .serviceArti .inner{ display: flex; flex-wrap: wrap; align-items: center; color: #fff; justify-content: space-between; } .main .serviceArti h2{ font-size: 30px; font-weight: 700; line-height: 1.5em; } .main .serviceArti h2 p.bg{ position: relative; display: inline-block; } .main .serviceArti h2 p.bg span{ position: relative; z-index: 1; display: inline-block; } .main .serviceArti h2 p.bg::before{ content:''; position: absolute; left: -5px; bottom: 0; display: block; width: 0; height: 100%; background-color: var(--dark-purple); transition: width 2s; border-radius: 4px; } .main .serviceArti.active h2 p.bg::before{ width: calc(100% + 10px); } .main .serviceArti .btnWrap a{ display: block; background-color: var(--dark-purple); color: #fff; padding: 24px 10px; border-radius: 4px; width:180px; text-align: center; font-weight: 600; transition: background-color 0.5s; } .main .serviceArti .btnWrap a:hover{ background-color: var(--main-bg-color); } @media screen and (max-width: 1250px) { .main .serviceArti h2{ font-size: 25px; } .main .serviceArti .btnWrap { margin-top: 40px; } } @media screen and (max-width: 750px) { .main .serviceArti h2{ width: 100%; text-align: center; } .main .serviceArti h2 p.bg::before{ display: none; } .main .serviceArti h2 p.bg span{ word-break: keep-all; } .main .serviceArti .btnWrap{ margin-top: 40px; width: 100%; display: flex; justify-content: center; } } @media screen and (max-width: 650px) { .main .serviceArti .inner{ transform: translateY(20px); opacity: 0; transition: transform 1s, opacity 1s; } .main .serviceArti.active .inner{ transform: translateY(0); opacity: 1; } .main .serviceArti{ padding: 80px 0; } .main .serviceArti h2{ font-size: 5vw; } .main .serviceArti .btnWrap a{ padding: 15px 10px; max-width: 180px; width: 100%; } } /* privacy popup */ .privacyPopup{ position: fixed; background-color: rgba(0, 0, 0, 0.60); width: 100%; height: 100%; z-index: 999; left: 0; top: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; } .privacyPopup.active{ opacity : 1; visibility: visible; } .privacyPopup .inner{ max-width: 600px; } .privacyPopup .contentWrap{ background-color: #fff; padding: 40px 30px; } .privacyPopup .contentWrap .titleBox{ display: flex; justify-content: space-between; align-items: center; } .privacyPopup .contentWrap .titleBox span{ font-weight: 600; font-size: 24px; } .privacyPopup .contentWrap .titleBox .closeBtn{ cursor: pointer; } .privacyPopup .contentWrap .contentBox{ margin-top: 30px; background-color: #F7F7F7; padding: 30px; max-height: 60vh; overflow-y: scroll; } @media screen and (max-width: 650px) { .privacyPopup .contentWrap{ padding: 30px 20px; } .privacyPopup .contentWrap .titleBox span{ font-size: 18px; } .privacyPopup .contentWrap .contentBox{ padding: 15px; margin-top: 20px; font-size: 14px; } } /* flotingMenu */ .floatingMenu{ position: fixed; right: 20px; bottom: 100px; z-index: 5; } .floatingMenu > li .topBtn{ background-color: #303030; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 60px; height: 60px; cursor: pointer; } @media screen and (max-width: 650px) { .floatingMenu{ right: 10px; } .floatingMenu > li .topBtn{ width: 10vw; height: 10vw; font-size: 3vw; } } /* sub banner */ .sub .sub-banner{ height: 480px; position: relative; overflow: hidden; display: flex; align-items: center; color: #fff; text-align: center; } .sub .sub-banner .inner{ position: relative; z-index: 2; width: 100%; } .sub .sub-banner .bg{ position: absolute; height: 100%; width: 100% ; left: 0; top: 0; background-image: url('../img/sub01/sub_sub01_banner.png'); background-size: cover; background-repeat: no-repeat; animation : subBannerBg 2s ease-in-out ; } .sub .sub-banner h1{ font-size: 26px; font-weight: 700; } .sub .sub-banner .txt{ line-height: 1.5em; } .sub .sub-banner .txt::before{ content:''; display: block; width: 20px; height: 2px; background-color: #fff; margin: 20px auto; } .sub .sub-banner .scrollBox{ position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding-bottom: 20px; animation: subBannerScroll 3s ease-in-out infinite; } .sub .sub-banner .boxWrap{ width: 290px ; height: 100%; position: absolute; z-index: 1; } .sub .sub-banner .boxWrap .box1{ background-color: rgba(255,255,255,0.4); width: 100%; height: 100%; } .sub .sub-banner .boxWrap .box2{ background-color: rgba(255,255,255,0.4); width: 90%; height: 100%; } .sub .sub-banner .boxWrap .box3{ background-color: rgba(255,255,255,0.4); width: 80%; height: 100%; } .sub .sub-banner .boxWrap .box4{ background-color: rgba(255,255,255,1); width: 70%; height: 100%; } .sub .sub-banner .boxWrap.leftBox{ transform: rotate(45deg); left: -120px; top: -220px; animation: subBannerLeft ease-in-out 2s; } .sub .sub-banner .boxWrap.rightBox{ transform: rotate(-135deg); right: -120px; bottom: -220px; animation: subBannerRight ease-in-out 2s; } @media screen and (max-width: 1250px) { .sub .sub-banner .boxWrap{ width: 20vw; } } @media screen and (max-width: 650px) { .sub .sub-banner .boxWrap{ width: 150px; } .sub .sub-banner h1{ font-size: 6vw;} } /* sub banner2 */ .sub .sub-banner2{ height: 480px; background-color: #dfdfdf; color: #fff; position: relative; overflow: hidden; border-bottom: 10px solid var(--main-bg-color); } .sub .sub-banner2 .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-image: url('../img/sub02/sub02_banner_bg.png'); background-repeat: no-repeat; background-position: center; animation: subBannerBg 2s ease-in-out; } .sub .sub-banner2 .left_circle{ position: absolute; left: -10vw; bottom: 0; animation:subBannerCircle ease-in-out 1s; width: 40vw; user-select: none; } .sub .sub-banner2 .right_circle{ position: absolute; right: -10vw; top: 0; animation:subBannerCircle ease-in-out 2s; width: 40vw; user-select: none; } .sub .sub-banner2 .inner{ height: 100%; display: flex; align-items: flex-end; position: relative; z-index:1; } .sub .sub-banner2 .titleBox{ margin-bottom: 76px; } .sub .sub-banner2 .titleBox .sitemap{ display: flex; flex-wrap: wrap; } .sub .sub-banner2 .titleBox .sitemap > li { margin-right: 36px; font-weight: 600; position: relative; display: flex; align-items: center; } .sub .sub-banner2 .titleBox .sitemap > li::after{ content:''; display: block; width: 14px; height: 14px; position: absolute; right: -26px; background-image: url('../img/fi_arrow-right.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } .sub .sub-banner2 .titleBox .sitemap > li:last-child::after{ display: none; } .sub .sub-banner2 .titleBox h1{ font-size: 100px; font-weight: 500; } @media screen and (max-width: 1250px) { .sub .sub-banner2 .titleBox h1{font-size: 80px;} } @media screen and (max-width: 650px) { .sub .sub-banner2 .titleBox .sitemap{ font-size: 14px; } .sub .sub-banner2 .titleBox h1{font-size: 9vw;} .sub .sub-banner2 .left_circle{ width: 60vw; } .sub .sub-banner2 .right_circle{ width: 60vw; } } /* .sub .sub01 - common */ .sub.sub01 .rovalArti{ padding: 100px 0; position: relative; } .sub.sub01 .rovalArti .inner{ position: relative; padding-bottom: 200px;} .sub.sub01 .rovalArti .bgWrap{ background-color: #D9D9D9; color: #fff; padding: 200px 150px 0 150px; font-size: 200px; font-weight: 700; overflow: hidden; border-radius: 400px; width: 100%; opacity: 0.2; } .sub.sub01 .rovalArti .bgWrap span{ display: block; transform: translateY(50px); } .sub.sub01 .rovalArti .contentBox{ position: absolute; right: -300px; bottom: 0; } .sub.sub01 .rovalArti .contentBox h2{ color: var(--dark-purple); font-size: 28px; font-weight: 700; position: relative; display: inline; } .sub.sub01 .rovalArti .contentBox h2::after{ content:''; display: inline-block; width: 0%; height: 2px; background-color: var(--dark-purple); position: absolute; bottom: 0; left: 0; transition: width 1s; } .sub.sub01 .rovalArti.active .contentBox h2::after{ width: 100%; } .sub.sub01 .rovalArti .contentBox ul{ display: flex; width: calc(100% + 20px); margin: 10px 0; margin-left: -10px; transform: translateX(200px); transition: transform 0.5s; } .sub.sub01 .rovalArti.active .contentBox ul{ transform: translateX(0); } .sub.sub01 .rovalArti .contentBox ul > li{ padding: 10px; } .sub.sub01 .rovalArti .contentBox ul > li .imgBox{ width: 260px; height: 350px; background-color: #dfdfdf; border-radius: 10px; background-repeat: no-repeat; background-size: cover; background-position: center; border: 1px solid var(--dark-purple); } .sub.sub01 .rovalArti .contentBox ul > li .imgBox.img01{ background-image: url('../img/sub01/sub01_1_img01.png'); } .sub.sub01 .rovalArti .contentBox ul > li .imgBox.img02{ background-image: url('../img/sub01/sub01_1_img02.png'); } .sub.sub01 .rovalArti .contentBox ul > li .imgBox.img03{ background-image: url('../img/sub01/sub01_1_img03.png'); } .sub.sub01 .rovalArti .contentBox .moreBtn{ color: var(--dark-purple); font-weight: 700; } @media screen and (max-width: 1810px) { .sub.sub01 .rovalArti .bgWrap{ padding: 50px 20px 0 70px ; } .sub.sub01 .rovalArti .bgWrap span{ font-size: 20vw; transform: translateY(6vw); } .sub.sub01 .rovalArti .contentBox{ right: 0; } } @media screen and (max-width: 1250px) { .sub.sub01 .rovalArti .inner{ padding-bottom: 0px; } .sub.sub01 .rovalArti .bgWrap{ display: none; padding: 20px 20px 100px 20px; border-radius: 20px; border-radius: 600px; position: absolute; right: 0; bottom: 0; } .sub.sub01 .rovalArti .contentBox{ width: 100%; padding: 10px; position: relative; z-index: 1; } .sub.sub01 .rovalArti .contentBox h2{ font-size: 25px; } .sub.sub01 .rovalArti .contentBox ul > li{ width: calc(100% / 3); } .sub.sub01 .rovalArti .contentBox ul > li .imgBox{ width: 100%; height: 40vw; } } @media screen and (max-width: 650px) { .sub.sub01 .rovalArti{ padding: 50px 0 100px 0; } .sub.sub01 .rovalArti .contentBox h2{ font-size: 20px; } .sub.sub01 .rovalArti .contentBox ul{ margin-left: -5px; width: calc(100% + 10px); transition: transform 1s; } .sub.sub01 .rovalArti .contentBox ul > li{ padding: 5px; } } @media screen and (max-width: 500px) { .sub.sub01 .rovalArti .contentBox h2{ font-size: 5vw; } } /* .sub .sub01_1 */ .sub.sub01_1 .companyArti{ padding: 70px 0; overflow: hidden; } .sub.sub01_1 .companyArti .halfBox{ display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; } .sub.sub01_1 .companyArti .halfBox > li{ width: calc(100% / 2); padding: 10px; } .sub.sub01_1 .companyArti .halfBox > li:nth-child(2){ display: flex; justify-content: flex-end; } .sub.sub01_1 .companyArti .halfBox > li .titleBox{ display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform: translateY(20px); transition: opacity 1s, transform 1s; } .sub.sub01_1 .companyArti.active .halfBox > li .titleBox{ opacity: 1; transform: translateY(0); } .sub.sub01_1 .companyArti .halfBox > li .titleBox h2{ font-size: 42px; font-weight: 700; color: var(--dark-purple); } .sub.sub01_1 .companyArti .halfBox > li .titleBox h2:before{ content:''; display: block; width: 100%; height: 70px; background-image: url('../img/sub01/sub01_1_crown.svg'); background-repeat: no-repeat; background-position: center bottom; background-size: contain; margin-bottom: 10px; } .sub.sub01_1 .companyArti .halfBox > li .titleBox h2::after{ content:''; display: block; width: 4px; height: 100px; background-color: var(--dark-purple); margin-top: 13px; } .sub.sub01_1 .companyArti .halfBox > li .contentBox{ margin-top: 25px; font-weight: 700; color: var(--dark-purple); line-height: 1.5em; } .sub.sub01_1 .companyArti .halfBox > li .company_logo{ max-width: 100%; transform: translateX(100px); opacity: 0; transition: transform 1.5s, opacity 1.5s; } .sub.sub01_1 .companyArti.active .halfBox > li .company_logo{ opacity: 1; transform: translateX(0); } @media screen and (max-width: 1250px) { .sub.sub01_1 .companyArti .halfBox > li .titleBox h2{ font-size: 38px; } } @media screen and (max-width: 850px) { .sub.sub01_1 .companyArti .halfBox > li:nth-child(1){ width: 60%; } .sub.sub01_1 .companyArti .halfBox > li:nth-child(2){ width: 40%; align-items: flex-end; } } @media screen and (max-width: 650px) { .sub.sub01_1 .companyArti .halfBox > li:nth-child(1){ width: 100%; } .sub.sub01_1 .companyArti .halfBox > li:nth-child(2){ width: 100%; justify-content: center; margin-top: 40px; } .sub.sub01_1 .companyArti .halfBox > li .titleBox h2{ text-align: center; margin: 0 auto; font-size: 7vw; } .sub.sub01_1 .companyArti .halfBox > li .titleBox h2::after{ margin: 20px auto 0 auto; height: 50px; } .sub.sub01_1 .companyArti .halfBox > li .contentBox{ text-align: center; margin:20px auto 0 auto; font-size: 3.5vw; } .sub.sub01_1 .companyArti .halfBox > li .company_logo{ width: 100%; max-width: 400px; margin-left: 10%; } } /* .sub .sub01_2 */ .sub.sub01_2 .subTitle{ background-color: var(--dark-purple); color: #fff; font-size: 28px; font-weight: 700; } .sub.sub01_2 .subTitle .inner{ background-image: url('../img/sub01/sub01_2_subtitle_bg.png'); background-repeat: no-repeat; padding: 30px 10px; background-size: 300px; background-position: left 100px bottom -40px; } @media screen and (max-width: 1250px) { .sub.sub01_2 .subTitle{ font-size: 24px; } .sub.sub01_2 .subTitle .inner{ padding: 20px 10px; } } @media screen and (max-width: 650px) { .sub.sub01_2 .subTitle{ font-size: 18px; } .sub.sub01_2 .subTitle .inner{ padding: 15px 10px; } } .sub.sub01_2 .mapArti{ padding: 50px 0 0 0; } .sub.sub01_2 .mapArti .mapBox{ border: 6px solid var(--dark-purple); overflow: hidden; } .sub.sub01_2 .mapArti .mapBox iframe{ transform: scale(1.01);} .sub.sub01_2 .mapArti .infoWrap{ display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; } .sub.sub01_2 .mapArti .infoWrap > li { flex-grow: 2; padding: 10px; } .sub.sub01_2 .mapArti .infoWrap > li.map{ width: 100%; } .sub.sub01_2 .mapArti .infoWrap > li:nth-child(4){ flex-grow: 1; } .sub.sub01_2 .mapArti .infoWrap > li:nth-child(5){ flex-grow: 1; } .sub.sub01_2 .mapArti .infoWrap > li .titleBox{ width: calc(100% - 50px); background-color: var(--dark-purple); color: #fff; padding: 40px 30px; margin-top: -50px; margin-left: 50px; background-image: url('../img/sub01/sub01_2_subtitle_bg.png'); background-repeat: no-repeat; background-position: right bottom; background-size: 45%; position: relative; z-index: 2; } .sub.sub01_2 .mapArti .infoWrap > li .titleBox .t1{ font-weight: 600; font-size: 20px; } .sub.sub01_2 .mapArti .infoWrap > li .titleBox h3{ margin-top: 50px; font-weight: 600; font-size: 24px; } .sub.sub01_2 .mapArti .infoWrap > li .titleBox .t2{ margin-top: 6px; font-size: 18px; } .sub.sub01_2 .mapArti .infoWrap > li .itemBox { display: flex; align-items: flex-start; font-weight: 600; } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .label{ display: flex; align-items: center; margin-right: 10px; flex-shrink: 0; } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .iconBox{ width: 46px; height: 46px; background-color: rgba(137, 124, 165, 0.3); border-radius: 50%; margin-right: 10px; background-size: contain; background-repeat: no-repeat; background-position: center; } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .iconBox.address{ background-image: url('../img/sub01/sub01_2_mapicon.png'); } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .iconBox.tel{ background-image: url('../img/sub01/sub01_2_telicon.png'); } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .iconBox.fax{ background-image: url('../img/sub01/sub01_2_faxicon.png'); } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .content{ margin-top: 14px; color: #777; line-height: 1.5em; } @media screen and (max-width: 1250px) { .sub.sub01_2 .mapArti .infoWrap > li.map{ order: 1; } .sub.sub01_2 .mapArti .infoWrap > li:nth-child(2){ width: 100%; order: 0; } .sub.sub01_2 .mapArti .infoWrap > li:nth-child(3){ order: 2; } .sub.sub01_2 .mapArti .infoWrap > li:nth-child(4){ order: 3; } .sub.sub01_2 .mapArti .infoWrap > li:nth-child(5){ order: 4; } .sub.sub01_2 .mapArti .infoWrap > li .titleBox{ background-size: 150px; padding: 20px; } .sub.sub01_2 .mapArti .infoWrap > li .titleBox{ margin-left: 0; margin-top: 0; width: 100%; } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .content{ margin-top: 12px; } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .iconBox{ width: 30px; height: 30px; background-size: 150%; } .sub.sub01_2 .mapArti .infoWrap > li .itemBox .content{ margin-top:2px; } } /* .sub .contentArti */ .sub .contentArti{ padding: 150px 0; position: relative; overflow: hidden; } .sub .contentArti.s_padding{ padding: 80px 0; } .sub .contentArti::before{ content:''; display: block; width: 100%; height: 1px; background-color: #E4E4E4; position: absolute; left: 0; top: 260px; } .sub .contentArti::after{ content:''; display: block; width:1px; height: 100%; background-color: #E4E4E4; position: absolute; left: calc(((100% - 1200px) / 2) - 15px); top: 0; } .sub .contentArti .inner{ position: relative; z-index: 1; } .sub .contentArti.s_padding{ padding: 80px 0 20px 0; } .sub .contentArti + .contentArti{ padding-top: 0; } .sub .contentArti + .contentArti::before{ top: 0; } @media screen and (max-width: 1250px) { .sub .contentArti::after{ left: 19px; } .sub .contentArti .inner{ padding: 0 10px 0 30px; } .sub .contentArti::before{ top: 230px; } } @media screen and (max-width: 650px) { .sub .contentArti{ padding: 100px 0; } .sub .contentArti::before{ top: 160px; } } /* .sub .contentArti - titleBox */ .sub .contentArti .titleBox p{ color: var(--main-bg-color); font-weight: 700; } .sub .contentArti .titleBox h2{ font-size: 52px; font-weight: 700; margin-top: 50px; } @media screen and (max-width: 1250px) { .sub .contentArti .titleBox h2{ font-size: 45px; margin-top: 30px; } } @media screen and (max-width: 650px) { .sub .contentArti .titleBox h2{ font-size: 25px; margin-top: 20px; } } /* .sub .contentArti - categoryBox */ .sub .contentArti .categoryBox{ display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; } .sub .contentArti .categoryBox > li{ width: calc(100% / 2); padding: 10px; } .sub .contentArti .categoryBox > li .item{ height: 400px; border: 1px solid var(--dark-purple); display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; } .sub .contentArti .categoryBox > li .item:hover{ border-color: var(--main-bg-color); } .sub .contentArti .categoryBox > li .item .imgBox{ height: 310px; overflow: hidden; } .sub .contentArti .categoryBox > li .item .imgBox .img{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: left top; background-color: #fff; background-size: 100%; transition: transform 0.5s; transform-origin: bottom right; } .sub .contentArti .categoryBox > li .item:hover .imgBox .img{ transform: scale(1.2); } .sub .contentArti .categoryBox > li .item .imgBox .img.img01{ background-image: url('../img/sub02/sub02_1_category01.png'); } .sub .contentArti .categoryBox > li .item .imgBox .img.img02{ background-image: url('../img/sub02/sub02_1_category02.png'); } .sub .contentArti .categoryBox > li .item .imgBox .img.img03{ background-image: url('../img/sub02/sub02_1_category03.png'); } .sub .contentArti .categoryBox > li .item .imgBox .img.img04{ background-image: url('../img/sub02/sub02_1_category04.png'); } .sub .contentArti .categoryBox > li .item .titleBox{ flex-grow: 1; font-size: 24px; font-weight: 700; padding: 20px; display: flex; align-items: center; transition: color 0.5s; } .sub .contentArti .categoryBox > li .item:hover .titleBox{ color: var(--main-bg-color); } @media screen and (max-width: 1250px) { .sub .contentArti .categoryBox > li .item{ height: 100%; } .sub .contentArti .categoryBox > li .item .imgBox{ height: 30vw; background: pink; } .sub .contentArti .categoryBox > li .item .titleBox{ align-items: flex-start; padding: 20px 10px; } } @media screen and (max-width: 650px) { /* .sub .contentArti .categoryBox > li{ width: 100%; } */ .sub .contentArti .categoryBox{ width: calc(100% + 10px); margin-left: -5px; } .sub .contentArti .categoryBox > li{ padding: 5px; } .sub .contentArti .categoryBox > li .item{ border-radius: 10px; } .sub .contentArti .categoryBox > li .item .imgBox{ height: 35vw; } .sub .contentArti .categoryBox > li .item .titleBox{ font-size: 18px; } } /* .sub .sub02_1*/ .sub.sub02_1 .contentArti .categoryWrap{ display: flex; flex-wrap: wrap; } .sub.sub02_1 .contentArti .categoryWrap > li:nth-child(2){ flex-grow: 1; padding-left: 140px; } @media screen and (max-width: 1250px) { .sub.sub02_1 .contentArti .categoryWrap > li:nth-child(2){ padding-left: 100px; } } @media screen and (max-width: 1100px) { .sub.sub02_1 .contentArti .categoryWrap > li{ width: 100%; } .sub.sub02_1 .contentArti .categoryWrap > li:nth-child(2){ padding-left: 0; margin-top: 40px; } } @media screen and (max-width: 650px) { .sub.sub02_1 .contentArti .categoryWrap > li:nth-child(2){ margin-top: 20px; } } /* .sub .contentArti .contentWrap */ .sub .contentArti .titleBox + .contentWrap{ margin-top: 80px; } .sub .contentArti .contentWrap{ display: flex; margin:40px 0; align-items: flex-start; } .sub .contentArti .contentWrap > .titleBox{ font-size: 32px; font-weight: 700; position: relative; display: flex; align-items: flex-start; width: 200px; } .sub .contentArti .contentWrap > .titleBox::before{ content:''; display: block; background-color: var(--main-bg-color); width: 20px; height: 20px; border-radius: 50%; position: absolute; left: -25px; top: 10px; } .sub .contentArti:last-child .contentWrap{ padding-bottom: 100px; } .sub .contentArti .contentWrap > .contentBox{ width: calc(100% - 200px); } .sub .contentArti .contentWrap > .contentBox p{ line-height: 1.5em; font-size: 20px; word-break: keep-all; } .sub .contentArti .contentWrap > .contentBox p + p{ margin-top: 20px; } .sub .contentArti .contentWrap > .contentBox p.gray{ color: #7F7F7F; } .sub .contentArti .contentWrap > .contentBox p.small{ font-size: 18px; } .sub .contentArti .contentWrap > .contentBox p.top-mg{ margin-top: 70px; } .sub .contentArti .contentWrap > .contentBox p.title{ font-size: 24px; font-weight: 700; padding: 10px 0; } .sub .contentArti .contentWrap > .contentBox p.purple{ color: var(--main-bg-color); } .sub .contentArti .contentWrap > .contentBox .tableWrap + p.title{ margin-top: 20px; } .sub .contentArti .imgWrap{ margin-top: 80px; overflow: hidden; border: 1px solid var(--main-bg-color); border-radius: 10px; display:flex; justify-content: center; align-items: center; } .sub .contentArti .imgWrap:first-child{ margin-top: 0; } .sub .contentArti .imgWrap img{ max-width: 100%; } .sub .contentArti .contentWrap .contentDiv{ margin-top: 100px; } @media screen and (max-width: 1250px) { .sub .contentArti .contentWrap > .titleBox{ width: 150px; } .sub .contentArti .contentWrap > .titleBox::before{ left: -17.5px; width: 15px; height: 15px; top: 8px; } .sub .contentArti .contentWrap > .contentBox{ width: calc(100% - 150px); } .sub .contentArti .contentWrap > .contentBox p{ font-size: 18px; } .sub .contentArti .contentWrap > .contentBox p.title{ font-size: 22px; } .sub .contentArti .contentWrap > .contentBox p.small{ font-size: 16px; } .sub .contentArti .contentWrap .contentDiv{ margin-top: 60px; } } @media screen and (max-width: 650px) { .sub .contentArti .contentWrap{ flex-wrap: wrap; } .sub .contentArti .contentWrap > .titleBox{ width: 100%; margin-bottom: 20px; font-size: 25px; } .sub .contentArti .contentWrap > .contentBox{ width:100%; } .sub .contentArti .contentWrap > .contentBox p{ font-size: 16px; } .sub .contentArti .contentWrap > .contentBox p.title{ font-size: 20px; } .sub .contentArti .contentWrap > .contentBox p.small{ font-size: 14px; } .sub .contentArti .imgWrap{ margin-top: 40px; } .sub .contentArti .contentWrap .contentDiv{ margin-top: 50px; } .sub .contentArti .contentWrap > .contentBox p.top-mg{ margin-top: 30px; } } /* .sub .contentArti .tableWrap */ .sub .contentArti .tableWrap table{ width: 100%; font-size: 20px; border-collapse: collapse } .sub .contentArti .tableWrap table tr{ border-top: 1px solid #BEBEBE; } .sub .contentArti .tableWrap table .purple_bg{ background-color: rgba(137, 124, 165, 0.10); } .sub .contentArti .tableWrap table .purple_bg2{ background: rgba(137, 124, 165, 0.30); } .sub .contentArti .tableWrap table .gray_bg{ background-color: #F7F7F7; } .sub .contentArti .tableWrap table tr td + td{ border-left: 1px solid #BEBEBE; } .sub .contentArti .tableWrap table tr:last-child{ border-bottom: 1px solid #BEBEBE; } .sub .contentArti .tableWrap table tr td{padding: 20px;} .sub .contentArti .tableWrap table tr td.center{ text-align: center; } .sub .contentArti .tableWrap table tr td.border-left{ border-left: 1px solid #BEBEBE; } .sub .contentArti .tableWrap table tr td.border-bottom{ border-bottom: 1px solid #BEBEBE; } @media screen and (max-width: 1250px) { .sub .contentArti .tableWrap table{ font-size: 18px; } } @media screen and (max-width: 800px) { .sub .contentArti .tableWrap{ overflow-x: scroll; } /* .sub .contentArti .tableWrap table{ min-width: 600px; } */ } @media screen and (max-width: 650px) { .sub .contentArti .tableWrap table{ font-size: 3.2vw; /* min-width: 400px; */ } .sub .contentArti .tableWrap table tr td{ padding: 10px; } } /* .sub .sub02_2 */ .sub.sub02_2 .info_list{ margin-top: 50px; display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; } .sub.sub02_2 .info_list > li{ padding: 10px; width: calc(100% / 2); } .sub.sub02_2 .info_list > li .item{ height: 100%; border: 1px solid var(--dark-purple); border-radius: 4px; text-align: center; padding: 40px 20px; font-size: 20px; line-height: 1.5em; word-break: keep-all; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1250px) { .sub.sub02_2 .info_list > li .item{ font-size: 18px; } } @media screen and (max-width: 830px) { .sub.sub02_2 .info_list > li{ width: 100%; } .sub.sub02_2 .info_list > li .item br{ display: none; } } @media screen and (max-width: 650px) { .sub.sub02_2 .info_list{ margin-top: 30px; } .sub.sub02_2 .info_list > li .item{ font-size: 16px; padding: 15px 10px; } } /* .sub .sub02_3 */ .sub.sub02_3 .content01 .contentBox .imgWrap img{ width: 100%; } .sub.sub02_3 .contentArti .contentWrap > .contentBox p + p.gray{ margin-top: 10px; } @media screen and (max-width: 650px) { .sub.sub02_3 .contentArti .tableWrap table tr td{ padding: 10px 5px; } } /* .sub .sub03 */ .sub.sub03 .sub-banner2 .bg{ background-image: url('../img/sub03/sub03_banner_bg.png'); } /* sub .listArticle*/ .sub .listArticle{ padding: 150px 0; } .sub.sub03 .listArticle{ background-image: url('../img/list_article_bg.png'); background-size: 100%; background-position: top right; } .sub .listArticle .gallery_list{ display: flex; flex-wrap: wrap; width: calc(100% + 40px); margin-left: -20px; } .sub .listArticle .gallery_list > li { padding: 20px; width: calc(100% / 2); } .sub .listArticle .gallery_list > li .item{ border: 1px solid var(--dark-purple); border-radius: 4px; overflow: hidden; background-color: #fff; } .sub .listArticle .gallery_list > li .item .imgBox{ background-image: url("../img/no_img.png"); height: 540px; background-color: #E7E7E7; background-repeat: no-repeat; background-position: center; background-size: 50%; } .sub .listArticle .gallery_list > li .item .textWrap{ padding: 20px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; overflow: hidden; } .sub .listArticle .gallery_list > li .item .textWrap .info{ width: calc(100% - 220px); } .sub .listArticle .gallery_list > li .item .textWrap .title{ font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub .listArticle .gallery_list > li .item .textWrap .content{ margin-top: 10px; color: #777; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub .listArticle .gallery_list > li .item .textWrap .btnWrap{ flex-shrink: 0; margin-left: 20px; } .sub .listArticle .gallery_list > li .item .textWrap .btnWrap .moreBtn{ background-color: var(--dark-purple); color: #fff; padding: 20px 10px; border: 1px solid var(--dark-purple); width: 200px; font-weight: 600; border-radius: 4px; font-size: 20px; } .sub .listArticle .gallery_list > li .modifyBtn{ border: 1px solid #7f7f7f ; margin-top: 20px; display: inline-block; color: #7f7f7f; background-color: #fff; padding: 10px 20px; border-radius: 4px; } .sub .listArticle .plusBtn{ background-color: var(--dark-purple); color: #fff; padding: 20px; border-radius: 6px; border: 1px solid var(--dark-purple); width: 100%; max-width: 200px; font-weight: 600; font-size: 22px; margin: 100px auto 0 auto; border-radius: 0; display: block; border-radius: 4px; } @media screen and (max-width: 1250px) { .sub .listArticle .gallery_list{ width: calc(100% + 20px); margin-left: -10px; } .sub .listArticle .gallery_list > li{ padding: 10px; } .sub .listArticle .gallery_list > li .item .imgBox{ height: 43vw; } .sub .listArticle .gallery_list > li .item .textWrap .title{ font-size: 22px; } .sub .listArticle .gallery_list > li .item .textWrap .content{ font-size: 18px; } .sub .listArticle .gallery_list > li .item .textWrap .btnWrap .moreBtn{ width: 160px; font-size: 18px; } .sub .listArticle .gallery_list > li .item .textWrap .info{ width: calc(100% - 180px); } .sub .listArticle .plusBtn{ font-size: 20px; } } @media screen and (max-width: 900px) { .sub .listArticle .gallery_list > li .item .textWrap{ flex-wrap: wrap; padding: 20px 15px; } .sub .listArticle .gallery_list > li .item .textWrap .info{ width: 100%; } .sub .listArticle .gallery_list > li .item .textWrap .btnWrap{ width: 100%; margin-left: 0; margin-top: 15px; } .sub .listArticle .gallery_list > li .item .textWrap .btnWrap .moreBtn{ width: 100%; font-size: 16px; padding: 15px 10px; } .sub .listArticle .plusBtn{ font-size: 16px; } } @media screen and (max-width: 650px) { .sub .listArticle{ padding: 50px 0; } .sub .listArticle .gallery_list > li{ width: 100%; } .sub .listArticle .gallery_list > li .item .imgBox{ height: 85vw; } .sub .listArticle .gallery_list > li .item .textWrap .title{ font-size: 18px; } .sub .listArticle .gallery_list > li .item .textWrap .content{ font-size: 16px; } .sub .listArticle .gallery_list > li .item .textWrap .btnWrap{ margin-top: 30px; } .sub .listArticle .plusBtn{ margin-top: 50px; } } /* .portfolioPopup */ .portfolioPopup{ position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.60); left: 0; top: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; } .portfolioPopup.active{ opacity: 1; visibility: visible; } .portfolioPopup .contentWrap{ background-color: #fff; padding: 20px; } .portfolioPopup .contentWrap .titleBox{ display: flex; align-items: flex-start; justify-content: space-between; } .portfolioPopup .contentWrap .titleBox .titleArea .title{ font-size: 32px; font-weight: 600; } .portfolioPopup .contentWrap .titleBox .titleArea .sub_title{ font-size: 18px; font-weight: 600; color: #7F7F7F; margin-top: 5px; } .portfolioPopup .contentWrap .titleBox .btnWrap{ margin-left: 40px; flex-shrink: 0; } .portfolioPopup .contentWrap .titleBox .btnWrap img{ cursor: pointer; } .portfolioPopup .contentWrap .contentBox{ max-height: 65vh; overflow-y: scroll; margin-top: 20px; } .portfolioPopup .contentWrap .contentBox img{ max-width: 100%; } @media screen and (max-width: 1250px) { .portfolioPopup .contentWrap .titleBox .titleArea .title{ font-size: 26px; } .portfolioPopup .contentWrap .titleBox .titleArea .sub_title{ font-size: 18px; } } @media screen and (max-width: 650px) { .portfolioPopup .contentWrap{ padding: 20px 10px; } .portfolioPopup .contentWrap .titleBox .titleArea .title{ font-size: 24px; } .portfolioPopup .contentWrap .titleBox .titleArea .sub_title{ font-size: 16px; } } /*---------------- write ---------------*/ .write_page .title_box{display:flex; } .write_page .title_box li{display:flex; border-bottom:1px solid #e5e5e5; } .write_page .title_box li:first-child{border-top:1px solid #e5e5e5; } .write_page .title_box li .label_content input[type=text]{padding:12px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%; } .write_page .title_box li .label_content input[type=password]{padding:12px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%; } .write_page .title_box li .label_content input[type=email]{padding:12px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%; } .write_page .title_box .label{width:120px; background:#F7F7F7; padding:20px 16px; font-size:14px; display:flex; align-items: center; } .write_page .title_box .label b{ color: #EB5757; margin-left: 2px; } .write_page .title_box .label_content{padding:8px 16px;} .write_page .title_box.full_box li{width:100%; } .write_page .title_box.full_box li .label_content{width:calc(100% - 120px); font-size:14px; display:flex; align-items: center; } .write_page .title_box.half_box li{width:50%; } .write_page .title_box.half_box li .label_content{width:calc(100% - 120px); font-size:14px; } .write_page .title_box li .label_content select{ padding:12px; width:100%; max-width:300px; border: 1px solid #E6E6E6; border-radius: 4px;} .write_page .title_box li .label_content label{ margin-right:5px; } .write_page .title_box li .label_content label input[type=checkbox]{ margin-right:2px; } .write_page .dhtml_box { margin-top:40px; } .write_page .dhtml_box .sub_title{display:block; font-size:14px; margin-top:10px; } .write_page .dhtml_box textarea{ width:100%; border-radius: 4px; height:130px; border: 1px solid #E6E6E6; padding:15px 10px; font-size:14px; margin-top:5px; } .write_page .add_form{ margin-top:20px; } .write_page .add_form .label{ margin-bottom: 10px; } .write_page .add_form .add_box input{background-repeat: no-repeat; background-position: left 20px center; } .write_page .add_form .add_box input[type="text"]{ border:1px solid #e6e6e6; margin-bottom:10px; padding:20px 20px 20px 56px; width:100%; border-radius:8px; background-image: url('../img/board_img/write_link_icon.png'); } .write_page .add_form .add_box input[type="file"]{ border:1px solid #e6e6e6; margin-bottom:10px; padding:20px 20px 20px 56px; width:100%; border-radius:8px; background-image: url('../img/board_img/write_file_icon.png'); } .write_page .add_form .file_del_box{display:flex; justify-content: flex-end; margin-bottom:5px; font-size:14px; } .write_page .add_form .file_del_box label{color:#999;} .write_page .add_form .file_del_box input[type=checkbox]{margin-right:3px; } .write_page .write_btn_box{display:flex; justify-content: flex-end; margin-top:20px; } .write_page .write_btn_box .cancelBtn{display:block; padding:16px 20px; border: 1px solid #CCCCCC; border-radius: 4px; margin-right:10px; } .write_page .write_btn_box .submitBtn{padding:16px 20px; border-radius:4px; border:none; background: var(--dark-purple) ; color:#fff; } @media screen and (max-width: 1250px) { .write_page .title_box{flex-wrap: wrap;} .write_page .title_box.half_box li{width:100%; } } @media screen and (max-width: 700px) { .write_page{ font-size: 14px; } .write_page .title_box .label{ width:100px; font-size:12px; } .write_page .title_box li .label_content select{ font-size:12px;} .write_page .title_box li .label_content label{ font-size:12px; } .write_page .title_box li .label_content input[type=text]{ font-size:12px; } .write_page .title_box li .label_content input[type=password]{ font-size:12px; } .write_page .title_box li .label_content input[type=email]{ font-size:12px; } .write_page .add_form .file_del_box label{ font-size:12px; } .write_page .title_box.half_box li .label_content{width:calc(100% - 100px); } .write_page .title_box.full_box li .label_content{ width:calc(100% - 100px) } .write_page .add_form .add_box input[type="text"]{ font-size: 14px; } .write_page .add_form .add_box input[type="file"]{ font-size: 14px; } .write_page .write_btn_box{ font-size: 14px; } } /*------------------ write end ------------------*/ /* .sub .formArti */ .sub .formArti{ padding: 100px 0; position: relative; overflow: hidden; } .sub .formArti .categoryTitleBox{ font-size: 24px; font-weight: 700; padding: 13px 0; margin-bottom: 30px; position: relative; } .sub .formArti .categoryTitleBox::after{ content:''; display: block; width: 100%; height: 1px; background-color: #E4E4E4; position: absolute; left:-0%; bottom: 0; } @media screen and (max-width: 1250px) { .sub .formArti .categoryTitleBox{ font-size: 20px; } } @media screen and (max-width: 650px) { .sub .formArti{ padding: 50px 0; } .sub .formArti .categoryTitleBox{ font-size: 18px; } } /* .sub .subSiteMap */ .sub .subSiteMap ul{ display: flex; flex-wrap: wrap; font-weight: 600; } .sub .subSiteMap ul > li{ margin-right: 36px; display:flex; align-items: center; position: relative; } .sub .subSiteMap ul > li::after{ content:''; display: block; position: absolute; width: 14px; height: 14px; background-image: url('../img/fi_arrow-right-black.png'); background-repeat: no-repeat; background-position: center; background-size: contain; right: -26px; } .sub .subSiteMap ul > li:last-child:after{ display: none; } @media screen and (max-width: 650px) { .sub .subSiteMap ul{ font-size: 14px; } } /* .sub .sub04_1 */ .sub.sub04_1 .titleBox{ padding: 25px 0; border-bottom: 1px solid #E4E4E4; display: flex; flex-wrap:wrap; } .sub.sub04_1 .titleBox h2{ font-weight: 600; font-size: 48px; width: 280px; } .sub.sub04_1 .titleBox .content{ width: calc(100% - 280px); font-size: 20px; line-height: 1.5em; color: #7F7F7F; font-weight: 400; } .sub.sub04_1 .formBox{ margin-top: 56px; } .sub.sub04_1 .formBox .help{ color: #EB5757; } .sub.sub04_1 .formBox .formList{ display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; border-bottom: 1px solid #E4E4E4; padding-bottom: 50px; } .sub.sub04_1 .formBox .formList > li{ width: calc(100% / 2); padding: 10px; } .sub.sub04_1 .formBox .formList > li.half{ width: calc(100% / 4); } .sub.sub04_1 .formBox .formList > li .label{ font-size: 20px; font-weight: 400; } .sub.sub04_1 .formBox .formList > li .label.required::after{ content:'*'; color : #EB5757; margin-left: 2px; } .sub.sub04_1 .formBox .formList > li .iptWrap{ margin-top: 10px; display: flex; align-items: center; } .sub.sub04_1 .formBox .formList > li .iptWrap .ipt{ width: 100%; border: 1px solid #EEEEEE; background-color: #EEEEEE; padding: 15px; border-radius: 5px; } .sub.sub04_1 .formBox .formList > li .iptWrap .radioWrap{ display: flex; align-items: center; } .sub.sub04_1 .formBox .formList > li .iptWrap .radioWrap > li{ margin-right: 40px; position: relative; } .sub.sub04_1 .formBox .formList > li .iptWrap .radioWrap > li input[type="radio"]{ position: absolute; left: 3px; top: 3px; } .sub.sub04_1 .formBox .formList > li .iptWrap .radioWrap > li input[type="radio"] + label{ padding-left: 25px; } .sub.sub04_1 .formBox .formList > li .iptWrap .radioWrap > li input[type="radio"] + label::before{ content:''; width: 20px; height: 20px; background-color: #fff; position: absolute; left: 0; border:1px solid #7F7F7F; border-radius: 50%; } .sub.sub04_1 .formBox .formList > li .iptWrap .radioWrap > li input[type="radio"]:checked + label::before{ border-color: #EB5757; background-image: url('../img/radio_icon.png'); background-repeat: no-repeat; background-position: center; background-size:70%; } .sub.sub04_1 .formBox .formList > li .iptWrap input[type="file"]::-webkit-file-upload-button{ background-color: #C4C4C4; color: #fff; padding: 8px 20px; border: none; border-radius: 4px; margin-right: 20px; } .sub.sub04_1 .formBox .checkboxWrap{ padding: 30px 0; color: #7F7F7F; letter-spacing: -1.5px; } .sub.sub04_1 .formBox .checkboxWrap span.red{ color: #EB5757; } .sub.sub04_1 .formBox .checkboxWrap input[type="checkbox"]{ display: none; } .sub.sub04_1 .formBox .checkboxWrap input[type="checkbox"] + label{ padding-left: 25px; position: relative; } .sub.sub04_1 .formBox .checkboxWrap input[type="checkbox"] + label::before{ content:''; display: inline-block; width: 20px; height: 20px; position: absolute; left: 0; top: 1px; border: 1px solid #7F7F7F; border-radius: 50%; } .sub.sub04_1 .formBox .checkboxWrap input[type="checkbox"]:checked + label::before{ background-image: url('../img/radio_icon.png'); background-repeat: no-repeat; background-size: 60%; background-position: center; } .sub.sub04_1 .buttonWrap{ display: flex; justify-content: center; align-items: center; gap: 20px; font-size: 22px; margin-top: 60px; } .sub.sub04_1 .buttonWrap .cancelBtn{ background-color: #fff; color: #BEBEBE; border: 1px solid #BEBEBE; border-radius: 4px; padding: 20px 50px; } .sub.sub04_1 .buttonWrap .submitBtn{ background-color: var(--dark-purple); color: #fff; padding: 20px 50px; border-radius: 4px; border: none; } @media screen and (max-width: 1250px) { .sub.sub04_1 .titleBox h2{ width: 100%; font-size: 40px; } .sub.sub04_1 .titleBox .content{ width: 100%; margin-top: 20px; font-size: 18px; } .sub.sub04_1 .formBox .formList > li .label{ font-size: 18px; } .sub.sub04_1 .formBox .formList > li:nth-child(5){ width: 100%; } .sub.sub04_1 .formBox .formList > li.half{ width: 50%; } .sub.sub04_1 .buttonWrap{ font-size: 18px; } } @media screen and (max-width: 650px) { .sub.sub04_1 .titleBox h2{ font-size: 24px; } .sub.sub04_1 .titleBox .content{ font-size: 16px; word-break: keep-all; } .sub.sub04_1 .formBox .help{ font-size: 14px; } .sub.sub04_1 .formBox .formList > li{ width: 100%; } .sub.sub04_1 .formBox .formList > li.half{ width: 100%; } .sub.sub04_1 .formBox .formList > li .label{ font-size: 16px; } .sub.sub04_1 .formBox{ margin-top: 40px; } .sub.sub04_1 .formBox .checkboxWrap input[type="checkbox"] + label{ font-size: 14px; } .sub.sub04_1 .formBox .checkboxWrap input[type="checkbox"] + label::before{ top: 0; } .sub.sub04_1 .buttonWrap{ font-size: 16px; margin-top: 30px; } .sub.sub04_1 .buttonWrap .cancelBtn{ padding: 10px 20px; } .sub.sub04_1 .buttonWrap .submitBtn{ padding: 10px 20px; } } /*--------------- basic list ------------*/ .basic_list .basic_list_table{border-collapse: collapse; table-layout: fixed; width:100%; margin-top:10px; } .basic_list .basic_list_table tr.table_th{ background-color: rgba(137, 124, 165, 0.10); } .basic_list .basic_list_table tr .list_number{text-align: center; width:10%; } .basic_list .basic_list_table tr .list_title{width:100%; } .basic_list .basic_list_table tr .list_title a{display:flex; } .basic_list .basic_list_table tr .list_writer{ text-align: center; width:10%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .basic_list .basic_list_table tr .list_hit{text-align: center; width:10%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .basic_list .basic_list_table tr .list_date{text-align: center; width:10%;} .basic_list .basic_list_table tr .list_title a .titleBox{display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align: middle; } .basic_list .basic_list_table tr .list_title .reple_box{background:#666; color:#fff; display:inline-block; padding:0px 6px; font-size:12px; border-radius:4px; } .basic_list .basic_list_table tr .list_title a .iconWrap{ flex-shrink: 0; margin-right: 5px; } .basic_list .basic_list_table tr .list_title a .iconWrap2{ width:110px; flex-shrink: 0; padding-left:5px;} .basic_list .basic_list_table tr input[type=checkbox]{margin-right:5px; } .basic_list .basic_list_table tr th{padding:16px 5px; border-top:1px solid #e6e6e6; } .basic_list .basic_list_table tr td{padding:16px 5px; border-top:1px solid #e6e6e6; } .basic_list .basic_list_table tr td.list_number.on{color:#40647D; font-size:14px; } .basic_list .basic_list_table tr:last-child td{ border-bottom:1px solid #e6e6e6; } @media screen and (max-width: 1250px) { /* .basic_list .basic_list_table tr .list_hit{display:none; } */ /* .basic_list .basic_list_table tr .list_writer{display:none; } */ .basic_list .basic_list_table tr .list_title a .iconWrap2{display:none; } } @media screen and (max-width: 700px) { /* .basic_list .table_th{ display:none; } */ .basic_list .basic_list_table{ font-size: 14px; } .basic_list .basic_list_table tr .list_number{ display: none; } .basic_list .basic_list_table tr .list_writer{ width: 70px; } .basic_list .basic_list_table tr .list_hit{ width: 60px; } .basic_list .basic_list_table tr .list_date{ width: 50px; } .basic_list .basic_list_table tr td.list_number.on{ font-size:12px; } } /*---------------- basic list end ---------------*/ /*-------------- search-box --------------*/ .search-box{ padding:20px 0; max-width:400px; } .search-box .serach-form{ display:flex; } .search-box .serach-form select{ display:block; width:30%; padding:7px 10px; border: 1px solid #E6E6E6; border-radius:4px; } .search-box .serach-form .search-ipt-box{ width:70%; position:relative; padding-left:5px; } .search-box .serach-form .search-ipt-box .search-ipt{ display:block; width:100%; padding:7px 30px 7px 10px; border: 1px solid #E6E6E6; border-radius:4px; } .search-box .serach-form .search-ipt-box .search-btn{ position:absolute; top:0; right:2px; height:100%; background:none; border: none; display:flex; align-items: center; justify-content: center; padding:0 5px; } @media screen and (max-width: 700px) { .search-box .serach-form{ font-size: 14px; } .search-box{ width:100%; max-width: 100%; padding:20px 10px; } .search-box .serach-form select{ width: 110px; } .search-box .serach-form .search-ipt-box{ width: calc( 100% - 110px ) ; } } /*-------------- search-box end-----------*/ /* .sub .sub04_2 */ .sub.sub04_2 .listArticle h2{ text-align: center; padding: 25px 0; font-size: 32px; font-weight: 700; } @media screen and (max-width: 1250px) { .sub.sub04_2 .listArticle h2{ margin-top: 20px; font-size: 28px; } } @media screen and (max-width: 650px) { .sub.sub04_2 .listArticle h2{ margin-top: 20px; font-size: 24px; } } /*-------------- view page -------------*/ .view_page{margin-top:50px; } .view_page .titleBox li{ display:flex; border-bottom:1px solid #dfdfdf; } .view_page .titleBox:first-child li:first-child{border-top:1px solid #dfdfdf; } .view_page .titleBox .label{background:#f7f7f7; display:block; padding:16px 10px; width:120px; font-size:14px; display:flex; align-items: center; } .view_page .titleBox .label_content{padding:16px 10px; font-size:14px; width:calc(100% - 120px); display:flex; align-items: center;} .view_page .full_title .label_content{display:block; width:calc(100% - 120px); } .view_page .three_title{display:flex; flex-wrap: wrap;} .view_page .three_title li{width:calc(100% / 3); } .view_page .share_title{display:flex; border-bottom:1px solid #dfdfdf; } .view_page .share_title .adminBox{ padding:10px 0; } .view_page .share_title>li:first-child{width:50%; display:flex; align-items: center; } .view_page .share_title>li:last-child{ width:50%; display:flex; justify-content: flex-end;} .view_page .share_title .share_label{background:#F2F2F2; padding:5px; color:#4d4d4d; border-radius:4px; font-size:12px; margin-right:5px; } .view_page .share_title .share_label > img{margin-right:5px; } .view_page .share_title .share_icon{margin-right:5px; } .view_page .view_content{ padding:20px 0; color:#333; } .view_page .view_content img{max-width:100%; margin-bottom:10px; display:block; } .view_page .add_box{margin-top:20px; } .view_page .add_box a.add_item{ display:block; border:1px solid #e6e6e6; padding:19px 20px 19px 60px; border-radius:8px; background-repeat: no-repeat; background-position: left 20px center; } .view_page .add_box a.add_item + a.add_item{margin-top:10px; } .view_page .add_box a.add_item span{display:block; } .view_page .add_box a.add_item span.add_title{font-size:15px; } .view_page .add_box a.add_item span.add_content{font-size:13px; color:#999999; } .view_page .add_box a.file{background-image: url('../img/board_img/file_icon.png');} .view_page .add_box a.link{background-image: url('../img/board_img/link_icon.png');} .view_page .p_n_box{margin-top:20px; } .view_page .p_n_box .p_n_item {border-top:1px solid #dfdfdf; display:flex; } .view_page .p_n_box .p_n_item:last-child{border-bottom:1px solid #dfdfdf; } .view_page .p_n_box .p_n_item span.label{ display:block; width:120px; padding:13px 10px 13px 50px; background:#F7F7F7; font-size:14px; background-repeat: no-repeat; background-position: left 20px center; } .view_page .p_n_box .p_n_item.prev_box span.label{background-image: url('../img/board_img/prev_icon.png');} .view_page .p_n_box .p_n_item.next_box span.label{background-image: url('../img/board_img/next_icon.png');} .view_page .p_n_box .p_n_item span.p_n_title{ display:block; padding:13px 20px; font-size:14px; width:calc(100% - 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .view_page .go_list_box{margin-top:40px; display:flex; align-items: center; justify-content: center; } .view_page .go_list_box .go_list_btn{ padding:19px 0px; text-align: center; background:#40647D; width:240px; border-radius: 60px; color:#fff; font-size:16px; font-family: 'GmarketSans'; } .view_page .comment_page{ margin-top:40px; } .view_page .comment_page .comment_title_box{ padding:21px 0; border-bottom:1px solid #e6e6e6; cursor: pointer; display:flex; justify-content: space-between;} .view_page .comment_page h1.title{ font-weight: 400; } .view_page .comment_page h1.title span.blue{ color:#425999; } .view_page .comment_page .comment_title_box .arrow_box{ display:flex; align-items: center; } .view_page .comment_page .comment_title_box .arrow_box .arrow_icon{ display:block; width:15px; height:15px; margin-left:10px; background-image:url('../img/board_img/comment_arrow.png'); background-repeat: no-repeat; background-position: center; } .view_page .comment_page .comment_list .comment_item .comment_title{padding:15px 10px; background:#F7F7F7; display:flex; justify-content: space-between; position:relative; } .view_page .comment_page .comment_list .comment_item .comment_title .nick_name{font-size:15px; } .view_page .comment_page .comment_list .comment_item .comment_title .date{font-size:13px; margin-left:10px; color:#999; } .view_page .comment_page .comment_list .comment_item .comment_title .menu_box{ width:10px; height:30px; margin-right:10px; cursor: pointer; background-image: url('../img/board_img/comment_menu.png'); background-repeat: no-repeat; background-position: center; background-size:cover; } .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu{ position:absolute; right:10px; top:40px; display:none; } .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu.on{display:block; } .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a{ display:block; background:#fff; padding:12px 21px; box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.05); border:1px solid #e6e6e6; color:#666; font-size:14px; } .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu::before{ content: ""; position: absolute; top: -8px; right: 15px; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #e6e6e6 transparent; } .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu::after{ content: ""; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #fff transparent; } .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a:last-child{ border-top:none; } .view_page .comment_page .comment_list .comment_item .comment_content{padding:20px 15px; font-size:15px; } .view_page .comment_page .comment_list .comment_item .comment_content .screet_box{text-decoration: underline; color:#EB5757; } .view_page .comment_page .comment_list .comment_item.reply .comment_title{ padding-left:50px; background-image: url('../img/board_img/comment_reple_icon.png'); background-repeat: no-repeat; background-position: left 20px center; ;} .view_page .comment_page .comment_list .comment_item.reply .comment_title .left_box{display:flex; align-items: center;} .view_page .comment_page .comment_list .comment_item.reply .comment_content{padding-left:50px; } .view_page .comment_page .comment_write_page{ margin:20px 0; } .view_page .comment_page .comment_write_page textarea{width:100%; height:200px; border-radius:4px; border:1px solid #e6e6e6; padding:12px 16px; font-size:14px; margin-bottom:10px; } .view_page .comment_page .comment_write_page .humman_box input{border:1px solid #e6e6e6; padding:8px 10px; border-radius:4px; font-size:14px; margin-bottom:10px; } .view_page .comment_page .comment_write_page .humman_box input:first-child{margin-right:10px; } .view_page .comment_page .comment_write_page .scecret_label{font-size:14px; } .view_page .comment_page .comment_write_page .buttonWrap{ margin-top:10px; display:flex; justify-content: space-between; } .view_page .comment_page .comment_write_page .buttonWrap .ok_btn{padding:16px 24px; background:#40647D; color:#fff; border:none; font-size:14px; border-radius:4px; } .view_page .comment_page .comment_content_box{display:none; } .view_page .comment_page.on .comment_content_box{display:block; } .view_page .comment_page.on .comment_title_box .arrow_box .arrow_icon{transform: rotate( 180deg );} @media screen and (max-width: 1250px) { .view_page .three_title{display:block; } .view_page .three_title li{width:100%; } } @media screen and (max-width: 700px) { .view_page .titleBox .label{width:60px; font-size:13px; } .view_page .titleBox .label_content{ width: calc(100% - 60px); font-size:14px; } .view_page .share_title{flex-wrap: wrap;} .view_page .share_title>li:first-child{width:100%; border-bottom: none; /*공유 있을때 border-bottom: 1px solid #e6e6e6;*/ } .view_page .share_title>li:last-child{width:100%; } .view_page .p_n_box .p_n_item span.label{width:100px; } .view_page .p_n_box .p_n_item span.p_n_title{width:calc(100% - 100px); } .view_page .share_title .share_label{padding:16px 10px; width:60px; font-size:14px; color:#333; } .view_page .share_title .share_label img{display:none; } .view_page .go_list_box .go_list_btn{padding:10px 0; width:200px; } .view_page .comment_page .comment_list .comment_item .comment_title{ padding:10px; } .view_page .comment_page .comment_list .comment_item .comment_title .nick_name{font-size:12px; } .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a{font-size:12px;} .view_page .comment_page .comment_list .comment_item .comment_content{ font-size:12px; } .view_page .comment_page .comment_list .comment_item.reply .comment_content{ padding-left:40px; } .view_page .comment_page .comment_write_page textarea{ font-size:12px; } .view_page .comment_page .comment_write_page .humman_box input{ font-size:12px; } .view_page .comment_page .comment_write_page .scecret_label{ font-size:12px; } .view_page .comment_page .comment_write_page .buttonWrap .ok_btn{font-size:12px; padding:10px 20px;} .view_page .go_list_box .go_list_btn{ font-size:14px; } .view_page .p_n_box .p_n_item span.label{font-size:12px; } .view_page .add_box a.add_item span.add_title{font-size:12px; } } /*-------------- view page end-------------*/ /* .sub.sub04_2.secret */ .sub.sub04_2.secret .listArticle .secretBox{ max-width: 500px; margin: 0 auto; } .sub.sub04_2.secret .listArticle .secretBox .t1{ margin: 12px 0; text-align: center; font-size: 20px; color: #666; } .sub.sub04_2.secret .listArticle .secretBox .ipt{ margin-top: 20px; background-color: #EEE; padding: 20px; border: none; width: 100%; border-radius: 5px; position: relative; } .sub.sub04_2.secret .listArticle .secretBox .ipt.required{ background-image: url('../img/required.png') !important; background-position: right 10px top 10px !important; background-size: 8px; background-repeat: no-repeat; } .sub.sub04_2.secret .listArticle .secretBox .formWrap{ max-width: 380px; margin: 0 auto; } .sub.sub04_2.secret .listArticle .secretBox .submitBtn{ background-color: var(--dark-purple); color: #fff; padding: 20px; margin-top: 24px; text-align: center; border: none; border-radius: 4px; width: 100%; } @media screen and (max-width: 1250px) { .sub.sub04_2.secret .listArticle .secretBox .t1{ font-size: 18px; } } @media screen and (max-width: 650px) { .sub.sub04_2.secret .listArticle .secretBox .t1{ font-size: 16px; } .sub.sub04_2.secret .listArticle .secretBox .submitBtn{ padding: 15px; } }