@charset "utf-8"; /********************************************************************************* 대한종양내과학회 Bootstrap v5.1.3 Version: 1.0 Note: This is main css. All main css files import here. **********************************************************************************/ .field-title {margin-bottom:20px; font-size:1.26em; font-weight:500; color:#000;} .field-title span {color:#00a064;} .more_btn {position:absolute; top:2px; right:calc(var(--bs-gutter-x) * .5); display:inline-block; width:auto; padding:0 30px 0 0; font-family: 'GmarketSansMedium'; font-size:0.93em; color:#666;} .more_btn:after {position:absolute; top:3px; right:0px; content:""; display:block; width:20px; height:16px; background:url('images/main/more_arrow.png') no-repeat center center; background-size:100% auto; transition: transform .15s ease-in-out;} .more_btn:hover {color:#666;} .more_btn:hover:after{transform:translateX(-.3333333333rem);} .bg-green {background:#ecfaef;} #section-1 {position:relative; padding:0px 0 40px 0;} #section-1 .item {} #section-1 .item img {width:100%;} #section-1 .slick-dots {bottom:0px;} /*#section-1 .slick-prev, #section-1 .slick-next {width:28px; height:28px; } #section-1 .slick-prev {left:12px; background:url('/Content/images/main/ctrl_prev_arrow.png') no-repeat center center; background-size:100% auto;} #section-1 .slick-next {right:12px; background:url('/Content/images/main/ctrl_next_arrow.png') no-repeat center center; background-size:100% auto;}*/ #section-2 {padding:0 0;} #section-2 .row {position:relative; } #section-2 .row>* {padding-left:0.5rem; padding-right:0.5rem;} #section-2 .statdata-cons .circle-icon {background:#fff; border-radius:50%; width:97px; } #section-2 .statdata-cons .circle-icon .pic {display:block; width:97px; height:97px; } #section-2 .statdata-cons .circle-icon .pic.pic-1 {background:url('images/main/mian_statpic1.png') no-repeat center center; background-size:100% auto;} #section-2 .statdata-cons .circle-icon .pic.pic-2 {background:url('images/main/mian_statpic2.png') no-repeat center center; background-size:100% auto;} #section-2 .statdata-cons .circle-icon .pic.pic-3 {background:url('images/main/mian_statpic3.png') no-repeat center center; background-size:100% auto;} #section-2 .statdata-cons .circle-icon .pic.pic-4 {background:url('images/main/mian_statpic4.png') no-repeat center center; background-size:100% auto;} #section-2 .statdata-cons h3 {font-size:0.93rem; letter-spacing:-0.05rem; font-weight:500; color:#3b3c3b;} #section-2 .statdata-cons .stat-data {font-size:2.0rem; font-weight:700; color:#3b3c3b;} #section-2 .mainitem-cons {padding:20px 0 70px 0;} #section-2 .notice-box {position:relative; padding:40px 40px 40px 40px; border:1px solid #dbdbdb; border-radius:1rem; min-height:328px;} #section-2 .notice-box .notice-list {} #section-2 .notice-box .notice-list ul li {margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #ddd;} #section-2 .notice-box .notice-list ul li:last-child {margin-bottom:0px; padding-bottom:0px; border-bottom:none;} #section-2 .notice-box .notice-list ul li a {position:relative; display:block; padding:0 90px 0 30px;} #section-2 .notice-box .notice-list ul li a::before {position:absolute; left:9px; top:11px; content:""; display:block; width:4px; height:4px; background:#444; border-radius:25%;} #section-2 .notice-box .notice-list ul li a:hover, #section-2 .notice-box .notice-list ul li a:focus, #section-2 .notice-box .notice-list ul li a:active {border-color:#61b978;} #section-2 .notice-box .notice-list ul li .tit {display:block; overflow:hidden; padding:0 5px 0 0; font-size:1.13rem; line-height:1.2em; white-space:nowrap; text-overflow:ellipsis;} #section-2 .notice-box .notice-list ul li .date {position:absolute; right:0px; top:2px; font-size:0.93em; font-family: 'GmarketSansLight';} #section-2 .notice-box .more_btn {top:43px; right:40px; } #section-2 .newsletter-box {position:relative; padding:35px 180px 40px 40px; margin-bottom:20px; border-radius:1rem; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#48b777+0,07989d+100 */ background: #48b777; /* Old browsers */ background: -moz-linear-gradient(left, #48b777 0%, #07989d 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #48b777 0%,#07989d 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #48b777 0%,#07989d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b777', endColorstr='#07989d',GradientType=1 ); /* IE6-9 */ } #section-2 .newsletter-box:after {position:absolute; right:40px; top:50%; margin-top:-46px; content:""; display:inline-block; width:98px; height:92px; background:url('images/main/newsletter_pic.png') no-repeat center center; background-size:100% auto;} #section-2 .newsletter-box h2 {margin-bottom:15px; color:#fff;} #section-2 .newsletter-box h2 span {display:block; font-size:0.93rem;} #section-2 .newsletter-box h2 strong {display:block; font-size:1.26rem; font-weight:500;} #section-2 .newsletter-box fieldset {padding:0 0.75rem;} #section-2 .newsletter-box .form-control {padding: 0.5rem 0.75rem; border-radius:0px; border:none; background:#f2fbfb;} #section-2 .newsletter-box .form-btn.black {padding:0 25px; border:none; font-size:0.93rem; color:#fff; background:#222;} #section-2 .iconbanner-box {padding:30px 15px; background:#f7f7f7; border-radius:1rem;} #section-2 .iconbanner-box .col {text-align:center;} #section-2 .iconbanner-box .col i {font-size:2.0rem; color:#555;} #section-2 .iconbanner-box .col span {display:block; font-size:0.93rem; color:#333;} /* 2025 추가 및 변경 */ #section-2 .keydates-box {overflow:hidden; display: flex; justify-content: space-between; text-align:center; border-radius:10px;margin-bottom:15px; } #section-2 .keydates-box .box1 {width:50%; background: #3796aa;} #section-2 .keydates-box .box2 {width:50%; background: #33b175;} #section-2 .keydates-box h3 {/*display: flex; flex-direction: column; justify-content: center;*/} #section-2 .keydates-box h3 strong {display:block; font-size:1.0rem; /*letter-spacing: -0.05rem;*/ line-height:1.3rem; font-weight: 500; color: #fff;} #section-2 .keydates-box h3 span {margin-top:7px; font-size:0.86rem; font-weight: 300; color: #fff;} #section-2 .keydates-box .day-item {margin-top:10px; font-size:50px; line-height:1.0; font-weight: 700; color:#ffff66;} #section-2 .quick-btns {display: flex; justify-content: space-between;} #section-2 .quick-btns a {width:49%; padding:20px 15px 25px 15px; background: #f7f7f7; border-radius: 1rem; text-align:center; } #section-2 .quick-btns i {font-size:2.0rem; color:#555;} #section-2 .quick-btns span {display:block; font-size:0.93rem; color:#333;} #section-2 .quick-btns-bg {display: flex; justify-content: space-between;} #section-2 .quick-btns-bg a {width:49%; padding:33px 30px; background: #f7f7f7; border-radius: 1rem; text-align:center; background: #ebf4e9 url('images/main/youtubebox_bg.jpg') no-repeat center right; background-size: cover; /*box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);*/ display: flex; justify-content: space-between; align-items: center;} #section-2 .quick-btns-bg i {font-size:2.0rem; color:#ff0033; opacity: 0.7;} #section-2 .quick-btns-bg span {font-weight:700; font-size:1.33rem; color:#007f63;} /* 2025-08-26 추가 */ #section-2 .keydates-box {position:relative} #section-2 .keydates-box .box3 {overflow:hidden; position:relative; width:50%; padding: 1.8rem 1.5rem; /*background: linear-gradient(135deg, #6db3f2 0%,#1e69de 100%);*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: #626b85; /* Old browsers */ background: -moz-linear-gradient(left, #626b85 0%, #213566 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #626b85 0%,#213566 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #626b85 0%,#213566 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#626b85', endColorstr='#213566',GradientType=1 ); /* IE6-9 */ display:flex; justify-content: space-between; align-items: center; text-align:left; } #section-2 .keydates-box .box3 h3 strong {display:block; margin-bottom:10px; font-size:1.33rem; color:#f8e83f; font-weight:700; background: linear-gradient(90deg, #FFD700, #FFFFFF, #FFD700); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shineText 1s linear infinite; } #section-2 .keydates-box .box3 h3 span {font-size:0.75rem;} #section-2 .keydates-box .box3 i {font-size: 1.8rem; color:#ddd; transition: transform 0.3s ease; animation: iconPulse 2s infinite;} #section-2 .keydates-box .box4 {display:flex; justify-content: space-between; align-items: center; text-align:left; width:50%; padding: 1.8rem 1.5rem; background: linear-gradient(135deg, #6daf9b 0%, #246e5b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:#fff; font-size:1.13rem;} #section-2 .keydates-box .box4 i {font-size: 1.8rem; color:#ddd;} @keyframes shineText { 0% { background-position: 200% center; } 100% { background-position: 0% center; } } @keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); /* 확대 비율 */ } } /* 20250827 추가 */ #section-2 .m-boxbtns {display: flex; justify-content: space-between; height:100%; /*align-items: center;*/} #section-2 .m-boxbtns a {overflow:hidden; width:49%; height:100%; color:#fff; /*text-align: center;*/} #section-2 .m-boxbtns a .tit-icon {font-size:55px; opacity: 0.4;} #section-2 .m-boxbtns .box1 {position:relative; padding:30px 30px; background:url('images/main/m_box_bg1.jpg') no-repeat top left; background-size:cover; border-radius:1rem 0 1rem 1rem;} /*#section-2 .m-boxbtns .box1 h3 {padding-top:20px; text-align: left;} #section-2 .m-boxbtns .box1 h3 strong {margin-bottom:20px;display:block; font-size:1.9rem; font-weight:700; letter-spacing:-0.09rem; background: linear-gradient(90deg, #FFD700, #FFFFFF, #FFD700); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shineText 1s linear infinite}*/ /*#section-2 .m-boxbtns .box1 h3 span {display:block; font-size:1.0rem;}*/ #section-2 .m-boxbtns .box2 {position:relative; padding:30px 30px; background:url('images/main/m_box_bg2.jpg') no-repeat top left; background-size:cover; border-radius: 0 1rem 1rem 1rem;} /*#section-2 .m-boxbtns .box2 span {display:block; font-size:1.3rem; text-align: left; white-space:pre-line; }*/ #section-2 .m-boxbtns h3 {padding-top:15px; text-align: left;} #section-2 .m-boxbtns h3 strong {margin-bottom:15px;display:block; font-size:1.9rem; font-weight:700; /*letter-spacing:-0.09rem;*/ background: linear-gradient(90deg, #FFD700, #FFFFFF, #FFD700); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shineText 1s linear infinite} #section-2 .m-boxbtns .box2 h3 strong {font-size:1.6rem; letter-spacing:-0.04rem;} #section-2 .m-boxbtns span.txt1 {display:block; font-size:1.25rem; /*text-align: left; white-space:pre-line;*/} #section-2 .m-boxbtns span.txt2 {padding-top:5px; display:block; font-size:1.06rem;} #section-2 .m-boxbtns .more-icon {position:absolute; top:20px; right:20px; color:#000; font-size:20px; opacity: 0.3; transition: transform 0.3s ease; animation: iconPulse 2s infinite;} #section-3 {padding:60px 0; background:#f5f5f5;} #section-3 .main-movie .video-box {overflow:hidden; height:250px; background:#000; border-radius:1rem;} #section-3 .main-movie .item {width:100%; height:250px; margin-bottom:0px;} #section-3 .newsletter-box {position:relative; padding:65px 180px 80px 40px; border-radius:1rem; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#48b777+0,07989d+100 */ background: #48b777; /* Old browsers */ background: -moz-linear-gradient(left, #48b777 0%, #07989d 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #48b777 0%,#07989d 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #48b777 0%,#07989d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b777', endColorstr='#07989d',GradientType=1 ); /* IE6-9 */ } #section-3 .newsletter-box:after {position:absolute; right:40px; top:50%; margin-top:-46px; content:""; display:inline-block; width:98px; height:92px; background:url('images/main/newsletter_pic.png') no-repeat center center; background-size:100% auto;} #section-3 .newsletter-box h2 {margin-bottom:15px; color:#fff;} #section-3 .newsletter-box h2 span {display:block; font-size:0.93rem;} #section-3 .newsletter-box h2 strong {display:block; font-size:1.26rem; font-weight:500;} #section-3 .newsletter-box fieldset {padding:0 0.75rem;} #section-3 .newsletter-box .form-control {padding: 0.5rem 0.75rem; border-radius:0px; border:none; background:#f2fbfb;} #section-3 .newsletter-box .form-btn.black {padding:0 25px; border:none; font-size:0.93rem; color:#fff; background:#222;} #section-4 {padding:50px 0 40px 0;} #section-4 .field-title {font-size:1.13rem; font-weight:700;} #section-4 .sponsor-banners {} #section-4 .sponsor-banners .banner_zone1 {flex: 0 0 auto; width: 30%;} #section-4 .sponsor-banners .banner_zone2 {flex: 0 0 auto; width: 70%;} #section-4 .sponsor-banners .item img {border:1px solid #dbdbdb;} #section-4 h3 {margin-bottom:10px; font-size:0.93rem;} #section-4 .sponsor-rating {margin-bottom:15px; } #section-4 .sponsor-rating ul {display:flex; margin:0 -5px; } #section-4 .sponsor-rating ul li {margin-right:5px; margin-left:5px;} /* 2025 추가 및 변경 */ #section-4 .bottoms-banners {} #section-4 .bottoms-banners .banner_area1, #section-4 .bottoms-banners .banner_area2 {display: flex; align-items: center;} #section-4 .bottoms-banners .banner_area1 .item img {height:50px;} #section-4 .bottoms-banners .banner_area1 .field-title, #section-4 .bottoms-banners .banner_area2 .field-title {margin-bottom:0px; margin-right:50px;} #section-4 .bottoms-banners .banner_zone {padding-top:20px;} #section-4 .bottoms-banners .banner_zone .sponsors ul li {display:flex; height:64px;} #section-4 .bottoms-banners .banner_zone .sponsors ul li a {/*display:block;*/ padding:0px 25px; /*height:64px;*/ border:1px solid #dbdbdb; display:flex; align-items: center; width:100%; height:100%; justify-content: space-evenly;} #section-4 .bottoms-banners .banner_zone .sponsors ul li.txt {display:flex; width:100%; /*height:64px;*/ } #section-4 .bottoms-banners .banner_zone .sponsors ul li.txt p {display:flex; align-items: center; width:100%; height:100%; justify-content: space-evenly; color:#fff; font-weight:700; /*border:1px solid #dbdbdb;*/} #section-4 .bottoms-banners .banner_zone .sponsors ul li.txt.bg-blue p {background: #0d47a1;} #section-4 .bottoms-banners .banner_zone .sponsors ul li.txt.bg-dia p {background: #00b8d4;} #section-4 .bottoms-banners .banner_zone .sponsors ul li.txt.bg-pla p {background: #455a64;} @media (max-width:1520px){ } @media (max-width:1360px){ } @media (max-width:1260px){ #section-2 .statdata-cons .bg-green {margin-bottom:15px; } } @media (min-width: 1201px) and (max-width: 1400px) { } /* lg */ @media (max-width: 1330px) { } /* md */ @media (min-width: 992px) and (max-width: 1260px) { #section-2 .newsletter-box {padding:35px 40px;} #section-2 .newsletter-box:after {display:none;} } /* md-sm */ @media (min-width: 768px) and (max-width: 991px) { } /* sm */ @media (max-width: 991px) { #section-1 .main-visual {margin-bottom:0px; } #section-2 .notice-box {margin-bottom:15px; } } /* XS Portrait */ @media (max-width: 767px) { .field-title {font-size:1.13rem; margin-bottom:15px; } .more_btn {font-size:0.83rem;} #section-2 .mainitem-cons {padding:40px 0;} #section-2 .statdata-cons .circle-icon {width:80px;} #section-2 .statdata-cons .circle-icon .pic {width:80px; height:80px;} #section-2 .statdata-cons h3 {font-size:0.86rem;} #section-2 .statdata-cons .stat-data {font-size:1.5rem;} #section-2 .notice-box {padding:30px;} #section-2 .notice-box .more_btn {top:33px; right:30px;} #section-2 .notice-box .notice-list ul li {margin-bottom:12px; padding-bottom:12px;} #section-2 .notice-box .notice-list ul li a {padding: 0 75px 0 20px;} #section-2 .notice-box .notice-list ul li a::before {top:8px;} #section-2 .notice-box .notice-list ul li .tit {font-size:1.0rem;} #section-2 .notice-box .notice-list ul li .date {font-size:0.8rem;} #section-2 .newsletter-box {padding:30px 180px 30px 30px; } #section-3 {padding:40px 0 20px 0;} #section-3 .main-movie .video-box {margin-bottom:20px; height:260px; } #section-3 .main-movie .item {height:260px; } #section-4 .sponsor-banners .banner_zone1 {margin-bottom:25px; width:100%;} #section-4 .sponsor-banners .banner_zone2 {width:100%;} #section-4 .sponsor-rating ul {/*overflow:hidden;*/ margin:0 -1%; flex-wrap: wrap;} #section-4 .sponsor-rating ul li {width:23%; margin:5px 1%;} #section-4 .sponsor-rating ul li a {display:block;} } @media (max-width: 580px) { #section-2 .statdata-cons .circle-icon {width:70px;} #section-2 .statdata-cons .circle-icon .pic {width:70px; height:70px;} #section-2 .notice-box {padding:20px;} #section-2 .notice-box .more_btn {top:21px; right:20px; text-indent: -9999em;} #section-2 .newsletter-box {padding:20px 20px; } #section-2 .newsletter-box .form-control {font-size:0.93rem;} #section-2 .newsletter-box .form-btn.black {padding:0 10px;font-size:0.83rem;} #section-2 .newsletter-box:after {display:none;} #section-2 .iconbanner-box {padding:20px 15px; } #section-2 .iconbanner-box .col {flex:none; width:50%; margin:10px 0;} #section-2 .iconbanner-box .col span {font-size:0.83rem;} /* 20250827 추가 */ #section-2 .m-boxbtns {display:block; height:auto;} #section-2 .m-boxbtns a {display:block; width:100%; height:auto;} #section-2 .m-boxbtns a .tit-icon {display:none;} #section-2 .m-boxbtns .box1 {margin-bottom:10px; border-radius: 1rem 1rem 0 0;} #section-2 .m-boxbtns .box2 {border-radius:0 0 1rem 1rem;} #section-2 .m-boxbtns .box1 h3 strong {font-size: 1.6rem;} #section-2 .m-boxbtns .box1 h3 span {font-size:0.86rem;} #section-2 .m-boxbtns .box2 span {white-space : normal; font-size: 1.33rem;} #section-4 .sponsor-rating ul {} #section-4 .sponsor-rating ul li {width:48%; margin:5px 1%;} } /* XS Portrait */ @media (max-width: 479px) { #section-4 .bottoms-banners .banner_zone .sponsors ul li {overflow:hidden; height:54px;} } @media (max-width: 360px) { }