:root { --sypni-blue:#004ea2; --white:#fff; --black:#000000; --lightgray:#777777; --lightgray2:#ababab; } /* common */ .sect-wrap{max-width: 1320px; margin:0 auto; padding:0 17.5px;position:relative;} .tit-wrap{text-align:center;} .title{font-family: 'Pretendard' , 'Roboto', 'Noto Sans KR', sans-serif;font-size:55px;font-weight:700;color:#000;text-align:start;} .sub-title{font-size:24px; color:#000; text-align:center; font-weight:500;} .bar{width:70px; height:1px; background:var(--sypni-blue);} .sub-visual_img {background-image:url('../images/com.jpg') no-repeat center center; color:white; text-align:left; position:relative;} .data .sub-visual_img {background-image:url("../images/data-bg.png");} .cus .sub-visual_img {background-image:url("../images/cus-background.png");} .esg .sub-visual_img {background-image:url("../images/esg-bg.png");} .sub-visual{position: relative; height: 475px; transition: height .3s;} .sub-visual_bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden} .sub-visual_img{height:100%;background-repeat:no-repeat;background-position:top center;background-size:cover;animation:visualAnimation forwards linear 1s} @keyframes visualAnimation{0%{transform:scale(1.1)}100%{transform:scale(1)}} .sub-visual_title{font-size:51px;font-weight:400;color:#000;line-height:1;margin-bottom:20px;} .sub-visual_text{font-size:16px;color:white;} /* */ .sub .sect1{padding-top:210px;} /* sub content_title */ .cont-title{color:var(--sypni-blue); font-weight:700; font-size:55px; text-align:center; text-transform:uppercase;} .cont-sub_title{color:#333; font-size:30px; text-align:center; line-height:1.5; margin: 40px 0 60px;} .cont-line{width:1px; background: var(--sypni-blue); height:90px; margin: 0 auto;} /* txt_ani */ .title.txt_ani {position:relative;} .txt_ani span {position: relative; display:inline-block; animation: waviy 3s; animation-delay: calc(.3s * var(--i));} @keyframes waviy { 0%,40%,100% {transform: translateY(0)} 20% {transform: translateY(-30px)} } /* sub-lnb */ .sub-lnb{display:flex; gap:50px; margin:60px 0 50px;} .sub-lnb li{text-transform:uppercase; font-weight:700; font-size:20px; color:#a8a8a8;} .sub-lnb li.on{color:var(--sypni-blue); position:relative;} .sub-lnb li.on::after{content:'';display:block; width:100%; height:1px; background:var(--sypni-blue); position:absolute; bottom:2px; left:0;} .sub-lnb li a{display:block; padding-bottom: 10px;} /* sub img */ #greeting .sub-visual_img {background-image:url("../images/com_bg01.png");} #history .sub-visual_img {background-image:url("../images/com_bg02.png");} #organization .sub-visual_img {background-image:url("../images/com_bg03.png");} #location .sub-visual_img {background-image:url("../images/com_bg04.png");} .equip .sub-visual_img {background-image:url("../images/equip_bg01.png");} .scene .sub-visual_img {background-image:url("../images/scene_bg.png");} /* greeting */ #greeting .com-greeting-sub_img{max-width:1980px; height:538px;margin:0 auto;} #greeting .cg-sub_img{background:url("../images/cg-sub_img.jpg") no-repeat center center;width:100%;height:100%;} #greeting .sect3 .sect-wrap{margin:100px auto 110px;} #greeting .greet-txt-box{text-align:start;} #greeting .greet-txt-tit{font-size:30px; color:#000;} #greeting .greet-txt-box p {font-size:20px; color:#222; margin-bottom:12.5px;} #greeting .greet-txt-box p.line_adj{line-height:1.7;} #greeting .greet-sign{text-align:end; padding-right:20px;} #greeting .greet-sign p{font-size:20px; color:#222;} #greeting .ceo_sign{width:auto;display:inline-block; margin-left:20px;} #greeting .sect4 li{text-align:center; border-right:1px solid #d3d3d3;} #greeting .sect4 li:first-child{border-left:1px solid #d3d3d3;} #greeting .sect4 p{color:#081131;} #greeting .sect4 .f-bold{font-weight:700;} #greeting .sect4 p.by_year{margin-top:70px; text-align:end; color:#777777; font-weight:700;} /*history*/ #history b{color:#222;} #history .list .box{position:relative; } #history .list .box::before{content:''; position:absolute; top: 365px; left:50%; transform:translateX(-50%); height: calc(100% - 365px); width: 1px; background: #eeeeee;} #history .list .box::after{content:''; position:absolute; top: 365px; left:50%; transform:translateX(-50%); height: 0; width: 1px; background: #0154A6; transition:1s} #history .list .box .h_tit{position:relative; height: 245px; background-size:cover !important;} #history .list .box .h_tit.bg01{background:url("../images/history01.png") 50% 50% no-repeat; } #history .list .box .h_tit.bg02{background:url("../images/history02.png") 50% 50% no-repeat; } #history .list .box .h_tit.bg03{background:url("../images/history03.png") 50% 50% no-repeat; } #history .list .box .h_tit.bg04{background:url("../images/history04.png") 50% 50% no-repeat; } #history .list .box .h_tit .txt{position:absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform:translate(-50%,-50%);} #history .list .box .h_tit .txt .f-20{color: #fff; margin: 10px 0 20px 0; font-weight: 600;} #history .list .box .h_tit .ro{font-weight:bold; font-size:22px; color: #fff; text-transform: uppercase;} #history .list .box .h_tit h4{font-weight:bold; font-size: 36px;; color: #fff; margin-top: 20px;} #history .list .box > ul{position:relative; padding: 140px 0;} #history .list .box > ul::before{content:""; position:absolute; top: 55px; left: 50%; width: 10px; height: 10px; box-sizing:border-box; border-radius:50%; background: #0154A6; z-index: 2; transform:translateX(-50%);} #history .list .box > ul::after{content:""; position:absolute; top: 49px; left: 50%; width: 22px; height: 22px; box-sizing:border-box; border-radius:50%; background: #fff; border:1px solid #0154A6; transform:translateX(-50%);} #history .list .box > ul:last-of-type{padding-bottom:0;} #history .list .box.last-box > ul{padding-bottom:200px;} #history .list .box > ul > li{position:relative; width: calc(50% - 70px); margin-left: auto; padding-bottom:110px;} #history .list .box > ul > li::before{content:''; position:absolute; top: 14px; left: -70px; width: 1px; height: 0; background: #0154A6; transition:0.5s} #history .list .box > ul > li:nth-of-type(2n)::before{left: auto; right: -71px;} #history .list .box > ul > li:first-of-type::before{height: 0; top: -70px;} #history .list .box > ul > li.on::before{height: 100%;} #history .list .box > ul > li:first-of-type.on::before{height: calc(100% + 84px);} #history .list .box:last-of-type > ul > li:last-of-type{padding-bottom:0;} #history .list .box:last-of-type > ul > li:last-of-type::before{display:none; } #history .list .box > ul > li > span{position:relative; display:inline-block; vertical-align: top; font-weight:bold; font-size:24px; color: #000; margin-bottom:20px;} #history .list .box > ul > li > span::before{content:""; position:absolute; top: 11px; left: -75px; width: 10px; height: 10px; box-sizing:border-box; border-radius:50%; background: #0154A6; z-index: 2;} #history .list .box > ul > li > span::after{content:""; position:absolute; top: 5px; left: -81px; width: 22px; height: 22px; box-sizing:border-box; border-radius:50%; background: #fff; border:1px solid #0154A6; transform:scale(0); transition:0.4s;} #history .list .box > ul > li.on > span::after{transform:scale(1);} #history .list .box > ul > li > ul > li{/* padding-left: 40px; */position:relative; color:#444; font-size:18px; margin-bottom:16px; vertical-align: middle;} #history .list .box > ul > li > ul > li:last-of-type{margin-bottom:0;} #history .list .box > ul > li > ul > li > span{position:absolute; left: 0; font-weight:500; font-size:19px; color: #222; vertical-align: middle;} #history .list .box > ul > li:nth-of-type(2n){margin-left: 0; margin-right: auto; text-align: right;} #history .list .box > ul > li:nth-of-type(2n) > span::before{left: auto; right: -75px} #history .list .box > ul > li:nth-of-type(2n) > span::after{left: auto; right: -81px;} /* #history .list .box > ul > li:nth-of-type(2n) > ul > li{padding-left: 0; padding-right: 40px; } */ #history .list .box > ul > li:nth-of-type(2n) > ul > li > span{left: auto; right: 0;} #history .list .box > ul > li > ul > li.n-month{padding-left:0;} #history .list .box > ul > li > ul > li.n-month-r{padding-right:0;} /*history*/ @media screen and (max-width:820px) { #history .list .box>ul>li{padding-bottom:60px;} } @media screen and (max-width:768px) { /*history*/ #history .list .box>ul>li{padding-bottom:30px;} #history .list .box>ul>li:last-child{padding-bottom:80px;} } @media screen and (max-width:500px) { #history .list .box .h_tit .ro{font-size:20px;} #history .list .box .h_tit h4{font-size:28px;} #history .list .box>ul>li>span{font-size:20px; margin-bottom:10px;} #history .list .box>ul>li>ul>li{font-size:15px;} #history .list .box>ul>li{width: calc(50% - 40px);} #history .list .box>ul>li::before{left:-40px;} #history .list .box>ul>li:nth-of-type(2n)::before{right:-41px;} #history .list .box>ul>li>span::before{left:-45px;} #history .list .box>ul>li:nth-of-type(2n)>span::before{right:-45px;} #history .list .box>ul>li>span::after{left:-51px;} #history .list .box>ul>li:nth-of-type(2n)>span::after{right:-51px;} } @media screen and (max-width:430px) { #history .list .box .h_tit h4{font-size:24px;} } /* organization */ #organization .organization-img{max-width:100%; margin:0 auto;} #organization img{display:block; max-width:100%; margin:0 auto; text-align:center; padding-top:40px;} #organization .sect3{padding-bottom:200px;} /* #organization .organization-img .pc-org-img{width:100%; height:100%; background:url('../images/pc-org-img.png') no-repeat center center;} */ /* location */ #location{margin-bottom:170px;} #location .loc-top{border:1px solid #d9d9d9;} #location .loc-top iframe{width: 100%; border:1px solid #eee;} #location .loc-bot ul{display:flex; justify-content:space-between; padding: 50px 0; border-bottom:1px solid #d9d9d9;} #location .loc-bot span{display:inline-block;} #location .loc-bot .loc-icon{width:46px; height:46px; background:#f3f4f4; border-radius:50%;} #location .loc-bot .loc-tit{color:var(--sypni-blue); font-weight:700; margin:0 30px 0 17px;} #location .loc-bot .loc-txt{color:#222; font-weight:700;} /* equip */ .equip .mo_equip{display:none;} /* equip lnb */ .equip .lnb {width:565px;letter-spacing:0; margin: 40px auto 130px; display: flex; justify-content: center;} .equip .lnb li {background:#f8f8f8;line-height:70px; color:#000; border:1px solid #ddd; text-align:center; float:left; border-right:0; font-size:1.8rem;transition:0.3s;} .equip .lnb li:last-child { border-right:1px solid #ddd; } .equip .lnb li.on {background:var(--sypni-blue); font-weight:600; color:#fff;} .equip .lnb li:hover {background:var(--sypni-blue);color:white;} .equip .lnb li a{display:block;width:100%;} /* equip_cont-wrap */ .equip_cont-wrap h3{font-size:44px; font-weight:700; color:#000; margin-bottom:25px;} .equip_cont-wrap table{width:100%;} .equip_cont-wrap table.equip_table td{padding:12px 0;} .equip_cont-wrap table .quarter th{width:25%;} .equip_cont-wrap table th{font-size:18px; font-weight:700; color:#fff; text-align:center; background:#686868; padding:9px 0;} .equip_cont-wrap table td{font-size:16px; font-weight:400; color:#222; text-align:center; padding:5px 0; border-right:1px solid #c3c3c3; border-bottom:1px solid #c3c3c3;} .equip_cont-wrap table td.bd-none{border-right:none;} .equip_cont-wrap table .tb_bg-grey{background:#f7f7f8;} .equip_cont-wrap table .col_w1{width:127px;} .equip_cont-wrap table .col_w2{width:259px;} .equip_cont-flex_wrap{margin-top:70px;} .equip_cont-flex_wrap ul{display:flex; justify-content:space-between;} /* busArea */ .equip .sect4{padding:160px 0 190px; margin-bottom:0;} .equip .sect4 .dsc{margin:20px 0 40px;font-size:20px;color:#222;} .equip .sect4 .busArea .slider-wrapper{display:flex;justify-content:center;align-items:center;} .equip .sect4 .busArea .slick-slide{width:848px;height:531px;/* border-radius:30px; */text-align:center;font-size:18px;background:#ccc;position:relative;} .equip .sect4 .busArea .slick-slide .service_content{width:848px;height:531px;} .equip .sect4 .busArea .slider-wrapper .service_content>a{display:block;width:100%;height:100%;} .equip .sect4 .busArea .slider-wrapper .ser1{background:url('../images/equip-img01.png') no-repeat center center;margin:0 50px;} .equip .sect4 .busArea .slider-wrapper .ser2{background:url('../images/equip-img02.png') no-repeat center center;margin:0 50px;} .equip .sect4 .busArea .slider-wrapper .ser3{background:url('../images/equip-img03.png') no-repeat center center;margin:0 50px;} .equip .sect4 .busArea .slider-wrapper .ser4{background:url('../images/equip-img04.png') no-repeat center center;margin:0 50px;} .equip .sect4 .busArea .slider-wrapper .ser5{background:url('../images/equip-img05.png') no-repeat center center;margin:0 50px;} .equip .sect4 .busArea .slider-wrapper .ser6{background:url('../images/equip-img06.png') no-repeat center center;margin:0 50px;} .equip .sect4 .busArea .service_btn{position:absolute;top:47%;transform:translateY(-50%);z-index:10;width:70px;height:70px;border:1px solid #ddd;border-radius:50%;;outline:none;display:flex !important;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;cursor:pointer;} .equip .sect4 .busArea .service_btn.service_prev{left:20%;} .equip .sect4 .busArea .service_btn.service_next{right:20%;} .equip .sect4 .busArea .service_btn .service_arrow{display: block; width: 32px;height: 2px;background: #000;position: relative;} .equip .sect4 .busArea .service_btn.service_prev span::after{content: "";display: block;width: 13px;height: 2px;background: #000;position: absolute; bottom: -4px;-webkit-transform: rotate(45deg);transform: rotate(45deg);left: -2px;} .equip .sect4 .busArea .service_btn.service_prev span::before{content: "";display: block;width: 13px;height: 2px;background: #000;position: absolute; top: -4px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);left: -2px;} .equip .sect4 .busArea .service_btn.service_next span::before{content: ""; display: block; width: 15px; height: 2px; background: #000; position: absolute; top: -5px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); right: -2px;} .equip .sect4 .busArea .service_btn.service_next span::after{content: ""; display: block; width: 15px; height: 2px; background: #000; position: absolute; bottom: -5px; -webkit-transform: rotate(135deg); transform: rotate(135deg); right: -2px;} .equip .sect4 .busArea .service_wrap .slick_list{overflow:visible;} /* pager */ .equip .sect4 .busArea .slick-dots{bottom:-65px;} .equip .sect4 .busArea .slick-dots li{margin:0 12px;} .equip .sect4 .busArea .slick-dots li button::before{font-size:40px;color:#898989;line-height:5px;opacity:1;} .equip .sect4 .busArea .slick-dots li.slick-active button::before{opacity:1;color:transparent;border:3px solid var(--sypni-blue);border-radius:50%;transform:scale(1);width:15px;height:15px;} @media screen and (max-width: 2500px){ .equip .sect4 .slide-txt-box{left:400px;} } @media screen and (max-width: 2350px){ .equip .sect4 .slide-txt-box{left:350px;} } @media screen and (max-width: 2280px){ .equip .sect4 .slide-txt-box{left:290px;} } @media screen and (max-width: 2200px){ .equip .sect4 .slide-txt-box{left:240px;} } @media screen and (max-width: 2100px){ .equip .sect4 .slide-txt-box{left:150px;} } @media screen and (max-width: 1980px){ .equip .sect4 .busArea .button-container{width:1015px;} .equip .sect4 .busArea .swiper .swiper-button-prev{left:24%;} .equip .sect4 .busArea .swiper .swiper-button-next{right:24%;} } @media screen and (max-width: 1920px){ .equip .sect4 .slide-txt-box{left:130px;} .equip .sect4 .busArea .button-container{width:1015px;} .equip .sect4 .busArea .swiper .swiper-button-prev{left:19%;} .equip .sect4 .busArea .swiper .swiper-button-next{right:19%;} } @media screen and (max-width: 1750px){ .equip .sect4 .slide-txt-box{left:12%;} } @media screen and (max-width: 1500px){ .equip .sect4 .busArea .button-container{width:1000px;} } @media screen and (max-width: 1400px){ .equip .sect4 .busArea .service_btn.service_prev{left:12%;} .equip .sect4 .busArea .service_btn.service_next{right:12%;} } @media screen and (max-width: 1300px){ .equip .sect4 h1{top:-200px;margin-bottom:50px;} .equip .sect4 .busArea .service_btn.service_prev{left:14%;} .equip .sect4 .busArea .service_btn.service_next{right:14%;} } @media screen and (max-width: 980px){ .equip .lnb{width:500px;} .equip .lnb li{line-height:65px;} .equip_cont-wrap h3{font-size:40px;} .equip .sect4 .busArea .service_btn.service_prev{border:none;} .equip .sect4 .busArea .service_btn.service_next{border:none;} .equip .sect4 .busArea .service_btn .service_arrow{display:none;} } @media screen and (max-width: 820px){ .equip_cont-wrap h3{font-size:38px;} } @media screen and (max-width: 768px){ .equip_cont-wrap table th{font-size:16px;} .equip .sect4{/* height:900px; */padding-bottom:80px;} .equip .sect4 h1{top:0px;font-size:2.5rem;} /* .sect4 .busArea{height:100%;} */ .equip .sect4 .busArea .slick-slide{height:400px;} .equip .sect4 .busArea .slick-slide .sect3-imgBox{height:400px;} .equip .sect4 .slide-txt-box{top:50px;left:25px;} .equip .sect4 .slide-txt-box .slide-num{font-size:30px;} .equip .sect4 .slide-txt-box .slide-tit{font-size:32px;margin:10px 0 20px;} /* .sect4 .slide-txt-box .slide-txt{display:none;} */ .equip .sect4 .swiper-button-next::after, .sect4 .swiper-button-prev::after{font-size:15px;} } @media screen and (max-width: 767px){ .equip .sect4 .slide-txt-box{top:70px;left:43px;} } @media screen and (max-width: 500px){ .equip .sect4 .busArea .slick-slide{height:250px;} .equip .sect4 .busArea .slick-slide .sect3-imgBox{height:250px;} .equip .sect4 .busArea .slider-wrapper .ser1{background:url('../images/equip-img01_500.png');margin:0 20px;} .equip .sect4 .busArea .slider-wrapper .ser2{background:url('../images/equip-img02_500.png');margin:0 20px;} .equip .sect4 .busArea .slider-wrapper .ser3{background:url('../images/equip-img03_500.png');margin:0 20px;} .equip .sect4 .busArea .slider-wrapper .ser4{background:url('../images/equip-img04_500.png');margin:0 20px;} .equip .sect4 .busArea .slider-wrapper .ser5{background:url('../images/equip-img05_500.png');margin:0 20px;} .equip .sect4 .busArea .slider-wrapper .ser6{background:url('../images/equip-img06_500.png');margin:0 20px;} .equip .sect4 .slide-txt-box{top:30px;left:30px;} .equip .sect4 .slide-txt-box .slide-tit{font-size:24px;} .equip .pc_equip{display:none;} .equip .mo_equip{display:block;} .equip .lnb{width:80%; margin:40px auto 80px;} .equip .lnb li{line-height:50px; font-size:16px;} .equip_cont-wrap h3{font-size:26px;} .equip_cont-wrap table th, .equip_cont-wrap table td{font-size:14px;} .equip_cont-flex_wrap ul li{width:33.3%;} .equip_cont-flex_wrap ul.equip_cont-flex{justify-content:start;margin-top:5px;} #organization .sect3{padding-bottom:100px;} } /* ethics */ .cus_title{font-size:32px; color:#333; text-align:center;} #ethics .ethics_list-wrap{display:flex; justify-content:space-between; margin-top:40px;} #ethics .ethics_list-wrap .ethics{} #ethics .ethics_list-wrap .ethics .img{width:400px; border:1px solid #ccc;} #ethics .ethics_list-wrap .ethics .img img{width:100%;} #ethics .ethics_list-wrap .ethics .eth_name p{text-align:center; margin-top:15px; font-size:18px; color:#222;} #ethics_write .informant-wrap{display:flex; flex-wrap:wrap; border-top:3px solid var(--sypni-blue); margin-top:40px;} #ethics_write .informant-wrap .inform_box{width:50%; border-bottom:1px solid #ccc; padding:30px 20px;} #ethics_write .informant-wrap .inform_box.box1, #ethics_write .informant-wrap .inform_box.box3, #ethics_write .informant-wrap .inform_box.box5{border-right:1px solid #ccc;} #ethics_write .informant-wrap .inform_box .info_tit{font-size:22px; color:#000; margin-bottom:25px;} #ethics_write .informant-wrap .inform_box .info_txt, #ethics_write .informant-wrap .inform_box .info_txtBox li{font-size:18px; color:#222; line-height:1.4; margin-bottom:10px;} #ethics_write .informant-wrap .inform_box .inform_procedure{display:flex; justify-content:space-between;} #ethics_write .informant-wrap .inform_box .inform_procedure .info_prc-box{width:25%; display:flex; flex-direction:column; justify-content:start; align-items:center; position:relative;} #ethics_write .informant-wrap .inform_box .inform_procedure .info_prc-box::after{content:'▶'; font-size:20px; color:#222; position:absolute; top:10px; right:-15px; display:block;} #ethics_write .informant-wrap .inform_box .inform_procedure .info_prc-box.box4::after{display:none;} #ethics_write .informant-wrap .inform_box .inform_procedure .info_prc-box .num{width:35px; height:35px; border-radius:50%; background:var(--sypni-blue); color:#fff; font-weight:600; text-align:center; padding-top:10px;} #ethics_write .informant-wrap .inform_box .inform_procedure .info_prc-box .info_txt{text-align:center; margin-top:10px;} #ethics_write .tip_off-btn{width:200px; height:70px; background:var(--sypni-blue); margin:100px auto 0;} #ethics_write .tip_off-btn p{height:100%;} #ethics_write .tip_off-btn p a{display:flex; justify-content:center; align-items:center; color:white; font-weight:500; font-size:22px; width:100%; height:100%;} /* board */ #photo .sub-visual_img {background-image:url("../images/photo_bg01.png");} #certify .sub-visual_img {background-image:url("../images/certify_bg01.png");} .sub-board .sect2{margin:100px 0 200px;} .scene .sect2{margin:100px 0 200px;} .ph_flex-wrap ul{display:flex; justify-content:space-between; margin-bottom:25px;} .scene .mo_ph_flex-wrap{display:none;} /* */ #privacy .sect2 .sect-wrap{text-align:start;} @media screen and (min-width:1980px){ .sub.his .bg span{background-size: cover;} } @media screen and (min-width:1920px){ #organization .organization-img{max-width:100%;} } @media screen and (max-width:1280px){ iframe{width:100%;} .title{font-size:55px;} .cont-title{font-size:45px;} .cont-sub_title{font-size:28px; margin:30px 0 50px;} .pro-lnb-wrap ul { overflow-x: scroll; padding: 20px 0;} .pro-lnb-wrap ul li a { display: block; width: 120px; text-align: center;} .pro-lnb-wrap ul li::before{left: -5.5rem;} .pro .sect3 .col{padding: 0 10px;} .pro-list .f-45{font-size:3rem;} .sub.pro article { margin-bottom: 120px; } .sub .sect1 { padding-top: 150px; } /* #organization .organization-img .pc-org-img{background-size:150%;} */ } @media screen and (max-width:1080px){ .ph_flex-wrap ul {gap:20px; margin-bottom:20px;} /* ethics */ #ethics .ethics_list-wrap .ethics{width:33%;} #ethics .ethics_list-wrap .ethics .img{width:100%;} } @media screen and (max-width:980px){ } @media screen and (max-width:820px){ .sub-visual{height:270px;} .sub .sect1{padding-top:90px;} .cont-title{font-size:38px;} .cont-sub_title{font-size:24px; margin:20px 0 30px;} .cont-line{height:65px;} .sub-lnb{gap:35px;} .sub-lnb li{font-size:18px;} #greeting .com-greeting-sub_img{max-width:100%;} #greeting .sect3 .sect-wrap{margin:50px auto;} #greeting .greet-txt-tit{font-size:26px;} #greeting .greet-txt-box p{font-size:16px; margin-bottom:0; line-height:1.5;} #greeting .greet-txt-box p.m-pd-35{padding-bottom:3.0rem;} #greeting .greet-txt-box .pc_space{display:inline;} #greeting .sect4 p.by_year{margin-top:30px;} #location .loc-bot ul{display:block; padding:30px 0;} #location .loc-bot ul li{margin-top:15px;} .ph_flex-wrap ul {gap:10px; margin-bottom:10px;} /* ethics */ #ethics_write .informant-wrap .inform_box .info_txt, #ethics_write .informant-wrap .inform_box .info_txtBox li{font-size:16px;} } @media screen and (max-width: 768px) { .sub-vis {height: 300px; padding-top: 100px} .sub-vis h3{font-size:32px; transform:translateY(-160px);} .sub-vis nav{font-size:12px; transform:translateY(-153px);} .sub-vis nav div {font-size:12px;} .lnb-wrap li a {font-size:12px;} .sect-wrap {padding: 0 10px;} .lnb-wrap ul li {padding-top: 5px;} /* ethics */ .cus_title{font-size:28px;} } @media screen and (max-width: 500px) { .title{font-size:45px;} .cont-title{font-size:32px;} .cont-sub_title{font-size:20px;} #greeting .com-greeting-sub_img{height:190px;} #greeting .cg-sub_img{background-size:120%;} #greeting .sect3 .sect-wrap{margin:30px auto;} #greeting .greet-sign{padding-right:0;} #greeting .greet-txt-tit{font-size:22px; line-height:1.3;} #location iframe{height:300px;} #organization img{padding-top:0;} .sub.pro article.sect3:not(.last-article){ margin-bottom: 80px;} .scene .pc_ph_flex-wrap{display:none;} .scene .mo_ph_flex-wrap{display:block;} .sub-board .gall_row .col-gn-4{width:49%;} .sub-board #bo_gall .bo_tit {font-size:16px; line-height:25px; height:70px; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;} .sub-board #bo_gall .bo_cnt {font-size:14px; display:none;} /* view.skin.php */ .sub-board #bo_v_title .bo_v_tit{font-size:1.3em; line-height:1.3;} /* ehtics */ #ethics .ethics_list-wrap{flex-wrap:wrap; row-gap:20px;} #ethics .ethics_list-wrap .ethics{width:100%;} #ethics .ethics_list-wrap .ethics .eth_name p{font-size:14px;} #ethics_write .informant-wrap .inform_box{width:100%;} #ethics_write .informant-wrap .inform_box.box1, #ethics_write .informant-wrap .inform_box.box3, #ethics_write .informant-wrap .inform_box.box5{border-right:none;} #ethics_write .tip_off-btn p a{font-size:18px;} } @media screen and (max-width: 430px) { .cont-sub_title{font-size:18px;} #greeting .greet-txt-tit{font-size:18px;} #greeting .greet-sign p{font-size:18px;} } @media screen and (max-width: 390px) { .cont-title{font-size:28px;} .cont-sub_title{font-size:16px;} .sub-lnb{gap:30px;} .sub-lnb li{font-size:16px;} #location .loc-bot .loc-tit{margin: 0 10px;} /* equip */ .equip_cont-wrap table th, .equip_cont-wrap table td{font-size:12px;} .equip .sect4{padding: 100px 0;} .sub-board .gall_row .col-gn-4{width:100%;} .sub-board #bo_gall .bo_tit{height:50px;} } @media screen and (max-width: 360px) { #location .loc-bot .loc-txt{font-size:14px;} }