@charset "UTF-8";
/* CSS Document */

.bgGy{ background: #143066; padding: 80px 60px; border-radius: 40px;}
.bgBu{ background: linear-gradient( to right , #5486b6 , #143066); border-radius: 20px; padding: 60px 100px;}
.align-ct{ text-align: center;}
.introBox{ text-align: center; margin-bottom: 60px;}
.txtBox{ text-align: center; margin: 40px 0;}
.txtBox2{ text-align: center; margin: 15px 0;}
.txtBox2 p{ font-weight: bold;}
.arrowBox{ text-align: center; margin: 20px 0;}
.txtOg,.txtOg *{ color: #EBA03B;}
.txtBu,.txtBu *{ color: #223062;}
.txtYe,.txtYe *{ color: #EBB93B;}
.titSub{ display: block; margin-top: 20px;}
.themeWhite #mainVisual .txt h2 { line-height: 1.2em;}
.dz-lower { padding: 100px 0;}
.dz-lower * {box-sizing: border-box;}
.dz-lower .navAnchor { margin: 0 auto 80px;}
.dz-lower .navAnchor a { display: block; font-size: 14px; border-radius: 1em; padding: 1.2em 0; background: linear-gradient( to right , #5486b6 , #143066 , #143066); background-size:200% 100%; color: #fff; text-decoration: none; position: relative; transition: all 0.5s linear 0s; width: 30%; text-align: center; font-weight: bold; letter-spacing: 0.1em;}
.dz-lower .navAnchor a:after {position: absolute; content: ''; display: block; right:2em; top:50%; background: url("../img/company/arrow_01.svg") center center no-repeat; pointer-events: none; width: 1em; height: 1em; transform: translateY(-50%);}
.dz-lower .navAnchor a:hover { text-decoration: none; background-position: 100% 0; color: #fff;}
.dz-lower .titH2 { margin-bottom: 80px; line-height: 1.4em;}
.dz-lower .titH2.nonBd { margin-bottom: 40px;}
.dz-lower #box1,
.dz-lower #box2,
.dz-lower #box3 { margin-bottom: 100px;}
.dz-lower .txtbox{ margin-bottom: 40px;}
.content540 { width: calc(100% - 40px); margin-left: auto; margin-right: auto; max-width: 1080px;}
#seminar{ margin-top: 80px;}
#seminar h5 { text-align: center; margin: 0 auto 40px auto;}
#seminar h5 .underBar03 { max-width: 670px;}
#seminar .talkLink { display: block; width: 100%; max-width: 730px; margin: 0 auto;}

/* DZ Security 01 */
# .navAnchor a { width: 21%;}
# .navAnchor a:last-child{ width: 28%;}
# #box1 .imgBox img{ max-width: 880px; width: 100%;}
# #box4 .box2{ margin-top: 80px;}
# #box4 .tit{ text-align: center; font-weight: bold; text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 2px; color: #123B73;}
# .pointList{ max-width: 900px; margin: 0 auto 0;}
# .pointList li{ text-align: center; flex-basis: calc((100% - 40px)/3);}


/* DZ Security 02 */
# #box1 .imgBox .bgBu{ display: inline-block;}
# #box2 .txt{ color: #223062; font-weight: bold; text-decoration: underline; text-decoration-color: #F6D84C;text-underline-offset: 10px; text-decoration-thickness: 2px; margin-bottom: 20px;}
# #box2 .titH2{ line-height: 1em; margin-bottom: 40px;}
#  #box2 .btnChild{ text-align: center;}


/* DZ Security 03 */
# #box3 .tit_sub{ font-weight: bold; text-decoration: underline; text-underline-offset: 0.5rem;}
# #cases li:nth-of-type(n+2){ margin-top: 20px;}
# #cases li{ display: block; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; color: #fff; text-align: center; text-decoration: none; padding: 80px 10px; font-weight: bold; text-shadow: 0 0 5px #000, 0 0 0.5px #000;}
# #cases li a:hover{ opacity: 0.8;}
# #cases li:first-of-type{ background-image: url(../img/dz/dz03_img_04.jpg);}
# #cases li:nth-of-type(2){ background-image: url(../img/dz/dz03_img_05.jpg);}
# #cases li:nth-of-type(3){ background-image: url(../img/dz/dz03_img_06.jpg);}
# #cases li:nth-of-type(4){ background-image: url(../img/dz/dz03_img_07.jpg);}

/* DZ Security 04 */
# .introBox{ max-width: 900px;}
# .introBox > div{ align-items: center;}
# .introBox .box1{ flex-basis: 30%;}
# .introBox .box2{ flex-basis: calc(70% - 40px); text-align: left;}
# #seminar .flexBox > div{ flex-basis: calc((100% - 40px)/2);}
# .li { list-style-type: none;}

# .modalYoutubeLink{ position: relative;}
# .modalYoutubeLink::before{ position: absolute; top: calc(50%  - 27px); left: calc(50% - 27px); content: ''; padding: 54px 54px 0 0; background: url(../img/dz/icon_play.svg) no-repeat 50% 50% / contain; z-index: 1;}

# .modalYoutubeLink2{ position: relative;}
# .modalYoutubeLink2::before{ position: absolute; top: calc(50%  - 190px); left: calc(50% - 27px); content: ''; padding: 54px 54px 0 0; background: url(../img/dz/icon_play.svg) no-repeat 50% 50% / contain; z-index: 1;}

span.example {font-size: 11px; color: #898989;}

#navAnchor .content1080 a {
    display: block;
    font-size: 14px;
    border-radius: 1em;
    padding: 1.2em 0;
    background: linear-gradient(to right, #5486b6, #143066, #143066);
    background-size: 200% 100%;
    color: #fff;
    text-decoration: none;
    position: relative;
    transition: all 0.5s linear 0s;
    width: 45%;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.1em;
}

#navAnchor .content1080 a::after {
    position: absolute;
    content: '';
    display: block;
    right: 2em;
    top: 50%;
    background: url(../img/company/arrow_01.svg) center center no-repeat;
    pointer-events: none;
    width: 1em;
    height: 1em;
    transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
    #navAnchor .content1080 a {
        width: 49%;
        margin-bottom: 2%;
    }
}

@media screen and ( min-width:768px ) {
	.align-ctpc{ text-align: center;}
}

@media screen and ( max-width:767px ) {
	.align-ctpc{ text-align: left;}
	.introBox{ margin-bottom: 40px;}
	.bgGy{ border-radius: 20px;}
	.bgGy,
	.bgBu{ padding: 50px 20px;}
	.dz-lower { padding: 60px 0;}
	.dz-lower #box1,
	.dz-lower #box2,
	.dz-lower #box3 { margin-bottom: 60px;}
	.dz-lower .titH2:not(.nonBd) { margin-bottom: 60px;}
	.dz-lower .navAnchor a { width: 100%!important;}
	.dz-lower .navAnchor a:not(:last-of-type) { margin-bottom: 10px;}
	.themeWhite #mainVisual .txt h2 { font-size: 24px; line-height: 1.4em;}
	#dz01 {padding: 60px 0 100px;}
	#dz01 .pointList li{ width: 100%;}
	#dz01 .pointList li:nth-of-type(n+2){ margin-top: 40px;}
	#dz01 .pointList li img{ max-width: 300px;}
	/* #dz01 .titH2 {margin-bottom: 60px;} */
	
	#dz03 .navAnchor a:last-of-type { width: 100%;}
	#dz03 #cases li a { padding: 60px 10px;}
	#dz04 .introBox .box1{ margin-bottom: 20px;}
	#dz04 #seminar .flexBox > div{ flex-basis: calc((100% - 10px)/2);}
	.modalYoutubeLink::before{ top: calc(50% - 20px); left: calc(50% - 20px); padding: 40px 40px 0 0;}
	.modalYoutubeLink2::before{ top: calc(50% - 185px); left: calc(50% - 20px); padding: 40px 40px 0 0;}

}